/* ============ TOKENS ============ */
:root {
  --bg: #0a0c10;
  --panel: #12161d;
  --text: #eef0f2;
  --text-70: rgba(238, 240, 242, .72);
  --text-55: rgba(238, 240, 242, .55);

  --accent: #d5283f;
  --accent-soft: rgba(213, 40, 63, .15);
  --accent-ink: #eef0f2;          /* text that sits on top of the accent */
  --line: rgba(238, 240, 242, .14);

  --font-display: 'Oswald', sans-serif;
  --font-body: 'Golos Text', sans-serif;

  --ease: cubic-bezier(.22, 1, .36, 1);

  /* fluid scale — driven by the smaller viewport side, so the layout
     reacts to window height as well as width */
  /* the whole interface sits one step smaller — matches how it looked
     at 80% browser zoom on a 1080p screen */
  --side: clamp(18px, 4vmin, 62px);
  --gap: clamp(7px, .9vmin, 12px);
  --block: clamp(58px, 8.8vmin, 136px);
}

/* ============ RESET ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(14px, 1.5vmin, 16px);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  hyphens: none;
}

/* ============ GRAIN ============ */
.grain {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ MOTION ============ */
.rise {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(14px);
}
.is-in .rise {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    opacity 900ms var(--ease) var(--d, 0ms),
    transform 900ms var(--ease) var(--d, 0ms),
    filter 900ms var(--ease) var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 0; transform: none; filter: none; transition: opacity 300ms linear; }
  .is-in .rise { opacity: 1; transition-delay: 0ms !important; }
}

/* ============ LABEL ============ */
.label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: clamp(11px, 1.15vmin, 13px);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--text-70);
}

/* ============ NAV ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  /* equal outer columns, so the links sit on the centre of the viewport
     instead of the centre of whatever space the logo and the buttons leave */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(10px, 1.6vw, 28px);
  padding: clamp(14px, 2.4vmin, 26px) var(--side);
}
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  height: clamp(110px, 18vmin, 190px);
  background: linear-gradient(to bottom, rgba(6,8,11,.78) 0%, rgba(6,8,11,.42) 45%, transparent 100%);
  z-index: -1;
  pointer-events: none;
  transition: opacity 420ms var(--ease);
}
/* once the page moves, the bar goes opaque — a heading scrolling underneath
   used to land straight on top of the links */
.nav::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 12, 16, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  opacity: 0;
  transition: opacity 420ms var(--ease), border-color 420ms var(--ease);
  pointer-events: none;
}
.nav.is-scrolled::before { opacity: 0; }
.nav.is-scrolled::after { opacity: 1; border-bottom-color: var(--line); }

.nav__logo {
  display: flex;
  justify-self: start;
  min-width: 0;
  align-items: center;
  gap: clamp(8px, 1vw, 13px);
  color: var(--text);
  transition: opacity 320ms var(--ease), transform 260ms var(--ease);
}
.nav__logo:hover { opacity: .82; }
.nav__logo:active { transform: scale(.96); }
.logo-mark {
  width: clamp(22px, 2.8vmin, 31px);
  height: clamp(22px, 2.8vmin, 31px);
  color: var(--text);
  flex-shrink: 0;
}
.nav__word {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.7vmin, 19px);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__end { display: flex; align-items: center; justify-content: flex-end; gap: clamp(8px, 1.2vw, 16px); }

.nav__links {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(14px, 2.6vw, 46px);
  min-width: 0;
}
.nav__links a {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1em;
  font-size: clamp(11px, 1.1vmin, 14px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
  color: var(--text-70);
  transition: color 320ms var(--ease);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 460ms var(--ease);
}
.nav__links a:hover,
.nav__links a:focus-visible { color: var(--text); }
.nav__links a:hover::after,
.nav__links a:focus-visible::after { transform: scaleX(1); }
.nav__links a:active { color: var(--accent); }
.nav__links a.is-current { color: var(--text); }
.nav__links a.is-current::after { transform: scaleX(1); }
.nav__links a .lbl { display: block; transition: transform 420ms var(--ease); }
.nav__links a .lbl span { display: block; line-height: 1; }
.nav__links a:hover .lbl,
.nav__links a:focus-visible .lbl { transform: translateY(-1em); }

.nav__toggle {
  display: none;
  width: 48px; height: 48px;
  background: none; border: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  transition: transform 260ms var(--ease);
}
.nav__toggle:active { transform: scale(.9); }
.nav__toggle span {
  width: 26px; height: 2px;
  background: var(--text);
  transition: transform 420ms var(--ease), opacity 260ms var(--ease);
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  padding: 0 var(--side);
  transform: translateY(-100%);
  transition: transform 500ms var(--ease);
}
.mobile-menu.is-open { transform: translateY(0); }
.mobile-menu { gap: clamp(16px, 4vmin, 32px); }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: clamp(28px, 7vmin, 52px);
  text-transform: uppercase;
  letter-spacing: -.02em;
  transition: color 320ms var(--ease), transform 260ms var(--ease);
}
.mobile-menu a:hover { color: var(--accent); }
.mobile-menu a:active { transform: translateX(8px); color: var(--accent); }

/* ============ LANGUAGE SWITCH ============ */
.lang {
  display: flex;
  align-items: center;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}
.lang__btn {
  background: none;
  border: none;
  color: var(--text-55);
  font-family: var(--font-body);
  font-size: clamp(11px, 1.05vmin, 13px);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: clamp(6px, .9vmin, 10px) clamp(11px, 1.7vmin, 18px);
  border-radius: 999px;
  cursor: pointer;
  transition: color 320ms var(--ease), background 380ms var(--ease), transform 180ms var(--ease);
}
.lang__btn:hover { color: var(--text); background: var(--accent-soft); }
.lang__btn:active { transform: scale(.9); }
.lang__btn.is-active { background: var(--accent); color: var(--accent-ink); }

/* ============ HERO ============ */
.hero { position: relative; height: 118svh; }

.hero__media {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hero__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 85% at 50% 38%, transparent 55%, rgba(0,0,0,.55) 100%),
    linear-gradient(to top, var(--bg) 0%, transparent 30%);
  pointer-events: none;
}
.hero__fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  mask-image: linear-gradient(to top, #000 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%);
}

.hero__content {
  position: absolute;
  inset: 0 0 auto 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero__side {
  position: absolute;
  right: var(--side);
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero__side-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, min(3.6vw, 5.8vh), 50px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--text);
  text-shadow: 0 2px 24px rgba(0,0,0,.4);
}
.hero__side-role {
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-70);
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
}

