/* ============================================================
   Nagged — shared stylesheet
   Place at: public/css/nagged.css  (or resources/css/nagged.css if compiled)
   Loaded once via resources/views/layouts/app.blade.php
   ============================================================ */

/* ---------- Design tokens ---------- */
/* July 2026 rebrand — green → electric blue palette.
   Token names are historical (e.g. --c-green now holds the brand blue).
   The rename would ripple through every Blade template + Livewire component,
   so we're keeping the names and swapping the values. Any file that reads
   var(--c-green) now gets the brand blue. */
:root {
  /* Brand colours — electric blue + lavender + light-blue accent. */
  --c-green:        #3a23e8;   /* PRIMARY BRAND — electric Nagged blue (logo + buttons + bars) */
  --c-green-soft:   rgba(58, 35, 232, 0.5);
  --c-green-deep:   #200daf;   /* deeper blue for hover/focus states */

  /* Blue-family aliases (used by new July 2026 components). */
  --c-blue:         #3a23e8;
  --c-blue-band:    #2a12e0;   /* deeper blue for full-bleed bands */
  --c-blue-deep:    #200daf;
  --c-lav:          #e9ebfb;   /* page background lavender */
  --c-lav-2:        #dfe2fb;   /* alt-band lavender */
  --c-yellow:       #aab4ff;   /* light-blue accent (name kept for backwards compat) */

  /* Neutrals */
  --c-ink:          #141414;
  --c-ink-soft:     #3a3a3a;
  --c-muted:        #6b6b86;
  --c-line:         #d6d9f2;
  --c-paper:        #e9ebfb;   /* was near-white — now lavender to match brand */
  --c-white:        #ffffff;
  --c-black:        #141414;

  /* Typography */
  --font-sans:  "komet", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "loretta", Georgia, "Times New Roman", serif;

  /* Type scale (1.33x) */
  --t-xs:   12px;
  --t-sm:   14px;
  --t-base: 16px;
  --t-md:   21px;
  --t-lg:   28px;
  --t-xl:   37px;
  --t-2xl:  50px;
  --t-3xl:  67px;
  --t-4xl:  89px;

  /* Radii */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Shadows */
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.10);
  --shadow-lg: 0 18px 48px rgba(0,0,0,0.18);

  /* Layout */
  --container: 1180px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
    -webkit-text-size-adjust: 100%;
    /* Sticky nav (.nav--2026) is ~90px on desktop, ~70px on mobile.
       scroll-padding-top pushes any anchored/hashed navigation ("#services",
       "#reviews" etc.) down by the nav height so the section eyebrow isn't
       clipped by the sticky nav. One-line fix applies site-wide. */
    scroll-padding-top: 100px;
    scroll-behavior: smooth;
}
@media (max-width: 700px) {
    html { scroll-padding-top: 80px; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--c-ink);
  background: var(--c-lav);        /* July 2026: lavender page background */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}

.display-1 { font-size: clamp(40px, 6vw, var(--t-3xl)); }
.display-2 { font-size: clamp(32px, 4.5vw, var(--t-2xl)); }
.display-3 { font-size: clamp(26px, 3.5vw, var(--t-xl)); }

.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--t-xs);
  font-weight: 600;
  opacity: 0.7;
}

.lede {
  font-size: var(--t-md);
  line-height: 1.45;
  color: var(--c-ink-soft);
}

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--s-5);
}

.section {
  width: 100%;
  padding-block: var(--s-9);
}

@media (max-width: 720px) {
  .section { padding-block: var(--s-8); }
}

/* Section modifiers — neutral palette with brand-green hero anchor.
   Hero is green for visual identity; everything else alternates
   white / soft-paper for subtle definition without band stripes. */
.section--hero      { background: var(--c-green);  color: var(--c-ink); }

/* ---------- Hero floaters (coverflow-style stack behind hero window) ---------- */
/* Visual carousel — no controls, no interactivity.
   The hero browser-window is the in-focus centre. Floaters stack behind
   it on either side, anchored to the window's vertical midline.
     2 = inner-left  (450px, behind hero's left edge)
     1 = outer-left  (325px, behind floater 2)
     3 = inner-right (450px, behind hero's right edge)
     4 = outer-right (325px, behind floater 3) */

.hero { position: relative; overflow: hidden; }

/* The stage wraps the hero-window so floaters can be positioned
   relative to it (vertically centred against the window). */
.hero-stage {
  position: relative;
  max-width: 760px;
  width: 100%;
  margin-inline: auto;
}

.hero-floaters {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.hero-window {
  position: relative;
  z-index: 5;
}

.hero-floater {
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 16 / 11;
  border-radius: var(--r-md);
  overflow: hidden;
}

.hero-floater img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Inner pair — 450px wide, in front of the outer pair, behind the hero window.
   translate(-50%, -50%) centres each on the hero-window's midline,
   then we push them left/right by ~280px so each peeks out past the edge. */
.hero-floater--2 {
  width: 450px;
  transform: translate(calc(-50% - 280px), -50%);
  opacity: 0.7;
  filter: blur(2px);
  z-index: 3;
}
.hero-floater--3 {
  width: 450px;
  transform: translate(calc(-50% + 280px), -50%);
  opacity: 0.7;
  filter: blur(2px);
  z-index: 3;
}

/* Outer pair — 325px wide, sat further out and behind the inner pair. */
.hero-floater--1 {
  width: 325px;
  transform: translate(calc(-50% - 500px), -50%);
  opacity: 0.45;
  filter: blur(4.5px);
  z-index: 2;
}
.hero-floater--4 {
  width: 325px;
  transform: translate(calc(-50% + 500px), -50%);
  opacity: 0.45;
  filter: blur(4.5px);
  z-index: 2;
}

/* Gentle drift — gives the stack a little "life". */
@media (prefers-reduced-motion: no-preference) {
  .hero-floater--1 { animation: hero-drift-1 14s ease-in-out infinite alternate; }
  .hero-floater--2 { animation: hero-drift-2 16s ease-in-out infinite alternate; }
  .hero-floater--3 { animation: hero-drift-3 15s ease-in-out infinite alternate; }
  .hero-floater--4 { animation: hero-drift-4 17s ease-in-out infinite alternate; }
}

@keyframes hero-drift-1 {
  from { transform: translate(calc(-50% - 500px), -50%); }
  to   { transform: translate(calc(-50% - 500px), -54%); }
}
@keyframes hero-drift-2 {
  from { transform: translate(calc(-50% - 280px), -50%); }
  to   { transform: translate(calc(-50% - 280px), -47%); }
}
@keyframes hero-drift-3 {
  from { transform: translate(calc(-50% + 280px), -50%); }
  to   { transform: translate(calc(-50% + 280px), -53%); }
}
@keyframes hero-drift-4 {
  from { transform: translate(calc(-50% + 500px), -50%); }
  to   { transform: translate(calc(-50% + 500px), -46%); }
}

/* Hide entirely on small screens — they crowd the hero window. */
@media (max-width: 980px) {
  .hero-floaters { display: none; }
}

.section--matter    { background: var(--c-paper);  color: var(--c-ink); }
.section--customers { background: var(--c-white);  color: var(--c-ink); }
.section--cases     { background: var(--c-paper);  color: var(--c-ink); }
.section--services  { background: var(--c-white);  color: var(--c-ink); }
.section--reviews   { background: var(--c-paper);  color: var(--c-ink); }
.section--footer    { background: var(--c-black);  color: var(--c-white); padding-block: var(--s-8); }

.section__head {
  text-align: center;
  margin-bottom: var(--s-7);
}

.section__head h2 { font-size: clamp(28px, 4vw, var(--t-xl)); }

/* ---------- Navbar ----------
   July 2026: sticky nav with lavender bg (not electric blue — too intense
   for the whole nav band). Sits above the topbar or immediately below it.
   Custom nav__inner grid used on homepage; historical use kept for quiz. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-lav);
  border-bottom: 1px solid var(--c-line);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s-4);
}

.nav__brand img { height: 40px; width: auto; }

.nav__links {
  display: flex;
  gap: var(--s-5);
  align-items: center;
}

/* Text-only nav links — skip the CTA so .btn--primary's white text wins. */
.nav__links a:not(.btn) {
  text-decoration: none;
  font-weight: 500;
  font-size: var(--t-sm);
  color: var(--c-ink);
}

.nav__links a:not(.btn):hover { text-decoration: underline; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 14px 28px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--t-base);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn:hover  { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

/* Primary CTA: black with white text. Reads well on the green hero,
   the white card sections, and the green navbar. */
.btn--primary {
  background: var(--c-ink);
  color: var(--c-white);
}

.btn--dark {
  background: var(--c-ink);
  color: var(--c-white);
}

.btn--ghost {
  background: transparent;
  color: inherit;
  border: 1.5px solid currentColor;
}

.btn--lg {
  padding: 12px 30px;
  font-size: var(--t-md);
}

/* ---------- Cards ---------- */
.card {
  background: var(--c-white);
  color: var(--c-ink);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  box-shadow: var(--shadow-sm);

  /* Flex column so CTAs anchored at the bottom align across siblings.
     Grid items stretch by default, so all cards in a row match heights. */
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Any .btn or .case-cta that sits as the last child of a card gets
   pushed to the bottom — gives consistent CTA alignment regardless
   of how much text sits above. */
.card > .btn:last-child,
.card > .case-cta:last-child {
  margin-top: auto;
}

.card--tight { padding: var(--s-5); }
.card--lg    { padding: var(--s-8); border-radius: var(--r-xl); }

/* ---------- Case cards (use-cases section — green card / ink ink) ---------- */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

.case-card {
  background: var(--c-green);
  color: var(--c-ink);
  border-radius: var(--r-md);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.case-card h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--t-md);
  line-height: 1.2;
  color: var(--c-ink);
}

.case-card p {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  color: var(--c-ink);
  line-height: 1.5;
}

.case-image {
  background: transparent;
  border-radius: 12px;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.case-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.case-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--c-ink);
  color: var(--c-green);
  border-radius: var(--r-pill);
  font-weight: 600;
  text-decoration: none;
  font-size: var(--t-sm);
  margin-top: auto;
  transition: opacity 0.15s;
}

.case-cta:hover { opacity: 0.85; }

@media (max-width: 900px) { .case-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .case-grid { grid-template-columns: 1fr; } }

/* ---------- Chips / pills ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.85);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-ink);
}

.chip--solid {
  background: var(--c-white);
}

/* ---------- Forms (used in quiz / brand-inputs) ---------- */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

.form-label {
  font-size: var(--t-sm);
  font-weight: 600;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-md);
  font: inherit;
  background: var(--c-white);
  color: var(--c-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--c-ink);
  box-shadow: 0 0 0 4px rgba(30,255,108,0.35);
}

.form-help {
  font-size: var(--t-xs);
  color: var(--c-muted);
}

.form-error {
  font-size: var(--t-xs);
  color: #c0392b;
}

/* ---------- Quiz answer grid (reusable for quiz blades) ---------- */
.quiz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-4);
}

.quiz-option {
  background: var(--c-white);
  border: 2px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--c-ink);
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 92px;
}

.quiz-option:hover,
.quiz-option.is-selected {
  border-color: var(--c-ink);
  background: var(--c-green-soft);
  transform: translateY(-2px);
}

.quiz-option__label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-base);
  color: var(--c-ink);
}

.quiz-option__sub {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  color: var(--c-muted);
  line-height: 1.4;
}

/* ---------- Quiz shell (wrapping Livewire component) ---------- */
.quiz-shell {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  color: var(--c-ink);
}

