:root {
  --ink: #131313;
  --muted: #5c5c5c;
  --line: rgba(19, 19, 19, 0.1);
  --page: #ffffff;
  --panel: #f7f7f8;
  --accent: #06b6d4;
  --black: #0c0c0c;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--page);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }

/* ── Navbar ─────────────────────────────────────────────── */
.nav-wrap { position: sticky; top: 0; z-index: 50; padding: 14px 20px 0; }
.nav {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 10px 10px 18px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(19, 19, 19, 0.08);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(12, 12, 12, 0.07);
}
/* The mark leads the bar at 40px against the Contact button's 45, so the logo is the
   tallest thing on the left without making the pill any deeper than the button already
   makes it. */
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: -0.025em; }
.brand img { width: 40px; height: 40px; object-fit: contain; }
.brand span { font-size: 21px; }
.brand span b { color: var(--accent); font-weight: 700; }
/* The free space sits before the links rather than after them, so the links travel across
   to the buttons and the whole right-hand side reads as one group. */
.nav-links { display: flex; align-items: center; gap: 30px; margin-left: auto; margin-right: 28px; }
.nav-links a {
  position: relative;
  font-size: 15px;
  color: var(--muted);
  transition: color 0.2s;
}
/* The rule under a link grows from the middle out on hover and simply stands there on the
   page you are already on, so the two states are the same mark arrived at differently. */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }
/* Which page you are on. With five of them the bar has to say so. */
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); background: var(--accent); }
.nav-actions { display: flex; align-items: center; gap: 10px; }

/* Keyboard focus, which the bar had none of. Only for keyboard users, so a mouse click
   does not leave a ring behind it. */
.nav a:focus-visible,
.nav button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Off the top of the page the bar tightens: less air above it, a firmer edge and a deeper
   shadow, so it reads as floating over the page rather than sitting in it. */
.nav-wrap.stuck { padding-top: 8px; }
.nav-wrap.stuck .nav {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(19, 19, 19, 0.1);
  box-shadow: 0 10px 30px rgba(12, 12, 12, 0.11);
}

/* Over the footer the bar turns itself inside out rather than sitting as a white lozenge
   on a black ground. Everything that was ink becomes white and the dark button becomes the
   light one, so it stays the thing your eye goes to. */
