/* =========================================================
   Pixel Peak Logos - landing page
   Design system: see website/README.md
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Brand (from the logo SVG and the existing site gradient) */
  --orange: #F79920;
  --rose: #EC1651;
  --brown: #301212;
  --grad-a: #EF5A1A;
  --grad-b: #FC0258;
  --grad: linear-gradient(115deg, var(--grad-a) 0%, #F5334C 58%, var(--grad-b) 100%);

  /* Neutrals (warm, tinted toward the logo brown) */
  --ink: #140D0D;
  --ink-2: #1F1616;
  --ink-3: #2E2323;
  --paper: #FFFFFF;
  --paper-2: #F7F3EF;
  --line: #E9E1DB;
  --text: var(--ink);
  --muted: #5F5553;
  --muted-on-ink: #B9ADAA;

  /* Type */
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(88px, 11vw, 160px);
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: clamp(24px, 3vw, 36px);
  --header-h: 72px;

  --shadow-sm: 0 1px 2px rgba(20, 13, 13, .06), 0 2px 8px rgba(20, 13, 13, .05);
  --shadow: 0 2px 6px rgba(20, 13, 13, .06), 0 18px 40px -12px rgba(20, 13, 13, .22);
  --shadow-lg: 0 30px 80px -24px rgba(20, 13, 13, .45);

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

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--grad-a);
  outline-offset: 3px;
  border-radius: 6px;
}
.section--ink :focus-visible, .site-footer :focus-visible, .mobile-menu :focus-visible { outline-color: var(--orange); }
.section--orange :focus-visible, .plan--gold :focus-visible, .plan--featured :focus-visible, .offer :focus-visible { outline-color: var(--ink); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1em; height: 1em; flex: none; }

.skip-link {
  position: fixed; left: 16px; top: -100px; z-index: 100;
  padding: 12px 18px; border-radius: 999px;
  background: var(--ink); color: #fff; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 16px; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(820px + var(--gutter) * 2); }

/* ---------- Type ---------- */
.display {
  font-size: clamp(2.75rem, 8vw, 7rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.title-xl {
  font-size: clamp(2.25rem, 5.2vw, 4.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.038em;
  text-wrap: balance;
}
.title-lg {
  font-size: clamp(1.875rem, 4.2vw, 3.5rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 34em;
  text-wrap: pretty;
}
.muted { color: var(--muted-on-ink); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}
.eyebrow--dark { color: var(--muted-on-ink); }
.eyebrow--ink { color: var(--ink); }

/* The "pixel" - the logo is built from square pixels, so a square is the site's signature mark. */
.pixel-dot {
  display: inline-block; flex: none;
  width: .62em; height: .62em;
  background: var(--grad);
}
.pixel-dot--ink { background: var(--ink); }
.pixel-dot--light { background: #fff; }

.text-link {
  display: inline-flex; align-items: center; gap: .45em;
  padding: 0; border: 0; background: none;
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .25em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color .2s, gap .2s var(--ease);
}
.text-link:hover { text-decoration-color: currentColor; gap: .7em; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: #fff; --dot-bg: var(--grad); --dot-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 52px;
  padding: 6px 7px 6px 24px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(20, 13, 13, .45); }
.btn:active { transform: translateY(0); }
.btn__dot {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--dot-bg); color: var(--dot-fg);
  font-size: 1.05rem;
  transition: transform .3s var(--ease);
}
.btn:hover .btn__dot { transform: rotate(-45deg); }
.btn--sm { min-height: 44px; padding-left: 18px; gap: 10px; }
.btn--sm .btn__dot { width: 32px; height: 32px; font-size: .95rem; }
.btn--lg { min-height: 58px; font-size: .875rem; }
.btn--block { width: 100%; justify-content: space-between; }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn--outline-light {
  --btn-bg: transparent; --btn-fg: #fff; --dot-bg: rgba(255,255,255,.12);
  border-color: rgba(255, 255, 255, .28);
  padding-right: 24px;
}
.btn--outline-light:has(.btn__dot) { padding-right: 7px; }
.btn--outline-light:hover { border-color: #fff; box-shadow: none; }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

/* ---------- Header ---------- */
/* At the top the header rides with the page; once it has scrolled out it docks above the viewport,
   slides back in when the visitor scrolls up, and hides again on the way down (motion.js). */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 12px var(--gutter) 0;
  pointer-events: none;
  transform: translate3d(0, var(--header-shift, 0px), 0);
  backface-visibility: hidden;
}
html.is-header-fixed .site-header { transform: translate3d(0, calc(-100% - 24px), 0); }
html.is-header-fixed .site-header.is-header-animating { transition: transform .45s cubic-bezier(.19, 1, .22, 1); will-change: transform; }
html.is-header-fixed .site-header.is-header-visible { transform: translate3d(0, 0, 0); }
body.menu-open .site-header { transform: none !important; transition: none !important; }

.site-header__bar {
  position: relative; isolation: isolate;
  pointer-events: auto;
  display: flex; align-items: center; gap: 20px;
  max-width: var(--container);
  height: var(--header-h);
  margin-inline: auto;
  padding: 0 10px 0 22px;
}
/* The white pill is its own layer so the entrance can grow it from the logo out to full width */
.site-header__pill {
  position: absolute; inset: 0; z-index: -1;
  border: 1px solid rgba(20, 13, 13, .08);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .3s var(--ease);
}
html.is-header-fixed .site-header__pill { box-shadow: var(--shadow); }
.site-header__logo { flex: none; display: block; border-radius: 8px; }
.site-header__logo img, .site-header__logo svg { width: 132px; height: auto; overflow: visible; }
.site-nav { margin-inline: auto; }
.site-nav ~ .site-header__actions { margin-left: 0; }
@media (max-width: 980px) { .site-nav ~ .site-header__actions { margin-left: auto; } }
.site-nav ul { display: flex; gap: 2px; }
.site-nav a {
  display: inline-block; padding: 10px 13px;
  font-size: .9375rem; font-weight: 500; line-height: 1; text-decoration: none; color: var(--muted);
  transition: color .2s;
}
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="true"] { color: var(--ink); }

/* Link roll: the label slides up and a copy, one pixel larger, rolls in from below */
.roll {
  --roll-scale: .9375; /* 15px resting / 16px hovered */
  display: inline-grid; align-items: center; justify-items: center;
  overflow: hidden; vertical-align: bottom;
  font-size: 1rem; line-height: 1;
}
.roll > span {
  grid-area: 1 / 1;
  padding-block: .12em;
  transform-origin: center;
  transition: transform .24s cubic-bezier(.23, 1, .32, 1);
  will-change: transform;
}
.roll > span:first-child { font-size: calc(var(--roll-scale) * 1em); }
.roll > span:last-child { transform: translateY(100%); transition-delay: .04s; }
.site-nav a:not(:hover):not(:focus-visible):not(.is-enter-rolled) .roll > span { transition-delay: 0s; }
.site-nav a:hover .roll > span:first-child,
.site-nav a:focus-visible .roll > span:first-child { transform: translateY(-100%); }
.site-nav a:hover .roll > span:last-child,
.site-nav a:focus-visible .roll > span:last-child { transform: translateY(0); }
.site-nav a.is-enter-prep .roll > span:first-child,
.site-nav a.is-enter-rolled .roll > span:first-child { transform: translateY(-100%); transition: none; visibility: hidden; }
.site-nav a.is-enter-prep .roll > span:last-child { transform: translateY(100%) scale(var(--roll-scale)); transition: none; }
.site-nav a.is-enter-rolled .roll > span:last-child { transform: translateY(0) scale(var(--roll-scale)); }

.site-header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.site-header__phone {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 999px;
  font-size: .9375rem; font-weight: 600; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.site-header__phone .icon { color: var(--grad-a); }
.site-header__phone:hover { background: var(--paper-2); }
.menu-toggle {
  display: none; position: relative;
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: var(--paper-2); color: var(--ink);
}
.menu-toggle__line {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 2px; margin: -1px 0 0 -9px;
  border-radius: 2px; background: currentColor;
  transition: transform .35s var(--ease);
}
.menu-toggle__line--top { transform: translateY(-3.5px); }
.menu-toggle__line--bottom { transform: translate(-2.7px, 3.5px) scaleX(.7); }
.menu-toggle.is-open .menu-toggle__line--top { transform: rotate(45deg); }
.menu-toggle.is-open .menu-toggle__line--bottom { transform: rotate(-45deg); }

/* Entrance: hidden until motion.js takes over (the head script drops .motion if it never loads) */
.motion:not([data-header-intro-seen="true"]) .site-header[data-header-enter-pending] :is(.site-header__pill, .site-header__logo, .site-nav li, [data-header-cta], .menu-toggle) { visibility: hidden; }

.mobile-menu {
  pointer-events: auto;
  position: fixed; inset: 0; z-index: -1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--header-h) + 48px) var(--gutter) 32px;
  background: var(--ink); color: #fff;
  overflow-y: auto;
}
.mobile-menu ul { display: grid; gap: 4px; }
.mobile-menu nav a {
  display: block; padding: 8px 0;
  font-size: clamp(2.25rem, 10vw, 3.25rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.05;
  text-decoration: none;
}
.mobile-menu__foot { display: grid; gap: 16px; margin-top: 40px; }
.mobile-menu__phone { text-align: center; font-family: var(--mono); font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-on-ink); }
body.menu-open { overflow: hidden; }

@media (max-width: 1180px) { .site-header__phone span { display: none; } .site-header__phone { padding: 12px; } }
@media (max-width: 980px) {
  .site-nav, .site-header__phone { display: none; }
  .menu-toggle { display: block; }
}
@media (max-width: 520px) {
  :root { --header-h: 64px; }
  .site-header { padding-top: 8px; }
  .site-header__bar { padding-left: 16px; gap: 10px; }
  .site-header__logo img, .site-header__logo svg { width: 112px; }
  .site-header__actions .btn { display: none; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section); position: relative; }
.section--ink { background: var(--ink); color: #fff; }
.section--ink .lede { color: var(--muted-on-ink); }
.section--paper { background: var(--paper-2); }
.section--orange { background: var(--orange); color: var(--ink); }
.section--orange .lede { color: var(--ink); }

.section-head { margin-bottom: clamp(48px, 6vw, 80px); }
.section-head--center { text-align: center; display: grid; justify-items: center; }
.section-head--center .lede { margin-top: 20px; }
.section-head--split { display: grid; gap: 24px; align-items: end; }
@media (min-width: 900px) { .section-head--split { grid-template-columns: 1.3fr 1fr; gap: 64px; } }

/* ---------- Spotlight cards ----------
   Port of React Bits' SpotlightCard for a site with no framework: a soft radial sheen
   follows the pointer inside the card. main.js only reports the pointer position into
   --spot-x / --spot-y; the fade is CSS. Without JS (or on touch) the gradient stays
   centred, so hover still lights the card - it just doesn't track.
   The card keeps its own background, radius and padding; this adds the sheen only.
   isolation + z-index:-1 keep the sheen above the card's background but under its text,
   so nothing washes out the copy the way an overlay would. */
.spotlight {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --spot-x: 50%;
  --spot-y: 50%;
  --spot-color: rgba(255, 255, 255, .55);
  --spot-fade: 80%;
}
.spotlight::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at var(--spot-x) var(--spot-y), var(--spot-color), transparent var(--spot-fade));
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.spotlight:hover::before, .spotlight:focus-within::before { opacity: 1; }

/* ---------- Hero ---------- */
.hero {
  --cell: clamp(56px, 6.5vw, 88px);
  --marquee-h: clamp(58px, 5.4vw, 76px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: max(100svh, 700px);
  padding: calc(var(--header-h) + 12px + clamp(24px, 3vw, 44px)) 0 calc(var(--marquee-h) + clamp(28px, 3.5vw, 52px));
  background: var(--grad);
  color: var(--ink);
}
/* Pixel grid: lines start at the page centre so decorative pixels can snap to it */
.hero__grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__grid::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(50% - var(--cell) * 25); width: calc(var(--cell) * 50);
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .22) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 40%, transparent 100%);
}
.pixel {
  position: absolute;
  left: calc(50% + var(--x) * var(--cell) + 1px);
  top: calc(var(--y) * var(--cell) + 1px);
  width: calc(var(--cell) - 1px); height: calc(var(--cell) - 1px);
  background: rgba(255, 255, 255, .2);
}
.pixel--soft { background: rgba(255, 255, 255, .1); }

/* Floating work. Positions are percentages of the stage above the marquee. */
.hero-media {
  position: absolute; top: 0; bottom: var(--marquee-h); left: 0; right: 0;
  width: min(1680px, 100%);
  margin-inline: auto;
  pointer-events: none;
  perspective: 1200px;
  perspective-origin: 50% 50%;
}
.hero-media__layer { position: absolute; inset: 0; transform-style: preserve-3d; }
.hero-item {
  --shadow-x: -30px;
  position: absolute;
  top: var(--y); left: var(--x); z-index: var(--z, 1);
  width: var(--w);
  border-radius: 8px;
  pointer-events: auto;
  transform-style: preserve-3d;
}
.hero-item.is-right { --shadow-x: 30px; }
.hero-item__visual {
  position: relative; display: block; width: 100%;
  border-radius: inherit;
  transform-style: preserve-3d;
}
.hero-item__visual::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-x) 0 30px 0 rgba(72, 10, 20, .3);
  pointer-events: none;
}
.hero-item__visual img {
  position: relative; z-index: 1;
  display: block; width: 100%; height: auto;
  border-radius: 8px;
  background: #fff;
}
.hero-item--plain .hero-item__visual img { aspect-ratio: 1; object-fit: contain; padding: 14%; }
.hero-item__shade, .hero-item__shine {
  position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; overflow: hidden;
  opacity: 0; pointer-events: none;
  will-change: transform, opacity;
}
.hero-item__shade { mix-blend-mode: multiply; }
.hero-item__shine { z-index: 3; mix-blend-mode: screen; }
.hero-item__shade-glow, .hero-item__shine-glow { position: absolute; inset: -50%; display: block; will-change: transform; }
.hero-item__shade-glow { background: radial-gradient(circle at center, rgba(0, 0, 0, .7) 0, rgba(0, 0, 0, .24) 22%, rgba(0, 0, 0, 0) 52%); }
.hero-item__shine-glow { background: radial-gradient(circle at center, rgba(255, 255, 255, .75) 0, rgba(255, 255, 255, .22) 22%, rgba(255, 255, 255, 0) 52%); }
.hero.is-interaction-locked .hero-item { pointer-events: none; }
@media (max-width: 1279px) { .hero-item.is-extra { display: none; } }

