/* base — reset + design tokens (front-page only) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
  --red: #FF2C55;
  --black: #0A0A0A;
  --white: #FFFFFF;
  --bg: #FAFAFA;
  --muted: #666666;
  --rule: #111111;
  --font: 'Inter', sans-serif;

  /* Pin theme's tokens so its data-theme dark mode can't override homepage typography */
  --ld-text: #0A0A0A;
  --ld-text-muted: #666666;
  --ld-text-dim: #888888;
  --ld-bg: #FAFAFA;
  --ld-bg-2: #FFFFFF;
  --ld-bg-3: #F4F4F4;
  --ld-panel: #FFFFFF;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--black);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  display: block;
}

/* Override theme typography that targets bare h1-h6 / p with --ld-text tokens */
body h1, body h2, body h3, body h4, body h5, body h6 { color: inherit; }
body p { color: inherit; }


/* home — top clients + partnerships */

  /* ── PARTNERSHIPS (section 09) ───────────────────────── */
  .partners-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
  }

  .partner-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 36px 36px 32px;
    background: linear-gradient(155deg, #161616 0%, #0A0A0A 70%, #1a0a10 100%);
    border: 1px solid rgba(255,255,255,0.08);
    text-decoration: none;
    color: var(--white);
    min-height: 320px;
    overflow: hidden;
    transition: border-color 0.18s, transform 0.18s;
  }

  .partner-hero::after {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,44,85,0.14) 0%, transparent 70%);
    pointer-events: none;
    transition: background 0.25s;
  }

  .partner-hero:hover {
    border-color: rgba(255,44,85,0.45);
    transform: translateY(-3px);
  }

  .partner-hero:hover::after {
    background: radial-gradient(circle, rgba(255,44,85,0.22) 0%, transparent 70%);
  }

  .partner-hero-eyebrow {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    margin-bottom: 28px;
  }

  .partner-hero-number {
    color: var(--red);
    font-weight: 800;
  }

  .partner-hero-eyebrow .rule {
    flex: 0 0 28px;
    height: 1px;
    background: rgba(255,255,255,0.25);
  }

  .partner-hero-badge {
    position: relative;
    z-index: 1;
    max-height: 90px;
    max-width: 220px;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: left center;
    opacity: 1;
    margin-bottom: 24px;
    align-self: flex-start;
  }

  /* Shopify Select badge ships as a dark mark — invert to white for the dark card */
  .partner-hero--shopify .partner-hero-badge {
    filter: brightness(0) invert(1);
    max-height: 110px;
    max-width: 240px;
  }

  .partner-hero-wordmark {
    position: relative;
    z-index: 1;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--white);
    margin-bottom: 6px;
  }

  .partner-hero-tier {
    position: relative;
    z-index: 1;
    display: inline-block;
    align-self: flex-start;
    padding: 6px 12px;
    background: rgba(255,44,85,0.12);
    border: 1px solid rgba(255,44,85,0.35);
    color: var(--red);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 22px;
  }

  .partner-hero-desc {
    position: relative;
    z-index: 1;
    margin-top: auto;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255,255,255,0.75);
    letter-spacing: -0.005em;
  }

  .partner-hero-stat {
    position: relative;
    z-index: 1;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
  }

  .partner-hero-stat strong {
    color: var(--white);
    font-weight: 800;
  }

  /* Supporting partners strip */
  .partners-strip {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 36px;
  }

  .partners-strip-label {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    margin-bottom: 22px;
  }

  .partners-strip-logos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: center;
  }

  .partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 14px 20px;
    border: 1px solid rgba(255,255,255,0.08);
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
  }

  .partner-logo:hover {
    border-color: rgba(255,44,85,0.35);
    background: rgba(255,44,85,0.04);
    transform: translateY(-2px);
  }

  .partner-logo img {
    max-height: 28px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.65;
    transition: opacity 0.2s;
  }

  .partner-logo:hover img { opacity: 1; }

  .partners-strip-also {
    margin-top: 24px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    line-height: 1.7;
  }

  .partners-strip-also strong {
    color: rgba(255,255,255,0.7);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 8px;
    font-size: 10.5px;
  }

  @media (max-width: 900px) {
    .partners-trio { grid-template-columns: 1fr; }
    .partners-strip-logos { grid-template-columns: repeat(2, 1fr); }
  }


