/* ==========================================================
   Kabi Prasad — Portfolio (Home v3)
   Colors, fonts and spacing live in :root — change them here.
   Values taken from Home_v3.pdf (1280px frame).
   ========================================================== */
:root {
  /* Colors */
  --bg: #000000;
  --text: #ffffff;
  --muted: #7a7a7a;        /* body copy */
  --card: #151515;         /* cards + chips */
  --card-hover: #1c1c1c;
  --mark: #1f1f1f;         /* logo tile */
  --mark-border: #a8a8a8;
  --line: rgba(255, 255, 255, 0.1);

  /* Fonts */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  /* Type scale — headings scale smoothly with screen width (max at 1280px) */
  --fs-display: clamp(40px, 5vw, 64px);     /* hero heading */
  --fs-cta: clamp(34px, 4.4vw, 56px);       /* footer heading */
  --fs-h2: clamp(30px, 3.2vw, 40px);        /* section headings */
  --fs-h3: 18px;                            /* card titles */
  --fs-lead: 18px;  --lh-lead: 28px;        /* intro paragraph */
  --fs-body: 16px;  --lh-body: 26px;        /* body copy */
  --fs-small: 14px; --lh-small: 20px;       /* labels, chips, meta */

  /* Spacing scale (4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 120) */
  --container: 1280px;
  --gutter: clamp(20px, 9.375vw, 120px);   /* left/right padding — 120px at 1280 */
  --col-gap: 40px;                          /* between the two big columns */
  --grid-gap: 24px;                         /* between cards */
  --card-pad: 24px;                         /* inside cards */
  --title-gap: 32px;                        /* section heading → content */
  --section-gap: 120px;                     /* between sections */
  --header-h: 100px;
  --radius: 12px;          /* one corner radius for every box */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* hide scrollbars everywhere (page + menu) — scrolling still works */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- Touch & focus feedback ---------- */
/* no blue/grey flash box when tapping on phones */
* { -webkit-tap-highlight-color: transparent; }
a, button { touch-action: manipulation; }          /* no double-tap zoom delay */
/* subtle "press" instead: the tapped item shrinks a touch and springs back */
html .btn:active, html .socials a:active, html .contact__item:active,
html .case:active, html .logo:active {
  transform: scale(.97); transition-duration: .1s;
}
html .menu-btn:active { transform: scale(.9); }
html .menu-btn.is-open:active { transform: rotate(45deg) scale(.9); }
html .chips span:active { transform: scale(.95); }
/* keyboard users still get a clear (non-blue) focus ring; mouse/touch clicks don't */
:focus { outline: none; }
:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 3px; border-radius: var(--radius); }
svg { flex: none; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  background: var(--bg);
  transition: background .4s, backdrop-filter .4s, transform .5s var(--ease);
}
.header.is-scrolled { background: rgba(0, 0, 0, .7); backdrop-filter: blur(14px); }
.header.is-hidden { transform: translateY(-100%); }
.header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }

.logo { display: flex; align-items: center; gap: 16px; }
/* Logo tile: 3D card flip — "K" on the front, photo on the back */
.logo__mark { width: 62px; height: 62px; perspective: 600px; flex: none; }
.logo__flip {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d;
  /* gentle + floppy: slow spring that overshoots a little, then settles */
  transition: transform 1.2s cubic-bezier(.34, 1.45, .5, 1);
}
.logo:hover .logo__flip, .logo:focus-visible .logo__flip { transform: rotateY(180deg); }
.logo__face {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--mark-border);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.logo__face--front { background: var(--mark); display: grid; place-items: center; }
.logo__face--back { transform: rotateY(180deg); background: var(--mark); }
.logo__k { font-family: var(--font-display); font-weight: 700; font-size: 37px; line-height: 1; }
.logo__img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transform: scale(1.15); transition: transform 1.2s var(--ease);
}
.logo:hover .logo__img { transform: scale(1); }

.logo__name {
  display: flex; flex-direction: column;
  font-family: var(--font-mono); font-weight: 700; font-size: 18px; line-height: 22px;
}
.logo__name span { display: block; }

/* 4-dot menu button */
.menu-btn {
  width: 44px; height: 44px; margin-right: -8px; position: relative; z-index: 60;
  display: grid; grid-template-columns: repeat(2, 12px); gap: 4px; place-content: center;
  transition: transform .5s var(--ease);
}
.menu-btn span {
  width: 12px; height: 12px; border-radius: 50%; background: var(--text);
  transition: transform .45s var(--ease);
}
/* hover: dots spread a little · open: button turns halfway (45°), still 4 dots */
.menu-btn:not(.is-open):hover span:nth-child(1) { transform: translate(-2px, -2px); }
.menu-btn:not(.is-open):hover span:nth-child(2) { transform: translate(2px, -2px); }
.menu-btn:not(.is-open):hover span:nth-child(3) { transform: translate(-2px, 2px); }
.menu-btn:not(.is-open):hover span:nth-child(4) { transform: translate(2px, 2px); }
.menu-btn.is-open { transform: rotate(45deg); }

/* ---------- Dropdown menu (glass panel) ---------- */
.menu {
  position: fixed; inset: 0; z-index: 40;
  visibility: hidden; transition: visibility 0s linear .5s;
}
.menu.is-open { visibility: visible; transition-delay: 0s; }
.menu::before {                        /* soft dim behind the panel; click to close */
  content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .45);
  opacity: 0; transition: opacity .4s;
}
.menu.is-open::before { opacity: 1; }
.menu__wrap { position: relative; padding-top: var(--header-h); }
.menu__panel {
  width: 100%; padding: 8px 32px; border-radius: var(--radius);
  max-height: calc(100dvh - var(--header-h) - 24px); overflow-y: auto;   /* short screens scroll */
  background: rgba(21, 21, 21, .82);
  border: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
          backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
  transform-origin: top center;
  opacity: 0; transform: translateY(-16px) scale(.98);
  transition: opacity .35s, transform .6s var(--ease);
}
.menu.is-open .menu__panel { opacity: 1; transform: none; }

/* rows: icon in a small container · label.
   Default = muted grey; hover / current section = active (white) */
.menu__list { list-style: none; display: grid; }
.menu__list a {
  display: flex; align-items: center; gap: 16px;
  padding: clamp(6px, 1.2vh, 12px) 0; color: rgba(255, 255, 255, .45);   /* rows shrink on short screens so all items fit */
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s, transform .6s var(--ease), color .3s;
}
.menu__icon {
  flex: none; width: clamp(36px, 5.2vh, 44px); height: clamp(36px, 5.2vh, 44px); border-radius: var(--radius);
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); color: inherit;
  transition: background .35s, color .35s, border-color .35s, transform .5s var(--ease);
}
.menu__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.menu__text {
  flex: 1; min-width: 0;
  font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 2.8vh, 24px); line-height: 1.25;
  transition: transform .45s var(--ease);
}
/* current section: white text, outlined icon */
.menu__list a.is-current { color: var(--text); }
.menu__list a.is-current .menu__icon { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); }
/* hover: full white, icon fills white */
@media (hover: hover) {
  .menu__list a:hover { color: var(--text); }
  .menu__list a:hover .menu__icon { background: var(--text); border-color: var(--text); color: var(--bg); transform: rotate(-6deg); }
  .menu__list a:hover .menu__text { transform: translateX(6px); }
}
html .menu__list a:active { color: var(--text); }
html .menu__list a:active .menu__icon { background: var(--text); border-color: var(--text); color: var(--bg); }

