/* ==========================================================================
   Frame Empire, v2
   Single product: websites, built first, paid for only when loved.

   Design read: agency landing for cautious non-technical UK business owners.
   Dials: variance 7, motion 5, density 3.
   Type: Clash Display (headlines) + Satoshi (body), both self-hosted.
   Colour: brand purple #521F88, CTA green #25D366 (calls-to-action ONLY),
   purple-biased dark neutrals.
   Shape rule: buttons are pill, cards are 18px, inputs are 12px. Applied everywhere.
   ========================================================================== */

/* Fonts
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Clash Display";
  src: url("/assets/fonts/clashdisplay-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Clash Display";
  src: url("/assets/fonts/clashdisplay-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Clash Display";
  src: url("/assets/fonts/clashdisplay-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

/*
  The logo wordmark is set in Montserrat, matched against the supplied logo
  artwork. This is a variable subset containing only the seven letters of
  FRAME EMPIRE, so both weights cost 4.5KB in total rather than 74KB for the
  two full families. It is used for the wordmark and nothing else.
*/
@font-face {
  font-family: "FE Wordmark";
  src: url("/assets/fonts/montserrat-wordmark.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/satoshi-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/satoshi-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/satoshi-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

/* Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces, purple-biased near-black. Never pure #000. */
  --bg: #0B0910;
  --surface: #14101B;
  --surface-2: #1B1626;
  --line: rgba(243, 239, 249, 0.09);
  --line-strong: rgba(243, 239, 249, 0.16);

  /* Text */
  --ink: #F3EFF9;
  --ink-muted: #A79BB8;
  --ink-faint: #7C7189;

  /* Brand */
  --purple: #521F88;
  --purple-bright: #7C3FBF;
  --purple-tint: #C4A9EC;
  --purple-glow: rgba(82, 31, 136, 0.45);

  /* Action, CTA only */
  --green: #25D366;
  --green-ink: #052B12;

  /* Shape */
  --r-card: 18px;
  --r-input: 12px;

  /* Type */
  --display: "Clash Display", "Satoshi", system-ui, sans-serif;
  --body: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Motion, expo-out per the design system recommendation */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Spacious density (3/10). Adjacent sections stack top and bottom padding,
     so this is half of the gap you actually see between two sections. */
  --sp-section: clamp(3rem, 6vw, 4.5rem);
}

/* Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

/*
  Clash Display ships a narrow space glyph. Negative letter-spacing shrinks it
  further and the words visibly run together, so every display-font element
  gets word-spacing back. Keep these two properties together when editing.
*/
h1,
h2,
h3,
.brand,
.band-item .k,
.price-row .amount,
.work-face,
.qa summary {
  letter-spacing: -0.012em;
  word-spacing: 0.12em;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.06;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 5.2vw, 3.5rem);
  font-weight: 600;
}

/*
  Held well below h1. At 3rem the section headings were only 8px short of the
  hero headline and competed with it; the ladder now reads 56 / 38 / 26.
*/
h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

a {
  color: inherit;
}

strong {
  font-weight: 700;
}

:focus-visible {
  outline: 2px solid var(--purple-tint);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--purple);
  color: var(--ink);
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--r-input) 0;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/* Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: var(--sp-section) 0;
}

.section-tight {
  padding: 0 0 var(--sp-section);
}

.lede {
  color: var(--ink-muted);
  font-size: 1.125rem;
  max-width: 46ch;
}

.eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--purple-tint);
  margin-bottom: 1rem;
}

.center {
  text-align: center;
}

.center .lede {
  margin-left: auto;
  margin-right: auto;
}

/* Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  padding: 1.05rem 2rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    background 0.25s var(--ease), border-color 0.25s var(--ease);
}

/* Green is reserved for calls-to-action so they read as "go". */
.btn-go {
  background: var(--green);
  color: var(--green-ink);
}

.btn-go:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(37, 211, 102, 0.28);
}

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

.btn-quiet:hover {
  transform: translateY(-2px);
  border-color: var(--purple-tint);
  background: rgba(124, 63, 191, 0.12);
}

.btn:active {
  transform: translateY(1px) scale(0.985);
}

.btn-wide {
  width: 100%;
}

/* Header
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 9, 16, 0.72);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--line);
}

.header-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 68px;
}

/*
  Horizontal lockup, proportioned from the reference artwork. The mark is
  deliberately taller than the letters: its brackets sit above and below the
  cap line, with the wordmark optically centred against the middle bars.

  Proportions were recovered from the reference by solving for the font size
  that produces its measured text width in Montserrat, rather than eyeballing
  pixel coordinates. That gives a mark about 2.97x the cap height, a font size
  of 0.48 of the mark height, and a gap of 0.17 of it. All expressed against
  --mark so the lockup scales as one unit.
*/
.brand {
  --mark: 30px;
  --brand-font: calc(var(--mark) * 0.48);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--mark) * 0.17);
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}