/* home — hero + trust strip + audit form + marquee + shared + services + results + industries + cta */
  /* ── HERO ────────────────────────────────────────────── */
  .hero {
    padding: 80px 48px;
    border-bottom: 1px solid var(--rule);
    position: relative;
    overflow: hidden;
    background: var(--bg);
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(440px, 38%, 520px);
    gap: 72px;
    align-items: start;
  }

  /* Desktop-only banner artwork. The image is loaded above 900px so mobile
     stays clean and the right column's audit form doesn't fight the bg. */
  @media (min-width: 901px) {
    .hero--with-banner-bg {
      background-image: url('https://liondigital.com.au/wp-content/themes/liondigital-theme-1/assets/images/top-banner-bg.png');
      background-repeat: no-repeat;
      background-size: 58% 100%;
      background-position: center right;
      background-color: var(--bg);
    }
  }

  .hero-deco {
    position: absolute;
    right: 48px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 340px;
    font-weight: 900;
    color: var(--red);
    opacity: 0.04;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    letter-spacing: -0.05em;
  }

  .hero-inner {
    max-width: 900px;
    position: relative;
    z-index: 1;
  }

  .hero-location {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 28px;
  }

  .hero h1 {
    font-size: clamp(2.6rem, 4.4vw, 5rem);
    font-weight: 900;
    color: var(--black);
    line-height: 1.02;
    letter-spacing: -0.04em;
    margin-bottom: 28px;
  }

  .hero h1 em {
    font-style: italic;
    color: var(--red);
  }

  .hero-rule {
    width: 100%;
    height: 1px;
    background: var(--rule);
    margin-bottom: 28px;
  }

  .hero-sub {
    font-size: 16px;
    color: var(--muted);
    font-weight: 400;
    max-width: 560px;
    line-height: 1.75;
    margin-bottom: 40px;
  }

  /* Mobile-only domain quick-capture (hero) — hidden on desktop */
  .hero-domain-form { display: none; }
  @media (max-width: 640px) {
    /* Turn the hero-inner into a flex column so we can reorder just the
       trust strip + stats without touching the desktop layout. */
    .hero-inner { display: flex; flex-direction: column; }
    .trust-strip { order: 1; }
    .hero-stats  { order: 2; margin-top: 32px; }

    .hero-domain-form {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      margin: -24px 0 32px;
      max-width: 560px;
    }
    .hero-domain-form input[type="text"] {
      width: 100%;
      min-width: 0;
      background: #fff;
      border: 1px solid rgba(16,16,16,0.25);
      border-radius: 999px;
      color: var(--black);
      font: 500 15px/1.4 var(--font);
      padding: 16px 22px;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .hero-domain-form input[type="text"]::placeholder { color: rgba(16,16,16,0.4); }
    .hero-domain-form input[type="text"]:focus {
      border-color: var(--black);
      box-shadow: 0 0 0 3px rgba(16,16,16,0.08);
    }
    .hero-domain-form button {
      align-self: flex-start;
      background: var(--black);
      color: #fff;
      border: 0;
      border-radius: 999px;
      padding: 18px 34px;
      font: 800 12px/1 var(--font);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
    }
    .hero-domain-form button:hover { background: #1f1f1f; transform: translateY(-1px); }
    .hero-domain-form button[disabled] { opacity: 0.6; }
    .hero-domain-form-status {
      margin: 0;
      font-size: 12px;
      letter-spacing: 0.02em;
    }
    .hero-domain-form-status--error { color: #c62439; }
    .hero-domain-form-status--success { color: #1d874c; }
  }

  .hero-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 48px;
  }

  .hero-stat-line {
    font-size: 16px;
    font-weight: 600;
    color: var(--black);
    letter-spacing: -0.01em;
  }

  .hero-stat-line span {
    color: var(--muted);
    font-weight: 400;
  }

  .hero-cta {
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    color: var(--red);
    text-decoration: none;
    border-bottom: 2px solid var(--red);
    padding-bottom: 2px;
    letter-spacing: -0.01em;
    transition: opacity 0.2s;
  }

  .hero-cta:hover { opacity: 0.7; }

  /* Hide the text CTA on desktop (HubSpot form is surfaced on the right)
     AND on mobile (the inline .hero-domain-form now handles the ask). */
  @media (min-width: 768px) {
    .hero-cta { display: none; }
  }
  @media (max-width: 640px) {
    .hero-cta,
    .hero-cta-micro { display: none; }
  }

  /* ── TRUST STRIP (under hero copy, left column) ──────── */
  .trust-strip {
    margin-top: 48px;
    padding-top: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid #E0E0E0;
    position: relative;
    z-index: 1;
  }

  .trust-strip-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 48px;
    flex-wrap: wrap;
  }

  .trust-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    color: var(--black);
  }

  .trust-badge img {
    max-height: 60px;
    width: auto;
    object-fit: contain;
    display: block;
  }

  /* ── HERO AUDIT FORM (right column) ──────────────────── */
  .hero-form {
    background: var(--white);
    border: 1px solid #E6E6E6;
    padding: 0;
    position: relative;
    z-index: 2;
    box-shadow: 0 24px 70px rgba(0,0,0,0.08), 0 4px 14px rgba(0,0,0,0.04);
    overflow: hidden;
  }

  .hero-form::before {
    content: "";
    display: block;
    height: 5px;
    background: linear-gradient(90deg, var(--red) 0%, #ff6086 100%);
  }

  .hero-form-inner {
    padding: 30px 32px 28px;
  }

  .hero-form-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 10px;
    background: rgba(255,44,85,0.08);
    border: 1px solid rgba(255,44,85,0.25);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 18px;
  }

  .hero-form-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--red);
    border-radius: 50%;
    animation: founder-pulse 2s ease-in-out infinite;
  }

  .hero-form-title {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.0;
    color: var(--black);
    margin-bottom: 10px;
  }

  .hero-form-title em {
    font-style: italic;
    color: var(--red);
  }

  .hero-form-sub {
    font-size: 13.5px;
    color: var(--muted);
    margin-bottom: 22px;
    line-height: 1.5;
    max-width: 380px;
  }

  .hero-form-bullets {
    list-style: none;
    padding: 16px 18px;
    margin: 0 0 24px;
    background: #F6F6F6;
    border-left: 3px solid var(--red);
    display: grid;
    gap: 8px;
  }

  .hero-form-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--black);
    font-weight: 500;
  }

  .hero-form-bullets li svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    color: var(--red);
  }

  .hero-form-bullets li strong { font-weight: 800; }

  .hero-form-field { margin-bottom: 12px; position: relative; }

  .hero-form-field input,
  .hero-form-field select {
    width: 100%;
    padding: 14px 14px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 500;
    color: var(--black);
    background: var(--white);
    border: 1px solid #DDDDDD;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
  }

  .hero-form-field input:focus,
  .hero-form-field select:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(255,44,85,0.08);
  }

  .hero-form-field input::placeholder { color: #A8A8A8; }

  .hero-form-field select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath fill='none' stroke='%23666' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 11px auto;
    padding-right: 36px;
    cursor: pointer;
    color: #A8A8A8;
  }

  .hero-form-field select.is-filled { color: var(--black); }

  .hero-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .hero-form-submit {
    width: 100%;
    padding: 18px 20px;
    margin-top: 8px;
    background: var(--black);
    color: var(--white);
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background 0.18s, gap 0.18s;
    position: relative;
  }

  .hero-form-submit:hover {
    background: var(--red);
    gap: 16px;
  }

  .hero-form-submit-arrow {
    display: inline-block;
    transition: transform 0.18s;
  }

  /* ── HubSpot embed mapped onto hero-form styling ─────── */
  .hero-form-hubspot { min-height: 240px; }
  .hero-form-hubspot .hs-form,
  .hero-form-hubspot form[id^="hsForm_"] {
    font-family: inherit;
    margin: 0;
    padding: 0;
  }

  /* HubSpot fieldsets — full width, no native border/padding */
  .hero-form-hubspot fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 0 0;
    max-width: 100% !important;
    width: 100% !important;
  }
  .hero-form-hubspot fieldset.form-columns-2 .hs-form-field { width: 100% !important; padding: 0 !important; }

  /* Side-by-side pairs (firstname/lastname, annualrevenue/team_size) */
  .hero-form-hubspot .ld-hero-pair {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px;
    border: 0;
    padding: 0 !important;
    box-sizing: border-box;
  }
  /* Direct children of the pair (fieldsets OR field divs) — let grid size them */
  .hero-form-hubspot .ld-hero-pair > fieldset,
  .hero-form-hubspot .ld-hero-pair > .hs-form-field {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
  }
  /* Inner field/input wrappers fill their grid track */
  .hero-form-hubspot .ld-hero-pair .hs-form-field {
    margin-bottom: 0;
    width: 100% !important;
    min-width: 0 !important;
  }
  .hero-form-hubspot .ld-hero-pair .input { width: 100% !important; min-width: 0 !important; }
  .hero-form-hubspot .ld-hero-pair .hs-input { width: 100% !important; min-width: 0 !important; }

  /* Every field row — tight 12px gaps, no float, full width */
  .hero-form-hubspot .hs-form-field {
    margin-bottom: 12px;
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
  }
  .hero-form-hubspot .hs-form-field > label,
  .hero-form-hubspot .hs-form-field .hs-field-desc,
  .hero-form-hubspot .hs-form-required { display: none !important; }
  .hero-form-hubspot .input { margin: 0 !important; }

  /* Inputs / selects / textareas — match original hero form */
  .hero-form-hubspot .hs-input {
    width: 100% !important;
    box-sizing: border-box;
    padding: 14px 14px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 500;
    color: var(--black);
    background: var(--white);
    border: 1px solid #DDDDDD;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
    height: auto;
    line-height: 1.4;
  }
  .hero-form-hubspot .hs-input:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(255,44,85,0.08);
  }
  .hero-form-hubspot .hs-input::placeholder { color: #A8A8A8; }

  /* Native + injected select dropdowns */
  .hero-form-hubspot select.hs-input,
  .hero-form-hubspot .ld-hero-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath fill='none' stroke='%23666' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 11px auto;
    padding-right: 36px;
    cursor: pointer;
    color: #A8A8A8;
    margin-top: 0;
  }
  .hero-form-hubspot select.hs-input.is-filled,
  .hero-form-hubspot .ld-hero-select.is-filled { color: var(--black); }
  .hero-form-hubspot .ld-hero-select option { color: var(--black); }
  .hero-form-hubspot .ld-hero-select option[disabled] { color: #A8A8A8; }

  .hero-form-hubspot textarea.hs-input {
    min-height: 84px;
    resize: vertical;
  }

  /* Hide any leftover radio/checkbox UI from contact-page enhancer */
  .hero-form-hubspot .hs_annualrevenue .inputs-list,
  .hero-form-hubspot .hs_team_size .inputs-list { display: none !important; }
  .hero-form-hubspot .hs-fieldtype-checkbox .hs-input,
  .hero-form-hubspot .hs-fieldtype-radio .hs-input {
    width: 100% !important;
    margin-right: 8px;
  }

  .hero-form-hubspot .hs-error-msgs {
    list-style: none;
    padding: 4px 0 0;
    margin: 0;
    font-size: 12px;
    color: var(--red);
  }
  .hero-form-hubspot .hs-error-msg { color: var(--red); }

  .hero-form-hubspot .ld-hero-select--invalid {
    border-color: var(--red) !important;
    box-shadow: 0 0 0 3px rgba(255,44,85,0.10) !important;
  }
  .hero-form-hubspot .ld-hero-error {
    display: block;
    padding: 4px 0 0;
    font-size: 12px;
    color: var(--red);
  }

  .hero-form-hubspot .hs-submit { margin-top: 8px; width: 100%; }
  .hero-form-hubspot .actions { padding: 0; margin: 0; }
  .hero-form-hubspot .hs-button {
    width: 100%;
    padding: 18px 20px;
    background: var(--black);
    color: var(--white);
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background 0.18s;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
  }
  .hero-form-hubspot .hs-button:hover { background: var(--red); }

  .hero-form-hubspot .submitted-message {
    padding: 24px 20px;
    background: #F4F4F4;
    border-left: 3px solid var(--red);
    font-size: 14px;
    line-height: 1.6;
    color: var(--black);
  }
  .hero-form-hubspot .legal-consent-container {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.5;
    margin-top: 6px;
  }
  .hero-form-hubspot .legal-consent-container a { color: var(--black); }

  .hero-form-trust {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #EFEFEF;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    text-align: center;
  }

  .hero-form-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .hero-form-trust-num {
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--black);
    line-height: 1;
  }

  .hero-form-trust-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.3;
  }

  /* Deloitte Fast 50 — laurels + wordmark */
  .trust-badge--deloitte {
    gap: 14px;
  }

  .trust-laurel {
    width: 28px;
    height: 64px;
    color: var(--black);
    flex-shrink: 0;
  }

  .trust-laurel--right { transform: scaleX(-1); }

  .trust-deloitte-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 100px;
  }

  .trust-deloitte-name {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--black);
  }

  .trust-deloitte-dot { color: #86BC25; }

  .trust-deloitte-rule {
    width: 60px;
    height: 1px;
    background: #999;
    margin: 6px 0 4px;
  }

  .trust-deloitte-award {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--black);
    line-height: 1.1;
    text-align: center;
  }

  .trust-deloitte-sub {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #444;
    line-height: 1.1;
    text-align: center;
  }

  /* Shopify Plus — wordmark */
  .trust-badge--shopify {
    gap: 10px;
  }

  .trust-shopify-bag {
    width: 32px;
    height: 36px;
    color: var(--black);
    flex-shrink: 0;
  }

  .trust-shopify-text {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--black);
    font-family: 'Inter', 'Helvetica Neue', sans-serif;
  }

  .trust-shopify-text em {
    font-style: normal;
    font-weight: 400;
  }

  /* Hide audit form on smaller laptops / tablets / phones — only show on big screens (>1400px) */
  @media (max-width: 1400px) {
    .hero { grid-template-columns: 1fr; }
    .hero-form { display: none; }
  }

  @media (max-width: 900px) {
    .hero { gap: 48px; }
    .trust-strip { margin-top: 10px; padding-top: 0; }
    .trust-strip-row { gap: 15px; justify-content: flex-start; }
    .trust-badge img { max-height: 45px; }
  }

  /* ── MARQUEE STRIP ───────────────────────────────────── */
  .marquee-strip {
    background: var(--black);
    overflow: hidden;
    padding: 28px 0;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
  }

  .marquee-track {
    display: flex;
    gap: 0;
    animation: marquee 36s linear infinite;
    width: max-content;
    align-items: center;
  }

  .marquee-strip:hover .marquee-track { animation-play-state: paused; }

  .marquee-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 36px;
    width: 200px;
    height: 56px;
    flex-shrink: 0;
  }

  .marquee-item img {
    width: 100%;
    height: 100%;
    max-height: 56px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.85;
    transition: opacity 0.3s ease;
  }

  /* Non-transparent logos (white bg WebP/JPEG) — invert turns white bg → black (blends into marquee) and dark logo → light */
  .marquee-item img[data-flat] {
    filter: invert(1) brightness(1.15) contrast(1.2) grayscale(1);
    mix-blend-mode: screen;
    opacity: 0.95;
  }

  /* Native-color logos that lose meaning under monochrome filtering (e.g. multi-coloured brand marks) */
  .marquee-item img[data-asis] {
    filter: grayscale(1) invert(1);
    opacity: 1;
  }

  .marquee-item:hover img { opacity: 1; }

  /* Text wordmark variant (for brands whose logos don't render cleanly with the universal filter) */
  .marquee-item--text {
    flex-direction: column;
  }

  .marquee-wordmark {
    font-family: inherit;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.85);
    line-height: 1.05;
    text-align: center;
    white-space: nowrap;
    transition: color 0.3s ease;
  }

  .marquee-item--text:hover .marquee-wordmark { color: var(--white); }

  .marquee-sep {
    font-size: 11px;
    color: rgba(255,255,255,0.2);
    font-weight: 300;
    flex-shrink: 0;
  }

  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* ── SHARED SECTION STYLES ───────────────────────────── */
  .section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 36px;
    font-variant-numeric: tabular-nums;
  }

  /* ── SERVICES ────────────────────────────────────────── */
  .services {
    padding: 80px 48px;
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
  }

  .services h2 {
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 900;
    color: var(--black);
    letter-spacing: -0.04em;
    margin-bottom: 52px;
    line-height: 1.05;
  }

  .services-table { width: 100%; border-collapse: collapse; }

  .services-table tr {
    border-top: 1px solid #E0E0E0;
    transition: background 0.15s;
    cursor: default;
  }

  .services-table tr:last-child { border-bottom: 1px solid #E0E0E0; }

  .services-table tr:hover { background: #fff0f3; }

  .services-table tr:hover .svc-name { color: var(--red); }

  .services-table td {
    padding: 20px 0;
    vertical-align: middle;
  }

  .svc-num {
    width: 60px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }

  .svc-name {
    width: 40%;
    font-size: 17px;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.02em;
    transition: color 0.15s;
    padding-right: 32px;
  }

  .svc-desc {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
    font-weight: 400;
  }

  .services-table .svc-linked { cursor: pointer; }
  .services-table .svc-linked .svc-name a,
  .services-table .svc-linked .svc-desc a {
    color: inherit;
    text-decoration: none;
    display: block;
  }
  .services-table .svc-linked:hover .svc-name a { color: var(--red); }
  .svc-arrow {
    display: inline-block;
    margin-left: 8px;
    color: var(--red);
    transition: transform 0.15s;
    font-weight: 700;
  }
  .services-table .svc-linked:hover .svc-arrow { transform: translateX(4px); }

  /* ── RESULTS ─────────────────────────────────────────── */
  .results {
    background: var(--red);
    padding: 80px 48px;
    border-bottom: 1px solid #d4163c;
  }

  .results .section-label { color: rgba(255,255,255,0.6); }

  .results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }

  .result-item {
    padding: 32px 40px 32px 0;
    border-right: 1px solid rgba(255,255,255,0.2);
    padding-right: 48px;
  }

  .result-item:first-child { padding-left: 0; }

  .result-item + .result-item {
    padding-left: 48px;
  }

  .result-item:last-child { border-right: none; }

  .result-logo {
    height: 56px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
  }

  .result-logo img {
    max-height: 100%;
    max-width: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.95;
  }

  .result-logo img[data-flat] {
    filter: invert(1) brightness(1.15) contrast(1.2) grayscale(1);
    mix-blend-mode: screen;
  }

  .result-logo img[data-asis] {
    filter: none;
  }

  .result-metric {
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 900;
    color: var(--white);
    letter-spacing: -0.06em;
    line-height: 0.9;
    display: block;
    margin-bottom: 16px;
  }

  .result-client {
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--white);
    margin-bottom: 10px;
    padding-top: 14px;
    border-top: 2px solid rgba(255,255,255,0.9);
    display: inline-block;
    padding-right: 24px;
  }

  .result-desc {
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
    font-weight: 400;
    max-width: 260px;
  }

  /* ── INDUSTRIES (section 04) ─────────────────────────── */
  .industry-icon {
    width: 44px;
    height: 44px;
    color: var(--white);
    margin-bottom: 22px;
    display: block;
  }

  .industry-name {
    font-size: clamp(1.6rem, 2.2vw, 2rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--white);
    line-height: 1.0;
    margin-bottom: 12px;
  }

  .industry-count {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    padding-top: 12px;
    border-top: 2px solid rgba(255,255,255,0.9);
    display: inline-block;
    padding-right: 24px;
    margin-bottom: 16px;
  }

  .industry-desc {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    line-height: 1.55;
    margin-bottom: 18px;
    max-width: 280px;
  }

  .industry-brands {
    font-size: 12px;
    letter-spacing: 0.03em;
    color: rgba(255,255,255,0.75);
    line-height: 1.7;
    font-weight: 500;
  }

  .industry-brands strong {
    color: var(--white);
    font-weight: 700;
  }

  /* ── INDUSTRIES (8-card grid variant) ─────────────────── */
  .industries-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.18);
  }

  .industry-card {
    background: var(--red);
    padding: 28px 24px 26px;
    display: flex;
    flex-direction: column;
    transition: background 0.22s;
    /* button reset */
    border: 0;
    margin: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    color: inherit;
    position: relative;
  }

  .industry-card:hover { background: #d4163c; }
  .industry-card:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: -4px;
  }
  .industry-card[aria-expanded="true"] { background: #b81034; }

  .industry-toggle {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 22px;
    height: 22px;
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.65;
    transition: transform 0.25s, opacity 0.2s;
  }
  .industry-toggle svg { width: 100%; height: 100%; }
  .industry-card:hover .industry-toggle { opacity: 1; }
  .industry-card[aria-expanded="true"] .industry-toggle {
    transform: rotate(180deg);
    opacity: 1;
  }

  .industry-icon-sm {
    width: 32px;
    height: 32px;
    color: var(--white);
    margin-bottom: 16px;
    display: block;
    flex-shrink: 0;
  }

  .industry-card .industry-name {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 10px;
    padding-right: 32px; /* leave room for the chevron */
  }

  .industry-card .industry-count {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.95);
    padding-top: 8px;
    border-top: 2px solid rgba(255,255,255,0.95);
    display: inline-block;
    padding-right: 18px;
    margin-bottom: 12px;
    align-self: flex-start;
  }

  .industry-card .industry-brands {
    font-size: 11.5px;
    letter-spacing: 0.01em;
    color: rgba(255,255,255,0.85);
    line-height: 1.55;
    font-weight: 500;
    margin-top: auto;
  }

  .industry-card .industry-brands strong {
    color: var(--white);
    font-weight: 700;
  }

  @media (max-width: 1100px) {
    .industries-grid { grid-template-columns: repeat(2, 1fr); }
  }

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

    .industry-card { padding: 20px 18px 18px; }
    .industry-card .industry-name { font-size: 16px; padding-right: 28px; }
    .industry-card .industry-brands { font-size: 11px; }
    .industry-toggle { top: 18px; right: 18px; width: 18px; height: 18px; }

    .industry-panel-inner { padding: 24px 18px 28px; }
    .industry-panel-head { gap: 12px; margin-bottom: 18px; padding-bottom: 12px; }
    .industry-panel-eyebrow { font-size: 10px; letter-spacing: 0.18em; }
  }

  /* ── INDUSTRY EXPAND PANEL ─────────────────────────────
     Panels live INSIDE .industries-grid. Each spans all
     grid columns (grid-column: 1 / -1) so when its
     `hidden` attribute is removed it opens as a full-width
     row between/after the card rows. Hidden panels are
     `display:none` so the grid skips them entirely. */
  .industry-panel {
    grid-column: 1 / -1;
    background: var(--white);
    color: var(--black);
  }
  .industry-panel[hidden] { display: none; }

  .industry-panel-inner {
    padding: 36px 32px 40px;
  }

  .industry-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rule);
  }

  .industry-panel-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
  }

  .industry-panel-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--black);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, color 0.18s;
    flex-shrink: 0;
  }
  .industry-panel-close svg { width: 14px; height: 14px; }
  .industry-panel-close:hover {
    background: var(--red);
    color: var(--white);
    border-color: var(--red);
  }

  .industry-panel-empty {
    font-size: 14px;
    color: var(--muted, #5a5a5a);
    margin: 0;
  }

  /* ── CASE CARDS GRID — compact tile layout ───────────── */
  .industry-cases {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  @media (max-width: 1100px) {
    .industry-cases { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 760px) {
    .industry-cases { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 460px) {
    .industry-cases { grid-template-columns: 1fr; }
  }

  .industry-case {
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.18s, transform 0.18s;
  }
  .industry-case:hover {
    border-color: rgba(255,44,85,0.5);
    transform: translateY(-1px);
  }

  .industry-case-brand {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.005em;
    color: var(--black);
    margin: 0;
    line-height: 1.2;
  }

  .industry-case-metrics {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .industry-case-metrics li {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    padding: 5px 8px;
    background: rgba(255,44,85,0.06);
    border-radius: 5px;
    min-width: 0;
  }
  .industry-case-metric-value {
    font-size: 12.5px;
    font-weight: 900;
    color: var(--red);
    line-height: 1;
  }
  .industry-case-metric-label {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted, #5a5a5a);
    line-height: 1.1;
  }

  /* ── CTA ─────────────────────────────────────────────── */
  .cta-section {
    position: relative;
    padding: 120px 48px 100px;
    text-align: center;
    background: var(--black);
    color: var(--white);
    border-bottom: 1px solid var(--rule);
    overflow: hidden;
  }

  .cta-section::before,
  .cta-section::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
  }

  .cta-section::before {
    top: -200px;
    left: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255,44,85,0.10) 0%, transparent 60%);
  }

  .cta-section::after {
    bottom: -260px;
    right: -180px;
    width: 540px;
    height: 540px;
    background: radial-gradient(circle, rgba(255,44,85,0.08) 0%, transparent 60%);
  }

  .cta-inner { position: relative; max-width: 1100px; margin: 0 auto; }

  .cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: 32px;
  }

  .cta-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
    animation: founder-pulse 2s ease-in-out infinite;
  }

  .cta-section h2 {
    font-size: clamp(2.6rem, 6vw, 5rem);
    font-weight: 900;
    color: var(--white);
    letter-spacing: -0.05em;
    line-height: 1;
    margin: 0 0 14px;
  }

  .cta-section h2 .cta-q {
    color: var(--red);
    display: inline-block;
  }

  .cta-section .cta-sub {
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0 0 20px;
  }

  .cta-section .cta-sub em {
    color: var(--red);
    font-style: normal;
    font-weight: 700;
  }

  .cta-section p.cta-desc {
    font-size: 17px;
    color: rgba(255,255,255,0.6);
    max-width: 540px;
    margin: 0 auto 48px;
    line-height: 1.65;
  }

  .cta-deliverables {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0 0 48px;
    text-align: left;
  }

  .cta-deliverable {
    padding: 22px 22px 24px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    transition: border-color 0.2s, transform 0.2s;
  }

  .cta-deliverable:hover {
    border-color: rgba(255,44,85,0.45);
    transform: translateY(-2px);
  }

  .cta-deliverable-icon {
    width: 26px;
    height: 26px;
    color: var(--red);
    margin-bottom: 14px;
    display: block;
  }

  .cta-deliverable-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--white);
    margin-bottom: 6px;
  }

  .cta-deliverable-desc {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    line-height: 1.45;
  }

  .cta-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }

  .cta-btn-manifesto {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--red);
    color: var(--white);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 18px 32px;
    text-decoration: none;
    border: 2px solid var(--red);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  }

  .cta-btn-manifesto:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -16px rgba(255,44,85,0.6);
    background: #ff4569;
    color: var(--white); /* beat global a:hover { color: var(--ld-red) } */
  }

  .cta-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 18px 24px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.2);
    transition: border-color 0.2s, color 0.2s;
  }

  .cta-btn-secondary:hover {
    border-color: var(--white);
    color: var(--white); /* beat global a:hover { color: var(--ld-red) } */
  }

  .cta-microcopy {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.04em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 56px;
  }

  .cta-microcopy span:not(:last-child)::after {
    content: "·";
    margin-left: 14px;
    color: rgba(255,255,255,0.3);
  }

  .cta-trust {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
  }

  .cta-trust-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
  }

  .cta-trust-stat {
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    font-weight: 500;
    letter-spacing: 0.04em;
  }

  .cta-trust-stat strong {
    color: var(--white);
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-right: 4px;
  }