.quiz-bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.quiz-bar__back {
  font-size: var(--t-sm);
  color: var(--c-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
}
.quiz-bar__back:hover:not(:disabled) { color: var(--c-ink); }
.quiz-bar__back:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.quiz-bar__progress {
  flex: 1;
  height: 6px;
  background: var(--c-line);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.quiz-bar__progress-fill {
  height: 100%;
  background: var(--c-green);
  border-radius: var(--r-pill);
  transition: width 0.4s ease;
}

.quiz-bar__step {
  font-size: var(--t-sm);
  color: var(--c-muted);
  flex-shrink: 0;
}

.quiz-commentary {
  text-align: center;
  font-size: var(--t-sm);
  color: var(--c-muted);
  margin-bottom: var(--s-7);
  min-height: 20px;
}

.quiz-question {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(26px, 3.5vw, var(--t-xl));
  line-height: 1.15;
  margin-bottom: var(--s-7);
  color: var(--c-ink);
}

.quiz-peek {
  margin-top: var(--s-6);
  opacity: 0.25;
  filter: blur(3px);
  transform: scale(0.95);
  pointer-events: none;
  user-select: none;
}

/* ---------- Brand-inputs form helpers ---------- */
.brand-form .form-field { margin-bottom: var(--s-6); }

.brand-upload {
  border: 1.5px dashed var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  background: var(--c-white);
  transition: border-color 0.15s ease;
}
.brand-upload:hover { border-color: var(--c-ink); }
.brand-upload__input {
  width: 100%;
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
}
.brand-upload__input::file-selector-button {
  margin-right: var(--s-4);
  padding: 8px 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-green);
  color: var(--c-ink);
  font-weight: 600;
  font-size: var(--t-sm);
  cursor: pointer;
}
.brand-upload__filename {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
}

.brand-colours {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.brand-colour {
  background: var(--c-white);
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-4);
}
.brand-colour__label {
  font-size: var(--t-xs);
  color: var(--c-muted);
  margin-bottom: var(--s-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.brand-colour__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.brand-colour__picker {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-sm);
  cursor: pointer;
  background: transparent;
}
.brand-colour__hex {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--t-sm);
  color: var(--c-ink);
}

.brand-preview {
  margin-top: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  box-shadow: var(--shadow-sm);
}
.brand-preview__name {
  color: #ffffff;
  font-weight: 700;
  font-size: var(--t-md);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.brand-preview__cta {
  margin-left: auto;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  color: #ffffff;
  font-size: var(--t-sm);
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* ---------- Footer ---------- */
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-7);
}

.footer__brand img { height: 28px; }

.footer__col h4 {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.6;
  margin-bottom: var(--s-3);
}

.footer__col a {
  display: block;
  text-decoration: none;
  color: var(--c-white);
  padding: 4px 0;
  font-size: var(--t-sm);
  opacity: 0.85;
}

.footer__col a:hover { opacity: 1; text-decoration: underline; }

.footer__legal {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: var(--t-xs);
  opacity: 0.6;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
}

@media (max-width: 720px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.mx-auto { margin-inline: auto; }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.mb-7 { margin-bottom: var(--s-7); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); }
.gap-6 { gap: var(--s-6); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.grid { display: grid; }
.hidden { display: none; }

/* ============================================================
   JULY 2026 REBRAND — new homepage components.
   All classes below are scoped to the reference file's section
   markers. Existing site styles above still apply on non-homepage
   pages via their original class hooks.
   ============================================================ */

/* ---------- Utility: .wrap (mirrors .container with 24px inline pad) ---------- */
.wrap {
  width: 100%;
  max-width: var(--container, 1180px);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---------- Topbar (thin blue band above nav) ----------
   July 2026 v2: Expert guides sits LEFT so it's not competing for
   space in the main nav. Call/WhatsApp/Email sit RIGHT. space-between
   distributes them across the full width. */
.topbar {
  background: var(--c-blue);
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
}
.topbar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 9px;
  gap: 20px;
  flex-wrap: wrap;
}
.topbar__left,
.topbar__right {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.topbar a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  opacity: 0.95;
  color: inherit;
  text-decoration: none;
}
.topbar a:hover { opacity: 1; text-decoration: underline; }
.topbar svg { width: 15px; height: 15px; flex: none; }

/* Mobile trigger — replaces the desktop links row on narrow screens. */
.topbar__mobile-trigger {
    display: none;                          /* shown at ≤720px via @media below */
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(255,255,255,0.10);
    border: 0;
    color: #fff;
    padding: 6px 14px 6px 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}
.topbar__mobile-trigger:hover { background: rgba(255,255,255,0.15); }
.topbar__mobile-icons { display: inline-flex; gap: 10px; }
.topbar__mobile-icons svg { width: 15px; height: 15px; }

/* Contact popup — full-screen overlay with option cards. */
.topbar__popup {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 20, 0.5);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.topbar__popup--enter { animation: topbarPopupEnter 0.2s ease; }
@keyframes topbarPopupEnter {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.topbar__popup-panel {
    background: #fff;
    border-radius: 20px;
    padding: 28px 24px 20px;
    max-width: 380px;
    width: 100%;
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.3);
}
.topbar__popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    background: transparent;
    border: 0;
    font-size: 26px;
    line-height: 1;
    color: var(--c-ink);
    cursor: pointer;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.topbar__popup-close:hover { background: rgba(20,20,20,0.08); }
.topbar__popup-title {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--c-ink);
    margin: 0 0 20px;
    padding-right: 32px;
}
.topbar__popup-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--c-ink);
    border: 1.5px solid var(--c-line);
    margin-bottom: 10px;
    transition: border-color 0.15s, background 0.15s;
}
.topbar__popup-option:hover {
    border-color: var(--c-blue);
    background: rgba(58, 35, 232, 0.04);
}
.topbar__popup-option svg { width: 22px; height: 22px; color: var(--c-blue); flex-shrink: 0; }
.topbar__popup-option div { display: flex; flex-direction: column; }
.topbar__popup-option strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-ink);
    line-height: 1.2;
}
.topbar__popup-option span {
    font-size: 13.5px;
    color: var(--c-ink-soft);
    margin-top: 2px;
}

@media (max-width: 720px) {
  .topbar .wrap { justify-content: center; }
  .topbar__desktop { display: none; }
  .topbar__mobile-trigger { display: inline-flex; }
}
@media (min-width: 721px) {
  .topbar__mobile { display: none; }
}

/* ---------- Nav (July 2026 layout, restructured 2026-07-07) ------------
   Desktop:
     [ logo ]  [ ————— nav links ————— ]
               [ ———— CTA buttons ———— ]
   Logo sits left, vertically centered against the two stacked rows on
   the right. Mobile: quick CTAs + burger, dropdown for full menu.
   ------------------------------------------------------------------- */
.nav--2026 { position: sticky; top: 0; z-index: 60; background: var(--c-lav); border-bottom: 1px solid var(--c-line); }
.nav--2026 .wrap { display: flex; align-items: center; gap: 24px; padding-block: 14px; }
.nav--2026 .nav__logo { flex-shrink: 0; align-self: center; }
.nav--2026 .nav__logo img { height: 53px; display: block; }  /* was 48px — bumped +10% per Tom 2026-07-07 */

/* Right-side stack: nav links row + CTA row. */
.nav--2026 .nav__right {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.nav--2026 .nav__links { display: flex; gap: 26px; }
.nav--2026 .nav__links a { font-size: 16px; font-weight: 600; color: var(--c-ink); text-decoration: none; white-space: nowrap; }
.nav--2026 .nav__links a:hover { color: var(--c-blue); }
.nav--2026 .nav__cta { display: flex; gap: 10px; align-items: center; }
.nav--2026 .nav__cta .btn { padding: 5px 25px; font-size: 15px; }
/* Analyse (ghost) button — 1px border instead of the default 2px, per Tom
   2026-07-08. Scoped to the nav so global ghost buttons keep the 2px look. */
.nav--2026 .nav__cta .btn--ghost-blue { border-width: 1px; }
.ic-star { height: 19px; width: auto; }
.ic-arrow { height: 15px; width: auto; }
.nav__burger { display: none; margin-left: auto; width: 34px; height: 34px; flex-direction: column; justify-content: center; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; }
.nav__burger span { display: block; width: 22px; height: 2.5px; background: var(--c-ink); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.nav__burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Mobile nav dropdown — slides down from below the sticky nav bar when
   burger is tapped. Full-width, links stack vertically. */
.nav__mobile {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--c-line);
    box-shadow: 0 20px 40px rgba(20, 20, 20, 0.10);
    padding: 12px 24px 22px;
    z-index: 60;
    display: none;
}
.nav__mobile ul { list-style: none; padding: 0; margin: 0; }
.nav__mobile li { border-bottom: 1px solid var(--c-line); }
.nav__mobile li:last-child { border-bottom: 0; }
.nav__mobile li a {
    display: block;
    padding: 14px 4px;
    font-size: 17px;
    font-weight: 600;
    color: var(--c-ink);
    text-decoration: none;
}
.nav__mobile li a:hover,
.nav__mobile li a:focus { color: var(--c-blue); }
.nav__mobile-ctas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}
.nav__mobile-ctas .btn {
    width: 100%;
    justify-content: center;
    padding: 13px 18px;
    font-size: 15px;
}
.nav__mobile--enter {
    animation: navMobileEnter 0.2s ease;
}
@keyframes navMobileEnter {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Mobile-only quick CTA buttons — sit next to the burger so both actions
   stay one-tap even without opening the nav drawer. Hidden on desktop. */
.nav__mobile-quick { display: none; margin-left: auto; gap: 6px; }
.nav__quick-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.nav__quick-btn img { height: 12px; width: auto; }
.nav__quick-btn--ghost {
    background: transparent;
    color: var(--c-blue);
    border: 1.5px solid var(--c-blue);
}
.nav__quick-btn--solid {
    background: var(--c-blue);
    color: #fff;
    border: 1.5px solid var(--c-blue);
}
.nav__quick-btn--solid img { filter: brightness(0) invert(1); }

@media (max-width: 980px) {
  .nav--2026 .nav__right { display: none; }
  .nav--2026 .wrap { padding-block: 12px; }
  .nav--2026 .nav__logo img { height: 40px; }
  .nav__mobile-quick { display: inline-flex; margin-left: auto; }
  .nav__burger { display: flex; margin-left: 4px; }
  .nav__mobile { display: block; }              /* Alpine x-show controls visibility */
}
@media (max-width: 380px) {
  /* Extremely tight viewports (<380px) — labels drop, icons only.
     Keeping labels visible from 380px+ per Tom's preference 2026-07-07. */
  .nav__quick-btn-label { display: none; }
  .nav__quick-btn { padding: 8px 10px; }
  .nav__quick-btn img { height: 14px; }
}
[x-cloak] { display: none !important; }

/* ---------- Buttons (July 2026 blue-family variants) ---------- */
.btn--blue { background: var(--c-blue); color: #fff; border: 2px solid transparent; }
.btn--blue:hover { box-shadow: 0 10px 26px rgba(58, 35, 232, 0.4); }

/* Hover-invert modifier — used on the hero "Design a new site" primary CTA.
   Default: solid blue bg with white star + white arrow.
   Hover:   white bg, blue border, blue text, blue star, blue arrow.
   Icons are duplicated in the HTML (default + hover variants) and toggled
   via display: none swaps below so we don't have to reload the src. */
.btn--hover-invert .ic-star--hover,
.btn--hover-invert .ic-arrow--hover {
    display: none;
}
.btn--hover-invert:hover .ic-star--default,
.btn--hover-invert:hover .ic-arrow--default {
    display: none;
}
.btn--hover-invert:hover .ic-star--hover,
.btn--hover-invert:hover .ic-arrow--hover {
    display: inline-block;
}
.btn--blue.btn--hover-invert:hover {
    background: #fff;
    color: var(--c-blue);
    border-color: #fff;
    box-shadow: 0 10px 26px rgba(58, 35, 232, 0.20);
}
/* Ghost CTA — sits on the lavender nav bg. Primary blue border for brand
   coherence with the solid blue "Build" CTA next to it. Transparent fill
   so the lavender bg shows through. Blue text matches the border. */
.btn--ghost-blue {
    background: transparent !important;
    color: var(--c-blue);
    border: 2px solid var(--c-blue);
}
.btn--ghost-blue:hover {
    background: var(--c-blue) !important;
    color: #fff;
    border-color: var(--c-blue);
}
.btn--ghost-blue:hover .ic-arrow,
.btn--ghost-blue:hover .ic-star {
    filter: brightness(0) invert(1);   /* invert PNG icons to white on hover */
}
.btn--yellow { background: var(--c-yellow); color: var(--c-ink); border: 2px solid transparent; }
.btn--yellow:hover { box-shadow: 0 10px 26px rgba(170, 180, 255, 0.6); }
.btn--ink { background: var(--c-ink); color: #fff; border: 2px solid transparent; }
.btn--white { background: #fff; color: var(--c-blue); border: 2px solid transparent; }
.arrow::after { content: "→"; font-weight: 700; margin-left: 2px; }

/* ---------- Homepage sections (July 2026) ---------- */
.eyebrow-2026 {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-blue);
}
.section-2026 { padding-block: 84px; }
.section-2026 .section__head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.section-2026 .section__head h2 { font-size: clamp(30px, 4.4vw, 52px); font-family: var(--font-serif); font-weight: 600; line-height: 1.04; letter-spacing: -0.015em; margin: 0; }
.section-2026 .section__head p { margin-top: 14px; font-size: 18px; color: var(--c-ink-soft); }

/* ---------- Hero (July 2026) ---------- */
.hero-jul26 { padding: 60px 0 40px; text-align: center; overflow: hidden; }
.hero-jul26 h1 { font-family: var(--font-serif); font-size: clamp(34px, 6vw, 60px); max-width: 30ch; margin: 0 auto; letter-spacing: -0.025em; line-height: 1.04; font-weight: 600; }
.hero-jul26__sub { font-family: var(--font-serif); font-size: clamp(24px, 3vw, 30px); color: var(--c-ink-soft); margin: 20px auto 0; max-width: 60ch; line-height: 1.35; }
.hero-jul26__sub-logo { display: inline-block; height: 1.38em; width: auto; vertical-align: middle; margin: 0 0.06em; }
/* Mobile — push the size up + narrow the max-width so the subhead lays out
   as three lines instead of two (per Tom's request 2026-07-07). */
@media (max-width: 620px) {
    .hero-jul26__sub {
        font-size: clamp(28px, 7vw, 34px);
        max-width: 18ch;                    /* forces natural break to 3 lines */
        line-height: 1.25;
    }
}
.hero-jul26__collage { position: relative; max-width: 646px; margin: 44px auto 0; }
.hero-jul26__collage img { width: 100%; }
/* July 2026: dual-CTA layout — About us (ghost) left, Hire us (solid) right.
   Row on desktop, stacks on mobile so buttons don't shrink below tap-target. */
.hero-jul26__cta-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    flex-wrap: wrap;
    justify-content: center;
}
@media (max-width: 520px) {
    .hero-jul26__cta-wrap { flex-direction: column; gap: 10px; }
    .hero-jul26__cta-wrap .btn { width: 100%; justify-content: center; }
}

/* ★★★★★ becomes a link to #testimonials — inherits colour from the
   trust line, gains a subtle underline on hover to signal clickability. */
/* Tertiary CTA — text-link with arrow sitting below the two main buttons.
   Mirrors the July 2026 mockup: for people whose fit is emails + consultancy
   rather than a full website build. */
.hero-jul26__cta-tertiary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: var(--c-blue);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 999px;
    transition: background 0.15s ease, transform 0.15s ease;
}
.hero-jul26__cta-tertiary:hover {
    background: rgba(58, 35, 232, 0.06);
    transform: translateY(-1px);
}
.hero-jul26__cta-tertiary .ic-arrow { height: 14px; width: auto; }

.hero-jul26__trust-stars { text-decoration: none; color: inherit; }
.hero-jul26__trust-stars:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.hero-jul26__trust-stars strong { transition: text-decoration 0.15s ease; }

/* Legacy — kept in case it renders elsewhere. */
.hero-jul26__whos { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--c-muted); }
.hero-jul26__trust { margin-top: 26px; font-size: 13.5px; color: var(--c-muted); }
.hero-jul26__trust strong { color: var(--c-ink); }