.hero__bottom {
  padding: 0 var(--side) clamp(48px, 10vh, 110px);
  max-width: min(900px, 62vw);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.2vh, 22px);
}
.hero__bottom h1 {
  font-size: clamp(2.2rem, min(7.4vw, 12.5vh), 7.6rem);
  line-height: .88;
  letter-spacing: -.03em;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.hero__sub {
  font-size: clamp(14px, min(1.15vw, 1.9vh), 18px);
  line-height: 1.6;
  max-width: 46ch;
  color: var(--text-70);
  text-wrap: balance;
}

/* the two calls to action read as a pair: equal columns, so the longer
   label sets the width for both */
.hero__cta {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: fit-content;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
  margin-top: 8px;
}
@media (max-width: 560px) {
  .hero__cta { grid-auto-flow: row; width: 100%; }
}
.reassure {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-55);
}
.pulse-dot {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 12px;
  flex-shrink: 0;
}
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  animation: pulse 2200ms var(--ease) infinite;
}
@keyframes pulse {
  0% { transform: scale(.5); opacity: .9; }
  100% { transform: scale(2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pulse-dot::after { animation: none; opacity: .4; }
}

/* ============ BUTTONS ============ */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(44px, 5.6vmin, 58px);
  padding: clamp(13px, 1.9vmin, 21px) clamp(22px, 4vmin, 44px);
  border-radius: 999px;
  /* <button> ships with a 2px outset UA border — without this the filled
     button gets a bevelled half-outline and stands 2px taller than the link */
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: clamp(13px, 1.3vmin, 15px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .09em;
  cursor: pointer;
  transform: translateZ(0);
  transition:
    transform 520ms var(--ease),
    box-shadow 560ms var(--ease),
    border-color 520ms var(--ease),
    background 520ms var(--ease),
    color 460ms var(--ease);
}
.btn__fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 720ms var(--ease);
}
.btn__label { position: relative; z-index: 1; transition: color 460ms var(--ease), transform 380ms var(--ease); }
.btn:hover .btn__fill { transform: scaleX(1); }
.btn:hover { transform: translateY(-2px); }

/* press: the whole control sinks, the label lags a touch behind */
.btn:active { transform: translateY(1px) scale(.975); transition-duration: 180ms; }
.btn:active .btn__label { transform: scale(.985); }
/* the ring is shared by every clickable control */
.btn::after,
.filter__chip::after,
.lang__btn::after,
.gallery__arrow::after,
.lightbox__nav::after,
.lightbox__close::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: scale(1);
  pointer-events: none;
  z-index: 2;
}
.filter__chip,
.lang__btn,
.gallery__arrow,
.lightbox__nav,
.lightbox__close { overflow: hidden; }

.btn.is-pressed::after,
.filter__chip.is-pressed::after,
.lang__btn.is-pressed::after,
.gallery__arrow.is-pressed::after,
.lightbox__nav.is-pressed::after,
.lightbox__close.is-pressed::after { animation: press-ring 620ms var(--ease); }
@keyframes press-ring {
  0%   { opacity: .22; transform: scale(1); }
  100% { opacity: 0;   transform: scale(26); }
}

.btn--fill { background: var(--accent); color: var(--accent-ink); }
.btn--fill .btn__label { color: var(--accent-ink); }
.btn--fill .btn__fill { background: var(--text); }
.btn--fill:hover { box-shadow: 0 10px 30px rgba(213, 40, 63, .26); }
.btn--fill:hover .btn__label { color: var(--bg); }

.btn--outline { background: transparent; color: var(--text); border-color: var(--line); }
.btn--outline .btn__fill { background: var(--accent); }
.btn--outline:hover { border-color: var(--accent); }
.btn--outline:hover .btn__label { color: var(--accent-ink); }

.btn:focus-visible,
.lang__btn:focus-visible,
.filter__chip:focus-visible,
.gallery__arrow:focus-visible,
.lightbox__nav:focus-visible,
.lightbox__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transform: none; }
  .btn.is-pressed::after { animation: none; }
}

/* ============ SECTION SPACING ============ */
.section { padding: var(--block) var(--side); }

/* ============ ABOUT ============ */
.about {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 6vmin, 90px);
  align-items: start;
}
.about__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 58vh;
  object-fit: cover;
}
.about__strip {
  display: flex;
  gap: var(--gap);
  margin-top: var(--gap);
}
.about__strip img {
  flex: 1;
  min-width: 0;
  width: auto;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: 0;
}
.about__text {
  max-width: 54ch;
  /* the photo column is taller than the copy — pin the copy so it is never
     off-screen while the photos scroll past */
  position: sticky;
  top: clamp(96px, 16vh, 190px);
  align-self: start;
}
.about__text h2 {
  font-size: clamp(1.7rem, min(4.6vw, 7.4vh), 4.2rem);
  line-height: .95;
  letter-spacing: -.025em;
  text-wrap: balance;
  margin: clamp(12px, 2vmin, 20px) 0 clamp(16px, 2.6vmin, 26px);
}
.about__text p {
  font-size: clamp(14px, 1.55vmin, 18px);
  line-height: 1.65;
  color: var(--text-70);
}

/* ============ SERVICES: THREE CARDS ============ */
.services__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(14px, 3vmin, 40px);
  margin-bottom: clamp(24px, 4.4vmin, 56px);
}
.services__head h2 {
  font-size: clamp(2rem, min(5.6vw, 9vh), 5.2rem);
  line-height: .95;
  letter-spacing: -.025em;
  margin-top: clamp(8px, 1.4vmin, 14px);
  text-wrap: balance;
}
.services__note {
  color: var(--text-55);
  font-size: clamp(13px, 1.35vmin, 15px);
  max-width: 34ch;
  text-align: right;
}
@media (max-width: 720px) {
  .services__note { text-align: left; }
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(12px, 1.8vmin, 24px);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 520ms var(--ease), transform 520ms var(--ease);
}
.card:hover { border-color: rgba(238, 240, 242, .3); transform: translateY(-4px); }

.card__media {
  position: relative;
  background: #0d1015;              /* dark, so a portrait frame never shows white bars */
  aspect-ratio: 4 / 5;
}
.card__media .gallery { position: absolute; inset: 0; background: transparent; }
/* fill the card: no letterboxing, no white strips down the sides */
.card__media .gallery__slide img { object-fit: cover; }

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(18px, 2.6vmin, 30px);
}
.card__kicker {
  font-size: clamp(10px, 1.05vmin, 12px);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--text-55);
}
.card__body h3 {
  font-size: clamp(21px, min(2.4vw, 3.8vh), 34px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: clamp(6px, 1vmin, 12px) 0 clamp(8px, 1.4vmin, 14px);
}
.card__body p {
  font-size: clamp(13px, 1.35vmin, 15px);
  line-height: 1.6;
  color: var(--text-70);
}

.card__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: clamp(18px, 3vmin, 34px);
}
.card__go {
  width: clamp(38px, 4.4vmin, 46px);
  height: clamp(38px, 4.4vmin, 46px);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 520ms var(--ease), border-color 520ms var(--ease), transform 420ms var(--ease), color 460ms var(--ease);
}
.card__go:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: translateX(3px); }
.card__go:active { transform: scale(.9); transition-duration: 180ms; }

/* one call to action per section */
.section__cta { display: flex; justify-content: center; margin-top: clamp(28px, 4.6vmin, 60px); }
.section__cta--left { justify-content: flex-start; margin-top: clamp(20px, 3vmin, 34px); }

