/* ============================================================
   Alina Honcharuk — portfolio site
   Dark studio / gallery. The renders carry the page; the layout
   stays quiet and the pipeline vocabulary does the structural work.
   ============================================================ */

:root{
  --ink:      #0A0A0B;
  --ink-2:    #131315;
  --paper:    #EDEAE4;
  --muted:    #86817A;
  --line:     rgba(237,234,228,.10);
  --line-2:   rgba(237,234,228,.18);

  /* Warm = commercial, cold = personal — the two temperatures her own
     work is lit in: city neon and the UFC fight-scene nails against the
     steel blue of the Diver and the Soldier. */
  --warm:     #EF5A8C;
  --cold:     #7FA8B8;

  --sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --f-display: clamp(3rem, 8vw, 6.8rem);
  --f-h1:      clamp(2.2rem, 5vw, 4rem);
  --f-h2:      clamp(1.8rem, 3.4vw, 2.8rem);
  --f-lede:    clamp(1.02rem, 1.3vw, 1.25rem);
  --f-body:    clamp(.92rem, 1.02vw, 1.02rem);
  --f-mono:    clamp(.66rem, .74vw, .74rem);

  --pad-x: clamp(1.15rem, 5vw, 5.5rem);
  --gap:   clamp(.5rem, 1vw, .9rem);
  --band:  clamp(4rem, 10vh, 7.5rem);

  /* Controls are pills, frames are softly rounded — one shape language,
     the way iOS draws buttons over content. */
  --r-pill: 999px;
  --r-card: clamp(10px, 1.1vw, 16px);
  --r-sm:   8px;

  --glass:    rgba(19,19,21,.58);
  --hover-bg: rgba(237,234,228,.07);

  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);      /* entrances: fast start, long settle */
  --spring:   cubic-bezier(.34,1.56,.64,1);  /* press release: a small overshoot */
}

/* Cross-page fade, so moving between pages reads as one site rather than
   a series of reloads. Browsers without it navigate exactly as before. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{ navigation:auto; }
  ::view-transition-old(root){ animation:vt-out .22s ease-in both; }
  ::view-transition-new(root){ animation:vt-in .5s var(--ease-out) both; }
}
@keyframes vt-out{ to{ opacity:0; } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(10px); } }

*,*::before,*::after{ box-sizing:border-box; }

html{ background:var(--ink); scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:var(--f-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,p,dl,dd,ol,ul,figure,article{ margin:0; }
ul,ol{ list-style:none; padding:0; }
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
/* Every control has its own pressed state, so the grey system flash is noise. */
a,button{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }

::selection{ background:var(--warm); color:#0A0A0B; }
:focus-visible{ outline:2px solid var(--warm); outline-offset:3px; }

.skip{
  position:fixed; top:.6rem; left:.6rem; z-index:100;
  padding:.75rem 1.2rem; background:var(--paper); color:var(--ink);
  border-radius:var(--r-pill);
  font:500 .8rem/1 var(--mono); text-transform:uppercase;
  transform:translateY(-200%);
  transition:transform .35s var(--ease-out);
}
.skip:focus{ transform:none; }

/* ── pills ─────────────────────────────────────────────────────
   Shared by every button-like control: the shape, the timing, and the
   press — a quick dip on touch that springs back on release. */
.pill,
.hero__cta, .hero__ghost, .cta__link, .band__more, .feat__link,
.filter, .back, .copy, .menu-btn, .chrome__nav a{
  border-radius:var(--r-pill);
  transition:
    background .3s var(--ease), color .3s var(--ease),
    border-color .3s var(--ease), box-shadow .3s var(--ease),
    transform .5s var(--spring);
}
.hero__cta:active, .hero__ghost:active, .cta__link:active, .feat__link:active,
.filter:active, .back:active, .copy:active, .menu-btn:active,
.chrome__nav a:active, .lang:active{
  transform:scale(.95); transition-duration:.12s;
}
.band__more:active{ transform:scale(.985); transition-duration:.12s; }

/* ── shared type ───────────────────────────────────────────── */

.eyebrow{
  display:flex; align-items:center; gap:.85rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:var(--f-mono);
  text-transform:uppercase; letter-spacing:.16em; color:var(--muted);
}
.idx{ color:var(--warm); }
.lede{ font-size:var(--f-lede); line-height:1.5; }

.arrow{ display:inline-block; transition:transform .35s var(--ease); }
a:hover .arrow{ transform:translateX(.35rem); }
a:hover .arrow--back{ transform:translateX(-.35rem); }

/* ── header ────────────────────────────────────────────────── */

/* Fixed over the hero on the home page, sticky elsewhere. It turns to glass
   once the page moves, steps aside while you read down, and comes back the
   moment you scroll up — the navigation is never more than a flick away. */
.chrome{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; gap:clamp(1rem,4vw,3rem);
  padding:clamp(.75rem,1.8vh,1.2rem) var(--pad-x);
  border-bottom:1px solid transparent;
  view-transition-name:chrome;
  transition:
    transform .5s var(--ease-out),
    background .35s var(--ease), border-color .35s var(--ease),
    backdrop-filter .35s var(--ease);
}
.chrome--solid{ position:sticky; top:0; }
.chrome.is-stuck,
.chrome--solid{
  background:rgba(10,10,11,.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--line);
}
.chrome.is-hidden{ transform:translateY(-101%); }
.chrome:has(:focus-visible){ transform:none; }
body[data-page="home"] .chrome{ animation:drop .9s var(--ease-out) .15s backwards; }
@keyframes drop{ from{ opacity:0; transform:translateY(-14px); } }

.chrome__mark{
  font-family:var(--mono); font-size:var(--f-mono);
  letter-spacing:.2em; text-transform:uppercase;
  padding:.6rem 0;
}
.chrome__initial{
  display:inline-block; color:var(--warm); margin-right:.35em;
  transition:transform .5s var(--spring);
}
.chrome__mark:hover .chrome__initial{ transform:rotate(-8deg) scale(1.15); }

/* A tab bar in a glass capsule: the current page is the lit segment. */
.chrome__nav{
  display:flex; gap:.15rem; margin-left:auto;
  padding:4px; border-radius:var(--r-pill);
  background:var(--glass); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.chrome__nav a{
  font-family:var(--mono); font-size:var(--f-mono);
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  padding:.62rem 1.05rem;
}
.chrome__nav a:hover{ color:var(--paper); background:var(--hover-bg); }
.chrome__nav a.is-here{ color:var(--ink); background:var(--paper); }

/* EN / UA as a segmented control: a thumb slides under the active half. */
.chrome__lang,
.menu__lang{
  position:relative; display:inline-grid;
  grid-auto-flow:column; grid-auto-columns:1fr;
  padding:4px; border-radius:var(--r-pill);
  background:var(--glass); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.chrome__lang::before,
.menu__lang::before{
  content:""; position:absolute; top:4px; bottom:4px; left:4px;
  width:calc(50% - 4px); border-radius:var(--r-pill);
  background:var(--paper);
  transition:transform .5s var(--spring);
}
.chrome__lang[data-on="ua"]::before,
.menu__lang[data-on="ua"]::before{ transform:translateX(100%); }
.lang{
  position:relative; z-index:1;
  min-width:2.9rem; padding:.62rem .8rem; border-radius:var(--r-pill);
  font-family:var(--mono); font-size:var(--f-mono);
  letter-spacing:.16em; color:var(--muted); text-align:center;
  transition:color .3s var(--ease), transform .5s var(--spring);
}
.lang:hover{ color:var(--paper); }
.lang.is-on{ color:var(--ink); }
.lang__sep{ display:none; }

/* ── mobile menu ───────────────────────────────────────────── */

.menu-btn{
  display:none; margin-left:.6rem;
  width:46px; height:46px; place-items:center;
  background:var(--glass); border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.menu-btn__bars,
.menu-btn__bars::before,
.menu-btn__bars::after{
  display:block; width:22px; height:1px; background:var(--paper);
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.menu-btn__bars{ position:relative; }
.menu-btn__bars::before,.menu-btn__bars::after{ content:""; position:absolute; left:0; }
.menu-btn__bars::before{ top:-6px; }
.menu-btn__bars::after{ top:6px; }
.menu-btn.is-open .menu-btn__bars{ background:transparent; }
.menu-btn.is-open .menu-btn__bars::before{ transform:translateY(6px) rotate(45deg); }
.menu-btn.is-open .menu-btn__bars::after{ transform:translateY(-6px) rotate(-45deg); }

/* The panel fades up over the page and the links follow it in one by one,
   so opening the menu feels like a sheet arriving rather than a page swap. */
.menu{
  position:fixed; inset:0; z-index:60;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(5.5rem,16vh,8rem) var(--pad-x) clamp(2rem,6vh,3rem);
  background:rgba(10,10,11,.9);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);
  backdrop-filter:blur(24px) saturate(1.3);
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility 0s linear .3s;
}
.menu.is-open{
  opacity:1; visibility:visible;
  transition:opacity .4s var(--ease-out), visibility 0s;
}
.menu__nav{ display:flex; flex-direction:column; }
.menu__link,
.menu__foot{
  opacity:0; transform:translateY(22px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.menu.is-open .menu__link,
.menu.is-open .menu__foot{
  opacity:1; transform:none;
  transition:opacity .6s var(--ease-out), transform .7s var(--ease-out), color .25s var(--ease);
  transition-delay:calc(.06s + var(--i, 0) * .055s);
}
.menu__link{
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(.9rem,2.4vh,1.3rem) 0;
  border-bottom:1px solid var(--line);
  font-size:clamp(1.9rem,9vw,2.6rem); font-weight:600;
  letter-spacing:-.04em; color:var(--muted);
}
.menu__link::after{ content:"→"; font-size:.6em; opacity:.35; }
.menu__link:first-child{ border-top:1px solid var(--line); }
.menu__link.is-here{ color:var(--paper); }
.menu__link.is-here::after{ color:var(--warm); opacity:1; }
.menu__link:active{ color:var(--warm); }

.menu__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding-top:1.4rem; border-top:1px solid var(--line);
}
.menu__mail{
  font-family:var(--mono); font-size:var(--f-mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
body.menu-open{ overflow:hidden; }

/* ── hero ──────────────────────────────────────────────────── */

.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  padding:calc(var(--band) + 3rem) var(--pad-x) clamp(3.5rem,9vh,6rem);
  overflow:hidden;
}
.hero__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:58% 38%;
  z-index:0;
  animation:hero-in 2.4s var(--ease-out) both;
}
@keyframes hero-in{ from{ opacity:0; transform:scale(1.08); } }
/* Let the render breathe on the right, hold the type on the left. */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to right, rgba(10,10,11,.83) 0%, rgba(10,10,11,.63) 38%, rgba(10,10,11,.13) 72%),
    linear-gradient(to top, rgba(10,10,11,.84) 0%, rgba(10,10,11,0) 45%);
}
.hero__body{ position:relative; z-index:2; max-width:44rem; }

.hero__name{
  font-size:var(--f-display); font-weight:600;
  letter-spacing:-.045em; line-height:.93;
  margin:0;
}
/* The positioning, read straight after the name and sized as a headline
   in its own right — the tiny mono eyebrow it replaces was easy to miss. */
.hero__role{
  margin-top:clamp(.9rem,2.2vh,1.4rem);
  font-size:clamp(1.35rem,2.7vw,2.2rem); font-weight:500;
  letter-spacing:-.03em; line-height:1.1;
}
.hero__amp{ color:var(--warm); font-weight:400; }
.hero__lede{
  font-size:var(--f-lede); line-height:1.5; max-width:30rem;
  margin-top:clamp(.8rem,1.8vh,1.1rem); color:rgba(237,234,228,.72);
}

/* The name rises out of its own line, then the rest of the block follows in
   reading order — the eye is led down the hero instead of handed all of it. */
.hero__name .ln{ display:block; overflow:hidden; padding:.04em 0 .1em; margin:-.04em 0 -.1em; }
.hero__name .ln > span{ display:block; animation:line-up 1.1s var(--ease-out) backwards; }
.hero__name .ln:nth-child(1) > span{ animation-delay:.25s; }
.hero__name .ln:nth-child(2) > span{ animation-delay:.34s; }
@keyframes line-up{ from{ transform:translateY(105%); } }

.hero__body > :not(.hero__name){ animation:rise .9s var(--ease-out) backwards; }
.hero__body > .hero__role{ animation-delay:.5s; }
.hero__body > .hero__lede{ animation-delay:.62s; }
.hero__body > .hero__act { animation-delay:.76s; }

.hero__act{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.7rem;
  margin-top:clamp(1.6rem,4vh,2.4rem);
}
.hero__cta,
.hero__ghost{
  display:inline-flex; align-items:center; gap:.7rem;
  min-height:3.1rem; padding:.9rem 1.6rem;
  font-size:1.02rem; font-weight:500; letter-spacing:-.015em;
}
.hero__cta{ background:var(--paper); color:var(--ink); }
.hero__cta:hover{ background:var(--warm); box-shadow:0 10px 30px -10px rgba(239,90,140,.65); }
.hero__ghost{
  border:1px solid var(--line-2);
  background:rgba(10,10,11,.38);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.hero__ghost:hover{ background:rgba(237,234,228,.12); border-color:rgba(237,234,228,.4); }
.hero__ghost .arrow{ transition:transform .35s var(--ease); }
.hero__ghost:hover .arrow{ transform:translateY(.2rem); }
.hero__status{
  display:flex; align-items:center; flex-basis:100%;
  margin-top:.5rem;
  font-family:var(--mono); font-size:var(--f-mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}

@keyframes rise{ from{ opacity:0; transform:translate3d(0,22px,0); } }

.scroll-cue{
  position:absolute; right:var(--pad-x); bottom:clamp(3.5rem,9vh,6rem); z-index:2;
  font-family:var(--mono); font-size:var(--f-mono);
  text-transform:uppercase; letter-spacing:.2em; color:var(--muted);
  display:flex; align-items:center; gap:.7rem;
}
.scroll-cue::after{
  content:""; width:2.6rem; height:1px; background:var(--line-2);
  animation:cue 2.6s var(--ease) infinite; transform-origin:left center;
}
@keyframes cue{
  0%,100%{ transform:scaleX(.35); opacity:.5; }
  50%    { transform:scaleX(1);   opacity:1; }
}

/* ── bands ─────────────────────────────────────────────────── */

.band{
  padding:var(--band) var(--pad-x);
  border-top:1px solid var(--line);
}
.band--tight{ padding-block:clamp(3rem,7vh,5rem); }
.band--flush{ padding-inline:0; }

.band__head{ margin-bottom:clamp(2rem,5vh,3.4rem); max-width:52rem; }
.band__title{
  font-size:var(--f-h2); font-weight:600;
  letter-spacing:-.035em; line-height:1.05; margin-top:.9rem;
}
.band__note{ color:var(--muted); margin-top:1rem; max-width:40rem; }
.band__title--lead{ margin-top:0; }

/* The way on to the rest of the work — a full-width bar rather than a small
   link, because on the home page it is the one thing that must not be missed. */
.band__more{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  margin-top:clamp(2.5rem,6vh,4rem);
  padding:clamp(.6rem,1.4vh,.8rem) clamp(.6rem,1.4vh,.8rem) clamp(.6rem,1.4vh,.8rem) clamp(1.4rem,3vw,2.2rem);
  border:1px solid var(--line-2);
  font-size:clamp(1.15rem,2.2vw,1.7rem); font-weight:500; letter-spacing:-.025em;
}
/* The arrow sits in its own disc at the end of the capsule, like the
   trailing icon of an iOS action row. */
.band__more .arrow{
  display:grid; place-items:center; flex:none;
  width:clamp(2.8rem,5vw,3.6rem); aspect-ratio:1; border-radius:50%;
  background:var(--paper); color:var(--ink); font-size:.9em;
  transition:transform .5s var(--spring), background .3s var(--ease), color .3s var(--ease);
}
.band__more:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.band__more:hover .arrow{ background:var(--ink); color:var(--paper); transform:translateX(0) rotate(-45deg); }

.band__head--row{
  max-width:none;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem 2rem; flex-wrap:wrap;
}
.band__link{
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:2.75rem; padding:.6rem 1.15rem;
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  font-family:var(--mono); font-size:var(--f-mono);
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  transition:color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), transform .5s var(--spring);
}
.band__link:hover{ color:var(--ink); background:var(--paper); border-color:var(--paper); }
.band__link:active{ transform:scale(.95); transition-duration:.12s; }

/* ── home disciplines ──────────────────────────────────────── */

/* Six cards, each a discipline and the case that proves it. On a phone
   they turn into a compact list row — thumbnail left, text right — so six
   of them stay a quick scan rather than six screens of scrolling. */
.dgrid{ display:grid; gap:var(--gap); grid-template-columns:repeat(3, minmax(0,1fr)); }
.dgrid > li{ display:flex; min-width:0; }
.dcard{
  position:relative; flex:1; min-width:0;
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--ink-2); overflow:hidden;
  transition:border-color .35s var(--ease), transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.dcard:hover{
  border-color:var(--line-2); transform:translateY(-4px);
  box-shadow:0 24px 50px -28px rgba(0,0,0,.9);
}
.dcard:active{ transform:scale(.985); transition-duration:.15s; }
.dcard__media{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--ink); }
.dcard__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease-out), opacity .6s var(--ease);
}
.dcard:hover .dcard__media img{ transform:scale(1.05); }
.dcard__body{
  flex:1; min-width:0; display:flex; flex-direction:column; gap:.45rem;
  padding:clamp(1rem,1.6vw,1.35rem);
}
.dcard__n{
  font-family:var(--mono); font-size:var(--f-mono);
  letter-spacing:.16em; color:var(--warm);
}
.dcard__t{
  font-size:clamp(1.15rem,1.6vw,1.4rem); font-weight:600;
  letter-spacing:-.03em; line-height:1.15;
}
.dcard__d{ color:var(--muted); font-size:.93rem; line-height:1.55; }
.dcard__case{
  display:flex; align-items:center; gap:.6rem;
  margin-top:auto; padding-top:.9rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:var(--f-mono);
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.dcard__case:empty{ display:none; }
.dcard__body > .dcard__d + .dcard__case{ margin-top:auto; }
.dcard__d{ margin-bottom:.6rem; }
.dcard__k{ color:var(--warm); flex:none; }
.dcard__p{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--paper); }
.dcard__go{
  flex:none; display:grid; place-items:center;
  width:1.9rem; height:1.9rem; border-radius:50%;
  border:1px solid var(--line-2); color:var(--paper);
  transition:background .3s var(--ease), color .3s var(--ease), transform .5s var(--spring);
}
.dcard:hover .dcard__go{ background:var(--paper); color:var(--ink); transform:rotate(45deg); }

/* ── featured ──────────────────────────────────────────────── */

.feat{ display:grid; gap:clamp(3rem,8vh,6rem); }

.feat__item{
  display:grid; gap:clamp(1.5rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  align-items:center;
}
.feat__item:nth-child(even) .feat__mosaic{ order:-1; }

.feat__no{
  font-family:var(--mono); font-size:var(--f-mono);
  letter-spacing:.16em; color:var(--warm);
}
.feat__t{
  font-size:clamp(1.4rem,2.4vw,2rem); font-weight:600;
  letter-spacing:-.035em; line-height:1.08; margin-top:.7rem;
}
/* The title already names the brand and the campaign, so the text column
   goes straight from the title to what was built. */
.feat__d{ color:var(--muted); margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); max-width:36rem; }
.feat__tools{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:1.1rem; }
.feat__tools li,
.case__tools li{
  font-family:var(--mono); font-size:var(--f-mono);
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:.36rem .8rem;
}
.feat__link{
  display:inline-flex; align-items:center; gap:.7rem; margin-top:1.5rem;
  min-height:2.9rem; padding:.75rem 1.3rem;
  font-family:var(--mono); font-size:var(--f-mono);
  text-transform:uppercase; letter-spacing:.16em;
  border:1px solid var(--line-2);
}
.feat__link:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }

/* One large frame plus two stacked — enough to read the project at a glance. */
.feat__mosaic{
  display:grid; gap:var(--gap);
  grid-template-columns:1.55fr 1fr;
  grid-template-rows:1fr 1fr;
  aspect-ratio:16/10;
}
.feat__mosaic a{
  position:relative; overflow:hidden; display:block;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--ink-2);
}
.feat__mosaic a:first-child{ grid-row:span 2; }
.feat__mosaic img,.feat__mosaic video{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease-out), opacity .6s var(--ease);
}
.feat__mosaic a:hover img,
.feat__mosaic a:hover video{ transform:scale(1.05); }

/* Once the row is on screen the three frames land one after another. */
.feat__item.is-in .feat__mosaic a{ animation:tile 1s var(--ease-out) backwards; }
.feat__item.is-in .feat__mosaic a:nth-child(1){ animation-delay:.12s; }
.feat__item.is-in .feat__mosaic a:nth-child(2){ animation-delay:.22s; }
.feat__item.is-in .feat__mosaic a:nth-child(3){ animation-delay:.32s; }
@keyframes tile{ from{ opacity:0; transform:translateY(26px) scale(.97); } }

/* ── client marks ──────────────────────────────────────────── */

.marks{
  display:flex; flex-wrap:wrap;
  gap:clamp(1.2rem,3vw,2.8rem) clamp(1.6rem,4vw,3.6rem);
  align-items:baseline;
}
.marks li{
  font-size:clamp(1.1rem,2.2vw,1.9rem); font-weight:500;
  letter-spacing:-.03em; color:var(--muted);
  transition:color .3s var(--ease);
}
.marks li:hover{ color:var(--paper); }