/* home — why we're different + dashboard + framework + founder + testimonials + case studies + team + contact + responsive */
  /* ── WHY WE'RE DIFFERENT ─────────────────────────────── */
  .why-diff-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
    margin-bottom: 56px;
  }

  .why-diff-intro h2 { margin-bottom: 32px; }
  .why-diff-intro p:last-of-type { margin-bottom: 0; }

  /* Intelligence stack card */
  .intel-stack {
    background: #F4F4F4;
    border: 1px solid #E5E5E5;
    padding: 26px 26px 24px;
    position: relative;
  }

  .intel-stack-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: 18px;
  }

  .intel-stack-live {
    color: var(--red);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9.5px;
  }

  .intel-stack-live::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--red);
    border-radius: 50%;
    animation: founder-pulse 2s ease-in-out infinite;
  }

  .intel-layer {
    border: 1px solid #DCDCDC;
    background: var(--white);
    padding: 16px 16px 14px;
    position: relative;
  }

  .intel-layer + .intel-layer { margin-top: 28px; }

  .intel-layer--ai {
    background: var(--black);
    border-color: var(--black);
    color: var(--white);
  }

  .intel-layer-num {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: rgba(0,0,0,0.4);
  }

  .intel-layer--ai .intel-layer-num { color: rgba(255,255,255,0.4); }

  .intel-layer-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: 10px;
  }

  .intel-layer--ai .intel-layer-title { color: var(--white); }

  .intel-layer-title-dot {
    width: 6px;
    height: 6px;
    background: var(--red);
    border-radius: 50%;
    flex-shrink: 0;
  }

  .intel-layer-body {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--muted);
  }

  .intel-layer--ai .intel-layer-body { color: rgba(255,255,255,0.7); }

  .intel-layer-rows {
    display: grid;
    gap: 6px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--muted);
    font-family: 'SF Mono', Menlo, Consolas, monospace;
  }

  .intel-layer--ai .intel-layer-rows { color: rgba(255,255,255,0.8); }

  .intel-layer-rows .diamond {
    color: var(--red);
    margin-right: 6px;
    font-weight: 800;
  }

  .intel-layer-rows .val {
    color: var(--white);
    font-weight: 700;
  }

  .intel-layer--data { background: #FAFAFA; }

  .intel-layer-bars {
    display: grid;
    gap: 6px;
    font-size: 11px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    color: var(--muted);
  }

  .intel-layer-bar {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .intel-layer-bar-fill {
    flex: 1;
    height: 6px;
    background: linear-gradient(90deg, var(--red) 0%, var(--red) 80%, rgba(255,44,85,0.2) 80%, rgba(255,44,85,0.2) 100%);
  }

  .intel-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 6px 0;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #F4F4F4;
    padding: 2px 10px;
    z-index: 1;
  }

  .intel-arrow-line {
    width: 28px;
    height: 0;
    border-top: 1px dashed var(--red);
  }

  .intel-layer-wrap {
    position: relative;
  }

  .intel-stack-output {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #DDD;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--black);
    font-weight: 600;
  }

  .intel-stack-output strong { color: var(--red); font-weight: 800; }

  @media (max-width: 900px) {
    .why-diff-intro { grid-template-columns: 1fr; gap: 48px; }
  }

  /* ── LION' VIEW DASHBOARD (section 06) ───────────────── */
  .lv-section {
    padding: 80px 48px;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
  }

  .lv-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.7fr);
    gap: 56px;
    align-items: center;
  }

  .lv-copy h2 {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.02;
    margin-bottom: 18px;
  }

  .lv-copy h2 em { font-style: italic; color: var(--red); }

  .lv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 10px;
    background: rgba(255,44,85,0.08);
    border: 1px solid rgba(255,44,85,0.25);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 18px;
  }

  .lv-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--red);
    border-radius: 50%;
    animation: founder-pulse 2s ease-in-out infinite;
  }

  .lv-sub {
    font-size: 16px;
    line-height: 1.65;
    color: var(--muted);
    margin-bottom: 28px;
  }

  .lv-features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: grid;
    gap: 12px;
  }

  .lv-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--black);
  }

  .lv-features li svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--red);
  }

  .lv-features li strong { font-weight: 700; }

  .lv-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: var(--black);
    color: var(--white);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.18s, gap 0.18s;
  }

  .lv-cta:hover { background: var(--red); gap: 16px; }

  /* Dashboard mockup */
  .lv-mockup {
    background: var(--white);
    border: 1px solid #E2E2E2;
    box-shadow: 0 30px 80px rgba(0,0,0,0.10), 0 6px 20px rgba(0,0,0,0.04);
    overflow: hidden;
    border-radius: 6px;
  }

  .lv-chrome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #F4F4F4;
    border-bottom: 1px solid #E2E2E2;
  }

  .lv-chrome-dots {
    display: flex;
    gap: 6px;
  }

  .lv-chrome-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #DDD;
  }

  .lv-chrome-dots span:first-child { background: #FF5F57; }
  .lv-chrome-dots span:nth-child(2) { background: #FEBC2E; }
  .lv-chrome-dots span:nth-child(3) { background: #28C840; }

  .lv-chrome-url {
    flex: 1;
    background: var(--white);
    border: 1px solid #E2E2E2;
    padding: 5px 10px;
    font-size: 10.5px;
    color: var(--muted);
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    letter-spacing: -0.01em;
    border-radius: 4px;
  }

  .lv-chrome-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--red);
  }

  .lv-chrome-live::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--red);
    border-radius: 50%;
    animation: founder-pulse 2s ease-in-out infinite;
  }

  .lv-body {
    display: grid;
    grid-template-columns: 156px 158px minmax(0, 1fr);
    min-height: 440px;
    background: #FFFFFF;
  }

  /* Reports list (left sidebar) */
  .lv-reports {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    background: #FAFAFA;
    border-right: 1px solid #EAEAEA;
    font-family: 'Inter', sans-serif;
  }

  .lv-reports-head {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #999;
    padding: 6px 14px 8px;
  }

  .lv-report {
    padding: 7px 14px;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    border-left: 2px solid transparent;
    line-height: 1.25;
    cursor: default;
  }

  .lv-report:hover { background: rgba(0,0,0,0.03); }

  .lv-report.is-active {
    background: #DFF6F2;
    color: #0B5C50;
    border-left-color: #1FA68F;
    font-weight: 700;
  }

  .lv-report--sub {
    margin-top: auto;
    font-size: 10px;
    color: #999;
    padding-top: 14px;
  }

  /* Filters (dark middle column) */
  .lv-filters {
    background: #1F1F1F;
    color: #FFFFFF;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .lv-filter {
    background: #2A2A2A;
    border: 1px solid #333333;
    padding: 7px 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.2;
  }

  .lv-filter--date {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    background: #000000;
    border-color: #000000;
    padding: 8px 9px;
    position: relative;
  }

  .lv-filter--date::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    border-top: 1px dotted #E03A4E;
  }

  .lv-filter-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #FFFFFF;
  }

  .lv-filter--date .lv-filter-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #BFBFBF;
  }

  .lv-filter-value {
    font-size: 10px;
    font-weight: 700;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  }

  .lv-caret {
    font-size: 8px;
    color: #BFBFBF;
    line-height: 1;
  }

  .lv-filter--date .lv-caret { color: #FFFFFF; }

  .lv-filter-commentary {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 800;
    color: #FFFFFF;
    padding-top: 10px;
    border-top: 1px dotted #E03A4E;
  }

  /* Right main area */
  .lv-main {
    padding: 14px;
    display: grid;
    gap: 14px;
    grid-template-rows: auto 1fr;
    background: #FFFFFF;
    min-width: 0;
  }

  /* KPI grid (2 x 2) */
  .lv-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .lv-kpi {
    background: #FFFFFF;
    border: 1px solid #E2E2E2;
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .lv-kpi-head {
    background: #E03A4E;
    color: #FFFFFF;
    font-size: 10.5px;
    font-weight: 800;
    padding: 6px 10px;
    line-height: 1.2;
    letter-spacing: -0.005em;
  }

  .lv-kpi-head--alt {
    background: #FFFFFF;
    color: #1F1F1F;
    padding: 10px 10px 0;
  }

  .lv-kpi-body {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .lv-kpi-title {
    font-size: 10px;
    font-weight: 700;
    color: #444;
    line-height: 1.2;
  }

  .lv-kpi-value {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #1F1F1F;
    line-height: 1.05;
    margin: 1px 0 4px;
  }

  .lv-kpi-deltas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .lv-kpi-delta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }

  .lv-kpi-delta-label {
    font-size: 8.5px;
    font-weight: 600;
    color: #777;
    line-height: 1.2;
    letter-spacing: 0.01em;
  }

  .lv-kpi-delta-value {
    font-size: 11px;
    font-weight: 800;
    color: #1F1F1F;
    line-height: 1.15;
    white-space: nowrap;
  }

  .lv-kpi-delta-value.is-up { color: #1B8F3A; }
  .lv-kpi-delta-value.is-down { color: #C0303C; }

  .lv-kpi-delta-value .lv-arrow {
    font-size: 9px;
    margin-right: 1px;
  }

  /* Chart */
  .lv-chart-wrap {
    background: #FFFFFF;
    border: 1px solid #E2E2E2;
    padding: 10px 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 200px;
  }

  .lv-chart-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 6px;
  }

  .lv-chart-legend {
    display: flex;
    gap: 14px;
    font-size: 10px;
    font-weight: 700;
    color: #333;
  }

  .lv-chart-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #999;
    font-family: 'Inter', sans-serif;
  }

  .lv-chart-tool {
    line-height: 1;
    display: inline-block;
  }

  .lv-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .lv-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
  }

  .lv-chart-svg {
    width: 100%;
    height: auto;
    display: block;
  }

  .lv-axis line {
    stroke: #EFEFEF;
    stroke-width: 1;
  }

  .lv-axis text {
    fill: #999;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 600;
  }

  .lv-axis-title {
    fill: #BBB;
    font-family: 'Inter', sans-serif;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .lv-line {
    fill: none;
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
  }

  .lv-line--ses { stroke: #FF2C55; }
  .lv-line--rev { stroke: #1F1F1F; }

  @media (max-width: 1180px) {
    .lv-body { grid-template-columns: 134px 138px minmax(0, 1fr); }
    .lv-kpi-value { font-size: 19px; }
    .lv-kpi-delta-value { font-size: 10px; }
  }

  @media (max-width: 1024px) {
    .lv-grid { grid-template-columns: 1fr; gap: 48px; }
    .lv-body { grid-template-columns: 1fr; min-height: 0; }
    .lv-reports {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 4px;
      padding: 10px;
      border-right: none;
      border-bottom: 1px solid #EAEAEA;
    }
    .lv-reports-head { width: 100%; padding: 4px 4px 6px; }
    .lv-report { padding: 5px 9px; font-size: 10.5px; border-left: none; }
    .lv-report.is-active { border-left: none; }
    .lv-report--sub { margin-top: 0; padding-top: 5px; }
    .lv-filters { border-bottom: 1px solid #333333; }
  }

  @media (max-width: 768px) {
    .lv-section { padding: 60px 20px; }
    .lv-kpis { grid-template-columns: 1fr; }
    .lv-kpi-deltas { grid-template-columns: 1fr 1fr; }
    .lv-chart-svg { font-size: 10px; }
  }

  .why-diff-bullets {
    display: flex;
    flex-direction: column;
    margin-bottom: 48px;
  }

  .why-diff-bullet {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid #E0E0E0;
  }

  .why-diff-bullet:last-child {
    border-bottom: 1px solid #E0E0E0;
  }

  .why-diff-bullet-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
  }
  .why-diff-bullet-icon svg { width: 100%; height: 100%; display: block; }

  .why-diff-bullet-content strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--black);
    display: block;
    margin-bottom: 2px;
    letter-spacing: -0.01em;
  }

  .why-diff-bullet-content span {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
  }

  .ai-terminal {
    background: #0a0a0a;
    color: rgba(255,255,255,0.72);
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'JetBrains Mono', Consolas, 'Courier New', monospace;
    font-size: 13px;
    margin-top: 48px;
    line-height: 1.7;
    border-radius: 8px;
    border: 1px solid #1a1a1a;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
  }

  .ai-terminal-chrome {
    background: #141414;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid #1a1a1a;
  }

  .ai-terminal-dots {
    display: flex;
    gap: 7px;
    flex-shrink: 0;
  }

  .ai-terminal-dots span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
  }

  .ai-terminal-dots span:nth-child(1) { background: #ff5f57; }
  .ai-terminal-dots span:nth-child(2) { background: #febc2e; }
  .ai-terminal-dots span:nth-child(3) { background: #28c840; }

  .ai-terminal-title {
    flex: 1;
    text-align: center;
    font-size: 11px;
    color: rgba(255,255,255,0.42);
    letter-spacing: 0.08em;
    font-family: 'SF Mono', 'Menlo', 'Monaco', Consolas, monospace;
  }

  .ai-terminal-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    flex-shrink: 0;
  }

  .ai-terminal-live::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #28c840;
    box-shadow: 0 0 8px rgba(40,200,64,0.65);
    animation: terminal-pulse 1.8s ease-in-out infinite;
  }

  @keyframes terminal-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.82); }
  }

  .ai-terminal-body {
    padding: 24px 28px 22px;
  }

  .ai-terminal .t-header {
    color: rgba(255,255,255,0.42);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #1a1a1a;
  }

  .ai-terminal .t-line {
    display: block;
    margin-bottom: 6px;
    color: rgba(255,255,255,0.72);
  }

  .ai-terminal .t-line::before {
    content: "›";
    color: var(--red);
    margin-right: 10px;
    font-weight: 700;
  }

  .ai-terminal .t-label {
    color: rgba(255,255,255,0.42);
  }

  .ai-terminal .t-val {
    color: var(--red);
    font-weight: 600;
  }

  .ai-terminal-cursor {
    display: inline-block;
    width: 8px;
    height: 14px;
    background: var(--red);
    vertical-align: text-bottom;
    margin-left: 4px;
    animation: terminal-blink 1.1s steps(2) infinite;
  }

  @keyframes terminal-blink {
    0%, 49.99%   { opacity: 1; }
    50%, 100%    { opacity: 0; }
  }

  /* ── SEE IT IN ACTION PROMPT ────────────────────────── */
  .rev-calc-prompt {
    margin-top: 72px;
    max-width: 640px;
  }
  .rev-calc-prompt h3 {
    font-size: clamp(1.75rem, 3.2vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--black);
    margin: 0 0 12px;
  }
  .rev-calc-prompt p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--muted);
    margin: 0 0 28px;
  }

  /* ── REVENUE LOSS CALCULATOR (LION palette) ─────────── */
  .rev-calc-card {
    background: var(--white);
    border: 1px solid #E0E0E0;
    border-top: 3px solid var(--red);
    border-radius: 4px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(10, 10, 10, 0.06);
  }

  /* Compact variant — used when the calc sits in the why-diff right column */
  .rev-calc-card--inline { padding: 28px; }
  .rev-calc-card--inline .rev-calc-title { font-size: 20px; }
  .rev-calc-card--inline .rev-calc-sub { font-size: 13px; }
  .rev-calc-card--inline .rev-calc-inputs { gap: 14px 16px; margin-bottom: 20px; }
  .rev-calc-card--inline .rev-calc-field input { padding: 12px 14px; font-size: 15px; }
  .rev-calc-card--inline .rev-calc-results { gap: 10px; }
  .rev-calc-card--inline .rev-calc-result { padding: 20px 12px; }
  .rev-calc-card--inline .rev-calc-result-num { font-size: clamp(1.3rem, 2vw, 1.75rem); }
  .rev-calc-card--inline .rev-calc-result-label { font-size: 10px; letter-spacing: 0.10em; }
  .rev-calc-card--inline .rev-calc-formula { font-size: 12px; }
  .rev-calc-card--inline .rev-calc-cta { padding: 14px 22px; font-size: 13px; margin-top: 15px; min-width: 200px; justify-content: center; }
  .rev-calc-head { margin-bottom: 28px; }
  .rev-calc-title {
    font-size: 22px;
    font-weight: 900;
    color: var(--black);
    letter-spacing: -0.02em;
    margin: 0 0 6px;
    text-transform: uppercase;
  }
  .rev-calc-sub {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.55;
    margin: 0;
  }
  .rev-calc-inputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
    margin-bottom: 24px;
  }
  .rev-calc-field { display: flex; flex-direction: column; }
  .rev-calc-field label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: 8px;
  }
  .rev-calc-field input {
    appearance: none;
    -moz-appearance: textfield;
    background: #F4F4F4;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--black);
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  }
  .rev-calc-field input:focus {
    outline: none;
    border-color: var(--red);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(255, 44, 85, 0.12);
  }
  .rev-calc-field input::-webkit-outer-spin-button,
  .rev-calc-field input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .rev-calc-results {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
  }
  .rev-calc-result {
    background: #F4F4F4;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    padding: 28px 18px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .rev-calc-result::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    height: 3px;
    width: 100%;
    background: var(--red);
  }
  .rev-calc-result-num {
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-weight: 900;
    color: var(--red);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
  }
  .rev-calc-result-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.4;
  }

  .rev-calc-formula {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.55;
    margin: 0 0 40px;
  }
  .rev-calc-formula em { font-style: italic; }

  .rev-calc-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: var(--red);
    color: var(--white);
    text-decoration: none;
    padding: 22px 44px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: background 0.15s, transform 0.15s;
  }
  .rev-calc-cta:hover { background: var(--black); transform: translateY(-1px); }
  .rev-calc-cta span { transition: transform 0.15s; }
  .rev-calc-cta:hover span { transform: translateX(3px); }

  /* ── LION FRAMEWORK ──────────────────────────────────── */
  .framework-row {
    display: grid;
    grid-template-columns: 100px minmax(220px, 320px) 1fr;
    align-items: start;
    gap: 48px;
    border-top: 1px solid var(--rule);
    padding: 40px 0;
  }

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

  /* 2x2 layout on wide screens (≥1280px). Inside each cell the row
     becomes a compact 80px | 1fr (number | content stacked) so each
     quadrant has room for the title + body to breathe. */
  @media (min-width: 1280px) {
    .framework-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 120px;
      row-gap: 32px;
      border-top: 1px solid var(--rule);
    }
    .framework-grid > .framework-row {
      grid-template-columns: 100px 1fr;
      gap: 32px;
      padding: 56px 0;
      border-top: 0;
    }
    /* Top border on row 03 + 04 so the second row separates cleanly */
    .framework-grid > .framework-row:nth-child(n+3) {
      border-top: 1px solid var(--rule);
      padding-top: 56px;
    }
    /* Bottom border on both bottom-row cards (03 + 04) to close the block */
    .framework-grid > .framework-row:last-child,
    .framework-grid > .framework-row:nth-last-child(2) {
      border-bottom: 1px solid var(--rule);
    }
  }

  .framework-num {
    font-size: 4.5rem;
    font-weight: 900;
    color: var(--red);
    letter-spacing: -0.05em;
    line-height: 1;
  }

  .framework-content {
    padding-top: 8px;
  }

  .framework-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--black);
    letter-spacing: -0.03em;
    margin-bottom: 4px;
  }

  .framework-subtitle {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0;
  }

  .framework-body {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.75;
    padding-top: 10px;
    max-width: none;
  }

  @media (min-width: 1280px) {
    .framework-row {
      grid-template-columns: 120px minmax(260px, 380px) 1fr;
      gap: 64px;
      padding: 48px 0;
    }
    .framework-num { font-size: 5rem; }
    .framework-title { font-size: 26px; }
    .framework-body { font-size: 17px; }
  }

  /* ── FOUNDER ─────────────────────────────────────────── */
  .founder-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
  }

  .founder-copy h2 {
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin-bottom: 32px;
    color: var(--black);
  }

  .founder-copy p {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 20px;
    max-width: 560px;
  }

  .founder-bullets {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 32px;
  }

  .founder-bullet {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid #E0E0E0;
    font-size: 14px;
    font-weight: 600;
    color: var(--black);
    letter-spacing: -0.01em;
  }

  .founder-bullet:last-child {
    border-bottom: 1px solid #E0E0E0;
  }

  .founder-counter {
    border: 2px solid var(--black);
    padding: 40px;
    text-align: center;
  }

  .founder-counter-num {
    font-size: 6rem;
    font-weight: 900;
    color: var(--red);
    letter-spacing: -0.05em;
    line-height: 1;
    display: block;
    font-variant-numeric: tabular-nums;
  }

  .founder-counter-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: 12px;
    display: block;
    color: var(--black);
    line-height: 1.5;
  }

  .founder-counter-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 8px;
    display: block;
  }

  .founder-portrait {
    position: relative;
    background: linear-gradient(180deg, #1a1a1a 0%, #0A0A0A 100%);
    aspect-ratio: 4 / 5;
  }

  .founder-portrait::after {
    content: '';
    background: url('https://liondigital.com.au/wp-content/themes/liondigital-theme-1/assets/images/Our-Model-icon-svg.svg');
    bottom: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100%;
    pointer-events: none;
  }

  .founder-portrait-section .founder-grid {
    grid-template-columns: 320px 1fr;
    gap: 56px;
    align-items: start;
  }

  .founder-portrait-section .founder-portrait {
    aspect-ratio: 3 / 4;
    max-width: 320px;
  }

  .founder-portrait-section .founder-portrait::before {
    content: "LEO";
    position: absolute;
    top: -10px;
    right: -4px;
    font-size: 160px;
    font-weight: 900;
    letter-spacing: -0.06em;
    color: rgba(255,255,255,0.04);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    z-index: 0;
  }

  .founder-portrait-section .founder-portrait img,
  .founder-portrait-section .founder-portrait-caption { z-index: 1; }

  .founder-portrait-section .founder-copy h2 {
    margin: 16px 0 28px;
  }

  .founder-quote {
    margin: 36px 0 32px;
    padding: 20px 0 20px 28px;
    border-left: 3px solid var(--red);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--black);
    max-width: 560px;
  }

  .founder-portrait-section .founder-bullets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 36px;
    border-top: 1px solid #E0E0E0;
    border-bottom: 1px solid #E0E0E0;
  }

  .founder-portrait-section .founder-bullet {
    padding: 20px 24px 20px 0;
    border-right: 1px solid #E0E0E0;
    border-top: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .founder-portrait-section .founder-bullet:last-child {
    border-right: none;
    border-bottom: none;
    padding-right: 0;
  }

  .founder-portrait-section .founder-bullet:not(:first-child) { padding-left: 24px; }

  .founder-bullet-num {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: var(--red);
    line-height: 1;
  }

  .founder-bullet-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--black);
    letter-spacing: -0.005em;
    line-height: 1.35;
  }

  .founder-portrait-section .founder-counter {
    margin-top: 28px;
    padding: 22px 28px;
    background: var(--black);
    color: var(--white);
    border: none;
    text-align: left;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
  }

  .founder-portrait-section .founder-counter-tag {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    line-height: 1.4;
    display: block;
  }

  .founder-portrait-section .founder-counter-brand {
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--white);
    display: block;
    margin-top: 2px;
  }

  .founder-portrait-section .founder-counter-num {
    font-size: 56px;
    font-weight: 900;
    color: var(--red);
    letter-spacing: -0.05em;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    font-variant-numeric: tabular-nums;
    margin-top: 0;
  }

  .founder-portrait-section .founder-counter-num::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
    animation: founder-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
  }

  .founder-portrait-section .founder-counter-sub {
    font-size: 10.5px;
    color: rgba(255,255,255,0.5);
    line-height: 1.4;
    text-align: right;
    max-width: 130px;
    margin-top: 0;
    display: block;
  }

  @keyframes founder-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(1.4); }
  }

  .founder-portrait img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .founder-portrait-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 28px;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 70%);
    color: var(--white);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
  }

  .founder-portrait-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 6px;
    display: block;
  }

  .founder-portrait-role {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
  }

  .founder-portrait-link {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
  }


  /* ── RESPONSIVE ──────────────────────────────────────── */
  @media (max-width: 1024px) {
    .founder-portrait-section .founder-grid {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .founder-portrait-section .founder-portrait {
      max-width: 280px;
      width: 100%;
    }
    .founder-portrait-section .founder-bullets {
      grid-template-columns: repeat(3, 1fr);
    }
    .founder-portrait-section .founder-bullet {
      padding: 18px 16px 18px 0;
    }
    .founder-portrait-section .founder-bullet:not(:first-child) { padding-left: 16px; }
    .founder-portrait-section .founder-counter {
      grid-template-columns: 1fr auto;
      grid-template-rows: auto auto;
      gap: 6px 24px;
      padding: 22px 24px;
      align-items: center;
    }
    .founder-portrait-section .founder-counter > div:first-child {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
    }
    .founder-portrait-section .founder-counter-num {
      grid-column: 2 / 3;
      grid-row: 1 / 3;
      font-size: 48px;
      align-self: center;
    }
    .founder-portrait-section .founder-counter-sub {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
      text-align: left;
      max-width: none;
      align-self: start;
    }
  }

  @media (max-width: 900px) {
    .results-grid { grid-template-columns: 1fr; }
    .result-item {
      border-right: none;
      border-bottom: 1px solid rgba(255,255,255,0.2);
      padding: 32px 0 !important;
    }
    .result-item:last-child { border-bottom: none; }
  }

  @media (max-width: 768px) {
    .hero { padding: 52px 20px 60px; }
    .hero-deco { font-size: 160px; right: 10px; opacity: 0.05; }
    .hero h1 { font-size: clamp(2.6rem, 10vw, 4rem); }

    .services { padding: 60px 20px; }
    .services-table, .services-table tbody, .services-table tr, .services-table td {
      display: block;
    }
    .svc-num { font-size: 10px; margin-bottom: 4px; }
    .svc-name { width: 100%; padding-right: 0; margin-bottom: 6px; }
    .svc-desc { padding-bottom: 0; }

    .results { padding: 60px 20px; }
    .cta-section { padding: 80px 20px 64px; }
    .cta-section h2 { font-size: clamp(4rem, 18vw, 8rem); }
    .cta-deliverables { grid-template-columns: 1fr 1fr; gap: 12px; }
    .cta-actions { flex-direction: column; gap: 12px; }
    .cta-btn-manifesto, .cta-btn-secondary { width: 100%; justify-content: center; padding: 18px 16px; font-size: 12px; letter-spacing: 0.06em; }
    .cta-trust { flex-direction: column; gap: 12px; }

    .services-table tr:hover { background: none; }

    /* .why-diff mobile padding moved to canonical block at end of file */
    .rev-calc-prompt { margin-top: 48px; }
    .rev-calc-card, .rev-calc-card--inline { padding: 24px; }
    .rev-calc-inputs { grid-template-columns: 1fr; gap: 14px; }
    .rev-calc-results { grid-template-columns: 1fr; gap: 12px; }
    .rev-calc-cta { width: 100%; justify-content: center; }
    /* .lion-framework mobile padding moved to canonical block at end of file */
    /* .founder mobile padding moved to canonical block at end of file */
    .founder-grid { grid-template-columns: 1fr; gap: 48px; }
    .founder-portrait { aspect-ratio: 1 / 1; }
    /* .founder-portrait-section mobile padding moved to canonical block at end of file */
    .founder-portrait-section .founder-portrait::before { font-size: 160px; }
    .founder-portrait-section .founder-bullets { grid-template-columns: 1fr; }
    .founder-portrait-section .founder-bullet {
      border-right: none;
      border-top: 1px solid #E0E0E0;
      padding: 18px 0 !important;
      flex-direction: row;
      align-items: baseline;
      gap: 14px;
    }
    .founder-portrait-section .founder-bullet:first-child { border-top: none; }

    .founder-portrait-section .founder-portrait { max-width: 100%; }
    .founder-portrait-section .founder-portrait::before { font-size: 120px; }
    .founder-portrait-section .founder-copy h2 { font-size: clamp(2rem, 8vw, 2.6rem); margin: 12px 0 20px; }
    .founder-quote {
      font-size: 17px;
      margin: 24px 0 24px;
      padding: 14px 0 14px 18px;
      line-height: 1.35;
    }
    .founder-portrait-section .founder-counter {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto;
      padding: 22px 20px;
      gap: 10px;
      text-align: left;
    }
    .founder-portrait-section .founder-counter > div:first-child {
      grid-column: 1;
      grid-row: 1;
    }
    .founder-portrait-section .founder-counter-num {
      grid-column: 1;
      grid-row: 2;
      font-size: 40px;
      align-self: start;
    }
    .founder-portrait-section .founder-counter-sub {
      grid-column: 1;
      grid-row: 3;
      text-align: left;
      max-width: none;
    }

    .framework-row { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; }
    .framework-num { font-size: 3rem; }
    .framework-body { padding-top: 0; }
  }

  /* ── TESTIMONIALS ────────────────────────────────────── */
  .testimonials {
    padding: 80px 48px;
    background: var(--white);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }

  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 48px;
  }

  .testimonial-item {
    padding: 0 40px 0 0;
    border-right: 1px solid #E8E8E8;
    display: flex;
    flex-direction: column;
  }

  .testimonial-item + .testimonial-item {
    padding-left: 40px;
  }

  .testimonial-item:last-child {
    border-right: none;
  }

  .testimonial-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 18px;
  }

  .testimonial-stars svg {
    width: 16px;
    height: 16px;
    fill: var(--red);
  }

  .testimonial-quote-mark {
    color: var(--red);
    line-height: 1;
    display: inline-block;
    margin-bottom: 14px;
  }

  .testimonial-quote-mark svg {
    width: 36px;
    height: 28px;
  }

  .testimonial-text {
    font-size: 16px;
    font-style: normal;
    color: var(--black);
    line-height: 1.7;
    font-weight: 400;
    margin-bottom: 28px;
    flex: 1;
    letter-spacing: -0.005em;
  }

  .testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 22px;
    border-top: 1px solid #E8E8E8;
  }

  .testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--black);
    color: var(--white);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .testimonial-author-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .testimonial-name {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--black);
    display: block;
    margin-bottom: 2px;
    line-height: 1.3;
  }

  .testimonial-company {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    display: block;
    letter-spacing: 0.01em;
  }

  .testimonial-source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
  }

  .testimonial-source-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4CAF50;
  }

  /* ── CASE STUDIES ────────────────────────────────────── */
  .case-studies {
    padding: 80px 48px;
    background: var(--black);
    border-bottom: 1px solid #222;
  }

  .case-studies .section-label {
    color: rgba(255,255,255,0.4);
  }

  .case-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .case-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 48px 56px;
    border-radius: 4px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a;
    isolation: isolate;
    min-height: 220px;
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }

  a.case-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  }

  .case-row::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.7) 100%);
    z-index: 1;
  }

  .case-row > * { position: relative; z-index: 2; }

  .case-row-logo {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  .case-row-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .case-row-stats {
    display: flex;
    gap: 40px;
    flex: 1;
    flex-wrap: wrap;
  }

  .case-stat-block {
    min-width: 160px;
    max-width: 260px;
  }

  .case-stat-num {
    font-size: clamp(2.25rem, 3.6vw, 3.5rem);
    font-weight: 900;
    color: var(--white);
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 14px;
  }

  .case-stat-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.35;
  }

  .case-row-meta {
    position: absolute;
    top: 24px;
    right: 32px;
    z-index: 2;
    text-align: right;
  }

  .case-tags {
    display: flex;
    gap: 18px;
    justify-content: flex-end;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
  }

  .case-tags span::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2dd4bf;
    margin-right: 7px;
    vertical-align: middle;
    position: relative;
    top: -1px;
  }
  /* Per-category dot colours (matches the case-studies carousel palette). */
  .case-tags span[data-svc="seo"]::before,
  .case-tags span[data-svc="content"]::before,
  .case-tags span[data-svc="authority"]::before      { background: #00f0ff; }
  .case-tags span[data-svc="sem"]::before,
  .case-tags span[data-svc="paid"]::before,
  .case-tags span[data-svc="paid-search"]::before,
  .case-tags span[data-svc="paid-media"]::before     { background: #ffc000; }
  .case-tags span[data-svc="email"]::before          { background: #ff8e3e; }
  .case-tags span[data-svc="klaviyo"]::before        { background: #ff8b00; }
  .case-tags span[data-svc="social"]::before         { background: #a100ff; }
  .case-tags span[data-svc="dev"]::before            { background: #0800b2; }
  .case-tags span[data-svc="seo-migration"]::before  { background: #25f4ee; }
  .case-tags span[data-svc="blended-search"]::before { background: #8fec3d; }
  .case-tags span[data-svc="cro"]::before            { background: #ff2c55; }
  .case-tags span[data-svc="sms"]::before,
  .case-tags span[data-svc="lifecycle"]::before      { background: #ff8e3e; }
  .case-tags span[data-svc="domain-migration"]::before { background: #25f4ee; }

  .case-row-url {
    position: absolute;
    bottom: 28px;
    right: 32px;
    z-index: 2;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  /* ── CASE TILE GRID (image-card layout) ──────────────── */
  .case-tile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
  }

  .case-tile {
    position: relative;
    aspect-ratio: 16 / 11;
    border-radius: 4px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a;
    isolation: isolate;
    cursor: pointer;
    transition: transform 0.4s ease;
  }

  .case-tile:hover { transform: translateY(-4px); }

  .case-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.85) 100%);
    z-index: 1;
  }

  .case-tile-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 36px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .case-tile-stat-num {
    font-size: clamp(3.5rem, 7vw, 6rem);
    font-weight: 900;
    color: var(--red);
    letter-spacing: -0.05em;
    line-height: 0.9;
    margin-bottom: 4px;
  }

  .case-tile-stat-label {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.92);
    line-height: 1.3;
    letter-spacing: 0.01em;
    max-width: 280px;
  }

  .case-tile-logo-emblem {
    position: absolute;
    top: 28px;
    right: 28px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  }

  .case-tile-logo-emblem img {
    max-width: 70%;
    max-height: 70%;
    object-fit: contain;
  }

  .case-tile-brand-name {
    position: absolute;
    top: 32px;
    left: 36px;
    z-index: 2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
  }

  /* ── TEAM ────────────────────────────────────────────── */
  .our-team {
    padding: 80px 48px;
    background: var(--white);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }

  .team-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }

  .team-member {
    padding: 0 32px 0 0;
    border-right: 1px solid #E0E0E0;
  }

  .team-member + .team-member {
    padding-left: 32px;
  }

  .team-member:last-child {
    border-right: none;
  }

  .team-bio {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.55;
    margin-top: 12px;
    display: block;
  }

  /* ── FULL TEAM (specialist grid) ─────────────────────── */
  .full-team {
    padding: 80px 48px;
    background: #fafafa;
    border-bottom: 1px solid var(--rule);
  }

  .full-team-wrapper {
    position: relative;
    margin-top: 48px;
    overflow: hidden;
  }

  .full-team-grid {
    display: flex;
    gap: 32px;
    width: max-content;
    animation: full-team-scroll 60s linear infinite;
    padding: 4px 0 20px;
  }

  .full-team-wrapper:hover .full-team-grid {
    animation-play-state: paused;
  }

  @keyframes full-team-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  .full-team-member {
    flex: 0 0 160px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .full-team-photo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    background: #ececec;
    margin-bottom: 14px;
    flex-shrink: 0;
  }

  .full-team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .full-team-name {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--black);
    display: block;
    margin-bottom: 4px;
    line-height: 1.25;
  }

  .full-team-role {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.4;
    display: block;
  }

  .team-photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: #f0f0f0;
    margin-bottom: 20px;
    flex-shrink: 0;
  }

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

  .team-name {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--black);
    display: block;
    margin-bottom: 6px;
    line-height: 1.2;
  }

  .team-role {
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
    display: block;
    line-height: 1.5;
  }

  /* ── CONTACT FORM SECTION ────────────────────────────── */
  .contact-form-section {
    padding: 80px 48px;
    background: var(--black);
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
  }

  .contact-form-section .section-label {
    color: rgba(255,255,255,0.4);
  }

  .contact-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
  }

  .contact-info-col h3 {
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 900;
    color: var(--white);
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin-bottom: 40px;
  }

  .contact-detail {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .contact-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid #1E1E1E;
    padding-top: 16px;
  }

  .contact-detail-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
  }

  .contact-detail-value {
    font-size: 15px;
    font-weight: 500;
    color: var(--white);
    text-decoration: none;
    transition: color 0.2s;
  }

  .contact-detail-value:hover { color: var(--red); }

  .contact-form-col {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .form-field {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    transition: border-color 0.2s;
  }

  .form-field:focus-within {
    border-bottom-color: var(--red);
  }

  .form-field label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    padding-top: 24px;
    margin-bottom: 4px;
  }

  .form-field input,
  .form-field textarea {
    background: transparent;
    border: none;
    border-bottom: none;
    padding: 12px 0;
    width: 100%;
    font-size: 15px;
    font-family: var(--font);
    font-weight: 400;
    color: var(--white);
    outline: none;
    resize: none;
    caret-color: var(--red);
  }

  .form-field input::placeholder,
  .form-field textarea::placeholder {
    color: rgba(255,255,255,0.5);
  }

  .form-submit {
    display: block;
    width: 100%;
    background: var(--red);
    color: var(--white);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 18px 24px;
    border: none;
    cursor: pointer;
    margin-top: 36px;
    transition: opacity 0.2s;
  }

  .form-submit:hover { opacity: 0.85; }

  /* ── NEW SECTIONS RESPONSIVE ─────────────────────────── */
  @media (max-width: 1024px) {
    .testimonials-grid { grid-template-columns: 1fr; gap: 0; }
    .testimonial-item {
      border-right: none;
      border-bottom: 1px solid #E0E0E0;
      padding: 0 0 40px 0 !important;
    }
    .testimonial-item + .testimonial-item { padding-top: 40px; }
    .testimonial-item:last-child { border-bottom: none; padding-bottom: 0 !important; }

    .team-row { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
    .team-member {
      border-right: none;
      padding: 0 !important;
    }
    .team-member:nth-child(odd) {
      border-right: 1px solid #E0E0E0;
      padding-right: 32px !important;
    }
    .team-member:nth-child(even) {
      padding-left: 32px !important;
    }


    .contact-inner { grid-template-columns: 1fr; gap: 48px; }
  }

  @media (max-width: 768px) {
    .testimonials { padding: 60px 20px; }
    .case-studies { padding: 60px 20px; }
    .case-row { flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px 24px; }
    .case-row-logo { width: 90px; height: 90px; padding: 16px; }
    .case-row-stats { gap: 28px; width: 100%; }
    .case-stat-block { min-width: 140px; }
    .case-row-meta { position: static; text-align: left; margin-bottom: 8px; order: -1; }
    .case-tags { justify-content: flex-start; }
    .case-row-url { position: static; margin-top: 8px; }
    .case-tile-grid { grid-template-columns: 1fr; gap: 16px; }
    .case-tile { aspect-ratio: 4 / 3; }
    .case-tile-content { padding: 24px; }
    .case-tile-logo-emblem { width: 52px; height: 52px; top: 20px; right: 20px; }
    .case-tile-brand-name { top: 24px; left: 24px; }
    .our-team { padding: 60px 20px; }
    .team-row { grid-template-columns: 1fr; gap: 32px; }
    .team-member { border-right: none !important; padding: 0 !important; }
    .full-team { padding: 60px 20px; }
    .full-team-member { flex: 0 0 140px; }
    .full-team-photo { width: 120px; height: 120px; }
    .contact-form-section { padding: 60px 20px; }
  }

/* ──────────────────────────────────────────────────────────────────
   SERVICE WHEEL — donut + orbital ring layout
   The .swheel-stage is a square element. Inside, a dashed-orbit SVG
   and a smaller centered donut SVG share the same square. Orbital
   tiles are CSS-positioned at angles via a rotate-translate-rotate
   trick so each tile keeps its label upright while sitting on the
   ring's circumference.
   ────────────────────────────────────────────────────────────────── */
.swheel {
  background: var(--black);
  color: var(--white);
  padding: 96px 48px;
  border-bottom: 1px solid var(--rule);
}
.swheel-inner { /* full-width, left-aligned to match the rest of the page sections */ }
.swheel-h2 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 8px 0 12px;
  color: var(--white);
}
.swheel-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  max-width: 720px;
  margin: 0 0 60px;
}