.nav-wrap.on-dark .nav {
  background: rgba(22, 22, 24, 0.72);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.34);
}
.nav-wrap.on-dark .brand { color: #fff; }
.nav-wrap.on-dark .brand img { filter: brightness(0) invert(1); }
.nav-wrap.on-dark .nav-links a { color: rgba(255, 255, 255, 0.74); }
.nav-wrap.on-dark .nav-links a:hover,
.nav-wrap.on-dark .nav-links a[aria-current="page"] { color: #fff; }
.nav-wrap.on-dark .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.24); }
.nav-wrap.on-dark .btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }
.nav-wrap.on-dark .btn-dark { background: #fff; color: var(--ink); }
.nav-wrap.on-dark .btn-dark:hover { background: rgba(255, 255, 255, 0.88); }
.nav-wrap.on-dark .nav-toggle svg { stroke: #fff; }
.nav-wrap .nav,
.nav-wrap .brand img,
.nav-wrap .nav-links a,
.nav-wrap .btn-ghost,
.nav-wrap .btn-dark,
.nav-wrap .nav-toggle svg {
  transition: background-color 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s, filter 0.3s;
}
.nav-wrap { transition: padding-top 0.3s; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 13px 26px;
  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-dark { background: var(--black); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.btn-dark:hover { background: #1d1d1d; }
.btn-accent { background: var(--accent); color: #05242a; }
.btn-accent:hover { background: #22c9e4; }
.btn-ghost { border: 1px solid var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: rgba(19, 19, 19, 0.05); }
.btn-sm { padding: 10px 20px; font-size: 14px; }
.roll { overflow: hidden; position: relative; display: inline-block; height: 1.3em; }
.roll span { display: block; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.btn:hover .roll span { transform: translateY(-1.3em); }
.nav-toggle { display: none; border: 0; background: transparent; padding: 8px; cursor: pointer; }
.nav-toggle svg { display: block; }

/* ── Hero ───────────────────────────────────────────────── */
.hero { max-width: 1120px; margin: 0 auto; padding: 72px 20px 0; text-align: center; }
.hero h1 {
  margin: 0;
  font-size: clamp(42px, 7.4vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 700;
}
.hero h1 .line { display: block; }
.hero h1 .line + .line { margin-top: 6px; }
.hero h1 .soft { color: var(--muted); }
.hero .pill {
  display: inline-block;
  vertical-align: middle;
  width: clamp(88px, 13vw, 168px);
  height: clamp(38px, 5.4vw, 66px);
  border-radius: 999px;
  margin: 0 8px;
  object-fit: cover;
  box-shadow: 0 10px 28px rgba(12, 12, 12, 0.18);
}
.hero p.lede {
  margin: 26px auto 0;
  max-width: 620px;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--muted);
}
.hero-actions { margin-top: 34px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* Fanned cards */
.fan {
  position: relative;
  height: 470px;
  margin: 56px auto 0;
  max-width: 1120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.fan .card {
  position: absolute;
  margin: 0;
  width: 240px;
  height: 360px;
  border-radius: 32px;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  will-change: transform;
  transform-origin: center center;
  box-shadow: rgba(0, 0, 0, 0.15) 0 15px 35px;
}
.fan .card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fan .card figcaption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
/* Closed: the cards overlap in a fan — how the hero rests before you scroll. Opening is
   driven by scroll position, not the cursor, so it plays the same every time; see the
   handler at the end of the page. */
.fan .card { pointer-events: none; transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1); }
.fan .c1 { z-index: 18; transform: translate(-240px, 48px) rotate(-24deg) scale(0.88); transition-delay: 0.16s; }
.fan .c2 { z-index: 19; transform: translate(-120px, 12px) rotate(-12deg) scale(0.94); transition-delay: 0.08s; }
.fan .c3 { z-index: 20; transform: translate(0px, 0px) rotate(0deg) scale(1); }
.fan .c4 { z-index: 19; transform: translate(120px, 12px) rotate(12deg) scale(0.94); transition-delay: 0.08s; }
.fan .c5 { z-index: 18; transform: translate(240px, 48px) rotate(24deg) scale(0.88); transition-delay: 0.16s; }
/* Open, once the group scrolls into view: the cards separate and sit side by side.
   --step is one card plus its gap, and it shrinks on narrower screens to stay on the page. */
.fan { --step: 252px; }
.fan.open .c1 { transform: translate(calc(var(--step) * -2), 26px) rotate(-8deg) scale(0.92); }
.fan.open .c2 { transform: translate(calc(var(--step) * -1), 8px) rotate(-4deg) scale(0.96); }
.fan.open .c3 { transform: translate(0px, 0px) rotate(0deg) scale(1); }
.fan.open .c4 { transform: translate(var(--step), 8px) rotate(4deg) scale(0.96); }
.fan.open .c5 { transform: translate(calc(var(--step) * 2), 26px) rotate(8deg) scale(0.92); }
@media (max-width: 1340px) { .fan { --step: 224px; } }
@media (max-width: 1180px) {
  .fan { --step: 190px; }
  .fan .card { width: 208px; height: 312px; }
}
/* No motion preference: the fan simply stays in its closed, overlapping shape. */
@media (prefers-reduced-motion: reduce) {
  .fan .card { transition: none; }
}

/* Clients strip */
.clients { margin-top: 64px; padding-bottom: 72px; text-align: center; }
.clients p { margin: 0 0 22px; color: var(--muted); font-size: 15px; }
.ticker { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ticker ul {
  display: flex;
  gap: 56px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
  animation: slide 28s linear infinite;
}
.ticker li { font-size: 20px; font-weight: 600; color: rgba(19, 19, 19, 0.38); letter-spacing: -0.01em; white-space: nowrap; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker ul { animation: none; } }

/* ── How we help ────────────────────────────────── */
.pillars { max-width: 1120px; margin: 0 auto; padding: 8px 20px 104px; }
.pillars h2 {
  margin: 0;
  text-align: center;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.pillars .sub {
  margin: 18px auto 0;
  max-width: 560px;
  text-align: center;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--muted);
}
.pillar-grid { margin-top: 48px; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pillar {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: rgba(0, 0, 0, 0.15) 0 15px 35px;
}
.pillar img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pillar:hover img { transform: scale(1.04); }
/* The copy sits on the photo, so the foot of each card darkens under it. */
.pillar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 12, 12, 0) 34%, rgba(12, 12, 12, 0.78) 100%);
}
.pillar-copy { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 1; color: #fff; }
.pillar-copy h3 { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -0.01em; }
.pillar-copy p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.82); }
/* A .reveal block lifts its .rise children into place the first time it scrolls into
   view, each after its own --d. Only a page that ran the script hides them first, so a
   broken or blocked script still leaves everything readable. */
.js-reveal .reveal .rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--d, 0s);
}
.js-reveal .reveal.in .rise { opacity: 1; transform: none; }
.pillars .sub { --d: 0.08s; }
.pillar:nth-child(1) { --d: 0.16s; }
.pillar:nth-child(2) { --d: 0.24s; }
.pillar:nth-child(3) { --d: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  .pillar img,
  .js-reveal .reveal .rise { transition: none; }
}

/* ── Stacking service cards ──────────────────────────── */
.works { max-width: 1120px; margin: 0 auto; padding: 0 20px 120px; }
.works h2 {
  margin: 0;
  text-align: center;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.works .sub {
  margin: 18px auto 0;
  max-width: 560px;
  text-align: center;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--muted);
  --d: 0.08s;
}
.work-stack { margin-top: 56px; }
/* Every card parks at the same height, so each one covers the card below once it lands;
   what you see of the one below is the gap left while the new card is still small. The
   sticky element and the painted card are separate, so the card's own transform cannot
   disturb the stack. */
.work { position: sticky; top: 96px; }
.work + .work { margin-top: 12px; }
/* Two nested layers carry the entrance: each scales up, straightens and fades as the card
   climbs to its parked place, the inner one finishing first, so the card unfurls rather
   than simply growing. The script writes the values from scroll position; with no script
   both layers stay at rest. */
.work-rise,
.work-card { transform-origin: center center; will-change: transform; }
.work-card {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background: var(--black);
  isolation: isolate;
}
.work-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(26px);
  transform: scale(1.18);
  z-index: -2;
}
/* The photos behind the blur run bright, so the card is darkened enough for white copy. */
.work-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, rgba(12, 12, 12, 0.82), rgba(12, 12, 12, 0.6));
}
.work-inner { display: flex; gap: 32px; padding: 28px; align-items: stretch; }
.work-shot {
  flex: 0 0 300px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  aspect-ratio: 3 / 4;
}
.work-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work-copy { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 6px 4px 8px 0; color: #fff; }
.work-count {
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.64);
}
.work-count b { font-weight: 400; color: #fff; }
.work-copy h3 { margin: 0; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; }
.work-copy p.body { margin: 0; max-width: 48ch; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, 0.64); }
/* Split headings: the script breaks them into letters, each carrying its index, so they
   arrive one after another out of a blur. Words stay whole when the line wraps. */
.split .w { white-space: nowrap; }
.split .c { display: inline-block; }
.js-reveal .reveal .split .c {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(10px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
  transition-delay: calc(var(--d, 0s) + var(--i) * 0.022s);
  will-change: transform;
}
.js-reveal .reveal.in .split .c { opacity: 1; transform: none; filter: blur(0px); }
/* On the cards the letters only rise, with no blur. */
.js-reveal .reveal .split.plain .c {
  filter: none;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--d, 0s) + var(--i) * 0.018s);
}
.work-card { --d: 0s; }
.work-copy h3 { --d: 0.14s; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 76px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 0;
    padding: 14px 18px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(12, 12, 12, 0.14);
  }
  .nav-links.open a { padding: 10px 0; font-size: 16px; }
  .nav-toggle { display: inline-flex; }
  .nav-actions .btn-quote { display: none; }
  .hero { padding-top: 48px; }
  .fan { height: 330px; }
  .fan .card { width: 172px; height: 258px; border-radius: 24px; }
  .fan .c1, .fan .c5 { display: none; }
  .fan .c2 { transform: translate(-56px, 12px) rotate(-12deg) scale(0.94); }
  .fan .c4 { transform: translate(56px, 12px) rotate(12deg) scale(0.94); }
  .fan.open .c2 { transform: translate(-92px, 8px) rotate(-5deg) scale(0.96); }
  .fan.open .c4 { transform: translate(92px, 8px) rotate(5deg) scale(0.96); }
  .pillars { padding-bottom: 76px; }
  .pillar-grid { margin-top: 36px; }
  .pillar { aspect-ratio: 4 / 5; border-radius: 24px; }
  .works { padding-bottom: 88px; }
  .work-stack { margin-top: 40px; }
  .work { top: 88px; }
  .work-card { border-radius: 24px; }
  .work-inner { flex-direction: column; gap: 22px; padding: 20px; }
  .work-shot { flex: none; width: 100%; aspect-ratio: 4 / 3; }
  .work-copy { padding: 0; }
}
    