/* ── cta ───────────────────────────────────────────────────── */

.cta{
  padding:var(--band) var(--pad-x);
  border-top:1px solid var(--line);
}
.cta__title{
  font-size:var(--f-h2); font-weight:600;
  letter-spacing:-.035em; line-height:1.05; max-width:22ch;
}
.cta__lede{ color:var(--muted); margin-top:1.1rem; max-width:38rem; }
/* The last thing on the page is the action the page exists for, so it is
   drawn as the primary button rather than an outline. */
.cta__link{
  display:inline-flex; align-items:center; gap:.7rem; margin-top:2rem;
  min-height:3.1rem; padding:.9rem 1.6rem;
  background:var(--paper); color:var(--ink);
  font-size:1.02rem; font-weight:500; letter-spacing:-.015em;
}
.cta__link:hover{ background:var(--warm); box-shadow:0 10px 30px -10px rgba(239,90,140,.65); }

/* ── generic inner page ────────────────────────────────────── */

.page{ padding:clamp(3rem,7vh,5rem) var(--pad-x) 0; }
.page__head{ margin-bottom:clamp(2.5rem,6vh,4rem); max-width:52rem; }
.page__title{
  font-size:var(--f-h1); font-weight:600;
  letter-spacing:-.04em; line-height:1.02; margin-top:.9rem;
}
.page__note{ color:var(--muted); margin-top:1.1rem; max-width:40rem; }

/* ── work grid ─────────────────────────────────────────────── */