@media (min-width: 700px) {
  .brand {
    --mark: 34px;
  }
}

@media (min-width: 1000px) {
  .brand {
    --mark: 38px;
  }
}

/*
  The Frame Empire wordmark, rebuilt as live text so it stays crisp at any
  size and remains selectable. FRAME is heavy and joins straight onto a light
  EMPIRE with no space, exactly as the logo lockup does.
  Kept off-white rather than brand purple because the site runs on a near
  black ground, where purple text would fail contrast. The mark beside it
  carries the brand colour.
*/
.brand-word {
  font-family: "FE Wordmark", var(--body);
  font-size: var(--brand-font);
  /* EMPIRE is the light half. 200 matches the logo; 300 reads too heavy
     against it and 100 collapses to a hairline. */
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  /*
    Uppercase has no descenders, so a normal line box leaves dead space under
    the caps and the word sits low next to a square mark. Collapsing the line
    height and centring on cap height instead lines the two up optically.
  */
  line-height: 1;
  text-box: trim-both cap alphabetic;
  white-space: nowrap;
}

.brand-word b {
  font-weight: 700;
  letter-spacing: 0;
}

/* The real Frame Empire mark, background keyed out so it sits on any surface. */
.brand-mark {
  width: var(--mark);
  height: var(--mark);
  flex: none;
  display: block;
}

.nav-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  /* Never let a long brand lockup squeeze this below the 44px touch target. */
  flex: none;
  width: 46px;
  height: 46px;
  padding: 12px;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-input);
  cursor: pointer;
}

.nav-btn span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

.nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 0.5rem 1.5rem 1.25rem;
}

.nav.open {
  display: block;
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.nav a:not(.btn) {
  display: block;
  padding: 0.7rem 0.4rem;
  text-decoration: none;
  font-weight: 500;
  color: var(--ink-muted);
  border-radius: var(--r-input);
}

.nav a:not(.btn):hover {
  color: var(--ink);
}

.nav .nav-cta {
  margin-top: 0.6rem;
}

.nav .nav-cta .btn {
  padding: 0.8rem 1.5rem;
}

/* Hero, asymmetric split
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: clamp(3rem, 7vw, 5.5rem) 0 var(--sp-section);
  overflow: hidden;
}

.glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(10px);
}

.glow-a {
  top: -22rem;
  left: -10rem;
  width: 46rem;
  height: 46rem;
  background: radial-gradient(circle, var(--purple-glow), transparent 66%);
}

.glow-b {
  top: -8rem;
  right: -16rem;
  width: 38rem;
  height: 38rem;
  background: radial-gradient(circle, rgba(124, 63, 191, 0.3), transparent 68%);
}

.hero .wrap {
  position: relative;
}

.hero-grid {
  display: grid;
  gap: 3rem;
}

.hero h1 {
  margin-bottom: 1.1rem;
}

.hero .lede {
  margin-bottom: 2.25rem;
  font-size: 1.1875rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* Price card, the hero's supporting asset */
.price-card {
  background: linear-gradient(158deg, rgba(124, 63, 191, 0.26), rgba(20, 16, 27, 0.9) 58%);
  border: 1px solid rgba(124, 63, 191, 0.45);
  border-radius: var(--r-card);
  padding: 2rem 1.75rem;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.price-card .tag {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple-tint);
}

.card-head {
  font-family: var(--display);
  font-size: clamp(1.7rem, 4.2vw, 2.2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.012em;
  word-spacing: 0.12em;
  margin: 0.9rem 0 0.5rem;
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0.9rem 0 0.35rem;
}

.price-row .amount {
  font-family: var(--display);
  font-size: clamp(3rem, 9vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.price-row .unit {
  color: var(--ink-muted);
  font-weight: 500;
}

.price-card .note {
  color: var(--ink-muted);
  margin: 0 0 1.5rem;
  font-size: 0.98rem;
}

.price-list {
  list-style: none;
  margin: 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.85rem;
}

.price-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--ink-muted);
  font-size: 0.98rem;
}

.price-list svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--green);
  margin-top: 1px;
}

/* Promise band
   -------------------------------------------------------------------------- */

.band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.band-grid {
  display: grid;
  gap: 2.25rem;
  padding: 3rem 0;
}

.band-item .k {
  display: block;
  font-family: var(--display);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.band-item .v {
  color: var(--ink-muted);
  font-size: 0.98rem;
  margin: 0;
}

/* Steps
   -------------------------------------------------------------------------- */

.steps {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  gap: 2.5rem;
}

.steps li {
  position: relative;
  padding-top: 2.25rem;
  border-top: 1px solid var(--line-strong);
}

.steps li h3 {
  margin-bottom: 0.5rem;
}

.steps li p {
  color: var(--ink-muted);
  margin: 0;
}

.steps .marker {
  position: absolute;
  top: -1px;
  left: 0;
  width: 3.5rem;
  height: 2px;
  background: var(--purple-bright);
}

/* Bento, what you get
   -------------------------------------------------------------------------- */

.bento {
  display: grid;
  gap: 1.25rem;
  margin-top: 3rem;
}

.tile {
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 1.9rem 1.6rem;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.tile:hover {
  border-color: rgba(124, 63, 191, 0.5);
  transform: translateY(-3px);
}

.tile h3 {
  margin-bottom: 0.45rem;
}

.tile p {
  color: var(--ink-muted);
  margin: 0;
  font-size: 0.99rem;
}

.tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(124, 63, 191, 0.2);
  border: 1px solid rgba(124, 63, 191, 0.4);
  color: var(--purple-tint);
  margin-bottom: 1.25rem;
}

.tile-icon svg {
  width: 22px;
  height: 22px;
}

/* Feature tile with a gradient face, for grid variation */
.tile-feature {
  background: linear-gradient(150deg, rgba(124, 63, 191, 0.4), rgba(20, 16, 27, 0.95) 62%);
  border-color: rgba(124, 63, 191, 0.45);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 15rem;
}

.tile-feature h3 {
  font-size: 1.6rem;
}

/* Examples
   -------------------------------------------------------------------------- */

.work {
  display: grid;
  gap: 1.25rem;
  margin-top: 3rem;
}

/*
  Swapping in real work: replace the .work-face element with a real image
  element pointing at a screenshot in /assets, give it descriptive alt text,
  then update the badge wording. Card and caption structure stay as they are.
*/
.work-card {
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}

.work-face {
  aspect-ratio: 16 / 11;
  display: flex;
  align-items: flex-end;
  padding: 1.4rem;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.15;
  border-bottom: 1px solid var(--line);
}

.work-card:nth-child(1) .work-face {
  background: linear-gradient(155deg, rgba(124, 63, 191, 0.45), rgba(20, 16, 27, 0.9));
}

.work-card:nth-child(2) .work-face {
  background: linear-gradient(155deg, rgba(82, 31, 136, 0.55), rgba(20, 16, 27, 0.9));
}

.work-card:nth-child(3) .work-face {
  background: linear-gradient(155deg, rgba(37, 211, 102, 0.16), rgba(20, 16, 27, 0.92));
}

.work-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.1rem 1.35rem 1.25rem;
}

.work-meta p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.badge {
  flex: none;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--purple-tint);
  border: 1px solid rgba(124, 63, 191, 0.45);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}

/* Questions, accordion
   -------------------------------------------------------------------------- */

/*
  Questions sit beside a contact card. Previously the accordion was capped at
  760px in an 1160px container, leaving the right half of the screen empty.
  The card fills it with something useful rather than filler, and is where the
  phone number finally appears for people who would rather ring than type.
*/
.qa-layout {
  display: grid;
  gap: 2rem;
  margin-top: 2.5rem;
}

@media (min-width: 1000px) {
  .qa-layout {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
  }
}

.qa {
  border-top: 1px solid var(--line);
}

.qa-aside {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 1.7rem 1.5rem;
}

@media (min-width: 1000px) {
  .qa-aside {
    position: sticky;
    top: 92px;
  }
}

.qa-aside h3 {
  margin-bottom: 0.4rem;
}

.qa-aside > p {
  color: var(--ink-muted);
  font-size: 0.95rem;
  margin: 0 0 1.4rem;
}

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}

.contact-list a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--ink);
}

.contact-list a:hover .contact-value {
  color: var(--purple-tint);
}

.contact-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(124, 63, 191, 0.2);
  border: 1px solid rgba(124, 63, 191, 0.4);
  color: var(--purple-tint);
}

.contact-icon svg {
  width: 19px;
  height: 19px;
}

.contact-label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.1rem;
}

.contact-value {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  transition: color 0.2s var(--ease);
}

.qa details {
  border-bottom: 1px solid var(--line);
}

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
  cursor: pointer;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  list-style: none;
}

.qa summary::-webkit-details-marker {
  display: none;
}