.menu.is-open .menu__list a { opacity: 1; transform: none; }
.menu.is-open .menu__list li:nth-child(1) a { transition-delay: .05s; }
.menu.is-open .menu__list li:nth-child(2) a { transition-delay: .09s; }
.menu.is-open .menu__list li:nth-child(3) a { transition-delay: .13s; }
.menu.is-open .menu__list li:nth-child(4) a { transition-delay: .17s; }
.menu.is-open .menu__list li:nth-child(5) a { transition-delay: .21s; }
.menu.is-open .menu__list li:nth-child(6) a { transition-delay: .25s; }
.menu.is-open .menu__list li:nth-child(7) a { transition-delay: .29s; }
.menu.is-open .menu__list a:hover { transition-delay: 0s; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 16px;
  height: 48px; padding: 0 20px; border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1;
  border: 1px solid var(--text);
  transition: background .3s, color .3s, transform .3s var(--ease);
}
.btn--solid { background: var(--text); color: var(--bg); }
.btn--ghost { color: var(--text); }
.btn:hover { transform: translateY(-2px); }
.btn--solid:hover { background: transparent; color: var(--text); }
.btn--ghost:hover { background: var(--text); color: var(--bg); }
.btn__arrow, .case__cta svg {
  width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8;
  transition: transform .35s var(--ease);
}
.btn:hover .btn__arrow, .case:hover .case__cta svg { transform: translate(2px, -2px); }

/* ---------- Hero ---------- */
.hero { --hero-gap: 60px; padding-top: calc(var(--header-h) + var(--hero-gap)); }   /* content starts at 160px */
@media (max-height: 820px) and (min-width: 768px) { .hero { --hero-gap: 32px; } }   /* short laptop screens: keep the whole hero visible */
.hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); align-items: start; }
.hero__title {
  margin-top: -6px;   /* optical: cap height lines up with photo top */
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-display); line-height: 1.08; letter-spacing: -0.02em;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; transform: translateY(105%); transition: transform 1s var(--ease); }
.is-loaded .hero__title .line > span { transform: none; }
.is-loaded .hero__title .line:nth-child(2) > span { transition-delay: .08s; }
.is-loaded .hero__title .line:nth-child(3) > span { transition-delay: .16s; }

.hero__hi { margin-top: 32px; font-size: 24px; line-height: 34px; }
.hero__bio { margin-top: 16px; max-width: 480px; color: var(--muted); font-size: var(--fs-lead); line-height: var(--lh-lead); }
.hero__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; }
@media (max-height: 700px) and (min-width: 768px) {   /* very short screens: slightly smaller hero type */
  .hero__title { font-size: 48px; }
  .hero__hi { margin-top: 24px; font-size: 20px; line-height: 30px; }
  .hero__bio { font-size: var(--fs-body); line-height: var(--lh-body); }
  .hero__actions { margin-top: 24px; }
}

/* Hero image placeholder — 500 × 584 (export at 2x: 1000 × 1168).
   It keeps that exact shape and only scales down so it always fits
   on screen (never cut off at the bottom). No effects on the image. */
.hero__media { container-type: inline-size; display: flex; justify-content: flex-end; }
.hero__photo {
  height: min(584px, calc(100svh - var(--header-h) - var(--hero-gap) - 32px), calc(100cqw * 584 / 500));
  aspect-ratio: 500 / 584;
}
/* Optional grid behind the hero image.
   To remove: delete "hero__photo--grid" in index.html (or this block). */
.hero__photo--grid { position: relative; isolation: isolate; }
.hero__photo--grid::before {           /* faint grid lines, fading out toward the edges */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;   /* only behind the image */
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 45%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 60% 60% at 50% 45%, #000 30%, transparent 85%);
}

/* No box: the image's edges fade into the black page (like the reference).
   Left edge fades the most so it melts toward the text; bottom fades out too. */
.hero__photo img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 22%, #000 82%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0%, #000 22%, #000 82%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 72%, transparent 100%);
          mask-composite: intersect;
}

/* ---------- Sections ---------- */
.section { padding-top: var(--section-gap); }
.section__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.015em;
  margin-bottom: var(--title-gap);
}
/* heading + one-line description under it */
/* heading on the left, small button on the right (stays in one row on mobile too) */
.section__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.section__row .section__title { margin-bottom: 0; }
.btn--sm { height: 40px; padding: 0 16px; gap: 10px; font-size: 15px; flex: none; }
.section__title--with-sub { margin-bottom: 12px; }
.section__sub { margin-bottom: var(--title-gap); max-width: 560px; color: var(--muted); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }

/* ---------- Career ---------- */
.career__text { color: var(--muted); display: grid; gap: 16px; }

/* ---------- Skills ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chips span {
  height: 40px; padding: 0 16px; border-radius: var(--radius);
  display: inline-flex; align-items: center;
  font-size: var(--fs-small); line-height: 1; background: var(--card);
  transition: background .3s, transform .3s var(--ease);
}
.chips span:hover { background: var(--card-hover); transform: translateY(-2px); }

/* ---------- How I work cards ---------- */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
.card {
  padding: var(--card-pad); border-radius: var(--radius);
  background: var(--card); transition: background .4s;
}
.card:hover { background: var(--card-hover); }
.card__icon {
  width: 56px; height: 56px; border-radius: var(--radius); background: var(--text); color: var(--bg);
  display: grid; place-items: center;
  transition: transform .5s var(--ease);
}
.card__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card:hover .card__icon { transform: rotate(-8deg) scale(1.05); }
.card__title { margin-top: 32px; font-size: var(--fs-h3); line-height: 26px; font-weight: 700; }
.card__text { margin-top: 8px; color: var(--muted); }

/* ---------- Selected work (case study glimpse) ---------- */