/* ---------- Proof strip ---------- */
.proof { background: var(--c-blue-band); color: #fff; padding-block: 30px; }
.proof .wrap { display: flex; align-items: center; justify-content: center; gap: 14px 40px; flex-wrap: wrap; text-align: center; }
.proof__label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.7; font-weight: 700; }
.proof__names { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: center; font-family: var(--font-serif); font-size: 22px; opacity: 0.95; }
/* Trusted-by logos — sit inline with the "Shelle" wordmark on the blue band.
   Height is capped so tall vs short logos (Headstar vs Dental Wave) balance
   visually rather than by pixel-height. Both source images are white-on-transparent
   PNGs so no filter is needed. */
.proof__logo { height: 28px; width: auto; display: block; opacity: 0.95; }
/* Modifier for logos supplied as dark-on-transparent — flips them white
   so they read against the deep-blue proof band. Applied to Headstar,
   whose source PNG is the black wordmark variant. */
.proof__logo--invert { filter: invert(1) brightness(1.05); }
/* --invert: for dark-on-transparent logos (e.g. Headstar's supplied asset is
   black text + teal star) so they read as white on the deep blue proof band.
   invert(1) flips black → white; hue-rotate(180deg) brings the teal star back
   to roughly its original teal after the invert (which would otherwise turn
   it orange). Fine-tune both if the mint shifts too far. */
.proof__logo--invert { filter: invert(1) hue-rotate(180deg); }
@media (max-width: 720px) {
    .proof__logo { height: 24px; }
    .proof__names { gap: 20px; }
}
.proof__stat { background: rgba(255,255,255,0.12); border-radius: 999px; padding: 8px 18px; font-size: 14px; font-weight: 600; }

/* ---------- Our promise (rebuilt 2026-07-08) ---------------------------
   Structure per Tom's Freeform sketch:
     Left  = hero card: photo on top with headline overlay, copy + CTA below
     Right = 2×2 grid of promise cards, some with keyword chips at the base
   Hero card takes same total height as the 2×2 stack. */
.promise__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: stretch;
}

/* Hero card — photo as full background, text (h3 + p + CTA) overlaid at
   the bottom via a dark gradient so the headline + copy + button all read
   on top of the image. Shorter than the split image/copy layout it
   replaced 2026-07-08. */
.promise__hero {
    position: relative;
    border-radius: var(--r-lg, 18px);
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(32, 13, 175, 0.14);
    min-height: 100%;
    isolation: isolate;
}
.promise__hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    display: block;
}
.promise__hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 14px;
    padding: 32px 30px 30px;
    /* Full-card gradient — darker at bottom so overlaid copy stays legible. */
    background: linear-gradient(180deg,
        rgba(0,0,0,0.05) 0%,
        rgba(0,0,0,0.20) 40%,
        rgba(0,0,0,0.75) 100%);
    min-height: 100%;
}
.promise__hero-content h3 {
    font-family: var(--font-serif);
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.015em;
    max-width: 14ch;
    text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.promise__hero-content p {
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    max-width: 40ch;
    text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.promise__hero-content .btn { align-self: flex-start; margin-top: 2px; }

/* 2×2 grid on the right */
.promise__mini {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
}
.promise__card {
    background: #fff;
    border: 1.5px solid var(--c-line);
    border-radius: var(--r-lg, 18px);
    padding: 22px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.15s, transform 0.15s;
}
.promise__card:hover {
    border-color: var(--c-blue);
    transform: translateY(-2px);
}
.promise__card h3 {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--c-ink);
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.promise__card p {
    font-size: 14px;
    color: var(--c-ink-soft);
    margin: 0;
    line-height: 1.5;
    flex: 1;
}

/* Optional keyword chip strip — sits at the bottom of cards that have it. */
.promise__card-chips {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.promise__card-chips li {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-blue);
    background: rgba(58, 35, 232, 0.08);
    padding: 4px 10px;
    border-radius: 999px;
}

@media (max-width: 880px) {
    .promise__grid { grid-template-columns: 1fr; }
    .promise__hero-overlay { padding: 20px 22px; }
    .promise__mini { grid-template-rows: auto; }
}
@media (max-width: 520px) {
    .promise__mini { grid-template-columns: 1fr; }
}

/* ---------- Services ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: stretch; }
.svc { background: #fff; border: 1.5px solid var(--c-line); border-radius: var(--r-lg, 18px); overflow: hidden; min-width: 0; display: flex; flex-direction: column; height: 100%; box-shadow: 0 14px 40px rgba(32,13,175,0.14); }
.svc__media { display: flex; align-items: center; justify-content: center; padding: 28px; }
.svc__media img { width: 100%; height: auto; display: block; }
.svc__body { padding: 22px 26px 14px; flex: 1 0 auto; }
.svc__body p { font-size: 15.5px; color: var(--c-ink-soft); }
.svc__foot { padding: 0 26px 26px; margin-top: auto; }
.svc__foot .btn { width: 100%; justify-content: center; }
@media (max-width: 880px) { .svc-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* ---------- Builder band ---------- */
.builder-band { background: var(--c-blue-band); color: #fff; text-align: center; padding-block: 90px; }
.builder-band .eyebrow-2026 { color: #bcb6ff; }
.builder-band h2 { font-family: var(--font-serif); font-size: clamp(34px, 6vw, 72px); margin-top: 10px; line-height: 1.04; font-weight: 600; }
.builder-band__sub { font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 3vw, 30px); color: #cfd0ff; margin-top: 6px; }
.builder-band .btn { margin-top: 34px; }
.builder-band__note { margin-top: 16px; font-size: 13px; color: #a9a8e0; opacity: 0.8; }

/* ---------- Steps (how it works) ---------- */
/* ---------- Steps (legacy — kept for backwards compat with anything that
                still uses .steps-grid / .step / .step__n; homepage now uses
                the animated .tl26 timeline below.) ---------- */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.step { background: #fff; border: 1.5px solid var(--c-line); border-radius: var(--r-lg, 18px); padding: 30px 24px; }
.step__n { counter-increment: step; font-family: var(--font-serif); font-size: 46px; color: var(--c-blue); line-height: 1; }
.step__n::before { content: counter(step, decimal-leading-zero); }
.step h3 { font-family: var(--font-serif); font-size: 20px; margin: 12px 0 8px; font-weight: 600; }
.step p { font-size: 15px; color: var(--c-ink-soft); }
@media (max-width: 880px) { .steps-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .steps-grid { grid-template-columns: 1fr; } }

/* ---------- Process slider — Nagged 6-step accordion (July 2026) ----------
   Adapted from Kan3an's "Center-Mode Productivity Slider" CodePen (MIT).
   All collapsed cards are narrow strips with vertical titles; the active
   card expands to show day range + title + description. Prev/next arrows
   in the section header, dot pips below the slider, keyboard/click/hover/
   swipe activation. Mobile flips to a vertical stack. */
.process-slider {
    --gap: 14px;
    /* 0.22s ≈ 2.5× faster than the original 0.55s. Card widening + Y-lift +
       glow all snap in together — feels responsive, doesn't linger. */
    --speed: 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --closed: 88px;
    --open: 520px;
    margin-top: 36px;
    overflow: hidden;
}
/* Slider head — section title left, prev/next controls right. */
.process-slider__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 12px;
}
/* Process nav arrows — hidden site-wide 2026-07-08. Desktop uses the
   accordion click behaviour, mobile uses swipe + dots. Kept the DOM
   nodes so the JS still hooks to them if a later change re-enables. */
.process-slider__controls {
    display: none;
    gap: 8px;
    flex-shrink: 0;
    margin-bottom: 6px;
}
.process-slider__nav {
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--c-line);
    border-radius: 999px;
    background: #fff;
    color: var(--c-ink);
    font-size: 24px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
}
.process-slider__nav:hover {
    background: var(--c-blue);
    color: #fff;
    border-color: var(--c-blue);
}
.process-slider__nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Track — flex row of cards. Auto-centres on the active one via JS scroll. */
.process-slider__track {
    display: flex;
    gap: var(--gap);
    align-items: stretch;
    justify-content: flex-start;
    padding: 4px 0 32px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}
.process-slider__track::-webkit-scrollbar { display: none; }

/* Individual card — collapsed to a narrow strip by default, expands to
   full width when [active]. Base bg is white, active gets a stronger
   shadow + brand-blue accents. */
.process-card {
    position: relative;
    flex: 0 0 var(--closed);
    height: 460px;                          /* bumped from 380 so card 01's CTA button fits comfortably */
    border-radius: 20px;
    background: #fff;
    border: 1.5px solid var(--c-line);
    overflow: hidden;
    cursor: pointer;
    transition: flex-basis var(--speed), transform var(--speed), box-shadow var(--speed), border-color var(--speed);
    scroll-snap-align: center;
}
.process-card:hover { border-color: var(--c-blue-soft); }
.process-card[active] {
    flex-basis: var(--open);
    transform: translateY(-4px);
    border-color: var(--c-blue);
    box-shadow: 0 18px 40px rgba(58, 35, 232, 0.16);
}

/* Card interior — flex column when collapsed (number top, vertical title
   below), flex row when active (number on the left, content on the right). */
.process-card__inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    padding: 22px 12px;
    text-align: center;
}
.process-card[active] .process-card__inner {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 28px 32px;
    gap: 26px;
    text-align: left;
}

/* Number — big brand-blue serif digit, always visible. Fixed width so
   the active-state horizontal layout has room for the body copy. */
.process-card__num {
    font-family: var(--font-serif);
    font-size: 42px;
    line-height: 1;
    font-weight: 600;
    color: var(--c-blue);
    letter-spacing: -0.02em;
    flex-shrink: 0;
}
.process-card[active] .process-card__num {
    font-size: 72px;
    min-width: 72px;
}

/* Title — writing-mode flip on active. Uses the same node, no dup markup. */
.process-card__title {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--c-ink);
    letter-spacing: -0.01em;
    line-height: 1.2;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin: 0;
}
.process-card[active] .process-card__title {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 26px;
    margin: 0 0 8px;
}

/* Day chip + description — hidden until active, then revealed. */
.process-card__days,
.process-card__desc {
    display: none;
}
.process-card[active] .process-card__days {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-muted);
    font-weight: 700;
    margin-bottom: 8px;
}
.process-card[active] .process-card__desc {
    display: block;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--c-ink-soft);
    margin: 0;
    max-width: 42ch;
}
.process-card__body { min-width: 0; }

/* CTA button inside a process card — follows the same reveal-on-active
   pattern as .process-card__desc. Reusable across other steps if we
   decide to add secondary CTAs later. */
.process-card__cta { display: none; }
.process-card[active] .process-card__cta {
    display: inline-flex;
    margin-top: 18px;
    font-size: 15px;
    padding: 12px 22px;
}

/* Dots — one per card, active fills brand blue. */
/* Process dots — match the shared .mobile-carousel-dot spec so all
   mobile carousels look identical. Size + colour + active-scale are
   the same as pricing carousel dots (2026-07-07).

   Hidden on desktop 2026-07-08 — dots only navigate the carousel, but
   desktop uses an accordion pattern where clicking a card is faster. */
.process-slider__dots {
    display: none;
    gap: 8px;
    justify-content: center;
    padding: 4px 0 8px;
}
.process-slider__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(20, 20, 20, 0.20);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.process-slider__dot.is-active {
    background: var(--c-blue);
    transform: scale(1.4);
}

/* Mobile — vertical stack, cards expand full-width. */
@media (max-width: 767px) {
    .process-slider {
        --closed: 72px;
        --open: 100%;
        --gap: 12px;
    }
    .process-slider__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    /* Arrows removed on mobile — dots below do the same job (2026-07-07). */
    .process-slider__controls { display: none; }

    /* Mobile: shared carousel spec — no arrows, cards ~78vw so neighbours
       peek, dots below. Matches pricing + industry carousels. */
    .process-slider { overflow: visible; }
    .process-slider__track {
        display: flex;
        flex-direction: row;
        gap: 16px;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        padding: 4px 8px 12px;
        margin: 0 -8px;
        scrollbar-width: none;
    }
    .process-slider__track::-webkit-scrollbar { display: none; }

    /* All cards equal-sized. Narrower than before so neighbours peek. */
    .process-card,
    .process-card[active] {
        flex: 0 0 min(78vw, 360px);           /* was 88vw / 400 — 10% narrower per Tom */
        height: auto;
        min-height: 420px;
        max-width: 78vw;
        transform: none;
        border-color: var(--c-blue);
        box-shadow: 0 12px 32px rgba(58, 35, 232, 0.10);
        scroll-snap-align: center;
    }

    /* Inner layout — always the "active" style (row → column readable form).
       No writing-mode rotation, no collapsed vertical text. */
    .process-card__inner,
    .process-card[active] .process-card__inner {
        position: static;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 28px 24px;
        gap: 20px;
        text-align: left;
    }
    .process-card__num,
    .process-card[active] .process-card__num {
        font-size: 56px;
        min-width: 56px;
    }
    .process-card__title,
    .process-card[active] .process-card__title {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 22px;
        margin: 0 0 6px;
    }
    /* Show every card's day chip, description, and CTA. */
    .process-card__days,
    .process-card[active] .process-card__days,
    .process-card__desc,
    .process-card[active] .process-card__desc {
        display: block;
        margin-bottom: 4px;
    }
    .process-card__days,
    .process-card[active] .process-card__days {
        display: inline-block;
        font-size: 12px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--c-muted);
        font-weight: 700;
        margin-bottom: 6px;
    }
    .process-card__desc,
    .process-card[active] .process-card__desc {
        font-size: 14.5px;
        line-height: 1.55;
        color: var(--c-ink-soft);
        margin: 0 0 14px;
        max-width: none;
    }
    /* CTA button visible on every card that has one (only card 01 does today). */
    .process-card__cta,
    .process-card[active] .process-card__cta {
        display: inline-flex;
        margin-top: 6px;
        font-size: 14px;
        padding: 10px 18px;
    }

    .process-slider__dots { display: flex; }
}