/* ============ WORK ============ */
.work__head { max-width: 720px; margin-bottom: clamp(22px, 3.6vmin, 44px); }
.work__head h2 {
  font-size: clamp(1.7rem, min(4.6vw, 7.4vh), 4.2rem);
  line-height: .95;
  letter-spacing: -.025em;
  margin: clamp(12px, 2vmin, 20px) 0 clamp(8px, 1.4vmin, 14px);
  text-wrap: balance;
}

/* ---- category filter ---- */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(7px, 1.1vmin, 12px);
  margin-bottom: clamp(20px, 3.4vmin, 40px);
}
.filter__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: clamp(8px, 1.2vmin, 12px) clamp(15px, 2.2vmin, 24px);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-55);
  font-family: var(--font-body);
  font-size: clamp(10px, 1.05vmin, 12px);
  text-transform: uppercase;
  letter-spacing: .1em;
  cursor: pointer;
  transition:
    color 320ms var(--ease),
    border-color 380ms var(--ease),
    background 420ms var(--ease),
    transform 420ms var(--ease);
}
.filter__chip:hover { color: var(--text); background: var(--accent-soft); border-color: rgba(213, 40, 63, .45); }
.filter__chip:active { transform: scale(.95); transition-duration: 160ms; }
.filter__chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.filter__count { font-size: .82em; letter-spacing: .04em; opacity: .58; }

/* ---- masonry that auto-fills columns by available width ---- */
.work__grid {
  columns: clamp(230px, 23vw, 380px);
  column-gap: var(--gap);
  transition: opacity 260ms var(--ease);
}
.work__grid.is-swapping { opacity: .3; }

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--panel);
  break-inside: avoid;
  margin-bottom: var(--gap);
  cursor: zoom-in;
  transition: transform 620ms var(--ease);
}
.tile.is-hidden { display: none; }
.tile img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 800ms var(--ease), filter 620ms var(--ease);
}
.tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 12, 16, .58) 0%, transparent 42%);
  opacity: .75;
  transition: opacity 620ms var(--ease);
  pointer-events: none;
}
.tile:hover { transform: translateY(-4px); }
.tile:hover img { transform: scale(1.05); }
.tile:hover::after { opacity: 1; }
.tile:active { transform: translateY(0) scale(.985); transition-duration: 110ms; }
.tile__tag {
  position: absolute;
  left: clamp(12px, 1.8vmin, 20px); bottom: clamp(12px, 1.8vmin, 20px);
  z-index: 1;
  font-size: clamp(10px, 1vmin, 12px);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text);
  background: rgba(10, 12, 16, .58);
  backdrop-filter: blur(6px);
  padding: clamp(6px, .9vmin, 9px) clamp(11px, 1.5vmin, 16px);
  transition: transform 420ms var(--ease), background 420ms var(--ease), color 320ms var(--ease);
}
.tile:hover .tile__tag { transform: translateY(-4px); background: var(--accent); color: var(--accent-ink); }

.work__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(22px, 3.6vmin, 44px);
}
.work__more[hidden] { display: none; }
.work__empty {
  margin-top: 28px;
  color: var(--text-55);
  font-size: clamp(14px, 1.5vmin, 17px);
}
.work__empty[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tile, .tile:hover, .tile:active { transform: none; }
}

/* ============ CONTACT ============ */
.contact { text-align: center; display: flex; flex-direction: column; align-items: center; }
.contact h2 {
  font-size: clamp(2rem, min(6.6vw, 10.6vh), 5.6rem);
  line-height: .92;
  letter-spacing: -.03em;
  margin: 20px 0 22px;
  text-wrap: balance;
}
.contact__sub {
  color: var(--text-70);
  font-size: clamp(14px, 1.55vmin, 18px);
  margin-bottom: clamp(24px, 4vmin, 44px);
}
.contact__links { display: flex; gap: clamp(12px, 2vmin, 22px); flex-wrap: wrap; justify-content: center; }
.contact__email {
  margin-top: clamp(20px, 3vmin, 34px);
  font-size: clamp(11px, 1.15vmin, 13px);
  color: var(--text-55);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ============ FOOTER ============ */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(22px, 3.4vmin, 34px) var(--side) clamp(28px, 4.6vmin, 48px);
  border-top: 1px solid var(--line);
  font-size: clamp(11px, 1.15vmin, 13px);
  color: var(--text-55);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.footer a { position: relative; transition: color 320ms var(--ease); }
.footer a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 460ms var(--ease);
}
.footer a:hover { color: var(--text); }
.footer a:hover::after { transform: scaleX(1); transform-origin: left; }
.footer a:active { color: var(--accent); }

/* ============ LIGHTBOX ============ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vw, 80px);
  background: rgba(4, 6, 9, .93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 420ms var(--ease), visibility 420ms var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__frame {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  border-radius: 4px;
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(.94);
  transition: transform 520ms var(--ease);
  will-change: transform;
}
.lightbox.is-open .lightbox__frame {
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1);
}

.lightbox__frame img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - clamp(48px, 10vw, 160px));
  width: auto;
  height: auto;
  object-fit: contain;
}

/* soft white sheen that follows the cursor */
.lightbox__holo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms var(--ease);
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, .30) 0%,
    rgba(255, 255, 255, .10) 22%,
    transparent 48%
  );
  mix-blend-mode: soft-light;
}
.lightbox__frame:hover .lightbox__holo { opacity: 1; }

/* moving specular streak */
.lightbox__glare {
  position: absolute;
  inset: -40%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms var(--ease);
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(255, 255, 255, .07) 47%,
    rgba(255, 255, 255, .20) 50%,
    rgba(255, 255, 255, .07) 53%,
    transparent 60%
  );
  transform: translateX(calc((var(--gx, .5) - .5) * 78%));
  mix-blend-mode: overlay;
}
.lightbox__frame:hover .lightbox__glare { opacity: .9; }

/* thin light edge, catches the tilt */
.lightbox__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13);
}

.lightbox__close {
  position: absolute;
  top: clamp(20px, 3vw, 40px);
  right: clamp(56px, 7vw, 130px);
  width: 66px; height: 66px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(10, 12, 16, .65);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 320ms var(--ease), border-color 320ms var(--ease), transform 320ms var(--ease);
}
.lightbox__close:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: rotate(90deg); }
.lightbox__close:active { transform: rotate(90deg) scale(.86); transition-duration: 100ms; }

body.no-scroll { overflow: hidden; }
.about__media img, .about__strip img { cursor: zoom-in; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1240px) {
  .service__media {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    height: auto;
  }
  .service__copy { grid-column: 1 / -1; padding: 4px 0 0; }
  .gallery { height: clamp(300px, 50vh, 560px); }
}

