/* ==========================================================================
   Loyalease — design system
   Dark theme replicated from the original Lovable build (veronicava.lovable.app):
   charcoal-teal ground, Playfair Display headlines, DM Sans body, teal primary,
   gold CTA with warm glow, frosted white cards.
   ========================================================================== */

:root {
  /* Ground */
  --bg:         hsl(200 20% 8%);     /* #101618 body */
  --bg-2:       hsl(200 18% 11%);    /* raised surfaces */
  --bg-3:       hsl(200 16% 14%);    /* higher surfaces / inputs */
  --line:       hsl(200 14% 16%);    /* borders on dark */

  --text:       hsl(195 15% 88%);    /* #DCE3E5 */
  --text-2:     hsl(195 12% 70%);
  --text-3:     hsl(195 10% 50%);

  /* Teal primary */
  --teal:       hsl(175 58% 40%);    /* rgb(43,161,151) */
  --teal-soft:  hsla(175 58% 40% / .08);
  --teal-line:  hsla(175 58% 40% / .3);
  --teal-bright:hsl(172 62% 55%);
  /* teal on LIGHT grounds — three tokens, not thirteen near-identical values */
  --teal-ink:   var(--teal-ink);   /* body-weight teal text on light */
  --teal-ink-deep: hsl(178 55% 25%);/* headings / emphasis on light */
  --teal-grad-a: hsl(175 52% 42%);  /* button gradient start */
  --teal-grad-b: hsl(178 58% 34%);  /* button gradient end */

  /* Gold CTA */
  --gold:       hsl(38 82% 62%);
  --gold-2:     hsl(45 90% 70%);
  --gold-ink:   hsl(30 40% 12%);     /* text on gold */
  --gold-glow:  hsla(38 82% 50% / .55);

  /* Frosted light cards */
  --card-bg:    hsla(0 0% 100% / .92);
  --card-line:  hsl(200 14% 86%);
  --card-text:  hsl(203 28% 12%);    /* #162127 */
  --card-text-2:hsl(203 14% 34%);
  --card-shadow:0 10px 32px -16px hsla(196 30% 20% / .18);

  /* Type */
  --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Playfair Display", Georgia, serif;

  /* Space */
  --wrap: 1140px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 7.5rem);

  --radius: 12px;
  --radius-lg: 16px;
}

/* --------------------------------------------------------- reset + base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

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

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700; line-height: 1.12;
  margin: 0 0 .5em; letter-spacing: -.01em; color: var(--text);
}
/* Scale ratios at 1440px: 72/44 = 1.64, 44/28 = 1.57, 28/17 = 1.65.
   The old 48px h2 over a 24px h3 was a 2.00 jump — card titles read as
   subordinate rather than as real content blocks. */
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.85rem, 3.9vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 2.1vw, 1.75rem); font-weight: 600; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* teal serif accent inside headlines */
.accent {
  color: var(--teal-bright);
  font-style: italic;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 5rem); }

.lede { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--text-2); max-width: 62ch; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--teal); color: #06211E; padding: .75rem 1.25rem; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

/* ---------------------------------------------------- eyebrow (teal pill) */
.eyebrow {
  display: inline-flex; align-items: center;
  padding: .35rem 1rem; border-radius: 999px;
  background: var(--teal-soft); border: 1px solid var(--teal-line);
  color: var(--teal-bright);
  font-size: .8rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 1.25rem;
}

/* ------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 1.7rem; border-radius: 999px;
  font-weight: 600; font-size: .97rem; text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* gold CTA with warm glow */
.btn--primary {
  background: linear-gradient(160deg, var(--gold-2) 0%, var(--gold) 100%);
  color: var(--gold-ink);
  box-shadow: 0 12px 30px -10px var(--gold-glow);
}
.btn--primary:hover { box-shadow: 0 16px 38px -10px var(--gold-glow); filter: brightness(1.04); }

/* glass secondary — teal hairline on dark */
.btn--ghost {
  background: hsla(200 20% 8% / .3);
  border-color: var(--teal-line); color: var(--text);
}
.btn--ghost:hover { border-color: var(--teal); background: var(--teal-soft); }

/* dark solid (used sparingly) */
.btn--dark { background: var(--teal); color: hsl(195 20% 98%); }
.btn--dark:hover { background: hsl(175 55% 45%); }

.btn--block { width: 100%; }
.btn--sm { padding: .6rem 1.2rem; font-size: .88rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }
.center .btn-row { justify-content: center; }

/* --------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: hsla(200 20% 8% / .75);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); background: hsla(200 20% 8% / .9); }

.nav { display: flex; align-items: center; gap: 1rem; height: 76px; }

.brand {
  display: inline-flex; align-items: baseline; gap: .1rem; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 1.5rem;
  margin-right: auto;
  background: linear-gradient(120deg, var(--teal-bright), hsl(185 45% 70%));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.brand-mark { display: none; }

/* one row on desktop: brand left, links + CTA right */
.site-nav { display: flex; align-items: center; gap: 1.25rem; }

.nav-links { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  text-decoration: none; padding: .5rem .8rem; border-radius: 8px;
  font-size: .9rem; font-weight: 500; color: hsla(195 15% 88% / .7);
  transition: color .15s ease;
}
.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current="page"] { color: var(--teal-bright); }

.nav-cta { display: flex; align-items: center; gap: .5rem; }

.nav-toggle {
  display: none; width: 42px; height: 42px; border: 1px solid var(--line); background: var(--bg-2);
  border-radius: 11px; cursor: pointer; padding: 0; place-items: center; color: var(--text);
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 900px) {
  .nav-toggle { display: grid; }
  .nav-links, .nav-cta { display: none; }
  .site-nav[data-open="true"] .nav-links,
  .site-nav[data-open="true"] .nav-cta {
    display: flex; flex-direction: column; align-items: stretch; gap: .25rem;
  }
  .site-nav[data-open="true"] {
    flex-direction: column; align-items: stretch;
    position: absolute; left: 0; right: 0; top: 76px;
    background: var(--bg-2); border-bottom: 1px solid var(--line);
    padding: 1rem var(--gutter) 1.5rem; box-shadow: 0 24px 48px -24px hsla(0 0% 0% / .6);
  }
  .site-nav[data-open="true"] .nav-links a { padding: .8rem .6rem; font-size: 1.05rem; }
  .site-nav[data-open="true"] .nav-cta { margin-top: .75rem; }
  .site-nav[data-open="true"] .btn { width: 100%; }
}

/* ----------------------------------------------------------------- hero */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(4rem, 9vw, 7rem) clamp(3.5rem, 8vw, 6rem);
}
/* full-bleed photo hero (homepage) */
.hero--photo {
  min-height: min(88vh, 860px);
  display: flex; align-items: center;
  text-align: center;
  padding-block: clamp(6rem, 12vw, 9rem);
}
.hero--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("/assets/img/hero-mixed.jpg") center center / cover no-repeat;
}
.hero--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* The office shot is bright, so the scrim has to work harder than it did
     for the old dark photo — white type must stay legible over the glazing. */
  /* A montage is busier than a single photo, so the scrim is heavier and adds
     a centre vignette to hold the headline clear of the tiles behind it. */
  background:
    radial-gradient(58% 50% at 50% 45%, hsla(200 26% 6% / .92) 0%, hsla(200 26% 6% / .62) 55%, transparent 78%),
    linear-gradient(to bottom, hsla(200 26% 6% / .88) 0%, hsla(200 26% 6% / .7) 35%, hsla(200 24% 7% / .82) 72%, var(--bg) 99%),
    radial-gradient(70% 60% at 50% 45%, hsla(175 58% 40% / .12), transparent 74%);
}
.hero--photo .wrap { display: flex; flex-direction: column; align-items: center; }
.hero--photo h1 { max-width: 18ch; text-shadow: 0 2px 30px hsla(200 20% 8% / .6); }
.hero--photo .lede { color: var(--text); opacity: .92; text-shadow: 0 1px 18px hsla(200 20% 8% / .7); }

.hero h1 { max-width: 20ch; }
.hero .lede { margin-top: 1.1rem; font-size: clamp(1.05rem, 1.8vw, 1.28rem); }
.hero .btn-row { margin-top: 2.1rem; justify-content: inherit; }
.hero--photo .btn-row { justify-content: center; }

.hero-flags { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem 1.4rem; margin-top: 2.4rem; font-size: .9rem; color: var(--text-3); }
.hero-flags strong { color: var(--text-2); font-weight: 600; }

/* --------------------------------------------------------------- badges */
.badge-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.hero--photo .badge-row { justify-content: center; }
.badge {
  display: inline-flex; align-items: center; gap: .45rem;
  background: hsla(200 18% 11% / .7); border: 1px solid var(--line); border-radius: 999px;
  padding: .42rem .95rem; font-size: .84rem; font-weight: 500; color: var(--text-2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.badge svg { width: 15px; height: 15px; color: var(--teal-bright); flex: none; }

/* ---------------------------------------------------------------- cards */
.grid { display: grid; gap: 1.4rem; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* frosted white card on dark ground — the signature surface */
.card {
  background: var(--card-bg); color: var(--card-text);
  border: 1px solid var(--card-line); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3.2vw, 2.2rem);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  display: flex; flex-direction: column; gap: .5rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card h3, .card h2 { color: var(--card-text); }
.card p { color: var(--card-text-2); font-size: .98rem; }
.card--link:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -20px hsla(196 30% 20% / .3); }
.card .card-foot { margin-top: auto; padding-top: 1.25rem; }

.card-icon {
  width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
  background: var(--teal-soft); border: 1px solid var(--teal-line); color: var(--teal); margin-bottom: 1rem;
}
.card-icon svg { width: 23px; height: 23px; }
.card-kicker {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal); margin-bottom: .6rem;
}

.arrow-link {
  display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
  font-weight: 600; font-size: .94rem; color: var(--teal);
}
.arrow-link svg { width: 16px; height: 16px; transition: transform .16s ease; }
.arrow-link:hover svg { transform: translateX(3px); }

/* ------------------------------------------- raised dark section (subtle) */
.on-dark { background: var(--bg-2); }
.on-dark .card { /* frosted cards stay light everywhere */ }
.on-dark .eyebrow { background: var(--teal-soft); }

/* dark-surface card variant for case studies on raised sections */
.card--dark {
  background: hsla(200 16% 14% / .6); color: var(--text);
  border-color: var(--line); box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.card--dark h3 { color: var(--text); }
.card--dark p { color: var(--text-2); }

/* ----------------------------------------------------------- case study */
.case-tag {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: hsl(33 75% 42%);   /* deep gold — readable on the frosted white cards */
}
.metrics { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.metric-value { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--teal-bright); line-height: 1.1; }
.metric-label { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-top: .3rem; }

.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; }
.stat-strip .metric-value { color: var(--teal-bright); }
.stat-strip .metric-label { color: var(--text-3); }

/* ---------------------------------------------------------------- steps */
.steps { counter-reset: step; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.step { position: relative; padding-top: 3.4rem; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--teal-soft); border: 1px solid var(--teal-line); color: var(--teal-bright);
  display: grid; place-items: center; font-weight: 700; font-size: 1rem;
  font-family: var(--font-display);
}
.step h3 { font-size: 1.15rem; font-family: var(--font-body); font-weight: 650; }
.step p { color: var(--text-2); font-size: .97rem; }

/* -------------------------------------------------------------- pricing */
.price-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.plan { position: relative; }
.plan--featured {
  border-color: var(--gold);
  box-shadow: 0 18px 50px -22px var(--gold-glow);
}
.plan-flag {
  position: absolute; top: -.8rem; left: 50%; transform: translateX(-50%);
  background: linear-gradient(160deg, var(--gold-2), var(--gold)); color: var(--gold-ink);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .32rem .9rem; border-radius: 999px; white-space: nowrap;
}
.plan-name { font-size: 1.05rem; font-weight: 700; margin-bottom: .25rem; color: var(--card-text); }
.plan-price { display: flex; align-items: baseline; gap: .3rem; margin: .5rem 0 .25rem; }
.plan-price b { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 700; color: var(--card-text); }
.plan-price span { color: var(--card-text-2); font-size: .95rem; }
.plan-note { font-size: .88rem; color: var(--card-text-2); margin-bottom: 1.25rem; }
.plan ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .6rem; }
.plan li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; color: var(--card-text-2); }
.plan li svg { width: 17px; height: 17px; color: var(--teal); flex: none; margin-top: .25rem; }

/* dark-surface plan card price on dark sections */
.card--dark .plan-price b { color: var(--text); }

/* ------------------------------------------------------------------ FAQ */
.faq { display: grid; gap: .75rem; max-width: 780px; margin-inline: auto; }
.faq details {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0; overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 1.4rem;
  font-weight: 600; font-size: 1.02rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px,-2px); }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq .faq-body { padding: 1.15rem 1.4rem; color: var(--text-2); font-size: .99rem; }

/* ----------------------------------------------------------------- form */
.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .4rem; }
.field label { font-size: .88rem; font-weight: 600; color: var(--card-text); }
.field .req { color: hsl(0 62% 55%); }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem 1rem; font: inherit; font-size: 1rem;
  border: 1px solid var(--card-line); border-radius: 11px;
  background: #fff; color: var(--card-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px hsla(175 58% 40% / .18);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: hsl(0 62% 55%); box-shadow: 0 0 0 4px hsla(0 62% 55% / .12);
}
.field-error { font-size: .84rem; color: hsl(0 62% 48%); min-height: 0; }
.field-error:empty { display: none; }
.form-row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form-status { border-radius: 11px; padding: .9rem 1.1rem; font-size: .95rem; display: none; }
.form-status.is-error { display: block; background: hsl(6 70% 96%); border: 1px solid hsl(6 60% 82%); color: hsl(6 65% 32%); }
.form-status.is-ok { display: block; background: hsl(172 45% 94%); border: 1px solid hsl(172 40% 75%); color: hsl(172 60% 20%); }

.btn[aria-busy="true"] { opacity: .65; pointer-events: none; }

/* the contact form lives in a light panel; its intro copy is dark-on-light */
.panel .muted { color: var(--card-text-2); }

/* ----------------------------------------------------------------- misc */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: center; }

.panel {
  background: var(--card-bg); color: var(--card-text);
  border: 1px solid var(--card-line); border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.panel h2, .panel h3 { color: var(--card-text); }
.panel p { color: var(--card-text-2); }

/* dark translucent panel variant */
.panel--dark {
  background: hsla(200 16% 14% / .55); color: var(--text);
  border-color: var(--line); box-shadow: none;
}
.panel--dark h2, .panel--dark h3 { color: var(--text); }
.panel--dark p { color: var(--text-2); }

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.tick-list li { display: flex; gap: .65rem; align-items: flex-start; color: var(--text-2); }
.tick-list li svg { width: 18px; height: 18px; color: var(--teal); flex: none; margin-top: .3rem; }
.panel .tick-list li { color: var(--card-text-2); }
.panel--dark .tick-list li { color: var(--text-2); }
.tick-list a { color: var(--teal); }
.panel .tick-list a { color: var(--teal); }

/* ---------------------------------------------------------------- CTA band */
.cta-band {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--bg-2) 0%, hsl(190 22% 13%) 100%);
  border: 1px solid var(--teal-line);
  color: var(--text); border-radius: var(--radius-lg);
  padding: clamp(2.25rem, 5.5vw, 4rem); text-align: center;
}
.cta-band::before {
  content: ""; position: absolute; inset: -40% -20% auto; height: 120%;
  background: radial-gradient(closest-side, hsla(175 58% 40% / .18), transparent 70%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--text); }
.cta-band p { color: var(--text-2); max-width: 54ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 1.75rem; }

/* --------------------------------------------------------------- footer */
.site-footer { background: hsl(200 22% 6%); color: var(--text-2); border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer .brand { margin-right: 0; }
.site-footer h4 { color: var(--text); font-family: var(--font-body); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; font-weight: 700; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-footer a { text-decoration: none; color: var(--text-2); font-size: .95rem; }
.site-footer a:hover { color: var(--teal-bright); }
.footer-bottom {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .87rem; color: var(--text-3);
}

/* ------------------------------------------------------------ utilities */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.75rem; }
.mt-4 { margin-top: 2.5rem; }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--text-3); font-size: .9rem; }
.muted a { color: var(--teal); }
.nowrap { white-space: nowrap; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* wide table scroll guard */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------------- imagery */
.img-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -28px hsla(0 0% 0% / .55);
  overflow: hidden;
}
.img-card img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* ------------------------------------------------------- hero entrance */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero--photo .eyebrow      { animation: rise .7s .05s ease both; }
.hero--photo h1            { animation: rise .7s .15s ease both; }
.hero--photo .lede         { animation: rise .7s .28s ease both; }
.hero--photo .btn-row      { animation: rise .7s .4s ease both; }
.hero--photo .badge-row    { animation: rise .7s .5s ease both; }
.hero--photo .hero-flags   { animation: rise .7s .6s ease both; }
@media (prefers-reduced-motion: reduce) {
  .hero--photo .eyebrow, .hero--photo h1, .hero--photo .lede,
  .hero--photo .btn-row, .hero--photo .badge-row, .hero--photo .hero-flags { animation: none; }
}

/* staggered reveals inside grids */
.grid > .reveal:nth-child(2), .price-grid > .reveal:nth-child(2), .steps > .reveal:nth-child(2) { transition-delay: .1s; }
.grid > .reveal:nth-child(3), .price-grid > .reveal:nth-child(3), .steps > .reveal:nth-child(3) { transition-delay: .2s; }
.grid > .reveal:nth-child(4), .steps > .reveal:nth-child(4) { transition-delay: .3s; }
.grid > .reveal:nth-child(5) { transition-delay: .38s; }
.grid > .reveal:nth-child(6) { transition-delay: .46s; }

/* scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 200;
  background: linear-gradient(90deg, var(--teal), var(--teal-bright));
  box-shadow: 0 0 12px hsla(175 58% 40% / .8);
  pointer-events: none;
}

/* icon hover life on cards */
.card--link:hover .card-icon { background: hsla(175 58% 40% / .16); transform: scale(1.06); }
.card-icon { transition: transform .18s ease, background .18s ease; }

/* step connector line */
@media (min-width: 720px) {
  .steps { position: relative; }
  .steps::before {
    content: ""; position: absolute; top: 22px; left: 60px; right: 60px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--teal-line) 15%, var(--teal-line) 85%, transparent);
  }
  .step::before { position: absolute; z-index: 1; background: var(--bg); border-color: var(--teal-line); }
  .on-dark .step::before, [style*="--paper-2"] .step::before { background: var(--bg-2); }
}

/* gold star row (hero trust line) */
.stars { display: inline-flex; gap: .18rem; margin-right: .5rem; vertical-align: -2px; }
.stars svg { width: 15px; height: 15px; color: var(--gold); }

/* footer: give the columns a touch more presence */
.site-footer .brand { font-size: 1.35rem; }

/* ==========================================================================
   CONTRAST + PROPORTION FIXES
   The frosted cards are light surfaces sitting on a dark page. Anything
   inside them must use the dark-on-light scale, never the page's light text.
   ========================================================================== */

/* --- buttons inside light cards ---------------------------------------- */
.card .btn--ghost,
.panel .btn--ghost {
  border-color: var(--card-line);
  background: transparent;
  color: var(--card-text);
}
.card .btn--ghost:hover,
.panel .btn--ghost:hover {
  border-color: var(--teal);
  background: hsla(175 58% 40% / .08);
  color: var(--card-text);
}
.card .btn--dark, .panel .btn--dark { background: var(--teal); color: #fff; }

/* --- prices on dark sections were white-on-white ----------------------- */
.card .plan-price b,
.card .plan-price b[style] { color: var(--card-text) !important; }
.card .plan-price span     { color: var(--card-text-2); }
.card .card-kicker         { color: var(--teal-ink); }
.card .muted               { color: var(--card-text-2); }
.card .arrow-link          { color: var(--teal-ink); }
.card .tick-list li        { color: var(--card-text-2); }
.card .metric-value        { color: var(--teal-ink); }
.card .metric-label        { color: var(--card-text-2); }
.card .metrics             { border-top-color: var(--card-line); }

/* --- equal-height, evenly proportioned cards --------------------------- */
.grid, .price-grid { align-items: stretch; }
.grid > *, .price-grid > * { height: 100%; }
.card { height: 100%; }
.price-grid .plan ul { flex: 1 1 auto; }
.price-grid .plan .card-foot { margin-top: auto; }

/* one-off build cards: pin the price row so all three line up */
.build-card .plan-price { margin-top: .35rem; min-height: 3.6rem; align-items: center; }
.build-card p { min-height: 4.6rem; }

/* --------------------------------------------------------------- DEPTH */
/* Layered ground: alternating sections get their own tone + a hairline,
   so the page reads as stacked planes instead of one flat sheet. */
.section { position: relative; }
.on-dark {
  background:
    radial-gradient(90% 60% at 50% 0%, hsla(175 45% 32% / .07), transparent 60%),
    var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section--alt {
  background: linear-gradient(180deg, hsl(200 19% 9.5%), hsl(200 20% 8%));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* frosted cards get real elevation on the dark ground */
.card, .panel {
  box-shadow:
    0 1px 0 hsla(0 0% 100% / .5) inset,
    0 18px 40px -22px hsla(0 0% 0% / .75),
    0 2px 8px -4px hsla(0 0% 0% / .4);
}
.card--link:hover {
  box-shadow:
    0 1px 0 hsla(0 0% 100% / .6) inset,
    0 30px 60px -26px hsla(0 0% 0% / .85),
    0 4px 14px -6px hsla(0 0% 0% / .45);
}

/* ambient teal glow behind major section headings */
.section > .wrap > .center { position: relative; }
.section > .wrap > .center::before {
  content: ""; position: absolute; left: 50%; top: -30%;
  width: 620px; height: 320px; transform: translateX(-50%);
  background: radial-gradient(closest-side, hsla(175 58% 40% / .09), transparent 72%);
  pointer-events: none; z-index: -1;
}

/* ------------------------------------------------------- gallery grid */
.gallery { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tile {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--bg-2);
  box-shadow: 0 14px 34px -20px hsla(0 0% 0% / .8);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.tile:hover { transform: translateY(-3px); border-color: var(--teal-line); box-shadow: 0 24px 50px -22px hsla(0 0% 0% / .9); }
.tile:hover img { transform: scale(1.04); }
.tile figcaption {
  padding: .85rem 1rem;
  border-top: 1px solid var(--line);
  background: hsla(200 18% 11% / .9);
}
.tile .tile-kicker { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: .2rem; }
.tile .tile-title { font-size: .92rem; color: var(--text); font-weight: 500; }

/* ------------------------------------------------------ comparison table */
.cmp { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px; }
.cmp caption { text-align: left; color: var(--text-3); font-size: .88rem; padding-bottom: .75rem; }
.cmp th, .cmp td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.cmp thead th { color: var(--text); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; border-bottom-color: var(--teal-line); }
.cmp td:first-child { color: var(--text-2); }
.cmp td { color: var(--text-2); }
.cmp .col-vs { color: hsl(6 55% 68%); }
.cmp .col-va { color: var(--teal-bright); font-weight: 600; }
.cmp tfoot td { font-weight: 700; color: var(--text); border-bottom: 0; border-top: 1px solid var(--teal-line); }

/* big savings figure */
.savings {
  display: grid; place-items: center; text-align: center;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--teal-line);
  background: radial-gradient(closest-side, hsla(175 58% 40% / .12), transparent 75%), var(--bg-2);
}
.savings b {
  display: block; font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 4.25rem); line-height: 1; color: var(--teal-bright);
}

/* -------------------------------------------------------- filter chips */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2rem; }
.chip {
  padding: .45rem 1.05rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--text-2);
  font: inherit; font-size: .87rem; font-weight: 500;
  transition: all .16s ease;
}
.chip:hover { border-color: var(--teal-line); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--teal-soft); border-color: var(--teal); color: var(--teal-bright); }
.tile[hidden] { display: none; }

/* website screenshots: full-page captures, so anchor to the top */


/* ------------------------------------------------ case study fact chips */
.case-sub {
  font-family: var(--font-display); font-size: 1.02rem; font-style: italic;
  color: var(--teal-ink); margin: -.35rem 0 1rem;
}
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.25rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--card-line); }
.facts li {
  font-size: .76rem; font-weight: 600; letter-spacing: .02em;
  padding: .3rem .7rem; border-radius: 999px;
  background: hsla(175 58% 40% / .1); color: var(--teal-ink);
  border: 1px solid hsla(175 58% 40% / .22);
}

/* --------------------------------------------------------- trust strip */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 2.25rem; }
.trust-label { text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1.5rem; }
.trust-names { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2.25rem; }
.trust-names span {
  font-family: var(--font-display); font-size: clamp(1rem, 1.7vw, 1.22rem);
  color: var(--text-2); opacity: .82; white-space: nowrap;
  transition: opacity .2s ease, color .2s ease;
}
.trust-names span:hover { opacity: 1; color: var(--teal-bright); }

/* ------------------------------------------------- assurance (risk reversal) */
.assurance { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.assurance-item {
  padding: 1.15rem 1.25rem; border-radius: var(--radius);
  border: 1px solid var(--teal-line); background: hsla(175 58% 40% / .05);
}
.assurance-item strong { display: block; color: var(--teal-bright); font-size: .95rem; margin-bottom: .3rem; }
.assurance-item span { color: var(--text-2); font-size: .9rem; line-height: 1.55; }

/* ------------------------------------------------ selected-plan banner */
.selected-banner {
  margin: 0; padding: .8rem 1.05rem; border-radius: 11px;
  background: hsla(175 58% 40% / .1); border: 1px solid hsla(175 58% 40% / .35);
  color: var(--teal-ink-deep); font-weight: 600; font-size: .93rem;
}
.selected-banner[hidden] { display: none; }

/* optgroup readability in the light form */
.field select optgroup { color: var(--card-text); font-style: normal; font-weight: 700; }
.field select option { color: var(--card-text); font-weight: 400; }

/* ==========================================================================
   CENTRED LAYOUT
   CSS grid left-aligns an incomplete final row, so 5 pricing cards render as
   3 + 2-hanging-left. Flex-wrap with justify-content:center makes any orphan
   row centre itself, while flex-basis keeps the columns even.
   ========================================================================== */
.price-grid,
.grid--3,
.grid--4,
.assurance {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
}
.price-grid > * { flex: 1 1 290px; max-width: 360px; }
.grid--3 > *    { flex: 1 1 290px; max-width: 380px; }
.grid--4 > *    { flex: 1 1 210px; max-width: 300px; }
.assurance > *  { flex: 1 1 230px; max-width: 320px; }

.grid--2 { justify-items: center; }
.grid--2 > * { width: 100%; }

/* gallery keeps its own auto-fill rhythm but centres leftovers */
.gallery { justify-content: center; }

/* pricing card header reads better centred; feature lists stay left for scanning */
.plan .plan-name,
.plan .plan-price,
.plan .plan-note { text-align: center; }
.plan .plan-price { justify-content: center; }

/* build cards: centre the whole block, they are short */
.build-card { text-align: center; }
.build-card .plan-price { justify-content: center; }
.build-card .card-icon { margin-inline: auto; }

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 900px) {
  :root { --section-y: clamp(3.25rem, 9vw, 4.5rem); }
  .split { gap: 2rem; }
}

@media (max-width: 640px) {
  :root {
    --gutter: 1.15rem;
    --section-y: 3rem;
    --radius-lg: 14px;
  }
  body { font-size: 1rem; }

  h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); line-height: 1.15; }
  h2 { font-size: clamp(1.6rem, 6.5vw, 2.05rem); }
  h3 { font-size: 1.15rem; }
  .lede { font-size: 1rem; }

  /* one column, full width, nothing squeezed */
  .price-grid > *, .grid--3 > *, .grid--4 > *, .assurance > * {
    flex: 1 1 100%; max-width: 100%;
  }
  .gallery { grid-template-columns: 1fr; }

  .hero--photo { min-height: auto; padding-block: 3.5rem 2.75rem; }
  .hero--photo h1 { max-width: 100%; }
  .hero--photo::before { background-position: 60% center; }

  /* full-width stacked CTAs — easier to hit with a thumb */
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
  .badge-row { justify-content: flex-start; }
  .badge { font-size: .78rem; }

  .card, .panel { padding: 1.35rem 1.2rem; }
  .cta-band { padding: 1.75rem 1.25rem; }

  .steps { gap: 1.5rem; }
  .steps::before { display: none; }

  .faq summary { padding: 1rem 1.1rem; font-size: .97rem; }
  .faq .faq-body { padding: 1rem 1.1rem; }

  /* the cost table scrolls rather than squashing */
  .cmp { min-width: 520px; font-size: .88rem; }
  .cmp th, .cmp td { padding: .7rem .8rem; }
  .scroll-x { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }

  .footer-bottom { flex-direction: column; gap: .5rem; }
  .trust-names { gap: .6rem 1.25rem; }
  .trust-names span { font-size: .95rem; }

  .savings b { font-size: clamp(2.25rem, 12vw, 3rem); }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .chips { gap: .35rem; }
  .chip { padding: .4rem .8rem; font-size: .8rem; }
}

/* touch targets: never smaller than ~44px on coarse pointers */
@media (pointer: coarse) {
  .nav-links a { padding: .75rem .8rem; }
  .btn { padding-block: .95rem; }
  .chip { padding-block: .6rem; }
  .card--link:hover, .tile:hover { transform: none; }
  .tile:hover img { transform: none; }
}

/* ==========================================================================
   BUTTON COLOUR PASS
   Every button now carries brand colour. Hierarchy is kept by weight:
   gold gradient = the one action on the page, teal = everything else.
   ========================================================================== */

/* secondary on LIGHT cards: teal fill on tint, not a grey outline */
.card .btn--ghost,
.panel .btn--ghost {
  background: linear-gradient(160deg, var(--teal-grad-a), var(--teal-grad-b));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px -10px hsla(175 58% 30% / .65);
}
.card .btn--ghost:hover,
.panel .btn--ghost:hover {
  background: linear-gradient(160deg, hsl(175 56% 47%), hsl(178 60% 38%));
  color: #fff;
  box-shadow: 0 12px 26px -10px hsla(175 58% 30% / .8);
}

/* secondary on the DARK ground: teal-tinted glass with teal text */
.btn--ghost {
  background: hsla(175 58% 40% / .12);
  border-color: hsla(175 58% 40% / .5);
  color: var(--teal-bright);
}
.btn--ghost:hover {
  background: hsla(175 58% 40% / .22);
  border-color: var(--teal);
  color: #fff;
}

/* dark/solid variant stays teal and gets depth */
.btn--dark {
  background: linear-gradient(160deg, var(--teal-grad-a), var(--teal-grad-b));
  color: #fff;
  box-shadow: 0 8px 20px -10px hsla(175 58% 30% / .6);
}
.btn--dark:hover { background: linear-gradient(160deg, hsl(175 56% 47%), hsl(178 60% 38%)); }

/* gold primary: richer, with a subtle top highlight */
.btn--primary {
  background: linear-gradient(160deg, hsl(45 92% 72%) 0%, hsl(38 84% 58%) 100%);
  box-shadow: 0 1px 0 hsla(0 0% 100% / .5) inset, 0 12px 28px -10px var(--gold-glow);
}
.btn--primary:hover {
  background: linear-gradient(160deg, hsl(45 95% 76%) 0%, hsl(38 88% 62%) 100%);
  box-shadow: 0 1px 0 hsla(0 0% 100% / .6) inset, 0 16px 36px -10px var(--gold-glow);
}

/* the featured plan's own button keeps gold; siblings read teal — clear ladder */

/* ==========================================================================
   DEPTH — the page was reading as one flat sheet of #101618
   ========================================================================== */

/* 1. Fixed aurora field behind everything: two soft teal pools and a warm
      gold one, so scrolling reveals colour shifts instead of dead charcoal. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(58% 42% at 12% 8%,  hsla(175 58% 40% / .14), transparent 68%),
    radial-gradient(52% 38% at 88% 32%, hsla(190 55% 38% / .11), transparent 70%),
    radial-gradient(46% 34% at 22% 74%, hsla(38 70% 50% / .07),  transparent 72%),
    radial-gradient(60% 44% at 78% 96%, hsla(175 50% 36% / .10), transparent 72%);
}

/* 2. Fine grain over the whole page — kills banding and the plastic-flat look. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 3. Sections sit on translucent tints so the aurora shows through */
.on-dark {
  background:
    radial-gradient(90% 60% at 50% 0%, hsla(175 45% 32% / .09), transparent 62%),
    hsla(200 18% 11% / .72);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.section--alt {
  background: linear-gradient(180deg, hsla(200 19% 10% / .82), hsla(200 20% 8% / .55));
}

/* 4. Hairline separators that fade at the edges — softer than a hard border */
.on-dark, .section--alt { border-top: 0; border-bottom: 0; position: relative; }
.on-dark::before, .on-dark::after,
.section--alt::before, .section--alt::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, hsla(175 58% 40% / .35), transparent);
}
.on-dark::before, .section--alt::before { top: 0; }
.on-dark::after,  .section--alt::after  { bottom: 0; }