/* ---------- DEAD CODE: animated tl26 timeline (July 2026, retired same month)
   Replaced 2026-07-06 by .process-nagged above. All rules below are unused —
   left in place temporarily in case anything's cached; safe to strip on next
   CSS clean-up pass. --------------------------------------------------------- */
   Structure:
     <ol.tl26>
       <li.tl26__item style="--at: 0..100">
         .tl26__marker { day-chip + numbered dot }
         .tl26__card   { headline + copy }
       </li>
       ...
     </ol>
   The connecting track lives on ::before / ::after of the <ol>. It fills 0→100 %
   on a 14-second loop with a small hold at each end, and a runner dot travels
   with it. Each item's dot activates when the fill passes it — activation is
   staggered by animation-delay derived from the item's --at value. -------- */
.tl26 {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
    /* Loop duration lives here so every child animation can inherit it via
       calc() and stay in sync. 14s ≈ one second per "day" — coincidence, but
       feels right. */
    --tl-duration: 14s;
    /* Fixed vertical geometry so the track can align to the dot midline without
       relying on prose flow. Day chip = 22px block, gap = 8px, dot = 44px.
       Dot centre y = 22 + 8 + 22 = 52px from top of the <ol>. */
    --tl-day-h:   22px;
    --tl-gap:      8px;
    --tl-dot-h:   44px;
    --tl-track-y: calc(var(--tl-day-h) + var(--tl-gap) + (var(--tl-dot-h) / 2));
    --tl-track-h: 5px;
}
/* Base track + brand-blue fill. Both live behind the dots via z-index and are
   trimmed to first-dot-centre → last-dot-centre so the ends don't stick out
   beyond the outer dots. Fill height sits centred on --tl-track-y. */
.tl26::before,
.tl26::after {
    content: '';
    position: absolute;
    top: calc(var(--tl-track-y) - (var(--tl-track-h) / 2));
    /* 4 equal columns → dot centres at 12.5% and 87.5% of the grid width.
       Landing the track edges at those exact points makes the line feel like
       it "enters" the first dot and "exits" the last, no stubs sticking out. */
    left: 12.5%;
    right: 12.5%;
    height: var(--tl-track-h);
    border-radius: 999px;
    z-index: 0;
}
.tl26::before {
    background: var(--c-line);              /* base track */
}
.tl26::after {
    background: var(--c-blue);              /* fill overlay */
    /* Uses scaleX (not width) so the fill respects the natural 75% span defined
       by left:12.5% + right:12.5%. Anchored at the left dot centre, sweeps to
       the right dot centre as the loop plays. */
    transform: scaleX(0);
    transform-origin: left center;
    animation: tl-fill var(--tl-duration) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* Marker = day chip on top row, dot in fixed-height second row. Rows have
   set heights so the track's y-anchor stays stable across items and the line
   runs cleanly through each dot's midline. */
.tl26__marker {
    display: grid;
    grid-template-rows: var(--tl-day-h) var(--tl-dot-h);
    row-gap: var(--tl-gap);
    justify-items: center;
    align-items: center;
    position: relative;
}

.tl26__day {
    font-size: 12px;
    line-height: var(--tl-day-h);         /* fit exactly inside the grid row */
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-muted);
    font-weight: 700;
    margin: 0;                            /* no bottom-margin; grid gap owns spacing */
    align-self: end;
}

.tl26__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tl-dot-h);
    height: var(--tl-dot-h);
    border-radius: 999px;
    background: #fff;
    color: var(--c-blue);
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    border: 2px solid var(--c-line);
    /* Sits ABOVE the connecting track — the white bg (or activated blue bg)
       covers the line where they overlap, so the line appears to run through
       the dot cleanly. z-index needs an explicit stacking context. */
    position: relative;
    z-index: 2;
    /* Each dot pulses to "active" state as the fill sweeps past it.
       Delay = (--at/100) × duration, so 0% fires at t=0, 33% fires at t≈4.6s,
       66% fires at t≈9.2s, 100% fires at t≈14s. */
    animation: tl-dot-activate var(--tl-duration) linear infinite;
    animation-delay: calc(var(--at, 0) * (var(--tl-duration) / 100));
    transition: transform 0.2s ease;
}
.tl26__item:hover .tl26__dot { transform: scale(1.06); }