@media (max-width: 900px) {
  .service__media { grid-template-columns: minmax(0, 1fr); }
  .service__static { grid-template-rows: none; grid-template-columns: 1fr 1fr; height: clamp(140px, 22vh, 200px); }

  .nav__links { display: none; }
  .nav__toggle { display: flex; }

  .hero__side {
    position: static;
    transform: none;
    text-align: left;
    align-items: flex-start;
    padding: 0 var(--side);
    margin-bottom: clamp(10px, 2.4vh, 26px);
  }
  .hero__side-name { font-size: clamp(20px, 5.6vw, 34px); }
  .hero__bottom { max-width: 100%; }

  .about { grid-template-columns: minmax(0, 1fr); }
  .about__text { position: static; }
  .about__media img { aspect-ratio: 16 / 10; max-height: 52vh; }

  .lightbox__holo { display: none; }
  .lightbox__close { right: clamp(20px, 5vw, 40px); width: 56px; height: 56px; }
}

@media (max-width: 560px) {
  .footer { flex-direction: column; gap: 14px; align-items: flex-start; }
  /* two columns on a phone — one long ribbon of photos was a lot of scrolling */
  .work__grid { columns: clamp(140px, 44vw, 220px); }
  .tile__tag { left: 8px; bottom: 8px; padding: 5px 9px; letter-spacing: .08em; }
}

/* wide but short windows (laptops, 16:9 at low height) — keep the hero readable */
@media (max-height: 700px) and (min-width: 900px) {
  .hero { height: 112svh; }
  .hero__bottom { padding-bottom: clamp(32px, 7vh, 64px); }
  .service__media { height: clamp(300px, 62vh, 520px); }
}

/* ============ PER-ELEMENT REVEAL ============ */
.reveal {
  opacity: 0;
  transform: translateY(30px) scale(.99);
  filter: blur(10px);
}
.reveal.is-shown {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    opacity 950ms var(--ease) var(--rd, 0ms),
    transform 950ms var(--ease) var(--rd, 0ms),
    filter 950ms var(--ease) var(--rd, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 0; transform: none; filter: none; }
  .reveal.is-shown { opacity: 1; transition: opacity 300ms linear; }
}

/* ============ LIGHTBOX NAV ============ */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 62px; height: 62px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(10, 12, 16, .6);
  backdrop-filter: blur(8px);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background 320ms var(--ease), border-color 320ms var(--ease), opacity 320ms var(--ease);
}
.lightbox__nav:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.lightbox__nav:active { transform: translateY(-50%) scale(.86); transition-duration: 100ms; }
.lightbox__nav--prev { left: clamp(12px, 2.4vw, 42px); }
.lightbox__nav--next { right: clamp(12px, 2.4vw, 42px); }
.lightbox__nav[hidden] { display: none; }

.lightbox__counter {
  position: absolute;
  bottom: clamp(16px, 2.6vw, 34px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  letter-spacing: .16em;
  color: var(--text-55);
  pointer-events: none;
  z-index: 3;
}

@media (max-width: 900px) {
  .lightbox__nav { width: 50px; height: 50px; }
}

/* ============ SLIDE TRANSITIONS ============ */
/* lightbox: photo swaps with a directional slide + fade */
.lightbox__frame img {
  transition:
    opacity 260ms var(--ease),
    transform 320ms var(--ease),
    filter 260ms var(--ease);
}
.lightbox__frame img.lb-out-left {
  opacity: 0;
  transform: translateX(-7%) scale(.965);
  filter: blur(6px);
}
.lightbox__frame img.lb-out-right {
  opacity: 0;
  transform: translateX(7%) scale(.965);
  filter: blur(6px);
}
.lightbox__frame img.lb-in-left {
  opacity: 0;
  transform: translateX(-7%) scale(.965);
  filter: blur(6px);
  transition: none;
}
.lightbox__frame img.lb-in-right {
  opacity: 0;
  transform: translateX(7%) scale(.965);
  filter: blur(6px);
  transition: none;
}

/* service galleries: the off-screen slides sit back a little */
.gallery__slide img {
  transition: opacity 550ms var(--ease), transform 700ms var(--ease);
  opacity: .35;
  transform: scale(.94);
}
.gallery__slide.is-current img {
  opacity: 1;
  transform: scale(1);
}

/* arrows give a nudge when a slide changes */
.gallery__arrow.is-tapped { transform: translateY(-50%) scale(.88); }

@media (prefers-reduced-motion: reduce) {
  .lightbox__frame img,
  .gallery__slide img { transition: none; }
  .gallery__slide img { opacity: 1; transform: none; }
}

/* ============ SERIES (editorial mosaic) ============ */
.series__head { max-width: 720px; margin-bottom: 50px; }
.series__head h2 {
  font-size: clamp(1.7rem, min(4.6vw, 7.4vh), 4.2rem);
  line-height: .95;
  letter-spacing: -.025em;
  margin: 20px 0 16px;
  text-wrap: balance;
}
.series__note { color: var(--text-55); font-size: clamp(13px, 1.35vmin, 15px); max-width: 46ch; }

.series__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(140px, 23vh, 290px);
  gap: var(--gap);
}
.series__cell {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  margin: 0;
  min-height: 0;
}
.series__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 800ms var(--ease);
}
.series__cell:hover img { transform: scale(1.05); }
.series__cell::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 0 var(--accent);
  transition: box-shadow 520ms var(--ease);
  pointer-events: none;
}
.series__cell:hover::after { box-shadow: inset 0 0 0 2px var(--accent); }
.series__cell:active img { transform: scale(1.01); transition-duration: 120ms; }

.series__cell--hero   { grid-column: span 2; grid-row: span 2; }
.series__cell--wide   { grid-column: span 2; grid-row: span 1; }
.series__cell--small  { grid-column: span 1; grid-row: span 1; }
.series__cell--banner { grid-column: 1 / -1; grid-row: span 1; }

@media (max-width: 900px) {
  .series__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(170px, 22vh, 230px); }
  .series__cell--hero { grid-column: span 2; grid-row: span 2; }
  .series__cell--wide { grid-column: span 2; }
}

/* ============ SHOW MORE / SHOW LESS ============ */
#workMore .js-less { display: none; }
#workMore.is-expanded .js-more { display: none; }
#workMore.is-expanded .js-less { display: inline; }

/* ============ VIEWFINDER (autofocus brackets) ============ */
.af {
  position: fixed;
  left: 0; top: 0;
  width: var(--afw, 56px);
  height: var(--afh, 56px);
  transform: translate3d(var(--afx, -200px), var(--afy, -200px), 0);
  z-index: 150;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 240ms var(--ease),
    transform 260ms var(--ease),
    width 260ms var(--ease),
    height 260ms var(--ease);
  will-change: transform, width, height;
}
.af.is-on { opacity: .55; }
.af.is-lock { opacity: 1; }

.af__c {
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid var(--text);
  transition: border-color 240ms var(--ease), width 240ms var(--ease), height 240ms var(--ease);
}
.af.is-lock .af__c { border-color: var(--accent); width: 22px; height: 22px; }
.af__c--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.af__c--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.af__c--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.af__c--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.af__tag {
  position: absolute;
  left: 32px; top: 2px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
  white-space: nowrap;
}
.af.is-lock .af__tag { opacity: 1; transform: none; }

