/* Hallmark · shape: reel-led portfolio (hero, numbered work, services list, statement, about, timeline, contact) · genre: editorial · theme: brand · redesign: full · copy: verbatim
 * paper: oklch(19.5% 0 0) · accent: oklch(79% 0.03 85) · display: Playfair Display · body: Poppins · hero: Stage, giant WAJHA behind a cutout portrait · nav: edge-aligned, wordmark + DM Me · footer: mast, columns over a giant wordmark · signature: the studio's name standing behind its founder
 * axes: charcoal/serif/beige · posture: stage · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4 · weakest: P, a reel-shaped portfolio; argued it with real material only (five live sites, eight priced services, his own words) */
/* Hallmark · user brief overrides: small uppercase tracked labels and two-tone (roman cream / beige italic) headlines are the client's explicit reference spec (gates 54, 67, 38iii) */
@import url("./tokens.css");
@import url("./base.css");
.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

h1, h2, h3, h4 {
  margin: 0;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

figure {
  margin: 0;
}

a {
  text-decoration: none;
}

body {
  font-weight: 300;
  letter-spacing: 0.005em;
}

body.nav-open {
  overflow: hidden;
}

strong {
  font-weight: 400;
  color: var(--color-ink);
}

.skip {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: var(--z-toast);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  padding: 10px var(--space-md);
  font-weight: 400;
  transition: transform var(--dur-short) var(--ease-out);
}

.skip:focus-visible {
  transform: translateY(80px);
}

/* ---------- labels (small uppercase, per brief) ---------- */

.label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  line-height: 1.4;
}

.label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--color-accent);
  flex: none;
}

.label--plain::before {
  display: none;
}

.label b {
  font-weight: 400;
  color: var(--color-accent);
}

/* ---------- two-tone headline: line 1 cream roman, line 2 beige italic ---------- */

.hl, .pick__name, .fact b, .svc-count b, .wcard__num, .work-bar .count, .case__num, .pack__price, .price, .svc-row__price, .times li b, .term__n, .step__n {
  font-variant-numeric: lining-nums tabular-nums;
}

.hl {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
  line-height: 0.94;
  letter-spacing: -0.015em;
  max-width: none;
  text-wrap: balance;
  overflow-wrap: break-word;
  min-width: 0;
}

.hl-l {
  display: block;
  overflow: hidden;
  padding: 0 0.14em 0.24em 0;
  margin-bottom: -0.24em;
}

.hl-i {
  display: inline-block;
  will-change: transform;
}

.hl-l--1 {
  text-transform: uppercase;
}

.hl-l--2 {
  font-weight: 400;
  font-style: italic;
  color: var(--color-accent);
  letter-spacing: -0.01em;
}

.hl--xl {
  font-size: clamp(3.1rem, 13.6vw, 10.5rem);
}

.hl--lg {
  font-size: clamp(2.5rem, 8.4vw, 7.4rem);
}

.hl--md {
  font-size: clamp(2.1rem, 5.6vw, 4.6rem);
}

.hl--sm {
  font-size: clamp(1.8rem, 3.6vw, 3rem);
}

.lead {
  font-size: var(--text-lead);
  line-height: 1.6;
  color: var(--color-ink-2);
  font-weight: 300;
  max-width: 46ch;
}

.copy {
  color: var(--color-muted);
  line-height: 1.75;
  max-width: 58ch;
}

.copy + .copy {
  margin-top: 1.1em;
}

.ar {
  font-family: var(--font-display);
  font-weight: 400;
  direction: rtl;
  unicode-bidi: isolate;
}

/* ---------- layout ---------- */

.container {
  max-width: var(--container);
}

.section {
  position: relative;
  padding-block: var(--section-gap);
}

.section--tight {
  padding-block: var(--section-gap-s);
}

.rule-top {
  border-top: 1px solid var(--color-rule);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 26px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: 2px;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

@media (hover: hover) { .btn:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
} }

.btn:active {
  transform: scale(0.98);
}

@media (max-width: 26rem) {
  .btn {
    padding: 0 var(--space-md);
    letter-spacing: 0.14em;
    gap: var(--space-sm);
  }
}

@media (max-width: 47.99rem) {
  .btn-more {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.field input:disabled, .field select:disabled, .field textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn .ico {
  transition: transform var(--dur-short) var(--ease-out);
}

@media (hover: hover) { .btn:hover .ico {
  transform: translateX(4px);
} }

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-rule-strong);
}

@media (hover: hover) { .btn--ghost:hover {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
} }

.ico {
  width: 18px;
  height: 18px;
  flex: none;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink);
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--color-rule-strong);
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}

@media (hover: hover) { .link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
} }

.link .ico {
  width: 15px;
  height: 15px;
  transition: transform var(--dur-short) var(--ease-out);
}

@media (hover: hover) { .link:hover .ico {
  transform: translateX(3px);
} }

@media (hover: hover) { .link--ext:hover .ico {
  transform: translate(2px, -2px);
} }