.tl26__card {
    margin-top: 20px;
    background: #fff;
    border: 1.5px solid var(--c-line);
    border-radius: var(--r-lg, 18px);
    padding: 24px 22px;
    text-align: left;
    box-shadow: 0 6px 20px rgba(32, 13, 175, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tl26__item:hover .tl26__card {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(32, 13, 175, 0.14);
}
.tl26__card h3 {
    font-family: var(--font-serif);
    font-size: 20px;
    margin: 0 0 8px;
    font-weight: 600;
}
.tl26__card p {
    font-size: 15px;
    color: var(--c-ink-soft);
    margin: 0;
}

/* Fill animation — sweeps 0 → full span via scaleX with a brief hold at each
   end so the eye registers the completion before the loop restarts. */
@keyframes tl-fill {
    0%   { transform: scaleX(0); }
    8%   { transform: scaleX(0); }
    88%  { transform: scaleX(1); }
    100% { transform: scaleX(1); }
}

/* Dot activation — negative to positive scale + colour flip as fill arrives,
   then holds until the loop resets. Duration-independent because we control
   timing via animation-delay per-dot. */
@keyframes tl-dot-activate {
    0%,
    5%   { background: #fff; color: var(--c-blue); border-color: var(--c-line); box-shadow: 0 0 0 0 rgba(58, 35, 232, 0); transform: scale(1); }
    8%   { background: var(--c-blue); color: #fff; border-color: var(--c-blue); box-shadow: 0 0 0 8px rgba(58, 35, 232, 0.15); transform: scale(1.12); }
    16%  { background: var(--c-blue); color: #fff; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(58, 35, 232, 0.10); transform: scale(1.04); }
    92%  { background: var(--c-blue); color: #fff; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(58, 35, 232, 0.10); transform: scale(1.04); }
    100% { background: #fff; color: var(--c-blue); border-color: var(--c-line); box-shadow: 0 0 0 0 rgba(58, 35, 232, 0); transform: scale(1); }
}

/* Mobile — vertical stack with a left-hand fill line running THROUGH the dots.
   The line anchors at first and last dot centres (top: 22px and bottom: 22px
   from top/bottom of the .tl26) so it visually connects every dot. */
@media (max-width: 880px) {
    .tl26 {
        display: block;                        /* each item stacks naturally */
        padding: 0;
        gap: unset;
    }
    .tl26 > .tl26__item + .tl26__item {
        margin-top: 40px;
    }
    /* Base vertical rail + fill overlay. Both anchored at the first dot's
       centre (top: 22px) and last dot's centre (bottom: 22px). */
    .tl26::before,
    .tl26::after {
        top: 22px;
        bottom: 22px;
        left: 22px;
        right: auto;
        width: var(--tl-track-h);
        height: auto;
        margin-left: calc(var(--tl-track-h) / -2);  /* centre the 5px rail on x=22 */
    }
    .tl26::after {
        transform: scaleY(0);
        transform-origin: top center;
        animation: tl-fill-vert var(--tl-duration) cubic-bezier(0.65, 0, 0.35, 1) infinite;
    }
    /* Each item = dot column + card column, two rows. display: contents on the
       marker dissolves its wrapper so day chip + dot become direct grid
       children of the item and can be placed independently. */
    .tl26__item {
        display: grid;
        grid-template-columns: var(--tl-dot-h) 1fr;
        grid-template-rows: auto auto;
        column-gap: 20px;
        row-gap: 4px;
    }
    .tl26__marker { display: contents; }
    .tl26__dot   { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
    .tl26__day   { grid-column: 2; grid-row: 1; align-self: end; line-height: 1.4; }
    .tl26__card  { grid-column: 2; grid-row: 2; margin: 0; }
    @keyframes tl-fill-vert {
        0%   { transform: scaleY(0); }
        8%   { transform: scaleY(0); }
        88%  { transform: scaleY(1); }
        100% { transform: scaleY(1); }
    }
}

/* Motion-reduced fallback — no animation. Track fully filled, all dots active,
   layout otherwise unchanged. Applies to prefers-reduced-motion users and
   also any browser missing @keyframes support. */
@media (prefers-reduced-motion: reduce) {
    .tl26::after {
        animation: none;
        transform: scaleX(1);                  /* full horizontal fill */
    }
    .tl26__dot {
        animation: none;
        background: var(--c-blue);
        color: #fff;
        border-color: var(--c-blue);
    }
    @media (max-width: 880px) {
        .tl26::after { transform: scaleY(1); } /* full vertical fill on mobile */
    }
}

/* ---------- Cases ---------- */
/* Cases band — white bg (was lavender-2). The alt-lavender moved to the
   process/steps section on 2026-07-06 to give it more visual weight. */
.cases-band { background: #fff; }
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.case-2026 { background: #fff; border-radius: var(--r-lg, 18px); overflow: hidden; border: 1.5px solid var(--c-line); display: flex; flex-direction: column; box-shadow: 0 14px 40px rgba(32,13,175,0.14); }
.case-2026__img { aspect-ratio: 4/3; background: var(--c-blue-deep); overflow: hidden; }
.case-2026__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-2026__body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
/* Legacy pill — kept as dead style in case any other page still uses it.
   Homepage cases were restructured 2026-07-08 to use .case-2026__title at
   the top of each card instead of this pill. */
.case-2026__tag { align-self: flex-start; background: var(--c-yellow); color: var(--c-ink); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 12px; border-radius: 999px; }

/* Card title — sits at the very top of the case-body, replacing the old
   pill. Subject-based headline (e.g. "First impressions decide who reads"). */
.case-2026__title {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--c-ink);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
}

.case-2026__stat { font-family: var(--font-serif); font-size: 34px; color: var(--c-blue); margin: 10px 0 4px; }
.case-2026__body p { font-size: 15px; color: var(--c-ink-soft); }
.case-2026__who { padding-top: 16px; font-size: 13.5px; color: var(--c-muted); font-weight: 600; }

/* Fix block — problem headline + CTA. Sits pinned at the bottom of the card
   via margin-top: auto so cards keep equal-height layout regardless of how
   long the body paragraph is. Top border separates it from the source line. */
.case-2026__fix {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--c-line);
}
.case-2026__headline {
    font-family: var(--font-serif);
    font-size: 20px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--c-ink);
    letter-spacing: -0.01em;
    margin: 0 0 14px;
}
.case-2026__cta {
    font-size: 14px;
    padding: 11px 20px;
    align-self: flex-start;
}
@media (max-width: 880px) { .cases-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* ---------- Compare (naff vs nagged) ---------- */
.compare-grid-2026 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 960px; margin-inline: auto; }
.compare-2026 { border-radius: var(--r-lg, 18px); padding: 34px 30px; }
.compare-2026--naff { background: #fff; border: 1.5px solid var(--c-line); }
.compare-2026--nagged { background: var(--c-yellow); border: 2px solid var(--c-ink); transform: rotate(-1deg); }
.compare-2026 h3 { font-family: var(--font-serif); font-size: 26px; margin: 8px 0 18px; font-weight: 600; }
.compare-2026 ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.compare-2026 li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.45; }
.compare-2026--naff li::before { content: "✕"; position: absolute; left: 0; color: #c0392b; font-weight: 700; }
.compare-2026--nagged li::before { content: "→"; position: absolute; left: 0; font-weight: 800; }
.compare-2026--naff .eyebrow-2026 { color: #c0392b; }
@media (max-width: 760px) {
  .compare-grid-2026 { grid-template-columns: 1fr; }
  .compare-2026--nagged { transform: none; }
}

/* ---------- Pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.price { background: #fff; border: 1.5px solid var(--c-line); border-radius: var(--r-lg, 18px); padding: 32px 28px; display: flex; flex-direction: column; }
.price--feature { border: 2px solid var(--c-blue); box-shadow: 0 14px 40px rgba(32,13,175,0.14); position: relative; }
.price__badge { position: absolute; top: -13px; left: 28px; background: var(--c-blue); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 5px 12px; border-radius: 999px; }
.price h3 { font-family: var(--font-serif); font-size: 23px; font-weight: 600; }
/* Tightened top margin 2026-07-08 to reduce the gap between the admin
   pill and the headline price — used to feel like a big empty band. */
.price__amt { font-family: var(--font-serif); font-size: 42px; color: var(--c-blue); margin: 4px 0 2px; }

/* Small hosting note that sits right under the headline price and above
   the Klarna messaging. Explains what's included in the first 12 months
   and what the ongoing hosting fee is per tier. */
.price__hosting-note {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--c-ink-soft, #5a5a5a);
    margin: 4px 0 8px;
}
.price__hosting-note strong {
    color: var(--c-ink);
    font-weight: 700;
}

/* Per-tier footnote references — small, blue, slightly raised so they read
   as a callable link to a footnote below the pricing grid. Same styling
   used on both the deposit and the ongoing hosting note in each card. */
.price__ref {
    font-size: 0.7em;
    font-weight: 700;
    color: var(--c-blue);
    margin-left: 2px;
    vertical-align: super;
    line-height: 0;
}
.price__amt small { font-family: var(--font-sans); font-size: 15px; color: var(--c-muted); font-weight: 500; }
/* "From" prefix — smaller than the main price but bigger than the unit
   suffix, coloured brand-blue so it reads as part of the price. */
.price__amt .price__from {
    font-family: var(--font-sans);
    font-size: 22px;
    color: var(--c-blue);
    font-weight: 500;
    margin-right: 4px;
}
/* Klarna pill — Klarna's signature pink, sits under the price. Small,
   uppercase-ish weight, tells visitors BNPL is available. */
.price__klarna {
    display: inline-block;
    background: #FFA8CD;
    color: #17120E;
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    margin: 4px 0 14px;
    letter-spacing: 0.02em;
    align-self: flex-start;
}
.price__desc { font-size: 14.5px; color: var(--c-ink-soft); margin-bottom: 18px; }
.price ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.price li { position: relative; padding-left: 24px; }

/* Klarna / BNPL messaging container. Stripe's Payment Method Messaging
   Element renders inside this div — an iframe that Stripe controls, so
   we can only style the wrapper's spacing. Content, wording, and APR
   disclosure all come from Stripe so it stays FCA-compliant. */
.price__bnpl {
    /* Bumped bottom margin 2026-07-08 so the Klarna T&Cs line has breathing
       room before the first green-tick line. */
    margin: 6px 0 20px;
    /* Reserve the tallest Klarna variant's height so ALL cards align at the
       "Pages include:" row regardless of which Klarna product Stripe serves.
       Cards 1/2 render "3 interest-free payments of £X" which wraps to 2
       lines + T&Cs = ~68-72px. Card 3 (Custom, £2,400) qualifies for "Pay
       in 30 days" — one line + T&Cs = ~44px. 90px min-height on desktop
       reserves enough that Card 3 gets whitespace below the iframe and its
       "Pages include:" row starts at the same y as Cards 1 & 2.
       On mobile the cards are a single-column carousel so alignment is
       irrelevant — min-height stays 0 there so short Klarna copies don't
       introduce dead space. */
    min-height: 0;
}
@media (min-width: 881px) {
    .price__bnpl { min-height: 90px; }
}
/* Belt-and-braces: force the iframe Stripe injects to align to the top of
   its container so a shorter iframe leaves whitespace BELOW rather than
   centring itself inside the reserved 90px. */
.price__bnpl iframe { display: block; vertical-align: top; }

/* Static "Pay with Klarna" pill — always visible. Uses Klarna's signature
   pink (their approved brand colour). Sits below the price so customers know
   BNPL is available even when Stripe's dynamic messaging widget doesn't
   render (aggregator limitation for UK Stripe merchants — see 2026-07-07
   debug session). No specific rate claim, so no FCA disclosure needed. */
.price__klarna-pill {
    display: inline-block;
    background: #FFA8CD;                    /* Klarna pink — approved brand colour */
    color: #17120E;                         /* Klarna's ink for maximum contrast */
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    margin: 4px 0 14px;
    letter-spacing: 0.01em;
    align-self: flex-start;
}
.price__klarna-pill strong {
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* Comparison-style feature list — each row is either included (green tick,
   ink text) or excluded (faded red cross, muted grey text). Tiers all render
   the same master list; the modifier classes are what changes per tier. */
.price__feat--yes { color: var(--c-ink); }
.price__feat--yes::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10b981;                        /* emerald green — reads clearly as "yes" */
    font-weight: 800;
}
.price__feat--no {
    color: var(--c-muted);                 /* muted grey text */
}
.price__feat--no::before {
    content: "✕";
    position: absolute;
    left: 0;
    color: #dc2626;                        /* warm red */
    opacity: 0.55;                         /* faded so it doesn't read as alarming */
    font-weight: 800;
}

/* "Pages include:" row — parent is a normal green-tick line; the nested
   list is a single indented bullet that lists all pages inline. Keeps
   cards short (one line for the pages instead of six ticks). */
.price__feat--pages { font-weight: 600; }
/* `.price ul` (higher-specificity ancestor rule) sets margin-bottom: 24px
   which was applying to the nested pages UL too — creating a 24px gap
   between the pages line and the next tick. Match its specificity here
   (0,2,0) so our override actually wins. */
.price .price__pages {
    list-style: none;
    padding: 0;
    margin: 6px 0 0 0;
    gap: 0;                                /* single item — no flex gap needed */
}
.price .price__pages > li {
    position: relative;
    padding-left: 18px;                    /* indent under the parent tick */
    color: var(--c-ink-soft, #5a5a5a);
    font-weight: 500;
    line-height: 1.5;
    font-size: 14px;
}
.price .price__pages > li::before {
    content: "•";
    position: absolute;
    left: 4px;
    color: var(--c-ink-soft, #5a5a5a);
    font-weight: 700;
}

/* Admin-panel pill — sits under the tier title. Blue when included, grey
   when not. Uses the same green-tick / red-cross language as the feature
   list so the visual grammar is consistent within the card. */
.price__admin-pill {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 11.7px;                     /* +20% on the 9.75px base */
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    margin: 8px 0 4px;
    background: rgba(58, 35, 232, 0.10);
    color: var(--c-blue);
    align-self: flex-start;
    white-space: nowrap;                   /* pill copy must never break */
}
.price__admin-pill--off {
    background: rgba(20, 20, 20, 0.06);
    color: var(--c-muted);
}

/* Premium "Admin Panel +" pill — used only on the Custom tier so the
   upgrade reads as a distinct product, not "same feature, bigger cost".
   Uses a soft indigo→magenta gradient background, white text, and a
   pulsing glow so it draws the eye without shouting. */
.price__admin-pill--premium {
    /* Slightly smaller than the base pill so the longer "ADMIN PANEL +
       INCLUDED" copy fits on one line (was wrapping at 11.7px). */
    font-size: 10.8px;                     /* ~-7.7% vs base pill */
    background: linear-gradient(120deg, var(--c-blue, #3a23e8) 0%, #7a3fe8 55%, #b23fe0 100%);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset,
                0 4px 14px rgba(120, 40, 220, 0.35),
                0 0 0 rgba(178, 63, 224, 0.4);
    position: relative;
    animation: adminPillGlow 2.4s ease-in-out infinite;
}
@keyframes adminPillGlow {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset,
                    0 4px 14px rgba(120, 40, 220, 0.35),
                    0 0 0 rgba(178, 63, 224, 0.0);
    }
    50% {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset,
                    0 6px 18px rgba(120, 40, 220, 0.45),
                    0 0 22px rgba(178, 63, 224, 0.55);
    }
}
/* Respect reduced-motion settings — glow stops but static premium look stays. */
@media (prefers-reduced-motion: reduce) {
    .price__admin-pill--premium { animation: none; }
}

/* Row that wraps the admin pill and the "What is an 'Admin Panel'?" trigger
   so they sit on the same line at the top of the card. nowrap forces them
   inline; the help text uses a smaller font + white-space:nowrap so it fits
   next to the pill even in the narrower cards. */
.price__admin-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 4px;
}

/* "What is an 'Admin Panel'?" small hint — reveals an explainer tooltip
   on hover / keyboard focus. Kept intentionally low-contrast so it whispers
   next to the pill rather than shouting. */
.price__admin-help {
    position: relative;
    font-size: 8.4px;                      /* -10% on the 9.35px (now 15%+10% smaller than original) */
    font-weight: 500;
    line-height: 1.3;
    color: var(--c-ink-soft, #7a7a7a);
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    white-space: nowrap;
    outline: none;
}
.price__admin-help:hover,
.price__admin-help:focus {
    color: var(--c-blue);
}

.price__admin-tooltip {
    /* Absolutely positioned so the tooltip floats over subsequent content
       instead of pushing the price down. Uses opacity + visibility for a
       smooth fade in/out (display:none can't be transitioned). */
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    /* Fixed width — previously used width:max-content, but the parent
       .price__admin-help has white-space:nowrap which was inheriting into
       the tooltip and stretching it wide enough to cover neighbouring cards.
       Explicit width + white-space:normal here fixes it. */
    width: 260px;
    max-width: 92vw;
    white-space: normal;
    padding: 12px 14px;
    background: var(--c-ink, #141414);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    pointer-events: none;
}
.price__admin-tooltip::before {
    /* Little triangular pointer sitting flush against the tooltip top. */
    content: "";
    position: absolute;
    top: -5px;
    left: 22px;
    width: 10px;
    height: 10px;
    background: var(--c-ink, #141414);
    transform: rotate(45deg);
    border-radius: 2px;
}
.price__admin-help:hover .price__admin-tooltip,
.price__admin-help:focus .price__admin-tooltip,
.price__admin-help:focus-visible .price__admin-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Add-on link under the admin pill — small, secondary, links to the FAQ or
   a modal explaining that integrations with existing payment / booking
   platforms (Stripe, Square, GHL, SimplyBook, etc) are supported. */
.price__addon-link {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-blue);
    text-decoration: none;
    margin: 6px 0 2px;
    line-height: 1.4;
}
.price__addon-link:hover {
    text-decoration: underline;
}

.price .btn { margin-top: auto; width: 100%; justify-content: center; }

/* "Simple and powerful" tagline that sits under each tier title. Small
   caps-y feel without actually being uppercase; nudges the h3 above. */
.price__subtitle {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    color: var(--c-muted);
    letter-spacing: 0.06em;
    margin: 4px 0 0;
    text-transform: uppercase;
}

/* Page-label headers used inside multi-section tiers (e.g. "Page 1", "Page 2").
   Sits above each ul with the same font as the tier title but smaller. */
.price__page-label {
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 600;
    color: var(--c-blue);
    margin: 4px 0 8px;
    letter-spacing: -0.005em;
}
.price__page-label + ul { margin-top: 0; }

/* Mobile / tablet: turn the 3-card grid into a carousel matching the
   shared mobile-carousel spec (2026-07-07):
     - No arrows (removed via display: none)
     - Cards ~78vw wide so edges of neighbours peek
     - Dot indicators below (rendered by shared JS)
   Also see .mobile-carousel-dots for the dots row styling. */
@media (max-width: 880px) {
    .price-grid {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        /* Top padding clears the .price__badge at top:-13px. */
        padding: 28px 8px 12px;
        max-width: none;
        margin: 0 -8px;
        scrollbar-width: none;
    }
    .price-grid::-webkit-scrollbar { display: none; }
    .price {
        flex: 0 0 min(78vw, 340px);              /* was 88vw / 380 — 10% narrower so neighbours peek */
        scroll-snap-align: center;
    }
    /* Arrows removed on mobile per Tom 2026-07-07. Dots (below) do the job. */
    .price-carousel-arrow { display: none; }
}
@media (min-width: 881px) {
    .price-carousel-arrow { display: none; }     /* also hidden on desktop — was already */
}

/* ---------- Shared mobile-carousel dots (2026-07-07) ----------
   Used by the pricing, process, and industry-showcase carousels so all
   mobile carousels have the same look-and-feel. Dots are rendered by
   the carousel JS; this styles them.

   Base rule declared BEFORE the desktop hide-rule below (which comes AFTER
   this declaration in source order) so the media-query override wins on
   desktop. Cascade order matters — this used to be inverted 2026-07-08. */
.mobile-carousel-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 4px 0 8px;
}
.mobile-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(20, 20, 20, 0.20);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    border: 0;
    padding: 0;
}
.mobile-carousel-dot.is-active {
    background: var(--c-blue);
    transform: scale(1.4);
}
/* Desktop: dots hidden (nothing to page through on desktop — layout is
   3-across grid). Declared AFTER the base rule so this wins in the cascade. */
@media (min-width: 881px) {
    .mobile-carousel-dots { display: none; }
}

/* ---------- Consultancy & Managed Services banner (July 2026) ----------
   Full-width horizontal banner sitting below the three website tiers.
   Blue background, dark ink text with white price chip + CTA on the right.
   Uses --c-yellow (which is our light-blue accent — name retained from the
   pre-rebrand palette; see the token definitions at the top of this file). */
.consult-banner {
    margin-top: 26px;
    padding: 32px 40px;
    background: var(--c-yellow);           /* light-blue accent */
    border-radius: var(--r-lg, 18px);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    align-items: center;
    color: var(--c-ink);
    box-shadow: 0 12px 32px rgba(32, 13, 175, 0.12);
}
.consult-banner__title {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--c-ink);
    line-height: 1.15;
}
.consult-banner__lede {
    font-size: 16px;
    color: var(--c-ink);
    margin: 0 0 14px;
    line-height: 1.5;
    font-weight: 500;
}
.consult-banner__services-intro {
    font-size: 14px;
    color: var(--c-ink-soft);
    margin: 0 0 10px;
}
.consult-banner__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.consult-banner__tag {
    display: inline-block;
    background: #fff;
    color: var(--c-ink);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
}

/* Right column: price chip stacked above the "Learn more" CTA. */
.consult-banner__side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-end;
    min-width: 180px;
}
.consult-banner__price {
    background: #fff;
    padding: 14px 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1;
}
.consult-banner__price-from {
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--c-ink);
    font-weight: 500;
}
.consult-banner__price strong {
    font-family: var(--font-serif);
    font-size: 32px;
    color: var(--c-blue);
    font-weight: 700;
    line-height: 1;
}
.consult-banner__price-unit {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--c-muted);
    font-weight: 500;
}
.consult-banner__side .btn { min-width: 180px; justify-content: center; }

@media (max-width: 780px) {
    .consult-banner {
        grid-template-columns: 1fr;
        padding: 26px 24px;
    }
    .consult-banner__side { align-items: stretch; }
    .consult-banner__price { align-self: flex-start; }
    .consult-banner__side .btn { width: 100%; }
}

/* ---------- Testimonial (July 2026 dark blue band) ---------- */
.testi-jul26 { background: var(--c-blue-band); color: #fff; }
/* Section head on the dark blue band — all three lines are pure white.
   Selectors include .section-2026 so they beat the default
   `.section-2026 .section__head p { color: var(--c-ink-soft) }` rule
   (which was overriding the eyebrow + subhead colour). */
.section-2026.testi-jul26 .testi-jul26__head { text-align: center; margin: 0 auto 48px; max-width: none; }
.section-2026.testi-jul26 .testi-jul26__head .eyebrow-2026,
.section-2026.testi-jul26 .testi-jul26__head h2,
.section-2026.testi-jul26 .testi-jul26__head > p {
    color: #fff;
}
.section-2026.testi-jul26 .testi-jul26__head .eyebrow-2026 { display: block; margin-bottom: 12px; }
.section-2026.testi-jul26 .testi-jul26__head h2 { margin: 0 0 12px; }
.section-2026.testi-jul26 .testi-jul26__head > p { margin: 0; font-size: 17px; opacity: 1; }
/* Nowrap only kicks in at wide desktop widths where lines definitely fit.
   Anything below 1000px, wrap naturally so the section head doesn't
   overflow horizontally on tablets/phones (the previous rule was breaking
   mobile width — 2026-07-07 fix). */
@media (min-width: 1000px) {
    .section-2026.testi-jul26 .testi-jul26__head h2,
    .section-2026.testi-jul26 .testi-jul26__head > p { white-space: nowrap; }
}
.testi-jul26__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 34px; align-items: center; max-width: 980px; margin-inline: auto; }
.testi-jul26__img { border-radius: var(--r-lg, 18px); overflow: hidden; aspect-ratio: 4/5; background: var(--c-blue-deep); }
.testi-jul26__img img { width: 100%; height: 100%; object-fit: cover; }
.testi-jul26__quote { font-family: var(--font-serif); font-size: clamp(24px, 3.2vw, 34px); line-height: 1.25; }
/* Result-anchoring stat — semi-transparent pill on the dark blue band.
   Same wording as the proof strip near the top of the page (2026-07-08). */
.testi-jul26__stat {
    display: inline-block;
    margin-top: 20px;
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.testi-jul26__by { margin-top: 18px; font-family: var(--font-sans); font-size: 15px; }
.testi-jul26__by strong { display: block; }
.testi-jul26__by span { opacity: 0.7; }
@media (max-width: 760px) {
  .testi-jul26__grid { grid-template-columns: 1fr; }
  .testi-jul26__img { max-width: 300px; }
}

/* ---------- FAQ ---------- */
.faq-list { max-width: 780px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.faq { background: #fff; border: 1.5px solid var(--c-line); border-radius: 14px; padding: 6px 22px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-family: var(--font-serif); font-size: 19px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 26px; color: var(--c-blue); line-height: 1; transition: transform 0.2s; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 0 20px; font-size: 15.5px; color: var(--c-ink-soft); margin: 0; }

/* ---------- Final CTA (light-blue band with email capture) ---------- */
.finalcta { background: var(--c-yellow); color: var(--c-ink); text-align: center; padding-block: 84px; }
.finalcta h2 { font-family: var(--font-serif); font-size: clamp(32px, 5vw, 60px); max-width: 16ch; margin: 0 auto; font-weight: 600; line-height: 1.04; }
.finalcta__logo { display: inline-block; height: 1.35em; width: auto; vertical-align: middle; margin: 0 0.05em; }
.finalcta p { font-size: 18px; margin: 16px auto 0; max-width: 44ch; color: var(--c-ink-soft); }
/* Contact form (Livewire component) — full name / job / email / phone /
   message / marketing consent, replaces the old email-only form (2026-07-08). */
.finalcta__form-wrap {
    max-width: 640px;
    margin: 24px auto 0;
    text-align: left;
}
.finalcta__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.finalcta__row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.finalcta__row--split .finalcta__field { flex: 1 1 220px; }
.finalcta__field { display: flex; flex-direction: column; gap: 4px; }
.finalcta__field label {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    color: var(--c-ink);
    letter-spacing: 0.02em;
}
.finalcta__field label span {
    font-weight: 500;
    color: var(--c-muted);
    letter-spacing: 0;
    margin-left: 4px;
}
.finalcta__field input,
.finalcta__field textarea {
    padding: 12px 16px;
    border-radius: 14px;
    border: 1.5px solid rgba(20, 20, 20, 0.15);
    background: #fff;
    font: inherit;
    font-size: 15px;
    color: var(--c-ink);
    width: 100%;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.finalcta__field textarea {
    resize: vertical;
    min-height: 110px;
    font-family: inherit;
    line-height: 1.5;
}
.finalcta__field input:focus,
.finalcta__field textarea:focus {
    border-color: var(--c-blue);
    box-shadow: 0 0 0 3px rgba(58, 35, 232, 0.15);
}
.finalcta__field input::placeholder,
.finalcta__field textarea::placeholder {
    color: rgba(20, 20, 20, 0.35);
}
.finalcta__error {
    color: #b91c1c;
    font-size: 13px;
    margin: 4px 0 0;
}

/* Marketing consent — checkbox + explanatory text */
.finalcta__consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 6px 4px;
    font-size: 13.5px;
    color: var(--c-ink-soft);
    line-height: 1.45;
    cursor: pointer;
}
.finalcta__consent input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--c-blue);
    flex-shrink: 0;
}

.finalcta__submit {
    align-self: center;
    min-width: 220px;
    margin-top: 6px;
}

/* Success state after submit */
.finalcta__done {
    background: #fff;
    border-radius: var(--r-lg, 18px);
    padding: 36px 32px;
    text-align: center;
    box-shadow: 0 12px 32px rgba(32, 13, 175, 0.10);
}
.finalcta__tick {
    width: 60px;
    height: 60px;
    border-radius: 999px;
    background: rgba(58, 35, 232, 0.12);
    color: var(--c-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    margin: 0 auto 16px;
}
.finalcta__done h3 {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--c-ink);
    margin: 0 0 8px;
}
.finalcta__done p {
    font-size: 15px;
    color: var(--c-ink-soft);
    margin: 0;
}

.finalcta small { display: block; margin-top: 18px; color: var(--c-ink-soft); font-size: 13px; }

@media (max-width: 560px) {
    .finalcta__form-wrap { margin-inline: -6px; }
    .finalcta__row--split { flex-direction: column; gap: 12px; }
    .finalcta__row--split .finalcta__field { flex: 1 1 100%; }
    .finalcta__submit { width: 100%; }
}

/* ---------- Footer (July 2026 dark) ---------- */
.footer-jul26 { background: var(--c-ink); color: #fff; padding-block: 64px 36px; }
.footer-jul26__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer-jul26__brand img { height: 36px; margin-bottom: 16px; filter: brightness(0) invert(1); }
.footer-jul26__brand p { font-size: 14px; color: #b9b9c9; max-width: 34ch; }
.footer-jul26__col h4 { font-family: var(--font-sans); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.12em; color: #8c8ca6; margin: 0 0 14px; font-weight: 700; }
.footer-jul26__col a { display: block; padding: 5px 0; font-size: 14.5px; color: #e2e2ee; text-decoration: none; }
.footer-jul26__col a:hover { color: var(--c-yellow); }
.footer-jul26__legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.14); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: #8c8ca6; }
@media (max-width: 760px) {
  .footer-jul26__top { grid-template-columns: 1fr 1fr; }
  .footer-jul26__brand { grid-column: 1 / -1; }
}

/* ---------- Industry showcase (carousel) ---------- */
/* Vertical tabs above, horizontal scroll-snap carousel below.
   Follows Chrome's CSS-native carousel pattern: scroll-snap-type on
   the track, scroll-snap-align on each card. Alpine.js handles tab
   switching (already loaded on the homepage). */
/* White bg so the showcase section reads as its own block, not
   continuous with the lavender services section below it. */
/* Title stays on one line (white-space: nowrap) but font is dialled
   back up to a proper display size. Bottom padding generous so the
   section has room to breathe before the services block below. */
.industry-showcase { padding-block: 40px 80px; background: var(--c-white); }
.industry-showcase .section__head { max-width: 900px; margin: 0 auto 24px; text-align: center; }
.industry-showcase .section__head h2 {
    font-size: clamp(28px, 3.8vw, 44px);
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 0;
    white-space: nowrap;
}
.industry-showcase .section__head p { margin-top: 8px; font-size: 16px; color: var(--c-ink-soft); }

/* Primary nav — 7-column grid that fills the full section width.
   Each tab takes an equal 1fr slot; labels wrap to multiple lines if
   needed so all tabs share the same height and stay on one row. */
.industry-tabs__nav {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 0;
    padding-inline: 24px;
    padding-bottom: 16px;
    border-bottom: 1.5px solid var(--c-line);
}
/* Break element is unused in grid layout — hidden. */
.industry-tabs__break { display: none; }

.industry-tabs__nav button {
    padding: 10px 14px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-blue);
    background: transparent;
    border: 1.5px solid var(--c-blue);
    border-radius: 999px;
    cursor: pointer;
    position: relative;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
    transition: background 0.15s ease, color 0.15s ease;
}

/* Mobile — tabs stack into 2 columns so they stay tap-friendly. */
@media (max-width: 720px) {
    .industry-tabs__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .industry-tabs__nav button { font-size: 12px; padding: 8px 10px; }
}
.industry-tabs__nav button:hover {
    background: var(--c-blue);
    color: #fff;
}
.industry-tabs__nav button.is-active {
    background: var(--c-blue);
    color: #fff;
}
.industry-tabs__nav button.is-active::after { display: none; }

/* Carousel — horizontal scroll-snap track. Cards bleed toward edges
   (negative inline margin + inline padding) so users see the "next"
   card peeking in, signalling scrollability. */
.carousel {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--c-blue) transparent;
    margin-inline: calc(-1 * clamp(16px, 4vw, 40px));
    padding-inline: clamp(16px, 4vw, 40px);
    padding-block: 8px 20px;
}
.carousel::-webkit-scrollbar { height: 6px; }
.carousel::-webkit-scrollbar-thumb { background: var(--c-blue); border-radius: 3px; }
.carousel::-webkit-scrollbar-track { background: transparent; }
.carousel__track {
    display: flex;
    gap: 22px;
    padding-block: 4px;
}
.carousel__card {
    /* Bigger cards so the 3rd peeks off the right edge of the container,
       signalling "there's more here — scroll". Prev calc was 3-fit; new
       calc is ~2.5 visible on desktop. */
    flex: 0 0 clamp(320px, 42vw, 480px);
    scroll-snap-align: start;
    border-radius: var(--r-lg, 18px);
    overflow: hidden;
    background: #fff;
    border: 1.5px solid var(--c-line);
    box-shadow: 0 14px 40px rgba(32, 13, 175, 0.14);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.carousel__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 50px rgba(32, 13, 175, 0.22);
}
.carousel__card-media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--c-lav-2);
}
.carousel__card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.carousel__card-body { padding: 16px 20px 20px; }
.carousel__card-tag {
    display: inline-block;
    background: var(--c-yellow);
    color: var(--c-ink);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
}
.carousel__card-body h3 {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px;
    line-height: 1.2;
}
.carousel__card-body p {
    font-size: 14px;
    color: var(--c-ink-soft);
    margin: 0;
    line-height: 1.4;
}

/* Tab panels — stacked in the same grid cell so switching between
   verticals is a cross-fade, not a layout shift. Container height =
   tallest panel, so nothing collapses / reflows when Alpine swaps
   the active tab. */
.industry-tabs__panels {
    display: grid;
    grid-template-areas: "stack";
}
.industry-tabs__panels > [role="tabpanel"] {
    grid-area: stack;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease;
}
.industry-tabs__panels > [role="tabpanel"].is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (max-width: 720px) {
    .industry-tabs__nav { gap: 22px; }
    .industry-tabs__nav button { font-size: 18px; }
    .carousel__card { flex-basis: 80%; }
}

/* ---------- Industry showcase v2 — stage + pills + arrows ---------- */
/* Vertical tabs at top (existing .industry-tabs__nav).
   Row of pill selectors below tabs (this file).
   Big preview stage — desktop image full-width, phone frame overlaps
   bottom-right and extends past the stage on the y-axis. */

/* Pills card — matched to the stage width (820px) so it aligns
   visually with the preview image below. Pills distribute evenly
   across the card via space-around. */
.showcase__pills-card {
    display: flex;
    justify-content: center;
    padding: 10px 24px;
    background: var(--c-lav-2);
    border-radius: 999px;
    width: 100%;
    max-width: 820px;
    margin: 18px auto 20px;
    box-shadow: 0 2px 12px rgba(20, 20, 20, 0.05);
}

/* Pill row — takes full width of the card, pills distribute evenly. */
.showcase__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    justify-content: space-around;
    align-items: center;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    width: 100%;
}

/* Blurb row — sits OUTSIDE the pills card. Description flushed left,
   Build CTA flushed right, matches stage width so it aligns with the
   image below. Stacks vertically on mobile. */
.showcase__blurb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    max-width: 820px;
    margin: 20px auto 24px;
    padding-inline: 4px;
}
.showcase__blurb-text {
    flex: 1;
    min-width: 0;
    text-align: left;
}
.showcase__blurb-text p {
    font-size: 15px;
    color: var(--c-ink-soft);
    line-height: 1.4;
    margin: 0;
}
.showcase__blurb-cta {
    flex-shrink: 0;
    padding: 10px 20px;
    font-size: 14px;
}
@media (max-width: 640px) {
    .showcase__blurb { flex-direction: column; gap: 12px; }
    .showcase__blurb-text { text-align: center; }
    .showcase__blurb-cta { align-self: center; }
}
/* Inactive pill — white bg + soft shadow (looks clickable). */
.showcase__pill {
    padding: 7px 16px;
    border: 0;
    background: #fff;
    color: rgba(20, 20, 20, 0.55);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(20, 20, 20, 0.08);
    transition: color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}
.showcase__pill:hover {
    color: var(--c-ink);
    box-shadow: 0 4px 12px rgba(20, 20, 20, 0.12);
    transform: translateY(-1px);
}
/* Active pill — plain sans-serif black text, no pill background,
   no shadow, larger font for emphasis. */
.showcase__pill.is-active {
    background: transparent;
    color: var(--c-ink);
    box-shadow: none;
    font-weight: 700;
    font-size: 16px;
}

/* Stage — holds the preview + prev/next arrows.
   Padding-inline makes room for the arrow buttons on either side. */
.showcase__stage {
    position: relative;
    padding-inline: 56px;
    padding-bottom: 24px;   /* room for the mobile phone that dangles below */
}

/* Naked chevron arrows — no circle, muted colour. Sits on either
   side of the preview stage; hover darkens to ink for feedback. */
.showcase__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: var(--c-muted);
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    line-height: 0.8;
    z-index: 5;
    box-shadow: none;
    padding: 0 6px;
    transition: color 0.15s ease;
}
.showcase__arrow:hover { color: var(--c-ink); background: transparent; }
.showcase__arrow:focus { outline: none; color: var(--c-ink); }
.showcase__arrow--prev { left: 0; }
.showcase__arrow--next { right: 0; }

/* Previews wrap — all preview cards stacked in the same grid cell.
   Only .is-active is opaque; the others fade underneath. */
.showcase__previews {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;   /* shorter than 16/10 — saves ~60px height */
}
.showcase__preview {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.showcase__preview.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Desktop shot — fills the stage. */
.showcase__desktop {
    position: absolute;
    inset: 0;
    border-radius: var(--r-lg, 18px);
    overflow: hidden;
    background: var(--c-lav-2);
    box-shadow: 0 22px 60px rgba(32, 13, 175, 0.22);
    border: 1.5px solid var(--c-line);
}
.showcase__desktop img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Phone frame — overlaps bottom-right of the desktop stage, extends
   ~30% below it. White border + shadow to sell the "device" idea. */
.showcase__mobile {
    position: absolute;
    right: 4%;
    bottom: -40px;
    width: 20%;
    aspect-ratio: 9 / 18;
    border-radius: 22px;
    overflow: hidden;
    background: var(--c-lav);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
    border: 5px solid #fff;
    z-index: 3;
}
.showcase__mobile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Caption below the pills — shows current card title + description.
   Sits under the stage, updates with active card. */
.showcase__caption {
    max-width: 700px;
    margin: 0 auto 14px;
    text-align: center;
}
.showcase__caption h3 {
    font-family: var(--font-serif);
    font-size: clamp(18px, 2.4vw, 24px);
    font-weight: 600;
    margin: 0 0 4px;
    line-height: 1.15;
}
.showcase__caption p {
    font-size: 14px;
    color: var(--c-ink-soft);
    margin: 0;
    line-height: 1.4;
}

/* Mobile-only accordion toggle — one per vertical panel. Tapping opens
   its own panel (only one open at a time via Alpine `mobileOpen`).
   Hidden on desktop. */
.industry-mobile-toggle {
    display: none;                              /* desktop: hidden */
}

/* Mobile — restructure entirely as an accordion: kill the tab pills at
   top, stack all 7 panels vertically (one per vertical), each with its
   own dropdown header. Overrides the desktop grid-stack layout so all
   panels are visible + own their own vertical space (2026-07-07 fix). */
@media (max-width: 720px) {
    .industry-tabs__nav { display: none; }

    /* Kill the desktop grid-stack (all panels overlapping in one cell). */
    .industry-tabs__panels {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    /* Undo the desktop opacity/visibility hiding — on mobile every panel
       should be visible so its dropdown header shows in the accordion. */
    .industry-tabs__panels > [role="tabpanel"] {
        grid-area: auto;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: none;
    }
    .industry-tabs__panel { display: block; }

    /* Panel body (pills card + blurb + stage) is hidden by default;
       expands only when the mobile-open state matches this panel's key. */
    .industry-tabs__panel > *:not(.industry-mobile-toggle) {
        display: none;
    }
    .industry-tabs__panel.is-mobile-open > *:not(.industry-mobile-toggle) {
        display: block;
    }

    .industry-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 18px 20px;
        background: #fff;
        border: 1.5px solid var(--c-line);
        border-radius: 12px;
        font-family: var(--font-serif);
        font-size: 17px;
        font-weight: 600;
        color: var(--c-ink);
        cursor: pointer;
        text-align: left;
    }
    .industry-mobile-toggle:hover { border-color: var(--c-blue); }
    .industry-tabs__panel.is-mobile-open .industry-mobile-toggle {
        border-color: var(--c-blue);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .industry-mobile-toggle__chev {
        font-size: 22px;
        color: var(--c-blue);
        transition: transform 0.2s ease;
        line-height: 1;
    }
    .industry-mobile-toggle__chev.is-open { transform: rotate(90deg); }

    /* Section head — title was overflowing horizontally.
       Force wrapping + tighten sizing so it never breaks the layout. */
    .industry-showcase .section__head {
        margin-bottom: 16px;
    }
    .industry-showcase .section__head h2 {
        font-size: clamp(24px, 6vw, 32px);
        white-space: normal;
        overflow-wrap: break-word;
    }
    .industry-showcase .section__head p {
        font-size: 14px;
        margin-top: 6px;
    }

    /* Copy + CTA — tighter to save vertical space and keep everything above
       the fold when a panel is expanded. Centred. */
    .showcase__blurb {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        padding: 12px 16px 4px;
    }
    .showcase__blurb-text {
        text-align: center;
        font-size: 14.5px;
        line-height: 1.45;
        color: var(--c-ink-soft);
    }
    .showcase__blurb-text p { margin: 0; }
    .showcase__blurb-cta {
        align-self: center;
        padding: 10px 20px;
        font-size: 14px;
    }

    /* Stage — image goes full width, arrows removed on mobile (2026-07-07
       shared carousel spec). Pills at top act as the "dots". */
    .showcase__stage {
        padding: 0 0 12px;
        position: relative;
        overflow: visible;
    }
    .showcase__arrow { display: none; }         /* hidden on mobile — pills serve as navigation */

    /* Hide the desktop screenshot frame entirely — we only show the "mobile"
       one, but rendered at FULL width as a website preview (not a phone frame). */
    .showcase__desktop { display: none; }

    /* Preview stack — full-width image, natural aspect ratio, no phone chrome. */
    .showcase__previews {
        order: 1;
        position: relative;
        width: 100%;
        min-height: 0;
        display: block;
    }
    .showcase__preview {
        position: relative;
        width: 100%;
        display: block;
    }
    .showcase__preview:not(.is-active) { display: none; }

    /* Kill the phone-frame aspect ratio + centering — image now goes edge-to-edge
       at natural aspect ratio (the Pexels source images are ~3:2 landscape). */
    .showcase__mobile {
        position: relative;
        width: 100%;
        max-height: none;
        aspect-ratio: auto;
        bottom: auto;
        right: auto;
        top: auto;
        left: auto;
        margin: 0;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 12px 30px rgba(32, 13, 175, 0.14);
    }
    .showcase__mobile img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        display: block;
    }

    .showcase__pills-card { padding: 12px; margin-bottom: 8px; }
    .showcase__pills { gap: 6px; margin: 0; justify-content: center; flex-wrap: wrap; }
    .showcase__pill { padding: 7px 12px; font-size: 12.5px; }
}

/* ---------- Hero Nag-alyse quick-entry form ---------- */
/* Second conversion path in the homepage hero — sits between the collage
   image and the main CTA row. Submits GET to /nag-alyse where Livewire
   picks up the URL param and prefills the input. */
.hero-jul26__nagalyse {
    display: flex;
    gap: 10px;
    margin: 30px auto 18px;
    max-width: 780px;                        /* was 620 — bumped for prominence */
    padding: 10px;                           /* was 6 */
    background: #fff;
    border: 2px solid var(--c-blue);         /* was 1.5px var(--c-line) — brand-blue border draws the eye */
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(58, 35, 232, 0.16);
    flex-wrap: wrap;
}
.hero-jul26__nagalyse input {
    flex: 1;
    min-width: 260px;
    padding: 14px 22px;                      /* was 10 18 — taller input */
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 17px;                         /* was 15 */
    font-weight: 500;
    color: var(--c-ink);
}
.hero-jul26__nagalyse input::placeholder { color: var(--c-muted); }
.hero-jul26__nagalyse button {
    flex-shrink: 0;
    padding: 14px 28px;                      /* was 10 20 */
    font-size: 16px;                         /* was 14 */
    font-weight: 700;
}
@media (max-width: 620px) {
    .hero-jul26__nagalyse { border-radius: 20px; flex-direction: column; padding: 12px; gap: 10px; }
    .hero-jul26__nagalyse input { padding: 14px 16px; text-align: center; font-size: 16px; }
    .hero-jul26__nagalyse button { width: 100%; justify-content: center; padding: 14px 20px; }
}

/* Hide Alpine-controlled elements until Alpine boots — prevents the URL bar
   from flashing on page load before x-show has evaluated. */
[x-cloak] { display: none !important; }

/* Reveal transition for the Nag-alyse URL bar. Fades + slides in from -8px. */
.tl-reveal-enter {
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.tl-reveal-enter-start {
    opacity: 0;
    transform: translateY(-8px);
}
.tl-reveal-enter-end {
    opacity: 1;
    transform: translateY(0);
}

.hero-jul26__cta-block { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* ---------- Nag-alyse scorecard mobile ---------- */
@media (max-width: 720px) {
    .nagalyse-scorecard__grid { grid-template-columns: 1fr !important; gap: 24px !important; padding: 24px !important; text-align: center; }
    .nagalyse-scorecard__grid > div:nth-child(2) ul { text-align: left; }
}

/* ---------- Quiz multi-select styling ----------
   Q3, Q5 and Q6 support multi-select. Selected state gets a filled
   blue background + white text + a check mark in the corner. Submit
   button sits centred below the grid. */
.quiz-question__sub {
    text-align: center;
    color: var(--c-muted);
    font-size: 14px;
    margin: -12px 0 24px;
}
.quiz-option.is-selected {
    background: var(--c-blue);
    color: #fff;
    border-color: var(--c-blue);
}
.quiz-option.is-selected .quiz-option__label,
.quiz-option.is-selected .quiz-option__sub { color: #fff; }
.quiz-option__check {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}
.quiz-option { position: relative; }
.quiz-submit {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}
.quiz-submit .btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* ============================================================
   PREVIEW PAGE (/p/{slug}) — July 2026 refresh
   Follows the homepage section-2026 pattern. Everything below
   this heading is scoped to .page-preview so it never leaks
   into the layout nav / footer or other routes.
   ============================================================ */

/* Body override — earlier iteration set var(--c-ink) (dark). Now inherits
   the site lavender background from the base body rule, so the layout
   nav + footer sit against the same colour as the preview content. */
body.page-preview { background: var(--c-lav); color: var(--c-ink); }

/* Compressed intro — tighter padding, smaller H2 so the mockups fit above
   the fold on a 13" MacBook. Uses grid rather than the default section
   .section__head max-width so the copy hugs the left edge. */
.preview-2026__intro-section { padding-block: 44px 20px; }
.preview-2026__intro {
    max-width: 820px;
    margin: 0 0 20px;
}
.preview-2026__intro-title {
    font-family: var(--font-serif);
    font-size: clamp(26px, 3.4vw, 42px);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.08;
    margin: 6px 0 6px;
    color: var(--c-ink);
}
.preview-2026__intro-sub {
    color: var(--c-ink-soft);
    font-size: 15px;
    margin: 4px 0 10px;
}

/* "Based on what you told us: [chip] [chip]" — all on one row so the whole
   intro takes less vertical space and the mockup rides higher on-screen.
   Wraps naturally on narrow viewports so chips don't overflow the container. */
.preview-2026__based {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 6px 0 0;
}
.preview-2026__based-label {
    color: var(--c-ink-soft);
    font-size: 15px;
    font-weight: 500;
}

/* Intro chips — small pills that show the quiz answers. */
.preview-2026__chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}
.preview-2026__chip {
    display: inline-block;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid var(--c-line);
    color: var(--c-ink);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
}

/* Mockup wrap — desktop mockup gets the full width now (phone-in-phone
   moved BELOW to a static position so it never overlaps the preview).
   Previously padding-right: 130px reserved room for an absolutely-positioned
   phone that was clipping content on the right (2026-07-08 rework). */
.preview-2026__mockup-wrap {
    position: relative;
    margin: 0 auto;
    padding-right: 0;
}

/* Browser-frame mockup — the ONE bit that stays visually dark, because
   it's meant to look like a real browser window wrapping the preview.
   Bottom padding + full-radius inner frame closes off the bottom edge
   so the preview looks properly framed (2026-07-08). */
.preview-2026__mockup {
    background: #2a2a2a;
    border-radius: 14px;
    /* 8px chrome around the iframe on every side — equal padding so the
       preview sits centered inside the dark browser frame with a clean
       border top / right / bottom / left. */
    padding: 8px;
    box-shadow: 0 24px 60px rgba(32, 13, 175, 0.14),
                0 0 0 1px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
    margin-bottom: 16px;
}
.preview-2026__mockup-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 12px;
}
.preview-2026__mockup-dots { display: flex; gap: 6px; }
.preview-2026__mockup-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff5f57;
    display: inline-block;
}
.preview-2026__mockup-dot:nth-child(2) { background: #ffbd2e; }
.preview-2026__mockup-dot:nth-child(3) { background: #28ca41; }
.preview-2026__mockup-url {
    flex: 1;
    background: #1a1a1a;
    color: rgba(255,255,255,0.6);
    font-family: monospace;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 6px;
    text-align: center;
    max-width: 380px;
    margin: 0 auto;
}
.preview-2026__mockup-frame {
    background: #fff;
    border-radius: 6px;                   /* rounded on ALL corners now */
    overflow: hidden;
}
.preview-2026__mockup-frame iframe {
    display: block;
    width: 100%;
    height: 720px;                        /* taller — was 560px */
    border: 0;
}
@media (max-width: 700px) {
    .preview-2026__mockup-frame iframe { height: 640px; }   /* was 460px */
    .preview-2026__mockup-url { max-width: none; }
}

/* Mobile phone mockup — floats over the bottom-right of the desktop
   mockup (2026-07-08 rework #2: keep the desktop mockup at 100% width
   AND overlay the phone as decoration, rather than shrinking either).
   Inside: iframe rendered at 375px width (real iPhone width, so the
   site's mobile CSS kicks in) then scaled down visually via transform. */
.preview-2026__phone {
    --phone-w: 240px;                     /* outer width — kept same */
    --phone-pad-x: 8px;                   /* horizontal bezel padding (each side) */
    --phone-inner-w: 375px;               /* iframe render width (real iPhone) */
    /* Scale to the visible clip area (phone-w minus both bezel sides), not
       the outer width, so the iframe fits inside the frame without the right
       edge (Book appointment CTA) being clipped. */
    --phone-scale: calc((var(--phone-w) - (var(--phone-pad-x) * 2)) / var(--phone-inner-w));
    position: absolute;
    right: 24px;
    bottom: -30px;                        /* slight hang below the frame */
    width: var(--phone-w);
    aspect-ratio: 9 / 19.5;
    background: #111;
    border-radius: 32px;
    padding: 12px var(--phone-pad-x);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.25),
                0 0 0 4px rgba(255, 255, 255, 0.9),
                0 0 0 6px rgba(0, 0, 0, 0.08);
    z-index: 3;
    overflow: hidden;
}
.preview-2026__phone-notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 62px;
    height: 16px;
    background: #000;
    border-radius: 999px;
    z-index: 2;
}
.preview-2026__phone-frame {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
}
.preview-2026__phone-frame iframe {
    display: block;
    width: var(--phone-inner-w);
    /* Height chosen so the scaled iframe fully fills the phone's inner area
       vertically without leaving whitespace. Empirically calibrated. */
    height: 850px;
    border: 0;
    transform: scale(var(--phone-scale));
    transform-origin: top left;
}

/* Mobile: hide the phone-in-phone (redundant when the user IS on a phone,
   plus 240px on a small viewport overlaps too much of the preview). */
@media (max-width: 700px) {
    .preview-2026__phone { display: none; }
}

/* Included / pricing cards — visual echo of the homepage .price cards.
   Two-column grid, feature card gets a blue outline. */
.preview-2026__included-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    align-items: stretch;
}
.preview-2026__included-card {
    padding: 30px 28px;
    background: #fff;
    border: 1.5px solid var(--c-line);
    border-radius: var(--r-lg, 18px);
    box-shadow: 0 6px 20px rgba(32, 13, 175, 0.06);
}
.preview-2026__included-card--feature {
    border-color: var(--c-blue);
    box-shadow: 0 14px 32px rgba(32, 13, 175, 0.14);
}
.preview-2026__included-card h3 {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--c-ink);
    margin: 0 0 20px;
}
.preview-2026__price { color: var(--c-blue); font-weight: 600; }
.preview-2026__included-card ul { list-style: none; padding: 0; margin: 0; }
.preview-2026__included-card li {
    padding: 8px 0;
    font-size: 15px;
    color: var(--c-ink-soft);
    border-top: 1px solid var(--c-line);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.preview-2026__included-card li:first-child { border-top: 0; padding-top: 0; }
.preview-2026__included-card li::before {
    content: '✓';
    color: var(--c-blue);
    font-weight: 700;
    flex-shrink: 0;
}
@media (max-width: 720px) {
    .preview-2026__included-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}

/* Steps grid — 3 tiles, big serif number, sits on the lavender-2 band. */
.preview-2026__steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.preview-2026__step {
    background: #fff;
    border: 1.5px solid var(--c-line);
    border-radius: var(--r-lg, 18px);
    padding: 28px 24px;
}
.preview-2026__step-num {
    font-family: var(--font-serif);
    font-size: 46px;
    color: var(--c-blue);
    line-height: 1;
    font-weight: 600;
    margin-bottom: 14px;
}
.preview-2026__step h3 {
    font-family: var(--font-serif);
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--c-ink);
    line-height: 1.3;
}
.preview-2026__step p {
    font-size: 14.5px;
    color: var(--c-ink-soft);
    margin: 0;
    line-height: 1.55;
}
@media (max-width: 880px) { .preview-2026__steps-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .preview-2026__steps-grid { grid-template-columns: 1fr; } }

/* Consultant card — 2-col layout, avatar left, bio + contact links right.
   Wrapped in a card container so it reads as a proper "meet the consultant"
   business card rather than a plain grid. */
.preview-2026__tom-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 36px;
    align-items: center;
    /* Full width of the section wrap now (was capped at 900px). */
    width: 100%;
    padding: 36px 40px;
    background: #fff;
    border: 1.5px solid var(--c-line);
    border-radius: var(--r-lg, 18px);
    box-shadow: 0 12px 32px rgba(32, 13, 175, 0.08);
}
.preview-2026__tom-photo {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-blue), var(--c-blue-deep));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-serif);
    font-size: 72px;
    font-weight: 600;
    overflow: hidden;                       /* clip img to the circle */
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(32, 13, 175, 0.14);
}
.preview-2026__tom-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;            /* keep the head centred */
    display: block;
}
.preview-2026__tom-eyebrow {
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
    font-weight: 700;
    color: var(--c-muted);
    margin: 0 0 6px;
}
.preview-2026__tom-body h3 {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 600;
    color: var(--c-ink);
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}
.preview-2026__tom-bio {
    font-size: 15.5px;
    color: var(--c-ink-soft);
    line-height: 1.6;
    margin: 0 0 18px;
}