/* Tints the cards that drift behind the copy, using the hero's own gradient so it blends in */
.hero__fade {
  position: absolute; top: 0; bottom: var(--marquee-h); left: 0; right: 0;
  width: min(1680px, 100%); margin-inline: auto;
  background: var(--grad);
  opacity: .5;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .4) 20%, #000 40%, #000 60%, rgba(0, 0, 0, .4) 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .4) 20%, #000 40%, #000 60%, rgba(0, 0, 0, .4) 80%, transparent);
}

/* Cursor label shown over a hovered card */
.hero-label {
  position: absolute; top: 0; left: 0; z-index: 5;
  display: none; align-items: center; gap: 8px;
  min-height: 34px; padding: 4px 13px 4px 11px;
  border-radius: 999px;
  color: #fff; background: var(--ink);
  box-shadow: 0 4px 4px rgba(20, 13, 13, .15);
  font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap;
  pointer-events: none; visibility: hidden;
}
.hero-label .pixel-dot { width: 7px; height: 7px; }
.hero-label.is-active { will-change: transform, opacity; }
@media (min-width: 768px) { .hero-label { display: flex; } }

/* Copy */
.hero__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  pointer-events: none;
}
.hero__inner :is(a, button, input, label, .lead) { pointer-events: auto; }
.hero.is-exit-motion .hero__inner { contain: layout style; }
.hero.is-exit-motion :is(.hero__eyebrow, .hl-line, .hl-that, .hero__lede, .hero__proof) { will-change: transform, opacity; }
.hero__eyebrow { color: var(--ink); margin-bottom: 18px; cursor: default; }
.hero__eyebrow span { opacity: .5; }
.hero__title {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  font-size: clamp(2.75rem, 5.6vw, 5.5rem);
  cursor: default;
}
.hl-line { position: relative; display: block; }
/* Its own box so it can fade and shrink on the scroll exit; the margin stands in for the collapsed space */
.hl-that { display: inline-block; margin-right: .2em; }

/* Highlight bar on the last words. The bar holds a white copy of the text so the wipe reveals it. */
.mark {
  --bar-top: .07em; --bar-bottom: -.11em; --bar-pad: .15em; --bar-radius: 8px;
  position: relative; display: inline-block;
  padding: 0 var(--bar-pad);
  margin-left: -.06em;
}
.mark__text { position: relative; z-index: 1; }
.mark__bar {
  position: absolute; left: 0; right: 0; top: var(--bar-top); bottom: var(--bar-bottom); z-index: 2;
  overflow: hidden;
  border-radius: var(--bar-radius);
  background: var(--ink); color: #fff;
  pointer-events: none;
}
.mark__bar > span {
  position: absolute; left: var(--bar-pad); top: calc(-1 * var(--bar-top));
  white-space: nowrap;
}
.motion .hero[data-hero-pending] :is(.hero-item, .mark__bar, .strip-card, .marquee) { visibility: hidden; }

.hero__lede {
  max-width: 34em; margin-top: clamp(22px, 2.6vw, 32px);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.5; font-weight: 450;
  color: var(--ink);
  text-wrap: pretty;
  cursor: default;
}