/* ---------- header ---------- */

.site-header {
  padding-top: env(safe-area-inset-top, 0px);
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-sticky-nav);
  transition: background-color var(--dur-long) var(--ease-out), border-color var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out);
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: var(--color-paper-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-color: var(--color-rule);
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: var(--space-lg);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-ink);
}

.brand img {
  height: 30px;
  width: auto;
}

.brand span {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.nav-desktop {
  display: none;
}

.nav-desktop a {
  position: relative;
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding: 10px var(--space-3xs);
  transition: color var(--dur-short) var(--ease-out);
}

.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 4px;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-long) var(--ease-out);
}

.nav-desktop a[aria-current="page"] {
  color: var(--color-ink);
}
@media (hover: hover) { .nav-desktop a:hover {
  color: var(--color-ink);
} }

.nav-desktop a[aria-current="page"]::after {
  transform: scaleX(1);
}
@media (hover: hover) { .nav-desktop a:hover::after {
  transform: scaleX(1);
} }

.header-cta {
  display: none;
}

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 var(--space-2xs);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.menu-btn i {
  display: grid;
  gap: 5px;
  width: 22px;
}

.menu-btn i::before, .menu-btn i::after {
  content: "";
  height: 1px;
  background: currentColor;
}

.menu-btn i::after {
  width: 14px;
  justify-self: end;
}

@media (min-width: 64rem) {
  .header-row {
    height: 84px;
  }

  .brand img {
    height: 34px;
  }

  .nav-desktop {
    display: flex;
    gap: 34px;
  }

  .header-cta {
    display: inline-flex;
    min-height: 40px;
    padding: 0 18px;
    font-size: 0.6875rem;
  }

  .menu-btn {
    display: none;
  }
}

/* ---------- mobile nav ---------- */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--color-paper);
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter) 32px;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.7s var(--ease-in-out), visibility 0s linear 0.7s;
}

.mobile-nav.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.7s var(--ease-in-out), visibility 0s;
}

.mobile-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.mobile-nav__links {
  margin-top: 6vh;
  display: grid;
  gap: var(--space-2xs);
}

.mobile-nav__links a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-block: 10px;
  border-bottom: 1px solid var(--color-rule);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 11vw, 3.4rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-ink);
}

.mobile-nav__links a small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--color-muted);
}

.mobile-nav__links a[aria-current="page"] {
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--color-accent);
}

.mobile-nav__foot {
  margin-top: auto;
  display: grid;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--color-muted);
}

.mobile-nav__foot a {
  color: var(--color-ink-2);
}

/* ---------- home hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  padding-top: 88px;
  overflow: clip;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

.hero-stage {
  position: relative;
  height: clamp(340px, 52svh, 520px);
  margin-top: var(--space-2xs);
}

.hero-grid {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--space-3xl));
}

.hero-ar {
  order: 3;
}

.hero-word {
  position: absolute;
  left: 0;
  top: 18%;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36vw;
  line-height: 0.8;
  letter-spacing: -0.035em;
  color: var(--color-accent);
  white-space: nowrap;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.hero-portrait {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: none;
  translate: -50% 0;
  -webkit-mask-image: linear-gradient(to bottom, var(--color-paper) 72%, transparent 99%);
  mask-image: linear-gradient(to bottom, var(--color-paper) 72%, transparent 99%);
  filter: grayscale(1) contrast(1.04);
}

.hero-hello {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent);
  font-size: clamp(1.5rem, 5.6vw, 2.6rem);
  line-height: 1;
}

.hero-name {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(4.2rem, 21vw, 9.6rem);
  line-height: 0.86;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}

.hero-name .dot {
  color: var(--color-accent);
}

.hero-role {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: var(--color-ink);
}

.hero-role span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  color: var(--color-accent);
  margin-top: 6px;
}

.hero-bio {
  margin-top: 18px;
  max-width: 34ch;
  color: var(--color-muted);
  line-height: 1.7;
}

.hero-bio em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-ink);
  font-size: 1.15em;
}

.hero-actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  border-top: 1px solid var(--color-rule);
  padding-top: 20px;
}

.fact b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 9vw, 3.4rem);
  line-height: 1;
  color: var(--color-ink);
  font-variant-numeric: lining-nums tabular-nums;
}

.fact b i {
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent);
}

.fact span {
  display: block;
  margin-top: var(--space-xs);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 400;
}

.hero-ar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: 28px;
  padding: 0 var(--gutter) 28px;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.hero-ar .ar {
  font-size: 2rem;
  color: var(--color-accent);
  line-height: 1;
}

.scroll-cue {
  display: none;
}

@media (min-width: 64rem) {
  .hero {
    display: grid;
    min-height: max(100svh, 760px);
    padding-top: 84px;
  }

  .hero-ar {
    order: 0;
  }

  .hero-stage {
    position: absolute;
    inset: 84px 0 0 0;
    height: auto;
    margin: 0;
  }

  .hero-word {
    left: 50%;
    top: 8%;
    translate: -50% 0;
    font-size: min(25vw, 23.5rem);
  }

  .hero-portrait {
    height: 96%;
  }

  .hero-grid {
    position: relative;
    z-index: 2;
    margin-top: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.55fr);
    align-items: end;
    gap: var(--gap-columns);
    padding-bottom: 6svh;
    min-height: calc(max(100svh, 760px) - 84px);
  }

  .hero-copy {
    padding-bottom: var(--space-3xs);
  }

  .hero-name {
    font-size: clamp(6rem, 9.2vw, 9.6rem);
  }

  .hero-facts {
    grid-column: 3;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin: 0;
    padding: 0 0 0 22px;
    border-top: 0;
    border-left: 1px solid var(--color-rule);
  }

  .hero-ar {
    position: absolute;
    z-index: 3;
    right: var(--gutter);
    top: 120px;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
    padding: 0;
    text-align: right;
  }

  .hero-ar .ar {
    font-size: 2.6rem;
  }

  .scroll-cue {
    display: flex;
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 0.625rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-ink-2);
    font-weight: 400;
  }

  .scroll-cue i {
    width: 1px;
    height: 44px;
    background: linear-gradient(var(--color-accent), transparent);
    transform-origin: top;
    animation: cue 2.2s var(--ease-in-out) infinite;
  }
}

@keyframes cue {
  0% {
    transform: scaleY(0);
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;
  }

  51% {
    transform-origin: bottom;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* ---------- page hero (inner pages) ---------- */

