/* =========================================================================
   Vy Do portfolio
   Editorial style: black hero and footer, light grey pages, very large
   Space Grotesk headlines, floating tilted ads, tilted info tags,
   result cards that stack as you scroll, hairline tables.
   Rules that keep it easy to read:
   - purple = something you can act on, orange = a proven result
   - reading text is Inter, sentence case, 16px or more (labels 12-13px caps)
   - at most one video plays at a time; motion follows the scroll only
   ========================================================================= */

:root {
  --black: #000;
  --paper: #f8f8f8;
  --white: #fff;
  --ink: #0b0b0c;
  --muted: #5d5d66;          /* 6.3:1 on paper */
  --line: #d6d6db;
  --line-dark: rgba(255, 255, 255, 0.2);
  --on-black-muted: #a9a9b2; /* 8.8:1 on black */
  --purple: #6c3bf4;
  --purple-deep: #5424e0;
  --orange: #ff6a1f;
  --upwork: #0e7a00;
  --focus: var(--purple);

  --f-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --f-body: "Inter", system-ui, "Segoe UI", sans-serif;

  --gutter: clamp(16px, 2.4vw, 36px);
  --max: 1600px;
  --topbar-h: 64px;
  --section-y: clamp(72px, 9vw, 140px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }

@media (max-width: 1023.98px) {
  :root { --topbar-h: 56px; }
  html { scroll-padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 100;
  background: var(--white); color: var(--ink); padding: 12px 16px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.wrap {
  max-width: var(--max); margin: 0 auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

/* small bracketed counter, e.g. "All [22]" */
.count { display: inline-block; font: 500 12px/1 var(--f-body); letter-spacing: 0.02em; vertical-align: 0.6em; margin-left: 2px; }

/* ------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  font: 500 16px/1.15 var(--f-body); text-decoration: none; text-align: center; white-space: nowrap;
  color: var(--ink); background: transparent;
  border: 1.5px solid var(--ink); border-radius: 999px;
  transition: background-color 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { background: var(--ink); color: var(--white); }
.btn--primary { background: var(--purple); border-color: var(--purple); color: var(--white); }
.btn--primary:hover { background: var(--purple-deep); border-color: var(--purple-deep); color: var(--white); }
.btn--light { background: var(--white); border-color: var(--white); color: var(--ink); }
.btn--light:hover { background: transparent; color: var(--white); }
.btn--outline-light { border-color: rgba(255, 255, 255, 0.7); color: var(--white); }
.btn--outline-light:hover { background: var(--white); border-color: var(--white); color: var(--ink); }
.btn--lg { min-height: 54px; padding: 0 26px; font-size: 17px; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 15px; }
.btn--block { width: 100%; }
.btn--icon { width: 44px; min-height: 44px; padding: 0; }
@media (pointer: coarse) { .btn--sm { min-height: 44px; } }

.link-btn {
  display: inline-flex; align-items: center; min-height: 44px;
  background: none; border: 0; padding: 0;
  font: 500 16px/1.3 var(--f-body); color: var(--purple);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-align: left;
}
.link-btn:hover { text-decoration-thickness: 2px; }
.link-btn--light { color: var(--white); }

.more {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 500 18px/1.2 var(--f-body); text-decoration: none; white-space: nowrap; color: var(--purple);
}
.hooks .more { color: var(--white); }
.more svg { width: 20px; height: 20px; transition: transform 0.15s ease-out; }
.more:hover { text-decoration: underline; text-underline-offset: 4px; }
.more:hover svg { transform: translateX(3px); }

.arrow-btn {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  border: 1.5px solid currentColor; background: transparent;
  display: grid; place-items: center; color: inherit;
}
.arrow-btn svg { width: 18px; height: 18px; }

.copy-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border: 1.5px solid currentColor; border-radius: 999px; background: transparent;
  font: 500 14px/1 var(--f-body); color: inherit;
}
.copy-btn svg { width: 14px; height: 14px; }
@media (pointer: coarse) { .copy-btn { min-height: 44px; } }

.status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #2bc46b; margin-right: 8px; flex: none;
}

.stars { display: inline-flex; gap: 3px; }
.stars svg { width: 18px; height: 18px; fill: var(--orange); }

/* Switch (touch devices only) */
.switch-row { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.switch {
  position: relative; width: 52px; height: 30px; flex: none; padding: 0;
  border-radius: 999px; border: 1.5px solid currentColor; background: transparent;
}
.switch::after { content: ""; position: absolute; inset: -8px; }
.switch span {
  position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%;
  background: currentColor; transition: transform 0.15s ease-out;
}
.switch[aria-checked="true"] { background: var(--purple); border-color: var(--purple); }
.switch[aria-checked="true"] span { transform: translateX(22px); background: var(--white); }
.switch-row.touch-only { display: none; }
@media (hover: none), (pointer: coarse) { .switch-row.touch-only { display: flex; } }

/* Tilted info tags (on ads and photos) */
.ttag {
  position: absolute; z-index: 4; margin: 0;
  padding: 8px 12px; rotate: 5deg;
  background: var(--tag, var(--white)); color: var(--ink);
  font: 600 13px/1.3 var(--f-body); white-space: nowrap;
  box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.ttag--result { --tag: var(--orange); text-transform: uppercase; letter-spacing: 0.03em; font-size: 12px; }
.ttag--light { --tag: var(--white); text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px; }
.ttag--dark { background: var(--ink); color: var(--white); font: 500 16px/1.2 var(--f-display); padding: 10px 14px; }
.ttag--meta { display: grid; gap: 2px; padding: 10px 14px; font-weight: 400; }
.ttag--meta dt { display: inline; font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: 0.03em; }
.ttag--meta dd { display: inline; margin: 0; }

/* --------------------------------------------------------------- Top bar */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  color: var(--white);
  transition: background-color 0.2s ease-out, color 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.2s ease-out;
}
.topbar.is-solid {
  background: rgba(248, 248, 248, 0.94); color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
}
/* over the hero the bar is black like the hero, so the drifting ads never pass under white text */
.js .topbar:not(.is-solid) { background-color: var(--black); }
.topbar__row { height: var(--topbar-h); display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; min-height: 44px; }
.brand__mark { width: 26px; height: 26px; flex: none; }
.brand__name { font: 600 22px/1 var(--f-display); letter-spacing: -0.02em; white-space: nowrap; }
.brand__role { font: 500 12px/1 var(--f-body); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; padding-top: 3px; white-space: nowrap; }
.topbar__nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; }
.topbar__nav a {
  display: inline-block; padding: 8px 0; text-decoration: none;
  font: 500 14px/1 var(--f-body); letter-spacing: 0.04em; text-transform: uppercase;
  border-bottom: 1.5px solid transparent;
}
.topbar__nav a:hover, .topbar__nav a[aria-current="true"] { border-bottom-color: currentColor; }
.topbar__status { display: flex; align-items: center; margin: 0; font-size: 14px; white-space: nowrap; }
.topbar__hire { transition: opacity 0.15s ease-out, visibility 0s linear 0s; }
.topbar__hire.is-hidden { opacity: 0; visibility: hidden; transition: opacity 0.15s ease-out, visibility 0s linear 0.15s; }

.menu-btn {
  display: none; align-items: center; gap: 12px; min-height: 44px; padding: 0 4px 0 12px;
  border: 0; background: transparent;
  font: 500 14px/1 var(--f-body); letter-spacing: 0.06em; text-transform: uppercase;
}
.menu-btn__bars { display: grid; gap: 6px; }
.menu-btn__bars i { display: block; width: 26px; height: 2px; background: currentColor; }

@media (max-width: 1279.98px) { .topbar__status { display: none; } }
@media (max-width: 1099.98px) { .topbar__nav ul { gap: 18px; } .brand__role { display: none; } }
@media (max-width: 1023.98px) {
  .topbar__nav, .topbar__hire { display: none; }
  .menu-btn { display: inline-flex; }
  .topbar.is-hidden { transform: translateY(-100%); }
}

/* Menu (modal, below 1024px) */
.menu {
  margin: 0 0 0 auto; width: min(100%, 480px); max-width: none; height: 100%; max-height: none;
  border: 0; padding: 0 var(--gutter) 28px; background: var(--black); color: var(--white); --focus: var(--white);
  overflow-y: auto;
}
.menu[open] { display: flex; flex-direction: column; gap: 20px; animation: menu-in 0.25s ease-out; }
.menu::backdrop { background: rgba(0, 0, 0, 0.6); }
@keyframes menu-in { from { transform: translateX(24px); opacity: 0; } }
.menu__top { display: flex; justify-content: space-between; align-items: center; min-height: var(--topbar-h); }
.menu__close {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 12px;
  border: 0; background: transparent; color: var(--white);
  font: 500 14px/1 var(--f-body); letter-spacing: 0.06em; text-transform: uppercase;
}
.menu__close svg { width: 22px; height: 22px; }
.menu__links { list-style: none; margin: 0; padding: 0; }
.menu__links li { border-top: 1px solid var(--line-dark); }
.menu__links li:last-child { border-bottom: 1px solid var(--line-dark); }
.menu__links a {
  display: flex; align-items: center; min-height: 60px; text-decoration: none;
  font: 500 34px/1 var(--f-display); letter-spacing: -0.02em;
}
.menu__links a:hover { color: var(--on-black-muted); }
.menu__status { display: flex; align-items: center; margin: 0; font-size: 15px; }
.menu__contact { margin: 0; display: grid; gap: 4px; font-size: 15px; }
.menu__contact a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }

/* ------------------------------------------------------------------ Hero */
.hero { position: relative; background: var(--black); color: var(--white); --focus: var(--white); overflow: hidden; }
.hero__inner {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding-top: calc(var(--topbar-h) + clamp(24px, 5vh, 64px));
  padding-bottom: clamp(20px, 4vh, 40px);
}
.hero__copy { position: relative; z-index: 2; margin-block: auto; max-width: min(60%, 940px); }
.hero__eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(16px, 2.6vh, 28px); font: 500 15px/1.3 var(--f-body); color: var(--on-black-muted); }
.avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; }
.hero__title {
  margin: 0; font: 500 clamp(44px, min(7.2vw, 11.5vh), 116px)/0.98 var(--f-display);
  letter-spacing: -0.035em; text-wrap: balance;
}
.hero__lead { margin: clamp(18px, 3vh, 32px) 0 0; max-width: 40ch; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; color: #d9d9de; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 3.4vh, 36px); }

.hero__stats {
  position: relative; z-index: 2; list-style: none; padding: 0; margin: clamp(28px, 5vh, 56px) 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: min(60%, 940px);
  border-top: 1px solid var(--line-dark);
}
.hero__stats > li { min-width: 0; }
.hero__stats > li + li { border-left: 1px solid var(--line-dark); }
.stat { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px 16px 4px; color: inherit; text-decoration: none; }
.hero__stats > li:first-child .stat { padding-left: 0; }
.stat b { font: 600 clamp(22px, 2.2vw, 34px)/1 var(--f-display); letter-spacing: -0.02em; white-space: nowrap; }
.stat b.is-result { color: var(--orange); }
/* count-up (main.js): the invisible final value holds the width while the digits run */
.cu { display: inline-grid; font-variant-numeric: tabular-nums; }
.cu > span { grid-area: 1 / 1; }
.cu__size { visibility: hidden; }
.stat .cu, .stat .cu > span { font-size: inherit; line-height: inherit; color: inherit; }
.stat span { font-size: 14px; line-height: 1.4; color: var(--on-black-muted); }
.stat span svg { display: inline; width: 13px; height: 13px; margin-left: 4px; vertical-align: -1px; }
a.stat:hover > span { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
/* short laptop screens (e.g. 1366x657): keep the proof numbers and their labels above the fold */
@media (min-width: 1100px) and (max-height: 800px) { .hero__stats { margin-top: clamp(20px, 3vh, 56px); } }

/* Floating ads */
.hthumb { position: relative; }
.hthumb__btn { display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; }
.hthumb .pill { font-size: 12px; padding: 3px 7px; right: 6px; bottom: 6px; }
.hthumb .ttag { left: -10px; bottom: 14%; rotate: -7deg; }
@media (min-width: 1100px) {
  .hero__thumbs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  .hthumb {
    position: absolute; width: var(--w); top: var(--t); right: var(--r); rotate: var(--rot); z-index: var(--z);
    pointer-events: auto; transition: rotate 0.35s ease-out, scale 0.35s ease-out;
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9);
  }
  .hthumb:hover, .hthumb:focus-within { rotate: 0deg; scale: 1.04; z-index: 10; }
  .hthumb--a { --w: clamp(150px, 13.4vw, 236px); --t: 19%; --r: 2%; --rot: 4deg; --z: 3; --drift: -160px; }
  .hthumb--b { --w: clamp(112px, 9.8vw, 172px); --t: 12%; --r: 21%; --rot: -6deg; --z: 2; --drift: -70px; }
  .hthumb--c { --w: clamp(118px, 10.4vw, 184px); --t: 52%; --r: 18%; --rot: -3deg; --z: 4; --drift: -200px; }
  .hthumb--d { --w: clamp(98px, 8.4vw, 150px); --t: 63%; --r: 2%; --rot: 7deg; --z: 5; --drift: -110px; }
  .hthumb--e { --w: clamp(86px, 7.2vw, 128px); --t: 36%; --r: 31%; --rot: 5deg; --z: 1; --drift: -240px; }
}
/* the floating ads drift up at different speeds as you scroll (follows the scroll, no autoplay) */
@supports (animation-timeline: scroll()) {
  @media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
    .hthumb { animation: hero-drift linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
    @keyframes hero-drift { to { translate: 0 var(--drift, -100px); } }
  }
}
@media (max-width: 1099.98px) {
  .hero__inner { min-height: 0; }
  .hero__copy, .hero__stats { max-width: none; }
  .hero__copy { margin-block: 0; }
  .hero__thumbs { display: flex; justify-content: center; margin: clamp(32px, 6vw, 56px) -6px 0; }
  .hthumb { width: 19%; max-width: 168px; margin-inline: -1%; }
  /* each ad sits above its right-hand neighbour, so the result tags and duration pills stay readable */
  .hthumb--a { rotate: 4deg; z-index: 5; } .hthumb--b { rotate: -5deg; z-index: 4; margin-top: 18px; }
  .hthumb--c { rotate: 3deg; z-index: 3; } .hthumb--d { rotate: -4deg; z-index: 2; margin-top: 22px; }
  .hthumb--e { rotate: 5deg; z-index: 1; }
}
/* tablets: the proof numbers come right after the buttons, the ads after them */
@media (min-width: 768px) and (max-width: 1099.98px) { .hero__thumbs { order: 1; } }
@media (max-width: 767.98px) {
  .hero__title { font-size: clamp(38px, 11vw, 56px); }
  .hero__eyebrow { font-size: 14px; }
  .avatar { width: 32px; height: 32px; }
  .hero__lead { font-size: 17px; }
  .hero__cta .btn { flex: 1 1 auto; padding: 0 16px; }
  .hero__thumbs { margin-top: 32px; }
  .hthumb { width: 25%; }
  .hthumb--e { display: none; }
  .hthumb .ttag { display: none; }
  .hero__stats { grid-template-columns: 1fr 1fr; margin-top: 32px; }
  .hero__stats > li:nth-child(odd) .stat { padding-left: 0; }
  .hero__stats > li:nth-child(3) { border-left: 0; }
  .hero__stats > li:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
  .stat { padding: 14px 12px 14px 16px; }
  .stat b { font-size: 24px; }
}

/* Media boxes (poster + preview video) */
.media { position: relative; display: block; overflow: hidden; background: #1a1a1c; color: var(--white); }
button.media { padding: 0; border: 0; }
.media img, .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media video { opacity: 0; transition: opacity 0.15s ease-out; }
.media video.is-playing { opacity: 1; }
.media--square .media__bg { filter: blur(16px) brightness(0.55); transform: scale(1.2); }
.media--square .media__fg, .media--square video { object-fit: contain; }
.pill {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px;
  border-radius: 999px; background: rgba(0, 0, 0, 0.72); color: var(--white);
  font: 500 12px/1.3 var(--f-body); letter-spacing: 0.02em; white-space: nowrap;
}
.pill svg { width: 10px; height: 10px; flex: none; max-width: none; }

/* -------------------------------------------------------------- Sections */
/* sections only pad their top, so the gap between two sections is one --section-y */
.section { padding: var(--section-y) 0 0; }
.work, .hooks { padding-bottom: var(--section-y); }
.shead { margin-bottom: clamp(32px, 4.4vw, 72px); }
.shead__title {
  margin: 0; font: 600 clamp(42px, 7.2vw, 112px)/0.98 var(--f-display);
  letter-spacing: -0.035em; text-wrap: balance;
}
.shead__meta { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px 48px; margin-top: clamp(18px, 2.4vw, 36px); }
.shead__sub { margin: 0; max-width: 54ch; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; color: var(--muted); }
.shead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }

/* ---------------------------------------------------------------- Logos */
.logos { padding: clamp(48px, 6vw, 88px) 0 0; }
.logos__title { margin: 0 0 20px; font: 500 14px/1.3 var(--f-body); letter-spacing: 0.06em; text-transform: uppercase; }
.logos__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.logos__grid > li { display: grid; place-items: center; min-width: 0; height: clamp(72px, 7vw, 104px); padding: 0 16px; border-bottom: 1px solid var(--line); }
.logos__grid > li:not(:nth-child(5n+1)) { border-left: 1px solid var(--line); }
.logos__grid img { width: auto; height: auto; max-width: min(150px, 100%); max-height: 38px; object-fit: contain; }
.logos__grid img.logo--light { max-width: min(170px, 100%); max-height: 52px; }
.logos__grid img.logo--heavy { max-height: 30px; }
@media (max-width: 767.98px) {
  .logos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logos__grid > li { height: 64px; padding: 0 10px; }
  .logos__grid > li:not(:nth-child(5n+1)) { border-left: 0; }
  .logos__grid > li:not(:nth-child(3n+1)) { border-left: 1px solid var(--line); }
  .logos__grid img { max-width: min(100px, 100%); max-height: 28px; }
  .logos__grid img.logo--light { max-width: min(110px, 100%); max-height: 39px; }
  .logos__grid img.logo--heavy { max-height: 22px; }
}

/* --------------------------------------------------------------- Results
   Cards that pile up as you scroll. Each card is shorter than the
   screen so nothing on it gets covered before you've seen it. */
.stack {
  --pad: clamp(20px, 3vw, 48px);
  --card-h: min(720px, calc(100vh - var(--topbar-h) - 72px)); /* fallback for browsers without svh */
}
@supports (height: 100svh) {
  .stack { --card-h: min(720px, calc(100svh - var(--topbar-h) - 72px)); }
}
/* tablets: the phone's Hire bar (about 64px) shows at the bottom, so cards end above it */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .stack { --card-h: min(720px, calc(100vh - var(--topbar-h) - 136px)); }
  @supports (height: 100svh) {
    .stack { --card-h: min(720px, calc(100svh - var(--topbar-h) - 136px - env(safe-area-inset-bottom, 0px))); }
  }
}
.stack {
  /* the gap is how far you scroll while a card is fully visible, before the next one starts covering it */
  display: grid; gap: clamp(28px, 22vh, 200px);
}
.scard {
  position: sticky; top: calc(var(--topbar-h) + 16px + var(--i, 0) * 14px);
  height: var(--card-h);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); gap: var(--pad);
  padding: var(--pad); overflow: hidden; isolation: isolate;
  background: #161618; color: var(--white); --focus: var(--white);
  box-shadow: 0 -18px 40px -28px rgba(0, 0, 0, 0.55);
}
.scard__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.scard__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); filter: blur(44px) saturate(1.3) brightness(0.55); }
.scard__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0.15) 100%); }
.scard__copy { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.scard__kicker {
  margin: 0; display: flex; flex-wrap: wrap; gap: 6px 20px;
  font: 500 13px/1.3 var(--f-body); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85);
}
.scard__head { margin: auto 0 0; display: flex; flex-direction: column; gap: 14px; }
.scard__num {
  font: 600 clamp(48px, min(7vw, 12vh), 124px)/0.92 var(--f-display);
  letter-spacing: -0.04em; color: var(--orange); text-wrap: balance;
}
.scard__label { font: 500 clamp(20px, min(2.2vw, 4vh), 34px)/1.15 var(--f-display); letter-spacing: -0.01em; max-width: 24ch; }
.scard__text { margin: clamp(14px, 2.4vh, 24px) 0 0; max-width: 42ch; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: rgba(255, 255, 255, 0.9); }
.scard__why {
  margin: clamp(12px, 2vh, 20px) 0 0; padding-top: clamp(10px, 1.6vh, 14px); max-width: 46ch;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  font-size: clamp(15px, 1.05vw, 17px); line-height: 1.45; color: rgba(255, 255, 255, 0.85);
}
.scard__why b { display: block; margin-bottom: 4px; font: 600 12px/1.3 var(--f-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange); }
.scard__actions { margin-top: clamp(8px, 1.6vh, 16px); }
.scard__side { position: relative; width: calc((var(--card-h) - 2 * var(--pad)) * 9 / 16); }
.scard__media { width: 100%; height: 100%; }
.scard .pill { font-size: 13px; right: 10px; bottom: 10px; padding: 6px 12px; }
.scard .ttag--meta { left: -32px; bottom: 56px; } /* clear of the Watch pill at every card size */
/* a card that holds keyboard focus comes to the top of the pile, so the focus ring is never hidden */
.scard:has(:focus-visible) { z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .scard__media:hover { outline: 2px solid var(--white); outline-offset: 4px; }
}
/* cards tilt into place as they arrive (browsers with scroll-driven animations) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .scard { transform-origin: 50% 100%; animation: card-in linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    @keyframes card-in { from { rotate: 2.5deg; } to { rotate: 0deg; } }
  }
}
@media (max-width: 767.98px) {
  .stack { --pad: 18px; gap: 18px; }
  .scard {
    top: calc(var(--topbar-h) + 8px + var(--i, 0) * 10px);
    height: auto;
    grid-template-columns: 40% minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas: "kicker kicker" "head head" "side text" "side act" "why why";
    column-gap: 16px; row-gap: 14px;
  }
  .scard__copy { display: contents; }
  .scard__kicker { grid-area: kicker; font-size: 12px; }
  .scard__head { grid-area: head; margin: 0; gap: 8px; }
  .scard__num { font-size: clamp(40px, 12vw, 56px); }
  .scard__label { font-size: 19px; }
  .scard__text { grid-area: text; margin: 0; font-size: 16px; }
  .scard__actions { grid-area: act; margin: 0; align-self: end; }
  .scard__why { grid-area: why; margin: 0; font-size: 16px; max-width: none; }
  .scard__actions .link-btn { font-size: 16px; }
  .scard__side { grid-area: side; width: auto; aspect-ratio: 9 / 16; align-self: start; }
  .scard .pill { font-size: 12px; padding: 4px 8px; right: 6px; bottom: 6px; }
  .scard .ttag--meta { display: none; }
}
/* narrow but not tall windows (wide phone landscape, small browser windows): no pile-up,
   because a stuck card could be taller than the space it sticks in */