.filters{
  display:flex; flex-wrap:wrap; gap:.4rem;
  padding-bottom:clamp(1rem,2.5vh,1.5rem);
  margin-bottom:clamp(1rem,2.5vh,1.5rem);
  border-bottom:1px solid var(--line);
}
.filter{
  min-height:2.75rem; border:1px solid var(--line-2); padding:.6rem 1.15rem;
  font-family:var(--mono); font-size:var(--f-mono);
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.filter:hover{ color:var(--paper); background:var(--hover-bg); border-color:rgba(237,234,228,.32); }
.filter.is-on{ color:var(--ink); background:var(--paper); border-color:var(--paper); }

.empty{
  color:var(--muted); padding:clamp(2rem,6vh,4rem) 0;
  font-family:var(--mono); font-size:var(--f-mono);
  text-transform:uppercase; letter-spacing:.16em;
}
.empty[hidden]{ display:none; }

/* Two columns at most: these are cases, not thumbnails. */
.grid{ display:grid; gap:var(--gap); grid-template-columns:repeat(2, minmax(0,1fr)); }

.card[hidden]{ display:none; }
.card{
  position:relative; display:block;
  border:1px solid var(--line); border-radius:var(--r-card);
  overflow:hidden; background:var(--ink-2);
  transition:border-color .35s var(--ease), transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.card:hover{
  border-color:var(--line-2); transform:translateY(-4px);
  box-shadow:0 24px 50px -28px rgba(0,0,0,.9);
}
.card:active{ transform:scale(.985); transition-duration:.15s; }
.card__media{ display:block; position:relative; aspect-ratio:16/9; overflow:hidden; }
.card__media img,.card__media video{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease-out), opacity .6s var(--ease);
}
.card:hover .card__media img,.card:hover .card__media video{ transform:scale(1.04); }
/* An "open" disc in the corner — on at rest for touch screens, which have
   no hover to discover it, and arriving on hover everywhere else. */
.card::after{
  content:"↗"; position:absolute; top:.8rem; right:.8rem; z-index:2;
  display:grid; place-items:center; width:2.5rem; height:2.5rem;
  border-radius:50%; font-size:.95rem; color:var(--paper);
  background:var(--glass); border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:opacity .35s var(--ease), transform .5s var(--spring), background .3s var(--ease), color .3s var(--ease);
}
@media (hover:hover){
  .card::after{ opacity:0; transform:scale(.6); }
  .card:hover::after{ opacity:1; transform:none; background:var(--paper); color:var(--ink); }
}
.card__body{
  position:absolute; inset:auto 0 0 0; z-index:1;
  padding:clamp(.8rem,1.6vw,1.15rem);
  display:grid; gap:.28rem;
  background:linear-gradient(to top, rgba(10,10,11,.94) 30%, rgba(10,10,11,.7) 65%, transparent);
}
.card__t{ font-size:clamp(.95rem,1.15vw,1.1rem); font-weight:500; letter-spacing:-.02em; line-height:1.25; }
.card__note{
  font-size:.87rem; line-height:1.4; color:var(--muted);
  margin-top:.15rem;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}

/* ── case page ─────────────────────────────────────────────── */

.back{
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:2.75rem; padding:.6rem 1.15rem .6rem .95rem;
  border:1px solid var(--line-2);
  font-family:var(--mono); font-size:var(--f-mono);
  text-transform:uppercase; letter-spacing:.16em; color:var(--muted);
  margin-bottom:clamp(1.6rem,4vh,2.6rem);
}
.back:hover{ color:var(--paper); background:var(--hover-bg); border-color:rgba(237,234,228,.32); }

.case__head{
  display:grid; gap:clamp(1.5rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  align-items:start;
  padding-bottom:clamp(2rem,5vh,3.2rem);
  margin-bottom:clamp(1.5rem,4vh,2.4rem);
  border-bottom:1px solid var(--line);
}
.case__kind{
  margin-left:auto; color:var(--warm);
  border:1px solid var(--line-2); border-radius:var(--r-pill); padding:.3rem .75rem;
}
.case--personal .case__kind{ color:var(--cold); }
.case__t{
  font-size:var(--f-h1); font-weight:600;
  letter-spacing:-.04em; line-height:1.02; margin-top:.7rem;
}
.case__s{ color:var(--muted); font-size:var(--f-lede); margin-top:.4rem; }
.case__body{ color:var(--muted); white-space:pre-line; line-height:1.68; }
.case__facts{ display:grid; gap:1.1rem; margin-top:1.4rem; }
.case__fact dt{
  font-family:var(--mono); font-size:var(--f-mono);
  text-transform:uppercase; letter-spacing:.16em; color:var(--muted);
  margin-bottom:.35rem;
}
.case__fact dd{ margin:0; }
.case__tools{ display:flex; flex-wrap:wrap; gap:.35rem; }

/* Editorial grid: wide frames span the full width, the rest pair up. */
.case__media{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(2, minmax(0,1fr));
}
.case__media figure{
  position:relative; border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--ink-2); overflow:hidden;
}
.case__media .m--wide{ grid-column:1 / -1; }
.case__media img,.case__media video{ width:100%; height:auto; transition:opacity .6s var(--ease), transform 1s var(--ease-out); }

/* Every frame opens full screen. The whole frame is the button; an expand
   disc in the corner says so — on at rest for touch, on hover elsewhere. */
.m__open{ display:block; width:100%; cursor:zoom-in; }
.m__open:hover img,.m__open:hover video{ transform:scale(1.02); }
.m__zoom{
  position:absolute; top:.7rem; right:.7rem; z-index:2;
  display:grid; place-items:center; width:2.4rem; height:2.4rem;
  border-radius:50%; color:var(--paper);
  background:var(--glass); border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  pointer-events:none;
  transition:opacity .35s var(--ease), transform .5s var(--spring), background .3s var(--ease), color .3s var(--ease);
}
.m__zoom svg{ width:1rem; height:1rem; }
@media (hover:hover){
  .m__zoom{ opacity:0; transform:scale(.6); }
  .m__open:hover .m__zoom,
  .m__open:focus-visible .m__zoom{ opacity:1; transform:none; background:var(--paper); color:var(--ink); }
}

/* ── lightbox ──────────────────────────────────────────────────
   A native <dialog>: the browser handles focus trapping, Escape and the
   inert page behind it. The frame flies out of its tile and back into it. */
html{ scrollbar-gutter:stable; }
body.lb-open{ overflow:hidden; }

.lb{
  position:fixed; inset:0; width:100%; height:100%;
  max-width:none; max-height:none; margin:0; padding:0; border:0;
  background:transparent; color:var(--paper); overflow:hidden;
}
.lb::backdrop{ background:transparent; }
.lb__scrim{
  position:absolute; inset:0;
  background:rgba(6,6,7,.94);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  opacity:0; transition:opacity .4s var(--ease-out);
}
.lb.is-open .lb__scrim{ opacity:1; }
.lb__stage{
  position:absolute; inset:0;
  display:grid; place-items:center;
  touch-action:pinch-zoom; user-select:none; -webkit-user-select:none;
}
.lb__media{
  grid-area:1 / 1; display:block; object-fit:contain;
  border-radius:var(--r-card); background:var(--ink-2);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.9);
  will-change:transform;
}
.lb__close,
.lb__bar{
  opacity:0; transition:opacity .3s var(--ease);
}
.lb.is-open .lb__close,
.lb.is-open .lb__bar{ opacity:1; transition:opacity .5s var(--ease-out) .12s; }

.lb__close,
.lb__btn{
  display:grid; place-items:center; flex:none;
  width:46px; height:46px; border-radius:50%;
  background:var(--glass); border:1px solid var(--line-2); color:var(--paper);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:background .3s var(--ease), color .3s var(--ease), transform .5s var(--spring);
}
.lb__close svg,.lb__btn svg{ width:18px; height:18px; }
.lb__close:hover,.lb__btn:hover{ background:var(--paper); color:var(--ink); }
.lb__close:active,.lb__btn:active{ transform:scale(.9); transition-duration:.12s; }
.lb__close{
  position:absolute; z-index:2;
  top:calc(env(safe-area-inset-top, 0px) + clamp(.75rem,2vh,1.2rem));
  right:clamp(.75rem,2vw,1.4rem);
}
/* One toolbar for everything: previous, where you are, next. The same on a
   phone and a desktop, so swiping is a shortcut and never the only way. */