.page-hero {
  position: relative;
  padding-top: 140px;
  padding-bottom: var(--section-gap-s);
  overflow: clip;
  isolation: isolate;
}

.ghost-word {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -0.12em;
  translate: -50% 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30vw;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-ghost);
  white-space: nowrap;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.page-hero .lead {
  margin-top: 28px;
}

@media (min-width: 64rem) {
  .page-hero {
    padding-top: 190px;
  }

  .ghost-word {
    font-size: min(24vw, 22rem);
  }
}

/* ---------- frames + B&W ---------- */

.frame {
  position: relative;
  overflow: hidden;
  background: var(--color-paper-2);
}

.frame img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.frame--par img {
  height: 118%;
  margin-top: -9%;
}

.bw img {
  filter: grayscale(1) contrast(1.06) brightness(0.9);
  transition: filter 0.9s var(--ease-out), transform 1.2s var(--ease-out);
}

.bw.is-color img, a:focus-visible .bw img {
  filter: grayscale(0) contrast(1) brightness(1);
}
@media (hover: hover) { .bw:hover img {
  filter: grayscale(0) contrast(1) brightness(1);
} }

/* ---------- work cards (home) ---------- */

.work-head {
  display: grid;
  gap: 28px;
}

.work-head .copy {
  max-width: 40ch;
}

@media (min-width: 64rem) {
  .work-head {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
    align-items: end;
  }
}

.work-pin {
  margin-top: 56px;
}

.work-bar {
  display: none;
}

.work-track {
  display: grid;
  gap: 56px;
}

.wcard {
  position: relative;
}

.wcard__img {
  aspect-ratio: 16 / 10;
  border-radius: 2px;
}

.wcard__img img {
  transition: filter 0.9s var(--ease-out), transform 1.2s var(--ease-out);
}

@media (hover: hover) { .wcard:hover .wcard__img img {
  transform: scale(1.035);
} }

.wcard__meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-md);
  padding-top: 18px;
  border-top: 1px solid var(--color-rule);
  margin-top: 18px;
}

.wcard__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--color-accent);
}

.wcard__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--color-ink);
}

.wcard__sub {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-body);
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.wcard__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.wcard__domain {
  grid-column: 2;
  justify-self: start;
  position: relative;
  z-index: 2;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-2);
  font-weight: 400;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: var(--space-xs) 0;
}

@media (hover: hover) { .wcard__domain:hover {
  color: var(--color-accent);
} }

.wcard__domain .ico {
  width: 13px;
  height: 13px;
}

@media (min-width: 64rem) {
  .work-pin {
    margin-top: var(--space-2xl);
    overflow-x: clip;
  }

  .wcard__meta {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .wcard__domain {
    grid-column: auto;
    justify-self: end;
  }

  .js .work-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 22px;
  }

  .work-bar .count {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--color-muted);
    font-variant-numeric: lining-nums tabular-nums;
  }

  .work-bar .count b {
    font-weight: 400;
    font-style: italic;
    color: var(--color-accent);
    font-size: 1.6rem;
  }

  .work-progress {
    flex: 1;
    height: 1px;
    background: var(--color-rule);
    margin: 0 28px;
    position: relative;
    overflow: hidden;
  }

  .work-progress i {
    position: absolute;
    inset: 0;
    background: var(--color-accent);
    transform-origin: left;
    transform: scaleX(0.2);
  }

  .work-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xl) var(--gap-columns);
  }

  .js .work-track {
    display: flex;
    gap: 2.4vw;
    width: -moz-max-content;
    width: max-content;
  }

  .js .wcard {
    width: min(40vw, 620px);
  }

  .js .wcard__img {
    aspect-ratio: auto;
    height: min(48svh, 25vw);
  }
}

