/* =========================================================
   Trendzeta — Digital Marketing Agency
   ========================================================= */

:root {
  --orange: #ff5f05;   /* from the logo */
  --orange-600: #e8460d;
  --orange-soft: #fff0e9;
  --ink: #0e0e10;
  --ink-2: #1b1b1f;
  --text: #2a2a2e;
  --muted: #6e6e77;
  --line: #e9e9ec;
  --surface: #ffffff;
  --page: #f6f6f7;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 28px;
  --shadow: 0 1px 2px rgba(15, 15, 20, 0.04), 0 12px 32px -14px rgba(15, 15, 20, 0.16);

  --wrap: 1120px;
  --font: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--page);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

.i,
svg[viewBox] {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.i { width: 16px; height: 16px; flex-shrink: 0; }

.page { overflow: hidden; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Image slots ---------- */
.media {
  position: relative;
  overflow: hidden;
  background: #2a2a2d;
}
.media::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.28);
  pointer-events: none;
}
.media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.media:has(> img)::after { content: none; }

/* ---------- Pills ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 22px;
  border-radius: 999px;
  border: 0;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.pill--lg { height: 48px; padding: 0 26px; font-size: 15px; }
.pill--light { background: #fff; color: var(--ink); }
.pill--light:hover { background: #e9e9ec; color: var(--ink); }
.pill--orange { background: var(--orange); color: var(--ink); }  /* ink on orange: 6.2:1 */
.pill--orange:hover { background: #ff7040; }
.pill--glass {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 24px -8px rgba(0, 0, 0, 0.45);
}
.pill--glass:hover { background: rgba(255, 255, 255, 0.26); }
.pill--outline { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.pill--outline:hover { border-color: var(--ink); }
.pill .i { transition: transform 0.2s; }
.pill:hover .i { transform: translateX(3px); }

/* ---------- Section scaffolding ---------- */
.section { padding: 110px 0 0; }

.label {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}
.label--light { color: rgba(255, 255, 255, 0.6); }

h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 36px;
}
.head__text {
  max-width: 340px;
  font-size: 14px;
  color: var(--muted);
}
.head--center { flex-direction: column; align-items: center; text-align: center; gap: 0; }
.head__sub { margin-top: 12px; max-width: 480px; font-size: 14px; color: var(--muted); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  color: #fff;
  background: var(--ink);
  overflow: hidden;
}
/* Full-screen photo with a flat dark overlay */
.hero__bg { position: absolute; inset: 0; background: #1c1c1f; }
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(10, 10, 12, 0.55);
}
.hero__bottom {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  padding: 40px 40px 48px;
}
.hero__copy { max-width: 640px; }

/* Glass proof card, bottom-right */
.hero__card {
  flex-shrink: 0;
  width: 280px;
  padding: 8px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 24px 60px -16px rgba(0, 0, 0, 0.6);
  transition: background 0.2s, transform 0.3s;
}
.hero__card:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-4px); }
.hero__thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
}
.hero__play {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--orange);
  color: #fff;
  transition: transform 0.2s;
}
.hero__play svg { width: 16px; height: 16px; margin-left: 2px; }
.hero__card:hover .hero__play { transform: scale(1.08); }
.hero__trust {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 6px 6px;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.85);
}
.hero__faces { display: flex; }
.hero__faces .media {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: #55555c;
}
.hero__faces .media + .media { margin-left: -8px; }


.badge-glass {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin-bottom: 22px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.badge-glass i,
.dash__live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.25);
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 20px;
}
.hero__eyebrow i { width: 6px; height: 6px; background: var(--orange); }
.hero h1 {
  font-size: clamp(40px, 4.8vw, 72px);
  text-wrap: balance;
  line-height: 0.96;
  font-weight: 500;
  letter-spacing: -0.04em;
  margin-bottom: 18px;
}
.hero__text {
  max-width: 460px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 28px;
}
.hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* =========================================================
   SERVICES — large edge-to-edge cards
   ========================================================= */
.h2-xl { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -0.035em; }

.bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 20px;
  max-width: 1680px;
  margin: 0 auto;
}
.tile {
  aspect-ratio: 1 / 0.98;
  border-radius: var(--r-lg);
  color: #fff;
}
.tile--full { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
.tile:has(img)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.6));
}
.tile__text {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 36px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tile__text p { font-size: 14px; color: rgba(255, 255, 255, 0.8); margin-bottom: 4px; }
.tile__text h3 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 18px;
}
.tile__actions { display: flex; gap: 8px; }
.pill--sm { height: 36px; padding: 0 18px; font-size: 13px; }

.extras {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.extras li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 13px;
  color: var(--text);
}
.extras .i { color: var(--orange); }

/* =========================================================
   WORK — centred carousel with peeking neighbours
   ========================================================= */
