/* ============================================================
   PLUTUS MOTION light editorial system
   paper / ink / ONE accent: violet, used at section scale
   Red Hat Display + Text · Instrument Serif italic (inline emphasis)
   Anton (poster numerals only)
   No card chrome. No boxes. The work carries the colour.
   ============================================================ */

:root {
  --paper: #FFFFFF;
  --paper-2: #F5F4F2;
  --ink: #0A0A0B;
  --ink-2: #55555F;
  --ink-3: #6E6E7A;
  --violet: #6B4EFF;
  --violet-deep: #4F2FE0;
  --violet-band: #EDE9FF;
  --rule: #E3E3E6;
  --rule-strong: #C9C9CE;
  --display: "Red Hat Display", system-ui, sans-serif;
  --sans: "Red Hat Text", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --poster: "Anton", Impact, sans-serif;
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 78px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--violet); color: #fff; }

img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

/* ---------- scroll progress ---------- */
#progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--violet); z-index: 200; pointer-events: none;
}

/* ---------- layout ---------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; position: relative; }
section { padding: 130px 0; position: relative; }
@media (max-width: 860px) { section { padding: 82px 0; } .wrap { padding: 0 24px; } body { font-size: 16px; } }

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 26px;
}

h1, h2, h3 {
  font-family: var(--display); font-weight: 600;
  line-height: 1.03; letter-spacing: -0.035em; text-wrap: balance;
}
h1 { font-size: clamp(40px, 6.6vw, 88px); }
h2 { font-size: clamp(32px, 4.6vw, 62px); margin-bottom: 22px; }
h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }

/* the signature: italic serif set inline inside a grotesk headline */
.em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  letter-spacing: -0.01em;
  font-size: 1.06em; line-height: 0.9;
}
.em-v { color: var(--violet); }

.lede { font-size: clamp(17px, 1.55vw, 20px); color: var(--ink-2); max-width: 620px; line-height: 1.6; }

/* ---------- reveal ----------
   Progressive enhancement. Content is VISIBLE by default so the page still reads
   with JavaScript disabled, blocked, or failing to load. The hidden starting state
   is only applied once the inline head script has set html.js, which guarantees
   something is there to remove it again. Never invert this. */
.rv { opacity: 1; transform: none; }
html.js .rv {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.75s var(--ease-snap), transform 0.75s var(--ease-snap);
}
html.js .rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 0.07s; } .rv-d2 { transition-delay: 0.14s; } .rv-d3 { transition-delay: 0.21s; }