/* ---------- client strip ---------- */

.clients {
  border-block: 1px solid var(--color-rule);
  padding-block: 26px;
  overflow: clip;
  margin-top: var(--section-gap-s);
}

.clients__row {
  display: flex;
  gap: 0;
  width: -moz-max-content;
  width: max-content;
  animation: marquee 38s linear infinite;
}

.clients__set {
  display: flex;
  align-items: center;
}

.clients__set span {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.2;
  color: var(--color-ink-2);
  padding-inline: clamp(var(--space-lg), 4vw, 56px);
  border-right: 1px solid var(--color-rule);
  white-space: nowrap;
}

.clients__set span:nth-child(odd) {
  font-style: italic;
  color: var(--color-accent);
}

.clients__set span.cap {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: clamp(1.25rem, 3.2vw, 2rem);
}

@media (hover: hover) { .clients:hover .clients__row {
  animation-play-state: paused;
} }

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- services list (home) ---------- */

.svc-wrap {
  display: grid;
  gap: 48px;
}

.svc-count {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin-top: 36px;
}

.svc-count b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(6rem, 26vw, 12rem);
  line-height: 0.78;
  color: var(--color-ink);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.04em;
}

.svc-count span {
  padding-bottom: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--color-accent);
  line-height: 1.15;
}

.svc-list {
  border-top: 1px solid var(--color-rule);
}

.svc-row {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 6px 14px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-ink);
}

.svc-row::before {
  content: "";
  position: absolute;
  inset: -1px 0 -1px 0;
  background: var(--color-paper-2);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur-long) var(--ease-out);
  z-index: -1;
}

.svc-row:focus-visible::before {
  transform: scaleY(1);
}
@media (hover: hover) { .svc-row:hover::before {
  transform: scaleY(1);
} }

.svc-row__n {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--color-muted);
  font-weight: 400;
}

.svc-row__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: 1.15;
  transition: color var(--dur-short) var(--ease-out), transform var(--dur-long) var(--ease-out);
}

@media (hover: hover) { .svc-row:hover .svc-row__name {
  color: var(--color-accent);
  transform: translateX(8px);
} }

.svc-row__desc {
  grid-column: 2 / 4;
  color: var(--color-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 52ch;
}

.svc-row__price {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--color-accent);
  white-space: nowrap;
  text-align: right;
}

.svc-list-wrap {
  isolation: isolate;
}

.svc-preview {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-raised);
  width: 240px;
  aspect-ratio: 4 / 5;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  border-radius: 2px;
}

.svc-preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

/* Hover preview, desktop only: own compositor layer; the eight stacked images cross-fade by class (the new one
   fades in over the previous one, so the preview never dips to see-through). The grayscale filter is applied once
   on the layer instead of per image. Phones never get .is-ready, so they render exactly as before. */
.svc-preview { will-change: transform, opacity; contain: layout paint; }
.svc-preview.is-ready { filter: grayscale(1) contrast(1.05); }
.svc-preview.is-ready img { position: absolute; inset: 0; filter: none; opacity: 0; z-index: 0; transition: opacity 0.18s var(--ease-out); }
.svc-preview.is-ready img.is-prev { opacity: 1; z-index: 1; transition: none; }
.svc-preview.is-ready img.is-on { opacity: 1; z-index: 2; }

.svc-foot {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: center;
  justify-content: space-between;
  color: var(--color-muted);
  font-size: 0.9375rem;
}

.svc-foot a.inline {
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-accent);
}

@media (min-width: 64rem) {
  .svc-wrap {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-3xl);
    align-items: start;
  }

  .svc-side {
    position: sticky;
    top: 130px;
  }

  .svc-row {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    padding: 28px 0;
  }

  .svc-row__desc {
    grid-column: 2 / 3;
  }
}

/* ---------- statement ---------- */

.statement {
  display: grid;
  gap: 44px;
  align-items: center;
}

.reel {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 2px;
}

.reel__slide {
  position: absolute;
  inset: 0;
}

.js .reel__slide + .reel__slide {
  opacity: 0;
}

.reel__cap {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: 14px;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 400;
}

.reel__cap b {
  font-weight: 400;
  color: var(--color-ink-2);
}

.reel__corner {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  padding: 6px 10px;
  background: var(--color-paper-glass);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink);
  font-weight: 400;
}

.signed {
  margin-top: 28px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--color-accent);
}

@media (min-width: 64rem) {
  .statement {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-3xl);
  }
}

/* ---------- about (home) ---------- */

.about-top {
  display: grid;
  gap: 28px;
}

.about-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  margin-top: var(--space-2xl);
}

.about-col h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.about-col li {
  padding: 11px 0;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-ink-2);
  font-size: 0.9375rem;
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
}