.cases { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
.case { display: flex; flex-direction: column; border-radius: var(--radius); background: var(--card); overflow: hidden; transition: background .4s; }
.case:hover { background: var(--card-hover); }
.case__media { aspect-ratio: 500 / 340; overflow: hidden; background: #0d0d0d; }
.case__media img { width: 100%; height: 100%; object-fit: cover; object-position: left center; transition: transform 1s var(--ease); }
.case:hover .case__media img { transform: scale(1.05); }
.case__body { padding: var(--card-pad); display: grid; gap: 8px; }
.case__tag { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.case__title { font-size: var(--fs-h3); line-height: 26px; font-weight: 700; }
.case__cta { margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; }

/* ---------- Feedback ---------- */
/* Endless auto-scroll inside the page padding. Cards fade to low opacity
   at the left/right edges; hovering the section pauses it. */
.quotes {
  overflow: hidden; padding: 8px 0;
  cursor: grab; touch-action: pan-y;           /* horizontal drag/swipe moves the strip, vertical still scrolls the page */
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.12) 0%, #000 16%, #000 84%, rgba(0,0,0,.12) 100%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,.12) 0%, #000 16%, #000 84%, rgba(0,0,0,.12) 100%);
}
.quotes.is-dragging { cursor: grabbing; user-select: none; }
.quotes.is-dragging .quote { pointer-events: none; }
.quotes__track {
  display: flex; gap: var(--grid-gap); width: max-content;
  padding-right: var(--grid-gap);              /* keeps the loop seamless */
  will-change: transform;                      /* moved by script.js */
}

.quote {
  position: relative; flex: 0 0 min(400px, 78vw);
  padding: var(--card-pad); border-radius: var(--radius); background: var(--card);
  display: flex; flex-direction: column;
  transition: background .4s, opacity .4s, transform .5s var(--ease);
}
.quote::before {                       /* big faded quote mark */
  content: "“"; position: absolute; top: 4px; right: 20px;
  font-family: var(--font-display); font-weight: 700; font-size: 96px; line-height: 1;
  color: rgba(255, 255, 255, .06); pointer-events: none;
  transition: color .5s, transform .6s var(--ease);
}
/* hovering one card: it lifts, the others step back */
/* (mouse devices only — on phones a tap leaves a "sticky" hover that would dim everything) */
@media (hover: hover) {
  .quotes__track:hover .quote { opacity: .5; }
  .quotes__track .quote:hover { opacity: 1; background: var(--card-hover); transform: translateY(-4px); }
  .quote:hover::before { color: rgba(255, 255, 255, .14); transform: translateY(-4px) rotate(-6deg); }
}

/* Active card (the one in the centre) — used on touch screens and while dragging,
   since there's no hover there to show which card is in focus */
@media (hover: none) {
  .quotes .quote { opacity: .4; transform: scale(.96); }
  .quotes .quote.is-active { opacity: 1; transform: none; background: var(--card-hover); }
  .quotes .quote.is-active::before { color: rgba(255, 255, 255, .14); }
}
.quotes.is-dragging .quote { opacity: .4; transform: scale(.96); }
.quotes.is-dragging .quote.is-active { opacity: 1; transform: none; background: var(--card-hover); }

/* dots under the strip (mobile only) */
.quotes-dots { display: none; justify-content: center; gap: 6px; margin-top: 20px; }
.quotes-dots span {
  width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .25);
  transition: width .4s var(--ease), background .4s;
}
.quotes-dots span.is-active { width: 20px; background: var(--text); }
@media (max-width: 767.98px) { .quotes-dots { display: flex; } }
.quote__tag { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 700; }
.quote__tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--text); animation: pulse 2.4s ease-in-out infinite; }
.quote__text { margin-top: 16px; color: var(--muted); flex: 1; }
.quote__by { margin-top: 32px; display: flex; align-items: center; gap: 12px; }
.avatar {
  flex: none; width: 44px; height: 44px; aspect-ratio: 1;   /* never squeezed into an oval */
  border-radius: 50%; background: var(--text); color: var(--bg);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 15px;
}
.quote__by strong { display: block; font-size: var(--fs-body); line-height: 22px; }
.quote__by small { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* ---------- Footer ---------- */
.footer { position: relative; overflow: hidden; margin-top: var(--section-gap); padding: 80px 0 32px; text-align: center; }
.footer__glow {
  position: absolute; left: 50%; bottom: -560px; width: 1100px; height: 900px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, .12), transparent 72%); pointer-events: none;
}
.footer__inner { position: relative; }
.footer__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-cta); line-height: 1.1; letter-spacing: -0.02em;
}
.footer__sub { margin-top: 24px; color: var(--muted); font-size: var(--fs-lead); line-height: var(--lh-lead); }
.contact { margin-top: 48px; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.contact__item {
  position: relative; display: grid; gap: 4px; text-align: left;
  min-width: 300px; padding: 20px var(--card-pad); border-radius: var(--radius);
  background: var(--card); font-size: var(--fs-body); line-height: 22px;
  transition: background .3s, transform .3s var(--ease);
}
.contact__item:hover { background: var(--card-hover); transform: translateY(-2px); }
.contact__item small { color: var(--muted); font-size: var(--fs-small); }
.contact__item em { position: absolute; right: var(--card-pad); top: 20px; font-style: normal; font-size: var(--fs-small); color: var(--muted); transition: color .3s; }
.contact__item:hover em { color: var(--text); }

.socials { margin-top: 32px; display: flex; justify-content: center; gap: 12px; }
.socials a {
  width: 44px; height: 44px; border-radius: var(--radius); background: var(--card);
  display: grid; place-items: center; color: var(--text);
  transition: background .3s, color .3s, transform .3s var(--ease);
}
.socials a:hover { background: var(--text); color: var(--bg); transform: translateY(-3px); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }

.footer__bottom {
  margin-top: 96px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.footer__sign { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.footer__copy { color: var(--muted); font-size: var(--fs-small); }

.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 20px);
  padding: 10px 18px; border-radius: 999px; background: var(--text); color: var(--bg);
  font-size: 14px; line-height: 1.2; opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s; z-index: 70;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================
   WORK PAGE (work.html)
   ========================================================== */
/* page intro */
.page-head { padding-top: calc(var(--header-h) + 48px); }
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: var(--fs-small); transition: color .3s;
}
.back-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.back-link:hover { color: var(--text); }
.back-link:hover svg { transform: translateX(-3px); }
.page-head__title {
  margin-top: 24px;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.015em;   /* same size as the home page section headings */
}
.page-head__sub { margin-top: 16px; max-width: 620px; color: var(--muted); font-size: var(--fs-lead); line-height: var(--lh-lead); }
.work { padding-top: 48px; }

/* filter chips (Case studies / Interaction / …) — selected chip is solid white */
.tabs {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding-block: 6px; margin-block: -6px;   /* room for the hover lift — the scroll box would otherwise clip it */
  overflow-x: auto; scrollbar-width: none;
}
.tabs__pill { display: none; }        /* not used with chips */
.tabs__btn {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 600; font-size: 16px; white-space: nowrap;
  color: rgba(255, 255, 255, .6);
  background: var(--card); border: 1px solid rgba(255, 255, 255, .08);
  transition: color .3s, background .3s, border-color .3s, transform .3s var(--ease);
}
.tabs__btn:hover { color: var(--text); border-color: rgba(255, 255, 255, .2); transform: translateY(-2px); }
.tabs__btn.is-active, body.glass .tabs__btn.is-active { color: var(--bg); background: var(--text); border-color: var(--text); transform: none; }
.tabs__count {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;   /* true centre for the number */
  font-family: var(--font-display); font-size: 12px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .1); transition: background .3s;
}
.tabs__btn.is-active .tabs__count { background: rgba(0, 0, 0, .1); }

/* panels */
.tab-panel {
  margin-top: var(--title-gap); display: grid; gap: var(--grid-gap);
  scroll-margin-top: calc(var(--header-h) + 100px);   /* work.html#photography keeps the tabs visible above */
}
.tab-panel[hidden] { display: none; }
.tab-panel.is-entering { animation: panel-in .6s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(16px); } }