.swheel-stage {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 1;
  /* Centred horizontally so left- and right-side orbital labels get
     equal breathing room within the section's 48px padding. The
     heading (.swheel-h2) stays anchored to the section's left
     padding above the stage. */
  margin: 0 auto;
}
@media (max-width: 1100px) {
  .swheel-stage { max-width: 600px; }
}
@media (max-width: 900px) {
  .swheel-stage { max-width: 520px; }
}
@media (max-width: 760px) {
  .swheel-stage { max-width: 100%; }
  /* On mobile, hover-tooltip excerpts can never appear (no :hover on touch)
     and their 240px absolute-positioned bodies push the page scrollWidth
     past the viewport. Hide them outright at small sizes. */
  .swheel-orbit-excerpt { display: none; }
}

.swheel-track,
.swheel-donut {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* The donut occupies the central ~50% of the stage. */
.swheel-donut {
  inset: 25%;
  width: 50%;
  height: 50%;
}
.swheel-donut path { transition: transform 0.18s; transform-origin: 50% 50%; pointer-events: auto; cursor: pointer; }
.swheel-donut a:hover path { transform: scale(1.02); }

/* Donut labels float over the donut centre at percentage coords. */
.swheel-inner-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: clamp(10px, 1vw, 12.5px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.15;
  text-decoration: none;
  white-space: pre-line;
  text-align: center;
  pointer-events: auto;
  max-width: 120px;
  color: var(--white);
  z-index: 2;
}
.swheel-inner-label:hover { opacity: 0.7; }

/* Outer orbital tiles. The orbit element is sized exactly to the icon
   (64×64) and anchored with its CENTRE on the dashed orbit-ring point
   (left/top % from PHP + translate(-50%, -50%)). The label is then
   absolutely positioned to one side of the icon via `swheel-orbit--*`
   modifier classes. This means the icon — not the icon+label group —
   sits on the ring exactly. */
.swheel-orbit {
  position: absolute;
  display: block;
  width: 88px;
  height: 88px;
  transform: translate(-50%, -50%);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  z-index: 2;
}
.swheel-orbit:hover,
.swheel-orbit:focus-within {
  z-index: 100;
}
.swheel-orbit-icon {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  box-shadow: 0 0 0 3px var(--black), 0 10px 26px rgba(0,0,0,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
}
.swheel-orbit-icon svg { width: 38px; height: 38px; display: block; }
.swheel-orbit-icon--img { background: transparent; box-shadow: 0 10px 22px rgba(0,0,0,0.45); }
.swheel-orbit-icon--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  display: block;
}

/* Inner-donut icons sit at the centre of each wedge, behind the label. */
.swheel-inner-icon {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(28px, 4vw, 38px);
  height: clamp(28px, 4vw, 38px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 1;
  pointer-events: none; /* the label / wedge handles clicks */
}
.swheel-inner-icon svg { width: 100%; height: 100%; }
.swheel-inner-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.swheel-inner-label { z-index: 2; }
.swheel-orbit:hover .swheel-orbit-icon {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px var(--black), 0 14px 32px rgba(255,44,85,0.32);
}
.swheel-orbit-label {
  position: absolute;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.2;
  width: 140px; /* fixed width so wrapping is predictable */
}

/* Label sits outside the icon on the appropriate side. */
.swheel-orbit--top .swheel-orbit-label {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 10px;
  text-align: center;
}
.swheel-orbit--bottom .swheel-orbit-label {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 10px;
  text-align: center;
}
.swheel-orbit--right .swheel-orbit-label {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 14px;
  text-align: left;
}
.swheel-orbit--left .swheel-orbit-label {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 14px;
  text-align: right;
}

/* Excerpt tooltip — hidden by default, appears on icon hover.
   Default position is BELOW the icon (below its label too).
   For tiles that sit in the bottom half of the wheel, the
   tooltip flips above the icon (.swheel-orbit--bottom + --left
   tiles whose icons are low). */
.swheel-orbit-excerpt {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 14px;
  transform: translate(-50%, 6px);
  width: 240px;
  padding: 12px 14px;
  background: var(--white);
  color: var(--black);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 10;
}
.swheel-orbit:hover .swheel-orbit-excerpt,
.swheel-orbit:focus-visible .swheel-orbit-excerpt {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto; /* lets the cursor traverse into the tooltip without flicker */
}

/* Central excerpt — lives in the donut hole. Now wraps in a subtle
   dark rounded card so the text reads cleanly even when it slightly
   overlaps the wedge edges. JS toggles data-active on hover. */
.swheel-center-excerpt {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 22%;
  max-width: 200px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.88);
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--white);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 5;
}
.swheel-center-excerpt[data-active="true"] {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Bottom-positioned outer tiles flip the tooltip above the icon so
   it doesn't extend off-canvas. */
.swheel-orbit--bottom .swheel-orbit-excerpt {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 14px;
  transform: translate(-50%, -6px);
}
.swheel-orbit--bottom:hover .swheel-orbit-excerpt,
.swheel-orbit--bottom:focus-visible .swheel-orbit-excerpt {
  transform: translate(-50%, 0);
}

/* Side tiles: tooltip sits CENTRED below the icon (default
   position), not anchored to icon's left/right edge. */
.swheel-orbit--right .swheel-orbit-excerpt,
.swheel-orbit--left  .swheel-orbit-excerpt {
  left: 50%;
  right: auto;
  transform: translate(-50%, 6px);
}
.swheel-orbit--right:hover .swheel-orbit-excerpt,
.swheel-orbit--right:focus-visible .swheel-orbit-excerpt,
.swheel-orbit--left:hover .swheel-orbit-excerpt,
.swheel-orbit--left:focus-visible .swheel-orbit-excerpt {
  transform: translate(-50%, 0);
}

/* UPPER-half tiles (icon above stage centre): tooltip ABOVE icon
   so it doesn't drop into the wheel interior. Combined with the
   side-tile centred-x above, this anchors the tooltip cleanly in
   the clear space outside the donut. */
.swheel-orbit--upper .swheel-orbit-excerpt {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 14px;
  transform: translate(-50%, -6px);
}
.swheel-orbit--upper:hover .swheel-orbit-excerpt,
.swheel-orbit--upper:focus-visible .swheel-orbit-excerpt {
  transform: translate(-50%, 0);
}

/* SR-only flat list — visible only on small viewports where the
   wheel is collapsed. */
.swheel-fallback {
  list-style: none;
  padding: 0;
  margin: 48px 0 0;
  display: none;
  gap: 8px 16px;
  flex-wrap: wrap;
  font-size: 13px;
}
.swheel-fallback a {
  color: var(--white);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  transition: border-color 0.18s, background 0.18s;
}
.swheel-fallback a:hover { border-color: var(--red); background: rgba(255,44,85,0.08); }

/* Smaller breakpoints — the orbital ring stops fitting. Below 760px
   we hide the visual wheel and show the flat tag list instead. */
@media (max-width: 900px) {
  .swheel { padding: 64px 24px; }
  /* .swheel-stage max-width handled in the earlier 900px rule */
  .swheel-orbit { width: 72px; height: 72px; }
  .swheel-orbit-icon { width: 72px; height: 72px; }
  .swheel-orbit-icon svg { width: 30px; height: 30px; }
  .swheel-orbit-label { font-size: 10px; width: 90px; line-height: 1.2; }
  .swheel-inner-label { font-size: 9.5px; max-width: 90px; }
  .swheel-center-excerpt { width: 24%; max-width: 180px; font-size: 10.5px; }

  /* Tablet: side labels overflow horizontally, so reposition them
     vertically. Default for all side/lower tiles → label BELOW icon.
     Override for UPPER tiles → label ABOVE icon (avoid pointing into
     the wheel interior). Top/bottom tiles keep their existing
     vertical position from desktop. */
  .swheel-orbit--left .swheel-orbit-label,
  .swheel-orbit--right .swheel-orbit-label {
    top: 100%;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    margin: 8px 0 0 0;
    text-align: center;
  }
  .swheel-orbit--left.swheel-orbit--upper .swheel-orbit-label,
  .swheel-orbit--right.swheel-orbit--upper .swheel-orbit-label {
    bottom: 100%;
    top: auto;
    margin: 0 0 8px 0;
  }

  /* Side-tile excerpts also re-anchor under the icon (vertical
     stacking, centred horizontally — no more left/right edge anchor). */
  .swheel-orbit--left .swheel-orbit-excerpt,
  .swheel-orbit--right .swheel-orbit-excerpt {
    left: 50%;
    right: auto;
    transform: translate(-50%, 6px);
  }
  .swheel-orbit--left:hover .swheel-orbit-excerpt,
  .swheel-orbit--right:hover .swheel-orbit-excerpt {
    transform: translate(-50%, 0);
  }
}
@media (max-width: 760px) {
  /* Wheel stays visible on mobile — just shrinks. The pill-list
     fallback is hidden so we show the same visual as desktop. */
  .swheel { padding: 56px 16px; }
  .swheel-stage { max-width: 100%; margin-left: 0; }
  .swheel-orbit { width: 48px; height: 48px; }
  .swheel-orbit-icon { width: 48px; height: 48px; }
  .swheel-orbit-icon svg { width: 20px; height: 20px; }
  .swheel-orbit-label { font-size: 9px; width: 72px; line-height: 1.15; }
  .swheel-inner-label { font-size: 8.5px; max-width: 70px; letter-spacing: 0.06em; }
  .swheel-center-excerpt { font-size: 9.5px; max-width: 110px; width: 26%; }
  .swheel-fallback { display: none; }

  /* Mobile: side labels default to BELOW icon. Upper-half tiles
     flip ABOVE so labels don't crowd the wheel interior. */
  .swheel-orbit--left .swheel-orbit-label,
  .swheel-orbit--right .swheel-orbit-label {
    top: 100%;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    margin: 6px 0 0 0;
    text-align: center;
  }
  .swheel-orbit--left.swheel-orbit--upper .swheel-orbit-label,
  .swheel-orbit--right.swheel-orbit--upper .swheel-orbit-label {
    bottom: 100%;
    top: auto;
    margin: 0 0 6px 0;
  }
}

/* ─────────────────────────────────────────────────────────────────
   CANONICAL HOMEPAGE SECTION SPACING
   Single source of truth for section padding + border-bottom rule.
   Replaces 5 inline style="padding: 80px 48px; border-bottom: ..."
   declarations in front-page.php so we can drive responsive gutter
   values from one place — and no !important is needed because we no
   longer have to beat an inline style.
   ────────────────────────────────────────────────────────────── */
.why-diff,
.ai-tech,
.lion-framework,
.founder,
.founder-portrait-section {
  padding: 80px 48px;
  border-bottom: 1px solid var(--rule);
}
.testimonials {
  padding: 80px 0;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 768px) {
  .why-diff,
  .ai-tech,
  .lion-framework,
  .founder,
  .founder-portrait-section {
    padding: 60px 20px;
  }
  .testimonials {
    padding: 60px 0;
  }
}

/* ─────────────────────────────────────────────────────────────────
   SECTION 03 — AI & TECHNOLOGY
   Was a soup of inline styles on .ai-tech-grid + h2 + p + strong.
   All declarations moved here so the section template stays clean.
   ────────────────────────────────────────────────────────────── */
.ai-tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 64px;
  align-items: start;
  margin-top: 32px;
}
.ai-tech h2 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}
.ai-tech h2 span { color: var(--red); }
.ai-tech p:not(.section-label) {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 24px;
}
.ai-tech p:not(.section-label):last-child { margin-bottom: 0; }
.ai-tech strong { color: var(--red); font-weight: 800; }
.ai-tech .ai-terminal { margin-top: 48px; }