/* shutter blink when a photo is opened */
.shutter {
  position: fixed;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 210;
}
.shutter.is-fire { animation: shutter 280ms ease-out; }
@keyframes shutter {
  0%   { opacity: 0; }
  10%  { opacity: .8; }
  100% { opacity: 0; }
}

/* ============ MAGNETIC CONTROLS ============ */
.btn { transform: translate(var(--mgx, 0px), var(--mgy, 0px)); }
.btn:hover { transform: translate(var(--mgx, 0px), calc(var(--mgy, 0px) - 2px)); }
.btn:active { transform: translate(var(--mgx, 0px), calc(var(--mgy, 0px) + 1px)) scale(.975); transition-duration: 180ms; }
.filter__chip { transform: translate(var(--mgx, 0px), var(--mgy, 0px)); }
.filter__chip:active { transform: translate(var(--mgx, 0px), var(--mgy, 0px)) scale(.94); }
.btn, .filter__chip { transition-property: transform, box-shadow, border-color, background, color; }

@media (prefers-reduced-motion: reduce) {
  .af, .shutter { display: none; }
  .btn, .btn:hover, .btn:active, .filter__chip { transform: none; }
}

/* ============ HERO: IDLE LIFE ============ */
/* A slow glint crosses the frame, a few highlights breathe. Nothing that
   pulls the eye off the headline. */
.hero__glint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    108deg,
    transparent 38%,
    rgba(255, 255, 255, .05) 47%,
    rgba(255, 255, 255, .12) 50%,
    rgba(255, 255, 255, .05) 53%,
    transparent 62%
  );
  mix-blend-mode: screen;
  opacity: 0;
  animation: glint 17s var(--ease) 4s infinite;
}
@keyframes glint {
  0%   { transform: translateX(-60%); opacity: 0; }
  8%   { opacity: .9; }
  22%  { transform: translateX(60%); opacity: 0; }
  100% { transform: translateX(60%); opacity: 0; }
}

.hero__sparks { position: absolute; inset: 0; pointer-events: none; }
.hero__sparks i {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 3px rgba(255, 255, 255, .55);
  opacity: 0;
  animation: spark 9s ease-in-out infinite;
}
.hero__sparks i:nth-child(1) { left: 24%; top: 44%; animation-delay: 0s;   }
.hero__sparks i:nth-child(2) { left: 47%; top: 33%; animation-delay: 2.4s; }
.hero__sparks i:nth-child(3) { left: 68%; top: 51%; animation-delay: 4.1s; }
.hero__sparks i:nth-child(4) { left: 81%; top: 29%; animation-delay: 6.3s; }
.hero__sparks i:nth-child(5) { left: 13%; top: 62%; animation-delay: 7.6s; }
@keyframes spark {
  0%, 88%, 100% { opacity: 0; transform: scale(.6); }
  93%           { opacity: .85; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__glint, .hero__sparks { display: none; }
}

/* ============ HERO COPY ADDITIONS ============ */
.hero__kinds {
  font-size: clamp(12px, min(.9vw, 1.5vh), 14px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-55);
}
.hero__bottom .reassure { margin-top: 4px; }

/* ============ HEADINGS: DECODE ============ */
.dc-word { display: inline-block; }
.dc-char { display: inline-block; }
.dc-char.is-scrambling { color: var(--accent); opacity: .7; }

/* ============ BAND: COUNTERS + MARQUEE ============ */
.band {
  padding: clamp(36px, 6vmin, 80px) 0 clamp(28px, 5vmin, 64px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 6vw, 100px);
  padding: 0 var(--side);
  margin-bottom: clamp(30px, 5vmin, 60px);
}
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, min(4.1vw, 6.6vh), 62px);
  line-height: .9;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-size: clamp(10px, 1.05vmin, 12px);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-55);
}

.marquee { position: relative; }
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 60s linear infinite;
  will-change: transform;
}
.marquee__row {
  font-family: var(--font-display);
  font-size: clamp(26px, min(4.1vw, 6.6vh), 60px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.01em;
  white-space: nowrap;
  padding-right: .3em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(238, 240, 242, .3);
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ============ BOOKING SHEET ============ */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 205;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--side);
  background: rgba(4, 6, 9, .78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity 340ms var(--ease);
}
.sheet.is-open { opacity: 1; }
.sheet[hidden] { display: none; }

.sheet__panel {
  position: relative;
  width: min(720px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  padding: clamp(28px, 5vmin, 56px);
  transform: translateY(18px) scale(.98);
  transition: transform 420ms var(--ease);
}
.sheet.is-open .sheet__panel { transform: none; }

.sheet__panel h2 {
  font-size: clamp(1.6rem, min(3.6vw, 5.8vh), 2.9rem);
  line-height: .98;
  letter-spacing: -.025em;
  margin: 14px 0 16px;
  text-wrap: balance;
}
.sheet__note {
  color: var(--text-70);
  font-size: clamp(13px, 1.35vmin, 15px);
  line-height: 1.6;
  max-width: 46ch;
  margin-bottom: clamp(20px, 3vmin, 34px);
}
.sheet__links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width: 560px) { .sheet__links { grid-template-columns: 1fr; } }

.sheet__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(16px, 2.4vmin, 22px) clamp(18px, 2.6vmin, 26px);
  border: 1px solid var(--line);
  font-size: clamp(13px, 1.35vmin, 15px);
  color: var(--text-70);
  transition: border-color 320ms var(--ease), color 320ms var(--ease), background 380ms var(--ease), transform 220ms var(--ease);
}
.sheet__link span { transition: transform 320ms var(--ease); }
.sheet__link:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.sheet__link:hover span { transform: translate(3px, -3px); }
.sheet__link:active { transform: scale(.98); }

.sheet__close {
  position: absolute;
  top: clamp(12px, 2vmin, 20px);
  right: clamp(12px, 2vmin, 20px);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-55);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color 300ms var(--ease), border-color 300ms var(--ease), transform 300ms var(--ease);
}
.sheet__close:hover { color: var(--text); border-color: var(--line); transform: rotate(90deg); }
.sheet__close:active { transform: rotate(90deg) scale(.88); }

/* ============ SHUTTER CONTROL ============ */
.dock {
  position: fixed;
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(10, 12, 16, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-55);
  opacity: .45;
  transition: opacity 320ms var(--ease);
}
.dock:hover, .dock:focus-within { opacity: 1; }

.dock__btn {
  width: 30px; height: 30px;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: color 260ms var(--ease), background 260ms var(--ease), transform 180ms var(--ease);
}
.dock__btn:hover { color: var(--text); background: rgba(238, 240, 242, .08); }
.dock__btn:active { transform: scale(.86); }
.dock__btn--shutter .ic-off { display: none; }
.dock__btn--shutter.is-off .ic-on { display: none; }
.dock__btn--shutter.is-off .ic-off { display: block; }