/* Lead capture */
.lead { width: 100%; max-width: 540px; margin-top: clamp(26px, 3.2vw, 38px); }
.lead__row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 22px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 20px 50px -18px rgba(80, 10, 20, .55);
}
.lead__row:focus-within { box-shadow: 0 0 0 3px var(--ink), 0 20px 50px -18px rgba(80, 10, 20, .55); }
.lead__input {
  flex: 1; min-width: 0; width: 100%; height: 52px;
  border: 0; outline: 0; background: transparent;
  font-size: 1.0625rem;
}
.lead__input::placeholder { color: #6F6461; }
.lead__submit { flex: none; }
.lead__meta {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  min-height: 36px; margin-top: 12px;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink);
}
.lead__step { margin: 0; }
.lead__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .25);
  font: inherit; color: var(--ink);
}
.lead__link:hover { background: rgba(255, 255, 255, .45); }
.lead__status { min-height: 1.5em; font-weight: 600; font-size: .9375rem; }
.lead__status.is-error { color: var(--ink); }
.lead__status.is-error::before { content: "! "; }
.lead__status.is-success { color: #fff; }

.hero__proof {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
  margin-top: clamp(10px, 1.6vw, 18px);
  font-size: .9375rem; color: var(--ink);
  cursor: default;
}
.hero__proof li { display: inline-flex; align-items: center; gap: 6px; }
.hero__proof strong { color: var(--ink); font-weight: 700; }
.hero__proof .icon--star { color: #fff; }

/* Mobile: a strip of four cards under the copy, each slot cross-fading through real work */
.hero-strip { display: none; }

@media (max-width: 767px) {
  .hero-media, .hero__fade { display: none; }
  .hero {
    justify-content: flex-start;
    min-height: 100svh;
    padding-top: calc(var(--header-h) + 8px + 40px);
  }
  .hero__eyebrow { margin-bottom: 14px; }
  .hero-strip {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
    width: 100%; max-width: 520px;
    margin-top: 36px; padding-inline: var(--gutter);
  }
  .hero-strip__slot { position: relative; aspect-ratio: 1; }
  .strip-card {
    position: absolute; inset: 0;
    border-radius: 8px; overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 12px rgba(72, 10, 20, .2);
  }
  .strip-card img { width: 100%; height: 100%; object-fit: cover; }
  .strip-card--plain img { object-fit: contain; padding: 14%; }
  .strip-card:not(:first-child) { opacity: 0; visibility: hidden; }
}

/* ---------- Marquee ---------- */
/* Sits on the bottom edge of the hero; rises in during the intro */
.marquee {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center;
  height: var(--marquee-h);
  overflow: hidden;
  background: var(--ink); color: #fff;
  cursor: default; -webkit-user-select: none; user-select: none;
}
.marquee__track {
  display: flex; align-items: center;
  width: max-content;
  font-size: clamp(1.5rem, 3vw, 2.625rem);
  font-weight: 800; letter-spacing: -.035em; text-transform: uppercase; line-height: 1;
  white-space: nowrap;
  animation: marquee 48s linear infinite;
  will-change: transform;
}
/* Spacing lives on each item (not the track) so the two halves are identical and the loop is seamless */
.marquee__item { display: inline-flex; flex: none; align-items: center; gap: clamp(20px, 2.5vw, 36px); padding-left: clamp(20px, 2.5vw, 36px); }
.marquee__track .pixel-dot { width: .42em; height: .42em; }
.motion .marquee__track { animation: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Work ---------- */
.work { padding-top: clamp(80px, 9vw, 128px); }
.work .section-head { margin-bottom: 40px; }
.tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  width: fit-content; margin: 0 auto clamp(36px, 4vw, 56px);
  padding: 6px; border-radius: 999px;
  background: var(--ink-2); border: 1px solid var(--ink-3);
}
.tabs__tab {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 999px; background: transparent;
  font-family: var(--mono); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-on-ink);
  transition: background-color .2s, color .2s;
}
.tabs__tab:hover { color: #fff; }
.tabs__tab[aria-selected="true"] { background: #fff; color: var(--ink); }
.tabs__count {
  display: grid; place-items: center; min-width: 24px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--ink-3); color: #fff; font-size: .6875rem;
}
.tabs__tab[aria-selected="true"] .tabs__count { background: var(--grad); }
.work__panel:focus-visible { outline-offset: 8px; }

.work-grid { display: grid; gap: clamp(12px, 1.6vw, 20px); }
.work-grid--logo { grid-template-columns: repeat(4, 1fr); }
.work-grid--branding { grid-template-columns: repeat(3, 1fr); }
.work-grid--web { grid-template-columns: repeat(2, 1fr); }
.work-card { position: relative; }
.work-card img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); background: var(--ink-2);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.work-grid--branding .work-card img { aspect-ratio: 1; }
.work-grid--web .work-card img { aspect-ratio: 1280 / 910; }
.work-card span {
  display: block; margin-top: 12px;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-on-ink);
}
@media (hover: hover) {
  .work-card:hover img { transform: translateY(-6px) rotate(-.6deg); box-shadow: var(--shadow-lg); }
}
.js [data-collapsible].is-collapsed > li:nth-child(n + 9) { display: none; }
.work__more { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 48px); }
.no-js .work__more, html:not(.js) .work__more { display: none; }
@media (max-width: 899px) {
  .work-grid--logo, .work-grid--branding { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .work-grid--web { grid-template-columns: 1fr; }
}

/* ---------- Services ---------- */
.services__layout { display: grid; gap: clamp(40px, 6vw, 96px); }
@media (min-width: 1000px) {
  .services__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .services__head { position: sticky; top: calc(var(--header-h) + 48px); }
}
.services__head .lede { margin-block: 24px 32px; }

.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(16px, 2.4vw, 32px);
  width: 100%; padding: clamp(22px, 2.6vw, 32px) 0;
  border: 0; background: none; text-align: left;
}
.accordion__num { width: 28px; font-family: var(--mono); font-size: .8125rem; letter-spacing: .06em; color: var(--muted); }
.accordion__title {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.05;
  transition: color .2s;
}
.accordion__trigger:hover .accordion__title { color: var(--grad-a); }
.accordion__icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--line); font-size: 1.2rem;
  transition: transform .35s var(--ease), background-color .25s, border-color .25s, color .25s;
}
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); background: var(--ink); border-color: var(--ink); color: #fff; }
.accordion__panel { overflow: hidden; }
.accordion__body { padding: 0 0 clamp(28px, 3vw, 40px) calc(28px + clamp(16px, 2.4vw, 32px)); }
.accordion__lead { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); font-weight: 600; letter-spacing: -.015em; margin-bottom: 20px; }
.feature-list { display: grid; gap: 14px 32px; margin-bottom: 24px; }
@media (min-width: 640px) { .feature-list { grid-template-columns: 1fr 1fr; } }
.feature-list li { position: relative; padding-left: 38px; color: var(--muted); font-size: .96875rem; line-height: 1.5; }
.feature-list__icon {
  position: absolute; left: 0; top: 0; width: 24px; height: 24px;
  fill: none; stroke: url(#g-brand); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.feature-list strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.accordion__note { margin-bottom: 20px; font-size: .9375rem; color: var(--muted); }
@media (max-width: 599px) { .accordion__body { padding-left: 0; } .accordion__icon { width: 40px; height: 40px; } }

.also { margin-top: clamp(40px, 5vw, 56px); }
.also__label { font-family: var(--mono); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px;
  border: 1.5px solid var(--line); border-radius: 999px;
  font-size: .9375rem; font-weight: 500; text-decoration: none;
  transition: border-color .2s, background-color .2s, color .2s;
}
.chip:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

/* ---------- Proof ---------- */
.proof { overflow: hidden; }
.proof::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(20, 13, 13, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 13, 13, .07) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center top;
}
.proof .container { position: relative; }
.proof__head { max-width: 900px; }
.proof__head .lede { margin-top: 24px; }
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(56px, 7vw, 96px);
  border-top: 1.5px solid var(--ink);
}
.stat { padding: 28px 24px 0 0; }
.stat + .stat { padding-left: 24px; border-left: 1.5px solid rgba(20, 13, 13, .2); }
.stat dt { order: 2; font-family: var(--mono); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; margin-top: 10px; }
.stat { display: flex; flex-direction: column; }
.stat dd {
  order: 1;
  font-size: clamp(3rem, 7vw, 6rem); font-weight: 800; letter-spacing: -.05em; line-height: .9;
  font-variant-numeric: tabular-nums;
}
.stat sup { font-size: .42em; letter-spacing: -.02em; vertical-align: top; position: relative; top: .25em; margin-left: .06em; }
.proof__facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-top: clamp(40px, 5vw, 64px);
}
.proof__facts li {
  padding: 20px 22px; border-radius: var(--radius);
  background: rgba(255, 255, 255, .28);
  font-size: .96875rem; line-height: 1.45;
  --spot-color: rgba(255, 255, 255, .5);
  --spot-fade: 72%;
}
.proof__facts strong { display: block; font-size: 1.375rem; letter-spacing: -.03em; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
@media (max-width: 899px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n + 3) { margin-top: 28px; border-top: 1.5px solid rgba(20, 13, 13, .2); }
  .proof__facts { grid-template-columns: 1fr; }
}

/* ---------- Process ----------
   The six steps are tabs (mono list, like okaydev's numbered list). They drive a white project window
   on a gradient stage that follows one example job, a fictional café, from brief to launch (process.js).
   Everything inside the window is sized in em off a container-relative base, so it scales like a picture. */