.about-col li span {
  color: var(--color-muted);
}

.about-col p {
  color: var(--color-muted);
  line-height: 1.7;
}

.quote-card {
  position: relative;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  padding: 34px 28px 30px;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  overflow: hidden;
}

.quote-card__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 5rem;
  line-height: 0.6;
  height: 0.5em;
}

.quote-card blockquote {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.15;
}

.quote-card blockquote em {
  font-style: italic;
}

.quote-card figcaption {
  margin-top: auto;
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-sm);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 400;
}

.quote-card figcaption .sig {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.7rem;
  letter-spacing: 0;
  text-transform: none;
}

.quote-card .ar-bg {
  position: absolute;
  right: -0.08em;
  bottom: -0.32em;
  font-size: 9rem;
  opacity: 0.12;
  line-height: 1;
  pointer-events: none;
}

@media (min-width: 48rem) {
  .about-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .about-top {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: end;
    gap: var(--space-3xl);
  }

  .about-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr);
    gap: var(--gap-columns);
  }
}

/* ---------- process timeline ---------- */

.process {
  display: grid;
  gap: var(--space-2xl);
}

.steps {
  position: relative;
  margin-top: 48px;
  padding-left: 34px;
}

.steps__line {
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--color-rule);
}

.steps__line i {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform-origin: top;
}

.step {
  position: relative;
  padding-bottom: var(--space-xl);
}

.step:last-child {
  padding-bottom: 0;
}

.step::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 10px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-paper);
  border: 1px solid var(--color-accent);
}

.step__n {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  font-weight: 400;
}

.step h3 {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.step p {
  margin-top: 10px;
  color: var(--color-muted);
  line-height: 1.7;
  max-width: 46ch;
}

.times {
  margin-top: 36px;
  border-top: 1px solid var(--color-rule);
}

.times li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-rule);
}

.times li span {
  color: var(--color-ink-2);
}

.times li b {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--color-accent);
  white-space: nowrap;
}

.times-note {
  margin-top: 18px;
  color: var(--color-muted);
  font-size: 0.875rem;
}

@media (min-width: 64rem) {
  .process {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-3xl);
  }

  .times-col {
    padding-top: var(--space-sm);
  }
}

/* ---------- contact ---------- */

.contact {
  display: grid;
  gap: 56px;
}

.crow {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-ink);
}

.crow:first-child {
  border-top: 1px solid var(--color-rule);
}

.crow__ico {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-rule-strong);
  border-radius: 50%;
  color: var(--color-accent);
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}

.crow__ico svg {
  width: 18px;
  height: 18px;
}

.crow small {
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 400;
  margin-bottom: var(--space-2xs);
}

.crow__v {
  font-size: 1rem;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.crow__go {
  color: var(--color-muted);
  transition: transform var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}

@media (hover: hover) { a.crow:hover .crow__ico {
  background: var(--color-accent);
  color: var(--color-accent-ink);
} }

@media (hover: hover) { a.crow:hover .crow__go {
  color: var(--color-accent);
  transform: translate(3px, -3px);
} }

.crow--static .crow__go {
  display: none;
}

.form-card {
  position: relative;
  color: var(--color-ink);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  padding: 30px 22px;
  border-radius: 2px;
}

.form-card .hl {
  margin-bottom: 30px;
}

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 26px;
}

.field label {
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 400;
}

.field input, .field select, .field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-muted);
  padding: var(--space-sm) 0;
  color: var(--color-ink);
  font-weight: 300;
  font-size: 1rem;
  border-radius: 0;
  transition: border-color var(--dur-short) var(--ease-out);
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--color-accent) 50%), linear-gradient(135deg, var(--color-accent) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.field select option {
  background: var(--color-paper-2);
  color: var(--color-ink);
}

.field textarea {
  resize: vertical;
  min-height: 110px;
}

.field input::-moz-placeholder, .field textarea::-moz-placeholder {
  color: var(--color-placeholder);
}

.field input::placeholder, .field textarea::placeholder {
  color: var(--color-placeholder);
}

@media (hover: hover) { .field input:hover, .field select:hover, .field textarea:hover {
  border-color: var(--color-ink-2);
} }

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.pick {
  display: none;
  margin-bottom: 30px;
  border: 1px solid var(--color-accent);
  padding: 22px;
}

.pick.is-on {
  display: block;
}

.pick__name {
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1.1;
  margin-top: 6px;
}

.pick__info {
  margin-top: var(--space-xs);
  color: var(--color-ink-2);
}

.pick__note {
  margin-top: var(--space-sm);
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

@media (min-width: 64rem) {
  .contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-3xl);
    align-items: start;
  }

  .form-card {
    padding: 44px var(--space-xl);
  }
}

/* ---------- footer ---------- */

.site-footer {
  position: relative;
  border-top: 1px solid var(--color-rule);
  padding-top: var(--section-gap-s);
  overflow: clip;
}

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px;
}

.foot-brand img {
  height: 40px;
  width: auto;
}