.dock__vol { display: flex; align-items: center; }
.dock__vol input {
  width: 0;
  opacity: 0;
  accent-color: var(--accent);
  transition: width 420ms var(--ease), opacity 320ms var(--ease);
  cursor: pointer;
}
.dock:hover .dock__vol input, .dock:focus-within .dock__vol input { width: 74px; opacity: 1; }

/* phones get no sound at all */
@media (max-width: 900px), (pointer: coarse) {
  .dock { display: none; }
}

/* ============ JDFLAG BADGE ============ */
.jd-badge {
  position: fixed;
  left: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 120;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px 7px 14px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: rgba(10, 12, 16, .72);
  backdrop-filter: blur(10px);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--accent);
}
.jd-badge[hidden] { display: none; }
.jd-badge button {
  all: unset;
  cursor: pointer;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--text-55);
}
.jd-badge button:hover { color: var(--text); }

/* ============ SERIES → PROJECTS ============ */
.series__more { display: flex; justify-content: center; margin-top: clamp(20px, 3.4vmin, 40px); }

/* ============ PROJECTS PAGES ============ */
.page-head { padding: calc(var(--block) + 40px) var(--side) var(--block); }
.page-head h1 {
  font-size: clamp(2rem, min(6vw, 9.5vh), 5rem);
  line-height: .95;
  letter-spacing: -.03em;
  margin: clamp(10px, 1.8vmin, 18px) 0 clamp(10px, 1.6vmin, 16px);
  text-wrap: balance;
}
.page-head p { color: var(--text-70); font-size: clamp(14px, 1.55vmin, 18px); max-width: 60ch; line-height: 1.6; }
.page-back {
  display: flex;
  width: fit-content; align-items: center; gap: 8px;
  font-size: clamp(11px, 1.15vmin, 13px);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-55);
  margin-bottom: 18px;
  transition: color 300ms var(--ease), transform 260ms var(--ease);
}
.page-back:hover { color: var(--text); transform: translateX(-4px); }

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 28vw, 440px), 1fr));
  gap: var(--gap);
  padding: 0 var(--side) var(--block);
}
.project-card { position: relative; display: block; overflow: hidden; background: var(--panel); }
.project-card img {
  width: 100%;
  height: auto;              /* the width/height attributes would win otherwise */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 800ms var(--ease);
}
.project-card:hover img { transform: scale(1.05); }
.project-card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(16px, 2.6vmin, 26px);
  background: linear-gradient(to top, rgba(10, 12, 16, .88) 12%, transparent 100%);
}
.project-card__body h2 {
  font-size: clamp(19px, 2.1vmin, 28px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 5px;
}
.project-card__meta {
  font-size: clamp(10px, 1.05vmin, 12px);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-55);
}

/* ============ PROJECT FOOT ============ */
.project-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vmin, 32px);
  padding: 0 var(--side) var(--block);
}
.project-next {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vmin, 20px);
  padding: clamp(10px, 1.6vmin, 16px);
  border: 1px solid var(--line);
  transition: border-color 320ms var(--ease), background 380ms var(--ease), transform 320ms var(--ease);
}
.project-next:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateX(5px); }
.project-next img { width: clamp(64px, 8vmin, 96px); height: clamp(48px, 6vmin, 72px); object-fit: cover; }
.project-next__text { display: flex; flex-direction: column; gap: 4px; }
.project-next__label {
  font-size: clamp(10px, 1.05vmin, 12px);
  text-transform: uppercase; letter-spacing: .14em; color: var(--text-55);
}
.project-next__title {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.9vmin, 24px);
  text-transform: uppercase;
  letter-spacing: -.01em;
}

/* ============ GALLERY ============ */
.gallery {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}
.gallery__track {
  display: flex;
  height: 100%;
  transition: transform 620ms var(--ease);
  touch-action: pan-y;
}
.gallery__slide {
  flex: 0 0 100%;
  height: 100%;
}
.gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
  -webkit-user-drag: none;
  user-select: none;
}
.gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(36px, 4.2vmin, 46px); height: clamp(36px, 4.2vmin, 46px);
  border-radius: 50%;
  background: rgba(10, 12, 16, .6);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 520ms var(--ease), border-color 520ms var(--ease), transform 260ms var(--ease), color 460ms var(--ease);
}
.gallery__arrow:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.gallery__arrow:active { transform: translateY(-50%) scale(.86); transition-duration: 160ms; }
.gallery__arrow--prev { left: clamp(8px, 1.4vmin, 16px); }
.gallery__arrow--next { right: clamp(8px, 1.4vmin, 16px); }
.gallery__arrow.is-tapped { transform: translateY(-50%) scale(.88); }

.gallery__dots {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.gallery__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  /* the photo behind can be any brightness — outline keeps them readable */
  background: rgba(238, 240, 242, .55);
  box-shadow: 0 0 0 1px rgba(10, 12, 16, .45);
  border: none; padding: 0;
  cursor: pointer;
  transition: background 420ms var(--ease), transform 420ms var(--ease);
}
.gallery__dot:hover { background: var(--text); transform: scale(1.2); }
.gallery__dot:active { transform: scale(.7); transition-duration: 140ms; }
.gallery__dot.is-active { background: var(--accent); transform: scale(1.35); }

@media (max-width: 900px) {
  /* on a phone the arrows only get in the way of the swipe */
  .gallery__arrow { display: none; }
}

/* ============ ALL-PROJECTS BAND ============ */
.projects-band {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(10px, 2vmin, 24px);
  padding: clamp(34px, 6vmin, 84px) var(--side);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background 620ms var(--ease);
}
.projects-band:hover { background: var(--accent-soft); }

.projects-band__label {
  grid-column: 1;
  font-size: clamp(10px, 1.05vmin, 12px);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--text-55);
}
.projects-band__title {
  grid-column: 1;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, min(7vw, 11vh), 6rem);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
  transition: transform 620ms var(--ease);
}
.projects-band:hover .projects-band__title { transform: translateX(clamp(6px, 1.4vmin, 18px)); }
.projects-band__note {
  grid-column: 1;
  margin-top: 8px;
  font-size: clamp(13px, 1.35vmin, 15px);
  color: var(--text-70);
}
.projects-band__arrow {
  grid-column: 2;
  grid-row: 1 / -1;
  width: clamp(52px, 7vmin, 82px);
  height: clamp(52px, 7vmin, 82px);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text);
  transition: background 620ms var(--ease), border-color 620ms var(--ease), transform 620ms var(--ease), color 460ms var(--ease);
}
.projects-band:hover .projects-band__arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  transform: translateX(clamp(4px, 1vmin, 12px));
}

/* ============ CONTACT EMAIL ============ */
.contact__email a {
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 420ms var(--ease), border-color 420ms var(--ease);
}
.contact__email a:hover { color: var(--text); border-color: var(--accent); }