/* case study cards — big thumbnail, then info + meta */
.study {
  display: block; border-radius: var(--radius); overflow: hidden;
  scroll-margin-top: calc(var(--header-h) + 16px);   /* links like work.html#magica land below the header */
  background: var(--card); transition: background .4s;
}
.study:hover { background: var(--card-hover); }
.study__media { aspect-ratio: 16 / 8; overflow: hidden; background: #0d0d0d; }
.study__media img { width: 100%; height: 100%; object-fit: cover; object-position: left center; transition: transform 1.1s var(--ease); }
.study:hover .study__media img { transform: scale(1.04); }
.study__media--placeholder { display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #1d1d1d, #0a0a0a); }
.steps { display: grid; gap: 10px; width: min(70%, 420px); }
.steps span {
  padding: 14px 18px; border-radius: var(--radius);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
  font-size: var(--fs-small); transition: transform .6s var(--ease);
}
.study:hover .steps span:nth-child(odd) { transform: translateX(10px); }
.study:hover .steps span:nth-child(even) { transform: translateX(-10px); }

.study__body {
  padding: var(--card-pad);
  display: grid; grid-template-columns: 1fr auto; gap: 16px 48px; align-items: start;
}
.study__tag { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.study__title {
  margin-top: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -0.01em;
}
.study__text { margin-top: 8px; max-width: 560px; color: var(--muted); }
.study__meta { display: grid; gap: 12px; min-width: 200px; }
.study__meta dt { color: var(--muted); font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: .06em; }
.study__meta dd { font-size: var(--fs-small); line-height: var(--lh-small); }
.study__cta {
  grid-column: 1 / -1; margin-top: 8px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700;
}
.study__cta svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .35s var(--ease); }
.study:hover .study__cta svg { transform: translate(2px, -2px); }

/* gallery grids (interaction, visual design, photography) */
.shots { display: grid; gap: var(--grid-gap); }
.shots--2 { grid-template-columns: repeat(2, 1fr); }
.shots--3 { grid-template-columns: repeat(3, 1fr); }
/* photography: real masonry — tall and wide photos stack without gaps */
.shots--masonry { display: block; columns: 3; column-gap: var(--grid-gap); }
.shots--masonry .shot { break-inside: avoid; margin-bottom: var(--grid-gap); }
.shot { margin: 0; }
.shot__media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius); background: var(--card);
  transition: background .4s;
}
.shot--tall .shot__media { aspect-ratio: 3 / 4; }
.shot__media img, .shot__media video { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.shot:hover .shot__media img, .shot:hover .shot__media video { transform: scale(1.04); }
.shot__media--placeholder {
  display: grid; place-items: center; align-content: center; gap: 12px;
  color: var(--muted); font-size: 12px;
}
.shot:hover .shot__media--placeholder { background: var(--card-hover); }
.shot__icon {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .04) center / 20px no-repeat;
  transition: transform .5s var(--ease), background-color .35s;
}
.shot:hover .shot__icon { transform: scale(1.08); background-color: rgba(255, 255, 255, .1); }
.shot__icon--play { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); }
.shot__icon--image { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 16-5-5-9 9'/%3E%3C/svg%3E"); }
.shot__icon--camera { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E"); }
.shot figcaption { margin-top: 12px; display: grid; gap: 2px; }
.shot figcaption b { font-size: var(--fs-body); }
.shot figcaption span { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }

/* ==========================================================
   CASE STUDY PAGE (magica.html) — reuses the home page tokens
   ========================================================== */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 55; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px;
  color: var(--muted); font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase;
}
.tag-live, .stage__no em {
  font-style: normal; text-transform: none; letter-spacing: 0; font-size: 11px;
  padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); color: var(--text);
}
.cs-block { padding-top: var(--section-gap); }
.cs-block--tight { padding-top: 48px; }

/* hero */
.cs-hero { padding-top: calc(var(--header-h) + 48px); }
.cs-hero__grid { margin-top: 32px; display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--col-gap); align-items: center; }
.cs-hero__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 4.4vw, 56px); line-height: 1.08; letter-spacing: -0.02em;
}
.cs-hero__lead { margin-top: 20px; max-width: 540px; color: var(--muted); font-size: var(--fs-lead); line-height: var(--lh-lead); }
.status { margin-top: 24px; display: inline-flex; align-items: flex-start; gap: 10px; font-size: var(--fs-small); line-height: var(--lh-small); }
.status i { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease-in-out infinite; }

/* concept illustration */
.concept { padding: 24px; border-radius: var(--radius); background: var(--card); border: 1px solid rgba(255, 255, 255, .08); }
.concept__old { display: flex; flex-wrap: wrap; gap: 8px; }
.concept__old span {
  padding: 6px 12px; border-radius: 999px; border: 1px dashed rgba(255, 255, 255, .2);
  color: var(--muted); font-size: 12px; text-decoration: line-through;
  animation: fade-out 4s var(--ease) infinite;
}
.concept__old span:nth-child(2) { animation-delay: .25s; }
.concept__old span:nth-child(3) { animation-delay: .5s; }
@keyframes fade-out { 0%, 30% { opacity: 1; } 55%, 85% { opacity: .25; } 100% { opacity: 1; } }
.concept__input {
  margin-top: 16px; padding: 16px; border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .35);
}
.concept__input p { font-family: var(--font-display); font-size: 18px; line-height: 26px; min-height: 26px; }
.concept__caret { display: inline-block; width: 2px; height: 20px; margin-left: 2px; vertical-align: -3px; background: var(--text); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.concept__row { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.concept__row small { margin-right: 4px; color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.concept__pick { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 12px; }
.concept__send { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; }
.concept__send svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* project facts */
.cs-meta {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
}
.cs-meta dt { color: var(--muted); font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; }
.cs-meta dd { margin-top: 6px; font-size: var(--fs-small); line-height: var(--lh-small); }

.cs-cover { border-radius: var(--radius); overflow: hidden; background: #0d0d0d; aspect-ratio: 16 / 8; }
.cs-cover img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }

/* text layouts */
.cs-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); align-items: start; }
.cs-split .section__title { margin-bottom: 0; }
.cs-prose { display: grid; gap: 16px; color: var(--muted); }
.cs-split > div > .cs-prose { margin-top: 16px; }
.cs-question {
  margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 3fr; gap: var(--col-gap);
}
.cs-question p { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; }
.cs-subhead { margin: 48px 0 16px; font-family: var(--font-display); font-weight: 700; font-size: 20px; }

/* panels */
.cs-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); align-items: start; }
.panel { padding: var(--card-pad); border-radius: var(--radius); background: var(--card); }
.panel__title { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.25; }
.panel__text { margin-top: 12px; color: var(--muted); }
.rows { list-style: none; margin-top: 20px; }
.rows li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: var(--lh-small);
}
.rows--text li { display: block; padding: 16px 0; color: var(--muted); font-size: var(--fs-body); line-height: var(--lh-body); }
.rows--text li b { color: var(--text); }
.badge { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11px; }
.badge--outline { background: none; color: var(--text); border: 1px solid rgba(255, 255, 255, .25); }

.note {
  margin-top: var(--grid-gap); padding: var(--card-pad); border-radius: var(--radius);
  background: var(--card); display: grid; grid-template-columns: 1fr 2fr; gap: var(--col-gap);
}
.note__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.3; }

/* before / after */
.compare { margin-top: var(--title-gap); display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
.compare__card { padding: var(--card-pad); border-radius: var(--radius); background: var(--card); }
.compare__card ol, .compare__card ul { list-style: none; display: grid; gap: 12px; }
.compare__card ol li { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--muted); }
.compare__card ul li { padding-top: 12px; border-top: 1px solid var(--line); }
.compare__card ul li:first-child { padding-top: 0; border-top: 0; }
.compare__card--new { background: var(--accent); color: var(--on-accent); }
.compare__card--new .eyebrow { color: rgba(0, 0, 0, .55); }
.compare__card--new ol li { color: var(--on-accent); }
.compare__card--new ul li { border-color: rgba(0, 0, 0, .1); }
.compare__card--muted { background: none; border: 1px dashed rgba(255, 255, 255, .18); color: var(--muted); }