.carousel { --slide-w: min(1180px, 84vw); }
.carousel__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0 calc((100% - var(--slide-w)) / 2);
}
.carousel__track::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 var(--slide-w);
  aspect-ratio: 16 / 8.6;
  scroll-snap-align: center;
  border-radius: var(--r-lg);
  color: #fff;
  opacity: 0.45;
  transition: opacity 0.5s ease;
}
.slide.is-active { opacity: 1; }
.slide:has(img)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.6));
}
.chip {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.slide__foot {
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 32px;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: end;
  gap: 32px;
}
.slide__foot h3 {
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.slide__foot p { font-size: 14px; color: rgba(255, 255, 255, 0.72); margin-top: 6px; }
.slide__result { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.slide__result strong {
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
  color: #fff;
}
.slide__result span { font-size: 13px; color: rgba(255, 255, 255, 0.75); margin-top: 4px; }
.slide .pill { opacity: 0; transform: translateY(6px); transition: opacity 0.4s 0.15s, transform 0.4s 0.15s, background 0.2s, color 0.2s; }
.slide.is-active .pill { opacity: 1; transform: none; }

.carousel__controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}
.carousel__dots {
  display: flex;
  gap: 0;
  padding: 0 10px;
  border-radius: 999px;
  background: #ebebee;
}
/* Each dot is a 20x32 button; the visible 8px dot is drawn by ::before,
   the progress fill by ::after, so the tap area is bigger than the dot. */
.carousel__dots button {
  position: relative;
  width: 20px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  transition: width 0.4s ease;
}
.carousel__dots button::before,
.carousel__dots button.is-active::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 6px;
  height: 8px;
  border-radius: 999px;
}
.carousel__dots button::before { right: 6px; background: #b8b8bf; transition: background 0.3s; }
.carousel__dots button:hover::before { background: #9a9aa2; }
.carousel__dots button.is-active { width: 56px; }
.carousel__dots button.is-active::before { background: #cfcfd5; }
.carousel__dots button.is-active::after {
  width: 0;
  background: var(--ink);
  animation: dotfill var(--slide-time, 6s) linear forwards;
}
@keyframes dotfill { to { width: calc(100% - 12px); } }
.carousel.is-paused .carousel__dots button.is-active::after { animation-play-state: paused; }
.carousel.is-stopped .carousel__dots button.is-active::after { animation: none; width: calc(100% - 12px); }
.carousel__play {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: #ebebee;
  color: var(--ink);
  display: grid;
  place-items: center;
}
.carousel__play:hover { background: #dedee2; }
.carousel__play .i { width: 12px; height: 12px; }
.carousel__play .i--play,
.carousel.is-stopped .carousel__play .i--pause { display: none; }
.carousel.is-stopped .carousel__play .i--play { display: block; }

/* =========================================================
   PROCESS — dark panel with auto-advancing journey
   ========================================================= */
.pill--dark { background: var(--ink); color: #fff; }
.pill--dark:hover { background: #2e2e33; }

.panel {
  max-width: 1640px;
  margin: 0 20px;
  padding: 88px 56px 56px;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: #fff;
}
@media (min-width: 1680px) { .panel { margin: 0 auto; } }
.panel h2 { color: #fff; }

.journey { max-width: 1160px; margin: 0 auto; }
.journey__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 40px;
}
.jtab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 0 0 16px;
  border: 0;
  background: none;
  text-align: left;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.45);
  position: relative;
  transition: color 0.3s;
}
.jtab span { font-size: 12px; font-variant-numeric: tabular-nums; }
.jtab:hover,
.jtab.is-active { color: #fff; }
.jtab.is-active span { color: #fff; }
.jtab i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.jtab b {
  display: block;
  height: 100%;
  width: 0;
  background: var(--orange);
}
.jtab.is-done b { width: 100%; }
.jtab.is-active b { animation: fill var(--step-time, 7s) linear forwards; }
.journey.is-paused .jtab.is-active b { animation-play-state: paused; }
@keyframes fill { to { width: 100%; } }

.journey__body {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.journey__copy { transition: opacity 0.3s, transform 0.3s; }
.journey__copy.is-changing { opacity: 0; transform: translateY(8px); }
.journey__when {
  display: inline-block;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 20px;
}
.journey__copy h3 {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}
.journey__copy > p:not(.journey__when) { font-size: 15px; color: rgba(255, 255, 255, 0.65); max-width: 440px; }
.journey__copy ul { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.journey__copy li {
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.85);
}

/* Dashboard mock */
.dash {
  background: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: 22px;
  padding: 22px;
}
.dash small { font-size: 11px; color: rgba(255, 255, 255, 0.55); }
.dash__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.dash__top strong { display: block; font-size: 15px; font-weight: 500; }
.dash__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.dash__kpis div,
.dash__chart,
.dash__channels { background: rgba(255, 255, 255, 0.04); border-radius: var(--r-sm); padding: 12px; }
.dash__kpis strong { display: block; font-size: 19px; font-weight: 500; letter-spacing: -0.02em; margin: 2px 0; }
.dash__kpis em { font-style: normal; font-size: 11px; color: #3ddc84; }
.dash__chart { margin-bottom: 8px; }

/* Weekly leads — single series, one hue, 2px gap between bars */
.bars {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  align-items: end;
  height: 120px;
  margin-top: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.bar {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 5px;
  outline: none;
}
.bar i {
  display: block;
  width: 100%;
  height: var(--h);
  border-radius: 4px 4px 0 0;
  background: rgba(255, 95, 5, 0.55);
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s;
}
.dash.is-visible .bar i { transform: scaleY(1); }
.bar:last-child i,
.bar:hover i,
.bar:focus i { background: var(--orange); }
.bar b {
  position: absolute;
  bottom: calc(var(--h) + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 2;
}
.bar:hover b,
.bar:focus b { opacity: 1; }
.bar-axis {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  margin-top: 6px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
}
.dash__channels ul { margin-top: 8px; display: flex; flex-direction: column; gap: 7px; }
.dash__channels li {
  display: grid;
  grid-template-columns: 78px 1fr 40px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}
.dash__channels li span:last-child { text-align: right; color: rgba(255, 255, 255, 0.6); }
.track { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.track i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 4px;
  background: var(--orange);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s;
}
.dash.is-visible .track i { transform: scaleX(1); }

/* =========================================================
   PRICING
   ========================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.billing {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-top: 28px;
  border-radius: 999px;
  background: #ebebee;
}
.billing button {
  border: 0;
  background: transparent;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.billing button.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.billing em { font-style: normal; color: var(--ink); font-weight: 500; margin-left: 4px; }

/* Plan cards — tall image cards, text anchored bottom-left */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 20px;
}
.tier {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 760px;
  border-radius: var(--r-lg);
  color: #fff;
  isolation: isolate;
}
.tier { background: var(--ink-2); }
.tier:has(img)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.75) 70%);
}
.tier--growth { box-shadow: inset 0 0 0 2px var(--orange); }
.tier::after { place-items: start center; padding-top: 30%; }
.chip--orange { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.tier .chip { top: 24px; left: 24px; }

.tier__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 32px;
}
.tier__for { font-size: 14px; color: rgba(255, 255, 255, 0.72); }
.tier h3 {
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 2px 0 20px;
}
.tier__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.tier__price span {
  font-size: clamp(40px, 3.8vw, 56px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tier__price small { font-size: 14px; color: rgba(255, 255, 255, 0.65); }
.tier--growth .tier__price span { color: #fff; }
.tier__plus { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.5); margin-bottom: 12px; }
.tier ul { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.tier li { position: relative; padding-left: 26px; font-size: 14px; color: rgba(255, 255, 255, 0.9); }
.tier li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") no-repeat center / 10px;
}
.tier .pill { height: 48px; width: 100%; }

/* Compare table */
.compare { max-width: 1240px; margin-top: 28px; }
.compare summary { list-style: none; display: flex; justify-content: center; cursor: pointer; }
.compare summary::-webkit-details-marker { display: none; }
.compare summary .pill { pointer-events: none; }
.compare summary .pill::after {
  content: "";
  width: 10px;
  height: 10px;
  margin-left: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e0e10' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.3s;
}
.compare[open] summary .pill::after { transform: rotate(180deg); }
.compare__scroll {
  margin-top: 24px;
  overflow-x: auto;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.compare[open] .compare__scroll { animation: drop 0.35s ease; }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }
.compare table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.compare th,
.compare td { padding: 16px 24px; text-align: center; border-bottom: 1px solid var(--line); }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare thead th { font-size: 15px; font-weight: 500; color: var(--ink); padding-top: 24px; }
.compare thead th.is-featured { color: var(--orange); }
.compare tbody th { text-align: left; font-weight: 400; color: var(--muted); }
.compare td:nth-child(3) { background: #fcf7f4; }
.compare .yes { width: 18px; height: 18px; color: var(--orange); stroke-width: 2.5; vertical-align: middle; }
.compare .no { color: #c9c9cf; }

/* One-off projects — dark strip */
.addons {
  display: grid;
  grid-template-columns: 240px 1fr auto;
  align-items: center;
  gap: 32px;
  max-width: 1640px;
  margin: 16px 20px 0;
  padding: 28px 32px;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: #fff;
}
@media (min-width: 1680px) { .addons { margin: 16px auto 0; } }
.addons__head h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.addons__head p { font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.addons__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.addons__list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  transition: background 0.2s;
}
.addons__list li:hover { background: rgba(255, 255, 255, 0.1); }
.addons__list .i { width: 20px; height: 20px; color: var(--orange); margin-bottom: 8px; }
.addons__list strong { font-weight: 500; line-height: 1.3; }
.addons__list span { color: rgba(255, 255, 255, 0.55); }
.addons .pill--dark { background: #fff; color: var(--ink); }
.addons .pill--dark:hover { background: var(--orange); color: #fff; }

.plans__note { text-align: center; margin-top: 12px; font-size: 12px; color: var(--muted); }

/* =========================================================
   TESTIMONIALS — story card
   ========================================================= */
.story {
  display: grid;
  grid-template-columns: 5fr 7fr;
  max-width: 1240px;
  margin: 0 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
@media (min-width: 1280px) { .story { margin: 0 auto; } }
.story__media { min-height: 520px; }
.story__media img { transition: opacity 0.3s; }
.story__result {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 2;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  color: #fff;
  background: rgba(14, 14, 16, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.story__result strong { color: #fff; font-weight: 600; margin-right: 4px; }
.story__body {
  display: flex;
  flex-direction: column;
  padding: 56px 56px 40px;
}
.story__mark { width: 40px; height: 30px; color: var(--ink); margin-bottom: 28px; }
.story blockquote {
  flex: 1;
  margin: 0;
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: opacity 0.3s;
}
.story.is-changing blockquote,
.story.is-changing .story__who,
.story.is-changing .story__result,
.story.is-changing .story__media img { opacity: 0; }
.story__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 28px;
  margin-top: 40px;
  border-top: 1px solid var(--line);
}
.story__who { transition: opacity 0.3s; }
.story__who strong { display: block; font-size: 15px; font-weight: 500; color: var(--ink); }
.story__who small { font-size: 13px; color: var(--muted); }
.story__nav { display: flex; align-items: center; gap: 8px; }
.story__nav button:not(.dot) {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: background 0.2s, color 0.2s;
}
.story__nav button:not(.dot):hover { background: var(--ink); color: #fff; }
.dots { display: flex; gap: 6px; margin-right: 10px; }
.dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d5d5da;
  transition: width 0.3s, background 0.3s;
}
.dot.is-active { width: 24px; background: var(--ink); }

/* =========================================================
   FAQ — open list
   ========================================================= */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.2s;
}
.faq summary:hover { color: var(--muted); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ececef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e0e10' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") no-repeat center / 14px;
  transition: transform 0.3s, background-color 0.3s;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
  background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E");
}
.faq details p { padding: 0 56px 28px 0; font-size: 15px; color: var(--muted); max-width: 680px; }
.faq__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  font-size: 14px;
  color: var(--muted);
}
.faq__cta span { margin-right: 6px; }

/* =========================================================
   AUDIT CTA — full-bleed image
   ========================================================= */
.cta {
  display: grid;
  place-items: center;
  min-height: 620px;
  margin: 0 20px;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: #fff;
}
.cta:has(img)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.5);
}
.cta__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 80px 24px;
  max-width: 820px;
}
.cta h2 { color: #fff; margin-bottom: 16px; }
.cta__content > p { font-size: 16px; color: rgba(255, 255, 255, 0.78); max-width: 520px; margin-bottom: 32px; }
.cta__form {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: 620px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.cta__form input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 18px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 14px;
  outline: none;
}
.cta__form input + input { border-left: 1px solid rgba(255, 255, 255, 0.2); }
.cta__form input::placeholder { color: rgba(255, 255, 255, 0.55); }
.cta__form .pill { height: 44px; }

/* =========================================================
   FOOTER — oversized wordmark
   ========================================================= */
.footer {
  margin-top: 110px;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.6);
  padding: 72px 0 28px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  font-size: 14px;
  overflow: hidden;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer__brand p { max-width: 280px; margin-bottom: 20px; font-size: 16px; color: rgba(255, 255, 255, 0.8); }
.footer h3 { font-size: 13px; font-weight: 500; color: #fff; margin-bottom: 16px; }
.footer__grid > div > a,
.footer__grid > div > span { display: block; padding: 4px 0; }
.footer__grid > div > a:hover { color: #fff; }
.socials { display: flex; gap: 8px; }
.socials a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transition: background 0.2s;
}
.socials a:hover { background: rgba(255, 255, 255, 0.18); }
.socials svg { width: 15px; height: 15px; }
.footer__word {
  margin: 56px auto 32px;
  width: min(88%, 1240px);
  user-select: none;
  pointer-events: none;
}
.footer__word img { display: block; width: 100%; height: auto; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}
.footer__bottom nav { display: flex; gap: 24px; }
.footer__bottom a:hover { color: #fff; }

/* =========================================================
   Reveal on scroll
   ========================================================= */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .bar i, .track i { transition: none; }
  .jtab.is-active b { animation: none; width: 100%; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 960px) {
  .wrap { padding: 0 20px; }
  .hero__bottom { flex-direction: column; justify-content: flex-end; align-items: stretch; padding: 40px 20px 32px; }
  .hero__card { display: none; }
  .hero h1 { font-size: clamp(32px, 8.4vw, 64px); line-height: 1.02; }
  .hero h1 br { display: none; }
  .hero__copy { max-width: 600px; }
  .hero__text { font-size: clamp(14px, 3.6vw, 17px); max-width: 520px; }
  .hero__eyebrow { font-size: clamp(10px, 2.6vw, 12px); }

  .head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .head--center { align-items: center; gap: 0; }
  .section { padding-top: 80px; }

  .bento { grid-template-columns: 1fr; gap: 12px; padding: 0 12px; }
  .tile, .tile--full { aspect-ratio: 4 / 5; }
  .tile--full { grid-column: auto; }

  .carousel { --slide-w: 86vw; }
  .carousel__track { gap: 10px; }
  .slide { aspect-ratio: 4 / 5; }
  .slide__foot { left: 20px; right: 20px; bottom: 20px; grid-template-columns: 1fr; gap: 16px; }
  .slide__result { align-items: flex-start; text-align: left; order: -1; }
  .slide .pill { justify-self: start; }
  .chip { top: 16px; left: 16px; }

  .panel { margin: 0 12px; padding: 64px 20px 20px; }
  .journey__tabs { display: flex; overflow-x: auto; scrollbar-width: none; gap: 20px; margin: 0 -20px 32px; padding: 0 20px; }
  .journey__tabs::-webkit-scrollbar { display: none; }
  .jtab { flex: 0 0 auto; min-width: 150px; }
  .journey__body { grid-template-columns: 1fr; gap: 36px; }

  .plans {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 10px;
    padding: 4px 12px 8px;
  }
  .plans::-webkit-scrollbar { display: none; }
  .tier { flex: 0 0 86%; min-height: 620px; scroll-snap-align: center; }
  .tier--growth { order: -1; }
  .tier__body { padding: 24px; }
  .compare th, .compare td { padding: 14px 16px; }
  .compare tbody th { position: sticky; left: 0; background: var(--surface); }
  .addons { grid-template-columns: 1fr; gap: 16px; margin: 16px 12px 0; padding: 24px; }
  .addons__list { grid-template-columns: 1fr 1fr; }
  .addons .pill { justify-self: start; }

  .story { grid-template-columns: 1fr; margin: 0 12px; }
  .story__media { min-height: 0; aspect-ratio: 4 / 3.4; }
  .story__body { padding: 32px 24px 24px; }

  .faq details p { padding-right: 0; }

  .cta { margin: 0 12px; min-height: 560px; }
  .cta__form { flex-direction: column; border-radius: var(--r); padding: 8px; }
  .cta__form input { width: 100%; flex: none; }
  .cta__form input + input { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); }
  .cta__form .pill { width: 100%; margin-top: 4px; }

  .footer { margin-top: 80px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .hero h1 br, h2 br { display: none; }
  .hero__bg::after { display: none; }
  .dash { padding: 14px; }
  .dash__kpis strong { font-size: 15px; }
  .story__foot { flex-direction: column; align-items: flex-start; }
  .footer__bottom { flex-direction: column; gap: 10px; }
}

/* =========================================================
   PHONES — compact scale (≤ 600px)
   ========================================================= */
@media (max-width: 600px) {
  /* Rhythm */
  .section { padding-top: 64px; }
  .head { margin-bottom: 24px; }
  .h2-xl, h2 { font-size: 30px; letter-spacing: -0.03em; }
  .head__sub { font-size: 14px; }
  .label { font-size: 12px; }
  .pill--lg { height: 44px; font-size: 14px; }

  /* Hero — fits one screen */
  .hero__bottom { padding: 32px 16px 28px; }
  .hero__eyebrow { margin-bottom: 12px; }
  .hero__text { margin-bottom: 20px; }
  .hero__actions { flex-wrap: nowrap; }
  .hero__actions .pill { width: auto; flex: 1; padding: 0 14px; }

  /* Services */
  .bento { gap: 10px; padding: 0 10px; }
  .tile, .tile--full { aspect-ratio: 1 / 1; border-radius: 20px; }
  .tile__text { left: 16px; right: 16px; bottom: 20px; }
  .tile__text p { font-size: 12px; }
  .tile__text h3 { font-size: 22px; margin-bottom: 12px; }
  .tile__actions .pill { height: 32px; padding: 0 14px; font-size: 12px; }
  .extras { gap: 6px; margin-top: 18px; }
  .extras li { padding: 8px 12px; font-size: 12px; }

  /* Case studies */
  .carousel { --slide-w: 88vw; }
  .slide { aspect-ratio: 1 / 1.08; border-radius: 20px; }
  .slide__foot { left: 16px; right: 16px; bottom: 16px; gap: 10px; }
  .slide__foot h3 { font-size: 20px; }
  .slide__foot p { font-size: 12px; margin-top: 2px; }
  .slide__result strong { font-size: 30px; }
  .slide__result span { font-size: 12px; }
  .slide .pill { height: 32px; font-size: 12px; }
  .chip { top: 14px; left: 14px; font-size: 11px; padding: 4px 10px; }
  .carousel__controls { margin-top: 16px; }

  /* Process */
  .panel { margin: 0 10px; padding: 48px 16px 16px; border-radius: 20px; }
  .journey__tabs { margin: 0 -16px 24px; padding: 0 16px; gap: 16px; }
  .jtab { min-width: 128px; font-size: 13px; padding-bottom: 12px; }
  .journey__body { gap: 24px; }
  .journey__when { margin-bottom: 12px; }
  .journey__copy h3 { font-size: 20px; }
  .journey__copy > p:not(.journey__when) { font-size: 14px; }
  .journey__copy ul { margin-top: 16px; gap: 6px; }
  .journey__copy li { font-size: 12px; padding: 6px 12px; }
  .dash { padding: 12px; border-radius: 16px; }
  .dash__top { margin-bottom: 12px; }
  .dash__kpis div, .dash__chart, .dash__channels { padding: 10px; }
  .bars { height: 80px; margin-top: 16px; }
  .dash__channels li { grid-template-columns: 70px 1fr 32px; font-size: 11px; }

  /* Pricing */
  .billing { margin-top: 20px; }
  .plans { padding: 4px 10px 8px; }
  .tier { flex-basis: 84%; min-height: 0; border-radius: 20px; }
  .tier::after { padding-top: 18%; }
  .tier .chip { top: 16px; left: 16px; }
  .tier:has(img)::before { background: linear-gradient(180deg, transparent 8%, rgba(0, 0, 0, 0.8) 42%); }
  .tier__body { padding: 150px 20px 20px; }
  .tier__for { font-size: 13px; }
  .tier h3 { font-size: 28px; margin-bottom: 14px; }
  .tier__price { padding-bottom: 16px; margin-bottom: 16px; }
  .tier__price span { font-size: 34px; }
  .tier__plus { font-size: 11px; margin-bottom: 10px; }
  .tier ul { gap: 8px; margin-bottom: 20px; }
  .tier li { font-size: 13px; }
  .tier .pill { height: 44px; }
  .compare th, .compare td { padding: 12px; font-size: 13px; }
  .addons { margin: 12px 10px 0; padding: 20px 16px; border-radius: 20px; }
  .addons__head h3 { font-size: 18px; }
  .addons__list { gap: 6px; }
  .addons__list li { padding: 12px; font-size: 12px; }
  .addons__list .i { width: 18px; height: 18px; margin-bottom: 6px; }

  /* Client stories */
  .story { margin: 0 10px; border-radius: 20px; }
  .story__media { aspect-ratio: 1 / 0.8; }
  .story__result { left: 14px; bottom: 14px; font-size: 12px; padding: 8px 12px; }
  .story__body { padding: 24px 18px 18px; }
  .story__mark { width: 28px; height: 21px; margin-bottom: 16px; }
  .story blockquote { font-size: 18px; line-height: 1.4; }
  .story__foot { margin-top: 24px; padding-top: 18px; flex-direction: row; align-items: center; }
  .story__nav button:not(.dot) { width: 34px; height: 34px; }
  .dots { display: none; }

  /* FAQ */
  .faq summary { font-size: 16px; padding: 18px 0; gap: 16px; }
  .faq summary::after { width: 28px; height: 28px; }
  .faq details p { font-size: 14px; padding-bottom: 18px; }
  .faq__cta { margin-top: 28px; }

  /* Audit CTA */
  .cta { margin: 0 10px; min-height: 0; border-radius: 20px; }
  .cta__content { padding: 48px 16px; }
  .cta__content > p { font-size: 14px; margin-bottom: 24px; }
  .cta__form input { height: 44px; }

  /* Footer */
  .footer { margin-top: 64px; padding-top: 48px; border-radius: 20px 20px 0 0; }
  .footer__grid { gap: 24px; }
  .footer__brand p { font-size: 15px; }
  .footer__word { margin-top: 32px; }
}

/* =========================================================
   GLASS LAYER — one subtle recipe, used across the page
   ========================================================= */
:root {
  --glass-blur: blur(18px) saturate(160%);
  /* over photos & dark panels */
  --glass-dark-bg: rgba(255, 255, 255, 0.1);
  --glass-dark-border: 1px solid rgba(255, 255, 255, 0.2);
  --glass-dark-shine: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  /* on the light page */
  --glass-light-bg: rgba(255, 255, 255, 0.62);
  --glass-light-border: 1px solid rgba(255, 255, 255, 0.9);
  --glass-light-shine: inset 0 1px 0 #fff, 0 10px 30px -14px rgba(15, 15, 20, 0.18);
}

/* Dark glass — chips and panels sitting on photos or the dark sections */
.chip:not(.chip--orange),
.story__result,
.badge-glass,
.cta__form,
.journey__when,
.journey__copy li,
.dash__live,
.addons__list li {
  background: var(--glass-dark-bg);
  border: var(--glass-dark-border);
  box-shadow: var(--glass-dark-shine);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.dash {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.dash__kpis div,
.dash__chart,
.dash__channels { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.addons__list li:hover { background: rgba(255, 255, 255, 0.14); }

/* Light glass — controls and cards on the light page */
.billing,
.carousel__dots,
.carousel__play,
.extras li,
.pill--outline {
  background: var(--glass-light-bg);
  border: var(--glass-light-border);
  box-shadow: var(--glass-light-shine);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.pill--outline:hover { background: #fff; border-color: #fff; }
.billing button.is-active { box-shadow: 0 4px 12px -4px rgba(15, 15, 20, 0.18); }
.story,
.compare__scroll,
.faq__cta .pill { box-shadow: var(--glass-light-shine); }


/* =========================================================
   LANDING PAGE — compact phone scale (≤ 600px)
   Scoped to body.home; the hero is intentionally left as is.
   ========================================================= */
@media (max-width: 600px) {
  .home .section { padding-top: 52px; }
  .home .head { margin-bottom: 20px; }
  .home .h2-xl, .home .section h2 { font-size: 26px; }
  .home .head__sub { font-size: 13px; }
  .home .label { margin-bottom: 6px; }

  /* Services */
  .home .bento { gap: 8px; }
  .home .tile, .home .tile--full { aspect-ratio: 4 / 3.3; border-radius: 18px; }
  .home .tile__text { left: 14px; right: 14px; bottom: 14px; }
  .home .tile__text p { font-size: 11px; margin-bottom: 2px; }
  .home .tile__text h3 { font-size: 19px; margin-bottom: 10px; }
  .home .tile__actions { gap: 6px; }
  .home .tile__actions .pill { height: 36px; padding: 0 16px; font-size: 13px; }
  .home .extras { margin-top: 14px; }
  .home .extras li { padding: 7px 10px; font-size: 11px; }
  .home .extras .i { width: 13px; height: 13px; }

  /* Case studies */
  .home .slide { aspect-ratio: 1 / 0.92; border-radius: 18px; }
  .home .slide__foot { left: 14px; right: 14px; bottom: 14px; gap: 8px; }
  .home .slide__foot h3 { font-size: 17px; }
  .home .slide__foot p { font-size: 11px; }
  .home .slide__result strong { font-size: 26px; }
  .home .slide__result span { font-size: 11px; }
  .home .slide .pill { height: 30px; font-size: 11px; padding: 0 12px; }
  .home .carousel__controls { margin-top: 12px; }

  /* Process */
  .home .panel { padding: 36px 14px 12px; border-radius: 18px; }
  .home .journey__tabs { margin: 0 -14px 18px; padding: 0 14px; gap: 14px; }
  .home .jtab { min-width: 112px; font-size: 12px; padding-bottom: 10px; }
  .home .journey__body { gap: 18px; }
  .home .journey__when { font-size: 11px; margin-bottom: 10px; }
  .home .journey__copy h3 { font-size: 17px; margin-bottom: 8px; }
  .home .journey__copy > p:not(.journey__when) { font-size: 13px; }
  .home .journey__copy ul { margin-top: 12px; }
  .home .journey__copy li { font-size: 11px; padding: 5px 10px; }
  .home .dash { padding: 10px; border-radius: 14px; }
  .home .dash__top strong { font-size: 13px; }
  .home .dash__kpis { gap: 6px; }
  .home .dash__kpis div, .home .dash__chart, .home .dash__channels { padding: 8px; }
  .home .dash__kpis strong { font-size: 14px; }
  .home .bars { height: 64px; margin-top: 12px; }
  .home .dash__channels ul { gap: 5px; }

  /* Pricing */
  .home .billing { margin-top: 14px; }
  .home .tier { flex-basis: 80%; border-radius: 18px; }
  .home .tier .chip { top: 12px; left: 12px; }
  .home .tier__body { padding: 110px 16px 16px; }
  .home .tier__for { font-size: 12px; }
  .home .tier h3 { font-size: 24px; margin-bottom: 10px; }
  .home .tier__price { padding-bottom: 12px; margin-bottom: 12px; }
  .home .tier__price span { font-size: 30px; }
  .home .tier__price small { font-size: 12px; }
  .home .tier__plus { font-size: 10px; margin-bottom: 8px; }
  .home .tier ul { gap: 6px; margin-bottom: 16px; }
  .home .tier li { font-size: 12px; padding-left: 22px; }
  .home .tier li::before { width: 14px; height: 14px; background-size: 9px; }
  .home .tier .pill { height: 40px; font-size: 13px; }
  .home .compare { margin-top: 18px; }
  .home .compare summary .pill { height: 36px; font-size: 13px; }
  .home .addons { padding: 18px 14px; border-radius: 18px; }
  .home .addons__head h3 { font-size: 16px; }
  .home .addons__head p { font-size: 12px; }
  .home .addons__list li { padding: 10px; font-size: 11px; }
  .home .addons__list .i { width: 16px; height: 16px; margin-bottom: 4px; }
  .home .addons .pill { height: 38px; font-size: 13px; }

  /* Client story */
  .home .story { border-radius: 18px; }
  .home .story__media { aspect-ratio: 1 / 0.7; }
  .home .story__body { padding: 20px 16px 16px; }
  .home .story__mark { width: 22px; height: 17px; margin-bottom: 12px; }
  .home .story blockquote { font-size: 16px; line-height: 1.45; }
  .home .story__foot { margin-top: 18px; padding-top: 14px; }
  .home .story__who strong { font-size: 14px; }
  .home .story__who small { font-size: 12px; }
  .home .story__nav button:not(.dot) { width: 32px; height: 32px; }

  /* FAQ */
  .home .faq summary { font-size: 15px; padding: 14px 0; }
  .home .faq summary::after { width: 24px; height: 24px; background-size: 12px; }
  .home .faq details p { font-size: 13px; padding-bottom: 14px; }
  .home .faq__cta { margin-top: 20px; font-size: 13px; }

  /* Audit CTA */
  .home .cta { border-radius: 18px; }
  .home .cta__content { padding: 36px 14px; }
  .home .badge-glass { font-size: 11px; padding: 5px 10px; margin-bottom: 14px; }
  .home .cta__content > p { font-size: 13px; margin-bottom: 18px; }
  .home .cta__form { padding: 6px; }
  .home .cta__form input { height: 40px; font-size: 16px; }
  .home .cta__form .pill { height: 40px; }

  /* Footer */
  .home .footer { margin-top: 52px; padding-top: 40px; }
  .home .footer__grid { gap: 20px 16px; }
  .home .footer__brand p { font-size: 14px; margin-bottom: 14px; }
  .home .footer h3 { margin-bottom: 10px; }
  .home .footer__grid > div > a,
  .home .footer__grid > div > span { font-size: 13px; padding: 8px 0; }
}

/* =========================================================
   NAVBAR — full-width bar, shared by every page
   Active link = the orange square from the home hero eyebrow.
   ========================================================= */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  color: var(--ink);
  transition: color 0.3s;
}
/* The bar's background sits on this layer, not on .navbar itself, so
   nothing on .navbar can ever trap the fixed mobile menu inside it. */
.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--page);   /* solid from the start */
  transition: box-shadow 0.3s;
}
.navbar.is-scrolled::before { box-shadow: 0 1px 0 var(--line); }
.navbar__inner {
  display: flex;
  align-items: center;
  gap: 56px;
  max-width: 1440px;
  height: 72px;
  margin: 0 auto;
  padding: 0 40px;
}
.logo { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 44px; }
.logo img { display: block; width: auto; height: 18px; }

.nav { display: flex; gap: 32px; }
.nav a {
  position: relative;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(14, 14, 16, 0.55);
  transition: color 0.2s;
}
.nav a::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: var(--orange);
  transform: scale(0);
  transition: transform 0.2s;
}
.nav a:hover,
.nav a.is-current,
.nav a.is-active { color: var(--ink); }
.nav a.is-current::before,
.nav a.is-active::before { transform: scale(1); }
.nav__foot { display: none; }

.navbar__right { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.navbar__mail { font-size: 14px; color: rgba(14, 14, 16, 0.55); transition: color 0.2s; }
.navbar__mail:hover { color: var(--ink); }
.navbar__cta { height: 42px; padding: 0 20px; }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  background: none;
  color: inherit;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.burger span { width: 22px; height: 1.5px; background: currentColor; transition: transform 0.3s; }
.burger.is-open span:first-child { transform: translateY(3.75px) rotate(45deg); }
.burger.is-open span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* Home hero starts below the solid bar */
.home .hero { margin-top: 72px; min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); }
.hero__bottom { padding-top: 40px; }

@media (max-width: 1100px) { .navbar__mail { display: none; } }

@media (max-width: 960px) {
  .navbar__inner { height: 64px; padding: 0 20px; }
  .burger { display: flex; }
  .navbar.menu-open::before { background: var(--page); box-shadow: 0 1px 0 var(--line); }
  .nav {
    position: fixed;
    inset: 64px 0 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 20px 20px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--page);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    /* hide only after the fade-out; show at once so focus can move in */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s; }
  .nav > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--ink);
  }
  .nav > a::before { left: -14px; width: 7px; height: 7px; margin-top: -3.5px; }
  .nav__foot {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: 15px;
    color: var(--muted);
  }
  .nav__foot a { padding: 0; font-size: 15px; font-weight: 500; color: var(--ink); }
  .nav__foot a::before { display: none; }
  .nav__foot .nav__cta { height: 50px; margin-top: 20px; font-size: 16px; color: var(--ink); background: var(--orange); }
  .home .hero { margin-top: 64px; min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); }
  .hero__bottom { padding-top: 32px; }
}
@media (max-width: 600px) {
  .navbar__cta { display: none; }
  .logo img { height: 16px; }
  .hero__bottom { padding-top: 28px; }
}

/* =========================================================
   INNER PAGES — cards (About, Pricing, Contact)
   White page, large rounded grey cards, photo cards, one dark
   closing card. Groups of related facts share one card split by
   hairlines rather than each sitting in its own box.
   ========================================================= */

/* ---------- Type system ----------
   label   12  500 uppercase +0.08em  lh 1.3
   small   14  400                    lh 1.45
   body    16  400                    lh 1.6
   lead    17-20  400  -0.005em       lh 1.5
   h4      18-20  500  -0.015em       lh 1.3
   h3      22-28  500  -0.025em       lh 1.15
   quote   24-34  400  -0.02em        lh 1.25
   h2      30-48  500  -0.035em       lh 1.08
   number  40-64  500  -0.045em       lh 1
   display 40-80  500  -0.04em        lh 1
*/
.inner {
  --card: #f1f1f3;
  --rule: #dcdce0;
  --soft: #4d4d55;
  --muted: #66666f;          /* 5:1 on the grey cards */
  --r-card: 28px;
  --pad: 40px;
  --gap: 16px;
  --fs-label: 12px;
  --fs-sm: 14px;
  --fs-body: 16px;
  --fs-lead: clamp(17px, 1.4vw, 20px);
  --fs-h4: clamp(18px, 1.5vw, 20px);
  --fs-h3: clamp(22px, 2vw, 28px);
  --fs-quote: clamp(24px, 2.1vw, 30px);
  --fs-h2: clamp(30px, 3.4vw, 48px);
  --fs-num: clamp(40px, 3.9vw, 56px);
  --fs-display: clamp(40px, 5.6vw, 80px);
  background: #fff;
  font-size: var(--fs-body);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
.inner p,
.inner li { text-wrap: pretty; }

/* Type roles */
.plan__tag,
.plan__plus,
.spec thead th,
.clist small {
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ihero h1,
.cta-card h2 {
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.shead h2,
.office h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.c h3,
.plan__name,
.form h2 {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.cells strong,
.inner .faq summary,
.clist span {
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.stats strong,
.plan__price span {
  font-size: var(--fs-num);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.lead { font-size: var(--fs-lead); line-height: 1.5; letter-spacing: -0.005em; }
.cells span,
.terms,
.form > p,
.inner .billing button { font-size: var(--fs-sm); line-height: 1.45; }

/* Layout */
.inner .wrap { max-width: 1360px; padding: 0 32px; }
.inner .section { padding-top: 128px; }
.ihero { padding-top: 88px; }
.grid { display: grid; gap: var(--gap); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-hero { grid-template-columns: 1.1fr 1fr; }
.g-contact { grid-template-columns: 5fr 6fr; align-items: start; }

.inner a:focus-visible,
.inner button:focus-visible,
.inner summary:focus-visible,
.navbar a:focus-visible,
.navbar button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* Nav on white pages */
.inner .navbar::before { background: #fff; }
.inner .navbar.menu-open::before { background: #fff; }
@media (max-width: 960px) { .inner .nav { background: #fff; } }

/* Buttons: ink on light, white on dark, one orange moment per page */
.pill--ink { background: var(--ink); color: #fff; }
.pill--ink:hover { background: #2e2e33; }
.pill--line { background: transparent; color: var(--ink); border: 1px solid rgba(14, 14, 16, 0.22); }
.pill--line:hover { border-color: var(--ink); }
.pill--line-light { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); }
.pill--line-light:hover { border-color: #fff; }
.pill--brand { background: var(--orange); color: var(--ink); }  /* ink on orange: 6.2:1 */
.pill--brand:hover { background: #ff7040; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Section head */
.shead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; }
.shead p { max-width: 46ch; margin-top: 12px; color: var(--muted); }
.shead p a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.shead p a:hover { color: var(--muted); }

/* ---------- Cards ---------- */
.c {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--card);
  color: var(--ink);
}
.c--pad { padding: var(--pad); }
.c--ink { background: var(--ink); color: #fff; }

/* Photo only */
.c--photo { min-height: 440px; background: var(--card); }
.c--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Photo with type over it */
.c--media {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 480px;
  padding: var(--pad);
  background: #1b1b1f;
  color: #fff;
}
.c--media > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.c--media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.7) 100%);
}
a.c--media:hover > img { transform: scale(1.03); }
.c--media p { color: rgba(255, 255, 255, 0.86); }
.c--media h3 { color: #fff; }

/* One card, several cells split by hairlines (works at any column count) */
.cells {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: 1px;
  background: var(--rule);
}
.cells > li { display: flex; flex-direction: column; padding: 32px; background: var(--card); }
.cells strong { color: var(--ink); }
.cells span,
.cells p { margin-top: 6px; color: var(--muted); }
.stats > li { gap: 10px; }
.stats span { margin-top: 0; }
.team { --cols: 5; }
.team > li { justify-content: flex-start; }
.included p { margin-top: 8px; color: var(--soft); }
.included > li { justify-content: flex-start; }

/* Swipeable row of cards */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--gap)) / 4);
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail-nav { display: flex; gap: 8px; }
.rail-nav[hidden] { display: none; }
.rail-nav button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--card);
  color: var(--ink);
  transition: background 0.2s, opacity 0.2s;
}
.rail-nav button:hover:not(:disabled) { background: #e4e4e8; }
.rail-nav button:disabled { opacity: 0.35; cursor: default; }
.rail-nav .i { width: 18px; height: 18px; }

/* Hero */
.ihero__text { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 440px; }
.ihero h1 { color: var(--ink); }
.ihero .lead { max-width: 40ch; margin-bottom: 28px; color: var(--soft); }
.ihero--center { text-align: center; }
.ihero--center h1 { max-width: 14ch; margin-inline: auto; }
.ihero--center .lead { margin: 20px auto 28px; }

/* Closing card */
.cta-card {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: end;
  gap: 48px;
  padding: 72px var(--pad) var(--pad);
}
.cta-card h2 { max-width: 13ch; color: #fff; }
.cta-card p { max-width: 42ch; margin-bottom: 28px; font-size: var(--fs-lead); line-height: 1.5; color: rgba(255, 255, 255, 0.72); }

/* FAQ card */
.inner .faq { max-width: none; padding-top: 8px; padding-bottom: 8px; }
.inner .faq details { border-color: var(--rule); }
.inner .faq details:first-of-type { border-top: 0; }
.inner .faq details:last-of-type { border-bottom: 0; }
.inner .faq summary { padding: 24px 0; }
.inner .faq summary:hover { color: var(--muted); }
.inner .faq summary::after { background-color: #fff; }
.inner .faq details p { max-width: 64ch; font-size: var(--fs-body); line-height: 1.6; color: var(--soft); }

/* ---------- About ---------- */
.storyc { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.storyc__quote { font-size: var(--fs-quote); line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); }
.storyc__quote span { color: var(--muted); }
.storyc__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; color: var(--soft); }

/* ---------- Pricing ---------- */
.inner .billing { margin-top: 0; background: var(--card); border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.inner .billing button { color: var(--soft); }
.inner .billing button.is-active { color: var(--ink); }

.plan-grid { margin-top: 56px; text-align: left; }
.plan { --inset: 12px; display: flex; flex-direction: column; padding: var(--inset); }
/* nested corners: inner radius = card radius - inset */
.plan__img { aspect-ratio: 2 / 1; border-radius: calc(var(--r-card) - var(--inset)); }
.plan__body { display: flex; flex-direction: column; flex: 1; padding: 24px 16px 16px; }
.plan__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.plan__tag { padding: 5px 10px; border-radius: 999px; background: var(--orange); color: var(--ink); letter-spacing: 0.06em; }
.plan__for { margin-top: 4px; color: var(--muted); }
.plan__price { display: flex; align-items: baseline; gap: 8px; margin: 28px 0 24px; }
.plan__price small { font-size: var(--fs-sm); color: var(--muted); }
.plan .pill { width: 100%; height: 48px; }
.plan__plus { margin: 28px 0 4px; color: var(--muted); }
.plan ul { display: flex; flex-direction: column; }
.plan li { padding: 10px 0; border-bottom: 1px solid var(--rule); line-height: 1.45; }
.plan li:last-child { border-bottom: 0; }
.plan.c--ink .plan__for,
.plan.c--ink .plan__price small,
.plan.c--ink .plan__plus { color: rgba(255, 255, 255, 0.62); }
.plan.c--ink .plan__price span { color: #fff; }
.plan.c--ink li { color: rgba(255, 255, 255, 0.88); border-color: rgba(255, 255, 255, 0.12); }
.terms { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin-top: 24px; color: var(--muted); }
.terms span + span::before { content: "·"; margin: 0 12px; color: #b4b4bb; }

.spec-card { padding: 16px var(--pad) 24px; }
.spec-wrap { overflow-x: auto; }
.spec { width: 100%; min-width: 600px; border-collapse: collapse; }
.spec th,
.spec td { padding: 16px 16px 16px 0; text-align: left; line-height: 1.45; border-bottom: 1px solid var(--rule); }
.spec tbody tr:last-child > * { border-bottom: 0; }
.spec thead th { padding-top: 20px; color: var(--muted); }
.spec thead th.is-featured { color: var(--ink); }
.spec tbody th { width: 34%; font-weight: 400; color: var(--soft); }
.spec td { color: var(--ink); font-variant-numeric: tabular-nums; }
.spec .yes { width: 18px; height: 18px; color: var(--ink); stroke-width: 2.5; vertical-align: middle; }
.spec .no { color: #a9a9b0; }

.project { aspect-ratio: 3 / 4; min-height: 0; padding: 28px; }
.project h3 { max-width: 12ch; }
.project p { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.project p .i { width: 16px; height: 16px; transition: transform 0.25s; }
.project:hover p .i { transform: translateX(3px); }

/* ---------- Contact ---------- */
.contact-intro { display: flex; flex-direction: column; gap: 40px; }
.contact-intro .lead { margin-top: 20px; color: var(--soft); }
.reply { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: var(--fs-sm); color: var(--ink); }
.reply i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.clist { border-top: 1px solid var(--rule); }
.clist li > * {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.clist li:last-child > * { border-bottom: 0; padding-bottom: 0; }
.clist small { color: var(--muted); }
.clist span { font-weight: 400; color: var(--ink); overflow-wrap: anywhere; }
.clist .i { align-self: center; width: 16px; height: 16px; color: var(--muted); transition: transform 0.2s, color 0.2s; }
.clist a:hover .i { transform: translateX(3px); color: var(--ink); }

.form h2 { color: var(--ink); }
.form > p { margin: 8px 0 28px; color: var(--muted); }
.req { color: var(--ink); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field > span { font-size: var(--fs-sm); font-weight: 500; line-height: 1.3; }
.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: #fff;
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e0e10' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 14px;
}
.form select:has(option[value=""]:checked) { color: #76767f; }
.form select option { color: var(--ink); }
.form textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.form ::placeholder { color: #76767f; }
.form input:hover,
.form select:hover,
.form textarea:hover { border-color: var(--rule); }
.form input:focus,
.form select:focus,
.form textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(14, 14, 16, 0.08); }
.form input:user-invalid,
.form select:user-invalid,
.form textarea:user-invalid { border-color: #d93f3f; box-shadow: 0 0 0 3px rgba(217, 63, 63, 0.12); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
.form__foot small { font-size: var(--fs-sm); color: var(--muted); }


.office { min-height: 460px; }
.office h2 { margin-bottom: 6px; color: #fff; }
.office .actions { margin-top: 24px; }

/* ---------- Inner — tablet ---------- */
@media (max-width: 960px) {
  .inner { --r-card: 24px; --pad: 32px; }
  .inner .wrap { padding: 0 20px; }
  .inner .section { padding-top: 96px; }
  .ihero { padding-top: 80px; }
  .g-hero,
  .g-contact,
  .g-3,
  .g-2 { grid-template-columns: 1fr; }
  .ihero__text { min-height: 0; }
  .c--photo { min-height: 0; aspect-ratio: 4 / 3; }
  .c--media { min-height: 420px; }
  .cells { --cols: 2; }
  .team { --cols: 1; }
  .team > li { min-height: 0; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 16px; padding: 20px var(--pad); }
  .team span { margin-top: 0; text-align: right; }
  .rail { grid-auto-columns: 42%; }
  .plan-grid { max-width: 560px; margin-inline: auto; }
  .spec-card { padding: 8px 24px 16px; }
  .spec tbody th,
  .spec thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); }
  .storyc__meta { grid-template-columns: 1fr; gap: 12px; }
  .cta-card { grid-template-columns: 1fr; gap: 24px; padding-top: 56px; }
}

/* ---------- Inner — phones ----------
   Everything steps down about 10% from the clamp() minimums.
   Form fields stay at 16px so iOS doesn't zoom in on focus. */
@media (max-width: 600px) {
  .inner {
    --r-card: 18px;
    --pad: 20px;
    --gap: 8px;
    --fs-label: 11px;
    --fs-sm: 13px;
    --fs-body: 15px;
    --fs-lead: 16px;
    --fs-h4: 17px;
    --fs-h3: 20px;
    --fs-quote: 21px;
    --fs-h2: 26px;
    --fs-num: 34px;
    --fs-display: 36px;
  }
  .inner .wrap { padding: 0 12px; }
  .inner .section { padding-top: 64px; }
  .ihero { padding-top: 64px; }
  .ihero__text { gap: 28px; }
  .ihero .lead { margin-bottom: 22px; }
  .ihero--center .lead { margin: 14px auto 22px; }
  .inner .pill--lg { height: 42px; padding: 0 20px; font-size: 14px; }
  .ihero .actions .pill,
  .cta-card .actions .pill { flex: 1 1 auto; }
  .shead { margin-bottom: 16px; padding: 0 4px; }
  .shead > div { min-width: 0; }
  .shead p { margin-top: 8px; }
  .rail-nav button { width: 38px; height: 38px; }
  .rail-nav .i { width: 16px; height: 16px; }
  .c--media { min-height: 320px; }
  .cells > li { padding: 18px; }
  .stats > li { gap: 6px; }
  .included { --cols: 1; }
  .included > li { min-height: 0; }
  .team > li { flex-direction: column; gap: 2px; padding: 14px 18px; }
  .team span { text-align: left; }
  .storyc { gap: 28px; }
  .storyc__meta { gap: 10px; }
  .rail { grid-auto-columns: 66%; }
  .project { aspect-ratio: 4 / 5; padding: 18px; }
  .plan-grid { margin-top: 36px; }
  .plan { --inset: 8px; }
  .plan__img { aspect-ratio: 5 / 2; }
  .plan__body { padding: 18px 10px 10px; }
  .plan__price { margin: 20px 0 18px; }
  .plan .pill { height: 44px; }
  .plan__plus { margin-top: 22px; }
  .plan li { padding: 8px 0; }
  .terms { flex-direction: column; align-items: center; margin-top: 18px; }
  .terms span + span::before { content: none; }
  .spec-card { padding: 4px 14px 10px; }
  .spec { min-width: 0; table-layout: fixed; font-size: 13px; }
  .spec tbody th { width: 31%; }
  .spec th, .spec td { padding: 11px 8px 11px 0; vertical-align: top; overflow-wrap: anywhere; }
  .spec thead th { font-size: 10px; letter-spacing: 0.06em; }
  .spec tbody th,
  .spec thead th:first-child { position: static; }
  .spec .yes { width: 16px; height: 16px; }
  .contact-intro { gap: 28px; }
  .contact-intro .lead { margin-top: 14px; }
  .reply { margin-top: 12px; }
  .clist li > * { grid-template-columns: 72px 1fr auto; gap: 12px; padding: 12px 0; }
  .form > p { margin-bottom: 20px; }
  .fields { grid-template-columns: 1fr; gap: 14px; }
  .field { gap: 6px; }
  .form input,
  .form select,
  .form textarea { padding: 12px 14px; border-radius: 12px; font-size: 16px; }
  .form textarea { min-height: 120px; }
  .form__foot { margin-top: 20px; }
  .form__foot .pill { width: 100%; }
  .office { min-height: 300px; }
  .office .actions { margin-top: 18px; }
  .cta-card { gap: 20px; padding-top: 36px; }
  .cta-card p { margin-bottom: 22px; }
  .inner .faq summary { padding: 15px 0; }
  .inner .faq summary::after { width: 26px; height: 26px; background-size: 11px; }
  .inner .faq details p { padding: 0 0 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .navbar, .navbar::before, .nav, .nav a::before, .c--media > img, .project p .i, .clist .i { transition: none; }
  a.c--media:hover > img { transform: none; }
}

/* =========================================================
   HOME — clean-up layer
   ========================================================= */
.home p.extras {
  display: block;
  max-width: 60ch;
  margin: 24px auto 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.home .plans__note { margin-top: 20px; font-size: 14px; }
.home .plans__note a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.home .plans__note a:hover { color: var(--muted); }
.home a:focus-visible,
.home button:focus-visible,
.home summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* =========================================================
   UI refinements
   ========================================================= */
/* Footer spans the same width as the inner pages; the wordmark spans
   exactly the footer content above it. */
.footer .wrap { max-width: 1360px; }
.footer__word { width: min(calc(100% - 64px), 1296px); }
@media (max-width: 960px) { .footer__word { width: calc(100% - 40px); } }

/* Monthly / Quarterly toggle: 40px tap height */
.billing button { min-height: 40px; }

/* "Still have a question?" on phones: label on its own line, buttons side by side */
@media (max-width: 600px) {
  .faq__cta { gap: 8px; }
  .faq__cta span { flex-basis: 100%; margin: 0 0 4px; text-align: center; }
  .faq__cta .pill { height: 40px; }
  .footer__grid > div > a,
  .footer__grid > div > span { padding-block: 8px; }
}

/* Text cards: outlined tag, large title, muted text, arrow link at the foot */
.tcard {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 36px 36px 32px;
}
.tag {
  align-self: flex-start;
  padding: 3px 12px;
  border: 1px solid rgba(14, 14, 16, 0.55);
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
}
.c.tcard h3 {
  margin-top: 28px;
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.tcard p { max-width: 46ch; margin-top: 14px; color: var(--soft); }
.tcard__link {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 40px;
  font-weight: 500;
  color: var(--ink);
}
.tcard__link .i { width: 18px; height: 18px; transition: transform 0.2s; }
.tcard__link:hover .i { transform: translateX(4px); }
.tcard:not(:has(.tcard__link)) { min-height: 0; }
@media (max-width: 960px) { .tcard { min-height: 0; } }
@media (max-width: 600px) {
  .tcard { padding: 22px 20px 20px; }
  .c.tcard h3 { margin-top: 20px; font-size: 22px; }
  .tcard__link { padding-top: 28px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .tcard__link .i { transition: none; } }

/* Contact intro card: reply-time tag, headline, then contact tiles that
   reuse the text-card pieces (tag, strong title, arrow action). */
.contact-intro .tag { margin-bottom: 24px; }
.tag--live { display: inline-flex; align-items: center; gap: 8px; }
.tag--live i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.ctiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ctile {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 150px;
  padding: 18px 18px 16px;
  border-radius: calc(var(--r-card) - 10px);
  background: #fff;
  color: var(--ink);
  transition: box-shadow 0.2s;
}
.ctile .tag { margin: 0; font-size: 12px; padding: 2px 10px; }
.ctile strong {
  margin-top: 16px;
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
.ctile__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--soft);
  transition: color 0.2s;
}
.ctile__go .i { width: 16px; height: 16px; transition: transform 0.2s; }
.ctile:hover { box-shadow: 0 0 0 1px var(--rule); }
.ctile:hover .ctile__go { color: var(--ink); }
.ctile:hover .ctile__go .i { transform: translateX(4px); }
@media (max-width: 600px) {
  .contact-intro .tag--live { margin-bottom: 18px; }
  /* one tile per row: tag + detail on the left, action on the right */
  .ctiles { grid-template-columns: 1fr; gap: 8px; }
  .ctile {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px 12px;
    min-height: 0;
    padding: 14px 16px;
  }
  .ctile .tag { grid-column: 1; justify-self: start; }
  .ctile strong { grid-column: 1; margin-top: 0; font-size: 16px; overflow-wrap: normal; }
  .ctile__go { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 0; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .ctile__go .i { transition: none; } }

/* Step cards (Contact): solid colour block, big figure, headline,
   hairline, short text with a round arrow button in the corner. */
.scard {
  --fg: #fff;
  --fg-soft: rgba(255, 255, 255, 0.72);
  --hair: rgba(255, 255, 255, 0.28);
  display: flex;
  flex-direction: column;
  min-height: 400px;
  padding: 32px;
  border-radius: var(--r-card);
  color: var(--fg);
}
.scard--ink { background: var(--ink); }
.scard--grey { background: #2e2e33; }
.scard--orange { --fg: var(--ink); --fg-soft: rgba(14, 14, 16, 0.78); --hair: rgba(14, 14, 16, 0.3); background: var(--orange); }
.scard__big {
  font-size: var(--fs-num);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.scard h3 {
  margin-top: 14px;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.scard__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
}
.scard__foot p { max-width: 30ch; font-size: var(--fs-sm); line-height: 1.5; color: var(--fg-soft); }
.scard__go {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid currentColor;
  color: var(--fg);
  transition: background 0.2s, color 0.2s;
}
.scard__go .i { width: 18px; height: 18px; }
.scard__go:hover { background: var(--fg); }
.scard--ink .scard__go:hover { color: var(--ink); }
.scard--grey .scard__go:hover { color: #2e2e33; }
.scard--orange .scard__go:hover { color: var(--orange); }
.scard h3 + .scard__foot { margin-top: auto; }
@media (max-width: 960px) {
  .scard { min-height: 300px; }
}
@media (max-width: 600px) {
  .scard { min-height: 0; padding: 18px 18px 16px; }
  .scard__big { font-size: 28px; }
  .scard h3 { margin-top: 6px; font-size: 17px; }
  .scard__foot,
  .scard h3 + .scard__foot { margin-top: 18px; padding-top: 14px; gap: 14px; align-items: center; }
  .scard__foot p { font-size: 13px; }
  .scard__go { width: 40px; height: 40px; }
  .scard__go .i { width: 16px; height: 16px; }
}

/* =========================================================
   TYPOGRAPHY — one scale across every page
   Tracking tightens as type gets bigger, but never squeezes;
   labels are sentence case; 400 for text, 500 for headings.
     display  -0.035em  lh 1.02
     h2       -0.03em   lh 1.08
     h3       -0.02em   lh 1.15
     h4       -0.01em   lh 1.3
     numbers  -0.03em   lh 1
     labels   13px 500, no caps, no tracking
   ========================================================= */
.hero h1,
.ihero h1,
.cta-card h2,
.cta__content h2 { letter-spacing: -0.035em; line-height: 1.02; }
.h2-xl,
.shead h2,
.office h2 { letter-spacing: -0.03em; }
.tile__text h3,
.slide__foot h3,
.tier h3,
.journey__copy h3,
.c h3,
.c.tcard h3,
.plan__name,
.form h2,
.scard h3,
.addons__head h3 { letter-spacing: -0.02em; }
.cells strong,
.faq summary,
.ctile strong,
.story__who strong { letter-spacing: -0.01em; }
.stats strong,
.plan__price span,
.tier__price span,
.slide__result strong,
.scard__big { letter-spacing: -0.03em; }

/* Labels: sentence case instead of small spaced-out capitals */
.hero__eyebrow,
.tier__plus,
.home .tier__plus,
.plan__tag,
.plan__plus,
.spec thead th,
.clist small {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.story__result strong { font-weight: 500; }

/* Home: headings and figures on the same steps as the inner pages */
@media (min-width: 961px) {
  .tile__text h3,
  .slide__foot h3,
  .tier h3 { font-size: clamp(28px, 2.5vw, 36px); line-height: 1.1; }
  .journey__copy h3 { font-size: clamp(24px, 2.2vw, 30px); }
  .tier__price span,
  .slide__result strong { font-size: clamp(40px, 3.9vw, 56px); }
}

/* Pricing hero: headline card + "Retainers from" summary card */
.from { display: flex; flex-direction: column; min-height: 440px; }
.from__label { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.62); }
.from__price { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; color: #fff; }
.from__price span { font-size: var(--fs-num); font-weight: 500; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.from__price small { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.62); }
.from__terms { margin-top: auto; padding-top: 32px; }
.from__terms li { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.86); }
.from__go {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 18px;
  font-weight: 500;
  color: #fff;
}
.from__go .i { width: 18px; height: 18px; transition: transform 0.2s; }
.from__go:hover .i { transform: translateX(4px); }
.plans-section .plan-grid { margin-top: 0; }
.plans-section .shead { align-items: center; }
@media (max-width: 960px) {
  .from { min-height: 0; }
  .plans-section .shead { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 600px) {
  .from__price { margin-top: 6px; }
  .from__terms { padding-top: 22px; }
  .from__terms li { padding: 11px 0; font-size: 15px; }
  .from__go { min-height: 44px; padding-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .from__go .i { transition: none; } }

/* Beginner pack card */
.from__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.from__label { color: #fff; font-size: var(--fs-h4); }
.from__for { margin-top: 10px; color: rgba(255, 255, 255, 0.72); }
.from__terms li { line-height: 1.45; }