/* ============ SHUTTER CONTROL SWELLS WHILE IT FIRES ============ */
.dock.is-firing {
  opacity: 1;
  transform: scale(1.28);
  border-color: var(--accent);
}
.dock {
  transform-origin: bottom right;
  transition: opacity 320ms var(--ease), transform 460ms var(--ease), border-color 460ms var(--ease);
}
.dock.is-firing .dock__btn { color: var(--accent); }

/* ============ INTRO ============ */
/* The bottom-left block starts big in the middle and shrinks into place. */
/* NB: this used to be `overflow: hidden`, which locked the wheel for the whole
   intro. `clip` on one axis leaves the other one `visible`, so the scaled block
   cannot push the page sideways while vertical scrolling stays live. */
body.intro-run { overflow-x: clip; }
/* the visitor grabbed the wheel — settle the block instead of making them wait */
body.intro-rush .hero__bottom,
body.intro-rush .hero__side,
body.intro-rush .nav__links,
body.intro-rush .nav__end { transition-duration: 400ms !important; }
body.intro-run .hero__side,
body.intro-run .nav__links,
body.intro-run .nav__end { opacity: 0; }

body.intro-run .hero__media { opacity: .35; }
body.intro-go .hero__media { opacity: 1; transition: opacity 2400ms var(--ease); }

body.intro-run .hero__bottom {
  transform: translate(var(--ix, 0px), var(--iy, 0px)) scale(var(--is, 1.6));
  transform-origin: left top;
  will-change: transform;
}
/* the copy has to be visible while the block travels, so the reveal
   animation is switched off for the duration */
body.intro-run .hero__bottom .rise {
  opacity: 1;
  filter: none;
  transform: none;
  transition: none;
}
body.intro-go .hero__bottom {
  transform: none;
  transition: transform 3000ms cubic-bezier(.2, 1, .22, 1);
}
body.intro-go .hero__side,
body.intro-go .nav__links,
body.intro-go .nav__end {
  opacity: 1;
  transition: opacity 900ms var(--ease) 1900ms;
}

@media (prefers-reduced-motion: reduce) {
  body.intro-run .hero__bottom { transform: none; }
}

.mobile-menu__book { margin-top: clamp(10px, 2vmin, 20px); }

/* ============ BOOK BUTTON IN THE HEADER ============ */
/* NB: these blocks live at the very end of the file — an earlier edit that
   replaced a range once ate them. Keep them together. */
.nav__book {
  padding: clamp(11px, 1.5vmin, 16px) clamp(18px, 2.6vmin, 28px);
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-size: clamp(12px, 1.55vmin, 15px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 520ms var(--ease),
    color 460ms var(--ease),
    border-color 520ms var(--ease),
    transform 380ms var(--ease);
}
.nav__book:hover { background: transparent; color: var(--text); }
.nav__book:active { transform: scale(.94); transition-duration: 180ms; }
.nav__book:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 900px) {
  /* the burger menu already carries the booking button */
  .nav__book { display: none; }
}

/* ============ EMAIL ROW IN THE BOOKING SHEET ============ */
.sheet__link--wide { grid-column: 1 / -1; }

/* ============ NAV: CURRENT SECTION ============ */
.nav__links a.is-current { color: var(--accent); }
.nav__links a.is-current::after {
  transform: scaleX(1);
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(213, 40, 63, .7);
}

/* ============ SERVICES: ONE SCREEN ============ */
/* Heading, all three cards and the booking button have to fit without
   scrolling, so the card height is driven by the viewport, not the photo. */
.services {
  /* exactly one screen: nothing of the neighbouring sections peeks in */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(52px, 7vmin, 104px);
  padding-bottom: clamp(44px, 6vmin, 88px);
}
.services__head { margin-bottom: clamp(16px, 2.6vmin, 32px); }
.services__head h2 { font-size: clamp(1.7rem, min(4.4vw, 7vh), 3.6rem); }

.services .cards {
  max-width: 1180px;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(10px, 1.4vmin, 18px);
}
.card__media {
  aspect-ratio: auto;
  height: clamp(170px, 38vh, 400px);
}
.card__body { padding: clamp(13px, 1.8vmin, 21px); }
.card__kicker { font-size: clamp(9px, .95vmin, 11px); }
.card__body h3 {
  font-size: clamp(17px, min(1.8vw, 2.9vh), 25px);
  margin: clamp(4px, .8vmin, 9px) 0 clamp(6px, 1.1vmin, 11px);
}
.card__body p { font-size: clamp(11px, 1.15vmin, 13px); line-height: 1.55; }
.card__foot { padding-top: clamp(10px, 1.6vmin, 18px); }
.card__go { width: clamp(34px, 3.8vmin, 40px); height: clamp(34px, 3.8vmin, 40px); }
.services .section__cta { margin-top: clamp(18px, 2.8vmin, 36px); }

@media (max-width: 720px) {
  /* stacked on a phone — one screen is off the table anyway */
  .card__media { height: clamp(200px, 42vh, 380px); }
}

/* anchors land below the fixed header instead of under it */
section[id], .projects-band { scroll-margin-top: clamp(72px, 11vmin, 112px); }

/* ============ PROJECT PAGE: BOOKING AT THE TOP ============ */
/* .page-head is a plain block, so the button needs its own line, not align-self */
.page-head__book { display: flex; width: fit-content; margin-top: clamp(20px, 3vmin, 34px); }
@media (max-width: 720px) { .page-head__book { width: 100%; } }

/* ============ ALL-PROJECTS BAND: THE COVERS ============ */
/* The band was a bare dark strip that did not read as a link. It now carries a
   dimmed strip of the real project covers that lights up and drifts on hover. */
.projects-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.projects-band__strip {
  position: absolute;
  inset: 0;
  z-index: -2;                       /* under the wash: ::before must cover it */
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vmin, 16px);
  justify-content: flex-end;
  padding-right: clamp(90px, 12vmin, 150px);
  opacity: .46;
  filter: grayscale(.35);
  transform: translateX(0);
  transition: opacity 620ms var(--ease), filter 620ms var(--ease), transform 900ms var(--ease);
  pointer-events: none;
  mask-image: linear-gradient(to right, transparent 0%, transparent 26%, #000 48%, #000 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 26%, #000 48%, #000 100%);
}
.projects-band__strip img {
  height: clamp(120px, 20vmin, 240px);
  width: clamp(90px, 15vmin, 180px);
  object-fit: cover;
  flex: 0 0 auto;
  border-radius: 2px;
}
.projects-band:hover .projects-band__strip {
  opacity: .8;
  filter: grayscale(0);
  transform: translateX(clamp(-26px, -3vmin, -10px));
}

/* a dark wash under the copy, so the headline stays readable over the photos */
.projects-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, var(--bg) 0%, var(--bg) 34%, rgba(10, 12, 16, .62) 55%, rgba(10, 12, 16, .22) 100%);
  pointer-events: none;
}

.projects-band__count {
  grid-column: 1;
  margin-top: clamp(8px, 1.2vmin, 14px);
  font-size: clamp(11px, 1.15vmin, 13px);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent);
}