/* 5. Editorial image band — a wide photo that breaks up long text stretches */
.band {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -34px hsla(0 0% 0% / .9);
}
.band img { width: 100%; height: clamp(220px, 32vw, 380px); object-fit: cover; display: block; }
.band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, hsla(200 20% 8% / .88) 0%, hsla(200 20% 8% / .45) 45%, hsla(200 20% 8% / .15) 100%);
}
.band-copy {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem); z-index: 1; max-width: 34rem;
}
.band-copy h3 { color: #fff; margin-bottom: .4rem; }
.band-copy p { color: var(--text-2); margin: 0; }
@media (max-width: 640px) {
  .band img { height: 300px; }
  .band::after { background: linear-gradient(180deg, hsla(200 20% 8% / .45), hsla(200 20% 8% / .92)); }
  .band-copy { max-width: 100%; justify-content: flex-end; }
}

/* ==========================================================================
   GALLERY — masonry columns, tiles hug their image, click for full size
   ========================================================================== */
.gallery {
  display: block;
  columns: 4 240px;
  column-gap: 1.1rem;
}
@media (max-width: 980px) { .gallery { columns: 3 220px; } }
@media (max-width: 700px) { .gallery { columns: 2 160px; } }
@media (max-width: 460px) { .gallery { columns: 1; } }

.tile {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  display: block; margin: 0 0 1.1rem;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-2);
  box-shadow: 0 14px 34px -22px hsla(0 0% 0% / .85);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tile:hover { transform: translateY(-3px); border-color: var(--teal-line); box-shadow: 0 24px 50px -24px hsla(0 0% 0% / .95); }

/* the image button: no padding, no fixed height — zero dead space */
.tile-btn {
  display: block; position: relative; width: 100%;
  padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in;
  line-height: 0;
}
.tile-btn img { display: block; width: 100%; height: auto; }
.tile-zoom {
  position: absolute; top: .6rem; right: .6rem;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: hsla(200 20% 8% / .72); color: #fff;
  opacity: 0; transform: scale(.85); transition: opacity .18s ease, transform .18s ease;
  backdrop-filter: blur(4px);
}
.tile-zoom svg { width: 16px; height: 16px; }
.tile:hover .tile-zoom, .tile-btn:focus-visible .tile-zoom { opacity: 1; transform: scale(1); }

.tile figcaption {
  padding: .7rem .85rem;
  border-top: 1px solid var(--line);
  background: hsla(200 18% 11% / .92);
}
.tile-kicker { font-size: .63rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: .15rem; }
.tile-title  { font-size: .86rem; color: var(--text); font-weight: 500; line-height: 1.35; display: block; }
.tile-desc   { font-size: .8rem; color: var(--text-3); display: block; margin-top: .3rem; line-height: 1.45; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------- lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem;
  padding: clamp(.75rem, 3vw, 2rem);
  background: hsla(200 25% 4% / .93);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: lbIn .18s ease;
}
.lightbox[hidden] { display: none; }
@keyframes lbIn { from { opacity: 0 } to { opacity: 1 } }

.lightbox-inner { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .9rem; min-width: 0; }
.lightbox-inner img {
  max-width: 100%; max-height: 82vh; width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 40px 90px -30px hsla(0 0% 0% / .9);
  background: #fff;
}
.lightbox-inner figcaption { color: var(--text-2); font-size: .92rem; text-align: center; }

.lightbox-close {
  position: absolute; top: clamp(.75rem, 3vw, 1.5rem); right: clamp(.75rem, 3vw, 1.5rem);
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: hsla(0 0% 100% / .1); border: 1px solid hsla(0 0% 100% / .2); color: #fff;
  display: grid; place-items: center;
}
.lightbox-close:hover { background: hsla(0 0% 100% / .18); }
.lightbox-close svg { width: 20px; height: 20px; }

.lightbox-nav {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; flex: none;
  background: hsla(0 0% 100% / .09); border: 1px solid hsla(0 0% 100% / .18); color: #fff;
  display: grid; place-items: center;
}
.lightbox-nav:hover { background: hsla(0 0% 100% / .18); }
.lightbox-nav svg { width: 22px; height: 22px; }
@media (max-width: 640px) {
  .lightbox { grid-template-columns: 1fr; }
  .lightbox-nav { position: absolute; bottom: 1rem; }
  .lightbox-prev { left: 1rem; }
  .lightbox-next { right: 1rem; }
  .lightbox-inner img { max-height: 68vh; }
}
body.lb-open { overflow: hidden; }

/* ---------------------------------------------------------- live builds */
.live-grid { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.live-card {
  display: flex; flex-direction: column; text-decoration: none;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-2);
  box-shadow: 0 14px 34px -22px hsla(0 0% 0% / .85);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.live-card:hover { transform: translateY(-3px); border-color: var(--teal); box-shadow: 0 26px 54px -24px hsla(0 0% 0% / .95); }
.live-shot { display: block; line-height: 0; border-bottom: 1px solid var(--line); }
.live-shot img { width: 100%; height: 165px; object-fit: cover; object-position: top center; display: block; }
.live-meta { display: block; padding: .9rem 1rem 1rem; }
.live-name { display: block; font-weight: 600; color: var(--text); font-size: .98rem; }
.live-desc { display: block; color: var(--text-3); font-size: .85rem; margin-top: .15rem; }
.live-go {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .7rem;
  color: var(--teal-bright); font-size: .83rem; font-weight: 600;
}
.live-go svg { width: 14px; height: 14px; transition: transform .16s ease; }
.live-card:hover .live-go svg { transform: translate(2px, -2px); }

/* ==========================================================================
   LIGHT SECTIONS — break up the dark, give the page rhythm
   ========================================================================== */
.section--light {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, #FAF9F7 0%, #F1EFEB 100%);
  color: #16232A;
}
.section--light::before, .section--light::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, hsla(175 58% 40% / .4), transparent);
}
.section--light::before { top: 0; } .section--light::after { bottom: 0; }