/* Contact strip — email / LinkedIn / phone as icon+text chips. */
.preview-2026__tom-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.preview-2026__tom-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(58, 35, 232, 0.06);
    border: 1px solid var(--c-line);
    border-radius: 999px;
    color: var(--c-ink);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.preview-2026__tom-link:hover {
    border-color: var(--c-blue);
    background: rgba(58, 35, 232, 0.10);
    color: var(--c-blue);
}
.preview-2026__tom-link svg {
    width: 15px;
    height: 15px;
    color: var(--c-blue);
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .preview-2026__tom-card {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 32px 24px;
    }
    .preview-2026__tom-photo { margin: 0 auto; }
    .preview-2026__tom-contact { justify-content: center; }
}

/* FAQ accordion — same <details> pattern as the homepage FAQ. */
.preview-2026__faq { width: 100%; }
.preview-2026__faq-item {
    padding: 4px 0;
    border-top: 1px solid var(--c-line);
}
.preview-2026__faq-item:first-child { border-top: 0; }
.preview-2026__faq-item summary {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 19px;
    cursor: pointer;
    padding: 18px 32px 18px 0;
    list-style: none;
    position: relative;
    color: var(--c-ink);
}
.preview-2026__faq-item summary::-webkit-details-marker { display: none; }
.preview-2026__faq-item summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: var(--c-blue);
}
.preview-2026__faq-item[open] summary::after { content: '−'; }
.preview-2026__faq-item p {
    color: var(--c-ink-soft);
    padding: 0 0 20px;
    line-height: 1.65;
    margin: 0;
    font-size: 15.5px;
}