.lb__bar{
  position:absolute; z-index:2; left:50%;
  bottom:calc(env(safe-area-inset-bottom, 0px) + clamp(.75rem,2.4vh,1.4rem));
  translate:-50% 0;
  display:flex; align-items:center; gap:.4rem;
  padding:4px; border-radius:var(--r-pill);
  background:var(--glass); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.lb__bar .lb__btn{ width:42px; height:42px; background:transparent; border-color:transparent; }
.lb__bar .lb__btn:hover{ background:var(--paper); }
.lb__bar[data-single] .lb__btn{ display:none; }
/* ── player ────────────────────────────────────────────────────
   The site's own controls on a glass capsule inside the frame. On a mouse
   they step back while the clip plays and return on hover or pause; on
   touch they stay, since there is no hover to bring them back. */
.player{ position:relative; overflow:hidden; }
.player video{
  display:block; width:100%; height:100%; object-fit:contain; cursor:pointer;
  -webkit-touch-callout:none;
}
.player__bar{
  position:absolute; left:.75rem; right:.75rem; bottom:.75rem;
  display:flex; align-items:center; gap:.8rem;
  padding:5px 1.1rem 5px 5px; border-radius:var(--r-pill);
  background:var(--glass); border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:opacity .35s var(--ease), transform .5s var(--ease-out);
}
@media (hover:hover){
  .player:not(.is-paused):not(:hover):not(:focus-within) .player__bar{
    opacity:0; transform:translateY(10px);
  }
}
.player__play{
  display:grid; place-items:center; flex:none;
  width:40px; height:40px; border-radius:50%;
  background:var(--paper); color:var(--ink);
  transition:transform .5s var(--spring), background .3s var(--ease);
}
.player__play:hover{ background:var(--warm); }
.player__play:active{ transform:scale(.88); transition-duration:.12s; }
.player__play svg{ width:16px; height:16px; }
.player.is-paused .i-pause,
.player:not(.is-paused) .i-play{ display:none; }

.player__seek{
  flex:1; min-width:0; height:24px; margin:0;
  -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer;
}
.player__seek::-webkit-slider-runnable-track{
  height:4px; border-radius:var(--r-pill);
  background:linear-gradient(to right, var(--paper) calc(var(--p, 0) * 100%), rgba(237,234,228,.22) 0);
}
.player__seek::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; margin-top:-5px; border-radius:50%;
  background:var(--paper); box-shadow:0 2px 8px rgba(0,0,0,.5);
  transition:transform .4s var(--spring);
}
.player__seek:hover::-webkit-slider-thumb,
.player__seek:active::-webkit-slider-thumb{ transform:scale(1.3); }
.player__seek::-moz-range-track{ height:4px; border-radius:var(--r-pill); background:rgba(237,234,228,.22); }
.player__seek::-moz-range-progress{ height:4px; border-radius:var(--r-pill); background:var(--paper); }
.player__seek::-moz-range-thumb{
  width:14px; height:14px; border:0; border-radius:50%;
  background:var(--paper); box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.player__seek:focus-visible{ outline:none; }
.player__seek:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--warm); outline-offset:2px; }
.player__time{
  flex:none; font-family:var(--mono); font-size:var(--f-mono);
  letter-spacing:.08em; color:var(--muted);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
@media (max-width:480px){ .player__time{ display:none; } }

.lb__info{
  min-width:5.5rem; padding:0 .4rem; text-align:center;
  font-family:var(--mono); font-size:var(--f-mono);
  letter-spacing:.14em; white-space:nowrap;
}

.pager{
  display:flex; justify-content:space-between; gap:1.5rem;
  margin-top:clamp(3rem,8vh,5rem);
  padding-top:clamp(1.5rem,4vh,2.4rem);
  border-top:1px solid var(--line);
}
.pager a{
  display:grid; gap:.4rem; max-width:22rem;
  padding:.9rem 1.2rem; margin:-.9rem -1.2rem;
  border-radius:var(--r-card);
  transition:color .3s var(--ease), background .3s var(--ease), transform .5s var(--spring);
}
.pager a:hover{ background:var(--hover-bg); }
.pager a:active{ transform:scale(.97); transition-duration:.12s; }
.pager a:last-child{ text-align:right; }
.pager__k{
  font-family:var(--mono); font-size:var(--f-mono);
  text-transform:uppercase; letter-spacing:.16em; color:var(--muted);
}
.pager__t{ font-size:1.05rem; font-weight:500; letter-spacing:-.02em; }
.pager a:hover .pager__t{ color:var(--warm); }

/* ── about ─────────────────────────────────────────────────── */

.about{
  display:grid; gap:clamp(1.6rem,4vw,3.5rem);
  grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);
  align-items:start;
  padding-bottom:var(--band);
}
/* A portrait crop would otherwise run far past the text beside it. */
.about__photo{
  position:relative; border:1px solid var(--line); border-radius:var(--r-card);
  overflow:hidden; max-width:26rem;
}
.about__photo[hidden]{ display:none; }
.about__photo img{ width:100%; height:auto; }
.about__text{ display:grid; gap:1.2rem; }
.about__text p:not(.lede){ color:var(--muted); }

/* ── disciplines ───────────────────────────────────────────── */

/* Services read as a list you can run your eye down, not a grid of boxes:
   the heading carries the weight, the number anchors the row, and the whole
   row responds so it feels like something you can act on. */
.disc{ border-top:1px solid var(--line); }

.disc__item{
  position:relative;
  display:grid; align-items:center;
  grid-template-columns:3.4rem minmax(0,1fr) minmax(0,1.05fr) auto;
  gap:clamp(.9rem,2.4vw,2rem);
  padding:clamp(1.3rem,3.2vh,2.1rem) clamp(.6rem,1.5vw,1.2rem);
  border-bottom:1px solid var(--line);
  transition:background .35s var(--ease);
}
.disc__item::before{
  content:""; position:absolute; left:0; top:-1px; bottom:-1px; width:2px;
  background:var(--warm); transform:scaleY(0); transform-origin:top;
  transition:transform .45s var(--ease-out);
}
/* The row nudges right on hover by transform, not padding, so nothing
   around it has to re-flow. */
.disc__n,.disc__t,.disc__d{ transition:transform .5s var(--ease-out), color .35s var(--ease); }
.disc__item:hover{ background:var(--ink-2); }
.disc__item:hover::before{ transform:scaleY(1); }
.disc__item:hover .disc__n,
.disc__item:hover .disc__t,
.disc__item:hover .disc__d{ transform:translateX(.6rem); }

.disc__n{
  font-family:var(--mono); font-size:var(--f-mono);
  letter-spacing:.16em; color:var(--muted);
}
.disc__item:hover .disc__n{ color:var(--warm); }