/* ---------- nav ---------- */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h); display: flex; align-items: center;
  background: rgba(255,255,255,0.86);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner { max-width: 1240px; margin: 0 auto; padding: 0 40px; width: 100%; display: flex; align-items: center; gap: 36px; }
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.logo-mark { width: 22px; height: 26px; flex: 0 0 auto; color: var(--ink); }
.logo-type { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
.nav-links { display: flex; gap: 30px; margin-left: auto; }
.nav-links a { text-decoration: none; color: var(--ink); font-size: 15px; font-weight: 500; transition: color 0.2s; }
.nav-links a:hover { color: var(--violet); }
.nav-cta { margin-left: 6px; }
@media (max-width: 900px) { .nav-links { display: none; } .nav-cta { margin-left: auto; } }
@media (max-width: 500px) {
  .nav-inner { padding: 0 20px; gap: 12px; }
  .logo-type { font-size: 17px; }
  .logo-mark { width: 19px; height: 22px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  white-space: nowrap; font-family: var(--sans);
  font-weight: 600; font-size: 15px; text-decoration: none;
  padding: 14px 28px; border-radius: 100px; border: 1px solid transparent;
  min-height: 48px;
  transition: transform 0.25s var(--ease-snap), background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-primary { background: var(--violet); color: #fff; }
.btn-primary:hover { background: var(--violet-deep); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.btn-onviolet { background: var(--ink); color: #fff; }
.btn-onviolet:hover { background: var(--paper); color: var(--ink); transform: translateY(-2px); }
.btn-lg { font-size: 16px; padding: 17px 36px; min-height: 56px; }

/* ---------- hero ---------- */
#hero { padding: calc(var(--nav-h) + 96px) 0 0; }
.hero-inner { max-width: 1080px; }
.hero-inner h1 { max-width: 1010px; hyphens: none; }
/* keep hyphenated compounds from breaking across lines */
.nb { white-space: nowrap; }
.hero-inner .lede { margin: 32px 0 40px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* stat row: hairline separated, no boxes */
.hero-stats { display: flex; gap: 0; margin-top: 72px; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.hero-stat { padding: 26px 44px 0 0; margin-right: 44px; border-right: 1px solid var(--rule); }
.hero-stat:last-child { border-right: 0; margin-right: 0; }
.hero-stat b {
  display: block; font-family: var(--poster); font-weight: 400;
  font-size: 46px; line-height: 1; letter-spacing: -0.01em; color: var(--ink);
}
.hero-stat span { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
@media (max-width: 760px) {
  .hero-stats { display: grid; grid-template-columns: 1fr; }
  .hero-stat {
    padding: 20px 0; margin-right: 0;
    border-right: 0; border-bottom: 1px solid var(--rule);
  }
  .hero-stat:last-child { border-bottom: 0; }
  .hero-stat b { font-size: 34px; }
}

/* full-bleed showreel, no frame, no radius */
.hero-reel { margin-top: 96px; position: relative; background: var(--ink); }
.hero-reel video { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.hero-sound {
  position: absolute; bottom: 26px; right: 26px; z-index: 3;
  background: var(--paper); color: var(--ink); border-color: var(--paper);
  font-size: 14px; padding: 12px 22px; min-height: 46px;
}
.hero-sound:hover { background: var(--violet); color: #fff; border-color: var(--violet); }
@media (max-width: 640px) { .hero-sound { bottom: 14px; right: 14px; font-size: 13px; padding: 10px 16px; } }

/* ---------- kinetic hero headline ----------
   A motion graphics studio has to prove the craft in the first second, so the H1
   assembles on a mask wipe with a stagger rather than a generic opacity fade.
   Word masks are built in JS, so with JS off the headline is just plain text. */
#hero h1 .w {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding: 0.16em 0.04em 0.18em 0; margin: -0.16em -0.04em -0.18em 0;
}
#hero h1 .w-i { display: inline-block; will-change: transform; }
html.js #hero h1.kin .w-i {
  transform: translateY(115%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
html.js #hero h1.kin.lit .w-i { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js #hero h1.kin .w-i { transform: none; transition: none; }
}

/* ---------- disciplines strip: the craft signal, moving ---------- */
.disciplines {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  overflow: hidden; background: var(--paper);
}
.disc-track {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 22px 0; will-change: transform; animation: discroll 46s linear infinite;
}
.disc-track span {
  font-family: var(--display); font-size: clamp(15px, 1.5vw, 19px); font-weight: 500;
  letter-spacing: -0.02em; color: var(--ink); padding: 0 26px;
}
.disc-track i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--violet);
  flex: 0 0 auto; display: inline-block;
}
@keyframes discroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .disc-track { animation: none; } }

/* ---------- CTA micro-copy ---------- */
.cta-micro { margin-top: 16px; font-size: 14px; color: var(--ink-3); font-weight: 500; }

/* ---------- trust bar: risk reversal, high on the page ---------- */
.trustbar { background: var(--ink); color: #fff; }
.trustbar-inner {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  padding-top: 30px; padding-bottom: 30px;
}
.trust-item {
  display: flex; align-items: flex-start; gap: 13px;
  font-size: 15px; color: rgba(255,255,255,0.74); line-height: 1.45;
  padding-right: 34px; border-right: 1px solid rgba(255,255,255,0.16);
}
.trust-item:last-child { border-right: 0; padding-right: 0; }
.trust-item + .trust-item { padding-left: 34px; }
.trust-item svg { flex: 0 0 auto; margin-top: 1px; color: var(--violet); }
.trust-item b { color: #fff; font-weight: 700; }
@media (max-width: 860px) {
  .trustbar-inner { grid-template-columns: 1fr; gap: 16px; padding-top: 26px; padding-bottom: 26px; }
  .trust-item, .trust-item:last-child { border-right: 0; padding-right: 0; }
  .trust-item + .trust-item { padding-left: 0; }
}

/* ---------- what we make: the full range ---------- */
/* NOTE: #make stays white on purpose. #how directly below it carries the tinted
   band, and two tinted sections back to back merge into one grey slab with no
   rhythm. The 2px rule on .make-grid is what separates it from #work above. */
.make-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--ink); }
@media (max-width: 1000px) { .make-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .make-grid { grid-template-columns: 1fr; } }
.make-col { padding: 36px 30px; border-right: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); }
.make-col:nth-child(4n+1) { padding-left: 0; }
.make-col:nth-child(4n) { border-right: 0; padding-right: 0; }
@media (max-width: 1000px) {
  .make-col:nth-child(4n+1), .make-col:nth-child(4n) { padding: 36px 30px; border-right: 1px solid var(--rule-strong); }
  .make-col:nth-child(2n+1) { padding-left: 0; }
  .make-col:nth-child(2n) { border-right: 0; padding-right: 0; }
}
@media (max-width: 600px) {
  .make-col, .make-col:nth-child(4n+1), .make-col:nth-child(4n),
  .make-col:nth-child(2n+1), .make-col:nth-child(2n) {
    padding: 30px 0; border-right: 0;
  }
}
.make-col h3 {
  font-size: 15px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--violet); margin-bottom: 20px;
}
.make-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.make-col li {
  font-family: var(--display); font-weight: 500; font-size: 17px;
  letter-spacing: -0.02em; line-height: 1.28; color: var(--ink);
}

/* ---------- risk reversal section ---------- */
.risk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 2px solid var(--ink); }
@media (max-width: 820px) { .risk-grid { grid-template-columns: 1fr; } }
.risk-item { padding: 38px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.risk-item:nth-child(2n+1) { padding-left: 0; }
.risk-item:nth-child(2n) { border-right: 0; padding-right: 0; }
@media (max-width: 820px) {
  .risk-item, .risk-item:nth-child(2n+1), .risk-item:nth-child(2n) {
    padding: 30px 0; border-right: 0;
  }
}
.risk-num {
  display: block; font-family: var(--poster); font-weight: 400; font-size: 26px;
  color: var(--violet); line-height: 1; margin-bottom: 16px;
}
.risk-item b {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 10px;
}
.risk-item p { font-size: 16px; color: var(--ink-2); max-width: 46ch; }

/* ---------- contact assurances ---------- */
.contact-assure { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 11px; }
.contact-assure li {
  position: relative; padding-left: 28px; font-size: 16px; color: rgba(255,255,255,0.9); font-weight: 500;
}
.contact-assure li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 15px; height: 8px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* ---------- form: two-up rows ---------- */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 95;
  display: none; align-items: center; justify-content: center;
  background: var(--violet); color: #fff; text-decoration: none;
  font-family: var(--sans); font-weight: 600; font-size: 16px;
  min-height: 54px; border-radius: 100px;
  box-shadow: 0 8px 30px rgba(10,10,11,0.22);
  opacity: 0; transform: translateY(90px); pointer-events: none;
  transition: opacity 0.35s var(--ease-snap), transform 0.35s var(--ease-snap);
}
/* only once the hero CTA has scrolled away, and never over the contact form */
.sticky-cta.on { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 900px) { .sticky-cta { display: flex; } }
@media (max-width: 900px) { footer { padding-bottom: 100px; } }

/* ---------- marquee ---------- */
.marquee { border-bottom: 1px solid var(--rule); overflow: hidden; background: var(--paper); }
.marquee-track {
  display: inline-flex; align-items: center; gap: 0; white-space: nowrap;
  padding: 20px 0; will-change: transform; animation: marquee 38s linear infinite;
}
.marquee-track span {
  font-family: var(--display); font-size: 15px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--ink-2); padding: 0 26px;
}
.marquee-track i { color: var(--violet); font-style: normal; font-size: 15px; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- section head ---------- */
.sec-head { max-width: 780px; margin-bottom: 64px; }

/* ---------- work: big, no chrome, scale contrast ---------- */
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px 40px; }
@media (max-width: 820px) { .work-grid { grid-template-columns: 1fr; gap: 48px; } }
/* every third item runs full width: breaks the slideshow rhythm */
.work-item:nth-child(3n+1) { grid-column: 1 / -1; }
@media (max-width: 820px) { .work-item:nth-child(3n+1) { grid-column: auto; } }
.work-shot {
  position: relative; overflow: hidden; cursor: pointer;
  background: var(--paper-2); aspect-ratio: 16/9;
}
.work-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-snap); }
.work-item:hover .work-shot img { transform: scale(1.03); }
.work-shot .preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; transition: opacity 0.35s; }
.work-shot .preview.on { opacity: 1; }
.work-shot .dur {
  position: absolute; bottom: 16px; right: 16px; z-index: 2;
  font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.06em;
  color: var(--ink); background: var(--paper); padding: 5px 10px; border-radius: 100px;
}
.play-badge { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; }
.play-badge span {
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 6px 28px rgba(10,10,11,0.22);
  transition: transform 0.3s var(--ease-snap), background 0.2s, color 0.2s;
}
.work-shot:hover .play-badge span { transform: scale(1.09); background: var(--violet); color: #fff; }

.play-badge svg { margin-left: 3px; }
.work-meta { padding-top: 20px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.work-meta .tag {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--violet); flex: 0 0 auto;
}
.work-meta h3 { flex: 0 0 auto; }
.work-meta p { font-size: 15px; color: var(--ink-2); width: 100%; margin-top: 2px; }

/* ---------- lightbox ---------- */
#lightbox {
  position: fixed; inset: 0; z-index: 300; display: none;
  background: rgba(10,10,11,0.94); place-items: center; padding: 28px;
}
#lightbox.open { display: grid; }
#lightbox .lb-inner { width: min(1060px, 100%); position: relative; }
#lightbox video { width: 100%; max-height: 80vh; background: #000; }
#lb-title {
  position: absolute; top: -44px; left: 0; color: rgba(255,255,255,0.7);
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 40px;
}
#lb-close {
  position: absolute; top: -44px; right: 0; background: none; border: 0; color: rgba(255,255,255,0.7);
  font-size: 13px; font-weight: 600; letter-spacing: 0.1em; display: flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 6px;
}
#lb-close:hover { color: #fff; }

/* ---------- process rail ---------- */
#how { background: var(--paper-2); }
.rail { list-style: none; margin: 0; padding: 0; max-width: 900px; }
.rail-step { display: grid; grid-template-columns: 150px 1fr; gap: 0 40px; position: relative; padding-bottom: 54px; }
.rail-step:last-child { padding-bottom: 0; }
.rail-step::before {
  content: ""; position: absolute; left: 172px; top: 30px; bottom: 0; width: 1px; background: var(--rule-strong);
}
.rail-step:last-child::before { display: none; }
.rail-step::after {
  content: ""; position: absolute; left: 167px; top: 20px;
  width: 11px; height: 11px; border-radius: 50%; background: var(--paper-2);
  border: 2px solid var(--violet);
}
.rail-step.rail-end::after { background: var(--violet); }
.rail-time {
  font-family: var(--poster); font-weight: 400; font-size: 40px; line-height: 1;
  color: var(--ink); text-align: right; letter-spacing: -0.01em;
}
.rail-step.rail-end .rail-time { color: var(--violet); }
.rail-body h3 { margin-bottom: 9px; }
.rail-body p { color: var(--ink-2); font-size: 16px; max-width: 560px; }
@media (max-width: 700px) {
  .rail-step { grid-template-columns: 1fr; gap: 8px; padding-left: 28px; padding-bottom: 40px; }
  .rail-step::before { left: 5px; top: 30px; }
  .rail-step::after { left: 0; top: 10px; }
  .rail-time { text-align: left; font-size: 30px; }
}

/* ---------- brand packs ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 820px) { .duo { grid-template-columns: 1fr; gap: 32px; } }
.duo-card video { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--ink); }
.duo-card .duo-label {
  font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding-top: 16px; color: var(--ink-2); display: flex; align-items: center; gap: 10px;
}
.duo-label .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }

/* ---------- capabilities: hairline list, no cards ---------- */
.caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); }
@media (max-width: 900px) { .caps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .caps { grid-template-columns: 1fr; } }
.cap { padding: 34px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.cap:nth-child(3n+1) { padding-left: 0; }
.cap:nth-child(3n) { border-right: 0; padding-right: 0; }
@media (max-width: 900px) {
  .cap:nth-child(3n+1), .cap:nth-child(3n) { padding: 34px; border-right: 1px solid var(--rule); }
  .cap:nth-child(2n+1) { padding-left: 0; }
  .cap:nth-child(2n) { border-right: 0; padding-right: 0; }
}
@media (max-width: 620px) {
  .cap, .cap:nth-child(3n), .cap:nth-child(3n+1), .cap:nth-child(2n), .cap:nth-child(2n+1) {
    border-right: 0; padding-left: 0; padding-right: 0;
  }
}
.cap svg { margin-bottom: 18px; display: block; color: var(--violet); }
.cap b { display: block; font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; margin-bottom: 7px; }
.cap p { font-size: 15px; color: var(--ink-2); max-width: 34ch; }

/* ---------- engagements: columns, hairlines, no boxes ---------- */
.engage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid var(--ink); }
@media (max-width: 900px) { .engage-grid { grid-template-columns: 1fr; } }
.engage-col { padding: 40px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; }
.engage-col:first-child { padding-left: 0; }
.engage-col:last-child { border-right: 0; padding-right: 0; }
@media (max-width: 900px) {
  .engage-col, .engage-col:first-child, .engage-col:last-child {
    padding: 36px 0; border-right: 0; border-bottom: 1px solid var(--rule);
  }
  .engage-col:last-child { border-bottom: 0; }
}
.engage-col .plan { font-family: var(--display); font-weight: 600; font-size: 27px; letter-spacing: -0.03em; }
.engage-col .plan-note { font-size: 15px; color: var(--ink-2); margin: 10px 0 26px; }
.engage-col ul { list-style: none; margin: 0 0 32px; display: grid; gap: 13px; }
.engage-col li { display: flex; gap: 11px; font-size: 15px; color: var(--ink-2); align-items: flex-start; }
.engage-col li svg { flex: 0 0 auto; margin-top: 5px; color: var(--violet); }
.engage-col li b { color: var(--ink); font-weight: 600; }
.engage-col .btn { margin-top: auto; align-self: flex-start; }
/* the recommended tier. Marking a preferred option is standard practice and it
   steers people to the higher-value engagement. Without a marker the middle column
   was only distinguishable by a violet heading, which reads as decoration. */
.engage-col.feature { box-shadow: inset 0 3px 0 0 var(--violet); }
.engage-col.feature .plan { color: var(--violet); }
.plan-flag {
  display: inline-block; align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: var(--violet);
  padding: 5px 11px; border-radius: 100px; margin-bottom: 14px;
}

/* ---------- guarantee: two big statements, no band ---------- */
.guarantee-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
@media (max-width: 820px) { .guarantee-grid { grid-template-columns: 1fr; gap: 40px; } }
.g-item b {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.03em; line-height: 1.12; margin-bottom: 14px;
}
.g-item p { font-size: 16px; color: var(--ink-2); max-width: 44ch; }

/* ---------- comparison ---------- */
.compare-scroll { overflow-x: auto; }
table.compare { width: 100%; border-collapse: collapse; min-width: 720px; }
.compare th, .compare td { padding: 20px 22px; text-align: left; font-size: 15px; border-bottom: 1px solid var(--rule); }
.compare thead th {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 2px solid var(--ink);
}
.compare thead th.us { color: var(--violet); }
.compare td.us { background: var(--violet-band); color: var(--ink); font-weight: 600; }
.compare td { color: var(--ink-2); }
.compare td:first-child { color: var(--ink); font-weight: 600; padding-left: 0; }
.compare tbody tr:last-child td { border-bottom: 2px solid var(--ink); }