.qa summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--purple-tint);
  border-bottom: 2px solid var(--purple-tint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s var(--ease);
}

.qa details[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.qa details p {
  color: var(--ink-muted);
  margin: 0 0 1.5rem;
  max-width: 62ch;
}

/* Trust
   -------------------------------------------------------------------------- */

.trust {
  display: grid;
  gap: 0;
  margin-top: 3rem;
}

.trust-row {
  display: grid;
  gap: 0.4rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--line);
}

.trust-row:last-child {
  border-bottom: 1px solid var(--line);
}

.trust-row h3 {
  margin: 0;
  font-size: 1.1rem;
}

.trust-row p {
  margin: 0;
  color: var(--ink-muted);
}

.trust-row a {
  color: var(--purple-tint);
}

/* Reviews placeholder, stays empty until real ones exist */
.reviews-empty {
  margin-top: 2.5rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-card);
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--ink-muted);
  max-width: 620px;
}

.center .reviews-empty {
  margin-left: auto;
  margin-right: auto;
}

.reviews-empty p {
  margin: 0;
}

/* Closing CTA
   -------------------------------------------------------------------------- */

.close-cta {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
}

.close-cta .glow-c {
  position: absolute;
  bottom: -26rem;
  left: 50%;
  transform: translateX(-50%);
  width: 54rem;
  height: 44rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--purple-glow), transparent 68%);
  pointer-events: none;
}

.close-cta .wrap {
  position: relative;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 2rem;
}

/* Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line);
  padding: 4rem 0 2.5rem;
  font-size: 0.97rem;
}

.footer-grid {
  display: grid;
  gap: 2.5rem;
}

.footer-brand p {
  color: var(--ink-faint);
  max-width: 26ch;
  margin: 1rem 0 0;
}

.footer h2 {
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1rem;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.footer a {
  color: var(--ink-muted);
  text-decoration: none;
}

.footer a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.footer-legal {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 0.87rem;
}

.footer-legal p {
  margin: 0 0 0.4rem;
}

.footer-legal a {
  color: var(--ink-faint);
  text-decoration: underline;
}

/* Forms
   -------------------------------------------------------------------------- */

.form-col {
  max-width: 640px;
}

.form {
  margin-top: 2.5rem;
}

.field {
  margin-bottom: 1.6rem;
}

.field label,
.field .label {
  display: block;
  font-weight: 700;
  font-size: 0.97rem;
  margin-bottom: 0.5rem;
}

.field .hint {
  display: block;
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin-top: 0.2rem;
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-input);
  padding: 0.9rem 1rem;
  min-height: 48px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

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

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A79BB8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}

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

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--purple-tint);
  box-shadow: 0 0 0 3px rgba(124, 63, 191, 0.35);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.pill {
  position: relative;
}

.pill input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.pill span {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-muted);
  font-weight: 500;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
    color 0.2s var(--ease);
}

.pill input:checked + span {
  border-color: var(--purple-tint);
  background: rgba(124, 63, 191, 0.28);
  color: var(--ink);
}

.pill input:focus-visible + span {
  outline: 2px solid var(--purple-tint);
  outline-offset: 2px;
}

fieldset.field {
  border: 0;
  padding: 0;
  margin: 0 0 1.6rem;
}

/*
  Section headings inside the form. The brief is long because everything
  gathered here is something we would otherwise have to chase, and chasing is
  what breaks the 24 to 48 hour promise. Grouping keeps it from reading as a
  wall of inputs, and everything past the essentials is optional.
*/
.form-section {
  margin: 2.75rem 0 1.6rem;
  padding-top: 1.9rem;
  border-top: 1px solid var(--line);
}

.form-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.form-section h2 {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  word-spacing: 0.12em;
  margin: 0 0 0.3rem;
}

.form-section p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.92rem;
}

.optional {
  font-weight: 400;
  color: var(--ink-faint);
  font-size: 0.85rem;
}

/* File inputs. The native control is unstyleable, so the button half is
   themed and the rest left alone rather than faked. */
.field input[type="file"] {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-input);
  padding: 0.85rem 0.9rem;
}

.field input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  background: rgba(124, 63, 191, 0.28);
  border: 1px solid rgba(124, 63, 191, 0.5);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  margin-right: 0.9rem;
  cursor: pointer;
}

.field input[type="file"]:focus {
  outline: none;
  border-color: var(--purple-tint);
  box-shadow: 0 0 0 3px rgba(124, 63, 191, 0.35);
}

.form-note {
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin: 1.1rem 0 0;
}

.hidden-field {
  position: absolute;
  left: -9999px;
}