.disc__t{
  font-size:clamp(1.25rem,2.1vw,1.75rem); font-weight:600;
  letter-spacing:-.03em; line-height:1.12;
}
.disc__d{ color:var(--muted); line-height:1.55; }

/* Real cases behind each discipline. The frame and the corner arrow are on
   at rest, so a touch user knows these open something before tapping. */
.disc__ex{ display:flex; gap:.35rem; }
.disc__thumb{
  position:relative; display:block;
  width:clamp(3.6rem,6vw,5.2rem); aspect-ratio:4/3;
  border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden;
  opacity:.72;
  transition:opacity .3s var(--ease), border-color .3s var(--ease), transform .5s var(--spring);
}
.disc__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out), opacity .6s var(--ease); }
.disc__thumb:hover{ opacity:1; border-color:var(--warm); transform:translateY(-3px) scale(1.04); }
.disc__thumb:hover img{ transform:scale(1.08); }
.disc__thumb:active{ transform:scale(.95); transition-duration:.12s; }
.disc__go{
  position:absolute; right:.22rem; bottom:.22rem;
  display:grid; place-items:center; width:1.15rem; height:1.15rem;
  font-size:.6rem; line-height:1; border-radius:50%;
  color:var(--paper); background:rgba(10,10,11,.78);
  border:1px solid var(--line-2);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.disc__thumb:hover .disc__go{ color:var(--ink); background:var(--warm); border-color:var(--warm); }

.ai{
  margin-top:clamp(1.2rem,3vh,2rem);
  border:1px solid var(--line); border-radius:var(--r-card);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(239,90,140,.09), transparent 55%),
    var(--ink-2);
  padding:clamp(1.2rem,2.6vw,1.9rem);
  display:grid; gap:.85rem;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  align-items:start;
}
.ai__tag{
  grid-column:1; font-family:var(--mono); font-size:var(--f-mono);
  text-transform:uppercase; letter-spacing:.18em; color:var(--warm);
}
.ai__lede{ grid-column:1; max-width:26rem; }
.ai__list{ grid-column:2; grid-row:1 / span 2; display:grid; gap:.6rem; align-content:center; }
.ai__list li{
  display:grid; grid-template-columns:7.5rem 1fr; gap:1rem; align-items:baseline;
  padding-bottom:.6rem; border-bottom:1px solid var(--line); color:var(--muted);
}
.ai__list li:last-child{ border-bottom:0; padding-bottom:0; }
.ai__stage{
  font-family:var(--mono); font-size:var(--f-mono);
  text-transform:uppercase; letter-spacing:.14em; color:var(--paper);
}

/* ── pipeline ──────────────────────────────────────────────── */

.tools{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:clamp(1.6rem,4vh,2.6rem); }
.tools li{
  border:1px solid var(--line-2); border-radius:var(--r-pill); padding:.55rem 1.05rem;
  font-family:var(--mono); font-size:var(--f-mono);
  letter-spacing:.1em; text-transform:uppercase;
}
/* Nine steps sit evenly in three columns; four left a stranded last row.
   Each step is its own card, so the sequence can land one by one. */
.pipe{
  display:grid; gap:var(--gap); grid-template-columns:repeat(3,1fr);
}
.pipe__step{
  position:relative; background:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-card);
  padding:clamp(.95rem,2vw,1.4rem);
  display:grid; gap:.4rem; align-content:start;
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .6s var(--ease-out);
}
.pipe__step:hover{ background:var(--ink-2); border-color:var(--line-2); transform:translateY(-3px); }
.pipe__n{ font-family:var(--mono); font-size:var(--f-mono); letter-spacing:.14em; color:var(--muted); }
.pipe__t{ font-weight:600; letter-spacing:-.02em; font-size:1.02rem; line-height:1.2; }
.pipe__d{ color:var(--muted); font-size:.9rem; line-height:1.5; }
.pipe__opt{
  justify-self:start;
  font-family:var(--mono); font-size:.64rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cold);
  border:1px solid currentColor; border-radius:var(--r-pill); padding:.18rem .6rem;
}
.pipe__s{ font-family:var(--mono); font-size:var(--f-mono); letter-spacing:.08em; color:var(--muted); opacity:.7; }
.pipe__step[data-ai]::after{
  content:""; position:absolute;
  top:clamp(.95rem,2vw,1.4rem); right:clamp(.95rem,2vw,1.4rem);
  width:6px; height:6px; background:var(--warm); transform:rotate(45deg);
}
.pipe__key{
  display:flex; align-items:center; gap:.6rem; margin-top:1rem;
  font-family:var(--mono); font-size:var(--f-mono);
  text-transform:uppercase; letter-spacing:.14em; color:var(--muted);
}
.pipe__dot{ width:6px; height:6px; background:var(--warm); transform:rotate(45deg); }

/* ── clients list ──────────────────────────────────────────── */

.clients{ border-top:1px solid var(--line); }
.clients li{
  display:grid; grid-template-columns:minmax(8rem,22%) 1fr;
  gap:clamp(1rem,3vw,2.5rem); align-items:baseline;
  padding:clamp(.7rem,1.6vh,1.15rem) 0;
  border-bottom:1px solid var(--line);
}
.clients li > *{ transition:transform .5s var(--ease-out), color .3s var(--ease); }
.clients li:hover > *{ transform:translateX(.8rem); }
.clients li:hover .clients__n{ color:var(--warm); }
.clients__n{ font-size:clamp(1.05rem,1.9vw,1.6rem); font-weight:500; letter-spacing:-.03em; }
.clients__w{
  font-family:var(--mono); font-size:var(--f-mono);
  letter-spacing:.08em; color:var(--muted); line-height:1.6;
}

/* ── contact ───────────────────────────────────────────────── */