.diff { margin-top: 32px; }
.diff__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); padding: 14px 0; border-top: 1px solid var(--line); }
.diff__row span:first-child { color: var(--muted); }
.diff__row:last-child { border-bottom: 1px solid var(--line); }

.callout {
  margin-top: 64px; max-width: 760px;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.25; letter-spacing: -0.01em;
}
.callout span { color: var(--accent-text); }

/* evolution stages */
.stages { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--grid-gap); }
.stage { padding-top: 16px; border-top: 2px solid rgba(255, 255, 255, .2); }
.stage--now { border-top-color: var(--accent); }
.stage__no { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.stage--now .stage__no em { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.stage h3 { margin-top: 12px; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.3; }
.stage p { margin-top: 8px; font-size: var(--fs-small); line-height: var(--lh-small); }
.stage small { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 19px; }

/* numbered flow */
.flow { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.flow__step { padding: var(--card-pad); border-radius: var(--radius); background: var(--card); transition: background .4s, transform .5s var(--ease); }
.flow__step:hover { background: var(--card-hover); transform: translateY(-3px); }
.flow__step > span { color: var(--muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.flow__step b { display: block; margin-top: 16px; font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.flow__step p { margin-top: 8px; color: var(--muted); }
.flow--six .flow__step > span { color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0; text-transform: none; }

/* process loop chips */
.loop { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.loop span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); font-size: 12px;
}
.loop span:not(:last-child)::after { content: "\2192"; margin-right: -4px; color: var(--muted); }
.loop .is-key { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.cs-split > .rows--text { margin-top: 0; }
.cs-split > .rows--text li:first-child { border-top: 0; padding-top: 0; }

/* principles + screens */
.principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.principles b { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.principles p { margin-top: 8px; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.screens { display: grid; gap: var(--grid-gap); }
.screens--web { grid-template-columns: repeat(3, 1fr); }
.screens--web .shot__media { aspect-ratio: 1280 / 832; }     /* matches the 1280 × 832 web frames */
.screens--mobile { grid-template-columns: repeat(6, 1fr); }
.screens--mobile .shot__media { aspect-ratio: 402 / 874; }   /* matches the 402 × 874 mobile frames */
.screens--mobile .shot__icon { width: 40px; height: 40px; background-size: 16px; }

/* design system */
.ds { margin-top: var(--title-gap); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.tags span { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); font-size: 12px; line-height: 16px; transition: background .3s; }
.tags span:hover { background: rgba(255, 255, 255, .08); }
.tags .is-key { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.why { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.why h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.why p { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }

/* team */
.team { margin-top: var(--title-gap); }
.team__row { display: grid; grid-template-columns: 1fr 3fr; gap: var(--grid-gap); padding: 16px 0; border-top: 1px solid var(--line); }
.team__row:last-child { border-bottom: 1px solid var(--line); }
.team__row b { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.team__row p { color: var(--muted); }
.team__row--me b { display: inline-flex; align-items: center; gap: 10px; }
.team__row--me b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.metrics { margin-top: 48px; display: grid; grid-template-columns: 1fr 3fr; gap: var(--grid-gap); align-items: start; }
.metrics h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.3; }
.metrics .tags { margin-top: 0; }

/* learnings + closing */
.learned { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); }
.learned__item { padding-top: 16px; border-top: 2px solid rgba(255, 255, 255, .2); }
.learned__item b { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.learned__item p { margin-top: 8px; color: var(--muted); }
.closing {
  margin-top: 96px; max-width: 900px;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; letter-spacing: -0.02em;
}
.next-case {
  margin-top: 64px; padding: var(--card-pad); border-radius: var(--radius);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 24px;
  border: 1px solid rgba(255, 255, 255, .14); position: relative; overflow: hidden; isolation: isolate;
  transition: background .4s var(--ease), border-color .4s;
}
.next-case .eyebrow { margin: 0; grid-column: 1; }
.next-case__title { grid-column: 1; font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.25; }
.next-case svg { grid-column: 2; grid-row: 1 / 3; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); }
@media (hover: hover) {
  .next-case:hover { background: var(--card-hover); border-color: rgba(255, 255, 255, .28); }   /* minimal: card lifts a shade, border brightens */
  .next-case:hover svg { transform: translateX(6px); }
}

/* ---------- Glass theme (same frosted look as the menu) ----------
   Switched on by <body class="glass">. Remove that class to turn it all off. */
body.glass {
  --card: rgba(255, 255, 255, .055);           /* see-through white tint instead of solid #151515 */
  --card-hover: rgba(255, 255, 255, .085);
  --glass-border: rgba(255, 255, 255, .08);
  --glass-shine: inset 0 1px 0 rgba(255, 255, 255, .06);
}
/* faint light behind the page so the frosted blur has something to catch */
body.glass::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40vw 40vw at 85% 20%, rgba(255, 255, 255, .045), transparent 70%),
    radial-gradient(45vw 45vw at 10% 75%, rgba(255, 255, 255, .035), transparent 70%);
}
body.glass { background: var(--bg); isolation: isolate; }

body.glass .card,
body.glass .case,
body.glass .quote,
body.glass .contact__item,
body.glass .socials a,
body.glass .chips span,
body.glass .study,
body.glass .shot__media,
body.glass .tabs__btn,
body.glass .panel,
body.glass .concept,
body.glass .note,
body.glass .flow__step,
body.glass .model-table,
body.glass .plan,
body.glass .compare__card:not(.compare__card--new):not(.compare__card--muted) {
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shine);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
}
/* the feedback cards keep moving — skip the blur there to keep scrolling smooth */
body.glass .quote { -webkit-backdrop-filter: none; backdrop-filter: none; }
body.glass .card:hover, body.glass .case:hover, body.glass .contact__item:hover,
body.glass .quote.is-active, body.glass .study:hover, body.glass .shot:hover .shot__media { border-color: rgba(255, 255, 255, .16); }

/* outlined buttons get a frosted fill too */
body.glass .btn--ghost {
  background: rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
body.glass .btn--ghost:hover { background: var(--text); }

/* header: see-through at the top (no black band over the background light), frosted bar once you scroll */
body.glass .header { background: transparent; }
body.glass .header.is-scrolled {
  background: rgba(10, 10, 10, .55);
  border-bottom: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
/* keep hover transitions working on revealed cards */
.card.reveal, .case.reveal, .quote.reveal {
  transition: opacity .9s var(--ease), transform .9s var(--ease), background .4s;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; transition-delay: 0s !important; }
  .reveal, .hero__title .line > span { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1023.98px) {
  :root { --col-gap: 32px; --grid-gap: 20px; --section-gap: 96px; }
  .hero__hi { font-size: 20px; line-height: 30px; }
  .hero__bio { font-size: var(--fs-body); line-height: var(--lh-body); }
}
@media (max-width: 767.98px) {
  :root {
    --gutter: 16px;   /* left/right padding on mobile */
    --header-h: 80px; --section-gap: 72px; --title-gap: 24px;
    --grid-gap: 16px; --card-pad: 20px;
    --fs-body: 15px; --lh-body: 24px; --fs-lead: 16px; --lh-lead: 26px; --fs-h3: 17px;
  }
  .logo__mark { width: 50px; height: 50px; }
  .logo__k { font-size: 30px; }
  .logo__name { font-size: 16px; line-height: 21px; }
  .menu__panel { padding: 4px 20px; }
  .menu__list a { padding: clamp(6px, 1.2vh, 10px) 0; gap: 14px; }
  .menu__icon { width: clamp(34px, 5vh, 40px); height: clamp(34px, 5vh, 40px); }
  .menu__icon svg { width: 18px; height: 18px; }
  .menu__text { font-size: clamp(18px, 2.6vh, 20px); }
  .hero { padding-top: calc(var(--header-h) + 24px); }
  .hero__inner, .split, .cards, .cases { grid-template-columns: 1fr; }
  .split { gap: var(--section-gap); }
  .hero__media { order: -1; justify-content: center; }
  .hero__title { margin-top: 0; }
  .hero__hi { margin-top: 24px; font-size: 18px; line-height: 28px; }
  .hero__actions { margin-top: 24px; flex-direction: column; gap: 12px; }
  .hero__actions .btn { width: 100%; justify-content: center; }   /* full-width CTAs */
  .card__title { margin-top: 24px; }
  .chips { gap: 8px; }
  .chips span { height: 36px; padding: 0 12px; font-size: 13px; }
  .contact__item { min-width: 0; width: 100%; }
  .footer__bottom { justify-content: center; text-align: center; }
}

/* ---------- Work page: tablet & mobile ---------- */
@media (max-width: 1023.98px) {
  .shots--3 { grid-template-columns: repeat(2, 1fr); }
  .shots--masonry { columns: 2; }
  .study__body { grid-template-columns: 1fr; }
  .study__meta { grid-template-columns: repeat(3, auto); justify-content: start; gap: 32px; }
}
@media (max-width: 767.98px) {
  .page-head { padding-top: calc(var(--header-h) + 24px); }
  .work { padding-top: 32px; }
  .tabs { flex-wrap: nowrap; gap: 8px; margin-inline: calc(-1 * var(--gutter)); padding: 6px var(--gutter); scroll-padding-inline: var(--gutter); scroll-snap-type: x proximity; overscroll-behavior-x: contain; }   /* one row, swipe left/right, runs to the screen edges */
  .tabs__btn { height: 38px; padding: 0 14px; gap: 6px; font-size: 14px; scroll-snap-align: start; }
  .tabs__count { min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; }
  .study__media { aspect-ratio: 4 / 3; }
  .study__meta { grid-template-columns: 1fr 1fr; gap: 12px 24px; }
  .steps { width: 80%; }
  .shots--2 { grid-template-columns: 1fr; }
  .shots--3 { grid-template-columns: 1fr; }
  .shots--masonry { columns: 2; column-gap: 12px; }
  .shots--masonry .shot { margin-bottom: 12px; }
}

/* ---------- Case study: tablet & mobile ---------- */
@media (max-width: 1023.98px) {
  .cs-hero__grid, .cs-split, .cs-two, .note { grid-template-columns: 1fr; }
  .cs-meta { grid-template-columns: repeat(3, 1fr); }
  .stages { grid-template-columns: repeat(2, 1fr); }
  .principles, .why { grid-template-columns: repeat(2, 1fr); }
  .screens--mobile { grid-template-columns: repeat(3, 1fr); }
  .ds { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  .cs-hero { padding-top: calc(var(--header-h) + 24px); }
  .cs-hero__grid { margin-top: 20px; }
  .cs-meta { grid-template-columns: 1fr 1fr; gap: 16px; }
  .cs-cover { aspect-ratio: 4 / 3; }
  .cs-question, .metrics, .team__row { grid-template-columns: 1fr; gap: 8px; }
  .compare, .diff__row, .stages, .flow, .principles, .why, .learned { grid-template-columns: 1fr; }
  .diff__row { gap: 4px; }
  .screens--web { grid-template-columns: 1fr; }
  .screens--mobile {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .screens--mobile .shot { flex: 0 0 46%; scroll-snap-align: start; }
  .compare__card ol li { font-size: 18px; }
  .callout, .cs-question { margin-top: 48px; }
  .closing { margin-top: 64px; }
}

/* ---------- Case study accent ----------
   Default (Magica) = white. A brand page sets its own colour on <body>, e.g. class="theme-driev". */
:root { --accent: #ffffff; --on-accent: #000000; --accent-text: var(--muted); }
body.theme-driev { --accent: #3db54a; --on-accent: #04140a; --accent-text: #3db54a; }
.eyebrow--accent { color: var(--accent-text); }
.accent { color: var(--accent); }

/* comparison table (two business models) */
.model-table { margin-top: var(--title-gap); border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); background: var(--card); }
.model-table__row { display: grid; grid-template-columns: 1fr 2fr 2fr; gap: 24px; padding: 16px var(--card-pad); border-top: 1px solid var(--line); }
.model-table__row:first-child { border-top: 0; }
.model-table__row > :first-child { font-weight: 700; font-size: var(--fs-small); }
.model-table__row > :last-child { color: var(--muted); }
.model-table__head { background: rgba(255, 255, 255, .04); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.model-table__head > :nth-child(2) { color: var(--accent-text); }
.ph {                                     /* [ADD …] placeholder text you still need to fill */
  display: block; padding: 8px 12px; border-radius: var(--radius); font-style: normal;
  border: 1px dashed rgba(255, 255, 255, .18); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small);
}

/* simple card grids */
.cards-3, .cards-4 { margin-top: var(--title-gap); display: grid; gap: var(--grid-gap); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.cards-3 .wide { grid-column: 1 / -1; }
.cards-3 .eyebrow, .cards-4 .eyebrow { color: var(--accent-text); }
.flow--4 { grid-template-columns: repeat(4, 1fr); }
.flow--5 { grid-template-columns: repeat(5, 1fr); }
.flow--5 .flow__step:last-child:nth-child(6) { grid-column: 1 / -1; }
.flow__step .eyebrow { color: var(--accent-text); margin-bottom: 0; }
.flow__step .eyebrow + p { margin-top: 12px; color: var(--text); }
.learned--three { grid-template-columns: repeat(3, 1fr); }

/* rental plans */
.plans { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.plan { padding: var(--card-pad); border-radius: var(--radius); background: var(--card); border: 1px solid rgba(255, 255, 255, .1); display: grid; gap: 10px; align-content: start; }
.plan b { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin-bottom: 4px; }

/* outcome stats */
.stats { margin-top: var(--title-gap); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.stat { padding: var(--card-pad); border-radius: var(--radius); background: var(--accent); color: var(--on-accent); }
.stat b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 4.4vw, 56px); line-height: 1; letter-spacing: -0.02em; }
.stat span { display: block; margin-top: 12px; font-size: var(--fs-small); line-height: var(--lh-small); }

/* decision list with version badges */
.decisions { list-style: none; }
.decisions li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.decisions li:last-child { border-bottom: 1px solid var(--line); }
.decisions b { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.decisions p { margin-top: 4px; color: var(--muted); }
.vtag {
  justify-self: start; align-self: start; margin-top: 2px;
  padding: 3px 10px; border-radius: 999px; font-size: 11px; line-height: 16px;
  border: 1px solid rgba(255, 255, 255, .25);
}
.vtag--v2 { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.vtag--v1 { border-color: var(--accent); color: var(--accent-text); }

/* wide flow-diagram placeholder */
.screens--diagram .shot__media { aspect-ratio: 1920 / 1080; }   /* user-flow artboard: 1920 × 1080 px (export @2x = 3840 × 2160) */
.screens--mobile-5 { grid-template-columns: repeat(5, 1fr); }

/* concept: web booking steps (active step cycles) */
.concept__steps { list-style: none; display: grid; gap: 8px; margin-top: 4px; }
.concept__steps li {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .12); font-size: var(--fs-small);
  transition: background .5s var(--ease), color .5s, border-color .5s;
}
.concept__steps li span { color: var(--muted); font-size: 12px; transition: color .5s; }
.concept__steps li.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.concept__steps li.is-active span { color: var(--on-accent); }

/* concept: app station card */
.station { padding: 16px; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .35); }
.station__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.station__top b { font-family: var(--font-display); font-size: 18px; }
.station__free { padding: 3px 10px; border-radius: 999px; font-size: 11px; color: var(--accent-text); border: 1px solid var(--accent); }
.station__battery { margin-top: 16px; display: flex; justify-content: space-between; font-size: var(--fs-small); }
.station__bar { margin-top: 8px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.station__bar span { display: block; height: 100%; width: 78%; border-radius: inherit; background: var(--accent); transform-origin: left; animation: charge 3.2s var(--ease) infinite; }
@keyframes charge { 0% { transform: scaleX(.15); } 45%, 85% { transform: scaleX(1); } 100% { transform: scaleX(.15); } }
.station small { display: block; margin-top: 10px; color: var(--muted); font-size: 12px; }
.station__actions { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.station__actions span { height: 40px; border-radius: var(--radius); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 14px; border: 1px solid rgba(255, 255, 255, .3); }
.station__actions span:first-child { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

@media (max-width: 1023.98px) {
  .cards-4, .plans, .flow--4, .flow--5 { grid-template-columns: repeat(2, 1fr); }
  .learned--three, .cards-3 { grid-template-columns: repeat(2, 1fr); }
  .screens--mobile-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px) {
  .model-table__row { grid-template-columns: 1fr; gap: 4px; }
  .model-table__head { display: none; }
  .model-table__row > :nth-child(2)::before { content: "This study · "; color: var(--accent-text); font-size: 12px; }
  .model-table__row > :nth-child(3)::before { content: "Other model · "; color: var(--muted); font-size: 12px; }
  .cards-3, .cards-4, .flow--4, .flow--5, .learned--three, .stats { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr 1fr; }
  .screens--diagram .shot__media { aspect-ratio: 1920 / 1080; }   /* same shape on mobile so the whole flow stays visible */
  .screens--mobile-5 { display: flex; }
}

/* ---------- Case study helpers ---------- */
.text-link { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; transition: text-decoration-color .3s; }
.text-link:hover { text-decoration-color: var(--accent); }
.t-strong { color: var(--text); }
.compare__card .panel__title { margin-top: 4px; }
.compare__card--new .panel__text { color: var(--on-accent); opacity: .85; }
.closing--first { margin-top: 0; margin-bottom: 20px; }
.cs-gap { margin-top: 64px; display: block; }
.cs-gap-sm { margin-top: var(--grid-gap); }
.loop--map { margin-top: 0; }
.loop--map span { font-size: 13px; padding: 8px 14px; }
.loop .is-goal { border-color: var(--accent); color: var(--accent-text); }
.loop .is-key:not(:last-child)::after { color: var(--on-accent); }   /* arrow on the filled chip uses the dark text colour */
.cs-cover.shot__media--placeholder { display: grid; place-items: center; align-content: center; gap: 12px; background: var(--card); color: var(--muted); font-size: 12px; }
.stats + .compare { margin-top: var(--grid-gap); }

/* ---------- Home: selected work teaser (screens peek up behind a fade) ---------- */
.peek {
  position: relative; display: block; height: clamp(320px, 34vw, 420px);
  border-radius: var(--radius); overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(255, 255, 255, .06), transparent 70%), var(--card);
  border: 1px solid rgba(255, 255, 255, .07);
}
.peek__cards {
  position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; gap: 20px;
  padding-top: 56px;
}
.peek__card {
  flex: none; width: 30%; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden;
  background: #111; border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  transition: transform 1s var(--ease), opacity 1s var(--ease);
}
.peek__card img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.peek__card--l, .peek__card--r { transform: translateY(56px); opacity: .55; }
.peek__card--l { transform: translateY(56px) rotate(-3deg); }
.peek__card--r { transform: translateY(56px) rotate(3deg); }

/* the fade that hides the lower part */
.peek::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 25%, rgba(0, 0, 0, .75) 62%, #000 92%);
}
.peek__cta { position: absolute; left: 0; right: 0; bottom: 36px; z-index: 1; display: flex; justify-content: center; }

@media (hover: hover) {
  .peek:hover .peek__card--m { transform: translateY(-14px); }
  .peek:hover .peek__card--l { transform: translateY(36px) rotate(-5deg); opacity: .8; }
  .peek:hover .peek__card--r { transform: translateY(36px) rotate(5deg); opacity: .8; }
  /* the button shows its normal hover state when the frame is hovered */
  .peek:hover .btn--solid { background: transparent; color: var(--text); transform: translateY(-2px); }
  .peek:hover .btn__arrow { transform: translate(2px, -2px); }
}

@media (max-width: 767.98px) {
  .peek { height: 340px; }
  .peek__cards { gap: 12px; padding-top: 40px; }
  .peek__card { width: 56%; }
  .peek__card--l, .peek__card--r { margin-inline: -16%; }
  .peek__cta { bottom: 24px; }
}

/* ---------- Work page: preview window (lightbox) ---------- */
[data-lightbox] .shot__media { cursor: zoom-in; }
[data-lightbox] .shot__media::after {          /* small "expand" hint on hover */
  content: ""; position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0, 0, 0, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7'/%3E%3C/svg%3E") center / 14px no-repeat;
  border: 1px solid rgba(255, 255, 255, .2);
  opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s var(--ease);
}
[data-lightbox] .shot:hover .shot__media::after,
[data-lightbox] .shot__media:focus-visible::after { opacity: 1; transform: none; }

.lightbox {
  position: fixed; inset: 0; z-index: 80;
  display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 16px;
  padding: 72px 24px 32px;
  background: rgba(0, 0, 0, .86);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  opacity: 0; transition: opacity .35s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__figure { margin: 0; display: grid; justify-items: center; gap: 16px; min-width: 0; }
.lightbox__stage {
  position: relative; max-height: calc(100dvh - 180px);
  width: min(100%, 1200px, calc((100dvh - 180px) * var(--lb-r, 1.3333)));   /* keeps the item's shape on short screens */
  aspect-ratio: var(--lb-ratio, 4 / 3); border-radius: var(--radius); overflow: hidden;
  background: var(--card); border: 1px solid rgba(255, 255, 255, .1);
  transform: scale(.96); transition: transform .45s var(--ease);
}
.lightbox.is-open .lightbox__stage { transform: none; }
.lightbox__stage--tall { width: auto; height: calc(100dvh - 180px); }
.lightbox__stage img, .lightbox__stage video { width: 100%; height: 100%; object-fit: contain; display: block; }
.lightbox__stage.shot__media--placeholder { font-size: 14px; }
.lightbox__stage .shot__icon { width: 72px; height: 72px; background-size: 26px; }
.lightbox__caption { display: grid; justify-items: center; gap: 4px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.lightbox__caption small { color: var(--muted); font-family: var(--font-mono); font-weight: 400; font-size: 12px; }
.lightbox__close, .lightbox__nav {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: var(--text);
  transition: background .3s, color .3s, transform .3s var(--ease);
}
.lightbox__close svg, .lightbox__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__close:hover, .lightbox__nav:hover { background: var(--text); color: var(--bg); }
.lightbox__close { position: absolute; top: 16px; right: 16px; }
.lightbox__nav--next { justify-self: end; }
@media (max-width: 767.98px) {
  .lightbox { grid-template-columns: 1fr; padding: 72px 16px 24px; }
  .lightbox__nav { position: absolute; bottom: 20px; width: 44px; height: 44px; }
  .lightbox__nav--prev { left: 16px; }
  .lightbox__nav--next { right: 16px; }
  .lightbox__stage { max-height: calc(100dvh - 220px); }
  .lightbox__stage--tall { height: auto; width: 100%; }
}

/* ---------- Work page: interaction videos (paused, play button → full preview) ---------- */
.shot__media video { pointer-events: none; }                    /* clicks open the preview */
.shot__media--video::after { display: none; }                   /* the play button replaces the expand hint */
.shot__play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") 55% center / 24px no-repeat;
  border: 1px solid rgba(255, 255, 255, .25);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: transform .4s var(--ease), background-color .3s;
  pointer-events: none;
}
.shot:hover .shot__play { transform: translate(-50%, -50%) scale(1.08); background-color: rgba(0, 0, 0, .75); }

/* ---------- Work page: "coming soon" tab (Photography) ---------- */
.soon {
  display: grid; justify-items: center; text-align: center; gap: 16px;
  padding: clamp(48px, 7vw, 88px) 24px; border-radius: var(--radius);
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(255, 255, 255, .06), transparent 70%),
    var(--card);
  border: 1px dashed rgba(255, 255, 255, .16);
}
.soon__icon {
  width: 72px; height: 72px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / 28px no-repeat;
  animation: soon-focus 3.2s ease-in-out infinite;             /* a slow "focusing" pulse */
}
@keyframes soon-focus { 50% { transform: scale(1.06); border-color: rgba(255, 255, 255, .32); } }
.soon__status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16);
  font-family: var(--font-display); font-weight: 600; font-size: 13px; line-height: 1; color: var(--text);   /* same type as the tab chips */
}
.soon__status i { width: 6px; height: 6px; border-radius: 50%; background: var(--text); animation: pulse 2.4s ease-in-out infinite; }
.soon__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; letter-spacing: -0.01em; }
.soon__text { max-width: 460px; color: var(--muted); }
.soon .btn { margin-top: 8px; }
.tabs__count--soon { padding: 0 8px; font-size: 12px; }   /* same font as the number badges */
@media (prefers-reduced-motion: reduce) { .soon__icon { animation: none; } }
.next-case__text { grid-column: 1; margin-top: 6px; max-width: 760px; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); transition: color .45s; }
.next-case svg { grid-row: 1 / 4; }

/* one full-width outcome card, list in two columns on wider screens */
.compare--single { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .compare--single ul { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .compare--single ul li:nth-child(2) { padding-top: 0; border-top: 0; }
}

/* ---------- driEV app: one set of 12 screens, each tagged V1 / V2 / Core ---------- */
.screens--app { grid-template-columns: repeat(6, 1fr); row-gap: 32px; }
.screens--app .shot__media { aspect-ratio: 412 / 917; }
.screens--app figcaption { display: grid; justify-items: start; gap: 6px; margin-top: 12px; }   /* tag above the title */
.screens--app figcaption b { font-size: var(--fs-small); line-height: var(--lh-small); }
.screens--app .vtag { flex: none; margin: 0; }
.screens-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin: 48px 0 16px; }
.screens-head .cs-subhead { margin: 0; }
.screens-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: var(--muted); font-size: 12px; }
.screens-legend .vtag { margin: 0 0 0 8px; }
.screens-legend .vtag:first-child { margin-left: 0; }
@media (max-width: 1023.98px) { .screens--app { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767.98px) {
  .screens--app { display: flex; }               /* swipe through all 12 on phones */
  .screens--app .shot { flex: 0 0 46%; }
}
.plan__price { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.1; }
.plan__price small { font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.plan__line { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.plans__note { margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 18px; }

/* ---------- driEV website: 12 desktop screens (1440 × 1024 artboards) ---------- */
.screens--site { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
.screens--site .shot__media { aspect-ratio: 1440 / 1024; }
.screens--site figcaption { margin-top: 12px; }
.screens--site figcaption b { font-size: var(--fs-small); line-height: var(--lh-small); }
@media (max-width: 1023.98px) { .screens--site { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px)  { .screens--site { grid-template-columns: 1fr; row-gap: 24px; } }

/* Instagram stories (9:16) shown whole inside the 4:3 grid cards */
.shot__media--story { background: #0b0b0b; }
.shot__media--story img { object-fit: contain; }
.shot:hover .shot__media--story img { transform: scale(1.03); }

/* ---------- Mobile polish (phone audit) ---------- */
/* rows with a badge: let a long badge drop under its label instead of pushing the page wider */
.rows li { flex-wrap: wrap; }
.badge { max-width: 100%; white-space: normal; text-align: center; }
/* back links: bigger tap area without moving anything */
.back-link { padding-block: 10px; margin-block: -10px; }
@media (max-width: 767.98px) {
  /* nothing under 12px on phones */
  .badge, .vtag, .station__free, .tag-live, .stage__no em, .tabs__count { font-size: 12px; }
  .concept__row small, .concept__pick { font-size: 12px; }
}
@media (max-width: 767.98px) {
  /* covers & case study thumbnails: show the whole 2:1 image (title stays readable) */
  .cs-cover, .study__media { aspect-ratio: 2 / 1; }
  /* keep small pills on one line */
  .station__free, .vtag, .tag-live { white-space: nowrap; }
  .station__top b { font-size: 16px; }
  /* short step cards two-up, so case studies aren't endlessly long */
  .flow, .flow--4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .flow__step { padding: 16px; }
  .flow__step b { margin-top: 10px; font-size: 18px; }
  .flow__step p { font-size: 13px; line-height: 20px; }
  .flow--six .flow__step > span { font-size: 16px; }
}

/* ---------- Fixes: selected work stack, feedback dimming, work thumbnails ---------- */
/* 1) middle card always in front; side cards sit behind it */
.peek__card { position: relative; }
.peek__card--m { z-index: 3; }
.peek__card--l, .peek__card--r { z-index: 1; }
@media (max-width: 767.98px) {
  .peek__card--l, .peek__card--r { margin-inline: -22%; opacity: .45; }
}

/* 2) feedback on touch screens: no strong dimming while it scrolls — every card stays readable,
      the centred one just gets a slightly lighter card + border */
@media (hover: none) {
  .quotes .quote { opacity: 1; transform: none; transition: background .5s var(--ease), border-color .5s; }
  .quotes .quote.is-active { background: var(--card-hover); border-color: rgba(255, 255, 255, .16); }
}
.quotes.is-dragging .quote { opacity: 1; transform: none; }

/* 3) Work page case study thumbnails: whole image, centred */
.study__media { display: grid; place-items: center; background: #0d0d0d; }
.study__media img { object-fit: cover; object-position: center; }
@media (max-width: 767.98px) {
  /* phones: cards are nearly full width, so only a thin fade at the very edges */
  .quotes {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  }
}
/* keep the card stack in its own layer: cards < fade < button */
.peek__cards { z-index: 0; }
.peek::after { z-index: 1; }
.peek__cta { z-index: 2; }