.process__layout {
  display: grid; gap: 32px;
  grid-template-areas: "head" "steps" "stage" "cta";
}
@media (min-width: 1000px) {
  .process__layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "head stage" "steps stage" "cta stage";
    column-gap: clamp(48px, 5vw, 88px); row-gap: 40px;
  }
}
.process__head { grid-area: head; }
.process__steps { grid-area: steps; min-width: 0; }
.process__stage { grid-area: stage; min-width: 0; }
.process__cta { grid-area: cta; }
.process__head .lede { margin-top: 24px; }
.process__em {
  color: transparent;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Steps: a mono list; the open step shows its line and a progress bar that runs while autoplay is on */
.psteps { display: grid; border-top: 1px solid var(--ink-3); }
.pstep {
  position: relative;
  display: grid; grid-template-columns: 3.4em 1fr; align-items: baseline;
  width: 100%; padding: 15px 0; border: 0; border-bottom: 1px solid var(--ink-3);
  background: none; text-align: left;
  font-family: var(--mono); font-size: .9375rem; letter-spacing: .02em; line-height: 1.4;
  color: var(--muted-on-ink);
  transition: color .2s;
}
.pstep:hover, .pstep[aria-selected="true"] { color: #fff; }
.pstep__num { font-size: .8125rem; font-variant-numeric: tabular-nums; }
.pstep[aria-selected="true"] .pstep__num {
  color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text;
}
.pstep__desc {
  grid-column: 2;
  display: grid; grid-template-rows: 0fr;
  font-family: var(--font); font-size: 1rem; letter-spacing: 0; line-height: 1.5;
  color: var(--muted-on-ink);
  transition: grid-template-rows .45s var(--ease), margin .45s var(--ease);
}
.pstep__desc > span { min-height: 0; overflow: hidden; }
.pstep[aria-selected="true"] .pstep__desc { grid-template-rows: 1fr; margin-top: 6px; }
.pstep__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.pstep__bar i { display: block; height: 100%; background: var(--grad); transform: scaleX(0); transform-origin: left; }
.pstep[aria-selected="true"] .pstep__bar i { transform: scaleX(1); transition: transform .5s var(--ease); }
.process.is-autoplay .pstep[aria-selected="true"] .pstep__bar i { transition: none; animation: pstep-fill var(--pstep-ms, 6500ms) linear both; }
.process.is-paused .pstep[aria-selected="true"] .pstep__bar i { animation-play-state: paused; }
@keyframes pstep-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.process__caption { display: none; }

/* Stage: the brand gradient with a faint grid and a giant step number behind the window */
.process__stage {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(14px, 3.2vw, 44px) clamp(14px, 3.2vw, 44px) clamp(64px, 8vw, 120px);
  border-radius: var(--radius-lg);
  background: var(--grad);
}
.process__stage::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .1) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
}
.process__bignum {
  position: absolute; z-index: -1; left: clamp(10px, 2vw, 28px); bottom: -.2em;
  font-size: clamp(8rem, 17vw, 16rem); font-weight: 800; line-height: 1; letter-spacing: -.07em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .2);
  -webkit-user-select: none; user-select: none;
}
.process__bignum.is-changing { animation: pw-bignum .7s var(--ease) both; }
@keyframes pw-bignum { from { opacity: 0; transform: translateY(24%); } }
/* Desktop: the stage holds still while the steps scroll past it */
@media (min-width: 1000px) {
  .process__stage { align-self: start; position: sticky; top: calc(var(--header-h) + 32px); }
}

/* The project window */
.pw {
  --ex-forest: #1E4D3B; --ex-cream: #F6EBD9; --ex-sun: #F2B33D; --ex-pale: #E9D9A8;
  --ex-serif: Georgia, "Times New Roman", serif;
  position: relative; container-type: inline-size;
  border-radius: var(--radius); overflow: hidden;
  background: #fff; color: var(--ink);
  box-shadow: 0 2px 6px rgba(72, 10, 20, .12), 0 40px 80px -32px rgba(72, 10, 20, .6);
}
.pw__top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px 12px 12px; border-bottom: 1px solid var(--line);
}
.pw__client { display: flex; align-items: center; gap: 10px; min-width: 0; line-height: 1.25; }
.pw__avatar { flex: none; width: 34px; height: 34px; color: var(--ex-sun); }
.pw__client > span { min-width: 0; }
.pw__client strong { display: block; font-size: .9375rem; letter-spacing: -.01em; }
.pw__client small {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.pw__status {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 7px 12px; border-radius: 999px; background: var(--paper-2);
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.pw__status i { width: 7px; height: 7px; background: var(--grad); }
.motion .pw__status i { animation: pw-blink 1.6s steps(1) infinite; }
@keyframes pw-blink { 50% { opacity: .25; } }

.pw__scenes { display: grid; padding: clamp(12px, 3.6cqw, 24px); font-size: clamp(11.5px, 2.35cqw, 15px); line-height: 1.4; }
.pw-scene { min-width: 0; }
.pw-scene + .pw-scene { margin-top: 24px; }
.js .pw__scenes > .pw-scene { grid-area: 1 / 1; align-self: center; margin-top: 0; }
.js .pw-scene:not(.is-active) { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .2s, visibility 0s .2s; }
.js .pw-scene.is-active { transition: opacity .3s .1s; }
/* Scene pieces rise in one after another (--i orders them), and reset once their scene is hidden */
.motion .pw-in { opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease) .25s, transform .6s var(--ease) .25s; }
.motion .pw-scene.is-active .pw-in { opacity: 1; transform: none; transition-delay: calc(.15s + var(--i, 0) * .09s); }
.pw-scene.is-resetting, .pw-scene.is-resetting * { transition: none !important; animation: none !important; }
.pw-label {
  margin-bottom: .7em;
  font-family: var(--mono); font-size: .75em; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

/* 01 Discover: the brief comes in like a composer, then what we heard */
.pw-brief { display: grid; gap: 1.1em; }
.pw-compose { padding: 1.1em 1.2em .8em; border-radius: 14px; background: var(--paper-2); }
.pw-compose__text { min-height: 4.2em; font-size: 1.3em; line-height: 1.4; letter-spacing: -.015em; text-wrap: pretty; }
.pw-compose__text [data-process-type].is-typing::after {
  content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em;
  background: var(--grad-a); animation: pw-blink .9s steps(1) infinite;
}
.pw-compose__bar { display: flex; align-items: center; gap: 1em; margin-top: .9em; padding-top: .8em; border-top: 1px solid var(--line); color: var(--muted); }
.pw-tool { width: 1.35em; height: 1.35em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pw-compose__sent {
  margin-left: auto; padding: .5em 1.2em; border-radius: 999px; background: var(--ink); color: #fff;
  font-family: var(--mono); font-size: .75em; letter-spacing: .08em; text-transform: uppercase;
}
.pw-heard .pw-label { margin-bottom: .6em; }
.pw-heard ul { display: grid; grid-template-columns: 1fr 1fr; gap: .55em; }
.pw-heard li { padding: .75em .9em; border: 1px solid var(--line); border-radius: 12px; font-weight: 500; line-height: 1.3; }
.pw-heard li span {
  display: flex; align-items: center; gap: .55em; margin-bottom: .35em;
  font-family: var(--mono); font-size: .75em; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.pw-heard li span::before { content: ""; width: .65em; height: .65em; background: var(--grad); }
/* The notes wait for the typing to finish */
.motion .pw-brief.is-active .pw-heard .pw-in { transition-delay: calc(2.5s + (var(--i) - 6) * .14s); }

/* 02 Strategize: a small brand board */
.pw-plan { display: grid; grid-template-columns: 1.2fr 1fr; gap: .75em; }
.pw-tile { min-width: 0; padding: 1em; border-radius: 14px; background: var(--paper-2); }
.pw-palette { display: flex; flex-direction: column; }
.pw-palette ul { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: .4em; }
.pw-palette li {
  display: flex; align-items: flex-end; min-height: 5.5em; padding: .45em;
  border-radius: 10px; background: var(--c); color: #fff;
  font-family: var(--mono); font-size: .7em; letter-spacing: .03em;
}
.pw-palette li.is-light { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(20, 13, 13, .08); }
.pw-type { display: flex; flex-direction: column; background: var(--ex-cream); }
.pw-type__aa { font-family: var(--ex-serif); font-weight: 700; font-size: 4em; line-height: .9; letter-spacing: -.03em; color: var(--ex-forest); margin-bottom: .15em; }
.pw-type__note { margin-top: auto; font-size: .9em; line-height: 1.35; color: #6A5646; }
.pw-words ul { display: flex; flex-wrap: wrap; gap: .4em; }
.pw-words li { padding: .35em .85em; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: .92em; font-weight: 500; }
.pw-line { background: var(--ex-forest); color: var(--ex-cream); }
.pw-line .pw-label { color: rgba(246, 235, 217, .7); }
.pw-line__quote { font-family: var(--ex-serif); font-weight: 700; font-size: 1.45em; line-height: 1.15; letter-spacing: -.01em; }

/* 03 Design: three concepts, then the client's pick lifts and the others step back */
.pw-concepts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8em; align-items: start; padding-top: 1.6em; }
.pw-concept { position: relative; margin: 0; padding: .5em .5em .85em; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.pw-concept__art { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; background: var(--ex-cream); color: var(--ex-forest); }
.pw-concept__art svg { width: 54%; height: 54%; }
.pw-concept--pick .pw-concept__art svg { color: var(--ex-sun); }
.pw-concept figcaption { padding: .75em .35em 0; line-height: 1.3; }
.pw-concept strong { display: block; font-size: 1em; letter-spacing: -.01em; }
.pw-concept figcaption span { font-size: .85em; color: var(--muted); }
.pw-concept--pick::after {
  content: ""; position: absolute; inset: -2px; border-radius: 15px; padding: 2px; pointer-events: none;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.pw-concept__badge {
  position: absolute; top: -1em; left: 50%; translate: -50% 0; z-index: 1;
  display: inline-flex; align-items: center; gap: .4em;
  padding: .45em .85em; border-radius: 999px; background: var(--ink); color: #fff;
  font-family: var(--mono); font-size: .7em; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.pw-concept__badge .icon { color: var(--orange); }
.motion .pw-concept--pick::after, .motion .pw-concept__badge { opacity: 0; }
.motion .pw-concepts.is-active .pw-concept--pick { animation: pw-lift .7s var(--ease) 1.5s both; }
.motion .pw-concepts.is-active .pw-concept--pick::after { animation: pw-show .5s ease 1.5s both; }
.motion .pw-concepts.is-active .pw-concept__badge { animation: pw-pop .55s cubic-bezier(.34, 1.56, .64, 1) 1.7s both; }
.motion .pw-concepts.is-active .pw-concept:not(.pw-concept--pick) { animation: pw-dim .7s ease 1.5s both; }
.pw-concepts .pw-concept--pick { box-shadow: var(--shadow); }
.pw-concepts .pw-concept:not(.pw-concept--pick) { opacity: .55; filter: saturate(.3); }
.motion .pw-concepts .pw-concept--pick { box-shadow: none; }
.motion .pw-concepts .pw-concept:not(.pw-concept--pick) { filter: none; }
.motion .pw-concepts.is-active .pw-concept:not(.pw-concept--pick) { opacity: 1; }
@keyframes pw-lift { to { translate: 0 -.5em; box-shadow: var(--shadow); } }
@keyframes pw-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes pw-pop { from { opacity: 0; scale: .5; } to { opacity: 1; scale: 1; } }
@keyframes pw-dim { to { opacity: .5; filter: saturate(.3); } }

/* 04 Develop: the mark on a website, a cup, and the files */
.pw-build { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: .75em; }
.pw-site { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--ex-cream); }
.pw-site__chrome { display: flex; align-items: center; gap: .35em; padding: .55em .7em; border-bottom: 1px solid var(--line); background: #fff; }
.pw-site__chrome i { width: .55em; height: .55em; border-radius: 50%; background: var(--line); }
.pw-site__chrome span { flex: 1; max-width: 12em; height: .95em; margin-left: .6em; border-radius: 999px; background: var(--paper-2); }
.pw-site__nav { display: flex; align-items: center; gap: .5em; padding: .75em .9em .3em; color: var(--ex-forest); }
.pw-site__nav svg { width: 1.8em; height: 1.8em; color: var(--ex-sun); }
.pw-site__nav b { font-family: var(--ex-serif); font-size: .95em; }
.pw-site__nav em { width: 2.2em; height: .35em; border-radius: 999px; background: rgba(30, 77, 59, .25); }
.pw-site__nav em:first-of-type { margin-left: auto; }
.pw-site__hero { position: relative; flex: 1; min-height: 9.5em; padding: .8em .9em 1.4em; overflow: hidden; }
.pw-site__title { position: relative; z-index: 1; max-width: 6.5em; font-family: var(--ex-serif); font-weight: 700; font-size: 1.8em; line-height: 1.02; letter-spacing: -.02em; color: var(--ex-forest); }
.pw-site__btn { position: relative; z-index: 1; display: inline-block; margin-top: .8em; padding: .45em .95em; border-radius: 999px; background: var(--ex-forest); color: var(--ex-cream); font-size: .75em; font-weight: 600; }
.pw-site__sun {
  position: absolute; right: -1.2em; bottom: -4.4em; width: 10em; height: 10em; border-radius: 50%;
  background: linear-gradient(to bottom, var(--ex-sun) 0 50%, transparent 50% 55%, var(--ex-sun) 55% 62%, transparent 62% 67%, var(--ex-sun) 67% 74%, transparent 74%);
}
.pw-cup { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1em .5em; border-radius: 12px; background: var(--paper-2); }
.pw-cup__lid { width: 66%; height: 1.1em; border-radius: .45em .45em .15em .15em; background: var(--ex-forest); }
.pw-cup__body {
  display: grid; place-items: center; width: 58%; aspect-ratio: .74; margin-top: 2px;
  clip-path: polygon(0 0, 100% 0, 87% 100%, 13% 100%);
  background: linear-gradient(#fff 0 26%, var(--ex-cream) 26% 76%, #fff 76%);
}
.pw-cup__body svg { width: 52%; height: 52%; color: var(--ex-sun); }
.pw-files { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .45em; }
.pw-files li {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .5em .8em .5em .6em; border: 1px solid var(--line); border-radius: 8px;
  font-family: var(--mono); font-size: .78em;
}
.pw-files li::before { content: ""; width: .75em; height: .95em; border-radius: 2px; background: var(--ex-forest); }

/* 05 Refine: the sun warms up between versions while the thread plays out */
.pw-refine { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: .8em; }
.pw-canvas {
  position: relative; display: grid; place-items: center; min-height: 16em; padding: 3em 1em 2em; border-radius: 14px;
  background: radial-gradient(rgba(30, 77, 59, .12) 1px, transparent 1.2px) 0 0 / 14px 14px, var(--ex-cream);
}
.pw-versions {
  position: absolute; top: .75em; left: .75em; display: flex; gap: .2em; padding: .2em;
  border-radius: 999px; background: #fff; font-family: var(--mono); font-size: .72em;
}
.pw-versions li { padding: .25em .65em; border-radius: 999px; color: var(--muted); }
.pw-versions li.is-current { background: var(--ink); color: #fff; }
.pw-lockup { display: flex; align-items: center; gap: .75em; }
.pw-lockup__mark { flex: none; width: 4.4em; height: 4.4em; color: var(--ex-sun); }
.pw-lockup__name { font-family: var(--ex-serif); font-weight: 700; font-size: 2.1em; line-height: .95; letter-spacing: -.02em; color: var(--ex-forest); }
.pw-lockup__name small { display: block; margin-top: .45em; font-family: var(--mono); font-size: .3em; font-weight: 500; letter-spacing: .45em; text-transform: uppercase; }
.motion .pw-lockup__mark { color: var(--ex-pale); }
.motion .pw-refine.is-active .pw-lockup__mark { animation: pw-warm .9s ease 1.8s both; }
.motion .pw-refine.is-active .pw-versions li:nth-child(2) { animation: pw-version-was 1.8s steps(1) both; }
.motion .pw-refine.is-active .pw-versions li.is-current { animation: pw-version-now .01s 1.8s both; }
.motion .pw-versions li.is-current { background: none; color: var(--muted); }
@keyframes pw-warm { from { color: var(--ex-pale); } to { color: var(--ex-sun); } }
@keyframes pw-version-was { from { background: var(--ink); color: #fff; } to { background: none; color: var(--muted); } }
@keyframes pw-version-now { to { background: var(--ink); color: #fff; } }
.pw-thread { display: flex; flex-direction: column; justify-content: center; gap: .55em; }
.pw-bubble { align-self: flex-start; max-width: 94%; padding: .7em .9em; border-radius: 14px 14px 14px 4px; background: var(--paper-2); line-height: 1.35; }
.pw-bubble--us { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--ink); color: #fff; }
.pw-bubble__who { display: block; margin-bottom: .25em; font-family: var(--mono); font-size: .72em; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pw-bubble--us .pw-bubble__who { color: var(--muted-on-ink); }
/* Client note, then our reply and v3, then the sign-off */
.motion .pw-refine.is-active .pw-bubble:nth-child(1) { transition-delay: .45s; }
.motion .pw-refine.is-active .pw-bubble:nth-child(2) { transition-delay: 1.45s; }
.motion .pw-refine.is-active .pw-bubble:nth-child(3) { transition-delay: 2.7s; }

/* 06 Elevate: live on social, the checklist done, and the next job queued */
.pw-launch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.4em; align-items: center; padding: .4em .4em .4em .6em; }
.pw-post { justify-self: center; width: 100%; max-width: 16em; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); rotate: -2.5deg; }
.pw-post__head { display: flex; align-items: center; gap: .5em; padding: .6em .7em; font-size: .85em; }
.pw-post__head svg { width: 1.9em; height: 1.9em; color: var(--ex-sun); }
.pw-post__img {
  display: grid; justify-items: center; align-content: center; gap: .9em; aspect-ratio: 1; padding: 1em;
  background: var(--ex-forest); color: var(--ex-cream); text-align: center;
}
.pw-post__img svg { --ex-badge: transparent; width: 5em; height: 5em; color: var(--ex-sun); }
.pw-post__img span { font-family: var(--ex-serif); font-weight: 700; font-size: 1.2em; line-height: 1.15; }
.pw-post__foot { display: flex; gap: .55em; padding: .6em .7em; }
.pw-post__foot i { width: 1.1em; height: 1.1em; border: 1.5px solid #B9ADAA; border-radius: 50%; }
.pw-checks ul { display: grid; gap: .6em; }
.pw-checks li { display: flex; align-items: center; gap: .7em; font-weight: 500; line-height: 1.3; }
.pw-checks li::before {
  content: ""; flex: none; width: 1.4em; height: 1.4em; border-radius: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat, var(--grad);
}
.pw-checks li.is-next { color: var(--muted); }
.pw-checks li.is-next::before { background: none; border: 1.5px dashed #C9BDB9; }

/* Narrow windows (phones) */
@container (max-width: 420px) {
  .pw-plan { grid-template-columns: 1fr 1fr; }
  .pw-build { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pw-site { grid-column: 1 / -1; }
  .pw-cup { display: none; }
  .pw__top { gap: 8px; padding: 10px; }
  .pw__avatar { width: 30px; height: 30px; }
  .pw__client { gap: 8px; }
  .pw__client strong { font-size: .875rem; }
  .pw__status { gap: 6px; padding: 6px 9px; font-size: .625rem; letter-spacing: .04em; }
  .pw-refine { grid-template-columns: 1fr; }
  .pw-canvas { min-height: 12em; }
  .pw-launch { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1em; }
}

.pw__foot { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--line); }
html:not(.js) .pw__foot { display: none; }
.pw__toggle {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px;
  border: 1.5px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); font-size: .8rem;
  transition: border-color .2s;
}
.pw__toggle:hover { border-color: var(--ink); }
.pw__icon-play, .pw__toggle[aria-pressed="true"] .pw__icon-pause { display: none; }
.pw__toggle[aria-pressed="true"] .pw__icon-play { display: block; }
.pw__count { font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums; }
.pw__next {
  display: inline-flex; align-items: center; gap: 10px; margin-left: auto; min-height: 36px; padding: 0 14px 0 16px;
  border: 0; border-radius: 999px; background: var(--ink); color: #fff;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.pw__next .icon { transition: transform .25s var(--ease); }
.pw__next:hover .icon { transform: translateX(3px); }

/* Tablets and phones: steps become a row of chips over the window, the open step's line under them */
@media (max-width: 999px) {
  .psteps {
    display: flex; gap: 6px; overflow-x: auto; border: 0;
    margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 4px;
    scrollbar-width: none;
  }
  .psteps::-webkit-scrollbar { display: none; }
  .pstep {
    flex: none; width: auto; grid-template-columns: auto auto; gap: 8px; align-items: center;
    min-height: 44px; padding: 0 16px; border: 1px solid var(--ink-3); border-radius: 999px; overflow: hidden;
  }
  .pstep[aria-selected="true"] { background: #fff; border-color: #fff; color: var(--ink); }
  .pstep__desc {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .pstep__bar { left: 14px; right: 14px; bottom: 5px; border-radius: 2px; }
  .process__caption { display: block; min-height: 1.6em; margin-top: 14px; color: var(--muted-on-ink); }
}

/* ---------- Logo types ---------- */
.type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 24px); }
.type-card {
  padding: 12px 12px 28px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.type-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.type-card__art {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 10; margin-bottom: 24px;
  border-radius: calc(var(--radius-lg) - 8px);
  background:
    linear-gradient(to right, rgba(20, 13, 13, .05) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(to bottom, rgba(20, 13, 13, .05) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--paper-2);
}
/* Out of flow so every art box stays exactly 16:10 whatever the image's own proportions. */
.type-card__art img { position: absolute; inset: 0; margin: auto; width: 70%; height: 62%; object-fit: contain; }
.type-card h3, .type-card p { padding-inline: 16px; }
.type-card h3 { font-size: 1.5rem; letter-spacing: -.03em; margin-bottom: 8px; }
.type-card p { color: var(--muted); font-size: .96875rem; line-height: 1.55; }
@media (max-width: 999px) { .type-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) {
  .type-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 24px;
    scrollbar-width: none;
  }
  .type-grid::-webkit-scrollbar { display: none; }
  .type-card { scroll-snap-align: start; }
}

/* ---------- Testimonials ----------
   A solid colour band with faint vertical wordmark rails that fade out behind the centre, and two rows
   of review cards auto-scrolling in opposite directions (pure CSS, same technique as .marquee). */
.testimonials {
  --t-bg: var(--orange);
  position: relative;
  padding: clamp(80px, 8.8vw, 120px) 0 clamp(72px, 8vw, 110px);
  overflow: hidden;
  color: var(--ink);
  background-color: var(--t-bg);
}
.testimonials :focus-visible { outline-color: var(--ink); }

.testimonials__rails {
  --rail-gap: .036em;
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  width: min(1440px, 100%);
  margin-inline: auto;
  padding-inline: var(--rail-gap);
  font-size: clamp(70px, 9vw, 132px);
  font-weight: 900;
  letter-spacing: -.02em;
  pointer-events: none;
}
.testimonials__rails::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  z-index: 1;
  width: min(1440px, 100%);
  background: linear-gradient(90deg, rgb(247 153 32 / 0), var(--t-bg) 40%, var(--t-bg) 60%, rgb(247 153 32 / 0));
  transform: translate(-50%);
}
.testimonials__rails-group { display: flex; gap: var(--rail-gap); }
.testimonials__rail {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  width: .8em;
  overflow: hidden;
  line-height: .8;
  opacity: .06;
  user-select: none;
}
.testimonials__rail span { flex-shrink: 0; width: max-content; writing-mode: vertical-rl; }
.testimonials__rail.is-flipped span { transform: rotate(180deg); }
.testimonials__rail.is-desktop-only { display: none; }
@media (min-width: 768px) { .testimonials__rail.is-desktop-only { display: flex; } }

.testimonials__heading {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.035em;
  text-align: center;
}
/* Two rows of review cards, each an infinite CSS marquee (content duplicated once, looping at -50%),
   scrolling in opposite directions. Same technique as the services .marquee near the hero. */
.t-rows {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
  margin-top: clamp(32px, 3.6vw, 48px);
}
.t-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.t-row__track {
  display: flex;
  width: max-content;
  gap: clamp(14px, 1.6vw, 20px);
  animation: t-scroll 46s linear infinite;
}
.t-row--reverse .t-row__track { animation-direction: reverse; }
@keyframes t-scroll { to { transform: translateX(-50%); } }

.t-card {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 16px;
  width: clamp(240px, 26vw, 320px);
  margin: 0;
  padding: 20px 22px;
  border: 1.5px solid rgb(20 13 13 / .16);
  border-radius: var(--radius);
  background: rgb(20 13 13 / .05);
}
.t-card p {
  margin: 0;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.01em;
}
.t-card footer { display: flex; flex-direction: column; gap: 2px; }
.t-card cite {
  font-style: normal;
  font-size: .8125rem;
  font-weight: 900;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.t-card footer span { font-size: .8125rem; color: rgb(20 13 13 / .64); }

.testimonials__cta { position: relative; z-index: 1; margin-top: clamp(32px, 3.6vw, 48px); text-align: center; }
.testimonials__cta .btn { box-shadow: 0 12px 24px -10px rgb(20 13 13 / .45); }

@media (max-width: 767px) {
  .testimonials__heading { padding: 0 var(--gutter); }
  .t-card { width: clamp(220px, 78vw, 300px); }
}

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 20px); align-items: stretch; }
.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.4vw, 32px);
  border-radius: var(--radius-lg);
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  color: #fff;
}
.plan__label { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-on-ink); }
.plan__name { font-size: 1.25rem; letter-spacing: -.02em; margin-top: 6px; }
.plan__price {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 18px;
  font-size: clamp(3rem, 4.6vw, 4rem); font-weight: 800; letter-spacing: -.06em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan__currency { font-size: .5em; align-self: flex-start; margin-top: .15em; margin-right: -.2em; letter-spacing: 0; }
.plan__was { font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; color: var(--muted-on-ink); text-decoration-thickness: 1.5px; }
.plan__desc { margin-top: 14px; color: var(--muted-on-ink); font-size: .96875rem; line-height: 1.5; min-height: 3em; }
.plan__specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  margin-block: 22px 20px;
  border-radius: 14px; overflow: hidden;
  background: var(--ink-3);
  border: 1px solid var(--ink-3);
}
.plan__specs li { padding: 10px 12px; background: var(--ink-2); font-size: .8125rem; color: var(--muted-on-ink); line-height: 1.3; }
.plan__specs strong { display: block; color: #fff; font-size: 1rem; font-weight: 700; }
.plan__specs li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.plan__list { display: grid; gap: 10px; margin-bottom: 28px; flex: 1; align-content: start; }
.plan__list li { position: relative; padding-left: 26px; font-size: .9375rem; line-height: 1.45; }
.plan__list li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  color: var(--orange);
}
.plan__badge {
  position: absolute; top: 20px; right: 20px;
  padding: 6px 12px; border-radius: 999px;
  background: #fff; color: var(--ink);
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
}
.plan__badge--ink { background: var(--ink); color: #fff; }
/* The recommended plan's badge sits on the card's top edge, ringed in the page ink so it reads as cut out of the card. */
.plan--featured .plan__badge {
  top: 0; left: 50%; right: auto;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px 10px 14px;
  font-size: .8125rem; font-weight: 600; letter-spacing: .1em; white-space: nowrap;
  box-shadow: 0 0 0 5px var(--ink), 0 12px 28px -8px rgba(252, 2, 88, .6);
}
.plan--featured .plan__badge .icon { font-size: 1.2em; color: var(--grad-b); }

.plan--featured, .plan--gold { border: 0; color: var(--ink); }
.plan--featured { background: var(--grad); }
.plan--gold { background: var(--orange); }
.plan--featured .plan__label, .plan--gold .plan__label,
.plan--featured .plan__desc, .plan--gold .plan__desc,
.plan--featured .plan__was, .plan--gold .plan__was { color: var(--ink); }
.plan--featured .plan__specs, .plan--gold .plan__specs { background: rgba(20, 13, 13, .14); border-color: rgba(20, 13, 13, .14); }
.plan--featured .plan__specs li, .plan--gold .plan__specs li { background: rgba(255, 255, 255, .22); color: var(--ink); }
.plan--featured .plan__specs strong, .plan--gold .plan__specs strong { color: var(--ink); }
.plan--featured .plan__list li::before, .plan--gold .plan__list li::before { color: var(--ink); }

.pricing__note { margin-top: 28px; text-align: center; font-size: .875rem; color: var(--muted-on-ink); }
.pricing__note a { color: #fff; }

/* Two columns put the featured plan in row 2, so the row gap has to clear its edge badge. */
@media (max-width: 999px) { .plans { grid-template-columns: repeat(2, 1fr); row-gap: 40px; } }
@media (max-width: 679px) {
  .plans {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding: 32px var(--gutter) 8px;
    scrollbar-width: none;
  }
  .plans::-webkit-scrollbar { display: none; }
  .plan { scroll-snap-align: start; }
}
.plans-hint { display: none; }
@media (max-width: 679px) {
  .plans-hint { display: block; margin-top: 14px; text-align: center; font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-on-ink); }
}

/* Special offer */
.offer {
  position: relative; overflow: hidden;
  display: grid; gap: clamp(32px, 4vw, 56px);
  margin-top: clamp(64px, 8vw, 112px);
  padding: clamp(28px, 5vw, 64px);
  border-radius: var(--radius-lg);
  background: var(--grad);
  color: var(--ink);
}
.offer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(115deg, transparent 20%, #000);
  mask-image: linear-gradient(115deg, transparent 20%, #000);
}
.offer > * { position: relative; }
@media (min-width: 1000px) { .offer { grid-template-columns: 5fr 7fr; align-items: center; } }
.offer__title { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; letter-spacing: -.038em; line-height: 1; text-wrap: balance; }
.offer__price { margin-top: 24px; font-size: clamp(3.5rem, 7vw, 5.5rem); font-weight: 800; letter-spacing: -.06em; line-height: .9; color: #fff; }
.offer__price .plan__currency { margin-right: -.1em; }
.offer__desc { margin-block: 16px 28px; font-size: 1.0625rem; color: var(--ink); max-width: 26em; }
.offer__badges { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.offer__badges li { display: inline-flex; align-items: center; gap: 6px; }
.offer__cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  align-self: stretch;
  border-radius: var(--radius); overflow: hidden;
  background: var(--line);
  box-shadow: 0 30px 60px -30px rgba(70, 8, 18, .5);
}
.offer__col { padding: 24px; background: #fff; }
.offer__col--wide { grid-column: 1 / -1; }
.offer__col--wide ul { columns: 2; column-gap: 28px; }
.offer__col h4 { font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; color: var(--muted); }
.offer__col li { position: relative; padding-left: 18px; margin-bottom: 8px; font-size: .9375rem; line-height: 1.4; break-inside: avoid; }
.offer__col li::before { content: ""; position: absolute; left: 0; top: .45em; width: 7px; height: 7px; background: var(--grad); }
@media (max-width: 599px) {
  .offer__cols { grid-template-columns: 1fr; }
  .offer__col--wide ul { columns: 1; }
}
/* Wide screens: text beside the illustration, features as a full-width strip below */
@media (min-width: 1000px) {
  .offer__cols { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
  .offer__col--wide { grid-column: span 2; }
}

/* Launch kit illustration */
.offer__art { width: 100%; max-width: 600px; justify-self: center; }
.kit { display: block; width: 100%; height: auto; overflow: visible; }
.kit__url { font-family: var(--mono); font-size: 9px; fill: var(--muted); }
.kit__badge { font-family: var(--mono); font-size: 7px; font-weight: 600; fill: #fff; }
.kit__labels text { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink); }
@media (max-width: 599px) { .kit__labels { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .kit__float { animation: kit-float 7s var(--ease) infinite alternate; }
  .kit__float--b { animation-duration: 8s; animation-delay: -3s; }
  .kit__float--c { animation-duration: 6s; animation-delay: -1.5s; }
}
@keyframes kit-float { from { transform: translateY(-5px); } to { transform: translateY(5px); } }

/* ---------- FAQ ---------- */
.faq__list { border-top: 1px dashed var(--line); }
.faq__item { border-bottom: 1px dashed #D9CEC6; }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem); font-weight: 600; letter-spacing: -.02em;
  cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--grad-a); }
.faq__icon {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--paper-2); color: var(--ink); font-size: 1rem;
  transition: transform .3s var(--ease), background-color .2s, color .2s;
}
.faq__item[open] .faq__icon { transform: rotate(45deg); background: var(--ink); color: #fff; }
.faq__item p { padding: 0 60px 26px 0; color: var(--muted); line-height: 1.65; }
.faq__more { margin-top: 32px; text-align: center; color: var(--muted); }
.faq__more .text-link { color: var(--ink); }

/* ---------- Contact ---------- */
.contact__layout { display: grid; gap: clamp(40px, 5vw, 72px); }
@media (min-width: 1000px) { .contact__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.contact__info .lede { margin-top: 24px; }
.contact__list { display: grid; gap: 4px; margin-top: 40px; }
.contact__list li {
  display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start;
  padding: 16px 0; border-top: 1px solid var(--line);
  font-size: 1.0625rem;
}
.contact__list li:last-child { border-bottom: 1px solid var(--line); }
.contact__list .icon {
  width: 44px; height: 44px; padding: 11px; border-radius: 12px;
  background: #fff; color: var(--grad-a); box-shadow: var(--shadow-sm);
}
.contact__list a { font-weight: 600; text-decoration: none; }
.contact__list a:hover { text-decoration: underline; text-underline-offset: .2em; }
.contact__k { display: block; font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; font-size: .875rem; color: var(--muted); }
.trust li { display: inline-flex; align-items: center; gap: 6px; }
.trust .icon { color: var(--ink); }

.form-card {
  padding: clamp(24px, 3.4vw, 44px);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow);
  scroll-margin-top: calc(var(--header-h) + 32px);
}
.form-card__title { font-size: 1.5rem; letter-spacing: -.03em; margin-bottom: 24px; }
.enquiry {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 20px; padding: 10px 10px 10px 16px;
  border-radius: 14px; background: var(--paper-2);
  font-size: .9375rem;
  animation: pop .35s var(--ease);
}
.enquiry::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--grad); }
.enquiry span { flex: 1; }
.enquiry__clear { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #fff; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 599px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: grid; gap: 8px; margin-bottom: 0; min-width: 0; }
.form-card > .field, .field--services { margin-top: 18px; }
.field label, .field legend { font-size: .875rem; font-weight: 600; }
.req { color: var(--rose); }
.field__opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 16px;
  border: 1.5px solid var(--line); border-radius: 14px;
  background: #fff;
  font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 112px; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: #756A67; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #D2C6BE; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(239, 90, 26, .18); }
.field [aria-invalid="true"] { border-color: #C8102E; background: #FFF7F7; }
.field__error { min-height: 0; font-size: .8125rem; font-weight: 600; color: #B00E28; }
.field__error:empty { display: none; }
.select { position: relative; }
.select select { appearance: none; padding-right: 44px; }
.select::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; pointer-events: none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
}

.field--services { border: 0; padding: 0; margin-inline: 0; }
.field--services legend { margin-bottom: 10px; padding: 0; }
.service-options { display: flex; flex-wrap: wrap; gap: 8px; }
.service-option { position: relative; }
.service-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.service-option span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border: 1.5px solid var(--line); border-radius: 999px;
  font-size: .875rem; font-weight: 500; cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}
.service-option span:hover { border-color: var(--ink); }
.service-option input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.service-option input:focus-visible + span { outline: 3px solid var(--grad-a); outline-offset: 2px; }

.consent {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px;
  margin-top: 20px;
  font-size: .8125rem; line-height: 1.55; color: var(--muted);
  cursor: pointer;
}
.consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--grad-a); }
.consent a { color: var(--ink); font-weight: 600; }
#cf-consent-err { margin-top: 6px; }
.form-card [data-contact-submit] { margin-top: 24px; }
.form-card__status { min-height: 1.5em; margin-top: 14px; font-weight: 600; }
.form-card__status.is-success { color: #13703A; }
.form-card__status.is-error { color: #B00E28; }
.form-card__fine { margin-top: 4px; font-size: .8125rem; color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer {
  --cell: 88px;
  --spot-x: 50%;
  --spot-y: 34%;
  position: relative; overflow: hidden;
  padding-block: clamp(96px, 12vw, 160px) 40px;
  background: var(--ink); color: #fff;
}
/* Pixel grid behind the footer. Four layers share one geometry, so every lit line lands exactly
   on a resting one: the grid itself, a beam that sweeps across it now and then, a pointer
   spotlight (main.js reports --spot-x / --spot-y, the fade and the disc are CSS), and a handful
   of cells that light up on their own - those are what keeps it moving on touch, and for a
   cursor that is sitting still. Like the hero, a line falls on the horizontal centre so
   .footer-pixel can snap to it: background-position percentages resolve against the box minus
   one tile, so half a cell back from 50% puts a tile edge dead centre. */
.site-footer__grid {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 78% 92% at 50% 32%, #000 26%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 92% at 50% 32%, #000 26%, transparent 100%);
}
.site-footer__grid-lines,
.site-footer__grid-beam,
.site-footer__grid-glow {
  position: absolute; inset: 0;
  background-size: var(--cell) var(--cell);
  background-position: calc(50% - var(--cell) / 2) 0;
}
.site-footer__grid-lines {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px);
}
/* The beam is the same grid in brand orange, shown through a diagonal band of mask that travels
   right to left. It crosses in the first third of the cycle and rests for the other two, so it
   reads as an occasional pass of light rather than a loop. */
.site-footer__grid-beam {
  background-image:
    linear-gradient(to right, rgba(247, 153, 32, .22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(247, 153, 32, .22) 1px, transparent 1px);
  -webkit-mask-image: linear-gradient(105deg, transparent 12%, #000 50%, transparent 88%);
  mask-image: linear-gradient(105deg, transparent 12%, #000 50%, transparent 88%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 30% 100%; mask-size: 30% 100%;
  -webkit-mask-position: 150% 0; mask-position: 150% 0;
  animation: footer-beam 15s linear infinite;
}
@keyframes footer-beam {
  0% { -webkit-mask-position: 150% 0; mask-position: 150% 0; }
  38%, 100% { -webkit-mask-position: -55% 0; mask-position: -55% 0; }
}
/* A fixed-size disc moved by background-position and mask-position rather than a full-width
   gradient rebuilt around the cursor: the browser repaints the 520px the disc covers instead of
   the whole footer on every pointer frame. */
.site-footer__grid-glow {
  --glow: 260px;
  background-image:
    radial-gradient(closest-side, rgba(239, 90, 26, .16), rgba(239, 90, 26, .04) 55%, transparent),
    linear-gradient(to right, rgba(255, 240, 228, .42) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 240, 228, .42) 1px, transparent 1px);
  background-repeat: no-repeat, repeat, repeat;
  background-size:
    calc(var(--glow) * 2) calc(var(--glow) * 2),
    var(--cell) var(--cell),
    var(--cell) var(--cell);
  background-position:
    calc(var(--spot-x) - var(--glow)) calc(var(--spot-y) - var(--glow)),
    calc(50% - var(--cell) / 2) 0,
    calc(50% - var(--cell) / 2) 0;
  -webkit-mask-image: radial-gradient(closest-side, #000, rgba(0, 0, 0, .62) 45%, transparent);
  mask-image: radial-gradient(closest-side, #000, rgba(0, 0, 0, .62) 45%, transparent);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: calc(var(--glow) * 2) calc(var(--glow) * 2);
  mask-size: calc(var(--glow) * 2) calc(var(--glow) * 2);
  -webkit-mask-position: calc(var(--spot-x) - var(--glow)) calc(var(--spot-y) - var(--glow));
  mask-position: calc(var(--spot-x) - var(--glow)) calc(var(--spot-y) - var(--glow));
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.site-footer.is-lit .site-footer__grid-glow { opacity: 1; }
/* Same --x / --y snapping as the hero's .pixel; --at offsets each one into a different part of
   the shared cycle, so they never pulse in unison. */
.footer-pixel {
  position: absolute;
  left: calc(50% + var(--x) * var(--cell) + 1px);
  top: calc(var(--y) * var(--cell) + 1px);
  width: calc(var(--cell) - 1px); height: calc(var(--cell) - 1px);
  background: rgba(247, 153, 32, .045);
  box-shadow: inset 0 0 0 1px rgba(247, 153, 32, .45);
  opacity: 0;
  animation: footer-pixel 14s var(--ease) infinite;
  animation-delay: var(--at, 0s);
}
.footer-pixel--soft { background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
@keyframes footer-pixel {
  0%, 6% { opacity: 0; transform: scale(.7); }
  14%, 26% { opacity: 1; transform: none; }
  36%, 100% { opacity: 0; transform: scale(.7); }
}
.site-footer__inner { position: relative; display: grid; justify-items: center; text-align: center; }
.site-footer__logo { width: min(420px, 78vw); margin-inline: auto; }
/* Footer logo as cursor-driven particles (assets/js/particle-logo.js). The <img> stays for layout and alt text. */
.particle-logo { position: relative; display: block; width: min(420px, 78vw); margin-inline: auto; }
.particle-logo .site-footer__logo { width: 100%; }
.particle-logo.is-live .site-footer__logo { opacity: 0; }
/* A canvas won't stretch between inset edges like a div, so it gets an explicit size */
.particle-logo__canvas {
  --bleed: var(--particle-bleed, 120px);
  position: absolute; top: calc(var(--bleed) * -1); left: calc(var(--bleed) * -1); z-index: 1;
  display: block; width: calc(100% + var(--bleed) * 2); height: calc(100% + var(--bleed) * 2);
  pointer-events: none;
}
.site-footer__title { margin-top: 40px; max-width: 14em; font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.1; text-wrap: balance; }
.site-footer__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.site-footer__actions .btn--outline-light { gap: 10px; }
/* Link columns (the sitemap): services, company, start a project, contact */
.site-footer__cols {
  display: grid; grid-template-columns: 1.15fr 1fr 1fr 1.15fr; gap: 40px 32px;
  width: 100%; margin-top: clamp(64px, 8vw, 104px); padding-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid var(--ink-3);
  text-align: left;
}
.site-footer__h { margin-bottom: 18px; font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-on-ink); }
.site-footer__col ul { display: grid; gap: 10px; }
.site-footer__col li { font-size: .9375rem; line-height: 1.45; color: var(--muted-on-ink); }
.site-footer__col a, .site-footer__link {
  padding: 0; border: 0; background: none;
  font: inherit; font-weight: 500; color: #fff; text-align: left; text-decoration: none;
  transition: color .2s;
}
.site-footer__col a:hover, .site-footer__link:hover { color: var(--orange); }
.site-footer__col .site-footer__social { display: flex; gap: 10px; margin-top: 24px; }
@media (max-width: 999px) { .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .site-footer__cols { grid-template-columns: 1fr; } }
.site-footer__social { display: flex; gap: 10px; margin-top: 20px; }
.site-footer__social a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--ink-3); font-size: 1.15rem; color: var(--muted-on-ink);
  transition: color .2s, border-color .2s, background-color .2s;
}
.site-footer__social a:hover { color: #fff; border-color: #fff; }
.site-footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  width: 100%; margin-top: 48px; padding-top: 28px;
  border-top: 1px solid var(--ink-3);
  font-size: .8125rem; color: var(--muted-on-ink);
}
.site-footer__legal ul { display: flex; gap: 20px; }
.site-footer__legal a { text-decoration: none; }
.site-footer__legal a:hover { color: #fff; text-decoration: underline; }
.dmca-badge {
  display: inline-flex; align-items: stretch; height: 22px;
  border-radius: 4px; overflow: hidden;
  font-family: var(--mono); font-size: .625rem; font-weight: 600; letter-spacing: .05em; line-height: 1;
}
.dmca-badge__mark, .dmca-badge__text { display: flex; align-items: center; padding: 0 8px; }
.dmca-badge__mark { background: #35bbcb; color: #fff; }
.dmca-badge__text { background: var(--ink-3); color: #fff; }

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .plans .reveal:nth-child(3n + 2), .js .type-grid .reveal:nth-child(3n + 2) { transition-delay: .08s; }
.js .plans .reveal:nth-child(3n + 3), .js .type-grid .reveal:nth-child(3n + 3) { transition-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .marquee__track, .t-row__track { animation: none; }
  .site-footer__grid-beam, .footer-pixel { display: none; }
}

@media print {
  .site-header, .hero-media, .hero__fade, .hero-label, .hero-strip, .marquee, .menu-toggle { display: none; }
}