/* Page hero for subpages
   -------------------------------------------------------------------------- */

.page-head {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 4.5rem) 0 1rem;
}

.page-head .wrap {
  position: relative;
}

/* Prose
   -------------------------------------------------------------------------- */

.prose {
  max-width: 68ch;
}

.prose h2 {
  margin-top: 3rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.prose p,
.prose li {
  color: var(--ink-muted);
}

.prose strong {
  color: var(--ink);
}

.prose a {
  color: var(--purple-tint);
}

/* Thanks
   -------------------------------------------------------------------------- */

.thanks {
  min-height: 68vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 4rem 0;
}

.thanks-in {
  max-width: 560px;
}

.tick {
  width: 68px;
  height: 68px;
  margin: 0 auto 1.75rem;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.14);
  border: 1px solid rgba(37, 211, 102, 0.5);
  display: grid;
  place-items: center;
  color: var(--green);
}

.tick svg {
  width: 30px;
  height: 30px;
}

/* Pointer spotlight
   A soft brand glow that tracks the cursor inside marked containers. The
   position comes from --mx / --my, written once per animation frame by a
   single shared listener, so adding more of these costs nothing extra.
   Pointer devices only: it is created lazily and never exists on touch.
   -------------------------------------------------------------------------- */

.spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  background: radial-gradient(
    22rem 22rem at var(--mx, 50%) var(--my, 50%),
    rgba(124, 63, 191, 0.28),
    transparent 68%
  );
}

[data-spotlight]:hover .spotlight {
  opacity: 1;
}

/* Card spotlight
   The border lights where the cursor is, which reads as material rather than
   as an effect. Uses the same --mx / --my, no extra listeners.
   -------------------------------------------------------------------------- */

.tile,
.trust-row,
.work-card {
  position: relative;
}

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    14rem 14rem at var(--mx, 50%) var(--my, 50%),
    rgba(201, 166, 245, 0.75),
    transparent 62%
  );
  /* Mask to the 1px ring so only the border lights, not the whole card. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}

.tile:hover::after {
  opacity: 1;
}

/* Scroll progress
   Driven by a CSS scroll timeline, so it runs off the main thread entirely
   and costs no JavaScript. Hidden where that is unsupported rather than
   shipping a stuck empty bar.
   -------------------------------------------------------------------------- */

.scroll-progress {
  display: none;
}

@supports (animation-timeline: scroll()) {
  .scroll-progress {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    z-index: 60;
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--purple), var(--purple-tint));
    animation: progress linear both;
    animation-timeline: scroll();
  }

  @keyframes progress {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }
}

/* Sticky mobile call to action
   Appears once the hero is out of view. Phones only, where the header CTA has
   scrolled away.
   -------------------------------------------------------------------------- */

.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(11, 9, 16, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 0.4s var(--ease);
}

.mobile-cta.show {
  transform: none;
}

.mobile-cta .btn {
  width: 100%;
  padding: 0.95rem 1.5rem;
}

@media (min-width: 700px) {
  .mobile-cta {
    display: none;
  }
}

/* Motion, level 5. Reveal on scroll, driven by IntersectionObserver.
   .js is set by main.js so content is never hidden without JS.
   -------------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--d, 0s);
}

.js [data-reveal].shown {
  opacity: 1;
  transform: none;
}

/* Tablet
   -------------------------------------------------------------------------- */

@media (min-width: 700px) {
  .band-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .work {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
  }

  .trust {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
  }
}

/* Desktop
   -------------------------------------------------------------------------- */

@media (min-width: 1000px) {
  .nav-btn {
    display: none;
  }

  .nav {
    display: block;
    position: static;
    background: none;
    border: 0;
    padding: 0;
  }

  .nav ul {
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
  }

  .nav a:not(.btn) {
    padding: 0.5rem 0.9rem;
    position: relative;
  }

  .nav a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.25rem;
    height: 1.5px;
    background: var(--purple-tint);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
  }

  .nav a:not(.btn):hover::after {
    transform: scaleX(1);
  }

  .nav .nav-cta {
    margin: 0 0 0 0.6rem;
  }

  .nav .nav-cta .btn {
    padding: 0.72rem 1.4rem;
    font-size: 0.95rem;
  }

  /* Asymmetric split, per variance 7 */
  .hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4.5rem;
    align-items: center;
  }

  .bento {
    grid-template-columns: repeat(3, 1fr);
  }

  .tile-feature {
    grid-column: span 2;
  }
}

/* Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .btn,
  .tile,
  .qa summary::after,
  .nav a::after {
    transition: none !important;
  }
}