.foot-brand .ar {
  display: block;
  text-align: left;
  margin-top: 22px;
  font-size: 2.6rem;
  color: var(--color-accent);
  line-height: 1.1;
}

.foot-brand p {
  margin-top: var(--space-xs);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--color-ink);
}

.foot-brand .tag {
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.625rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 400;
}

.foot-col h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 14px;
}

.foot-col a {
  display: inline-block;
  padding: 6px 0;
  color: var(--color-ink-2);
  font-size: 0.9375rem;
  transition: color var(--dur-short) var(--ease-out);
}

@media (hover: hover) { .foot-col a:hover {
  color: var(--color-accent);
} }

.foot-col ul.two {
  -moz-columns: 2;
       columns: 2;
  -moz-column-gap: var(--space-lg);
       column-gap: var(--space-lg);
}

.foot-word {
  margin-top: var(--space-2xl);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 27vw;
  line-height: 0.76;
  letter-spacing: -0.04em;
  color: var(--color-accent);
  text-align: center;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

.foot-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-lg);
  padding-block: 22px;
  border-top: 1px solid var(--color-rule);
  font-size: 0.75rem;
  color: var(--color-muted);
}

@media (min-width: 48rem) {
  .foot-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (min-width: 64rem) {
  .foot-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, 0.8fr);
  }

  .foot-word {
    font-size: min(26vw, 25rem);
  }
}

/* ---------- work page case studies ---------- */

.case {
  display: grid;
  gap: 30px;
  padding-block: var(--section-gap-s);
  border-top: 1px solid var(--color-rule);
}

.case__img {
  aspect-ratio: 16 / 10;
  border-radius: 2px;
}

.case__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4.5rem, 14vw, 9rem);
  line-height: 0.8;
  color: var(--color-paper-3);
  -webkit-text-stroke: 1px var(--color-accent);
  letter-spacing: -0.04em;
}

.case h2 {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.3rem, 6vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.01em;
}

.case__sub {
  margin-top: var(--space-xs);
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  color: var(--color-accent);
  font-size: clamp(1.45rem, 3.6vw, 2.6rem);
  line-height: 1.1;
}

.case .copy {
  margin-top: 22px;
}

.case__list {
  margin-top: var(--space-lg);
  border-top: 1px solid var(--color-rule);
}

.case__list li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-ink-2);
  font-size: 0.9375rem;
  display: flex;
  gap: 14px;
}

.case__list li::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--color-accent);
  margin-top: 0.8em;
  flex: none;
}

.case .link {
  margin-top: 28px;
}

@media (min-width: 64rem) {
  .case {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: var(--space-3xl);
    align-items: center;
  }

  .case:nth-child(even) {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  }

  .case:nth-child(even) .case__media {
    order: 2;
  }
}

/* ---------- services page ---------- */

.svc-block {
  display: grid;
  gap: 28px;
  padding-block: var(--section-gap-s);
  border-top: 1px solid var(--color-rule);
  scroll-margin-top: 80px;
}

.svc-block__img {
  aspect-ratio: 4 / 5;
  max-width: 420px;
  border-radius: 2px;
}

.svc-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-lg);
}

.svc-block h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.01em;
}

.price {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  color: var(--color-accent);
  white-space: nowrap;
}

.svc-block .lead {
  margin-top: 18px;
}

.ticks {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--color-rule);
}

.ticks li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-ink-2);
  font-size: 0.9375rem;
  display: flex;
  gap: 14px;
}

.ticks b { font-weight: 400; color: var(--color-ink); }
.ticks li::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--color-accent);
  margin-top: 0.8em;
  flex: none;
}

.svc-block .btn {
  margin-top: 30px;
}
.svc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:30px}
.svc-actions .btn{margin-top:0}
.svc-actions .link{min-height:44px;display:inline-flex;align-items:center}


@media (min-width: 48rem) {
  .ticks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    -moz-column-gap: 28px;
         column-gap: 28px;
  }
}

@media (min-width: 64rem) {
  .svc-block {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    gap: var(--space-3xl);
    align-items: start;
  }

  .svc-block__img {
    position: sticky;
    top: 120px;
  }
}

.packs {
  display: grid;
  gap: 18px;
  margin-top: 56px;
}

.pack {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-rule-strong);
  padding: 30px var(--space-lg);
  border-radius: 2px;
}

.pack--hot {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
}

.pack__tag {
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--color-muted);
}

.pack--hot .pack__tag, .pack--hot .pack__was {
  color: var(--color-accent-ink-2);
}

.pack h3 {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 2rem;
  line-height: 1;
}

.pack__price {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}