@media (max-width: 767.98px) and (min-aspect-ratio: 4/5) { .scard { position: relative; top: auto; } }
.stack--flat .scard { position: relative; top: auto; } /* set by main.js when a card is taller than the screen */
@media (max-height: 560px) {
  .scard { position: relative; top: auto; height: auto; min-height: 0; }
  .scard__side { height: clamp(216px, calc(100vh - 140px), 420px); width: calc(clamp(216px, 100vh - 140px, 420px) * 9 / 16); }
  @supports (height: 100svh) { .scard__side { height: clamp(216px, calc(100svh - 140px), 420px); width: calc(clamp(216px, 100svh - 140px, 420px) * 9 / 16); } }
  .scard .ttag--meta { display: none; } /* the ad is small here; the card text already names the brand */
  .scard .pill { font-size: 12px; padding: 4px 8px; right: 6px; bottom: 6px; }
}
@media (max-height: 560px) and (max-width: 767.98px) {
  .scard__side { width: auto; height: auto; }
}
/* small phones in landscape: size the ad by the screen height so it fits on screen */
@media (max-height: 560px) and (max-width: 767.98px) and (orientation: landscape) {
  .scard { grid-template-columns: auto minmax(0, 1fr); }
  .scard__side { width: calc(clamp(216px, 100vh - 120px, 420px) * 9 / 16); }
  @supports (height: 100svh) { .scard__side { width: calc(clamp(216px, 100svh - 120px, 420px) * 9 / 16); } }
}

/* ------------------------------------------------------------- Statement */
.statement { padding: var(--section-y) 0 0; }
.statement__text {
  margin: 0; max-width: 28em;
  font: 400 clamp(28px, 3.8vw, 58px)/1.12 var(--f-body); letter-spacing: -0.025em; text-wrap: pretty;
}
.statement__text span { color: var(--muted); }

/* ------------------------------------------------------------------ Work */
.tabs { display: flex; flex-wrap: wrap; gap: 0 clamp(18px, 2.6vw, 40px); border-bottom: 1px solid var(--line); }
.tab {
  position: relative; display: inline-flex; align-items: flex-start; min-height: 52px; padding: 10px 0 12px;
  border: 0; background: none; color: var(--muted);
  font: 500 clamp(20px, 2.2vw, 32px)/1.1 var(--f-display); letter-spacing: -0.02em;
}
.tab .count { font-size: 12px; vertical-align: 0; margin: 2px 0 0 4px; }
.tab:hover { color: var(--ink); }
.tab[aria-pressed="true"] { color: var(--ink); }
.tab[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
/* phones: tabs wrap onto two rows, so each tab carries its own rail and the underline stays under its word */
@media (max-width: 767.98px) {
  .tabs { border-bottom: 0; column-gap: 0; }
  .tab { padding-right: 18px; box-shadow: inset 0 -1px var(--line); }
  .tab[aria-pressed="true"]::after { bottom: 0; right: 18px; }
}

.work__status { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin: 16px 0 24px; min-height: 44px; }
.work__status p { margin: 0; font-size: 16px; color: var(--muted); }
.work__status .link-btn { min-height: 0; display: inline; font-size: 16px; }
.work-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 20px; }
.work-grid .vcard[hidden] { display: none; }
@media (min-width: 1200px) { .work-grid[data-collapsed] .vcard:nth-child(n+11) { display: none; } }
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .work-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .work-grid[data-collapsed] .vcard:nth-child(n+9) { display: none; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .work-grid[data-collapsed] .vcard:nth-child(n+10) { display: none; }
}
@media (max-width: 767.98px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .work-grid[data-collapsed] .vcard:nth-child(n+7) { display: none; }
}
.work__more { display: flex; justify-content: center; margin-top: 48px; }
.noscript-list { columns: 2; font-size: 15px; }

.vcard { position: relative; display: flex; flex-direction: column; min-width: 0; }
.vcard .media { aspect-ratio: 9 / 16; }
.vcard .media img:not(.media__bg) { transition: transform 0.4s ease-out; }
.vcard__body { display: grid; gap: 4px; padding-top: 12px; }
.vcard__format { margin: 0; font: 500 12px/1.3 var(--f-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.vcard__title { margin: 0; font: 500 18px/1.25 var(--f-display); letter-spacing: -0.01em; }
.vcard__open { padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; }
.vcard__open::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.vcard__open:focus-visible { outline: none; }
.vcard__open:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 3px; }
.vcard__meta { margin: 0; font-size: 15px; line-height: 1.4; color: var(--muted); }
.vcard__why { margin: 6px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: #34343a; }
.vcard__why b { font-weight: 600; color: var(--ink); }
/* proof ads carry their result as a tilted orange tag, like the hero ads */
.vcard > .ttag { top: 12px; left: -8px; rotate: -5deg; pointer-events: none; }
@media (max-width: 767.98px) {
  .vcard__why { font-size: 15px; }
  .vcard > .ttag { left: -4px; font-size: 12px; padding: 6px 9px; }
}
@media (max-width: 359.98px) { .vcard > .ttag { font-size: 11px; padding: 5px 7px; letter-spacing: 0.01em; } }
@media (hover: hover) and (pointer: fine) {
  .vcard:hover .media img:not(.media__bg) { transform: scale(1.03); }
  .vcard:hover .vcard__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
}

/* ---------------------------------------------------------- Hook testing */
.hooks { background: var(--black); color: var(--white); --focus: var(--white); }
.hooks .shead__sub { color: var(--on-black-muted); }
.compare {
  display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center;
  column-gap: clamp(32px, 9vw, 160px); row-gap: 40px;
}
.compare__item { margin: 0; display: grid; gap: 28px; align-content: start; }
.compare__frame { position: relative; transition: rotate 0.3s ease-out; }
.compare__item[data-angle="A"] .compare__frame { rotate: -2.5deg; }
.compare__item[data-angle="B"] .compare__frame { rotate: 2.5deg; }
.compare__media { width: 100%; aspect-ratio: 9 / 16; }
.compare__frame .ttag { top: -14px; left: -16px; rotate: -6deg; }
.compare__item[data-angle="B"] .compare__frame .ttag { left: auto; right: -16px; rotate: 6deg; }
.compare__item.is-active .compare__frame { rotate: 0deg; }
.compare__item.is-active .compare__media { outline: 3px solid var(--white); outline-offset: 6px; }
.compare__item figcaption { display: grid; gap: 4px; font-size: 16px; line-height: 1.45; }
.compare__item figcaption b { font: 500 19px/1.3 var(--f-display); }
.compare__item figcaption span { color: var(--on-black-muted); }
.compare__controls { grid-column: 1 / -1; display: flex; justify-content: center; }
/* short laptop screens: size the two openings by the screen height, so both fit while they play */
@media (min-width: 768px) {
  .compare { grid-template-columns: repeat(2, minmax(0, clamp(160px, calc((100vh - 340px) * 9 / 16), 300px))); }
  @supports (height: 100svh) { .compare { grid-template-columns: repeat(2, minmax(0, clamp(160px, calc((100svh - 340px) * 9 / 16), 300px))); } }
}
@media (max-width: 767.98px) {
  .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .compare__item { gap: 20px; }
  .compare__item figcaption { font-size: 16px; }
  .compare__item figcaption b { font-size: 17px; }
  .compare__frame .ttag { left: -6px; }
  .compare__item[data-angle="B"] .compare__frame .ttag { right: -6px; }
  .compare__controls .btn { width: 100%; }
}

/* --------------------------------------------------------------- Process
   All hairline tables (steps, working together, contact) share one label column, so their text lines up. */
:root { --label-col: clamp(120px, 13vw, 200px); }
.table-head, .steps > li { display: grid; grid-template-columns: var(--label-col) minmax(0, 1.4fr) minmax(0, 2fr); gap: 24px; }
.table-head {
  padding-bottom: 12px; border-bottom: 1px solid var(--ink);
  font: 500 12px/1.3 var(--f-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.steps { list-style: none; margin: 0; padding: 0; }
.steps > li { align-items: baseline; padding: clamp(18px, 2vw, 28px) 0; border-bottom: 1px solid var(--line); }
.steps__num { font: 500 16px/1 var(--f-body); color: var(--muted); font-variant-numeric: tabular-nums; }
.steps__title { margin: 0; font: 500 clamp(22px, 2.3vw, 34px)/1.1 var(--f-display); letter-spacing: -0.02em; }
.steps p { margin: 0; max-width: 52ch; font-size: 17px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.table-title { margin: clamp(56px, 7vw, 104px) 0 18px; font: 500 clamp(26px, 2.6vw, 40px)/1.1 var(--f-display); letter-spacing: -0.02em; }
.terms { margin: 0; border-top: 1px solid var(--ink); }
.terms > div { display: grid; grid-template-columns: var(--label-col) minmax(0, 1fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.terms--compact > div { grid-template-columns: 120px minmax(0, 1fr); }
.terms dt { font: 500 13px/1.75 var(--f-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.terms dd { margin: 0; display: flex; align-items: center; flex-wrap: wrap; font-size: 17px; line-height: 1.5; }
.terms a { display: inline-flex; align-items: center; gap: 6px; color: var(--purple); text-underline-offset: 4px; }
.terms a svg { width: 15px; height: 15px; }
@media (max-width: 767.98px) {
  .table-head { display: none; }
  .steps > li { grid-template-columns: 36px minmax(0, 1fr); gap: 6px 12px; border-top: 0; }
  .steps > li:first-child { border-top: 1px solid var(--ink); }
  .steps p { grid-column: 2; font-size: 16px; }
  .steps__title { font-size: 22px; }
  .terms > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 14px 0; }
  .terms dd { font-size: 16px; }
}

/* --------------------------------------------------------------- Reviews */
.reviews__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; color: var(--ink); }
.upwork-pill { background: var(--upwork); color: var(--white); padding: 6px 10px; font: 600 12px/1 var(--f-body); letter-spacing: 0.06em; text-transform: uppercase; }
.reviews__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1279.98px) { .reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.review { margin: 0; padding: clamp(24px, 2.6vw, 40px); background: var(--white); display: flex; flex-direction: column; gap: 24px; min-height: 300px; }
.review blockquote { margin: 0; font: 500 clamp(20px, 1.7vw, 26px)/1.3 var(--f-display); letter-spacing: -0.015em; }
.review figcaption { margin-top: auto; display: grid; gap: 2px; font-size: 15px; }
.review figcaption b { font-weight: 600; }
.review figcaption span { color: var(--muted); }
@media (max-width: 1023.98px) {
  .reviews__grid { grid-template-columns: minmax(0, 1fr); }
  .review { min-height: 0; }
}

/* ----------------------------------------------------------------- About */
.about__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.about__photo { position: relative; margin: 0; max-width: 460px; }
.about__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.about__photo .ttag { left: -12px; bottom: 28px; rotate: -5deg; }
.about__lead { margin: 0 0 20px; font: 400 clamp(22px, 2.2vw, 32px)/1.3 var(--f-body); letter-spacing: -0.015em; }
.about__copy > p:not(.about__lead) { margin: 0 0 28px; max-width: 58ch; font-size: 17px; color: var(--muted); }
.terms--compact { margin-bottom: 32px; }
@media (max-width: 1023.98px) { .about__grid { grid-template-columns: minmax(0, 1fr); } .about__photo { max-width: 380px; } }
@media (max-width: 767.98px) { .about__photo { max-width: 300px; margin-left: 12px; } .about__copy .btn { width: 100%; } }

/* --------------------------------------------------------------- Contact */
.contact { padding-bottom: 0; }
.channels { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.channels > li { display: grid; grid-template-columns: var(--label-col) minmax(0, 2fr) minmax(260px, 1.2fr); align-items: center; gap: 12px 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.channels__label { font: 500 13px/1.3 var(--f-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.channels__value { font: 500 clamp(19px, 1.8vw, 26px)/1.25 var(--f-display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.channels__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.bigcta {
  display: block; width: fit-content;
  padding: clamp(56px, 8vw, 120px) 0 clamp(12px, 1.6vw, 24px);
  font: 600 clamp(46px, 8.4vw, 148px)/0.95 var(--f-display); letter-spacing: -0.045em;
  text-decoration: none; color: var(--purple);
}
.bigcta svg { display: inline-block; width: 0.7em; height: 0.7em; margin-left: 0.12em; vertical-align: -0.04em; transition: transform 0.2s ease-out; }
.bigcta:hover { color: var(--purple-deep); }
.bigcta:hover svg { transform: translate(0.06em, -0.06em); }
@media (max-width: 767.98px) {
  .channels > li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .channels__actions { justify-content: flex-start; margin-top: 6px; }
  .channels__actions .btn { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------- Footer */
.footer { background: var(--black); color: var(--white); --focus: var(--white); padding-top: clamp(48px, 6vw, 96px); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.footer__name { margin: 0 0 14px; font: 600 clamp(56px, 6.4vw, 104px)/0.9 var(--f-display); letter-spacing: -0.045em; }
.footer__brand p:not(.footer__name) { margin: 0; max-width: 30ch; color: var(--on-black-muted); }
.footer__h { margin: 0 0 12px; font: 500 13px/1.3 var(--f-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-black-muted); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer ul a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; font-size: 17px; }
.footer ul a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__status { display: flex; align-items: center; margin: 0 0 8px; font-size: 16px; }
.footer__bar {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px;
  margin-top: clamp(48px, 6vw, 96px); padding-block: 20px; border-top: 1px solid var(--line-dark);
  font-size: 14px; color: var(--on-black-muted);
}
@media (max-width: 1023.98px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__brand, .footer__grid > div:last-child { grid-column: 1 / -1; }
  .footer ul a { min-height: 44px; }
  .footer__bar { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------ Mobile sticky CTA */
.mobile-cta { display: none; }
@media (max-width: 1023.98px) {
  .mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: var(--white); border-top: 1px solid var(--line);
    transform: translateY(110%); visibility: hidden;
    transition: transform 0.2s ease-out, visibility 0s linear 0.2s;
  }
  .mobile-cta.is-shown { transform: none; visibility: visible; transition: transform 0.2s ease-out, visibility 0s; }
  .mobile-cta .btn { min-height: 44px; }
}

/* ----------------------------------------------------------------- Player */
.player {
  margin: 0; padding: 0; border: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  background: transparent; color: var(--white); overflow: hidden; --focus: var(--white);
}
.player::backdrop { background: rgba(0, 0, 0, 0.92); }
.player__close {
  position: absolute; top: 16px; right: 16px; z-index: 6;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 0; border-radius: 999px; background: var(--white); color: var(--ink);
  font: 500 15px/1 var(--f-body);
}
.player__close svg { width: 16px; height: 16px; }
.player__inner {
  height: 100%; display: grid; grid-template-columns: auto minmax(0, 360px);
  justify-content: center; align-items: center; gap: 40px; padding: 24px 72px;
}
/* the stage never grows so wide that the 360px info column gets squeezed (560 = side padding + gap + info + scrollbar) */
.player__stage { position: relative; height: min(86vh, 820px, calc((100vw - 560px) * 16 / 9)); aspect-ratio: 9 / 16; background: var(--black); }
.player__stage video { width: 100%; height: 100%; object-fit: contain; background: var(--black); }
.player[data-ratio="1:1"] .player__stage { aspect-ratio: 1 / 1; height: min(70vh, 640px, calc(100vw - 560px)); }
@media (min-width: 861px) {
  .player[data-ratio="16:9"] .player__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; gap: 20px; }
  .player[data-ratio="16:9"] .player__stage { height: auto; width: min(92vw, 1100px, calc((86vh - 140px) * 16 / 9)); aspect-ratio: 16 / 9; }
  .player[data-ratio="16:9"] .player__info { align-items: center; text-align: center; max-width: 640px; }
}
.player__mmeta { display: none; margin: 0; font-size: 14px; line-height: 1.4; color: var(--on-black-muted); }

/* loading, end and error states */
.player__spinner {
  position: absolute; left: 50%; top: 50%; z-index: 2; display: none;
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: var(--white);
  animation: player-spin 0.8s linear 60;
}
.player__stage.is-loading .player__spinner { display: block; }
@keyframes player-spin { to { transform: rotate(360deg); } }
.player__state {
  position: absolute; inset: 0; z-index: 3; padding: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(0, 0, 0, 0.78); color: var(--white); text-align: center;
}
.player__state p { margin: 0; font-size: 16px; }
.player__sound {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border: 0; border-radius: 999px; background: var(--white); color: var(--ink); font: 500 15px/1 var(--f-body);
}
.player__sound svg { width: 18px; height: 18px; }
.player__info { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.player__kicker { margin: 0; font-size: 14px; color: var(--on-black-muted); }
.player__title { margin: 0; font: 500 26px/1.15 var(--f-display); letter-spacing: -0.01em; outline: none; }
.player__meta { margin: 0; font: 500 12px/1.3 var(--f-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-black-muted); }
.player__details { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.player__details-btn { display: none; }
.player__hook { margin: 0; font-size: 16px; line-height: 1.45; }
.player__why { margin: 0; font-size: 15px; line-height: 1.45; color: var(--on-black-muted); }
.player__why b { font-weight: 600; color: var(--white); }
.player__result p { margin: 0; color: var(--orange); font-weight: 600; }
.player__result .link-btn { min-height: 40px; font-size: 15px; }
.player__nav { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.player__count { font: 500 13px/1 var(--f-body); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.player .arrow-btn:hover { background: var(--white); color: var(--ink); }
.player__cta { margin-top: 6px; white-space: normal; padding-inline: 12px; }
/* Phones (and short landscape screens): the ad gets most of the screen; a compact bar holds title,
   one meta line, ‹ n/N › and the CTA */
@media (max-width: 860.98px), (max-height: 500px) {
  .player { background: var(--black); }
  .player__inner, .player[data-ratio] .player__inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  .player__stage, .player[data-ratio] .player__stage { flex: 1 1 0; min-height: 0; min-width: 0; width: 100%; height: auto; aspect-ratio: auto; }
  .player__close {
    top: calc(8px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right));
    width: 44px; padding: 0; justify-content: center; background: rgba(255, 255, 255, 0.92);
  }
  .player__close-txt { display: none; }
  .player__info, .player[data-ratio="16:9"] .player__info {
    flex: none; max-height: 62%; overflow-y: auto; overscroll-behavior: contain;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 0; column-gap: 12px; align-items: center;
    grid-template-areas: "title title more" "mmeta mmeta mmeta" "result result result" "details details details" "nav cta cta";
    max-width: none; width: 100%; text-align: left;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid #2a2a2e; background: var(--black);
  }
  .player__kicker, .player__meta { display: none; }
  .player__title { grid-area: title; font-size: 20px; line-height: 1.2; }
  .player__mmeta { display: block; grid-area: mmeta; margin-top: 2px; }
  .player__details-btn {
    grid-area: more; justify-self: end; display: inline-flex; align-items: center; min-height: 44px; padding: 0;
    border: 0; background: none; color: var(--white); text-decoration: underline; text-underline-offset: 3px;
    font: 500 14px/1 var(--f-body);
  }
  .player__result { grid-area: result; margin-top: 8px; }
  .player__result .link-btn { min-height: 44px; }
  .player__details { grid-area: details; display: none; margin-top: 8px; }
  .player__details.is-open { display: flex; }
  .player__nav { grid-area: nav; margin-top: 10px; gap: 8px; }
  .player__cta { grid-area: cta; width: 100%; min-height: 44px; margin-top: 10px; padding: 0 12px; font-size: 15px; }
  .player__nav[hidden] + .player__cta { grid-column: 1 / -1; }
  .player__cta-lead { display: none; }
}
@media (max-width: 860.98px) and (orientation: landscape), (max-height: 500px) and (orientation: landscape) {
  .player__inner, .player[data-ratio] .player__inner { flex-direction: row; padding-left: env(safe-area-inset-left); }
  .player__info, .player[data-ratio="16:9"] .player__info {
    width: min(300px, 42%); max-height: none; align-content: center;
    grid-template-areas: "title title more" "mmeta mmeta mmeta" "result result result" "details details details" "nav nav nav" "cta cta cta";
    border-top: 0; border-left: 1px solid #2a2a2e;
    padding: 60px calc(16px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) 16px;
  }
}
/* very narrow phones: the Hire button gets its own row instead of squeezing next to ‹ n/N › */
@media (max-width: 374.98px) and (orientation: portrait) {
  .player__info, .player[data-ratio="16:9"] .player__info {
    grid-template-areas: "title title more" "mmeta mmeta mmeta" "result result result" "details details details" "nav nav nav" "cta cta cta";
  }
}

/* Client message dialog (on its own, or on top of the player). The text scrolls; the Close button stays put. */
.receipt {
  margin: auto; padding: 64px 16px 16px; border: 0; background: #111; color: var(--white);
  width: min(92vw, 680px); max-height: 92vh; overflow: hidden; --focus: var(--white);
}
.receipt::backdrop { background: rgba(0, 0, 0, 0.86); }
.receipt__figure { margin: 0; display: grid; gap: 12px; max-height: calc(92vh - 80px); overflow: auto; overscroll-behavior: contain; }
.receipt__figure img { width: auto; max-width: 100%; max-height: 72vh; margin: 0 auto; }
.receipt__figure figcaption { font-size: 16px; line-height: 1.5; }
/* the message box is centred, so the full-screen player's safe-area offsets don't apply to its Close button */
.receipt .player__close { top: 16px; right: 16px; }
@media (max-width: 767.98px) { .receipt__figure img { max-height: 58vh; } }

/* Touch: give links and small buttons a comfortable hit area (also on large touch screens) */
@media (pointer: coarse) {
  .terms a, .menu__contact a, .work__status .link-btn { display: inline-flex; align-items: center; min-height: 44px; }
  .topbar__nav a { position: relative; }
  .topbar__nav a::after { content: ""; position: absolute; inset: -7px -6px; }
  .footer ul a, .player__result .link-btn { min-height: 44px; }
}

/* Without JavaScript: a solid top bar, and no controls that need JS (the noscript list shows the work) */
html:not(.js) .topbar { background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
html:not(.js) .tabs, html:not(.js) .work__status, html:not(.js) .work__more,
html:not(.js) [data-receipt], html:not(.js) .compare__controls, html:not(.js) .menu-btn,
html:not(.js) [data-copy], html:not(.js) .switch-row { display: none; }

/* --------------------------------------------- Upwork-safe mode (?ref=upwork) */
html[data-ref="upwork"] .offplatform { display: none !important; }
html[data-ref="upwork"] .mobile-cta { grid-template-columns: minmax(0, 1fr); }

@media print {
  .topbar, .mobile-cta, .player, .receipt, .hero__thumbs { display: none !important; }
  .scard { position: static; }
}