/* "Live for 7 days" microcopy strip above the site footer. */
.preview-2026__meta {
    text-align: center;
    padding: 40px 0 32px;
    color: var(--c-muted);
    font-size: 13px;
    background: var(--c-lav);
}

/* ─────────────────────────────────────────────────────────────
   Livewire preview-actions component — re-theme to light.
   The Livewire blade uses .actions-block, .cta, .action-form,
   .action-input, .action-back, .action-done, .done-tick class
   names. Keeping them so the blade doesn't need touching, but
   restyling from dark to light to match the rest of the page.
   ───────────────────────────────────────────────────────────── */
.page-preview .actions-block { margin: 0 auto; max-width: 900px; }
.page-preview .cta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
/* Legacy 4-column variant kept for any old blade that still references it. */
.page-preview .cta-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .page-preview .cta-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
    .page-preview .cta-grid,
    .page-preview .cta-grid--4 { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   Consultation block (2026-07-07, updated) — one wide card holding
   both the focus message AND the five contact options. Options now
   sit INSIDE the card, sized smaller and using the site sans-serif
   for a lighter, more conversational feel.
   ───────────────────────────────────────────────────────────── */
.preview-consult {
    max-width: 1080px;                      /* matches desktop mockup width */
    margin: 0 auto;
}
.preview-consult__card {
    background: #fff;
    border: 1.5px solid var(--c-line);
    border-radius: var(--r-lg, 18px);
    padding: 30px 40px 24px;
    box-shadow: 0 12px 32px rgba(32, 13, 175, 0.08);
    text-align: center;
    position: relative;
    overflow: hidden;
}
/* Subtle brand-blue accent bar at the top so the card doesn't feel too flat. */
.preview-consult__card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--c-blue), var(--c-blue-deep));
}
.preview-consult__message {
    font-family: var(--font-sans);          /* was serif — swapped for a lighter feel */
    font-size: clamp(15px, 1.7vw, 18px);
    line-height: 1.55;
    color: var(--c-ink);
    font-weight: 500;
    margin: 0 auto 22px;
    max-width: 70ch;
}
.preview-consult__message strong { color: var(--c-blue); font-weight: 700; }