/* ─────────────────────────────────────────────────────────────────
   HOMEPAGE TYPOGRAPHY SHARED PATTERNS
   Consolidates the H2 / body-p / sub-eyebrow patterns that were
   duplicated as inline styles across 6+ sections. Selectors are
   scoped per-section so the rules stay self-documenting.
   ────────────────────────────────────────────────────────────── */

/* Pattern A — large H2 (4.5rem max) on light-bg sections */
.why-diff h2,
.our-team h2,
.lion-framework h2 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}
.why-diff h2 span,
.our-team h2 span { color: var(--red); }
.our-team h2 { margin-bottom: 16px; }
.lion-framework h2 { margin-bottom: 8px; }

/* Pattern B — medium H2 (3.4rem max) on dark-bg sections */
.case-studies h2:not(.lv-h2),
.industries-section h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 900;
  color: var(--white);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 12px;
}
.industries-section h2 span { font-style: italic; }
.industries-section h2 + p strong { color: var(--white); }

/* Pattern C — body paragraph (light bg).
   :not() guards keep the .our-team > p selector from clobbering the
   smaller sub-labels and full-team description that also live as
   direct <p> children of .our-team. */
.why-diff-intro-copy p,
.our-team > p:not(.our-team-sublabel):not(.our-team-fulldesc):not(.section-label) {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 24px;
}
.why-diff-intro-copy p:last-child { margin-bottom: 0; }
.our-team > p:not(.our-team-sublabel):not(.our-team-fulldesc):not(.section-label) {
  max-width: 640px;
  margin-bottom: 56px;
}
.why-diff-intro-copy strong { color: var(--red); font-weight: 800; }