.section--light h1, .section--light h2, .section--light h3, .section--light h4 { color: #0E1A20; }
.section--light p, .section--light .lede { color: #4A5A62; }
.section--light .eyebrow { color: var(--teal-ink); }
.section--light .eyebrow::before { background: hsla(175 58% 35% / .45); }
.section--light .muted { color: #6B7A82; }

/* cards on a light ground: white, hairline, soft lift */
.section--light .card,
.section--light .panel {
  background: #fff; border-color: #E5E1DA;
  box-shadow: 0 1px 2px hsla(200 20% 20% / .04), 0 14px 34px -22px hsla(200 25% 20% / .3);
}
.section--light .card--link:hover { box-shadow: 0 2px 4px hsla(200 20% 20% / .05), 0 24px 46px -22px hsla(200 25% 20% / .4); border-color: #D6D0C6; }
.section--light .card-icon { background: hsla(175 58% 40% / .1); color: var(--teal-ink); }
.section--light .card-kicker { color: var(--teal-ink); }
.section--light .tick-list li { color: #4A5A62; }
.section--light .faq details { background: #fff; border-color: #E5E1DA; }
.section--light .faq summary { color: #16232A; }
.section--light .faq .faq-body { color: #4A5A62; }
.section--light .faq summary::after { border-color: #7A8A92; }
.section--light .step p { color: #4A5A62; }
.section--light .step::before { background: var(--teal-ink); color: #fff; }
.section--light .divider { background: #E5E1DA; }
.section--light .btn--ghost {
  background: linear-gradient(160deg, var(--teal-grad-a), var(--teal-grad-b));
  border-color: transparent; color: #fff;
}
.section--light .trust-names span { color: #4A5A62; }
.section--light .trust-label { color: #78878F; }

/* ==========================================================================
   PAGE HEROES WITH IMAGERY
   ========================================================================== */
.hero--img {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(4.5rem, 11vw, 8rem) clamp(3.5rem, 8vw, 6rem);
  border-bottom: 1px solid var(--line);
}
.hero--img::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--hero-img);
  background-size: cover; background-position: center;
  transform: scale(1.04);
}
.hero--img::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, hsla(200 26% 6% / .96) 0%, hsla(200 24% 7% / .9) 42%, hsla(200 22% 8% / .68) 100%),
    radial-gradient(70% 60% at 80% 20%, hsla(175 58% 40% / .16), transparent 70%);
}
.hero--img .eyebrow { color: var(--teal-bright); }
.hero--img .eyebrow::before { background: hsla(172 62% 55% / .5); }

/* ==========================================================================
   CARDS — equal height, richer, icon-led
   ========================================================================== */
.grid, .price-grid, .grid--3, .grid--4 { align-items: stretch; }
/* Only card-like children become flex columns. Applying display:flex to
   every grid child turned plain <ul>s into flex rows. */
.grid > .card, .grid--3 > .card, .grid--4 > .card, .price-grid > .card,
.grid > article, .grid--3 > article, .grid--4 > article, .price-grid > article {
  display: flex; align-self: stretch;
}
.grid > *, .grid--3 > *, .grid--4 > *, .price-grid > * { align-self: stretch; }
.card { width: 100%; height: auto; display: flex; flex-direction: column; }
.card > :last-child { margin-top: auto; }
.card p:last-of-type { margin-bottom: 0; }
.card .card-foot { margin-top: auto; padding-top: 1.4rem; }

/* icon tile: bigger, tinted, with a ring */
.card-icon {
  width: 52px; height: 52px; border-radius: 15px;
  box-shadow: 0 0 0 1px hsla(175 58% 40% / .22), 0 8px 20px -12px hsla(175 58% 30% / .5);
}
.card-icon svg { width: 25px; height: 25px; }
.card--link:hover .card-icon { transform: translateY(-2px) scale(1.04); }
.card-icon { transition: transform .2s ease; }

/* subtle top accent that appears on hover */
.card--link { position: relative; overflow: hidden; }
.card--link::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.card--link:hover::before { transform: scaleX(1); }

/* ==========================================================================
   MOBILE — centre everything
   ========================================================================== */
@media (max-width: 640px) {
  .hero, .hero--photo, .hero--img { text-align: center; }
  .hero h1, .hero--img h1 { margin-inline: auto; }
  .hero .lede, .hero--img .lede { margin-inline: auto; }
  .badge-row { justify-content: center; }
  .hero-flags { justify-content: center; text-align: center; }

  .card, .panel { text-align: center; }
  .card-icon { margin-inline: auto; }
  .card .tick-list li, .panel .tick-list li, .plan li { text-align: left; }
  .facts { justify-content: center; }
  .split > * { text-align: center; }
  .split .btn-row { justify-content: center; }
  .band-copy { text-align: center; align-items: center; }
  .steps { text-align: center; }
  .step { padding-top: 0; }
  .step::before { position: static; margin: 0 auto .75rem; }
  .trust-names { justify-content: center; }
  .footer-grid { text-align: center; }
  .site-footer .brand { justify-content: center; }
  .site-footer p { margin-inline: auto; }
}

/* ==========================================================================
   TOOLKIT
   ========================================================================== */
.toolgrid { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.toolcat {
  border-radius: var(--radius-lg); padding: 1.4rem 1.5rem;
  border: 1px solid var(--line);
  background: linear-gradient(165deg, hsla(200 18% 13% / .95), hsla(200 20% 10% / .9));
  box-shadow: 0 18px 40px -26px hsla(0 0% 0% / .9);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.toolcat:hover { border-color: var(--teal-line); transform: translateY(-3px); box-shadow: 0 28px 56px -26px hsla(0 0% 0% / .95); }
.toolcat-head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.toolcat-icon {
  width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: hsla(175 58% 40% / .13); color: var(--teal-bright);
  box-shadow: 0 0 0 1px hsla(175 58% 40% / .22);
}
.toolcat-icon svg { width: 19px; height: 19px; }
.toolcat-head h3 { margin: 0; font-size: 1.05rem; flex: 1; }
.toolcat-count {
  font-size: .72rem; font-weight: 700; color: var(--teal-bright);
  background: hsla(175 58% 40% / .12); border: 1px solid hsla(175 58% 40% / .25);
  border-radius: 999px; padding: .15rem .55rem;
}
.toolchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.toolchips li {
  font-size: .78rem; color: var(--text-2);
  padding: .3rem .65rem; border-radius: 8px;
  background: hsla(200 16% 18% / .8); border: 1px solid hsla(0 0% 100% / .06);
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.toolchips li:hover { background: hsla(175 58% 40% / .16); color: var(--teal-bright); border-color: hsla(175 58% 40% / .3); transform: translateY(-1px); }

/* ==========================================================================
   STAT BAND
   ========================================================================== */
.statband { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); text-align: center; }
.stat b {
  display: block; font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 3.1rem); line-height: 1;
  background: linear-gradient(135deg, var(--teal-grad-b), hsl(38 78% 52%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span { display: block; margin-top: .4rem; font-size: .85rem; letter-spacing: .04em; color: #6B7A82; }

/* ==========================================================================
   ANIMATION LAYER — motion that reads premium, not busy
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22,.8,.3,1), transform .7s cubic-bezier(.22,.8,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }
/* stagger siblings so grids cascade instead of snapping in together */
.grid .reveal:nth-child(1), .toolgrid .reveal:nth-child(1), .price-grid .reveal:nth-child(1) { transition-delay: 0ms; }
.grid .reveal:nth-child(2), .toolgrid .reveal:nth-child(2), .price-grid .reveal:nth-child(2) { transition-delay: 70ms; }
.grid .reveal:nth-child(3), .toolgrid .reveal:nth-child(3), .price-grid .reveal:nth-child(3) { transition-delay: 140ms; }
.grid .reveal:nth-child(4), .toolgrid .reveal:nth-child(4), .price-grid .reveal:nth-child(4) { transition-delay: 210ms; }
.grid .reveal:nth-child(5), .toolgrid .reveal:nth-child(5), .price-grid .reveal:nth-child(5) { transition-delay: 280ms; }
.grid .reveal:nth-child(6), .toolgrid .reveal:nth-child(6) { transition-delay: 350ms; }
.grid .reveal:nth-child(7), .toolgrid .reveal:nth-child(7) { transition-delay: 420ms; }
.grid .reveal:nth-child(8), .toolgrid .reveal:nth-child(8) { transition-delay: 490ms; }

/* hero entrance */
@keyframes riseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero--photo .eyebrow { animation: riseIn .8s cubic-bezier(.22,.8,.3,1) both .05s; }
.hero--photo h1       { animation: riseIn .9s cubic-bezier(.22,.8,.3,1) both .15s; }
.hero--photo .lede    { animation: riseIn .9s cubic-bezier(.22,.8,.3,1) both .3s; }
.hero--photo .btn-row { animation: riseIn .9s cubic-bezier(.22,.8,.3,1) both .45s; }
.hero--photo .badge-row { animation: riseIn .9s cubic-bezier(.22,.8,.3,1) both .6s; }
.hero--img .eyebrow, .hero--img h1, .hero--img .lede { animation: riseIn .85s cubic-bezier(.22,.8,.3,1) both; }
.hero--img h1 { animation-delay: .12s; } .hero--img .lede { animation-delay: .24s; }

/* slow drift on the hero photo so the page never feels static */
@keyframes heroDrift { from { transform: scale(1.06) translate3d(0,0,0); } to { transform: scale(1.14) translate3d(0,-1.5%,0); } }
.hero--photo::before { animation: heroDrift 26s ease-in-out infinite alternate; }

/* buttons: sheen sweep on hover */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 25%, hsla(0 0% 100% / .28) 50%, transparent 75%);
  transform: translateX(-120%); transition: transform .65s ease;
}
.btn:hover::after { transform: translateX(120%); }

/* trust names drift up individually on hover */
.trust-names span { transition: transform .2s ease, color .2s ease, opacity .2s ease; }
.trust-names span:hover { transform: translateY(-2px); }

/* Headings must stay block-level. Making them inline-block let the eyebrow
   pill sit on the same line instead of stacking above it. */
.center h2 { position: relative; }

/* The eyebrow is a pill that hugs its text. It must never stretch to the
   container width, which is what display:flex was doing. */
.eyebrow {
  display: inline-flex; width: auto; max-width: max-content;
  padding: .35rem .9rem; border-radius: 999px;
  border: 1px solid hsla(175 58% 40% / .3);
  background: hsla(175 58% 40% / .08);
}
.eyebrow::before { display: none; }
.center .eyebrow { margin-inline: auto; }
.section--light .eyebrow { border-color: hsla(175 58% 35% / .35); background: hsla(175 58% 40% / .1); }

/* the wrapper still needs to centre the inline pill */
.center > .eyebrow, .center .eyebrow { display: inline-flex; }
.center { }

@media (prefers-reduced-motion: reduce) {
  .reveal, .hero--photo .eyebrow, .hero--photo h1, .hero--photo .lede,
  .hero--photo .btn-row, .hero--photo .badge-row,
  .hero--img .eyebrow, .hero--img h1, .hero--img .lede {
    animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .hero--photo::before { animation: none; }
  .btn::after { display: none; }
}

@media (max-width: 640px) {
  .toolgrid { grid-template-columns: 1fr; }
  .toolcat { padding: 1.2rem 1.1rem; }
  .toolchips { justify-content: center; }
  .toolcat-head { justify-content: center; }
}

/* -------------------------------------------------------------- flags */
.flags { display: inline-flex; gap: .3rem; vertical-align: middle; }
.flags span {
  font-size: 1.15em; line-height: 1;
  filter: drop-shadow(0 2px 4px hsla(0 0% 0% / .45));
  transition: transform .18s ease;
}
.flags span:hover { transform: translateY(-2px) scale(1.08); }
.hero-flags { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.stat--flags b { font-size: 1.9rem; -webkit-text-fill-color: initial; background: none; color: inherit; }
.statband { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
@media (max-width: 640px) { .statband { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; } }

/* ------------------------------------------------------------ portrait */
.split--portrait { grid-template-columns: minmax(280px, .8fr) 1.2fr; align-items: center; }
@media (max-width: 860px) { .split--portrait { grid-template-columns: 1fr; } }

.portrait { position: relative; margin: 0; max-width: 420px; }
@media (max-width: 860px) { .portrait { margin-inline: auto; } }
.portrait img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg);
  border: 1px solid hsla(38 70% 60% / .3);
  box-shadow: 0 30px 70px -30px hsla(0 0% 0% / .9), 0 0 0 1px hsla(0 0% 100% / .05) inset;
}
/* soft gold halo, echoing the framing already in the photo */
.portrait::before {
  content: ""; position: absolute; inset: -14% -10% -6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, hsla(38 78% 58% / .22), transparent 72%);
  filter: blur(6px);
}
.portrait figcaption {
  position: absolute; left: 50%; bottom: -1.1rem; transform: translateX(-50%);
  display: grid; justify-items: center; gap: .1rem; text-align: center;
  padding: .6rem 1.4rem; border-radius: 999px; white-space: nowrap;
  background: hsla(200 20% 9% / .92); border: 1px solid hsla(38 70% 60% / .32);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px -14px hsla(0 0% 0% / .9);
}
.portrait figcaption strong { color: #fff; font-size: .95rem; font-weight: 600; }
.portrait figcaption span { color: var(--text-3); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
.section--light .portrait figcaption { background: hsla(0 0% 100% / .96); border-color: hsla(38 60% 45% / .35); }
.section--light .portrait figcaption strong { color: #0E1A20; }
.section--light .portrait figcaption span { color: #6B7A82; }

/* ==========================================================================
   CONVERSION FURNITURE + LIFE
   ========================================================================== */

/* proof bar under the hero */
.proofbar {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, hsla(200 20% 10% / .9), hsla(200 20% 8% / .6));
  padding-block: 1.6rem;
}
.proofbar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 1.25rem; text-align: center; }
.proofbar b {
  display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1;
  background: linear-gradient(135deg, var(--teal-bright), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.proofbar span { display: block; margin-top: .3rem; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }

/* qualifier list */
.pain li { align-items: center; gap: .7rem; }
.pain-x {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1rem; font-weight: 700;
  background: hsla(6 60% 55% / .12); color: hsl(6 62% 52%);
  border: 1px solid hsla(6 60% 55% / .28);
}

/* offer band */
.offer {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: 1.25fr .95fr; align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  border: 1px solid hsla(38 70% 60% / .28);
  background:
    radial-gradient(70% 90% at 0% 0%, hsla(175 58% 40% / .14), transparent 60%),
    radial-gradient(70% 90% at 100% 100%, hsla(38 78% 55% / .12), transparent 60%),
    linear-gradient(150deg, hsla(200 18% 12% / .96), hsla(200 20% 9% / .96));
  box-shadow: 0 34px 80px -40px hsla(0 0% 0% / .95);
}
@media (max-width: 860px) { .offer { grid-template-columns: 1fr; } }
.offer h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.offer p { color: var(--text-2); }

.offer-timeline {
  border-radius: var(--radius); padding: 1.4rem 1.5rem;
  background: hsla(200 22% 7% / .7); border: 1px solid hsla(0 0% 100% / .07);
}
.offer-timeline-label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1rem; }
.offer-timeline ol { list-style: none; margin: 0; padding: 0; position: relative; }
.offer-timeline ol::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(180deg, var(--teal), hsla(38 78% 55% / .5)); }
.offer-timeline li { position: relative; padding: 0 0 1rem 1.6rem; }
.offer-timeline li:last-child { padding-bottom: 0; }
.offer-timeline li::before {
  content: ""; position: absolute; left: 0; top: .45rem; width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--teal); box-shadow: 0 0 0 3px hsla(175 58% 40% / .14);
}
.offer-timeline b { display: block; font-size: .82rem; color: var(--teal-bright); letter-spacing: .04em; }
.offer-timeline span { display: block; font-size: .9rem; color: var(--text-2); margin-top: .1rem; }

/* sticky mobile CTA */
.stickycta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background: hsla(200 24% 7% / .92); border-top: 1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transform: translateY(110%); transition: transform .28s ease;
  display: none;
}
.stickycta .btn { width: 100%; }
.stickycta.is-on { transform: none; }
@media (max-width: 760px) { .stickycta { display: block; } body { padding-bottom: 0; } }

/* trust names: slow marquee so the strip has motion */
.trust-names {
  --gap: 2.25rem;
  flex-wrap: nowrap; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.trust-track { display: flex; gap: var(--gap); flex: none; animation: marquee 42s linear infinite; padding-right: var(--gap); }
.trust-names:hover .trust-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .trust-track { animation-duration: 120s; } }

/* headline gradient sparkle on the accent word */
.accent {
  background: linear-gradient(120deg, var(--teal-bright) 0%, hsl(165 60% 62%) 45%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ==========================================================================
   SPLIT COLUMNS — a split must always contain exactly two columns, or the
   third child wraps and leaves an empty half. .split-col groups extras.
   ========================================================================== */
.split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--portrait { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
.split-col { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 860px) {
  .split, .split--portrait { grid-template-columns: minmax(0, 1fr); }
}

/* "+" suffix on the exaggerated-to-round stat labels */
.plus::before { content: "+ "; }

/* ==========================================================================
   SERVICE CARDS — redesigned: gradient rim, glow on hover, numbered
   ========================================================================== */
.grid--3 .card--link, .section--light .card--link {
  position: relative; overflow: hidden;
  border-radius: 20px;
  transition: transform .35s cubic-bezier(.22,.8,.3,1), box-shadow .35s ease, border-color .35s ease;
}
/* animated gradient rim that lights up on hover */
.card--link::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: 1px; opacity: 0; transition: opacity .35s ease;
  background: linear-gradient(135deg, var(--teal), hsl(165 60% 55%), var(--gold));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.card--link:hover::after { opacity: 1; }
.card--link:hover { transform: translateY(-6px); }

/* icon tile: gradient fill, subtle rotate on hover */
.card-icon {
  background: linear-gradient(140deg, hsla(175 58% 40% / .18), hsla(38 78% 55% / .12));
  color: var(--teal-bright);
  box-shadow: 0 0 0 1px hsla(175 58% 40% / .25), 0 10px 24px -14px hsla(175 58% 30% / .7);
}
.section--light .card-icon {
  background: linear-gradient(140deg, hsla(175 58% 40% / .16), hsla(38 78% 55% / .12));
  color: var(--teal-ink);
  box-shadow: 0 0 0 1px hsla(175 58% 40% / .22), 0 10px 22px -14px hsla(175 58% 35% / .5);
}
.card--link:hover .card-icon { transform: translateY(-3px) rotate(-6deg) scale(1.06); }

/* soft radial that follows the card on hover */
.card--link::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 130px;
  background: radial-gradient(60% 100% at 50% 0%, hsla(175 58% 45% / .16), transparent 70%);
  opacity: 0; transition: opacity .35s ease; transform: none;
}
.card--link:hover::before { opacity: 1; transform: none; }
.section--light .card--link::before { background: radial-gradient(60% 100% at 50% 0%, hsla(175 58% 45% / .12), transparent 70%); }

/* card headings gain a gradient underline on hover */
.card--link h3 { transition: color .25s ease; }
.card--link:hover h3 { color: var(--teal-bright); }
.section--light .card--link:hover h3 { color: var(--teal-ink); }

/* ==========================================================================
   MORE LIFE
   ========================================================================== */
/* image cards get a gradient frame + parallax-ish lift */
.img-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 26px 60px -32px hsla(0 0% 0% / .95); transition: transform .4s ease, box-shadow .4s ease; }
.img-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-card:hover { transform: translateY(-4px); box-shadow: 0 36px 76px -32px hsla(0 0% 0% / 1); }

/* floating ambient orbs behind light sections so they are not flat white */
.section--light { position: relative; overflow: hidden; }
.section--light::after {
  content: ""; position: absolute; width: 520px; height: 520px; right: -140px; top: -160px;
  border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, hsla(175 58% 45% / .1), transparent 70%);
  animation: floaty 18s ease-in-out infinite alternate;
  height: 520px; bottom: auto; left: auto;
}
@keyframes floaty { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-40px,30px,0) scale(1.12); } }
.section--light > .wrap { position: relative; z-index: 1; }

/* headline underline sweep on reveal */
.center h2 .accent::after { content: none; }

/* link arrows slide */
.arrow-link svg { transition: transform .22s cubic-bezier(.22,.8,.3,1); }
.arrow-link:hover svg { transform: translateX(5px); }

/* buttons get a gentle press */
.btn:active { transform: translateY(1px) scale(.99); }

@media (prefers-reduced-motion: reduce) {
  .section--light::after { animation: none; }
  .card--link:hover, .img-card:hover { transform: none; }
}

/* -------------------------------------------------- one-off build cards */
.build-card { text-align: left; }
.build-card .card-kicker { color: var(--teal-ink); letter-spacing: .12em; }
.build-card .plan-price { justify-content: flex-start; margin: .1rem 0 .35rem; }
.build-card .plan-price b { font-size: clamp(2.2rem, 4.6vw, 2.9rem); }
.build-card h3 { margin-bottom: .3rem; }
.build-sub { color: var(--card-text-2); font-size: .95rem; margin-bottom: 1rem; }

.build-list { list-style: none; margin: 0 0 1.1rem; padding: 1.05rem 0 0; display: grid; gap: .55rem;
  border-top: 1px solid var(--card-line); }
.build-list li { position: relative; padding-left: 1.5rem; font-size: .92rem; color: var(--card-text-2); line-height: 1.5; }
.build-list li::before {
  content: ""; position: absolute; left: 0; top: .45rem; width: 13px; height: 8px;
  border-left: 2px solid var(--teal-ink); border-bottom: 2px solid var(--teal-ink);
  transform: rotate(-45deg);
}
.build-factors {
  font-size: .85rem; line-height: 1.55; color: var(--card-text-2);
  background: hsla(38 78% 55% / .09); border: 1px solid hsla(38 70% 50% / .28);
  border-radius: 11px; padding: .75rem .9rem; margin-bottom: 0;
}
.build-factors strong { color: hsl(30 55% 32%); display: block; margin-bottom: .15rem; }
@media (max-width: 640px) {
  .build-card, .build-card .plan-price { text-align: center; justify-content: center; }
  .build-list li { text-align: left; }
}

/* ==========================================================================
   VIDEO — click-to-load facades, so 10 embeds never load on page open
   ========================================================================== */
.videogrid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.videogrid--reels { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.videocard {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-2);
  box-shadow: 0 18px 44px -26px hsla(0 0% 0% / .9);
  transition: transform .3s cubic-bezier(.22,.8,.3,1), box-shadow .3s ease, border-color .3s ease;
  display: flex; flex-direction: column;
}
.videocard:hover { transform: translateY(-5px); border-color: var(--teal-line); box-shadow: 0 30px 64px -26px hsla(0 0% 0% / 1); }
.section--light .videocard { background: #fff; border-color: #E5E1DA; box-shadow: 0 14px 34px -22px hsla(200 25% 20% / .35); }

.videocard-btn {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  background: #000; cursor: pointer; line-height: 0; overflow: hidden;
}
.videocard-btn img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 16 / 9; transition: transform .5s ease, opacity .3s ease; }
.videocard--reel .videocard-btn img { aspect-ratio: 9 / 16; }
.videocard:hover .videocard-btn img { transform: scale(1.05); opacity: .82; }

.videocard-play {
  position: absolute; inset: 0; margin: auto;
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  background: hsla(0 0% 100% / .16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid hsla(0 0% 100% / .5); color: #fff;
  box-shadow: 0 10px 30px -8px hsla(0 0% 0% / .7);
  transition: transform .25s cubic-bezier(.22,.8,.3,1), background .25s ease;
}
.videocard-play svg { width: 26px; height: 26px; margin-left: 3px; }
.videocard:hover .videocard-play { transform: scale(1.12); background: hsla(175 58% 45% / .55); border-color: hsla(0 0% 100% / .8); }

/* gentle pulse so the play affordance reads as interactive */
@keyframes playPulse { 0%,100% { box-shadow: 0 10px 30px -8px hsla(0 0% 0% / .7), 0 0 0 0 hsla(0 0% 100% / .25); }
                       50%      { box-shadow: 0 10px 30px -8px hsla(0 0% 0% / .7), 0 0 0 14px hsla(0 0% 100% / 0); } }
.videocard-play { animation: playPulse 3.2s ease-out infinite; }

.videocard-meta { padding: 1rem 1.15rem 1.2rem; }
.videocard-meta h3 { font-size: 1.02rem; margin-bottom: .3rem; }
.videocard-meta p { font-size: .88rem; color: var(--text-3); margin: 0; line-height: 1.5; }
.section--light .videocard-meta p { color: #6B7A82; }
.videocard--reel .videocard-meta { padding: .85rem 1rem 1rem; }
.videocard--reel .videocard-meta h3 { font-size: .95rem; }
.videocard--reel .videocard-meta p { font-size: .82rem; }

/* the swapped-in iframe keeps the card's aspect */
.videocard iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.videocard--reel iframe { aspect-ratio: 9 / 16; }

@media (prefers-reduced-motion: reduce) {
  .videocard-play { animation: none; }
  .videocard:hover { transform: none; }
  .videocard:hover .videocard-btn img { transform: none; }
}
@media (max-width: 640px) {
  .videogrid--reels { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .85rem; }
  .videocard-play { width: 48px; height: 48px; }
  .videocard-play svg { width: 20px; height: 20px; }
}

/* ============================ SCROLLABLE LIGHTBOX (email campaigns) ===== */
.lightbox[data-mode="scroll"] { align-items: stretch; }
.lightbox[data-mode="scroll"] .lightbox-inner {
  overflow-y: auto; overscroll-behavior: contain;
  max-height: 100%; width: 100%; padding-block: 1rem;
  scrollbar-width: thin; scrollbar-color: hsla(0 0% 100% / .3) transparent;
}
.lightbox[data-mode="scroll"] .lightbox-inner::-webkit-scrollbar { width: 8px; }
.lightbox[data-mode="scroll"] .lightbox-inner::-webkit-scrollbar-thumb {
  background: hsla(0 0% 100% / .25); border-radius: 99px; }
.lightbox[data-mode="scroll"] .lightbox-inner img {
  max-height: none; width: min(560px, 92vw); height: auto;
  border-radius: 6px; box-shadow: 0 30px 80px -24px hsla(0 0% 0% / .95);
}
.lightbox[data-mode="scroll"] figcaption { position: sticky; bottom: 0; }
.lb-hint {
  display: block; margin-top: .3rem; font-size: .8rem; color: var(--teal-bright);
  letter-spacing: .04em;
}
/* tall stories get more height than the default fit */
.lightbox[data-mode="tall"] .lightbox-inner img { max-height: 88vh; }

/* the email tiles in the grid: crop to a preview, badge them */
.tile[data-cat="Email campaigns"] .videocard-btn, .tile[data-cat="Email campaigns"] .tile-btn { position: relative; }
.tile[data-cat="Email campaigns"] .tile-btn img { max-height: 420px; object-fit: cover; object-position: top center; }
.tile[data-cat="Email campaigns"] .tile-btn::after {
  content: "Click to read"; position: absolute; left: 50%; bottom: .7rem; transform: translateX(-50%);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  padding: .35rem .8rem; border-radius: 999px; white-space: nowrap;
  background: hsla(200 24% 7% / .82); color: #fff; border: 1px solid hsla(0 0% 100% / .25);
  backdrop-filter: blur(6px);
}

/* ==========================================================================
   PREMIUM PASS — richer ground, sharper type, more considered detail
   ========================================================================== */

/* 1. Warmer, deeper ground with a subtle vertical temperature shift.
      Flat #101618 everywhere is what made it read as lifeless. */
body {
  background:
    linear-gradient(180deg, hsl(200 24% 7%) 0%, hsl(198 20% 9%) 45%, hsl(202 22% 7%) 100%)
    fixed;
}

/* 2. Typography: tighter display tracking, better optical rhythm */
h1, h2 { letter-spacing: -.038em; }
h1 { line-height: 1.04; }
h2 { line-height: 1.1; }
.lede { line-height: 1.68; letter-spacing: .002em; }
.hero--photo h1, .hero--img h1 { text-wrap: balance; }
h2, h3 { text-wrap: balance; }
p, .lede { text-wrap: pretty; }

/* 3. Section headings get a hairline flourish under the accent word */
.center h2 { display: inline-block; position: relative; padding-bottom: .1em; }
.center h2::after {
  content: ""; position: absolute; left: 50%; bottom: -.22em; transform: translateX(-50%) scaleX(0);
  width: 68px; height: 2px; border-radius: 2px; transform-origin: center;
  background: linear-gradient(90deg, transparent, var(--teal), var(--gold), transparent);
  transition: transform .8s cubic-bezier(.22,.8,.3,1) .15s;
}
.is-in .center h2::after, .center.is-in h2::after, section.is-in .center h2::after { transform: translateX(-50%) scaleX(1); }
/* fallback: animate on load for headings already in view */
.center h2::after { animation: sweepIn .9s cubic-bezier(.22,.8,.3,1) forwards .3s; }
@keyframes sweepIn { to { transform: translateX(-50%) scaleX(1); } }

/* 4. Cards: inner top highlight, deeper ground, crisper edge */
.card, .panel {
  background-image: linear-gradient(180deg, hsla(0 0% 100% / .04), transparent 42%);
}
.section--light .card, .section--light .panel {
  background-image: linear-gradient(180deg, hsla(0 0% 100% / .9), hsla(0 0% 100% / 0) 40%);
}

/* 5. Header: refined, with an active-page indicator */
.site-header { border-bottom: 1px solid transparent; }
.site-header.is-stuck {
  background: hsla(200 24% 7% / .82);
  border-bottom-color: hsla(175 58% 40% / .18);
  box-shadow: 0 10px 40px -22px hsla(0 0% 0% / .95);
}
.nav-links a { position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .3rem; height: 1.5px;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.22,.8,.3,1);
  border-radius: 2px;
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--teal-bright); }

/* 6. Brand mark: gradient, subtle glow */
.brand-mark {
  background: linear-gradient(140deg, hsl(175 58% 34%), hsl(200 20% 12%) 65%);
  color: var(--gold);
  box-shadow: 0 0 0 1px hsla(175 58% 45% / .3), 0 6px 18px -8px hsla(175 58% 30% / .8);
}
.brand:hover .brand-mark { box-shadow: 0 0 0 1px hsla(38 78% 55% / .45), 0 8px 22px -8px hsla(38 78% 45% / .7); }
.brand-mark, .brand:hover .brand-mark { transition: box-shadow .3s ease; }

/* 7. Footer: lift it from a plain list to a proper close */
.site-footer {
  position: relative;
  background:
    radial-gradient(80% 120% at 50% 0%, hsla(175 58% 40% / .07), transparent 60%),
    hsl(200 26% 6%);
  border-top: 1px solid hsla(175 58% 40% / .16);
}
.site-footer h4 { color: var(--teal-bright); }
.site-footer a { transition: color .2s ease, padding-left .2s ease; }
.site-footer a:hover { color: #fff; text-decoration: none; padding-left: 4px; }
.footer-bottom { color: var(--text-3); }

/* 8. Scroll progress: gradient, thinner, sharper */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 200; width: 0;
  background: linear-gradient(90deg, var(--teal), hsl(165 60% 55%), var(--gold));
  box-shadow: 0 0 12px hsla(175 58% 45% / .6);
}

/* 9. Selection + focus polish */
::selection { background: hsla(175 58% 45% / .3); color: #fff; }
.section--light ::selection { background: hsla(175 58% 45% / .25); color: #0E1A20; }

/* 10. Section edge glow — a thin luminous seam between grounds */
.section--light { box-shadow: inset 0 1px 0 hsla(0 0% 100% / .5), inset 0 -1px 0 hsla(200 20% 60% / .12); }

/* 11. Buttons: crisper radius rhythm and a real focus ring */
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* 12. Quiet grain over light sections too, so they are not sterile */
.section--light::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* client name under each portfolio caption */
.tile-client {
  display: block; margin-top: .25rem;
  font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}
.section--light .tile-client { color: #78878F; }
/* industry chips read as categories, not tags */
.chip { font-weight: 600; }
.chip[aria-pressed="true"] { box-shadow: 0 6px 18px -10px hsla(175 58% 40% / .8); }

/* ==========================================================================
   GROUND RHYTHM — the bottom half was five dark sections in a row.
   Pricing in particular gets scrutinised, so it belongs on light.
   ========================================================================== */
.section--light .plan-price b,
.section--light .plan-name,
.section--light .stat b { color: #0E1A20; }
.section--light .plan-note { color: #6B7A82; }
.section--light .plan--featured { border-color: #E2CFA6; box-shadow: 0 20px 50px -26px hsla(38 60% 40% / .45); }
.section--light .assurance-item { border-color: hsla(175 58% 35% / .3); background: hsla(175 58% 45% / .07); }
.section--light .assurance-item strong { color: var(--teal-ink-deep); }
.section--light .assurance-item span { color: #4A5A62; }
.section--light .cmp td, .section--light .cmp caption { color: #4A5A62; }
.section--light .cmp thead th, .section--light .cmp tfoot td { color: #0E1A20; }

/* a compact savings line, replacing the full comparison block on the homepage */
.savings-line {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .75rem 1.5rem; text-align: center;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  border-radius: var(--radius-lg);
  border: 1px solid hsla(175 58% 40% / .28);
  background: radial-gradient(closest-side, hsla(175 58% 40% / .1), transparent 78%), hsla(200 18% 11% / .7);
}
.savings-line b {
  font-family: var(--font-display); font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1;
  background: linear-gradient(135deg, var(--teal-bright), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.savings-line span { color: var(--text-2); max-width: 46ch; }

/* Centre stacks: eyebrow on its own line, heading beneath it. Making the
   heading inline-block for its underline pulled the pill up alongside it. */
.center { display: flex; flex-direction: column; align-items: center; }
.center > * { max-width: 100%; }
.center .eyebrow { align-self: center; }

/* the qualifier list is two readable columns, not six squeezed ones */
.pain { display: grid; gap: .85rem; text-align: left; }
.pain li { font-size: .98rem; line-height: 1.5; }
@media (max-width: 640px) { .pain { justify-items: start; } }

/* marquee was clipping the first name at the left edge */
.trust-names { padding-inline: 1rem; }

/* ==========================================================================
   FIXES
   ========================================================================== */
/* The image band sits on a photo, so its copy stays white even when the
   surrounding section is light. .section--light was overriding it. */
.section--light .band-copy h3 { color: #fff; }
.section--light .band-copy p  { color: hsl(200 12% 88%); }
.band::after {
  background: linear-gradient(90deg, hsla(200 24% 6% / .94) 0%, hsla(200 24% 6% / .74) 46%, hsla(200 24% 7% / .35) 100%);
}
@media (max-width: 640px) {
  .band::after { background: linear-gradient(180deg, hsla(200 24% 6% / .5), hsla(200 24% 6% / .94)); }
}

/* Closing CTA — a clean light panel on a quiet ground. High contrast, no
   texture, no photo: the last thing on the page should be the easiest to read. */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(168deg, #FFFFFF 0%, #F7F5F1 58%, #F1EFE9 100%);
  border: 1px solid hsl(200 14% 88%);
  border-radius: clamp(18px, 2.4vw, 26px);
  box-shadow: 0 40px 80px -44px hsla(196 34% 12% / .75), 0 2px 0 hsla(0 0% 100% / .8) inset;
  padding: clamp(2.6rem, 6vw, 4.4rem) clamp(1.5rem, 5vw, 3.5rem);
}
.cta-band::before {          /* one hairline of brand colour along the top */
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  border-radius: clamp(18px, 2.4vw, 26px) clamp(18px, 2.4vw, 26px) 0 0;
  background: linear-gradient(90deg, var(--teal) 0%, hsl(165 55% 45%) 48%, var(--gold) 100%);
}
.cta-band h2 { color: hsl(203 30% 11%); letter-spacing: -.015em; }
.cta-band p  { color: hsl(203 14% 34%); max-width: 52ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 1.9rem; gap: .85rem; }
.cta-band .btn--ghost {
  color: var(--teal-ink-deep); border-color: hsla(178 45% 30% / .45); background: transparent;
}
.cta-band .btn--ghost:hover { border-color: var(--teal-ink); background: hsla(175 58% 40% / .09); }

/* the section behind it stays quiet — one soft glow, nothing else */
.cta-shell { position: relative; overflow: hidden; }
.cta-shell::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 60% at 50% 46%, hsla(175 58% 45% / .16), transparent 70%);
}
.cta-shell > * { position: relative; }

/* ==========================================================================
   SOCIAL STUDIO — the section should feel like the platform, not a grid
   ========================================================================== */
.social-studio {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60% 50% at 15% 0%,  hsla(320 60% 50% / .09), transparent 65%),
    radial-gradient(55% 45% at 85% 25%, hsla(38 78% 55% / .09), transparent 68%),
    radial-gradient(60% 55% at 50% 100%, hsla(175 58% 40% / .1), transparent 70%),
    hsla(200 22% 8% / .85);
  border-top: 1px solid hsla(0 0% 100% / .06);
  border-bottom: 1px solid hsla(0 0% 100% / .06);
}

/* ---------------------------------------------------------- stories rail */
.stories-rail {
  overflow: hidden; padding: .35rem 0 1.3rem;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.stories-track {
  display: flex; gap: 1.05rem; flex-wrap: nowrap; justify-content: safe center;
  overflow-x: auto; scrollbar-width: none; padding: .2rem .6rem .35rem;
  scroll-snap-type: x proximity;
}
.stories-track::-webkit-scrollbar { display: none; }
.story { scroll-snap-align: center; flex: 0 0 auto; }
.story { background: none; border: 0; padding: 0; cursor: pointer; display: grid; justify-items: center; gap: .45rem; }
.story-ring {
  display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 0deg, #F0B44A, #E1568B, #8B5CF6, #45D3C8, #F0B44A);
  animation: ringSpin 7s linear infinite;
  transition: transform .25s cubic-bezier(.22,.8,.3,1);
}
@keyframes ringSpin { to { transform: rotate(360deg); } }
.story:hover .story-ring { transform: scale(1.07); }
.story-thumb {
  width: 100%; height: 100%; border-radius: 50%;
  background-size: cover; background-position: center;
  box-shadow: 0 0 0 3px hsl(200 22% 8%);
  animation: ringSpin 7s linear infinite reverse;   /* keep the photo upright */
}
.story-name { font-size: .72rem; color: var(--text-3); letter-spacing: .01em; max-width: 82px;
  text-align: center; line-height: 1.25; overflow-wrap: anywhere; }
.story:hover .story-name { color: var(--text); }

/* ------------------------------------------------------------- phone */
.studio-split { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(2rem,5vw,4rem); align-items: center; }
@media (max-width: 860px) { .studio-split { grid-template-columns: 1fr; } }

.phone {
  width: min(330px, 100%); margin-inline: auto; position: relative;
  border-radius: 42px; padding: 11px;
  background: linear-gradient(160deg, hsl(200 12% 26%), hsl(200 16% 12%));
  box-shadow: 0 40px 90px -34px hsla(0 0% 0% / 1), 0 0 0 1px hsla(0 0% 100% / .09) inset;
  animation: phoneFloat 7s ease-in-out infinite alternate;
}
@keyframes phoneFloat { from { transform: translateY(0) } to { transform: translateY(-12px) } }
.phone-notch {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 116px; height: 22px; border-radius: 0 0 14px 14px; background: hsl(200 16% 10%); z-index: 2;
}
.phone-screen { border-radius: 32px; overflow: hidden; background: #fff; color: #111; }

.ig-head { display: flex; align-items: center; gap: .55rem; padding: 1.5rem .7rem .5rem; }
.ig-avatar {
  width: 30px; height: 30px; border-radius: 50%; background-size: cover; background-position: center; flex: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #E1568B;
}
.ig-meta { display: grid; line-height: 1.2; }
.ig-meta b { font-size: .76rem; color: #111; }
.ig-meta span { font-size: .68rem; color: #6b7280; }
.ig-dots { margin-left: auto; color: #111; letter-spacing: 1px; font-size: .9rem; }
.ig-photo { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; display: block; }
.ig-actions { display: flex; gap: .85rem; padding: .65rem .7rem .35rem; color: #111; }
.ig-actions svg { width: 21px; height: 21px; }
.ig-actions .ig-save { margin-left: auto; }
.ig-heart { animation: heartBeat 3.4s ease-in-out infinite; transform-origin: center; }
@keyframes heartBeat {
  0%,72%,100% { transform: scale(1); color: #111; fill: transparent; }
  78% { transform: scale(1.28); color: #E1306C; fill: #E1306C; }
  86% { transform: scale(1); color: #E1306C; fill: #E1306C; }
}
.ig-copy { padding: 0 .7rem .95rem; }
.ig-copy p { margin: 0 0 .2rem; font-size: .74rem; line-height: 1.45; color: #111; }
.ig-likes b { font-size: .76rem; }
.ig-caption b { margin-right: .3rem; }
.ig-comments { color: #6b7280 !important; }

/* --------------------------------------------------------- studio copy */
.studio-copy h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.studio-stats { display: flex; flex-wrap: wrap; gap: 1.5rem 2.25rem; }
.studio-stats b {
  display: block; font-family: var(--font-display); font-size: 1.9rem; line-height: 1;
  background: linear-gradient(135deg, var(--teal-bright), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.studio-stats span { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }

/* ----------------------------------------------------------- feed grid */
.feed-label {
  text-align: center; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 1rem;
}
.feed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-width: 720px; margin-inline: auto;
  border-radius: 10px; overflow: hidden; }
@media (max-width: 520px) { .feed-grid { gap: 3px; } }
.fpost { position: relative; padding: 0; border: 0; background: #000; cursor: pointer; line-height: 0; overflow: hidden; }
.fpost img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.22,.8,.3,1); }
.fpost:hover img { transform: scale(1.07); }
.fpost-hover {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .3rem; padding: .8rem;
  background: linear-gradient(hsla(0 0% 0% / .3), hsla(0 0% 0% / .72));
  opacity: 0; transition: opacity .25s ease; text-align: center; color: #fff;
}
.fpost:hover .fpost-hover, .fpost:focus-visible .fpost-hover { opacity: 1; }
.fpost-title  { font-size: .82rem; font-weight: 700; line-height: 1.25; }
.fpost-client { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
                color: var(--teal-bright); line-height: 1.2; }

@media (prefers-reduced-motion: reduce) {
  .story-ring, .story-thumb, .phone, .ig-heart { animation: none !important; }
  .fpost:hover img { transform: none; }
}

/* brand-system tiles keep a uniform card height; the full doc opens in the lightbox */
.tile--brand img { aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; }

/* ==========================================================================
   REELS — four featured cuts, then the rest in a compact strip
   ========================================================================== */
.reels-main {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.85rem, 1.6vw, 1.25rem);
}
@media (max-width: 900px) { .reels-main { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 460px) { .reels-main { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; } }

.reels-more-label {
  margin: clamp(2rem, 4vw, 2.9rem) 0 1rem; text-align: center;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3);
}
.reels-more {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.6rem, 1.2vw, .95rem); max-width: 860px; margin-inline: auto;
}
@media (max-width: 760px) { .reels-more { grid-template-columns: repeat(3, minmax(0,1fr)); max-width: 480px; } }
@media (max-width: 420px) { .reels-more { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 320px; } }

.reel-btn {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  background: #000; border-radius: 20px; overflow: hidden; line-height: 0;
  box-shadow: 0 26px 54px -28px hsla(0 0% 0% / .95);
  transition: transform .35s cubic-bezier(.22,.8,.3,1), box-shadow .35s ease;
}
.reel-btn img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.22,.8,.3,1); }
.reel-btn:hover { transform: translateY(-6px); box-shadow: 0 34px 66px -26px hsla(0 0% 0% / 1); }
.reel-btn:hover img { transform: scale(1.06); }
.reel-scrim { position: absolute; inset: 0;
  background: linear-gradient(hsla(0 0% 0% / .12) 0 38%, hsla(0 0% 0% / .78)); }
.reel-badge { position: absolute; top: .7rem; right: .7rem; width: 24px; height: 24px; color: #fff;
  opacity: .85; filter: drop-shadow(0 2px 6px hsla(0 0% 0% / .6)); }
.reel-badge svg { width: 100%; height: 100%; }
.reel-play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: hsla(0 0% 0% / .34); border: 1.5px solid hsla(0 0% 100% / .6);
  backdrop-filter: blur(6px); transition: transform .3s ease, background .3s ease;
}
.reel-play svg { width: 23px; height: 23px; margin-left: 3px; }
.reel-btn:hover .reel-play { transform: translate(-50%,-50%) scale(1.14); background: hsla(175 58% 45% / .58); }
.reel-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem .95rem 1rem;
  display: grid; gap: .18rem; text-align: left; line-height: 1.25; }
.reel-title  { color: #fff; font-weight: 700; font-size: .95rem; }
.reel-client { color: var(--teal-bright); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; }
.reel-blurb  { margin: .7rem .15rem 0; font-size: .82rem; line-height: 1.5; color: var(--text-3); }
.reel video, .reel iframe { width: 100%; aspect-ratio: 9 / 16; display: block; border: 0;
  border-radius: 20px; background: #000; }

/* compact strip */
.reel--sm .reel-btn { border-radius: 14px; box-shadow: 0 16px 34px -22px hsla(0 0% 0% / .9); }
.reel--sm .reel-btn:hover { transform: translateY(-4px); }
.reel--sm .reel-badge { width: 17px; height: 17px; top: .45rem; right: .45rem; }
.reel--sm .reel-play { width: 34px; height: 34px; border-width: 1.2px; }
.reel--sm .reel-play svg { width: 15px; height: 15px; margin-left: 2px; }
.reel--sm .reel-caption { padding: .55rem .55rem .6rem; gap: .1rem; }
.reel--sm .reel-title { font-size: .76rem; line-height: 1.2; }
.reel--sm .reel-client { font-size: .58rem; letter-spacing: .1em; }
.reel--sm video, .reel--sm iframe { border-radius: 14px; }

@media (prefers-reduced-motion: reduce) {
  .reel-btn, .reel-btn img { transition: none !important; }
  .reel-btn:hover, .reel-btn:hover img { transform: none; }
}

/* ==========================================================================
   WEB LAB — browser-chrome cards + the automation flow the builds sit on
   ========================================================================== */
.web-lab { position: relative; overflow: hidden; }

/* ------------------------------------------------------- automation flow */
.flowline {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.9rem, 2vw, 1.6rem); position: relative; max-width: 1020px; margin-inline: auto;
}
.flowline::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 27px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, hsla(175 58% 45% / .1), hsla(175 58% 45% / .45), hsla(38 82% 62% / .45), hsla(38 82% 62% / .1));
}
.flowline::after {
  content: ""; position: absolute; top: 21px; left: 8%; right: 8%; height: 14px;
  background-image: radial-gradient(circle at center, var(--teal-bright) 0 5.5px, transparent 6.2px);
  background-repeat: no-repeat; background-size: 14px 14px;
  filter: drop-shadow(0 0 10px hsla(172 62% 55% / .85));
  animation: flowPulse 6.5s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes flowPulse {
  0%   { background-position: 0% 50%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { background-position: 100% 50%; opacity: 0; }
}
.flow-step { display: grid; justify-items: center; text-align: center; gap: .3rem; position: relative; }
.flow-ico {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--teal-bright);
  background: hsl(200 22% 10%); border: 1px solid hsla(175 58% 45% / .3);
  box-shadow: 0 0 0 6px hsl(200 20% 8%); margin-bottom: .35rem;
}
.flow-ico svg { width: 23px; height: 23px; }
.flow-name { font-weight: 700; font-size: .96rem; color: var(--text); }
.flow-desc { font-size: .81rem; color: var(--text-3); line-height: 1.45; max-width: 20ch; }
@media (max-width: 720px) {
  .flowline { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 1.8rem; }
  .flowline::before, .flowline::after { display: none; }
}

/* ------------------------------------------------------- browser cards */
.builds-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.bcard {
  display: block; text-decoration: none; color: inherit; border-radius: 14px; overflow: hidden;
  background: hsl(200 20% 11%); border: 1px solid hsla(0 0% 100% / .08);
  box-shadow: 0 26px 54px -30px hsla(0 0% 0% / .95);
  transition: transform .35s cubic-bezier(.22,.8,.3,1), border-color .3s ease, box-shadow .35s ease;
}
a.bcard:hover { transform: translateY(-6px); border-color: var(--teal-line);
  box-shadow: 0 36px 70px -28px hsla(0 0% 0% / 1); }
.bc-chrome {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem;
  background: hsl(200 18% 15%); border-bottom: 1px solid hsla(0 0% 100% / .07);
}
.bc-dots { display: inline-flex; gap: 5px; flex: 0 0 auto; }
.bc-dots i { width: 9px; height: 9px; border-radius: 50%; background: hsla(0 0% 100% / .2); }
.bc-dots i:first-child { background: #FF5F57; }
.bc-dots i:nth-child(2) { background: #FEBC2E; }
.bc-dots i:nth-child(3) { background: #28C840; }
.bc-url {
  flex: 1; min-width: 0; font-size: .68rem; letter-spacing: .01em; color: var(--text-3);
  background: hsl(200 20% 10%); border-radius: 999px; padding: .22rem .7rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bc-url--design { color: var(--gold); }
.bc-shot { display: block; height: 208px; overflow: hidden; background: #0C1113; }
.bc-shot img { width: 100%; display: block; transition: transform 4.5s linear; }
a.bcard:hover .bc-shot img,
.bcard:focus-within .bc-shot img { transform: translateY(calc(208px - 100%)); }
.bc-meta { display: grid; gap: .3rem; padding: .95rem 1.05rem 1.1rem; }
.bc-name { font-weight: 700; font-size: 1.02rem; color: var(--text); }
.bc-desc { font-size: .85rem; line-height: 1.5; color: var(--text-3); }
.bc-go {
  display: inline-flex; align-items: center; gap: .34rem; margin-top: .25rem;
  font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-bright);
}
.bc-go svg { width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce) {
  .flowline::after { animation: none; }
  .bc-shot img, .bcard { transition: none !important; }
  a.bcard:hover { transform: none; }
  a.bcard:hover .bc-shot img { transform: none; }
}

/* ==========================================================================
   WORK RIBBON — a moving strip of real deliverables, each one labelled
   ========================================================================== */
.workstrip { position: relative; overflow: hidden; }
.ribbon-label {
  text-align: center; margin: clamp(1.6rem, 3vw, 2.2rem) 0 .85rem;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3);
}
.ribbon {
  overflow: hidden; padding-block: .55rem;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ribbon-track {
  display: flex; gap: .8rem; width: max-content;
  animation: ribbonRun 76s linear infinite;
}
.ribbon--rev .ribbon-track { animation-duration: 92s; animation-direction: reverse; }
.ribbon:hover .ribbon-track { animation-play-state: paused; }
@keyframes ribbonRun { to { transform: translateX(-50%); } }

.rib {
  position: relative; display: block; flex: 0 0 auto; overflow: hidden; line-height: 0;
  border-radius: 13px; border: 1px solid hsla(0 0% 100% / .09); background: #0C1113;
  box-shadow: 0 18px 40px -26px hsla(0 0% 0% / .95);
  transition: transform .3s cubic-bezier(.22,.8,.3,1), border-color .3s ease, box-shadow .3s ease;
  text-decoration: none;
}
.rib:hover { transform: translateY(-6px); border-color: var(--teal-line);
  box-shadow: 0 26px 52px -22px hsla(0 0% 0% / 1); }
.rib img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.22,.8,.3,1); }
.rib:hover img { transform: scale(1.05); }

.rib-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(hsla(0 0% 0% / 0) 42%, hsla(0 0% 0% / .58) 68%, hsla(0 0% 0% / .88));
  transition: background .3s ease;
}
.rib:hover .rib-scrim {
  background: linear-gradient(hsla(200 30% 6% / .3) 0%, hsla(200 30% 6% / .6) 45%, hsla(0 0% 0% / .92));
}
.rib-cap {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: .12rem;
  padding: .55rem .6rem .6rem; text-align: left; line-height: 1.2; pointer-events: none;
}
.rib-kick   { color: var(--teal-bright); font-size: .58rem; letter-spacing: .11em;
              text-transform: uppercase; font-weight: 600; }
.rib-client { color: #fff; font-size: .74rem; font-weight: 700; }

.rib--p { width: 148px; height: 208px; }
.rib--p img { object-position: center; }
.rib--l { width: 286px; height: 186px; }
.rib--l img { object-position: top center; }
.rib--l .rib-kick   { font-size: .6rem; }
.rib--l .rib-client { font-size: .82rem; }
.center-row { justify-content: center; }

@media (max-width: 560px) {
  .rib--p { width: 124px; height: 174px; }
  .rib--l { width: 232px; height: 151px; }
  .rib-client { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ribbon-track { animation-duration: 190s; }
  .ribbon--rev .ribbon-track { animation-duration: 230s; }
  .rib:hover { transform: none; }
  .rib:hover img { transform: none; }
}

/* ==========================================================================
   CARDS v2 — the flat text boxes get an accent edge, a corner wash, real
   hover feedback, and (for case cards) a monogram + deliverable chips.
   ========================================================================== */
.card { position: relative; overflow: hidden; isolation: isolate; }

/* accent edge: faint at rest, full colour on hover */
.card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px; z-index: 1;
  background: linear-gradient(90deg, var(--teal) 0%, hsl(165 55% 45%) 45%, var(--gold) 100%);
  transform: scaleX(.999); transform-origin: left; opacity: .28;
  transition: opacity .35s ease;
}
/* corner wash so the ground is never a flat rectangle */
.card::after {
  content: ""; position: absolute; top: -35%; right: -25%; width: 62%; height: 78%; z-index: -1;
  background: radial-gradient(closest-side, hsla(175 58% 45% / .17), transparent 72%);
  pointer-events: none; transition: opacity .35s ease, transform .5s ease;
}
.card:hover::before { opacity: 1; }
.card:hover::after  { opacity: 1; transform: translate(-6%, 6%) scale(1.12); }

/* every card now responds, not just the linked ones */
.card { transition: transform .3s cubic-bezier(.22,.8,.3,1), box-shadow .3s ease, border-color .3s ease; }
.card:hover {
  transform: translateY(-6px); border-color: hsla(175 58% 45% / .5);
  box-shadow: 0 30px 60px -26px hsla(196 34% 16% / .38);
}
.section--light .card:hover { box-shadow: 0 30px 60px -28px hsla(196 30% 20% / .3); }

.case-tag { display: inline-flex; align-items: center; gap: .5rem; }
.case-tag::before {
  content: ""; width: 16px; height: 2px; border-radius: 2px; flex: 0 0 auto;
  background: linear-gradient(90deg, hsl(33 75% 42%), hsla(33 75% 42% / .15));
}

/* ------------------------------------------------------------ case cards */
.card--case { text-decoration: none; padding-top: clamp(1.8rem, 3.4vw, 2.4rem); }
.case-mono {
  position: absolute; top: clamp(1.1rem, 2.4vw, 1.5rem); right: clamp(1.1rem, 2.4vw, 1.5rem);
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: .04em;
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  color: var(--teal-ink-deep); background: hsla(175 58% 45% / .12);
  border: 1px solid hsla(175 58% 45% / .3);
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.card--case:hover .case-mono {
  background: linear-gradient(140deg, var(--teal-grad-a, hsl(175 58% 40%)), var(--teal-grad-b, hsl(172 62% 48%)));
  color: #fff; transform: rotate(-4deg) scale(1.06);
}
.card--case .case-tag  { padding-right: 60px; }
.card--case h3         { padding-right: 60px; }
.card--case .facts     { margin-top: auto; }
.case-go {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--teal-ink); transition: gap .25s ease, color .25s ease;
}
.case-go svg { width: 15px; height: 15px; }
.card--case:hover .case-go { gap: .75rem; color: var(--teal-ink-deep); }

@media (prefers-reduced-motion: reduce) {
  .card, .card::after, .case-mono, .case-go { transition: none !important; }
  .card:hover { transform: none; }
  .card--case:hover .case-mono { transform: none; }
}

/* ==========================================================================
   SECTION GROUNDS — each section gets its own light field so the page stops
   reading as one flat charcoal slab. (.social-studio is deliberately untouched.)
   ========================================================================== */
.gr-web, .gr-reels, .gr-creative, .gr-film { position: relative; overflow: hidden;
  border-top: 1px solid hsla(0 0% 100% / .05); border-bottom: 1px solid hsla(0 0% 100% / .05); }

.gr-web {
  background:
    radial-gradient(58% 48% at 12% 0%,   hsla(190 70% 48% / .13), transparent 66%),
    radial-gradient(52% 44% at 88% 30%,  hsla(175 58% 45% / .12), transparent 68%),
    radial-gradient(60% 50% at 50% 104%, hsla(210 60% 45% / .10), transparent 70%),
    hsla(200 22% 8% / .92);
}
.gr-reels {
  background:
    radial-gradient(56% 46% at 16% 4%,   hsla(292 62% 52% / .13), transparent 66%),
    radial-gradient(52% 42% at 84% 34%,  hsla(340 68% 55% / .11), transparent 68%),
    radial-gradient(58% 50% at 50% 102%, hsla(38 78% 55% / .09),  transparent 70%),
    hsla(200 22% 8% / .92);
}
.gr-creative {
  background:
    radial-gradient(56% 46% at 14% 2%,   hsla(38 82% 58% / .12),  transparent 66%),
    radial-gradient(50% 42% at 86% 36%,  hsla(20 70% 52% / .10),  transparent 68%),
    radial-gradient(58% 50% at 50% 102%, hsla(175 58% 45% / .09), transparent 70%),
    hsla(200 22% 8% / .92);
}
.gr-film {
  background:
    radial-gradient(56% 46% at 18% 0%,   hsla(214 68% 50% / .13), transparent 66%),
    radial-gradient(50% 42% at 82% 34%,  hsla(258 58% 58% / .11), transparent 68%),
    radial-gradient(58% 50% at 50% 102%, hsla(190 66% 48% / .09), transparent 70%),
    hsla(200 22% 8% / .92);
}
/* light sections get a warm tint rather than flat cream */
.gr-brand, .gr-content { position: relative; overflow: hidden; }
.gr-brand::before, .gr-content::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(52% 44% at 88% 0%,   hsla(175 58% 45% / .12), transparent 66%),
    radial-gradient(48% 40% at 8% 100%,  hsla(38 82% 62% / .11),  transparent 68%);
}
.gr-brand > *, .gr-content > * { position: relative; }

/* ==========================================================================
   CONTENT CARDS — each card leads with a live little visual of the service
   ========================================================================== */
.svc-viz {
  height: 132px; border-radius: 14px; margin-bottom: 1.15rem; position: relative; overflow: hidden;
  background: linear-gradient(150deg, hsl(200 22% 13%), hsl(196 26% 17%));
  border: 1px solid hsla(0 0% 100% / .08);
}

/* 1 — social feed: tiles settle in, a heart pops */
.viz-feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 10px; height: 100%; }
.viz-feed i {
  border-radius: 5px; background: linear-gradient(140deg, hsla(175 58% 45% / .55), hsla(38 82% 62% / .4));
  opacity: .25; animation: vizTile 4.2s ease-in-out infinite;
}
.viz-feed i:nth-child(2) { animation-delay: .25s } .viz-feed i:nth-child(3) { animation-delay: .5s }
.viz-feed i:nth-child(4) { animation-delay: .75s } .viz-feed i:nth-child(5) { animation-delay: 1s }
.viz-feed i:nth-child(6) { animation-delay: 1.25s } .viz-feed i:nth-child(7) { animation-delay: 1.5s }
.viz-feed i:nth-child(8) { animation-delay: 1.75s } .viz-feed i:nth-child(9) { animation-delay: 2s }
@keyframes vizTile { 0%,70%,100% { opacity:.22 } 30% { opacity:.95 } }
.viz-heart {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 34px; height: 34px;
  color: hsl(340 78% 62%); filter: drop-shadow(0 3px 10px hsla(340 78% 50% / .6));
  animation: vizHeart 3.4s ease-in-out infinite;
}
@keyframes vizHeart { 0%,72%,100% { transform: scale(.85); opacity:.55 } 82% { transform: scale(1.18); opacity:1 } }

/* 2 — reel: a 9:16 frame, play glyph, scrubbing progress bar */
.viz-reel { display: grid; place-items: center; height: 100%; }
.viz-phone {
  width: 62px; height: 104px; border-radius: 11px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, hsl(292 45% 30%), hsl(210 45% 26%));
  border: 1.5px solid hsla(0 0% 100% / .3); box-shadow: 0 10px 24px -12px hsla(0 0% 0% / .9);
}
.viz-phone::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, hsla(0 0% 100% / .3) 50%, transparent 70%);
  animation: vizSheen 3.6s ease-in-out infinite;
}
@keyframes vizSheen { 0% { transform: translateX(-120%) } 55%,100% { transform: translateX(120%) } }
.viz-play {
  position: absolute; left: 50%; top: 46%; translate: -50% -50%; width: 0; height: 0;
  border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  filter: drop-shadow(0 2px 6px hsla(0 0% 0% / .7));
}
.viz-bar { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 3px; border-radius: 3px;
  background: hsla(0 0% 100% / .25); overflow: hidden; }
.viz-bar::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: #fff;
  transform-origin: left; animation: vizScrub 4.4s linear infinite; }
@keyframes vizScrub { 0% { transform: scaleX(0) } 100% { transform: scaleX(1) } }

/* 3 — reporting: bars grow, a trend line sweeps */
.viz-chart { display: flex; align-items: flex-end; gap: 7px; height: 100%; padding: 16px 14px; }
.viz-chart i {
  flex: 1; border-radius: 4px 4px 2px 2px; transform-origin: bottom;
  background: linear-gradient(180deg, var(--teal-bright), hsla(175 58% 40% / .5));
  animation: vizGrow 3.8s cubic-bezier(.4,0,.2,1) infinite;
}
.viz-chart i:nth-child(1) { height: 34%; animation-delay: 0s }
.viz-chart i:nth-child(2) { height: 56%; animation-delay: .12s }
.viz-chart i:nth-child(3) { height: 44%; animation-delay: .24s }
.viz-chart i:nth-child(4) { height: 74%; animation-delay: .36s }
.viz-chart i:nth-child(5) { height: 62%; animation-delay: .48s }
.viz-chart i:nth-child(6) { height: 92%; animation-delay: .6s; background: linear-gradient(180deg, var(--gold), hsla(38 82% 55% / .5)) }
@keyframes vizGrow { 0%,100% { transform: scaleY(.55) } 45% { transform: scaleY(1) } }

.section--light .svc-viz { border-color: hsla(200 20% 40% / .18); }
@media (prefers-reduced-motion: reduce) {
  .viz-feed i   { animation-duration: 9s; }
  .viz-heart    { animation-duration: 7s; }
  .viz-phone::before { animation-duration: 8s; }
  .viz-bar::after    { animation-duration: 9s; }
  .viz-chart i  { animation-duration: 8s; }
}

/* ==========================================================================
   BUILDS GRID ON SMALL SCREENS — 22 browser cards stacked one per row made
   the page endless on a phone. Three across on tablet and mobile instead.
   ========================================================================== */
@media (max-width: 1000px) {
  .builds-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
  .bcard { border-radius: 11px; }
  .bc-chrome { padding: .32rem .42rem; gap: .38rem; }
  .bc-dots { gap: 3px; }
  .bc-dots i { width: 5px; height: 5px; }
  .bc-url { font-size: .55rem; padding: .13rem .38rem; }
  .bc-shot { height: 140px; }
  .bc-meta { padding: .55rem .6rem .65rem; gap: .18rem; }
  .bc-name { font-size: .84rem; }
  .bc-desc { font-size: .72rem; line-height: 1.4;
             display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bc-go { font-size: .62rem; letter-spacing: .04em; margin-top: .15rem; }
  .bc-go svg { width: 11px; height: 11px; }
}
@media (max-width: 620px) {
  .builds-grid { gap: .5rem; }
  .bcard { border-radius: 9px; }
  .bc-chrome { padding: .26rem .32rem; gap: .28rem; }
  .bc-dots i { width: 4px; height: 4px; }
  .bc-url { font-size: .46rem; padding: .1rem .3rem; }
  .bc-shot { height: 96px; }
  .bc-meta { padding: .42rem .45rem .5rem; }
  .bc-name { font-size: .7rem; line-height: 1.25; }
  .bc-desc { display: none; }              /* no room — the name carries it */
  .bc-go { font-size: .54rem; gap: .22rem; }
}

/* ==========================================================================
   MOBILE SCROLL LENGTH — the gallery and reels stacked one per row too, which
   made the page endless on a phone. Keep two/three across all the way down.
   ========================================================================== */
@media (max-width: 460px) {
  .gallery { columns: 2 130px; column-gap: .55rem; }
  .tile { margin-bottom: .55rem; border-radius: 10px; }
  .tile figcaption { padding: .5rem .55rem .6rem; gap: .1rem; }
  .tile-kicker { font-size: .52rem; letter-spacing: .09em; }
  .tile-title  { font-size: .74rem; line-height: 1.25; }
  .tile-client { font-size: .58rem; }
  .tile-zoom { width: 26px; height: 26px; }
  .tile-zoom svg { width: 13px; height: 13px; }
}
@media (max-width: 620px) {
  .reels-main { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; max-width: none; }
  .reel-btn { border-radius: 13px; }
  .reel-play { width: 40px; height: 40px; }
  .reel-play svg { width: 17px; height: 17px; }
  .reel-title  { font-size: .8rem; }
  .reel-client { font-size: .58rem; }
  .reel-blurb  { font-size: .72rem; line-height: 1.4; }
  .reels-more { grid-template-columns: repeat(3, minmax(0,1fr)); gap: .45rem; max-width: none; }
  .reel--sm .reel-title { font-size: .62rem; }
  .reel--sm .reel-client { font-size: .5rem; }
  .reel--sm .reel-play { width: 26px; height: 26px; }
  .reel--sm .reel-play svg { width: 12px; height: 12px; }
}

/* The card redesign's overflow:hidden clipped the "Most popular" flag, which
   deliberately sits above the card edge. Pricing cards opt out of the clip. */
.card::before { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.plan { overflow: visible; }
.plan::after { display: none; }          /* the corner wash needs the clip; drop it here */
.plan-flag { z-index: 2; box-shadow: 0 6px 16px -8px hsla(38 82% 40% / .8); }

/* ==========================================================================
   CLIENT WORK — everything centred, and three across on phones and tablets.
   Tiles stay real buttons at every size so the lightbox still opens.
   ========================================================================== */
/* --- centring ------------------------------------------------------------ */
.studio-copy { text-align: center; }
.studio-copy .tick-list { display: inline-grid; text-align: left; justify-items: start; }
.studio-copy .studio-stats { justify-content: center; }
.studio-copy .btn-row { justify-content: center; }
.studio-stats { display: flex; flex-wrap: wrap; gap: 1.5rem 2.25rem; justify-content: center; text-align: center; }
.studio-stats > div { display: grid; justify-items: center; }

.reel-caption { text-align: center; justify-items: center; }
.reel-blurb   { text-align: center; }
.tile figcaption,
.tile--brand figcaption { text-align: center; align-items: center; }
.tile figcaption > span { text-align: center; }
.chips { justify-content: center; }

/* --- three across on tablet and phone ------------------------------------ */
@media (max-width: 1000px) {
  /* brand systems */
  .gr-brand .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
  /* featured films */
  .gr-film .videogrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
  /* creative gallery */
  .gr-creative .gallery { columns: 3 auto; column-gap: .7rem; }
  .gr-creative .tile { margin-bottom: .7rem; }
}
@media (max-width: 620px) {
  .gr-brand .grid--3,
  .gr-film .videogrid { gap: .45rem; }
  .gr-creative .gallery { columns: 3 auto; column-gap: .45rem; }
  .gr-creative .tile { margin-bottom: .45rem; border-radius: 9px; }

  .tile figcaption { padding: .4rem .35rem .5rem; gap: .08rem; }
  .tile-kicker { font-size: .46rem; letter-spacing: .07em; }
  .tile-title  { font-size: .62rem; line-height: 1.22; }
  .tile-client { font-size: .5rem; }
  .tile-zoom   { width: 22px; height: 22px; }
  .tile-zoom svg { width: 11px; height: 11px; }

  .videocard { border-radius: 9px; }
  .videocard-meta { padding: .45rem .45rem .55rem; }
  .videocard-meta h3 { font-size: .68rem; line-height: 1.22; }
  .videocard-meta p  { display: none; }
  .videocard-play { width: 30px; height: 30px; }
  .videocard-play svg { width: 14px; height: 14px; }
}

/* ==========================================================================
   CASE STUDIES — image-led cards, a numbered process strip, centred on phones
   ========================================================================== */
.case-card { padding: 0; overflow: hidden; }
.case-shots { display: grid; grid-template-columns: 2fr 1fr; gap: 3px; background: hsl(200 20% 14%); }
.case-shot {
  position: relative; padding: 0; border: 0; background: #0C1113; cursor: pointer;
  line-height: 0; overflow: hidden; height: 190px;
}
.case-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block; transition: transform .6s cubic-bezier(.22,.8,.3,1); }
.case-shot:hover img { transform: scale(1.06); }
.case-shot::after {
  content: ""; position: absolute; inset: 0; background: hsla(200 30% 6% / .18);
  transition: background .3s ease;
}
.case-shot:hover::after { background: hsla(200 30% 6% / 0); }
.case-body { padding: clamp(1.4rem, 3vw, 2rem); display: flex; flex-direction: column; gap: .5rem; }
.case-card .facts { margin-top: auto; }

/* numbered process strip */
.wsteps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(.9rem, 2vw, 1.5rem); }
.wstep {
  position: relative; display: grid; gap: .35rem; padding: 1.4rem 1.2rem 1.5rem;
  border-radius: 16px; text-align: center; justify-items: center;
  background: linear-gradient(160deg, hsla(200 22% 12% / .9), hsla(196 26% 15% / .9));
  border: 1px solid hsla(0 0% 100% / .08);
  transition: transform .3s cubic-bezier(.22,.8,.3,1), border-color .3s ease;
}
.wstep:hover { transform: translateY(-5px); border-color: var(--teal-line); }
.wstep-n {
  font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; line-height: 1;
  background: linear-gradient(120deg, var(--teal-bright), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wstep-name { font-weight: 700; font-size: 1.02rem; color: var(--text); }
.wstep-desc { font-size: .86rem; line-height: 1.5; color: var(--text-3); max-width: 26ch; }
@media (max-width: 760px) { .wsteps { grid-template-columns: repeat(2, minmax(0,1fr)); } }

@media (max-width: 700px) {
  .case-shots { grid-template-columns: 1fr 1fr; }
  .case-shot { height: 118px; }
  .case-body { text-align: center; align-items: center; padding: 1rem .9rem 1.2rem; }
  .case-body .facts { justify-content: center; }
  .case-body p { text-align: center; }
  .gr-cases .grid--2 { grid-template-columns: 1fr; gap: .8rem; }
}

/* ==========================================================================
   PRICING ON MOBILE — two across for plans, bundles and one-off builds, and
   the comparison table fits the screen instead of scrolling sideways.
   ========================================================================== */
@media (max-width: 760px) {
  .price-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: .7rem; }
  .price-cards { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: .7rem; }
  .plan { padding: 1.1rem .85rem 1.2rem; }
  .plan-name { font-size: .88rem; }
  .plan-price b { font-size: 1.5rem; }
  .plan-price span { font-size: .68rem; }
  .plan-note { font-size: .72rem; }
  .plan ul li { font-size: .74rem; line-height: 1.35; gap: .35rem; }
  .plan ul li svg { width: 12px; height: 12px; }
  .plan-flag { font-size: .58rem; padding: .24rem .6rem; top: -.65rem; }
  .plan .btn { font-size: .76rem; padding: .6rem .7rem; }
  .build-card { padding: 1.1rem .85rem 1.2rem; }
  .build-card h3 { font-size: .92rem; }
  .build-card p { font-size: .76rem; }
}
@media (max-width: 760px) {
  /* the comparison table fits the screen instead of scrolling sideways */
  .scroll-x { overflow-x: visible; margin-inline: 0; padding-inline: 0; }
  .scroll-x table { width: 100%; table-layout: fixed; font-size: .66rem; min-width: 0; }
  .scroll-x th, .scroll-x td {
    padding: .45rem .28rem; white-space: normal; word-break: break-word; hyphens: auto;
  }
  .scroll-x th:first-child, .scroll-x td:first-child { width: 32%; }
}

/* ------------------------------------------------- footer on small screens */
@media (max-width: 620px) {
  /* everything centred: brand full width, Services and Company paired,
     Industries and Legal full width underneath */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; text-align: center; }
  .footer-grid > * { text-align: center; }
  .footer-grid > *:nth-child(1) { grid-column: 1 / -1; }              /* brand */
  .footer-grid > *:nth-child(2),
  .footer-grid > *:nth-child(3) { grid-column: span 1; }              /* Services | Company */
  .footer-grid > *:nth-child(4),
  .footer-grid > *:nth-child(5) { grid-column: 1 / -1; }              /* Industries, Legal */
  .footer-grid ul { justify-items: center; }
  .footer-grid li, .footer-grid h4, .footer-grid p { text-align: center; }
  .site-footer .brand { justify-content: center; }
  .footer-grid > *:nth-child(1) p { margin-inline: auto; }
  .footer-bottom { justify-content: center; text-align: center; gap: .5rem; }
  .footer-bottom > * { width: 100%; text-align: center; }
}


/* ==========================================================================
   SERVICE VISUALS v2 — the animated heads from the content cards, extended
   so every service card leads with a small live picture of the work.
   ========================================================================== */
.svc-viz { display: block; }
.section--light .svc-viz { background: linear-gradient(150deg, hsl(200 24% 12%), hsl(196 28% 16%)); }

/* inbox: tasks tick off, top to bottom */
.viz-inbox { display: grid; gap: 7px; padding: 16px 15px; height: 100%; align-content: center; }
.viz-inbox i {
  display: block; height: 9px; border-radius: 5px; position: relative;
  background: hsla(0 0% 100% / .13); overflow: hidden;
}
.viz-inbox i::after {
  content: ""; position: absolute; inset: 0; border-radius: 5px; transform-origin: left;
  background: linear-gradient(90deg, var(--teal-bright), hsla(175 58% 45% / .4));
  animation: vizFill 4.6s cubic-bezier(.4,0,.2,1) infinite;
}
.viz-inbox i:nth-child(2)::after { animation-delay: .5s }
.viz-inbox i:nth-child(3)::after { animation-delay: 1s }
.viz-inbox i:nth-child(4)::after { animation-delay: 1.5s }
.viz-inbox i:nth-child(1) { width: 82% } .viz-inbox i:nth-child(2) { width: 96% }
.viz-inbox i:nth-child(3) { width: 68% } .viz-inbox i:nth-child(4) { width: 88% }
@keyframes vizFill { 0% { transform: scaleX(0) } 42%,84% { transform: scaleX(1) } 100% { transform: scaleX(0) } }

/* chat: bubbles alternate in */
.viz-chat { display: grid; gap: 8px; padding: 16px 15px; height: 100%; align-content: center; }
.viz-chat i {
  display: block; height: 20px; border-radius: 10px; opacity: 0;
  animation: vizPop 4.4s ease-in-out infinite;
}
.viz-chat i:nth-child(1) { width: 58%; justify-self: start; background: hsla(0 0% 100% / .18); }
.viz-chat i:nth-child(2) { width: 46%; justify-self: end;
  background: linear-gradient(120deg, var(--teal), var(--teal-bright)); animation-delay: .7s }
.viz-chat i:nth-child(3) { width: 66%; justify-self: start; background: hsla(0 0% 100% / .18); animation-delay: 1.4s }
@keyframes vizPop { 0%,6% { opacity:0; transform: translateY(7px) } 16%,78% { opacity:1; transform:none } 90%,100% { opacity:0 } }

/* browser: blocks assemble inside a window */
.viz-browser { padding: 13px; height: 100%; display: grid; }
.viz-win { border-radius: 8px; overflow: hidden; background: hsl(200 24% 9%);
  border: 1px solid hsla(0 0% 100% / .12); display: grid; grid-template-rows: 14px 1fr; }
.viz-winbar { background: hsla(0 0% 100% / .08); display: flex; align-items: center; gap: 3px; padding-left: 6px; }
.viz-winbar span { width: 4px; height: 4px; border-radius: 50%; background: hsla(0 0% 100% / .35); }
.viz-winbody { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; padding: 6px; }
.viz-winbody i { border-radius: 3px; background: hsla(175 58% 45% / .45); transform-origin: bottom;
  animation: vizRise 4.2s cubic-bezier(.4,0,.2,1) infinite; }
.viz-winbody i:nth-child(1) { grid-column: 1 / -1; background: hsla(38 82% 62% / .4); }
.viz-winbody i:nth-child(3) { animation-delay: .18s } .viz-winbody i:nth-child(4) { animation-delay: .36s }
@keyframes vizRise { 0%,100% { transform: scaleY(.35); opacity:.4 } 45% { transform: scaleY(1); opacity:1 } }

/* nodes: a pulse runs the automation path */
.viz-nodes { position: relative; height: 100%; display: flex; align-items: center;
  justify-content: space-between; padding: 0 22px; }
.viz-nodes::before { content: ""; position: absolute; left: 26px; right: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, hsla(175 58% 45% / .25), hsla(38 82% 62% / .25)); }
.viz-nodes::after {
  content: ""; position: absolute; left: 26px; right: 26px; top: 50%; height: 10px; margin-top: -5px;
  background-image: radial-gradient(circle at center, var(--teal-bright) 0 4px, transparent 4.6px);
  background-repeat: no-repeat; background-size: 10px 10px;
  filter: drop-shadow(0 0 8px hsla(172 62% 55% / .85));
  animation: vizRun 6s cubic-bezier(.45,0,.55,1) infinite;
}
/* background-position instead of `left`: paint only, no layout per frame */
@keyframes vizRun {
  0%   { background-position: 0% 50%;   opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { background-position: 100% 50%; opacity: 0; }
}
.viz-nodes i { width: 15px; height: 15px; border-radius: 5px; position: relative; z-index: 1;
  background: hsl(200 24% 14%); border: 1.5px solid hsla(175 58% 45% / .55); }
.viz-nodes i:last-child { border-color: hsla(38 82% 62% / .7); }

/* palette: swatches cycle */
.viz-palette { display: flex; gap: 6px; padding: 22px 16px; height: 100%; align-items: stretch; }
.viz-palette i { flex: 1; border-radius: 7px; animation: vizSwatch 4.8s ease-in-out infinite; }
.viz-palette i:nth-child(1) { background: hsl(178 50% 30%) }
.viz-palette i:nth-child(2) { background: hsl(38 82% 62%); animation-delay: .3s }
.viz-palette i:nth-child(3) { background: hsl(203 28% 18%); animation-delay: .6s }
.viz-palette i:nth-child(4) { background: hsl(30 30% 88%); animation-delay: .9s }
.viz-palette i:nth-child(5) { background: hsl(172 62% 55%); animation-delay: 1.2s }
@keyframes vizSwatch { 0%,100% { transform: scaleY(.72); opacity:.65 } 45% { transform: scaleY(1); opacity:1 } }

/* funnel: rows narrow as leads qualify */
.viz-funnel { display: grid; gap: 6px; padding: 18px 16px; height: 100%; align-content: center; justify-items: center; }
.viz-funnel i { display: block; height: 13px; border-radius: 4px;
  background: linear-gradient(90deg, hsla(175 58% 45% / .8), hsla(38 82% 62% / .7));
  animation: vizNarrow 4.4s ease-in-out infinite; }
.viz-funnel i:nth-child(1) { width: 92% } .viz-funnel i:nth-child(2) { width: 70%; animation-delay: .25s }
.viz-funnel i:nth-child(3) { width: 48%; animation-delay: .5s } .viz-funnel i:nth-child(4) { width: 28%; animation-delay: .75s }
@keyframes vizNarrow { 0%,100% { opacity:.4; transform: scaleX(.9) } 45% { opacity:1; transform: scaleX(1) } }

/* doc: a deck/report page builds itself */
.viz-doc { padding: 16px; height: 100%; display: grid; }
.viz-page { background: hsl(30 22% 94%); border-radius: 6px; padding: 9px; display: grid; gap: 5px; align-content: start; }
.viz-page i { display: block; height: 6px; border-radius: 3px; background: hsl(203 14% 72%); transform-origin: left;
  animation: vizFill 4.8s cubic-bezier(.4,0,.2,1) infinite; }
.viz-page i:first-child { height: 11px; width: 62%; background: hsl(178 50% 30%); }
.viz-page i:nth-child(2) { animation-delay: .3s } .viz-page i:nth-child(3) { animation-delay: .6s }
.viz-page i:nth-child(4) { animation-delay: .9s; width: 74% }

/* shield: coverage sweeps across */
.viz-shield { display: grid; place-items: center; height: 100%; }
.viz-shield svg { width: 52px; height: 52px; color: var(--teal-bright); overflow: visible; }
.viz-shield svg path { stroke-dasharray: 120; stroke-dashoffset: 120;
  animation: vizDraw 4.6s ease-in-out infinite; }
@keyframes vizDraw { 0% { stroke-dashoffset: 120 } 45%,80% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 120 } }

@media (prefers-reduced-motion: reduce) {
  .viz-inbox i::after, .viz-chat i, .viz-winbody i, .viz-nodes::after,
  .viz-palette i, .viz-funnel i, .viz-page i, .viz-shield svg path { animation-duration: 12s; }
}

/* Case cards: one consistent rhythm instead of stacked flex gaps + margins. */
.gr-cases .grid--2 { align-items: stretch; }
.case-card { height: 100%; }
.case-body { gap: 0; }
.case-body .case-tag { margin: 0 0 .6rem; }
.case-body h3 { margin: 0 0 .35rem; line-height: 1.18; }
.case-body .case-sub { margin: 0 0 .95rem; }
.case-body p { margin: 0 0 .7rem; }
.case-body p:last-of-type { margin-bottom: 1.05rem; }
.case-body .facts { margin-top: auto; padding-top: 1rem; }

/* Case card: image, then text immediately under it, chips pinned to the base. */
.case-card { display: flex; flex-direction: column; gap: 0; }
.case-card > .case-shots { flex: 0 0 auto; }
.case-card > .case-body {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start;
}

/* ==========================================================================
   MOBILE RENDERING FIXES
   iOS Safari drops the paint of a large transform-animated layer that also
   carries a -webkit-mask-image, which left the marquees blank or flickering.
   Use a gradient overlay for the edge fade instead, and pin the tracks to
   their own stable composited layer.
   ========================================================================== */
@media (max-width: 1024px) {
  .ribbon, .trust-names, .stories-rail, .reels-rail {
    -webkit-mask-image: none !important; mask-image: none !important;
  }


  /* backdrop-filter on every card is the single most expensive thing on a
     phone; the cards are opaque anyway, so nothing is lost by dropping it */
  .card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .reel-play, .story-ring { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

  /* a blurred, drifting, full-bleed layer is not worth the frames it costs */
  .cta-band::before { filter: none; }
}

/* The variant classes sit on the .svc-viz element itself, so their height:100%
   was beating the fixed height and every card's visual came out a different
   size. Higher specificity pins them all to the same box. */
.svc-viz.viz-inbox, .svc-viz.viz-chat, .svc-viz.viz-browser, .svc-viz.viz-nodes,
.svc-viz.viz-palette, .svc-viz.viz-funnel, .svc-viz.viz-doc, .svc-viz.viz-shield,
.svc-viz.viz-reel, .svc-viz.viz-chart, .svc-viz.viz-wrap { height: 132px; }

/* the visual already says what the icon said */
.svc-viz + .card-icon { display: none; }

/* ==========================================================================
   MOBILE GRID CORRECTIONS
   .grid--3 becomes a FLEX row on small screens and its children are forced to
   flex:1 1 100%, which is why the brand-system columns collapsed to one no
   matter what grid-template-columns said. And the creative gallery used CSS
   columns, so tiles cascaded instead of starting on a shared line.
   ========================================================================== */
@media (max-width: 1000px) {
  .gr-brand .grid--3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .7rem; align-items: start;
  }
  .gr-brand .grid--3 > * { flex: none !important; max-width: none !important; width: auto !important; }

  /* real grid, so every row of tiles starts on the same line */
  .gr-creative .gallery {
    columns: auto !important; column-gap: normal;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem; align-items: start;
  }
  .gr-creative .gallery .tile { margin-bottom: 0; break-inside: auto; }
}
@media (max-width: 620px) {
  .gr-brand .grid--3 { gap: .45rem; }
  .gr-creative .gallery { gap: .45rem; }
  .gr-brand .tile figcaption { padding: .4rem .35rem .5rem; }
  .gr-brand .tile-kicker { font-size: .46rem; letter-spacing: .07em; }
  .gr-brand .tile-title  { font-size: .62rem; line-height: 1.22; }
  .gr-brand .tile-client { font-size: .5rem; }
}

/* every caption, chip row and stat on the client-work page reads centred */
@media (max-width: 1000px) {
  .gr-creative .tile figcaption,
  .gr-brand .tile figcaption { text-align: center; align-items: center; }
  .gr-creative .facts, .gr-brand .facts { justify-content: center; }
  .studio-stats, .studio-copy, .reel-caption, .reel-blurb { text-align: center; }
  .studio-copy .tick-list { justify-self: center; }
  .feed-label, .ribbon-label, .reels-more-label { text-align: center; }
}

/* ==========================================================================
   MOBILE PERFORMANCE + GALLERY PACKING (final pass)
   The marquee was compositing full-size photos scaled to 148px; those now come
   from /thumb. The creative gallery goes back to packed masonry so tiles hug
   their images instead of leaving a gap under every short one.
   ========================================================================== */
@media (max-width: 1000px) {
  /* packed masonry, same behaviour as desktop, three columns wide */
  .gr-creative .gallery {
    display: block !important;
    columns: 3 auto !important; column-gap: .5rem !important;
  }
  .gr-creative .gallery .tile {
    break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
    display: inline-block; width: 100%; margin: 0 0 .5rem !important;
  }

  /* slower, steadier travel — the jank read as "too fast" */
  .ribbon-track { animation-duration: 150s; }
  .ribbon--rev .ribbon-track { animation-duration: 175s; }
  .trust-track { animation-duration: 90s; }
}
@media (max-width: 620px) {
  .gr-creative .gallery { column-gap: .4rem !important; }
  .gr-creative .gallery .tile { margin-bottom: .4rem !important; }
}



/* ==========================================================================
   SMALL-SCREEN TILES — at three across a tile is ~105px, and a stacked
   caption ran to five lines, taller than the artwork. Overlay it instead so
   a tile is exactly as tall as its image and the masonry packs cleanly.
   ========================================================================== */
@media (max-width: 760px) {
  .gr-creative .tile, .gr-brand .tile { position: relative; }
  .gr-creative .tile figcaption,
  .gr-brand .tile figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    display: grid; gap: .05rem; padding: .5rem .38rem .45rem; text-align: center;
    background: linear-gradient(hsla(0 0% 0% / 0), hsla(0 0% 0% / .55) 42%, hsla(0 0% 0% / .88));
  }
  .gr-creative .tile-kicker, .gr-brand .tile-kicker { display: none; }
  .gr-creative .tile-title, .gr-brand .tile-title {
    font-size: .6rem !important; line-height: 1.2; color: #fff; font-weight: 700;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .gr-creative .tile-client, .gr-brand .tile-client {
    font-size: .46rem !important; letter-spacing: .07em; text-transform: uppercase;
    color: var(--teal-bright); line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  .gr-creative .tile-zoom, .gr-brand .tile-zoom { width: 20px; height: 20px; top: .3rem; right: .3rem; }
  .gr-creative .tile-zoom svg, .gr-brand .tile-zoom svg { width: 10px; height: 10px; }
  .gr-brand .grid--3 { align-items: start; }
}

/* Half the marquee on phones: a 3,300px animated layer full of photos is the
   single heaviest thing on the page. Hiding every other tile in BOTH copies
   keeps the loop seamless and halves the work. */
@media (max-width: 620px) {
  .ribbon-track { animation-duration: 110s; }
  .ribbon--rev .ribbon-track { animation-duration: 128s; }
}

/* industry hub cards + the "also works for" chip list */
.hub-shot { display: block; height: 132px; border-radius: 12px; overflow: hidden;
  margin-bottom: 1rem; background: #0C1113; border: 1px solid hsla(0 0% 100% / .08); }
.hub-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;
  transition: transform .5s cubic-bezier(.22,.8,.3,1); }
.card--link:hover .hub-shot img { transform: scale(1.05); }
.also-list { justify-content: center; border-top: 0; padding-top: 0; gap: .5rem; }
.also-list li { font-size: .82rem; padding: .45rem .9rem; }

/* card-wide links must not underline their body copy */
a.card, a.card--link, a.card * { text-decoration: none; }
a.card:hover .case-go, a.card--link:hover .case-go { text-decoration: none; }

/* ==========================================================================
   MOBILE MARQUEES — driven by native scrolling, not a composited transform.
   .js-marquee is added by main.js only when the JS loop is actually running,
   so if the script fails the CSS animation is still there as a fallback.
   ========================================================================== */
@media (max-width: 1024px) {
  .ribbon.js-marquee, .trust-names.js-marquee {
    overflow-x: auto; overflow-y: hidden;
    /* never 'smooth': scrollLeft is written every frame and smooth would fight
       it. -webkit-overflow-scrolling is deliberately omitted; its legacy
       accelerated path stutters under programmatic scrolling on iOS. */
    scroll-behavior: auto !important;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .ribbon.js-marquee::-webkit-scrollbar,
  .trust-names.js-marquee::-webkit-scrollbar { display: none; }
  .js-marquee .ribbon-track, .js-marquee .trust-track {
    animation: none !important; transform: none !important; width: max-content;
  }
}

/* ==========================================================================
   LIMITED OFFER — a promo bar and a struck-through "was" price
   ========================================================================== */
.promo-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .75rem 1rem; margin: 0 auto clamp(1.5rem, 3vw, 2.25rem); max-width: 900px;
  padding: .85rem 1.1rem; border-radius: 999px; text-align: center;
  background: linear-gradient(120deg, hsla(38 82% 62% / .16), hsla(175 58% 45% / .16));
  border: 1px solid hsla(38 82% 62% / .42);
  box-shadow: 0 18px 40px -26px hsla(38 82% 40% / .7);
}
.promo-tag {
  flex: 0 0 auto; font-size: .62rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px;
  background: linear-gradient(160deg, var(--gold-2, hsl(42 88% 70%)), var(--gold));
  color: var(--gold-ink, hsl(30 40% 15%));
}
.promo-copy { font-size: .92rem; line-height: 1.45; color: var(--text-2); }
.promo-copy b { color: var(--text); }
.section--light .promo-copy { color: hsl(203 14% 30%); }
.section--light .promo-copy b { color: hsl(203 28% 12%); }
.promo-cta {
  flex: 0 0 auto; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  padding: .5rem 1.05rem; border-radius: 999px;
  background: linear-gradient(160deg, var(--gold-2, hsl(42 88% 70%)), var(--gold));
  color: var(--gold-ink, hsl(30 40% 15%));
  transition: transform .25s ease, box-shadow .25s ease;
}
.promo-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px hsla(38 82% 40% / .9); }

.plan-flag--promo {
  background: linear-gradient(160deg, hsl(4 78% 62%), hsl(14 84% 55%));
  color: #fff;
}
.plan-was {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 600;
  color: var(--card-text-2); opacity: .72; margin-right: .45rem;
  text-decoration: line-through; text-decoration-thickness: 1.5px;
}
@media (max-width: 620px) {
  .promo-bar { border-radius: 16px; padding: .8rem .9rem; gap: .6rem; }
  .promo-copy { font-size: .84rem; }
  .promo-cta { font-size: .72rem; padding: .45rem .85rem; }
  .plan-was { font-size: 1rem; }
}

/* ==========================================================================
   CARD ANIMATIONS ON SMALL SCREENS
   These loops pulse six to nine elements at once. At desktop card size that
   reads as motion; at ~340px it reads as flicker. Slow them down and cut the
   amplitude so they feel alive rather than frantic.
   ========================================================================== */
@media (max-width: 900px) {
  .viz-feed i          { animation-duration: 9s; }
  .viz-heart           { animation-duration: 7s; }
  .viz-chart i         { animation-duration: 8s; }
  .viz-inbox i::after  { animation-duration: 9.5s; }
  .viz-chat i          { animation-duration: 9s; }
  .viz-winbody i       { animation-duration: 8.5s; }
  .viz-nodes::after    { animation-duration: 7s; }
  .viz-palette i       { animation-duration: 9.5s; }
  .viz-funnel i        { animation-duration: 9s; }
  .viz-page i          { animation-duration: 9.5s; }
  .viz-shield svg path { animation-duration: 9s; }
  .viz-phone::before   { animation-duration: 7.5s; }
  .viz-bar::after      { animation-duration: 9s; }

  /* gentler range: less blink, more breathe */
  @keyframes vizTile   { 0%,70%,100% { opacity:.4 }  30% { opacity:.9 } }
  @keyframes vizGrow   { 0%,100% { transform: scaleY(.78) } 45% { transform: scaleY(1) } }
  @keyframes vizSwatch { 0%,100% { transform: scaleY(.86); opacity:.75 } 45% { transform: scaleY(1); opacity:1 } }
  @keyframes vizNarrow { 0%,100% { opacity:.6; transform: scaleX(.95) } 45% { opacity:1; transform: scaleX(1) } }
  @keyframes vizRise   { 0%,100% { transform: scaleY(.6); opacity:.6 } 45% { transform: scaleY(1); opacity:1 } }
  @keyframes vizHeart  { 0%,72%,100% { transform: scale(.92); opacity:.7 } 82% { transform: scale(1.1); opacity:1 } }
}

/* ==========================================================================
   PHONE-SIZE CARD ANIMATION: one clear motion per card
   Nine feed tiles and six bars pulsing on staggered offsets looks like motion
   on a wide card and like flicker on a 300px one. On phones the supporting
   elements hold still and a single deliberate movement carries each card.
   ========================================================================== */
@media (max-width: 900px) {
  /* Social: tiles settle and stay put; only the heart moves */
  .viz-feed i { animation: none !important; opacity: .62; }
  .viz-feed i:nth-child(5) { opacity: .95; }
  .viz-heart { animation: vizHeartCalm 5.5s ease-in-out infinite; }
  @keyframes vizHeartCalm {
    0%, 100% { transform: scale(.94); opacity: .78; }
    50%      { transform: scale(1.08); opacity: 1; }
  }

  /* Reels: drop the sheen sweep, keep the progress bar travelling */
  .viz-phone::before { animation: none !important; opacity: 0; }
  .viz-bar::after    { animation-duration: 7s; }

  /* Reporting: bars rise once, hold, then reset — no constant pumping */
  .viz-chart i { animation: vizGrowCalm 7s cubic-bezier(.32,.72,.3,1) infinite; }
  @keyframes vizGrowCalm {
    0%       { transform: scaleY(.62); }
    28%, 78% { transform: scaleY(1); }
    100%     { transform: scaleY(.62); }
  }

  /* the service-card visuals get the same treatment */
  .viz-inbox i::after  { animation-duration: 8s; }
  .viz-chat i          { animation-duration: 8s; }
  .viz-winbody i       { animation-duration: 8s; }
  .viz-palette i       { animation-duration: 8s; }
  .viz-funnel i        { animation-duration: 8s; }
  .viz-page i          { animation-duration: 8s; }
}

/* ==========================================================================
   HOMEPAGE "WHAT I DO" CARDS ON PHONES — one motion each, same as the
   client-work cards. Four bars filling and six blocks scaling at once reads
   as flicker at this size.
   ========================================================================== */
@media (max-width: 900px) {
  /* Reclaim your calendar: first three tasks stay done, the last one fills */
  .viz-inbox i::after { animation: none !important; transform: scaleX(1); opacity: .85; }
  .viz-inbox i:last-child::after {
    animation: vizFillCalm 6.5s cubic-bezier(.32,.72,.3,1) infinite !important; opacity: 1;
  }
  @keyframes vizFillCalm {
    0%       { transform: scaleX(0); }
    32%, 76% { transform: scaleX(1); }
    100%     { transform: scaleX(0); }
  }

  /* Sites that convert: blocks hold, the header bar breathes */
  .viz-winbody i { animation: none !important; transform: scaleY(1); opacity: .8; }
  .viz-winbody i:first-child {
    animation: vizBarCalm 6s ease-in-out infinite !important;
  }
  @keyframes vizBarCalm {
    0%, 100% { opacity: .55; transform: scaleY(.9); }
    50%      { opacity: 1;   transform: scaleY(1); }
  }

  /* Systems that sell: the pulse now travels via background-position */
  .viz-nodes::after { animation-duration: 7s; }
  .flowline::after  { animation-duration: 8s; }
}

/* ==========================================================================
   PRICING ON PHONES — every plan and bundle card reads centred
   ========================================================================== */
@media (max-width: 760px) {
  .price-grid, .price-cards { justify-items: center; }
  .price-grid .plan, .price-cards .plan, .price-cards .build-card {
    text-align: center; width: 100%;
  }
  .plan .plan-name, .plan .plan-note, .plan .card-kicker,
  .plan h3, .build-card h3, .build-card p { text-align: center; }
  .plan .plan-price, .build-card .plan-price { justify-content: center; }
  /* feature lists stay left-aligned inside a centred block so they scan */
  .plan ul { display: inline-grid; justify-items: start; text-align: left; margin-inline: auto; }
  .plan ul li { text-align: left; }
  .plan .card-foot, .build-card .card-foot { width: 100%; }
  .assurance { text-align: center; }
  .assurance-item { align-items: center; text-align: center; }
  .build-factors, .build-list { justify-items: center; text-align: center; }
}

/* ==========================================================================
   PLAN DETAIL DISCLOSURES — the full answer on the card, without the wall
   of text. Closed by default so the cards stay scannable.
   ========================================================================== */
.plan-more { margin-top: auto; border-top: 1px solid var(--card-line); padding-top: .85rem; }
.plan-more > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: .45rem; font-size: .8rem; font-weight: 700; letter-spacing: .02em;
  color: var(--teal-ink); padding: .3rem 0; text-align: center;
}
.plan-more > summary::-webkit-details-marker { display: none; }
.plan-more > summary:hover { color: var(--teal-ink-deep); }
.pm-mark {
  width: 15px; height: 15px; flex: 0 0 auto; position: relative;
  transition: transform .25s ease;
}
.pm-mark::before, .pm-mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 2px;
}
.pm-mark::before { width: 11px; height: 2px; transform: translate(-50%, -50%); }
.pm-mark::after  { width: 2px; height: 11px; transform: translate(-50%, -50%); transition: opacity .25s ease; }
.plan-more[open] .pm-mark::after { opacity: 0; }
.plan-more[open] .pm-mark { transform: rotate(180deg); }

.pm-body { margin: .7rem 0 .2rem; display: grid; gap: .8rem; text-align: left; }
.pm-row dt {
  font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--teal-ink); margin-bottom: .22rem;
}
.pm-row dd { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--card-text-2); }
.plan-more[open] .pm-body { animation: pmOpen .3s ease both; }
@keyframes pmOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* the disclosure sits above the button, so the button stays pinned to the base */
.plan .card-foot { margin-top: 1rem; }
@media (max-width: 760px) {
  .plan-more > summary { font-size: .78rem; }
  .pm-row dd { font-size: .82rem; }
  .pm-body { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-mark { transition: none; }
  .plan-more[open] .pm-body { animation: none; }
}

/* phone in the header, and a two-button sticky bar on phones */
.nav-phone { font-size: .86rem; font-weight: 600; color: var(--text-2); text-decoration: none; white-space: nowrap; margin-right: .85rem; }
.nav-phone:hover { color: var(--teal-bright); }
@media (max-width: 760px) {
  .stickycta { display: flex !important; gap: .5rem; }
  .stickycta .btn { flex: 1 1 0; justify-content: center; text-align: center; }
}


/* ===== GUIDES (article pages) ===== */
.prose{max-width:760px}
.prose h2{margin-top:2.4rem}
.prose h3{margin-top:1.6rem}
.prose p,.prose li{line-height:1.75;font-size:1.0625rem}
.prose h2{font-size:clamp(1.55rem,2.6vw,2.1rem);line-height:1.2}
.prose h3{font-size:clamp(1.2rem,2vw,1.4rem)}
.prose ul,.prose ol{padding-left:1.25rem;margin:1rem 0}
.prose li{margin:.4rem 0}
.article-meta{color:#6b7280;font-size:.92rem;margin-bottom:1.75rem}
.callout{border-left:4px solid var(--gold, #c9a45c);background:rgba(201,164,92,.09);padding:1rem 1.25rem;border-radius:12px;margin:1.6rem 0}
.callout p{margin:0}
.more-guides ul{list-style:none;padding:0}
.more-guides li{margin:.5rem 0}
@media (max-width:640px){.prose{text-align:left}.prose h2{font-size:1.45rem}}


/* ===== BOOKING EMBED ===== */
.book-embed{position:relative;width:100%;max-width:900px;margin-inline:auto;border-radius:18px;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.12)}
.book-embed iframe{display:block;width:100%;height:700px;border:0}
@media (max-width:640px){.book-embed iframe{height:560px}}

/* ===== COST CALCULATOR ===== */
.calc{background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:28px}
.calc-tasks{list-style:none;padding:0;margin:14px 0 6px;display:grid;gap:8px}
.calc-tasks label{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);cursor:pointer;font-size:1rem}
.calc-tasks input{width:18px;height:18px;accent-color:#2BA197;flex:0 0 auto}
.calc-tasks span{margin-left:auto;color:#8fd9cf;font-weight:600;font-size:.95rem}
.calc-out{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.calc-card{padding:18px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);text-align:center}
.calc-card--go{background:rgba(43,161,151,.14);border-color:rgba(77,217,198,.4)}
.calc-k{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#9fb0b4}
.calc-card b{display:block;font-family:"Playfair Display",Georgia,serif;font-size:2rem;margin:6px 0 4px;color:#fff}
.calc-s{display:block;font-size:.9rem;color:#aebcc0;line-height:1.4}
.calc-note{margin-top:14px;color:#c4d0d3;font-size:.98rem}
@media (max-width:720px){.calc-out{grid-template-columns:1fr}.calc{padding:20px}}