/* Four slim options — sit inside the card, tighter and smaller than before.
   Was 5; "Get a call back" removed 2026-07-07. */
.preview-consult__options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.preview-consult__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    background: #fff;
    border: 1.5px solid var(--c-line);
    border-radius: 999px;
    color: var(--c-ink);
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
    white-space: nowrap;
    text-align: center;
    line-height: 1.1;
}
.preview-consult__option:hover {
    border-color: var(--c-blue);
    color: var(--c-blue);
    transform: translateY(-1px);
    background: rgba(58, 35, 232, 0.04);
}
.preview-consult__option-icon {
    font-size: 13px;
    line-height: 1;
    /* Emoji-based for now; swap for inline SVG if you want proper brand
       icons later — the .preview-consult__option layout stays the same. */
}
.preview-consult__option-label { line-height: 1; }

@media (max-width: 960px) {
    .preview-consult__options { grid-template-columns: repeat(3, 1fr); }
    .preview-consult__card { padding: 26px 28px 22px; }
}
@media (max-width: 620px) {
    .preview-consult__options { grid-template-columns: repeat(2, 1fr); }
    .preview-consult__card { padding: 22px 20px 20px; }
}
@media (max-width: 400px) {
    .preview-consult__options { grid-template-columns: 1fr; }
}
.page-preview .cta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px;
    border-radius: var(--r-lg, 18px);
    text-decoration: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s;
}
.page-preview .cta-label { font-weight: 700; font-size: 17px; }
.page-preview .cta-sub { font-size: 13px; opacity: 0.8; font-weight: 400; }

.page-preview .cta-primary {
    background: var(--c-blue);
    color: #fff;
    box-shadow: 0 12px 28px rgba(58, 35, 232, 0.28);
}
.page-preview .cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(58, 35, 232, 0.36);
}
.page-preview .cta-secondary {
    background: #fff;
    color: var(--c-ink);
    border: 1.5px solid var(--c-line);
}
.page-preview .cta-secondary:hover {
    border-color: var(--c-blue);
    color: var(--c-blue);
}
.page-preview .cta-tertiary {
    background: transparent;
    color: var(--c-ink-soft);
    border: 1.5px dashed var(--c-line);
}
.page-preview .cta-tertiary:hover {
    border-color: var(--c-blue);
    color: var(--c-blue);
    border-style: solid;
}
.page-preview .cta-full { width: 100%; margin-top: 8px; }

.page-preview .action-form {
    max-width: 560px;
    margin: 0 auto;
    background: #fff;
    padding: 32px;
    border-radius: var(--r-lg, 18px);
    border: 1.5px solid var(--c-line);
    box-shadow: 0 8px 30px rgba(32, 13, 175, 0.08);
}
.page-preview .action-form h3 {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--c-ink);
    margin: 0 0 8px;
}
.page-preview .action-form p {
    color: var(--c-ink-soft);
    font-size: 15px;
    margin: 0 0 20px;
}
.page-preview .action-input {
    display: block;
    width: 100%;
    padding: 14px 16px;
    background: #fff;
    border: 1.5px solid var(--c-line);
    border-radius: 10px;
    color: var(--c-ink);
    font-family: inherit;
    font-size: 15px;
    margin-bottom: 12px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.page-preview .action-input:focus {
    border-color: var(--c-blue);
    box-shadow: 0 0 0 3px rgba(58, 35, 232, 0.12);
}
.page-preview .action-input::placeholder { color: var(--c-muted); }
.page-preview .action-textarea { resize: vertical; min-height: 100px; }
.page-preview .action-back {
    background: none;
    border: 0;
    color: var(--c-ink-soft);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 12px;
    padding: 0;
}
.page-preview .action-back:hover { color: var(--c-blue); }
.page-preview .action-error {
    color: #b91c1c;
    font-size: 13px;
    margin-top: -4px;
    margin-bottom: 12px;
}
.page-preview .action-done {
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
    padding: 40px 32px;
    background: #fff;
    border-radius: var(--r-lg, 18px);
    border: 1.5px solid var(--c-line);
}
.page-preview .done-tick {
    width: 64px;
    height: 64px;
    background: rgba(58, 35, 232, 0.10);
    border: 2px solid var(--c-blue);
    color: var(--c-blue);
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
}
.page-preview .action-done h3 {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--c-ink);
    margin: 0 0 8px;
}
.page-preview .action-done p {
    color: var(--c-ink-soft);
    font-size: 15px;
    margin: 0;
}