/* the arrow reads as a button before you touch it, not only on hover */
.projects-band__arrow { border-color: rgba(213, 40, 63, .55); }
.projects-band:hover { background: transparent; }

@media (max-width: 720px) {
  /* on a phone the copy needs the whole width — keep the strip as a faint wash */
  .projects-band__strip { opacity: .16; padding-right: 0; }
  .projects-band::before {
    background: linear-gradient(to right, var(--bg) 0%, rgba(10, 12, 16, .82) 100%);
  }
}

/* ============================================================
   MOBILE PASS — 2026-09-23
   One consolidated block at the end of the file. Everything here
   fixes something measured on a real viewport, not a guess.
   ============================================================ */

@media (max-width: 900px) {
  /* --- header ---------------------------------------------------------
     The desktop grid is `1fr auto 1fr` so the links land on the centre of
     the viewport. On a phone the links are display:none, so the middle
     column collapses and the 1fr sides squeeze the logo to 92px — the
     wordmark then ran straight under the EN/RU switch. Two columns here. */
  .nav { grid-template-columns: auto 1fr; }
  .nav__end { grid-column: 2; justify-self: end; }

  /* CTA-07: every tap target clears 44px */
  .lang { padding: 3px; }
  .lang__btn { min-width: 48px; min-height: 40px; }
  .nav__toggle { width: 48px; height: 48px; }
}

@media (max-width: 720px) {
  /* --- hero: HERO-01, one screen, CTA visible without scrolling ------- */
  .hero { height: 100svh; min-height: 100svh; }
  .hero__content { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
  .hero__bottom h1 { font-size: clamp(2.6rem, 13.5vw, 4.4rem); line-height: .9; letter-spacing: -.035em; }
  .hero__sub { font-size: 15px; line-height: 1.5; max-width: 30ch; }
  /* BRK-03: without balance the last line was just "/ EVENTS" */
  .hero__kinds { font-size: 11px; letter-spacing: .1em; text-wrap: balance; max-width: 30ch; }
  .hero__cta { gap: 10px; }
  .reassure { font-size: 11.5px; }

  /* --- mobile menu: links were 32px tall ----------------------------- */
  #mobileMenu a {
    min-height: 52px;
    display: flex;
    align-items: center;
  }

  /* --- gallery dots: 7px is not a tap target -------------------------
     The button itself becomes 22x44 and the visible dot is drawn by the
     pseudo-element, so the measured box and the real hit area agree. */
  .gallery__dots { bottom: 4px; gap: 0; }
  .gallery__dot {
    width: 22px; height: 44px;
    background: none; box-shadow: none;
    display: grid; place-items: center;
    transform: none;
  }
  .gallery__dot::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(238, 240, 242, .55);
    box-shadow: 0 0 0 1px rgba(10, 12, 16, .45);
    transition: background 420ms var(--ease), transform 420ms var(--ease);
  }
  .gallery__dot:active { transform: none; }
  .gallery__dot:active::before { transform: scale(.7); transition-duration: 140ms; }
  .gallery__dot.is-active { transform: none; background: none; }
  .gallery__dot.is-active::before { background: var(--accent); transform: scale(1.35); }

  /* --- work grid ------------------------------------------------------
     `columns: <width>` silently collapsed to a single column at 360px and
     the section ballooned from 1420px to 3766px. Pin the count instead. */
  .work__grid { columns: auto 2; column-gap: 8px; }
  .filter { gap: 7px; }
  .filter__chip { min-height: 44px; }

  /* --- the rest of the targets under 44px ----------------------------- */
  .nav__logo { min-height: 44px; }
  .lang__btn { min-height: 44px; }
  .card__go { width: 44px; height: 44px; }

  /* --- section rhythm: the page was 7.4k px, this trims the dead air -- */
  .section { padding-top: clamp(52px, 11vmin, 88px); padding-bottom: clamp(52px, 11vmin, 88px); }
  .series__head, .work__head, .about__copy { margin-bottom: clamp(18px, 4vmin, 30px); }

  /* --- the sound dock sat over the last tile ------------------------- */
  .dock { bottom: max(14px, env(safe-area-inset-bottom)); }
}

/* the notch and the home indicator */
@supports (padding: env(safe-area-inset-left)) {
  @media (max-width: 720px) {
    .nav { padding-left: max(var(--side), env(safe-area-inset-left));
           padding-right: max(var(--side), env(safe-area-inset-right)); }
  }
}

/* ============ PRELOAD SCREEN ============ */
/* Covers the page until the display font and the hero frame are decoded, so
   nobody watches the wordmark reflow. Hard-capped in script.js — a slow or
   dead image must never hold the page. */
html.is-loading, html.is-loading body { overflow: hidden; }

.preload {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  transition: opacity 400ms var(--ease), visibility 400ms;
}
.preload.is-gone { opacity: 0; visibility: hidden; }

.preload__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vmin, 30px);
}
.preload__mark {
  width: clamp(38px, 5.4vmin, 58px);
  height: clamp(38px, 5.4vmin, 58px);
  color: var(--text);
  animation: preload-breathe 2200ms var(--ease) infinite;
}
@keyframes preload-breathe {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

.preload__bar {
  width: clamp(112px, 17vmin, 168px);
  height: 2px;
  background: rgba(238, 240, 242, .12);
  overflow: hidden;
}
.preload__bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .preload__mark { animation: none; opacity: 1; }
  .preload__bar span { transition: none; }
}

@media (max-width: 720px) {
  /* 12px tap targets: the footer link and the back-link on project pages */
  .footer a,
  .page-back { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ============ HEADER OVER THE HERO ============ */
/* On the first screen the links sat at 70% grey over a bright sky and simply
   vanished; only the scrolled state was readable. IMG-06 rules out a flat dark
   scrim over a photo, so this is the permitted pair: a blurred, masked backdrop
   plus a shadow on the glyphs themselves. Both drop away once .is-scrolled
   turns the bar solid. */
.nav::before {
  backdrop-filter: blur(18px) saturate(118%) brightness(.58);
  -webkit-backdrop-filter: blur(18px) saturate(118%) brightness(.58);
  background: linear-gradient(to bottom, rgba(6, 8, 11, .52) 0%, rgba(6, 8, 11, .22) 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
}

.nav:not(.is-scrolled) .nav__word,
.nav:not(.is-scrolled) .nav__links a,
.nav:not(.is-scrolled) .lang__btn {
  color: var(--text);
  text-shadow: 0 1px 10px rgba(6, 8, 11, .65);
}
/* the current-section link keeps its accent — the rule above outranks it */
.nav:not(.is-scrolled) .nav__links a.is-current { color: var(--accent); }
.nav:not(.is-scrolled) .lang__btn.is-active { color: var(--accent-ink); text-shadow: none; }

/* the burger strokes need the same help on a bright frame */
.nav:not(.is-scrolled) .nav__toggle span {
  box-shadow: 0 1px 8px rgba(6, 8, 11, .6);
}