.page--contact{ display:flex; align-items:center; min-height:78svh; }
.contact{ max-width:52rem; padding-block:var(--band); }
.contact__title{
  font-size:var(--f-display); font-weight:600;
  letter-spacing:-.045em; line-height:.95; margin-top:.9rem;
}
.contact__lede{ font-size:var(--f-lede); color:var(--muted); margin-top:1.2rem; max-width:36rem; }
.contact__links{ margin-top:clamp(2rem,5vh,3.2rem); border-top:1px solid var(--line); }
.contact__links li{
  display:grid; grid-template-columns:minmax(6rem,18%) 1fr;
  gap:1.5rem; align-items:baseline;
  padding:clamp(.75rem,1.8vh,1.15rem) 0;
  border-bottom:1px solid var(--line);
}
.contact__k{
  font-family:var(--mono); font-size:var(--f-mono);
  text-transform:uppercase; letter-spacing:.16em; color:var(--muted);
}
.contact__links a{
  font-size:clamp(1rem,1.6vw,1.35rem); letter-spacing:-.02em;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.contact__links a:hover{ color:var(--warm); border-bottom-color:var(--warm); }
.contact__val{ display:flex; align-items:center; flex-wrap:wrap; gap:.4rem 1rem; }

/* mailto does nothing on a machine with no mail app set up — a one-tap
   copy is the dependable way to take the address. */
.copy{
  display:inline-flex; align-items:center; gap:.45rem;
  min-height:2.5rem; padding:.5rem 1rem;
  border:1px solid var(--line-2);
  font-family:var(--mono); font-size:var(--f-mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.copy:hover{ color:var(--paper); background:var(--hover-bg); border-color:rgba(237,234,228,.32); }
.copy.is-done{ color:var(--ink); background:var(--paper); border-color:var(--paper); }
.copy__icon{ width:.95em; height:.95em; }

/* Facts as a small table: label and value on one line, hairline between.
   Without this the list collapsed into a stack of unstyled terms. */
.facts{ border-top:1px solid var(--line); margin-top:clamp(2rem,5vh,3rem); max-width:34rem; }
.facts__row{
  display:grid; grid-template-columns:minmax(6.5rem,32%) 1fr;
  gap:clamp(1rem,3vw,2rem); align-items:baseline;
  padding:clamp(.75rem,1.8vh,1.05rem) 0;
  border-bottom:1px solid var(--line);
}
.facts dt{
  font-family:var(--mono); font-size:var(--f-mono);
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.facts dd{ margin:0; display:flex; align-items:center; }
.dot{
  width:7px; height:7px; border-radius:50%; margin-right:.6rem;
  background:var(--warm); box-shadow:0 0 0 0 rgba(239,90,140,.55);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%   { box-shadow:0 0 0 0 rgba(239,90,140,.5); }
  70%  { box-shadow:0 0 0 7px rgba(239,90,140,0); }
  100% { box-shadow:0 0 0 0 rgba(239,90,140,0); }
}

/* ── footer ────────────────────────────────────────────────── */

.foot{
  display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:1.5rem clamp(1.5rem,4vw,3rem);
  padding:clamp(2rem,5vh,3rem) var(--pad-x);
  margin-top:var(--band);
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:var(--f-mono);
  text-transform:uppercase; letter-spacing:.14em; color:var(--muted);
}
.foot__id{ display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; }
.foot__links{ display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; }
.foot__links a{ transition:color .25s var(--ease); }
.foot__links a:hover{ color:var(--warm); }

/* ── grain ─────────────────────────────────────────────────── */

.grain{
  position:fixed; inset:0; z-index:70; pointer-events:none;
  opacity:.032; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── reveal ────────────────────────────────────────────────── */

/* An animation rather than a transition, so it never fights an element's own
   hover transitions; "backwards" holds the start frame only through the
   delay, and afterwards the element is fully back in its normal styles.
   --d is set per element so whatever enters together arrives in sequence. */
[data-reveal]:not(.is-in){ opacity:0; }
[data-reveal].is-in{ animation:rise .9s var(--ease-out) var(--d, 0ms) backwards; }

/* Images fade in once decoded instead of painting top-down. */
img.is-loading{ opacity:0; }

/* ── responsive ────────────────────────────────────────────── */

@media (max-width:1100px){
  .dgrid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .pipe{ grid-template-columns:repeat(2,1fr); }
  .ai{ grid-template-columns:1fr; }
  .ai__list{ grid-column:1; grid-row:auto; }
  .about{ grid-template-columns:1fr; }
  .about__photo{ max-width:26rem; }
  .case__head{ grid-template-columns:1fr; }
  .feat__item{ grid-template-columns:1fr; }
  .feat__item:nth-child(even) .feat__mosaic{ order:0; }
}

@media (max-width:820px){
  /* The inline links wrapped onto a second cramped row; below this width the
     navigation becomes a full-screen panel with finger-sized targets. */
  .chrome__nav{ display:none; }
  .chrome__lang{ display:none; }   /* lives in the menu panel instead */
  .menu-btn{ display:grid; margin-left:auto; }
  .hero{ align-items:flex-end; }
  .hero__img{ object-position:62% 30%; }
  .scroll-cue{ display:none; }
  .clients li{ grid-template-columns:1fr; gap:.3rem; }
  .contact__links li{ grid-template-columns:1fr; gap:.3rem; }
  .ai__list li{ grid-template-columns:1fr; gap:.15rem; }
  .pager a:last-child{ text-align:left; }
}

@media (max-width:640px){
  .grid{ grid-template-columns:1fr; }
  .facts__row{ grid-template-columns:1fr; gap:.2rem; }
  /* The caption is worth two lines on a wide card and two thirds of a narrow
     one. On phones the render wins. */
  .card__note{ display:none; }
  .disc__item{ grid-template-columns:2.6rem 1fr; row-gap:.5rem; align-items:baseline; }
  .disc__d{ grid-column:2; }
  .disc__ex{ grid-column:2; margin-top:.3rem; }
  .case__media{ grid-template-columns:1fr; }
  .case__media .m--wide{ grid-column:auto; }
  .feat__mosaic{ aspect-ratio:4/3; }
  .pipe{ grid-template-columns:1fr; }
  .hero__cta,.hero__ghost{ flex:1 1 auto; justify-content:center; }

  .dgrid{ grid-template-columns:minmax(0,1fr); gap:.55rem; }
  .dcard{ flex-direction:row; align-items:stretch; }
  .dcard:hover{ transform:none; }
  .dcard__media{ flex:none; width:6.6rem; aspect-ratio:auto; }
  .dcard__body{ padding:.85rem 1rem; gap:.3rem; }
  .dcard__t{ font-size:1.08rem; }
  .dcard__d{
    font-size:.86rem; line-height:1.45; margin-bottom:.35rem;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  }
  .dcard__case{ padding-top:.55rem; }
  .dcard__go{ width:1.6rem; height:1.6rem; }
  .band__more{ font-size:1.1rem; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    animation-delay:0s !important; transition-delay:0s !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]:not(.is-in){ opacity:1; }
  .chrome.is-hidden{ transform:none; }
}