/* ---------- faq ---------- */
.faq-list { max-width: 900px; border-top: 1px solid var(--ink); }
details.faq { border-bottom: 1px solid var(--rule); }
details.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  gap: 20px; padding: 26px 0; min-height: 44px;
  font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.8vw, 23px); letter-spacing: -0.025em;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary .fx { color: var(--violet); font-size: 26px; font-weight: 400; flex: 0 0 auto; transition: transform 0.3s var(--ease-snap); line-height: 1; }
details.faq[open] summary .fx { transform: rotate(45deg); }
details.faq .faq-body { padding: 0 0 28px; color: var(--ink-2); font-size: 16px; max-width: 68ch; }

/* ---------- contact: full-bleed violet section ---------- */
/* Ground is --violet-deep, NOT --violet. #6B4EFF gives only 5.05:1 against pure
   white, so every tinted white on it failed AA. #4F2FE0 gives 7.46:1 and restores
   the headroom the hierarchy needs. Do not lighten this back. */
#contact { background: var(--violet-deep); color: #fff; padding: 130px 0; }
#contact .eyebrow { color: rgba(255,255,255,0.82); }
#contact h2 { color: #fff; }
#contact .lede { color: rgba(255,255,255,0.86); }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; gap: 44px; } }
.contact-form { display: grid; gap: 26px; }
.contact-form label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.82); margin-bottom: 8px;
}
/* underline-only fields */
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; background: transparent; color: #fff;
  border: 0; border-bottom: 1px solid rgba(255,255,255,0.62);
  border-radius: 0; padding: 10px 0; font: inherit; font-size: 16px;
  transition: border-color 0.2s;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none; border-bottom-color: #fff; border-bottom-width: 2px; padding-bottom: 9px;
}
.contact-form select option { color: var(--ink); background: #fff; }
.contact-form ::placeholder { color: rgba(255,255,255,0.80); opacity: 1; }
.form-note { color: rgba(255,255,255,0.86); }
.contact-form textarea { resize: vertical; min-height: 96px; }
.contact-form .btn { justify-self: start; margin-top: 6px; }
.form-note { font-size: 14px; color: rgba(255,255,255,0.72); }
#form-status { font-size: 14px; font-weight: 600; min-height: 20px; }
#form-status.ok { color: #fff; }
#form-status.err { color: #FFD9D5; }
.alt-contact { margin-top: 30px; font-size: 16px; color: rgba(255,255,255,0.86); }
.alt-contact a { color: #fff; text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }

/* ---------- footer ---------- */
footer { background: var(--ink); color: rgba(255,255,255,0.6); padding: 64px 0 72px; font-size: 14px; }
footer .logo-mark { color: #fff; }
footer .logo-type { color: #fff; }
.foot-inner { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; }
.foot-links { display: flex; gap: 26px; }
.foot-links a { text-decoration: none; color: rgba(255,255,255,0.6); transition: color 0.2s; }
.foot-links a:hover { color: #fff; }

/* ---------- HUD chip ---------- */
#hud {
  position: fixed; bottom: 20px; left: 20px; z-index: 90;
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  color: var(--ink-2); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 100px; padding: 9px 15px;
  pointer-events: none; opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s var(--ease-snap), transform 0.5s var(--ease-snap);
}
#hud.on { opacity: 1; transform: none; }
#hud .hud-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); animation: hudpulse 2.4s ease-in-out infinite; }
@keyframes hudpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(107,78,255,0.45); } 50% { box-shadow: 0 0 0 5px rgba(107,78,255,0); } }
#hud .hud-open { color: var(--violet); }
@media (max-width: 940px) { #hud { display: none; } }
@media (prefers-reduced-motion: reduce) { #hud .hud-dot { animation: none; } }

/* ---------- focus ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--violet); outline-offset: 3px;
}
#contact a:focus-visible, #contact button:focus-visible, #contact input:focus-visible,
#contact textarea:focus-visible, #contact select:focus-visible { outline-color: #fff; }