/* Pattern D — sub paragraph (dark bg sections) */
.case-studies > p:not(.section-label),
.industries-section > p:not(.section-label) {
  font-size: 15px;
  margin-bottom: 52px;
  line-height: 1.6;
}
.case-studies > p:not(.section-label) { color: rgba(255,255,255,0.4); }
.industries-section > p:not(.section-label) {
  color: rgba(255,255,255,0.85);
  max-width: 720px;
}

/* Pattern E — sub-section eyebrow (uppercase tracking) */
.our-team-sublabel {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.our-team-sublabel--top { margin-bottom: 24px; }
.our-team-sublabel--full { margin: 80px 0 16px; }
.our-team-fulldesc {
  font-size: 15px;
  color: var(--muted);
  max-width: 600px;
  line-height: 1.7;
  margin-bottom: 40px;
}

/* Pattern F — small uppercase eyebrow (built-from-the-inside style) */
.founder-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

/* Pattern G — Lion Framework sub (one-off label-styled descriptor) */
.lion-framework-sub {
  margin-top: 8px;
  margin-bottom: 64px;
  font-size: 12px;
  max-width: 720px;
  line-height: 1.6;
  color: var(--muted);
  font-weight: 400;
}

/* Pattern H — hero CTA microcopy */
.hero-cta-micro {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* Pattern I — "View All Case Studies →" link wrapper */
.case-studies-viewall {
  text-align: right;
  margin-top: 36px;
}
.case-studies-viewall a {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
}

/* Section background images — were inline url(...) declarations */
.our-team {
  background-image: url('https://liondigital.com.au/wp-content/themes/liondigital-theme-1/assets/images/our-teambg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
.case-studies--partnerships-bg {
  background-image: url('https://liondigital.com.au/wp-content/themes/liondigital-theme-1/assets/images/tabcontent-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-color: #252525;
}
.contact-form-section {
  background-image: url('https://liondigital.com.au/wp-content/themes/liondigital-theme-1/assets/images/footer-new-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
}

/* Testimonials inner wrapper that held the section-label */
.testimonials-label-wrap {
  padding: 0 48px;
  margin-bottom: 12px;
}
@media (max-width: 768px) {
  .testimonials-label-wrap { padding: 0 20px; }
}

/* LV dashboard chart legend dots */
.lv-legend-dot--red   { background: #FF2C55; }
.lv-legend-dot--black { background: #1F1F1F; }

/* AI terminal inline-svg sizing (was an inline style on the check icon) */
.t-val svg { display: inline-block; vertical-align: -0.1em; }

/* Hidden services section (deliberately not rendered) */
.services { display: none; }

/* Mobile body font rule now lives sitewide in components.css (was here
   when home.css was the only enqueued stylesheet on the front page). */

/* ─────────────────────────────────────────────────────────────────
   MOBILE SPACING — tighten vertical rhythm at ≤768px so sections
   feel tighter and more appealing on small screens. Overrides only
   the dimensions that read as airy on phones; desktop is unchanged.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Section vertical padding: 60 → 48 (tighter top/bottom) */
  .why-diff,
  .ai-tech,
  .lion-framework,
  .founder,
  .founder-portrait-section {
    padding: 48px 20px;
  }
  .testimonials { padding: 48px 0; }
  .swheel { padding: 48px 20px; }
  .case-studies,
  .case-studies--partnerships-bg,
  .industries-section,
  .lv-section,
  .our-team,
  .contact-form-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .cta-section { padding-top: 56px; padding-bottom: 56px; }

  /* Body paragraph rhythm: 24 → 16 between paragraphs */
  .why-diff-intro-copy p,
  .ai-tech p {
    margin-bottom: 16px;
    line-height: 1.6;
  }
  /* AI-tech grid gap: 64 → 32 on mobile (single-column stack) */
  .ai-tech-grid { gap: 32px; margin-top: 20px; }
  .ai-tech .ai-terminal { margin-top: 24px; }

  /* Section sub paragraphs (dark sections): 52 → 28 */
  .case-studies > p:not(.section-label),
  .industries-section > p:not(.section-label) {
    margin-bottom: 28px;
  }

  /* Our Team — tighten Senior Leadership ↔ Full Team gap (80 → 40) */
  .our-team-sublabel--top { margin-bottom: 16px; }
  .our-team-sublabel--full { margin: 40px 0 12px; }
  .our-team-fulldesc { margin-bottom: 24px; }
  .our-team > p:not(.our-team-sublabel):not(.our-team-fulldesc):not(.section-label) {
    margin-bottom: 32px;
  }

  /* LION Framework sub: 64 → 32 below the descriptor */
  .lion-framework-sub { margin-bottom: 32px; }

  /* Section eyebrows: tighten the gap before the H2 (was 22px+) */
  .section-label { margin-bottom: 14px; }
}

/* Clip the service wheel section on mobile — orbit labels can extend 5-10px
   past the viewport at narrow widths and would otherwise create a tiny
   horizontal scrollbar at the page level. */
@media (max-width: 768px) {
  .swheel { overflow-x: clip; }
}

/* Mobile body-copy size cascade — every body paragraph resolves to 14/1.5
   on phones. Headings, eyebrows, stats and CTAs keep their own sizes.
   Excludes .section-label so section eyebrows stay 10px. */
@media (max-width: 768px) {
  .why-diff-intro-copy p,
  .ai-tech p:not(.section-label),
  .our-team > p:not(.our-team-sublabel):not(.our-team-fulldesc):not(.section-label),
  .case-studies > p:not(.section-label),
  .industries-section > p:not(.section-label),
  .our-team-fulldesc,
  .lion-framework-sub,
  .framework-body,
  .swheel-sub,
  .hero-sub,
  .hero-stat-line,
  .hero-form-sub,
  .hero-cta-micro,
  .rev-calc-sub,
  .rev-calc-card--inline .rev-calc-sub,
  .rev-calc-formula,
  .founder-copy p,
  .partner-hero-desc,
  .lv-features li,
  .cta-desc,
  .cta-sub {
    font-size: 14px;
    line-height: 1.5;
  }
}