.pack__was {
  margin-top: 6px;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.pack ul {
  margin: var(--space-lg) 0 28px;
  border-top: 1px solid var(--color-rule);
}

.pack--hot ul, .pack--hot li {
  border-color: var(--color-rule-dark);
}

.pack li {
  padding: 11px 0;
  border-bottom: 1px solid var(--color-rule);
  font-size: 0.9375rem;
}

.pack .btn {
  margin-top: auto;
}

.pack--hot .btn {
  background: var(--color-paper);
  border-color: var(--color-paper);
  color: var(--color-ink);
}

@media (hover: hover) { .pack--hot .btn:hover {
  background: var(--color-paper-3);
} }

@media (min-width: 64rem) {
  .packs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pack {
    padding: var(--space-xl) 34px;
  }
}

.platforms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: var(--space-xl);
  color: var(--color-muted);
}

.terms {
  display: grid;
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid var(--color-rule);
}

.term {
  display: grid;
  gap: 10px;
  padding: 28px 0;
  border-bottom: 1px solid var(--color-rule);
}

.term__n {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-accent);
  font-size: 1.6rem;
  line-height: 1;
}

.term h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.term p {
  color: var(--color-muted);
  line-height: 1.7;
  max-width: 60ch;
}

.term .times {
  margin-top: 6px;
}

@media (min-width: 64rem) {
  .term {
    grid-template-columns: 90px minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: var(--gap-columns);
    align-items: baseline;
  }
}

.fine {
  margin-top: 30px;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

/* ---------- CTA band ---------- */

.cta-band {
  display: grid;
  gap: 30px;
  align-items: end;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

@media (min-width: 64rem) {
  .cta-band {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  }

  .cta-band__actions {
    justify-content: flex-end;
  }
}

/* ---------- about page ---------- */

.ab-hero {
  display: grid;
  gap: var(--space-xl);
}

.ab-hero__img {
  aspect-ratio: 4 / 5;
  max-width: 520px;
  border-radius: 2px;
}

@media (min-width: 64rem) {
  .ab-hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: end;
    gap: var(--space-3xl);
  }

  .ab-hero__img {
    justify-self: end;
    width: 100%;
  }
}

.meaning {
  display: grid;
  gap: 30px;
  align-items: center;
}

.meaning__word {
  font-size: clamp(6rem, 30vw, 10.5rem);
  line-height: 1.05;
  color: var(--color-accent);
  text-align: center;
}

.meaning__text {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.3;
  color: var(--color-ink);
}

.meaning__text .ar {
  color: var(--color-accent);
}

.meaning__text em {
  color: var(--color-accent);
}

@media (min-width: 64rem) {
  .meaning {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-3xl);
  }
}

.story {
  display: grid;
  gap: 28px;
}

@media (min-width: 64rem) {
  .story {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-columns);
  }
}

.visible {
  visibility: visible;
}

.m-\[0\] {
  margin: 0;
}

.mt-\[0\] {
  margin-top: 0;
}

.mt-\[14px\] {
  margin-top: 14px;
}

.mt-\[18px\] {
  margin-top: 18px;
}

.mt-\[22px\] {
  margin-top: 22px;
}

.mt-\[26px\] {
  margin-top: 26px;
}

.mt-\[28px\] {
  margin-top: 28px;
}

.mt-\[72px\] {
  margin-top: 72px;
}

.mt-\[var\(--space-2xs\)\] {
  margin-top: var(--space-2xs);
}

.mt-\[var\(--space-lg\)\] {
  margin-top: var(--space-lg);
}

.mt-\[var\(--space-md\)\] {
  margin-top: var(--space-md);
}

.mt-\[var\(--space-xl\)\] {
  margin-top: var(--space-xl);
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.min-h-\[0\] {
  min-height: 0;
}

.grow {
  flex-grow: 1;
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.pb-\[var\(--section-gap-s\)\] {
  padding-bottom: var(--section-gap-s);
}

.pb-\[var\(--space-xl\)\] {
  padding-bottom: var(--space-xl);
}

.pt-\[0\] {
  padding-top: 0;
}

.pt-\[var\(--space-xl\)\] {
  padding-top: var(--space-xl);
}

.text-\[\.875rem\] {
  font-size: .875rem;
}

/* ------------------------------------------------------------------
   Wajha v2 — page system (charcoal / cream / beige, Playfair + Poppins)
   ------------------------------------------------------------------ */

/* ---------- motion pre-states (only when motion is on; content stays visible without JS) ---------- */

.js [data-hero] {
  opacity: 0;
}

.js .clients__row {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .clients__row {
    animation: none;
    flex-wrap: wrap;
    width: auto;
  }

  .clients__set[aria-hidden="true"] {
    display: none;
  }

  .clients__set {
    flex-wrap: wrap;
    row-gap: var(--space-sm);
  }

  .scroll-cue i {
    animation: none;
  }

  .bw img {
    filter: grayscale(0.15);
  }
}

/* QC 2 Nov: keep each case shot's subject in frame (headline text on Vestígio/Sals is on the left, May's phone is on the right) */

.case__img img[src*="work-vestigio"], .case__img img[src*="work-sals"] {
  -o-object-position: 0% 50%;
     object-position: 0% 50%;
}

.case__img img[src*="work-may"] {
  -o-object-position: 100% 50%;
     object-position: 100% 50%;
}


/* ===================== Launch polish (Nov 2026) ===================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Tap feedback on touch screens (replaces hover there) */
.link:active, .foot-col a:active, .wcard__domain:active, .mobile-nav__links a:active { color: var(--color-accent); }
.svc-row:active::before { transform: scaleY(1); }
a.crow:active .crow__ico { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--ghost:active { color: var(--color-accent); border-color: var(--color-accent); }
@media (hover: hover) { .wcard:hover .bw img { filter: grayscale(0) contrast(1) brightness(1); } }

/* Giant WAJHA: sized from its measured ink width (3.29em in Playfair 700 at -0.035em tracking) so the whole word
   always fits between the gutters. Centred without transforms: GSAP folds a CSS translate into its own transform
   before the web font loads, which shifted the word sideways and cut off the last A on iPhone. */
.hero-word { --ink: 3.36; left: 0; right: 0; translate: none; text-align: center; top: 16%;
  font-size: calc((100vw - 2 * var(--gutter)) / var(--ink)); }
.hero-portrait { left: 0; right: 0; margin-inline: auto; translate: none; }
.hero { min-height: 100vh; min-height: 100svh; padding-top: calc(88px + env(safe-area-inset-top, 0px)); }
.hero-role span { letter-spacing: clamp(0.12em, 0.9vw - 0.05em, 0.24em); white-space: nowrap; }

/* Inner-page ghost words: in the flow under the heading (they cut through headlines on phones), fitted to width */
.page-hero { display: flex; flex-direction: column; padding-top: calc(140px + env(safe-area-inset-top, 0px)); }
.ghost-word { --ink: 3.3; order: 2; position: relative; left: auto; bottom: auto; translate: none; z-index: -1; text-align: center;
  margin: var(--space-xl) 0 -0.14em; font-size: min(calc((100vw - 2 * var(--gutter)) / var(--ink)), 22rem); }
.ghost-word--asim { --ink: 2.45; } .ghost-word--work { --ink: 3.1; } .ghost-word--offerings { --ink: 5.4; } .ghost-word--hello { --ink: 3.3; }

/* Footer word fits too */
.foot-word { font-size: calc((100vw - 2 * var(--gutter)) / 3.3); }

/* Mobile menu: full dynamic viewport on iOS, safe areas, no scroll bleed */
.mobile-nav { height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
.mobile-nav__links { margin-top: 6svh; }

/* Contact rows: the email no longer breaks mid-word at 320 */
.crow__v { overflow-wrap: break-word; }
@media (max-width: 22.5rem) {
  .crow { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-sm); }
  .crow__ico { width: 40px; height: 40px; }
  .crow__go { display: none; }
  .crow__v { font-size: 0.9375rem; }
}

/* QC fix: footer. The giant word gets a box tall enough for its letters (line-height 0.76 let the A/J/H hang
   ~0.3em below the box into the copyright row), and the copyright row is its own solid band beneath it. */
.foot-word { line-height: 1; padding-bottom: 0.18em; margin-bottom: 0; overflow: visible; position: relative; z-index: 0; }
.foot-base { position: relative; z-index: 1; background: var(--color-paper); border-top: 1px solid var(--color-rule); }

/* QC fix: small text links get a 44px tap area */
.svc-foot a.inline, a[href*="fiverr.com"], a[href*="upwork.com"] {
  display: inline-flex; align-items: center; min-height: 44px; padding-block: var(--space-xs); }
.svc-foot a.inline { border-bottom: 0; text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.25em; }

@media (min-width: 64rem) {
  .hero { min-height: max(100svh, 760px); padding-top: 84px; }
  .hero-word { top: 6%; font-size: min(25vw, 23.5rem, 30svh); }
  .hero-portrait { height: 96%; }
  .page-hero { padding-top: 190px; }
  .foot-word { font-size: min(calc((100vw - 2 * var(--gutter)) / 3.3), 25rem); }
}
/* Laptops 1024-1439: portrait sits inside the middle column so it never runs under the copy; word sized by height */
@media (min-width: 64rem) and (max-width: 89.99rem) {
  .hero-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr) minmax(0, 0.45fr); padding-bottom: 4svh; }
  .hero-portrait { --span: calc((100vw - 2 * var(--gutter) - 2 * var(--gap-columns)) / 2.4);
    left: calc(var(--gutter) + var(--span) * 0.95 + var(--gap-columns));
    right: calc(var(--gutter) + var(--span) * 0.45 + var(--gap-columns));
    height: min(94%, calc(var(--span) * 1.249)); }
  .hero-word { font-size: min(23vw, 23.5rem, 27svh); top: 4%; }
  .hero-bio { max-width: 30ch; }
  .hero-actions { flex-wrap: nowrap; gap: var(--space-xs); }
  .hero-actions .btn { padding: 0 var(--space-md); letter-spacing: 0.16em; }
  .fact span { letter-spacing: 0.12em; }
  .scroll-cue { display: none; }
}