/* Pricing: the three service packages, the middle one the one most brands pick. */
/* The section is a track: the stage inside it is held still while the plans come out, and
   the page moves on once they are all there. Its height is set by the script, which knows
   how tall the stage turned out. */
.pricing {
  position: relative;
  margin-bottom: 96px;
}
.pricing-stage {
  position: sticky;
  top: 96px; /* the line the service cards above park on */
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}
.pricing-after {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px 120px;
}
.pricing h2 {
  margin: 0;
  text-align: center;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.pricing .sub {
  margin: 18px auto 0;
  max-width: 600px;
  text-align: center;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--muted);
  --d: 0.08s;
}
.plans {
  margin-top: 48px;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 28px;
  border-radius: 24px;
  background: var(--panel);
  overflow: hidden;
  isolation: isolate;
}
/* Growth sits above the other two, so they are genuinely hidden behind it until they
   come out; each side card carries its own scroll-driven transform. */
.plan.featured {
  z-index: 2;
}
.plan-top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.plan-icon {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 13px;
  overflow: hidden;
}
.plan-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.plan h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.plan-blurb {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}
.plan-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--muted);
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.plan-price b {
  font-size: clamp(34px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.plan-price span {
  font-size: 15px;
  color: var(--muted);
}
.plan-line {
  height: 1px;
  background: var(--line);
}
.plan-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.plan-points li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.45;
}
.plan-points i {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 1px;
  border-radius: 999px;
  background: rgba(19, 19, 19, 0.08);
  display: grid;
  place-items: center;
}
.plan-points svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plan .btn {
  width: 100%;
  margin-top: auto;
}
/* The picked plan: dark, with the same photo-under-gradient the cards above use. */
.plan.featured {
  background: var(--black);
  color: #fff;
}
.plan-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.plan.featured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(12, 12, 12, 0.93), rgba(12, 12, 12, 0.985));
}
/* Only the name sits under the tag; the blurb keeps the full width. */
.plan.featured h3 {
  padding-right: 92px;
}
.plan.featured .plan-blurb,
.plan.featured .plan-meta,
.plan.featured .plan-price span {
  color: rgba(255, 255, 255, 0.64);
}
.plan.featured .plan-price b {
  color: var(--accent);
}
.plan.featured .plan-line {
  background: rgba(255, 255, 255, 0.2);
}
.plan.featured .plan-points i {
  background: rgba(255, 255, 255, 0.2);
}
.plan.featured .btn {
  background: #fff;
  color: var(--black);
}
.plan.featured .btn:hover {
  background: #f0f0f0;
}
.plan-tag {
  position: absolute;
  top: 22px;
  right: 22px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.pricing .note {
  margin: 26px auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  --d: 0.4s;
}
@media (max-width: 900px) {
  .plans {
    grid-template-columns: 1fr;
    margin-top: 36px;
  }
  .pricing {
    margin-bottom: 0;
  }
  .pricing-after {
    padding-bottom: 88px;
  }
}
    
/* Questions, answered: two columns of accordions. Native <details>, so it works with a
   keyboard and without the script; name= lets a browser that knows it keep one open. */
.faq {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px 120px;
}
.faq h2 {
  margin: 0;
  text-align: center;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.faq .sub {
  margin: 18px auto 0;
  max-width: 600px;
  text-align: center;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--muted);
  --d: 0.08s;
}
.faq-grid {
  margin-top: 48px;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.faq-col {
  display: grid;
  gap: 16px;
  align-content: start;
}
.faq-item {
  background: var(--panel);
  border-radius: 24px;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 21px 26px;
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.4;
  border-radius: 24px;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.faq-item summary svg {
  width: 15px;
  height: 15px;
  flex: none;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.faq-item[open] summary svg {
  transform: rotate(180deg);
}
.faq-a {
  margin: 0;
  padding: 0 26px 24px;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--muted);
}
.faq-item[open] .faq-a {
  animation: faq-open 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes faq-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 900px) {
  .faq-grid {
    grid-template-columns: 1fr;
    margin-top: 36px;
  }
  .faq {
    padding-bottom: 88px;
  }
}
    
/* A cylinder of images: twelve faces on a ring, the whole ring tipped back so you look
   across it. Pure CSS 3D — the transform on each face places it on the circle, and the
   scroll turns the ring (see paintReel). It stands still for reduced motion. */
.reel {
  position: relative;
  /* Clipped sideways, so a wide ring can never widen the page; open top and bottom, so
     nothing is cut across a photograph when the tilt swings a card past the box. */
  overflow-x: clip;
  overflow-y: visible;
  /* The reference's own framing: 80px of air all round the cylinder's 1133x500 box, and
     80px again between it and the words. Ours was half that, which is what made the whole
     section sit shorter than theirs even with the ring measuring the same. */
  padding: 80px 20px;
  text-align: center;
}
.reel .btn {
  margin-top: 30px;
}
.reel h2 {
  position: relative; /* if a card ever hangs past the stage, the words stay on top of it */
  z-index: 1;
  margin: calc(80px * var(--reel-fit, 1)) auto 0;
  max-width: 820px;
  text-align: center;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.reel .sub {
  margin: 16px auto 0;
  max-width: 560px;
  text-align: center;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--muted);
  --d: 0.08s;
}
.reel-stage {
  margin-top: 0;
  /* The reference's own box: 1133 by 500, no perspective on it — the ring carries its own,
     so the vanishing point tips with the ring instead of staying nailed to the page. */
  max-width: 1133px;
  height: calc(500px * var(--reel-fit, 1));
  margin-inline: auto;
  display: grid;
  place-items: center;
}
.reel-scale {
  /* The tilt throws the ring low; this puts it back in the middle of its box. The fit is
     set by the script: on a short screen the whole thing shrinks together so the circle,
     the words and the button all stand on one screen at once. */
  transform: translateY(calc(-48px * var(--reel-fit, 1))) scale(var(--reel-fit, 1));
  transform-style: preserve-3d;
}
.ring {
  position: relative;
  width: 144px;
  height: 200px;
  transform-style: preserve-3d;
  /* The vanishing point belongs to the ring itself, not to the box around it: the eye sits
     1200px in front of the ring's own centre, so tipping the ring tips the perspective with
     it. Where it rests before the script takes over, and where it stays without one. */
  transform: perspective(1200px) rotate(-10deg) rotateX(-10deg) rotateY(90deg);
  will-change: transform;
}
.ring figure {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  /* No shadow. The reference carries none anywhere on the card, and on a white page a
     shadow under a turning card gives away that it is a flat rectangle rather than a
     photograph standing in space. */
  /* Twelve cards on a circle 362px across the radius — measured off the reference, where a
     144x200 card at 30° steps leaves about 45px of air between neighbours. Wider and the
     circle reads as a loose fan; tighter and the cards overlap. */
  transform: rotateY(calc(var(--i) * 30deg)) translateZ(362px);
}
.ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 900px) {
  .reel-stage {
    margin-top: 8px;
  }
  .reel {
    padding: 48px 20px 64px;
    --reel-fit: 0.5; /* where a phone lands without the script */
  }
}

/* ── Footer ─────────────────────────────────────────────
   A dark close to the page, built the way the Aveum footer is: the name
   set enormous and ghosted across the top, revealed a letter at a time as
   the footer arrives and taken apart again on the way back up, then the
   columns, then a hairline rule and the small print.

   The reveal is tied to scroll POSITION, not played on a trigger, so
   scrolling back up runs it backwards rather than replaying it. Each
   letter carries its own clipped gradient — with one gradient on the
   paragraph the letters would have nothing of their own to fade, since
   their text is transparent and the visible pixels belong to the parent.
   The resting state here is fully opaque and the script clears the
   letters itself, so with the script off, or under reduced motion, the
   footer simply carries its name rather than an invisible one. */
.foot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--black);
  color: #fff;
}
.foot-ground {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 58% at 50% 8%, rgba(6, 182, 212, 0.16) 0%, rgba(6, 182, 212, 0) 70%),
    radial-gradient(90% 70% at 50% 120%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 65%);
}
.foot-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 84px 20px 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 78px;
}
/* The word leads the footer rather than sitting under the columns, and the
   reason is the animation, not the composition: how much of the reveal can
   be seen is decided by how long the word is on screen, and up here that
   is the footer's whole height instead of its last stretch. */
.wordmark {
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: clamp(34px, 12.3vw, 186px);
  line-height: 0.85;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-indent: 0.1em; /* offsets the trailing letter-space on a centred line */
  user-select: none;
  transform: translateZ(0); /* its own layer: the whole word would repaint every frame otherwise */
}
/* Plain inline spans, never inline-block: an inline-block carries its own
   trailing letter-space inside its width and is a break opportunity, which
   would widen the word by eight letter-spaces and let it wrap. */
.wordmark span {
  background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.32) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.foot-cols {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 32px;
}
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 320px; }
.foot-brand .brand { color: #fff; }
/* The mark is a dark hexagon on transparent; on the dark ground it needs to be its own
   negative rather than a second, paler asset to keep in step with the one in the bar. */
.foot-brand .brand img { filter: brightness(0) invert(1); }
.foot-brand .brand span b { color: var(--accent); }
.foot-brand p { margin: 0; font-size: 16px; line-height: 1.6; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.8); }
.foot-col { display: flex; flex-direction: column; gap: 16px; }
.foot-col h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fff;
}
.foot-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.foot-col li, .foot-col a { font-size: 16px; line-height: 1.6; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.8); }
.foot-col a { transition: color 0.3s; }
.foot-col a:hover { color: #fff; }
.foot-col.reach ul { gap: 10px; }
.foot-bottom { width: 100%; display: flex; flex-direction: column; gap: 20px; }
.foot-rule { height: 1px; width: 100%; background: rgba(255, 255, 255, 0.12); }
.foot-legal {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.foot-legal p { margin: 0; font-size: 14px; line-height: 1.6; letter-spacing: -0.02em; }
.foot-legal .note { color: rgba(255, 255, 255, 0.6); }
.foot-legal .rights { color: rgba(255, 255, 255, 0.8); flex-shrink: 0; }
@media (min-width: 1024px) {
  .foot-legal { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 40px; }
}
@media (max-width: 900px) {
  .foot-inner { gap: 48px; padding-top: 64px; }
  .foot-cols { flex-direction: column; gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .ring {
    transform: perspective(1200px) rotate(-19deg) rotateX(-19deg) rotateY(18deg);
  }
}

/* ── Inner pages ────────────────────────────────────────
   Every page but the homepage opens the same way: a short centred head over
   white, then its own sections down the same 1120px measure the hero uses.
   The homepage earns its fan of photographs and its cylinder; these do not,
   and giving them one each would make the site feel like five homepages. */
.page-head {
  max-width: 900px;
  margin: 0 auto;
  padding: 72px 20px 0;
  text-align: center;
}
.page-head .eyebrow {
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.page-head h1 {
  margin: 0;
  font-size: clamp(38px, 5.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 700;
}
.page-head h1 .soft { color: var(--muted); }
.page-head .lede {
  margin: 22px auto 0;
  max-width: 620px;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.6;
  color: var(--muted);
}
.page-head .hero-actions { margin-top: 34px; }

/* A section on an inner page: the same head-then-content rhythm as the
   homepage's, at a measure that suits reading rather than display. */
.slab { max-width: 1120px; margin: 0 auto; padding: 104px 20px 0; }
.slab.tight { padding-top: 72px; }
.slab > h2 {
  margin: 0;
  max-width: 820px;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.slab > .sub {
  margin: 16px 0 0;
  max-width: 620px;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--muted);
}
.slab.center { text-align: center; }
.slab.center > h2, .slab.center > .sub { margin-left: auto; margin-right: auto; }

/* A plain bordered card, the shape the FAQ and the plans already use. */
.tile {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 28px;
}
.tile h3 { margin: 0; font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 700; }
.tile p { margin: 10px 0 0; font-size: 16px; line-height: 1.65; color: var(--muted); }
.tile-grid { margin-top: 40px; display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.tile-grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
  .tile-grid, .tile-grid.two { grid-template-columns: 1fr; }
  .slab { padding-top: 72px; }
}

/* A numbered step. The number is set large and pale so the eye reads the
   heading first and takes the order from the margin. */
.steps { margin-top: 44px; display: flex; flex-direction: column; gap: 0; }
.step {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step .n {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: rgba(19, 19, 19, 0.16);
}
.step h3 { margin: 0; font-size: 21px; line-height: 1.25; letter-spacing: -0.025em; font-weight: 700; }
.step p { margin: 10px 0 0; max-width: 620px; font-size: 16px; line-height: 1.65; color: var(--muted); }
@media (max-width: 700px) {
  .step { grid-template-columns: 1fr; gap: 10px; }
  .step .n { font-size: 30px; }
}

/* The closing ask, on every page that is not the homepage. */
.closer { max-width: 1120px; margin: 112px auto 0; padding: 0 20px; }
.closer-inner {
  border-radius: 28px;
  background: var(--black);
  color: #fff;
  padding: clamp(44px, 6vw, 76px) clamp(24px, 5vw, 64px);
  text-align: center;
}
.closer h2 {
  margin: 0 auto;
  max-width: 700px;
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.closer p {
  margin: 16px auto 0;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}
.closer .btn { margin-top: 30px; }

/* Three short labels under a service, in the shape the old site used them. */
.chips { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
}

/* The state a page is in when there is genuinely nothing to list. Said plainly rather
   than filled with placeholders — an empty shelf is better than a stocked fake one. */
.nothing {
  margin: 52px auto 0;
  max-width: 640px;
  border: 1px dashed rgba(19, 19, 19, 0.18);
  border-radius: 20px;
  padding: 48px 28px;
  text-align: center;
}
.nothing h3 { margin: 0; font-size: 21px; letter-spacing: -0.025em; font-weight: 700; }
.nothing p { margin: 12px auto 0; max-width: 460px; font-size: 16px; line-height: 1.65; color: var(--muted); }
.nothing .btn { margin-top: 24px; }

/* ── Contact ────────────────────────────────────────────
   Reach-us column beside the form, the shape the app's own contact page uses. */
.reach-grid {
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 20px 0;
  display: grid;
  gap: 40px;
  grid-template-columns: 2fr 3fr;
  align-items: start;
}
@media (max-width: 860px) {
  .reach-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 44px; }
}
.reach h2 { margin: 0; font-size: 21px; letter-spacing: -0.025em; font-weight: 700; }
.reach dl { margin: 22px 0 0; }
.reach dt { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.reach dd { margin: 6px 0 22px; font-size: 17px; line-height: 1.5; letter-spacing: -0.02em; }
.reach dd a { border-bottom: 1px solid var(--line); transition: border-color 0.2s; }
.reach dd a:hover { border-color: var(--ink); }
.reach .small { font-size: 15px; color: var(--muted); }

.form-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  padding: clamp(24px, 3vw, 34px);
}
.field { display: block; margin-bottom: 18px; }
.field span {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.field input,
.field textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 16px; /* under 16 and iOS zooms the page on focus */
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(92, 92, 92, 0.6); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.16);
}
.field-row { display: grid; gap: 0 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.form-card .btn { width: 100%; margin-top: 6px; }
/* Said before the button is pressed, not after: the form has no server behind it and
   hands the message to whatever mail app the visitor uses. Better they know. */
.form-note { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); text-align: center; }
.form-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }