/* =========================================================
   CONVERSION ADVANTAGE — WEBSITE UX SYSTEM
   Aesthetic: Nike-inspired (bold, athletic, confident)
   Type: Manrope (display + mono)
   Palette: Ink black + Bone cream + Lemon (#F0FF17)
   ========================================================= */

:root {
  --ink: #000000;
  --ink-2: #141414;
  --ink-3: #1B1B1B;
  --ink-4: #232323;
  --bone: #F5F2EB;
  --bone-2: #E8E4DA;
  --bone-3: #DDD7C5;
  --bone-dim: rgba(245,242,235,0.62);
  --bone-faint: rgba(245,242,235,0.42);
  --bone-ghost: rgba(245,242,235,0.20);
  --lemon: #F0FF17;
  --gradient-brand: linear-gradient(-15.4612deg, #eeba02 0%, #e86b80 25%, #ae00f4 50%, #39c6e9 75%, #21e9aa 100%);
  --lemon-2: #C8DD2C;
  --lemon-dark: #6B7800;
  --lemon-dim: rgba(240,255,23,0.14);
  --lemon-faint: rgba(240,255,23,0.06);
  --rust: #FF5722;
  --rule: rgba(245,242,235,0.10);
  --rule-2: rgba(245,242,235,0.20);
  --display: 'Manrope', sans-serif;
  --mono: 'Manrope', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink); color: var(--bone);
  font-family: var(--display); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }

/* ---- PROTOTYPE CHROME ---- */
.proto-bar { position: sticky; top: 0; z-index: 200; background: var(--ink); border-bottom: 1px solid var(--rule-2); padding: 14px 28px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.proto-brand { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-dim); white-space: nowrap; }
.proto-brand .dot { width: 8px; height: 8px; background: var(--lemon); border-radius: 50%; }
.proto-tabs { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; justify-content: center; }
.proto-tab { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 12px; border-radius: 4px; color: var(--bone-faint); border: 1px solid transparent; transition: all 0.15s; white-space: nowrap; }
.proto-tab:hover { color: var(--bone); border-color: var(--rule-2); }
.proto-tab.active { background: var(--lemon); color: var(--ink); font-weight: 600; }
.proto-tab .num { opacity: 0.5; margin-right: 6px; }
.proto-tab.active .num { opacity: 0.7; }
.proto-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--bone-faint); white-space: nowrap; }

/* ---- PAGE FRAMING ---- */
.page { display: none; }
.page.active { display: block; }
.page-marker { background: var(--ink-2); border-bottom: 1px solid var(--rule); padding: 16px 32px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.page-marker-num { font-family: var(--mono); font-size: 11px; font-weight: 600; background: var(--lemon); color: var(--ink); padding: 4px 10px; border-radius: 3px; letter-spacing: 0.05em; }
.page-marker-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.page-marker-role { font-family: var(--mono); font-size: 10px; color: var(--bone-faint); letter-spacing: 0.15em; text-transform: uppercase; margin-left: auto; }

/* ---- SITE CHROME ---- */
.site-nav { position: sticky; top: 56px; z-index: 100; background: rgba(0,0,0,0.96); backdrop-filter: blur(16px); border-bottom: 1px solid var(--rule); padding: 8px 48px; display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; }
.logo { display: flex; align-items: center; gap: 12px; font-weight: 800; }
.logo-mark { width: 32px; height: 32px; background: var(--lemon); display: grid; place-items: center; font-weight: 800; color: var(--ink); font-size: 17px; border-radius: 50%; font-style: italic; line-height: 1; }
.logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.logo-text strong { font-size: 14px; letter-spacing: -0.01em; font-weight: 800; }
.logo-text span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; color: var(--bone-faint); margin-top: 3px; text-transform: uppercase; }
.logo-svg { flex-shrink: 0; }
.nav-links { display: flex; gap: 28px; justify-self: center; }
.nav-link { font-size: 13px; font-weight: 500; color: var(--bone-dim); padding: 6px 0; }
.nav-link:hover { color: var(--bone); }
.nav-link.has-mega::after { content: ' ↓'; font-size: 9px; opacity: 0.5; }

/* DROPDOWN NAV */
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-item .nav-link { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.nav-item .dropdown-arrow { font-size: 9px; opacity: 0.55; transition: transform 0.2s; }
.nav-item:hover .dropdown-arrow { transform: rotate(180deg); opacity: 1; }
.nav-item .dropdown {
  position: absolute;
  top: calc(100% + 22px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #000000;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 10px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 200;
  box-shadow: 0 18px 56px rgba(0,0,0,0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s, visibility 0s linear 0.18s;
}
.nav-item:hover .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.18s, transform 0.18s, visibility 0s;
}
.nav-item::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -10px;
  right: -10px;
  height: 24px;
  pointer-events: none;
}
.nav-item:hover::after { pointer-events: auto; }
.dropdown-item {
  display: block;
  padding: 15px 20px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  color: #f3f2f6;
  background: #050609;
  border-radius: 6px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
}
.dropdown-item:hover { background: #1d202a; color: #ffffff; }
.nav-phone { font-family: var(--mono); font-size: 12px; color: var(--bone-dim); letter-spacing: 0.04em; }
.nav-cta { background: var(--lemon); color: var(--ink); padding: 11px 18px; font-weight: 700; font-size: 13px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; transition: transform 0.15s; }
.nav-cta:hover { transform: translateX(2px); }
.nav-stripped { padding: 20px 48px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--rule); }
.nav-stripped .back { font-family: var(--mono); font-size: 11px; color: var(--bone-dim); letter-spacing: 0.1em; text-transform: uppercase; }
.nav-stripped .back:hover { color: var(--lemon); }

/* ---- ANNOTATIONS ---- */
.anno { position: relative; }
.anno-tag { position: absolute; top: 16px; right: 16px; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; background: var(--lemon-faint); color: var(--lemon); padding: 5px 10px; border: 1px solid rgba(240,255,23,0.25); z-index: 5; }
.anno-tag.dark { background: rgba(0,0,0,0.05); color: var(--ink); border-color: rgba(0,0,0,0.15); }
.anno-tag .arrow { opacity: 0.6; margin-right: 5px; }

/* ---- SECTION FRAME ---- */
.section { padding: 120px 48px; position: relative; }
.section-bone { background: var(--bone); color: var(--ink); }
.section-bone-2 { background: var(--bone-2); color: var(--ink); }
.section-bone-3 { background: var(--bone-3); color: var(--ink); }
.section-ink2 { background: var(--ink-2); }
.section-ink3 { background: var(--ink-3); }

/* em on light bone backgrounds: lemon yellow is invisible on bone, so use highlighter style.
   This catches h-display em, h-section em, h-block em, and headline em inside .section-bone* */
.section-bone .h-display em,
.section-bone .h-section em,
.section-bone .h-block em,
.section-bone h1 em,
.section-bone h2 em,
.section-bone h3 em,
.section-bone-2 .h-display em,
.section-bone-2 .h-section em,
.section-bone-2 .h-block em,
.section-bone-2 h1 em,
.section-bone-2 h2 em,
.section-bone-2 h3 em,
.section-bone-3 .h-display em,
.section-bone-3 .h-section em,
.section-bone-3 .h-block em,
.section-bone-3 h1 em,
.section-bone-3 h2 em,
.section-bone-3 h3 em {
  background: none;
  color: #5b6172;
  padding: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ==== CREAM ZONES: alternating white / light grey ====
   Applied to cream sections site-wide via .zone-white / .zone-grey classes
   (added to each section). Centered heading / card / CTA zones are white;
   text+image panels alternate. Change the two colours here to re-tone every
   zone at once. */
.zone-white { background: #ffffff !important; }
.zone-grey { background: #f6f7f8 !important; }
/* Highlighted words in headings on cream zones: no yellow box, blue-grey text. */
.zone-white .h-display em, .zone-white .h-section em, .zone-white .h-block em,
.zone-white h1 em, .zone-white h2 em, .zone-white h3 em,
.zone-grey .h-display em, .zone-grey .h-section em, .zone-grey .h-block em,
.zone-grey h1 em, .zone-grey h2 em, .zone-grey h3 em {
  background: none;
  color: #5b6172;
  padding: 0;
}

/* Same treatment for the highlighted phrase inside the text+image panel
   headings (they use an inline yellow span rather than an em). */
.zone-white h3 > span[style*="background: var(--lemon)"],
.zone-grey h3 > span[style*="background: var(--lemon)"] {
  background: none !important;
  color: #5b6172 !important;
  padding: 0 !important;
}

/* ==== ALTERNATING ZONES: challenge pill + CTA links ====
   Challenge labels: gradient pill (same two colours as the heading highlight)
   with the customer quote underneath. CTA links: no underline, boldest
   Manrope (800), brand arrow after the text. */
.challenge-label { margin-bottom: 24px; }
.challenge-pill {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 800;
  font-size: clamp(13px, 1.15vw, 16px);
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(90deg, #f09809 0%, #ff4822 100%);
  padding: 0.95em 2em;
  border-radius: 999px;
}
.challenge-quote {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(11px, 0.95vw, 13px);
  letter-spacing: 0.2em;
  line-height: 1.5;
  color: #828997;
  margin-top: 16px;
}
.cta-link {
  display: inline-flex !important;
  align-items: center;
  gap: 0.75em;
  font-weight: 800 !important;
  border-bottom: 0 !important;
  text-decoration: none !important;
}
.cta-link svg.arrow { width: 0.9em; height: 0.9em; }
/* Large CTA hover: text and arrow grow slightly, arrow nudges right; eases back on hover-off. */
.cta-lg { transform-origin: left center; transition: scale 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
.cta-lg svg.arrow { transition: translate 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
@media (hover: hover) {
  .cta-lg:hover { scale: 1.06; }
  .cta-lg:hover svg.arrow { translate: 5px 0; }
}
@media (prefers-reduced-motion: reduce) { .cta-lg, .cta-lg svg.arrow { transition: none; } }
/* Sentence case, no letter-spacing (capitals are reserved for the small
   overhead labels). Large = text+image panel links; medium = role-card links. */
.cta-lg { font-size: clamp(12px, 1.09vw, 15px) !important; letter-spacing: 0 !important; text-transform: none !important; gap: 0.6em; }
.cta-md { font-size: clamp(13px, 1.05vw, 15px) !important; letter-spacing: 0 !important; text-transform: none !important; gap: 0.6em; }

/* ==== CHALLENGE VISUALS (photo + floating stat cards, animated in) ====
   Positions are percentages of the composite so it scales with its column on
   every screen size (measured from the approved mock-up). Each image is
   embedded once here and reused by every page that shares the block.
   .cv-photo carries the 20px corner radius: reuse it for every challenge
   picture from here on. Animation: fade + slide when first scrolled into
   view (see the "CHALLENGE VISUAL REVEAL" script). Reduced-motion = no motion. */
.challenge-visual { position: relative; width: 100%; aspect-ratio: 1477.3 / 883.4; --bh: 44px; --bv: 100px; }
.cv-mask-v, .cv-mask-h, .cv-box { position: absolute; pointer-events: none; }
.cv-mask-v { left: calc(-1 * var(--bh)); right: calc(-1 * var(--bh)); top: 0; bottom: calc(-1 * var(--bv));
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--bv)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--bv)), transparent 100%); }
.cv-mask-h { inset: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--bh), #000 calc(100% - var(--bh)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--bh), #000 calc(100% - var(--bh)), transparent 100%); }
.cv-box { left: var(--bh); right: var(--bh); top: 0; bottom: var(--bv); }
.cv-photo, .cv-card { position: absolute; background-repeat: no-repeat; }
.cv-photo { border-radius: 20px; background-size: cover; background-position: center; }
.cv-photo-guy { left: 16.138%; top: 0; width: 83.862%; height: 90.468%; background-image: url(/images/e12b197a1d66.jpg); }
.cv-card { background-size: 100% 100%; }
.cv-card-spend { left: 0; top: 25.956%; width: 33.568%; height: 39.984%; }
.cv-card-stack { left: 73.783%; top: 5.581%; width: 24.097%; height: 94.419%; }
.challenge-visual.cv-c2 { aspect-ratio: 881 / 556; }
.challenge-visual.cv-c3 { aspect-ratio: 897 / 575; }
.cv-photo-team { left: 0; top: 0; width: 100%; height: 100%; background-image: url(/images/78e93b70f5fc.jpg); }
.cv-photo-monitor { left: 0; top: 0.174%; width: 53.623%; height: 98.609%; background-image: url(/images/2df1d5e89124.jpg); }
.cv-photo-cro { left: 55.183%; top: 0; width: 44.816%; height: 100%; background-image: url(/images/e5930dda446f.jpg); }
.challenge-visual.cv-c4 { aspect-ratio: 898 / 596; }
.challenge-visual.cv-c5 { aspect-ratio: 800 / 619.5; }
.cv-shot { width: 32.07%; height: 95.13%; top: 0; background-position: top center; }
.cv-shot-1 { left: 0; background-image: url(/images/8d96e68a2cb9.jpg); }
.cv-shot-2 { left: 33.85%; top: 5.03%; height: 94.97%; background-image: url(/images/43735aea89d1.jpg); }
.cv-shot-3 { left: 67.93%; background-image: url(/images/e78f72e3aa7e.jpg); }
.cv-photo-revenue { left: 0; top: 2.99%; width: 59.875%; height: 97.01%; background-image: url(/images/6a4481ba81a4.jpg); }
.cv-card-retention { left: 45.25%; top: 11.37%; width: 41.16%; height: 68.2%; background-image: url(/images/4a30e4acb4ec.png); }
.js .cv-shot.reveal-up:not(.is-in) { transform: translateY(34px); }
@media (max-width: 900px) { .js .cv-shot.reveal-up:not(.is-in) { transform: translateY(22px); } }
.js .reveal.reveal-delay-1 { transition-delay: 0.55s; }
.js .reveal.reveal-delay-2 { transition-delay: 1.1s; }
.js .reveal.cv-shot { transition-duration: 0.8s, 0.9s; }
.js .reveal { opacity: 0; transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; }
.js .reveal-up { transform: translateY(90px); }
.js .reveal-left { transform: translateX(-48px); transition-delay: 0.35s; }
.js .reveal-right { transform: translateX(48px); transition-delay: 0.6s; }
.js .reveal-down { transform: translateY(-48px); transition-delay: 0.6s; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .js .reveal-up { transform: translateY(60px); }
  .challenge-visual { --bh: 16px; --bv: 60px; }
  .js .reveal-left { transform: translateX(-20px); }
  .js .reveal-right { transform: translateX(20px); }
  .js .reveal-down { transform: translateY(-24px); }
  [style*="display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;"] > .challenge-visual { order: -1; }
}
@media (max-width: 900px) {
  .challenge-visual.cv-c2, .challenge-visual.cv-c4 { order: 0; }
}
/* Soft gradient wipe: the image is revealed through a moving 0-100% opacity gradient (no hard edge as it rises). */
.js .cv-wipe {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 33.33%, transparent 66.66%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 33.33%, transparent 66.66%, transparent 100%);
  -webkit-mask-size: 100% 300%; mask-size: 100% 300%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 100%; mask-position: 0 100%;
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-mask-position 1.4s cubic-bezier(0.22, 0.61, 0.36, 1), mask-position 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js .cv-wipe.is-in { -webkit-mask-position: 0 0; mask-position: 0 0; }
@media (prefers-reduced-motion: reduce) { .js .cv-wipe { -webkit-mask-position: 0 0; mask-position: 0 0; transition: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-up, .js .reveal-left, .js .reveal-right, .js .reveal-down { opacity: 1; transform: none; transition: none; }
}

/* ==== HERO ENTRANCE: headline, sub text and result cards fade in at separate times ==== */
.js .hr-item { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; }
.js .hr-h1 { transition-delay: 0.05s; }
.js .hr-lede { transition-delay: 0.3s; }
.js .hr-in .hr-item { opacity: 1; transform: none; }
@media all {
  .js .hr-card { opacity: 0; transform: translateY(56px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; }
  .js .hr-cards > .hr-card:nth-child(2) { transition-delay: calc(var(--hr-base, 0s) + 0.08s); }
  .js .hr-cards > .hr-card:nth-child(3) { transition-delay: calc(var(--hr-base, 0s) + 0.16s); }
  .js .hr-cards > .hr-card:nth-child(4) { transition-delay: calc(var(--hr-base, 0s) + 0.24s); }
  .js .hr-cards > .hr-card:nth-child(5) { transition-delay: calc(var(--hr-base, 0s) + 0.32s); }
  .js .hr-cards > .hr-card:nth-child(1) { transition-delay: var(--hr-base, 0s); }
  .js .hr-cards.hr-in > .hr-card { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hr-item, .js .hr-card { opacity: 1; transform: none; transition: none; }
}
/* ==== PRIMARY CTA PULSE: gentle oscillation on the "Get a specialist audit" pill ====
   Uses the separate `scale` property so the existing hover lift still works. */
@keyframes btn-pulse { 0%, 100% { scale: 1; filter: drop-shadow(0 0 0 rgba(240, 255, 23, 0)); } 50% { scale: 1.045; filter: drop-shadow(0 0 16px rgba(240, 255, 23, 0.35)); } }
.btn-pulse { animation: btn-pulse 2.8s ease-in-out 1.2s infinite; transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); }
.btn-pulse:hover { animation-play-state: paused; transform: scale(1.09); }
/* The general .btn rule (later in the stylesheet) replaced this button's transition with `scale` only,
   so the hover growth (done with `transform`) had no easing and jumped. Restore it with higher specificity. */
.btn.btn-pulse { transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), scale 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); }
@media (prefers-reduced-motion: reduce) { .btn-pulse { animation: none; } }
/* ==== HERO CARD HOVER: cards grow slightly under the mouse and ease back on leave ====
   Uses the separate `scale` property so it never fights the entrance animation.
   The entrance transition delays are dropped once the entrance has finished (.hr-done). */
.hr-card::after { content:""; position:absolute; inset:0; border-radius:inherit; padding:3px; pointer-events:none; z-index:5;
  background: linear-gradient(135deg, #eeba02 0%, #e86b80 30%, #ae00f4 68%, #39c6e9 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity:0; transition: opacity 0.5s ease; }
@media (hover: hover) {
  .hr-card { transition: scale 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
  .js .hr-card.hr-done { transition: scale 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition-delay: 0s; }
  .js .hr-cards > .hr-card.hr-done:nth-child(n) { transition-delay: 0s; }
  .hr-card:hover { scale: 1.035; z-index: 2; cursor: pointer; }
  .hr-card:hover::after { opacity: 1; }
}
/* ==== TRUST STRIP LOGO HOVER: dock-style magnify, neighbours nudge outward ==== */
@media (min-width: 901px) and (hover: hover) {
  .trust-logos-row > div { transition: scale 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), margin 0.35s cubic-bezier(0.25, 0.8, 0.25, 1); }
  .trust-logos-row > div:hover { scale: 1.35; margin: 0 14px; z-index: 2; cursor: pointer; }
  .trust-logos-row > div:hover + div,
  .trust-logos-row > div:has(+ div:hover) { scale: 1.15; margin: 0 6px; }
}
/* ==== SERVICE CARDS BLOCK (09) ==== */
.svc-sec { background:#2b2b44; color:#fff; overflow:hidden; isolation:isolate; }
.svc-bgwrap { position:absolute; inset:0; z-index:-1; display:flex; justify-content:center; overflow:hidden; pointer-events:none; }
.svc-sec { --svc-photo:url(/images/55db0a0edff9.jpg); }
.svc-bg { flex:none; height:100%; aspect-ratio:2400/671; background:var(--svc-photo) center/100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); }
.svc-sec .container { position:relative; }
.svc-sec .h-section { color:#fff; text-align:left; max-width:660px; margin:0; }
.svc-sec .h-section em { background:linear-gradient(90deg,#5e69ec 0%,#27d0c4 100%); -webkit-background-clip:text; background-clip:text; color:#27d0c4; -webkit-text-fill-color:transparent; display:inline-block; padding-bottom:.14em; margin-bottom:-.14em; }
.svc-sec .svc-lede { color:rgba(255,255,255,.9); text-align:left; margin:22px 0 56px; max-width:540px; font-weight:400; }
.svc-card { border-radius:20px; background:#fff; padding:32px 32px 30px; display:flex; flex-direction:column; position:relative; }
.svc-card { transition: scale 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.js .svc-card { opacity: 0; transform: translateY(56px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); }
.js .svc-cards > .svc-card:nth-child(2) { transition-delay: calc(var(--svc-base, 0s) + 0.1s); }
.js .svc-cards > .svc-card:nth-child(3) { transition-delay: calc(var(--svc-base, 0s) + 0.2s); }
.js .svc-cards > .svc-card:nth-child(1) { transition-delay: var(--svc-base, 0s); }
.js .svc-cards.svc-in > .svc-card { opacity: 1; transform: none; }
.js .svc-card.svc-done { transition: scale 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .js .svc-card { opacity: 1; transform: none; transition: none; } }
.svc-card::before { content:""; position:absolute; inset:-6px; border-radius:26px; padding:6px; pointer-events:none;
  background: linear-gradient(135deg, #eeba02 0%, #e86b80 30%, #ae00f4 68%, #39c6e9 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity:0; transition: opacity 0.5s ease; }
@media (hover:hover) {
  .svc-card:hover { scale: 1.035; z-index: 2; cursor: pointer; }
  .svc-card:hover::before { opacity: 1; }
}
.svc-card.dark { background:#343452; }
.svc-ic { width:46px; height:46px; border-radius:5px; background-size:cover; background-position:center; margin-bottom:26px; flex:none; }
.svc-card:not(.dark) .svc-ic { box-shadow:0 0 0 1px #dcdce2; }
.svc-ic-g { background-image:url(/images/6549306e2320.jpg); }
.svc-ic-m { background-image:url(/images/b07fd0782816.jpg); }
.svc-ic-c { background-image:url(/images/a325d7429eae.jpg); }
.svc-card .svc-arrow { position:absolute; top:34px; right:32px; width:22px; height:22px; fill:currentColor; }
.svc-card h3 { font-weight:600; font-size:22px; line-height:1.1; letter-spacing:-0.03em; color:#0d0d14; margin:0 0 12px; }
.svc-card p { font-size:15px; line-height:1.45; color:#6b6b78; flex:1; margin:0 0 26px; }
.svc-card .svc-cta { align-self:flex-end; font-weight:600; font-size:14px; color:#0d0d14; }
.svc-card .svc-cta[href] { text-decoration:none; }
.svc-card .svc-cta[href]::after { content:""; position:absolute; inset:0; border-radius:20px; }
.svc-ic-t { display:grid; place-items:center; background:linear-gradient(135deg,#5e69ec 0%,#27d0c4 100%); }
.svc-ic-t svg { width:26px; height:26px; }
.svc-card.svc-card-static, .svc-card.svc-card-static:hover { cursor:default; }
.svc-card.dark h3, .svc-card.dark .svc-cta { color:#fff; }
.svc-card.dark p { color:rgba(255,255,255,.72); }
@media (max-width:900px) {
  .svc-bgwrap { justify-content:flex-start; align-items:flex-start; }
  .svc-bg { -webkit-mask-image:linear-gradient(180deg,#000 0,#000 60%,transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 60%,transparent 100%); height:520px; margin-left:calc(72vw - 1209px); background-size:100% 100%; }
  .svc-bg { background-image:linear-gradient(180deg,rgba(43,43,68,.6) 0,rgba(43,43,68,.25) 45%,rgba(43,43,68,0) 70%),var(--svc-photo); }
  .svc-card { padding:26px 24px 24px; }
  .svc-card .svc-arrow { top:28px; right:24px; }
}
/* ==== AUDIT 3-STEP CARDS BLOCK (11) ==== */
.aud-sec { background:#2b2b44; color:#fff; overflow:hidden; isolation:isolate; position:relative; }
.aud-sec { --aud-photo:url(/images/ffb761b9b443.jpg); }
.aud-bgwrap { position:absolute; inset:0; z-index:-1; display:flex; justify-content:center; overflow:hidden; pointer-events:none; }
.aud-bg { flex:none; height:100%; aspect-ratio:2400/671; background:var(--aud-photo) center/100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); }
.aud-sec .container { position:relative; }
.aud-sec .h-section { color:#fff; }
.aud-sec .h-section em { font-style:normal; background:linear-gradient(90deg,#f0601b 0%,#c0606a 100%); -webkit-background-clip:text; background-clip:text; color:#c0606a; -webkit-text-fill-color:transparent; display:inline-block; padding-bottom:.05em; margin-bottom:-.05em; }
.aud-sec .lede { color:rgba(255,255,255,.85); }
.aud-card { border-radius:20px; padding:32px; display:flex; flex-direction:column; position:relative; }
.aud-card { transition: scale 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.js .aud-card { opacity: 0; transform: translateY(56px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); }
.js .aud-cards > .aud-card:nth-child(2) { transition-delay: calc(var(--aud-base, 0s) + 0.1s); }
.js .aud-cards > .aud-card:nth-child(3) { transition-delay: calc(var(--aud-base, 0s) + 0.2s); }
.js .aud-cards > .aud-card:nth-child(1) { transition-delay: var(--aud-base, 0s); }
.js .aud-cards.aud-in > .aud-card { opacity: 1; transform: none; }
.js .aud-card.aud-done { transition: scale 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .js .aud-card { opacity: 1; transform: none; transition: none; } }
.aud-card::before { content:""; position:absolute; inset:-6px; border-radius:26px; padding:6px; pointer-events:none;
  background: linear-gradient(135deg, #eeba02 0%, #e86b80 30%, #ae00f4 68%, #39c6e9 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity:0; transition: opacity 0.5s ease; }
@media (hover:hover) {
  .aud-card:hover { scale: 1.035; z-index: 2; cursor: pointer; }
  .aud-card:hover::before { opacity: 1; }
}
.aud-ic { width:69px; height:69px; background-size:contain; background-repeat:no-repeat; background-position:center; margin-bottom:24px; flex:none; }
.aud-card .aud-arrow { position:absolute; top:32px; right:32px; width:22px; height:22px; fill:currentColor; }
.aud-card h4 { font-weight:700; font-size:20px; letter-spacing:-0.015em; color:#fff; margin:0 0 10px; }
.aud-card p { font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.72); flex:1; margin:0 0 20px; }
.aud-cta { align-self:flex-end; font-weight:600; font-size:14px; color:#fff; }
@media (max-width:900px) { .aud-card { padding:26px 24px 24px; } .aud-card .aud-arrow { top:26px; right:24px; } }
/* ==== COMPARISON TABLE (CA vs Full-Service vs In-House) ==== */
.cmp-table { position: relative; background: var(--ink); border: 1.5px solid rgba(255,255,255,0.3); border-radius: 20px; overflow: visible; max-width: 1100px; margin: 0 auto; text-align: left; }
/* comparison section: pure black, and a soft multi-colour glow behind the table (fades in with the table) */
.section.cmp-sec { background: #000000 !important; }
/* subtle office photo behind the whole comparison block: always covers edge to edge at any width, 7% strength */
.section.cmp-sec { isolation: isolate; }
.section.cmp-sec::after, .section.dc-sec::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(/images/064044d1cbf4.webp) center / cover no-repeat; opacity: 0.07; }
.cmp-glow-wrap { position: relative; max-width: 1100px; margin: 0 auto; }
.cmp-glow-wrap::before { content: ""; position: absolute; inset: 24px -14px -34px; border-radius: 40px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, #ea8a4f 0%, #d34596 30%, #a80dec 62%, #6c51ed 100%);
  filter: blur(56px); opacity: 0; }
/* glow breathes: fully off, then up to its peak, then off again (starts once the table has faded in) */
@keyframes cmp-glow-breathe { 0%, 100% { opacity: 0; } 50% { opacity: 0.6; } }
.cmp-glow-wrap:has(.cmp-in)::before, html:not(.js) .cmp-glow-wrap::before { animation: cmp-glow-breathe 6s ease-in-out infinite; }
/* intro: heading, then supporting text, then logo fade down into place */
.js .cmp-intro .h-section, .js .cmp-intro .lede, .js .cmp-intro-logo { opacity: 0; transform: translateY(-32px);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); }
.js .cmp-intro .lede { transition-delay: 0.25s; }
.js .cmp-intro-logo { transition-delay: 0.5s; }
.js .cmp-intro.cmp-intro-in .h-section, .js .cmp-intro.cmp-intro-in .lede, .js .cmp-intro.cmp-intro-in .cmp-intro-logo { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cmp-glow-wrap::before { animation: none !important; opacity: 0.6; }
  .js .cmp-intro .h-section, .js .cmp-intro .lede, .js .cmp-intro-logo { opacity: 1; transform: none; transition: none; }
}
.cmp-glow-wrap > .cmp-table { position: relative; z-index: 1; }
.cmp-head { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; padding: 20px 28px; background: var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; font-weight: 700; color: #fff; align-items: center; }
.cmp-ca-badge { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 4px 6px; }
.cmp-ca-logo { height: 34px; width: auto; flex: none; }
.cmp-ca-arrow { width: 24px; height: 24px; color: #000; flex: none; }
.cmp-col-label { text-align: center; }
.cmp-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; padding: 20px 28px; font-size: 14px; align-items: center; background: #ffffff; }
.cmp-row:nth-of-type(odd) { background: #d2d5dc; }
.cmp-row:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,0.06); }
.cmp-label { font-weight: 600; color: var(--ink); }
.cmp-check, .cmp-cross { display: flex; align-items: center; justify-content: center; }
.cmp-icon { width: 18px; height: 18px; }
.cmp-check .cmp-icon { color: var(--ink); }
.cmp-cross .cmp-icon { color: rgba(0,0,0,0.28); }
.cmp-ca-col { background: var(--ink); position: relative; z-index: 2; }
.cmp-ca-col .cmp-icon { color: var(--lemon); }
@keyframes cmp-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(240,255,23,0); }
  50% { box-shadow: 0 0 18px 3px rgba(240,255,23,0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .cmp-ca-badge, .cmp-ca-col { animation: none; }
}
@media (max-width: 900px) {
  /* fits the screen: no sideways scroll bar */
  .cmp-table { overflow: visible; border-radius: 16px; --cmp-r: 14.5px; }
  .cmp-head, .cmp-row { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1.3fr) minmax(0, 0.85fr) minmax(0, 0.85fr); column-gap: 6px; padding: 16px 10px 16px 14px; }
  .cmp-head { font-size: 9px; letter-spacing: 0.1em; line-height: 1.5; }
  .cmp-row { font-size: 13px; line-height: 1.3; }
  .cmp-ca-badge { padding: 9px 4px; margin: -4px 0; gap: 4px; border-radius: 8px; }
  .cmp-ca-logo { height: 16px; max-width: 100%; }
  .cmp-ca-arrow { width: 8px; height: 8px; }
  .cmp-ca-col { margin: -6px 0; padding: 7px 4px; border-radius: 8px; }
  .cmp-icon { width: 15px; height: 15px; }
}
.js .cmp-table { opacity: 0; transform: translateY(-44px); transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); }
.js .cmp-table.cmp-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .cmp-table { opacity: 1; transform: none; transition: none; }
}
/* ==== QUOTE / CASE-STUDY CARDS (client results grid) ==== */
.qc-heading em { background: linear-gradient(90deg, #c428c8 0%, #765fef 100%); -webkit-background-clip: text; background-clip: text; color: #765fef; -webkit-text-fill-color: transparent; }
.qc-clip { overflow: hidden; }
/* ==== HOME FAQ: black background, quote-card glow, gradient heading + pill, brand arrows ==== */
.faq-heading em { background: linear-gradient(90deg, #eb8a2f 0%, #e5626f 50%, #c43aae 100%); -webkit-background-clip: text; background-clip: text; color: #e5626f; -webkit-text-fill-color: transparent; }
.faq-pill { display: inline-block; padding: 10px 26px; margin-bottom: 22px; border-radius: 999px;
  font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.28em; color: #fff;
  border: 2px solid transparent;
  background: linear-gradient(#000, #000) padding-box, linear-gradient(90deg, #a309f2 0%, #3aabe7 50%, #1ce6a0 100%) border-box; }
/* ==== FINAL CTA (free discovery call): office bg 12%, Lizzy rising from block bottom, gradient pill, brand arrows ==== */
.section.dc-sec { isolation: isolate; overflow: hidden; padding-bottom: 0; }
.section.dc-sec::after { opacity: 0.12; }
.dc-grid { align-items: stretch !important; }
.dc-photo { align-self: end; display: flex; justify-content: center; }
.dc-lizzy { width: 100%; max-width: 500px; aspect-ratio: 700 / 797; background: url(/images/6e3c109b9e09.webp) center bottom / contain no-repeat; }
.dc-copy { align-self: center; padding: 20px 0 100px; }
.dc-arrow { width: 10px; height: 10px; color: var(--lemon); margin-top: 5px; justify-self: center; }
@media (max-width: 900px) {
  .dc-photo { order: 2; }
  .dc-copy { padding: 0; }
  .dc-lizzy { max-width: 340px; }
}
/* Final CTA entrance: Lizzy fades up from the block bottom, copy fades/slides in one after another */
.js .dc-sec .dc-lizzy { opacity: 0; translate: 0 60px; transition: opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), translate 1.2s cubic-bezier(0.22, 0.61, 0.36, 1); }
.js .dc-sec .dc-a { opacity: 0; translate: 0 26px; transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), translate 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); }
.js .dc-sec .dc-copy > .dc-a:nth-child(1) { transition-delay: 0.15s; }
.js .dc-sec .dc-copy > .dc-a:nth-child(2) { transition-delay: 0.3s; }
.js .dc-sec .dc-copy > .dc-a:nth-child(3) { transition-delay: 0.45s; }
.js .dc-sec .dc-list > .dc-a:nth-child(1) { transition-delay: 0.6s; }
.js .dc-sec .dc-list > .dc-a:nth-child(2) { transition-delay: 0.72s; }
.js .dc-sec .dc-list > .dc-a:nth-child(3) { transition-delay: 0.84s; }
.js .dc-sec .dc-btns { transition-delay: 1s; }
.js .dc-sec.dc-in .dc-lizzy, .js .dc-sec.dc-in .dc-a { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .js .dc-sec .dc-lizzy, .js .dc-sec .dc-a { opacity: 1; translate: none; transition: none; } }
@media (max-width: 900px) {
  .dc-copy { text-align: center; }
  .dc-copy .dc-list { width: fit-content; max-width: 100%; margin-left: auto !important; margin-right: auto !important; text-align: left; }
  .dc-copy .dc-btns { justify-content: center; }
}
/* ==== GOOGLE REVIEWS TRUST SIGNAL (reusable) ====
   The badge (gradient halo + white G disc) sits on the block's top edge and breaks out over
   whatever block is above. The section is lifted to its own layer (z-index) so the badge always
   paints on top; only the top half of the halo shows, like it's rising out from behind the block. */
.section.greviews-sec { position: relative; z-index: 5; overflow: visible; text-align: center; color: #fff;
  padding: 150px 48px 110px;
  background: linear-gradient(115deg, #eca80c 0%, #e87c38 32%, #e25e64 62%, #c22fb2 100%); }
.greviews-badge { position: absolute; left: 50%; top: 0; width: 0; height: 0; z-index: 6; pointer-events: none; }
.greviews-halo { position: absolute; left: -150px; bottom: 0; width: 300px; height: 150px; overflow: hidden; }
.greviews-halo svg { display: block; width: 300px; height: 300px; }
/* halo spins behind the G disc; viewBox is centred exactly on the circle so it turns without any wobble */
.greviews-halo svg { transform-origin: 50% 50%; animation: greviews-spin 4s linear infinite; will-change: transform; }
@keyframes greviews-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .greviews-halo svg { animation: none; } }
.greviews-disc { position: absolute; left: -80px; top: -80px; width: 160px; height: 160px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.18); }
.greviews-disc svg { width: 70px; height: 70px; display: block; }
.greviews-body { position: relative; z-index: 1; }
/* Whatever block sits above gets extra bottom room so the badge overlaps its background, never its content */
.section:has(+ .greviews-sec) { padding-bottom: 190px; }
.greviews-stars { color: #f3ff14; font-size: 34px; letter-spacing: 0.12em; line-height: 1; margin-bottom: 26px; }
/* stars shimmer: a soft white highlight sweeps across all five, then rests */
.greviews-stars { background: linear-gradient(105deg, #f3ff14 0%, #f3ff14 36%, #ffffff 50%, #f3ff14 64%, #f3ff14 100%) 0 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: greviews-shimmer 3.2s cubic-bezier(0.45, 0, 0.35, 1) infinite; filter: drop-shadow(0 0 6px rgba(243,255,20,0.25)); }
@keyframes greviews-shimmer { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .greviews-stars { animation: none; } }
.greviews-score { font-size: clamp(56px, 6.2vw, 92px); font-weight: 500; letter-spacing: -0.035em; line-height: 1; margin: 0 0 20px; color: #fff; }
.greviews-meta { font-size: clamp(15px, 1.35vw, 19px); color: rgba(255,255,255,0.95); margin: 0 0 40px; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; }
.greviews-sep { opacity: 0.8; }
.greviews-link { display: inline-block; color: #fff; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; text-decoration: none; }
.greviews-link:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) {
  .section.greviews-sec { padding: 110px 20px 72px; }
  .greviews-halo { left: -105px; width: 210px; height: 105px; }
  .greviews-halo svg { width: 210px; height: 210px; }
  .greviews-disc { left: -56px; top: -56px; width: 112px; height: 112px; }
  .greviews-disc svg { width: 48px; height: 48px; }
  .greviews-stars { font-size: 26px; margin-bottom: 20px; }
  .greviews-meta { flex-direction: column; gap: 4px; }
  .greviews-sep { display: none; }
  .section:has(+ .greviews-sec) { padding-bottom: 130px; }
}
/* ==== FOOTER: yellow newsletter band + inverted black footer with animated logo and triple arrow ==== */
.nl-sec { background: var(--lemon); color: #000; padding: 44px 48px; }
.nl-inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.nl-title { font-weight: 800; font-size: clamp(28px, 2.9vw, 42px); line-height: 1.1; letter-spacing: -0.025em; color: #000; margin: 0 0 8px; }
.nl-sub { font-size: clamp(15px, 1.3vw, 19px); color: #000; margin: 0; }
.nl-form { flex: 0 1 620px; display: flex; align-items: center; gap: 16px; border: 5px solid transparent; border-radius: 999px; padding: 8px 30px 8px 34px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #eca80c 0%, #e25e64 28%, #a309f2 60%, #3aabe7 82%, #1ce6a0 100%) border-box; }
.nl-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--display); font-size: 19px; color: #000; padding: 12px 0; }
.nl-form input::placeholder { color: #9b9b9b; }
.nl-form button { display: inline-flex; align-items: center; gap: 14px; border: 0; background: transparent; cursor: pointer; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; color: #000; padding: 0; }
.nl-form button svg { width: 0.75em; height: 0.75em; color: #000; transition: translate 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); }
@media (hover: hover) { .nl-form button:hover svg { translate: 4px -4px; } }
.section.ft-sec { background: #000; color: #fff; }
.ft-brand { display: flex; flex-direction: column; align-items: flex-start; }
.ft-logo { display: block; margin-bottom: 22px; }
.ft-logo .logo-svg { width: 200px; height: auto; display: block; }
.ft-note { font-size: 13.5px; color: #fff; margin: 0; }
.ft-triple { width: 50px; height: 52px; margin-top: auto; padding-top: 40px; box-sizing: content-box; align-self: flex-end; margin-right: 28px; }
@media (max-width: 900px) {
  .nl-sec { padding: 40px 20px; }
  .nl-inner { flex-direction: column; align-items: stretch; gap: 24px; text-align: center; }
  .nl-form { flex: none; width: 100%; padding: 4px 20px 4px 24px; box-sizing: border-box; }
  .nl-form input { font-size: 16px; }
  .nl-form button { font-size: 17px; gap: 10px; }
  .section.ft-sec { padding-top: 60px !important; }
  .ft-triple { align-self: flex-start; margin-right: 0; padding-top: 24px; width: 40px; height: 42px; }
}
/* ==== ANNOTATION TAG TOGGLE (prototype only): button in the top bar, or press T ==== */
.tags-toggle { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(240,255,23,0.4); background: rgba(240,255,23,0.08); color: var(--lemon); cursor: pointer; white-space: nowrap; flex: none; }
.tags-toggle-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lemon); }
html.tags-off .tags-toggle { border-color: rgba(255,255,255,0.2); background: transparent; color: rgba(255,255,255,0.55); }
html.tags-off .tags-toggle-dot { background: transparent; border: 1px solid rgba(255,255,255,0.55); box-sizing: border-box; }
html.tags-off .anno-tag { display: none !important; }
/* ==== MOBILE NAV: logo centred, hamburger stays left, nav tag lifted out of the layout ==== */
@media (max-width: 900px) {
  nav.site-nav { grid-template-columns: 40px 1fr 40px !important; column-gap: 0 !important; align-items: center; position: sticky; }
  .site-nav > .nav-hamburger { grid-column: 1; grid-row: 1; }
  .site-nav > .logo { grid-column: 2; grid-row: 1; justify-self: center; margin: 0; }
  .site-nav > .anno-tag { position: absolute; top: 4px; right: 12px; margin: 0; z-index: 2; max-width: 60%; }
}
/* ==== HERO AWARD PILL on mobile: one neat line — text scales with screen width instead of wrapping ==== */
@media (max-width: 900px) {
  .badge-award { font-size: clamp(6.5px, calc((100vw - 92px) / 35), 11px) !important; letter-spacing: 0.06em !important; padding: 9px 14px !important; gap: 7px !important; max-width: 100%; box-sizing: border-box; }
  .badge-award .badge-award-cycle, .badge-award .badge-award-cycle .badge-award-line { white-space: nowrap !important; }
  .badge-award-icon { flex: none; width: 11px; height: 13px; background-size: contain; background-repeat: no-repeat; }
}
/* ==== QUOTE CARDS GLOW ENTRANCE: black behind the cards first, then the gradient fades in and grows ==== */
.js .qc-glow-anim::before { opacity: 0; scale: 0.7; transition: opacity 1.8s cubic-bezier(0.22, 0.61, 0.36, 1), scale 2.2s cubic-bezier(0.22, 0.61, 0.36, 1); }
.js .qc-glow-anim.qc-glow-in::before { opacity: 1; scale: 1; }
@media (prefers-reduced-motion: reduce) { .js .qc-glow-anim::before { opacity: 1; scale: 1; transition: none; } }
/* ==== SCROLL ENTRANCES: Google reviews block + newsletter band ==== */
.js .greviews-sec .greviews-badge { opacity: 0; scale: 0.6; transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), scale 1s cubic-bezier(0.34, 1.4, 0.64, 1); }
.js .greviews-sec .greviews-body > * { opacity: 0; translate: 0 26px; transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), translate 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); }
.js .greviews-sec .greviews-body > :nth-child(1) { transition-delay: 0.3s; }
.js .greviews-sec .greviews-body > :nth-child(2) { transition-delay: 0.45s; }
.js .greviews-sec .greviews-body > :nth-child(3) { transition-delay: 0.6s; }
.js .greviews-sec .greviews-body > :nth-child(4) { transition-delay: 0.75s; }
.js .greviews-sec.gv-in .greviews-badge { opacity: 1; scale: 1; }
.js .greviews-sec.gv-in .greviews-body > * { opacity: 1; translate: 0 0; }
.js .nl-sec .nl-copy > *, .js .nl-sec .nl-form { opacity: 0; translate: 0 22px; transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), translate 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); }
.js .nl-sec .nl-copy > :nth-child(2) { transition-delay: 0.15s; }
.js .nl-sec .nl-form { transition-delay: 0.3s; }
.js .nl-sec.nl-in .nl-copy > *, .js .nl-sec.nl-in .nl-form { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .js .greviews-sec .greviews-badge, .js .greviews-sec .greviews-body > *, .js .nl-sec .nl-copy > *, .js .nl-sec .nl-form { opacity: 1; scale: 1; translate: none; transition: none; }
}
/* ==== HOME HERO on mobile: gap from nav to award pill matches the gap from the buttons to the cards (72px) ==== */
@media (max-width: 900px) { .section.hero-glow-arrows { padding-top: 72px !important; --hg-w: 760px; --hg-h: 620px; --hg-y: -22%; } }
/* ==== HERO GLOW SUNRISE: the colour glow rises from above the top edge and settles, timed with the result cards ==== */
@property --hg-rise { syntax: '<number>'; inherits: true; initial-value: 1; }
.js .section.hero-glow-arrows { --hg-rise: 0; transition: --hg-rise 3s cubic-bezier(0.2, 0.65, 0.3, 1); }
.js .section.hero-glow-arrows.hg-up { --hg-rise: 1; }
/* once risen, the glow slowly drifts between the two palettes: orange/purple <-> pink/blue (centre and middle on different clocks so it feels alive) */
@property --hg-c1 { syntax: '<color>'; inherits: true; initial-value: rgba(255, 108, 28, 0.7); }
@property --hg-c2 { syntax: '<color>'; inherits: true; initial-value: rgba(80, 1, 127, 0.49); }
.js .section.hero-glow-arrows.hg-up { animation: hg-c1-drift 9s ease-in-out 1.5s infinite alternate, hg-c2-drift 7s ease-in-out 2.5s infinite alternate; }
@keyframes hg-c1-drift { from { --hg-c1: rgba(255, 108, 28, 0.7); } to { --hg-c1: rgba(255, 71, 245, 0.7); } }
@keyframes hg-c2-drift { from { --hg-c2: rgba(80, 1, 127, 0.49); } to { --hg-c2: rgba(27, 45, 148, 0.49); } }
@media (prefers-reduced-motion: reduce) { .js .section.hero-glow-arrows { --hg-rise: 1; transition: none; animation: none; } }
/* ==== DESKTOP NAV BAR: the annotated nav was sitting 56px low (leaving a thick black band above the logo).
   Make it sit flush like every other page, and keep the hero exactly where it was underneath. ==== */
@media (min-width: 901px) { .site-nav.anno { position: sticky; margin-bottom: -56px; } }
/* ==== HOME HERO SUB TEXT: first sentence on its own line (desktop), with a white sweep passing through it ==== */
@media (min-width: 901px) {
  .hero-lede-2 { max-width: 900px !important; }
  .hero-lede-2 .lede-shine, .hero-lede-2 .lede-rest { display: block; white-space: nowrap; }
}
.hero-lede-2 { --lede-grey: rgba(245, 242, 235, 0.62); }
.hero-lede-2 .lede-shine { background: linear-gradient(100deg, var(--lede-grey) 0%, var(--lede-grey) 30%, #ffffff 45%, #ffffff 55%, var(--lede-grey) 70%, var(--lede-grey) 100%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: lede-sweep 6s cubic-bezier(0.45, 0, 0.35, 1) 2s infinite; }
@keyframes lede-sweep { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .hero-lede-2 .lede-shine { animation: none; } }
/* ==== CHALLENGE PANELS on mobile/tablet: pill + text first, image last, in every challenge ==== */
@media (max-width: 900px) {
  [style*="grid-template-columns: 1fr 1fr"] > .challenge-visual, .challenge-visual.cv-c2, .challenge-visual.cv-c4 { order: 2 !important; }
}
/* ==== TRUST LOGOS on phones: tidy 4-across grid so no logo is left on its own ==== */
@media (max-width: 600px) {
  .trust-logos-row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 14px !important; row-gap: 28px !important; justify-items: center; align-items: center; }
  .trust-logos-row > div { max-width: 100%; }
}
/* ==== FOOTER on phones: brand block centred, Information + Services side by side ==== */
@media (max-width: 560px) {
  footer.site-footer { grid-template-columns: 1fr 1fr !important; column-gap: 20px !important; }
  footer.site-footer > .ft-brand { grid-column: 1 / -1; align-items: center; text-align: center; }
  footer.site-footer > .ft-brand .ft-triple { align-self: center; }
  footer.site-footer > div:nth-child(5) { grid-column: 1 / -1; order: 10; } footer.site-footer > div:nth-child(6) li { overflow-wrap: anywhere; }
}
/* ==== EBOOK HERO: real cover image, homepage glow backdrop, staggered entrance ==== */
.ebook-cover { position: relative; width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: 1000 / 1015; background: url(/images/31786ce7fc2d.webp) center / contain no-repeat; }
/* colour version sits exactly on top and fades in ~0.5s after the black & white cover has landed */
.ebook-cover::after { content: ""; position: absolute; inset: 0; background: url(/images/34fa88998abe.webp) center / contain no-repeat; opacity: 1; }
.js .ebook-hero .ebook-cover::after { opacity: 0; transition: opacity 1.6s cubic-bezier(0.45, 0, 0.25, 1) 1.45s; }
.js .ebook-hero.hr-in .ebook-cover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .ebook-hero .ebook-cover::after { opacity: 1; transition: none; } }
.js .ebook-hero .ebook-cover { transition-delay: 0.15s; }
.js .ebook-hero .ebook-list { transition-delay: 0.45s; }
.js .ebook-hero .ebook-ctas { transition-delay: 0.6s; }
/* ==== DOT-POINT ARROWS: small yellow brand arrow replaces the old diamond bullets site-wide ==== */
.dot-arrow { width: 10px; height: 10px; color: var(--lemon); flex-shrink: 0; margin-top: 0.42em; justify-self: center; display: block; }
/* ==== EBOOK HERO GLOW: same colour cluster, moved to the left behind the cover and sweeping in sideways; falls off to black around the text ==== */
.section.ebook-hero { --hg-x: 20%; --hg-y: 58%; --hg-w: 1050px; --hg-h: 900px; --hg-dx: 45%; --hg-dy: 0%; }
@media (max-width: 900px) { .section.ebook-hero { --hg-x: 20%; --hg-y: 62%; --hg-w: 820px; --hg-h: 760px; --hg-dx: 60%; --hg-dy: 0%; } }
/* ==== EBOOK HERO on mobile: pill, heading, text + bullets first, then the cover, then the buttons ==== */
@media (max-width: 900px) {
  .ebook-hero .ebook-copy { display: contents; }
  .ebook-hero .ebook-copy > * { order: 1; }
  .ebook-hero .ebook-copy > .faq-pill { justify-self: center; }
  .ebook-hero .ebook-copy > * { text-align: center; margin-left: auto !important; margin-right: auto !important; }
  .ebook-hero .ebook-copy > .ebook-list { width: fit-content; max-width: 100%; text-align: left; }
  .ebook-hero .ebook-copy > .ebook-ctas { justify-content: center; }
  .ebook-hero .ebook-cover { max-width: 340px; }
  .ebook-hero [style*="grid-template-columns: 1fr 1.2fr"] { row-gap: 0 !important; }
  .ebook-hero .ebook-copy > .lede { margin-top: 20px !important; }
  .ebook-hero .ebook-cover { margin: 32px auto 28px !important; }
  .ebook-hero .ebook-cover { order: 2; margin: 8px auto 4px; }
  .ebook-hero .ebook-copy > .ebook-ctas { order: 3; }
  .ebook-hero .ebook-list { margin-bottom: 0 !important; }
}
/* ==== PAIRED BUTTONS: buttons that sit side by side share one width (set by JS = widest of the pair) ==== */
.btn-pair > .btn { justify-content: center; text-align: center; box-sizing: border-box; }
/* ==== DISCOVERY CALL TEAM HEADSHOTS: one picked at random on every page load (names = keys used by the JS list) ==== */
.dc-lizzy.dc-p-member-1, .au-girl.dc-p-member-1 { background-image: url(/images/039fd0ac6cfd.webp); }
.dc-lizzy.dc-p-member-2 { background-image: url(/images/bb67c7843fdf.webp); }
.dc-lizzy.dc-p-kirsten, .au-girl.dc-p-kirsten { background-image: url(/images/28e714929098.webp); }
.dc-lizzy.dc-p-member-4, .au-girl.dc-p-member-4 { background-image: url(/images/9855ac85d818.webp); }
.dc-lizzy.dc-p-member-5, .au-girl.dc-p-member-5 { background-image: url(/images/8b437d7853c6.webp); }
.dc-lizzy.dc-p-member-6 { background-image: url(/images/8445e7d2cbe4.webp); }
.dc-lizzy.dc-pick { aspect-ratio: 800 / 828; }
/* FAQ questions: wrapped lines stay indented past the arrow; keep a gap before the + */
.faq-sec details > summary { gap: 16px; align-items: flex-start; }
.faq-sec details > summary > span:first-child { display: flex; align-items: flex-start; }
.faq-sec details > summary .faq-arrow { margin-top: 0.42em; }
/* ==== EBOOK SIGN-UP FORM: rounded #29293f card, rounded fields, full-width CTA, privacy line below ==== */
.ebf-sec .faq-pill { margin-bottom: 26px; }
.ebf-sub { margin: 22px auto 0; font-size: clamp(15px, 1.3vw, 18px); color: #fff; }
.ebf-card { background: #29293f; border: 1px solid #45484c; border-radius: 20px; padding: 48px 48px 44px; max-width: 1100px; margin: 0 auto; text-align: left; }
.ebf-card .field { margin-bottom: 22px; }
.ebf-card .field label { display: block; color: #fff; opacity: 0.9; margin-bottom: 10px; }
.ebf-card .field input, .ebf-card .field select, .ebf-card .field textarea {
  width: 100%; box-sizing: border-box; background: #29293f; color: #fff; border: 1px solid #8a8d96 !important; border-radius: 12px;
  padding: 14px 16px; font-size: 16px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.ebf-card .field select { appearance: none; -webkit-appearance: none; padding-right: 44px;
  background: #29293f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") right 18px center / 12px 8px no-repeat; }
.ebf-card .field textarea { min-height: 140px; }
.ebf-card .field input:focus, .ebf-card .field select:focus, .ebf-card .field textarea:focus { border-color: var(--lemon) !important; box-shadow: 0 0 0 3px rgba(240,255,23,0.12); }
.ebf-submit { margin-top: 36px; }
.ebf-submit .btn { width: 100%; justify-content: center; box-sizing: border-box; }
.ebf-privacy { text-align: center; margin: 28px 0 0; font-size: 15px; color: #fff; opacity: 0.9; }
@media (max-width: 900px) {
  .ebf-card { padding: 28px 20px; }
  .ebf-card > div[style*="grid-template-columns: 1fr 1fr"] { gap: 0 !important; }
}
/* ==== FINAL-PAGE CTA: brand arrow after the headline + warm gradient glow rising along the bottom edge ==== */
.fcta-sec { position: relative; overflow: hidden; isolation: isolate; background: #000; }
.fcta-sec > .container-tight { position: relative; z-index: 1; }
.fcta-arrow { display: inline-block; height: 0.71em; width: 0.71em; color: var(--lemon); margin-left: 0.14em; vertical-align: baseline; }
.fcta-sec::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 75%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 100% at 12% 100%, rgba(255,108,28,0.38) 0%, rgba(255,108,28,0) 70%),
    radial-gradient(55% 100% at 52% 100%, rgba(160,40,200,0.42) 0%, rgba(160,40,200,0) 72%),
    radial-gradient(55% 100% at 92% 100%, rgba(80,60,220,0.42) 0%, rgba(80,60,220,0) 72%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 25%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, #000 25%, transparent 100%); }
.js .fcta-sec::after { opacity: 0; translate: 0 40%; transition: opacity 1.8s cubic-bezier(0.22, 0.61, 0.36, 1), translate 2.2s cubic-bezier(0.22, 0.61, 0.36, 1); }
.js .fcta-sec.fcta-in::after { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .js .fcta-sec::after { opacity: 1; translate: none; transition: none; } }
/* EBOOK cover: flashing FREE DOWNLOAD pill sits in the clear space between the intro text and the Paid Ads / Strategy cards; appears as the colour cover fades in */
.ebook-cover .ebook-badge { left: 26.5%; top: 57.3%; z-index: 3; }
.js .ebook-hero .ebook-badge { opacity: 0; transition: opacity 0.9s ease 2.4s; }
.js .ebook-hero.hr-in .ebook-badge { opacity: 1; }
@media (max-width: 900px) { .ebook-cover .ebook-badge { left: 26.5%; top: 58%; } }
/* White-text gradient pills: see-through centre (gradient ring drawn with a mask instead of a solid black fill) */
.faq-pill { position: relative; background: none !important; border-color: transparent; }
.faq-pill::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: linear-gradient(90deg, #a309f2 0%, #3aabe7 50%, #1ce6a0 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* ==== CASE STUDIES CAROUSEL: full-bleed slides, subdued storefront bg, blue/purple glow sweeping in from the right,
   gradient pills, rounded hero photo, frosted stat bar, round arrow buttons ==== */
.csx { position: relative; margin: 0 calc(50% - 50vw); width: 100vw; }
.csx-track { display: flex; gap: var(--csx-gap); will-change: transform; transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1); touch-action: pan-y; }

.csx-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; overflow: hidden; isolation: isolate; background: #05060b; }
.csx-bg { position: absolute; inset: 0; z-index: -2; }
.csx-slide.csx-has-bg .csx-bg, .csh-bg.csh-img { background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.6) 100%), url(/images/c96d1b67095b.webp) left center / cover no-repeat; opacity: 0.42; }
.csx-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 90% at 100% 15%, rgba(58,171,231,0.55) 0%, rgba(27,45,148,0.55) 35%, rgba(27,45,148,0) 72%),
              radial-gradient(55% 80% at 95% 100%, rgba(80,1,127,0.6) 0%, rgba(80,1,127,0) 70%),
              linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.85) 100%);
  opacity: 0; translate: 18% 0; transition: opacity 1.6s cubic-bezier(0.22, 0.61, 0.36, 1), translate 2s cubic-bezier(0.22, 0.61, 0.36, 1); }
.csx-slide.is-in .csx-glow { opacity: 1; translate: 0 0; }
.csx-inner { max-width: 1240px; margin: 0 auto; padding: 72px 48px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; min-height: 600px; box-sizing: border-box; }
.csx-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.csx-pill { position: relative; display: inline-block; padding: 8px 16px; border-radius: 999px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; }
.csx-pill::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: linear-gradient(90deg, #f1980d 0%, #ff5c20 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.csx-pill-solid { background: linear-gradient(90deg, #f1980d 0%, #ff5c20 100%); }
.csx-pill-solid::before { display: none; }
.csx-title { font-weight: 800; font-size: clamp(30px, 3.6vw, 56px); line-height: 1.05; letter-spacing: -0.03em; color: #fff; margin: 0 0 20px; }
.csx-sub { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.55; color: rgba(255,255,255,0.9); margin: 0 0 30px; max-width: 520px; }
.csx-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 40px; padding: 22px 32px; margin-bottom: 30px; border-radius: 20px; width: fit-content;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.csx-stat-v { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -0.03em; line-height: 1; color: #fff; white-space: nowrap; }
.csx-ic { width: 0.62em; height: 0.62em; color: var(--lemon); flex: none; }
.csx-ic-down { rotate: 90deg; }
.csx-ic-right { rotate: 45deg; }
.csx-stat-l { margin-top: 6px; font-size: 13px; letter-spacing: 0.06em; color: rgba(255,255,255,0.75); }
.csx-media { position: relative; }
.csx-photo { width: 100%; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; background-size: cover; background-position: center; box-shadow: 0 30px 60px rgba(0,0,0,0.45); }
.csx-photo-ph { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); }
.csx-name { position: absolute; top: 22px; left: 22px; padding: 9px 20px; border-radius: 999px; background: linear-gradient(90deg, #f1980d 0%, #ff5c20 100%); color: #fff;
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; }
.js .csx-slide .csx-copy > *, .js .csx-slide .csx-media { opacity: 0; translate: 0 24px; transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), translate 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); }
.js .csx-slide .csx-copy > :nth-child(2) { transition-delay: 0.1s; } .js .csx-slide .csx-copy > :nth-child(3) { transition-delay: 0.2s; }
.js .csx-slide .csx-copy > :nth-child(4) { transition-delay: 0.3s; } .js .csx-slide .csx-copy > :nth-child(5) { transition-delay: 0.4s; }
.js .csx-slide .csx-media { transition-delay: 0.25s; }
.js .csx-slide.is-in .csx-copy > *, .js .csx-slide.is-in .csx-media { opacity: 1; translate: 0 0; }
.csx .csx-controls { display: flex; justify-content: space-between; align-items: center; max-width: 1240px; margin: 28px auto 0; padding: 0 48px; box-sizing: border-box; }
.csx-dots { display: flex; gap: 8px; align-items: center; }
.csx-dot { width: 12px; height: 4px; border-radius: 4px; border: 0; padding: 0; background: rgba(255,255,255,0.22); cursor: pointer; transition: width 0.35s ease, background 0.35s ease; }
.csx-dot.is-on { width: 28px; background: var(--lemon); }
.csx-nav { display: flex; align-items: center; gap: 12px; }
.csx-count { font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; color: var(--bone-faint); margin-right: 6px; }
.csx-btn { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: scale 0.3s ease, background 0.3s ease; }
.csx-btn svg { width: 18px; height: 18px; }
.csx-prev { background: transparent; border: 1.5px solid rgba(255,255,255,0.55); color: #fff; }
.csx-prev svg { rotate: -135deg; }
.csx-next { background: var(--lemon); border: 0; color: #000; }
.csx-next svg { rotate: 45deg; }
@media (hover: hover) { .csx-btn:hover { scale: 1.08; } }
@media (prefers-reduced-motion: reduce) { .csx-glow, .js .csx-slide .csx-copy > *, .js .csx-slide .csx-media { transition: none; opacity: 1; translate: none; } }
@media (max-width: 900px) {
  .csx-inner { grid-template-columns: 1fr; gap: 32px; padding: 48px 20px; min-height: 0; }
  .csx-stats { gap: 22px; padding: 18px 20px; width: auto; grid-template-columns: repeat(3, 1fr); }
  .csx-stat-v { font-size: 22px; }
  .csx-stat-l { font-size: 11px; }
  .csx-media { max-width: 420px; }
  .csx-slide.csx-has-bg .csx-bg { background-position: 30% center; }
  .csx .csx-controls { padding: 0 20px; }
}
/* ==== CASE STUDIES: frosted-glass filter panel, black grid section, rounded pill pagination ==== */
.csf-sec { position: relative; overflow: hidden; isolation: isolate; }
.csf-sec::before { content: ""; position: absolute; inset: -10% -5%; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 70% at 22% 60%, rgba(120,135,170,0.28) 0%, rgba(120,135,170,0) 70%),
              radial-gradient(40% 70% at 82% 55%, rgba(255,140,60,0.22) 0%, rgba(255,140,60,0) 70%); filter: blur(30px); }
.csf-panel { padding: 36px 40px; border-radius: 24px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 20px 50px rgba(0,0,0,0.35); }
.csf-label { font-weight: 700; font-size: clamp(16px, 1.4vw, 21px); letter-spacing: 0.02em; color: #fff; margin-bottom: 20px; }
.csf-group { display: flex; gap: 8px; flex-wrap: wrap; }
.csf-chip { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; padding: 10px 20px; border-radius: 999px; cursor: pointer;
  color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.18); transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
@media (hover: hover) { .csf-chip:hover { background: rgba(255,255,255,0.85); color: #111; border-color: transparent; } }
.csf-chip.is-on { background: var(--lemon); color: #000; border-color: transparent; font-weight: 700; }
.csg-sec { padding-top: 56px !important; }
.csg-card-off { display: none !important; }
.csg-pager { margin-top: 56px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 28px 32px; border-radius: 20px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
.csg-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: rgba(255,255,255,0.85); }
.csg-btns { display: flex; gap: 10px; }
.csg-btn { min-width: 64px; height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: rgba(255,255,255,0.75);
  font-family: var(--mono); font-size: 14px; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
@media (hover: hover) { .csg-btn:not(:disabled):not(.is-on):hover { border-color: rgba(255,255,255,0.6); color: #fff; } }
.csg-btn.is-on { background: var(--lemon); color: #000; border-color: transparent; font-weight: 700; }
.csg-btn:disabled { opacity: 0.35; cursor: default; }
@media (max-width: 900px) {
  .csf-panel { grid-template-columns: 1fr !important; gap: 26px !important; padding: 26px 22px; }
  .csg-pager { justify-content: center; text-align: center; padding: 22px 16px; }
  .csg-btn { min-width: 44px; height: 42px; padding: 0 12px; }
}
.fcta-nw { white-space: nowrap; }
.fcta-sec em .fcta-arrow { font-style: normal; }
.fcta-form input { min-width: 0; }
@media (max-width: 640px) { .fcta-form { flex-direction: column; } .fcta-form .btn { justify-content: center; } }
/* Case studies hero · peeking card slider + top animated gradient */
.csx { --csx-w: min(1240px, calc(100vw - 2 * clamp(24px, 11vw, 190px))); --csx-gap: 28px; }
.csx-stage { position: relative; overflow: hidden; padding: 4px 0; }
.csx .csx-slide { flex: 0 0 var(--csx-w); border-radius: 24px; border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 30px 80px rgba(0,0,0,0.5); opacity: 0.4; cursor: pointer; transition: opacity 0.6s ease; }
.csx .csx-slide.is-active { opacity: 1; cursor: default; }
.csx.csx-jump .csx-slide, .csx.csx-jump .csx-track, .csx.csx-drag .csx-track { transition: none; }
.csx .csx-glow { display: none; }
.csx-stage > .csx-btn { position: absolute; top: 50%; translate: 0 -50%; z-index: 3; left: calc((100vw - var(--csx-w)) / 4 - 26px); }
.csx-stage > .csx-next { left: auto; right: calc((100vw - var(--csx-w)) / 4 - 26px); }
.csx-stage > .csx-btn { background: rgba(0,0,0,0.35); border: 1.5px solid rgba(255,255,255,0.85); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (hover: hover) { .csx-stage > .csx-btn:hover { background: var(--lemon); border-color: var(--lemon); color: #000; } }
.csx .csx-controls { justify-content: center; gap: 20px; }
.csx-h1-grad { background: linear-gradient(90deg, #e8566d 0%, #cc3fae 48%, #a816ee 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-bottom: 0.08em; }
.csx-sec { position: relative; isolation: isolate; overflow: hidden; }
.csx-sec > .container, .csx-sec > .csx { position: relative; z-index: 1; }
.csx-sec::before, .csx-sec::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 900px; z-index: 0; pointer-events: none; }
.csx-sec::before { background:
    radial-gradient(55% 60% at 50% 0%, rgba(120,28,170,0.85) 0%, rgba(70,20,140,0.55) 40%, rgba(27,45,148,0) 75%),
    radial-gradient(45% 55% at 12% 10%, rgba(27,45,148,0.55) 0%, rgba(27,45,148,0) 70%),
    radial-gradient(45% 55% at 88% 10%, rgba(58,40,190,0.5) 0%, rgba(58,40,190,0) 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%); mask-image: linear-gradient(to bottom, #000 30%, transparent 100%); }
.csx-sec::after { background:
    radial-gradient(50% 55% at 40% 0%, rgba(232,86,109,0.45) 0%, rgba(232,86,109,0) 70%),
    radial-gradient(50% 55% at 65% 5%, rgba(168,22,238,0.5) 0%, rgba(168,22,238,0) 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent 90%); mask-image: linear-gradient(to bottom, #000 25%, transparent 90%);
  opacity: 0; animation: csx-hue 9s ease-in-out 2.4s infinite alternate; }
@keyframes csx-hue { from { opacity: 0; } to { opacity: 0.85; } }
.js .csx-sec::before { opacity: 0; translate: 0 -35%; transition: opacity 1.8s cubic-bezier(0.22, 0.61, 0.36, 1), translate 2.4s cubic-bezier(0.2, 0.65, 0.3, 1); }
.js .csx-sec.csx-glow-in::before { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .js .csx-sec::before { opacity: 1; translate: none; transition: none; } .csx-sec::after { animation: none; } .csx-track { transition: none; } }
@media (max-width: 1100px) and (min-width: 901px) { .csx .csx-inner { gap: 40px; padding: 56px 40px; } }
@media (max-width: 900px) {
  .csx { --csx-w: calc(100vw - 64px); --csx-gap: 12px; }
  .csx .csx-slide { border-radius: 20px; }
  .csx-stage { overflow: visible; }
  .csx { overflow: hidden; padding-bottom: 2px; }
  .csx-stage > .csx-btn { top: auto; bottom: -78px; translate: none; width: 46px; height: 46px; left: 20px; }
  .csx-stage > .csx-next { left: auto; right: 20px; }
  .csx .csx-controls { min-height: 46px; margin-top: 30px; }
}
/* ==== HERO AWARDS: 4-award strip under the sub text, APAC winner overlaid and pulsing ==== */
.hr-awards { position: relative; width: min(760px, 100%); margin: 0 auto 56px; }
.hr-awards-strip { display: block; width: 100%; aspect-ratio: 1500 / 241; background: center / 100% 100% no-repeat; }
.hr-awards-win { position: absolute; left: 74.533%; top: 0; width: 25.467%; height: 100%; background: center / 100% 100% no-repeat; transform-origin: 50% 42%; animation: hr-win-pulse 2.6s ease-in-out 1.6s infinite; }
@keyframes hr-win-pulse { 0%, 100% { scale: 1; filter: drop-shadow(0 0 0 rgba(240,255,23,0)); } 50% { scale: 1.07; filter: drop-shadow(0 0 14px rgba(240,255,23,0.55)); } }
.awards-strip-img { background-image: url(/images/96aa19a3e884.png); }
.awards-win-img { background-image: url(/images/e7e1cfdb9ce1.png), url(/images/7d7949d90643.png); }
.js .hr-awards { transition-delay: 0.45s; }
.js .hr-cta-below { transition-delay: 0.9s; }
.hr-cta-below { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 56px; }
.lede.hero-lede-2, .hero-lede-2 .lede-shine, .hero-lede-2 .lede-rest, .lede.hr-lede-white { color: #fff; }
.hero-lede-2 .lede-shine { background: none; -webkit-text-fill-color: #fff; animation: none; }
@media (prefers-reduced-motion: reduce) { .hr-awards-win { animation: none; } }
@media (max-width: 900px) { .hr-awards { margin-bottom: 40px; } .hr-cta-below { margin-top: 40px; } }
/* ==== CONTACT PAGE: gradient bands, live map with CA pin, ebook-style form, purple pills, entrance animations ==== */
.section.ct-top { position: relative; isolation: isolate; overflow: hidden; background: #000; padding: 88px 48px 96px !important; }
.ct-top > .container, .ct-main > .container { position: relative; z-index: 1; }
.ct-main { position: relative; isolation: isolate; overflow: hidden; background: #000; border-top: 1px solid rgba(255,255,255,0.08); }
.ct-main::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1100px; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 22% 0%, rgba(23,98,143,0.78) 0%, rgba(13,47,110,0.55) 38%, rgba(7,20,51,0) 75%),
              radial-gradient(40% 40% at 85% 10%, rgba(80,1,127,0.35) 0%, rgba(80,1,127,0) 70%); }
.js .ct-main::before { opacity: 0; transition: opacity 2s cubic-bezier(0.22, 0.61, 0.36, 1), translate 2.4s cubic-bezier(0.2, 0.65, 0.3, 1); translate: 0 -12%; }
.js .ct-main.ct-glow-in::before { opacity: 1; translate: 0 0; }
.js .ct-rv { opacity: 0; translate: 0 32px; transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0s), translate 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0s); }
.js .ct-rv.is-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .js .ct-rv, .js .ct-main::before { opacity: 1; translate: none; transition: none; animation: none; } }
.ct-map { position: relative; display: block; overflow: hidden; aspect-ratio: 1476 / 812; border-radius: 24px; border: 1px solid rgba(255,255,255,0.22); background: #1b1d27; box-shadow: 0 40px 90px rgba(0,0,0,0.55); cursor: pointer; }
.ct-map-frame { position: absolute; top: -170px; left: -170px; width: calc(100% + 340px); height: calc(100% + 340px); border: 0; pointer-events: none;
  filter: invert(0.92) hue-rotate(180deg) saturate(1.35) brightness(0.92) contrast(0.95); }
.ct-map-dg { position: absolute; inset: 0; filter: url(#ct-degreen); pointer-events: none; }
.ct-map-tint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(0,0,0,0.15) 0%, rgba(40,20,110,0.28) 55%, rgba(70,40,170,0.42) 100%); mix-blend-mode: multiply; }
.ct-pin { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 14px; translate: -24px -100%; pointer-events: none; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.6)); }
.ct-pin-ico { width: 48px; height: 64px; flex: none; animation: ct-bob 2.6s ease-in-out 1.4s infinite; }
@keyframes ct-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.ct-pin-logo { height: 54px; width: auto; overflow: visible; margin-bottom: 14px; }
.ct-addr { position: absolute; left: 50%; top: calc(50% + 28px); translate: -50% 0; white-space: nowrap; background: #fff; color: #000; border-radius: 999px; padding: 16px 38px;
  font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; box-shadow: 0 14px 34px rgba(0,0,0,0.45); }
@media (hover: hover) { .ct-map:hover .ct-addr { background: var(--lemon); } }
.ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.lede.ct-lede { color: #fff; }
.ct-info { display: flex; flex-direction: column; gap: 40px; padding-top: 8px; }
.ct-label { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.22em; color: #fff; margin-bottom: 12px; }
.ct-phone { display: inline-block; font-weight: 800; font-size: clamp(32px, 3.3vw, 46px); letter-spacing: -0.03em; line-height: 1; color: var(--lemon); }
.ct-email { display: inline-block; font-weight: 700; font-size: clamp(19px, 2vw, 28px); letter-spacing: -0.015em; color: #fff; word-break: break-word; }
.ct-visit { font-weight: 700; font-size: clamp(19px, 2vw, 28px); line-height: 1.3; letter-spacing: -0.015em; color: #fff; margin: 0; }
.ct-note { font-size: clamp(15px, 1.3vw, 19px); color: rgba(255,255,255,0.68); margin-top: 10px; }
.ct-hours { position: relative; margin-top: 64px; border: 1px solid rgba(255,255,255,0.28); border-radius: 32px; background: rgba(0,0,0,0.75); padding: 56px 56px 20px; }
.ct-hours > .anno-tag { position: absolute; top: -12px; right: 20px; }
.ct-hours-item { margin-bottom: 44px; }
.ct-ppill { display: inline-block; padding: 9px 30px; border-radius: 999px; background: linear-gradient(90deg, #5e1a8c 0%, #3c0a96 100%); color: #fff;
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 22px; }
.ct-hours-h { font-weight: 800; font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -0.025em; line-height: 1.1; color: #fff; margin: 0 0 18px; }
.ct-hours-p { font-size: clamp(14px, 1.15vw, 17px); line-height: 1.7; color: rgba(255,255,255,0.82); margin: 0; max-width: 520px; }
.ct-form.ebf-card { max-width: none; width: 100%; box-sizing: border-box; justify-self: stretch; padding: 48px; }
.ct-form .ct-form-h { color: #fff; }
.ct-form .ct-form-sub { color: rgba(255,255,255,0.75); }
.ct-form .field label { font-size: 11px; }
.ct-privacy { text-align: center; margin: 22px 0 0; font-size: 13px; color: #fff; opacity: 0.85; }
.ct-privacy a { text-decoration: underline; }
@media (max-width: 1100px) and (min-width: 901px) { .ct-grid { gap: 48px; } .ct-hours { padding: 40px 36px 12px; } .ct-form.ebf-card { padding: 36px; } }
@media (max-width: 900px) {
  .section.ct-top { padding: 48px 20px 56px !important; }
  .ct-map { aspect-ratio: 4 / 5; border-radius: 20px; }
  .ct-pin { gap: 8px; translate: -17px -100%; }
  .ct-pin-ico { width: 34px; height: 46px; }
  .ct-pin-logo { height: 36px; margin-bottom: 10px; }
  .ct-addr { white-space: normal; text-align: center; width: calc(100% - 40px); box-sizing: border-box; padding: 12px 18px; font-size: 10.5px; letter-spacing: 0.12em; line-height: 1.5; }
  .ct-grid { display: flex; flex-direction: column; gap: 0; }
  .ct-grid > div:first-child { display: contents; }
  .ct-grid > div:first-child > * { order: 1; text-align: center; }
  .ct-grid > .ct-form { order: 2; margin: 0 0 56px; }
  .ct-grid > div:first-child > .ct-info { order: 3; }
  .ct-grid > div:first-child > .ct-hours { order: 4; }
  .ct-grid > div:first-child > .faq-pill { align-self: center; }
  .ct-main > .container > .ct-grid > div:first-child { text-align: center; }
  .ct-hours { margin-top: 48px; padding: 36px 24px 8px; border-radius: 24px; }
  .ct-hours-p { margin: 0 auto; }
  .ct-form.ebf-card { padding: 28px 20px; }
}
/* ==== ABOUT HERO: subdued office photo on the right, gradient stat cards, orange pill, lemon headline ==== */
.section.ab-hero { position: relative; isolation: isolate; overflow: hidden; background: #000; min-height: clamp(640px, 50vw, 880px); display: flex; align-items: center; padding: 96px 48px 96px; }
.ab-copy { position: relative; z-index: 2; width: 100%; }
.ab-copy > * { max-width: 620px; }
.ab-hero .h-display { font-size: clamp(48px, 5.6vw, 92px); line-height: 0.98; margin: 0 0 36px; }
.ab-lede.lede { color: rgba(255,255,255,0.82); font-size: clamp(16px, 1.35vw, 21px); max-width: 560px; margin: 0; }
.ab-btns { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 56px; }
.ab-pill { position: relative; display: inline-block; padding: 13px 38px; margin-bottom: 36px; border-radius: 999px; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  background: linear-gradient(90deg, #f1980d, #ff5c20); -webkit-background-clip: text; background-clip: text; color: #ff6a1c; -webkit-text-fill-color: transparent; }
.ab-pill::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(90deg, #f1980d, #ff5c20);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; }
.ab-visual { position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 1400 / 1160; z-index: 1; pointer-events: none; }
.ab-bg { position: absolute; inset: 0; background: url(/images/51fa1268de85.webp) center / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%), linear-gradient(to top, transparent 0%, #000 14%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 30%), linear-gradient(to top, transparent 0%, #000 14%); mask-composite: intersect; }
.ab-cards { position: absolute; left: 42.6%; top: 40.3%; width: 23.5%; height: 42.3%; display: flex; flex-direction: column; justify-content: space-between; gap: 2.2%; pointer-events: auto; }
.ab-card { position: relative; flex: 1; border-radius: 20px; padding: 0 9%; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 18px 40px rgba(0,0,0,0.45); }
.ab-card-l { font-family: var(--mono); font-size: clamp(9px, 0.72vw, 12px); font-weight: 700; letter-spacing: 0.2em; margin-bottom: 0.6em; }
.ab-card-v { font-weight: 800; font-size: clamp(22px, 2.3vw, 40px); letter-spacing: -0.03em; line-height: 1; }
.ab-card-arw { position: absolute; top: 18%; right: 9%; width: clamp(18px, 1.6vw, 28px); height: clamp(18px, 1.6vw, 28px); }
.ab-card-grad { color: #fff; background: linear-gradient(120deg, #f1980d 0%, #e8566d 45%, #a816ee 100%) 0 0 / 200% 200%; animation: ab-grad 7s ease-in-out infinite alternate; }
.ab-card-grad .ab-card-arw { color: var(--lemon); }
@keyframes ab-grad { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.ab-card-white { background: #fff; color: #11121c; }
.ab-card-white .ab-card-arw { color: #1d1f3a; }
.ab-card-navy { background: #2a2b45; color: #fff; border: 1px solid rgba(255,255,255,0.12); }
.ab-card-navy .ab-card-arw { color: var(--lemon); }
.js .ab-bg { opacity: 0; scale: 1.06; transition: opacity 1.8s cubic-bezier(0.22, 0.61, 0.36, 1), scale 2.6s cubic-bezier(0.2, 0.65, 0.3, 1); }
.js .ab-hero.ab-in .ab-bg { opacity: 1; scale: 1; }
.js .ab-card { opacity: 0; translate: 40px 0; transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), translate 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); }
.js .ab-hero.ab-in .ab-card { opacity: 1; translate: 0 0; }
.js .ab-hero .ab-card:nth-child(1) { transition-delay: 0.7s; } .js .ab-hero .ab-card:nth-child(2) { transition-delay: 0.85s; } .js .ab-hero .ab-card:nth-child(3) { transition-delay: 1s; }
.js .ab-rv { opacity: 0; translate: 0 30px; transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0s), translate 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0s); }
.js .ab-in .ab-rv { opacity: 1; translate: 0 0; }
@media (hover: hover) { .ab-card { transition: scale 0.35s ease; } .js .ab-hero.ab-in .ab-card:hover { scale: 1.04; } }
@media (prefers-reduced-motion: reduce) { .js .ab-bg, .js .ab-card, .js .ab-rv { opacity: 1; translate: none; scale: none; transition: none; } .ab-card-grad { animation: none; } }
@media (max-width: 1100px) {
  .section.ab-hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 72px 32px 0; }
  .ab-visual { order: 2; }
  .ab-copy > * { max-width: 680px; }
  .ab-visual { position: relative; height: auto; width: calc(100% + 64px); margin: 40px -32px 0; }
  .ab-bg { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 85%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 85%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
}
@media (max-width: 900px) {
  .section.ab-hero { padding: 56px 20px 0; text-align: center; }
  .ab-copy > * { margin-left: auto; margin-right: auto; }
  .ab-btns { justify-content: center; margin-top: 40px; }
  .ab-visual { width: calc(100% + 40px); margin: 32px -20px 0; aspect-ratio: auto; height: 560px; }
  .ab-bg { background-size: cover; background-position: 45% center; }
  .ab-cards { left: 50%; translate: -50% 0; top: 22%; width: min(78%, 300px); height: 66%; text-align: left; }
  .ab-card-l { font-size: 10px; } .ab-card-v { font-size: 32px; } .ab-card-arw { width: 22px; height: 22px; }
}
/* ==== ABOUT: hero bottom gradient, platform pills (dock hover), intro block with arrow cluster ==== */
.section.ab-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 100% at 12% 100%, rgba(255,108,28,0.38) 0%, rgba(255,108,28,0) 70%),
    radial-gradient(55% 100% at 52% 100%, rgba(160,40,200,0.42) 0%, rgba(160,40,200,0) 72%),
    radial-gradient(55% 100% at 92% 100%, rgba(80,60,220,0.42) 0%, rgba(80,60,220,0) 72%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 25%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, #000 25%, transparent 100%); }
.js .section.ab-hero::after { opacity: 0; translate: 0 40%; transition: opacity 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.6s, translate 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.6s; }
.js .section.ab-hero.ab-in::after { opacity: 1; translate: 0 0; }
.ab-plat { position: relative; padding: 56px 48px 64px; text-align: center; background: radial-gradient(70% 120% at 50% 0%, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 70%), #0b0b0b; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.06); }
.ab-plat-label { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: #fff; margin-bottom: 30px; }
.ab-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.ab-chip { display: inline-block; padding: 13px 20px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,0.32); color: rgba(255,255,255,0.5); font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap;
  transition: scale 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), margin 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.3s ease, border-color 0.3s ease, background 0.3s ease; }
@media (hover: hover) {
  .ab-chip:hover { scale: 1.2; margin: 0 14px; z-index: 2; position: relative; cursor: default; color: #fff; border-color: var(--lemon); background: rgba(240,255,23,0.06); }
  .ab-chip:hover + .ab-chip, .ab-chip:has(+ .ab-chip:hover) { scale: 1.08; margin: 0 6px; color: rgba(255,255,255,0.75); }
}
.section.ab-intro { position: relative; isolation: isolate; overflow: hidden; background: #000; padding-top: 110px; padding-bottom: 120px; }
.section.ab-intro::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 900px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 30% 0%, rgba(23,98,143,0.85) 0%, rgba(13,40,100,0.6) 35%, rgba(7,20,51,0) 72%); }
.js .section.ab-intro::before { opacity: 0; translate: 0 -15%; transition: opacity 2s cubic-bezier(0.22, 0.61, 0.36, 1), translate 2.4s cubic-bezier(0.2, 0.65, 0.3, 1); }
.js .section.ab-intro.ab-in::before { opacity: 1; translate: 0 0; }
.ab-intro-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 80px; align-items: start; }
.ab-intro .h-section { font-size: clamp(40px, 4.6vw, 72px); line-height: 1.02; margin: 0; color: #fff; }
.ab-intro-copy p { font-size: clamp(16px, 1.3vw, 20px); line-height: 1.6; color: rgba(255,255,255,0.86); margin: 0 0 30px; }
.ab-intro-copy .ab-intro-lead { color: #fff; font-weight: 700; margin-top: 64px; }
.ab-intro-head { display: flex; flex-direction: column; align-items: flex-start; }
.ab-cluster { --s: clamp(40px, 3.6vw, 60px); display: grid; grid-template-columns: repeat(3, var(--s)); grid-template-rows: repeat(3, var(--s)); align-self: flex-start; margin: 56px 0 0 calc(var(--s) * 3.4); }
.ab-ca { width: 100%; height: 100%; }
.ab-ca.c1 { grid-area: 1 / 3; color: var(--lemon); }
.ab-ca.c2 { grid-area: 2 / 2; color: #5b5d63; } .ab-ca.c3 { grid-area: 2 / 3; color: #a7a8ac; }
.ab-ca.c4 { grid-area: 3 / 1; color: #2a2b2f; } .ab-ca.c5 { grid-area: 3 / 2; color: #3c3e43; } .ab-ca.c6 { grid-area: 3 / 3; color: #5f6166; }
.js .ab-ca { opacity: 0; translate: -14px 14px; transition: opacity 0.6s ease, translate 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); }
.js .ab-in .ab-ca { opacity: 1; translate: 0 0; }
.js .ab-in .ab-ca.c4 { transition-delay: 0.35s; } .js .ab-in .ab-ca.c5 { transition-delay: 0.45s; } .js .ab-in .ab-ca.c6 { transition-delay: 0.55s; }
.js .ab-in .ab-ca.c2 { transition-delay: 0.7s; } .js .ab-in .ab-ca.c3 { transition-delay: 0.8s; } .js .ab-in .ab-ca.c1 { transition-delay: 1s; }
.ab-in .ab-ca.c1 { animation: ab-bob 2.8s ease-in-out 2s infinite; }
@keyframes ab-bob { 0%, 100% { translate: 0 0; } 50% { translate: 4px -4px; } }
@media (prefers-reduced-motion: reduce) { .js .ab-ca, .js .section.ab-intro::before, .js .section.ab-hero::after { opacity: 1; translate: none; transition: none; } .ab-in .ab-ca.c1 { animation: none; } }
@media (max-width: 900px) {
  .ab-plat { padding: 44px 20px 48px; }
  .ab-chips { gap: 10px; } .ab-chip { font-size: 12px; padding: 11px 14px; letter-spacing: 0.14em; }
  .section.ab-intro { padding-top: 72px; padding-bottom: 72px; }
  .ab-intro-grid { grid-template-columns: 1fr; gap: 0; text-align: center; }
  .ab-intro-head { align-items: center; }
  .ab-cluster { --s: 40px; margin: 36px auto 0; align-self: center; }
  .ab-intro-copy .ab-intro-lead { margin-top: 40px; }
}
/* ==== ABOUT TIMELINE: white section, gradient headline, purple-to-blue line that draws in, orange year pills ==== */
.section.ab-tl { background: #fff; color: #0a0a0a; padding-top: 110px; padding-bottom: 120px; }
.ab-tl-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }
.ab-tl-head { position: sticky; top: 140px; }
.ab-tl .faq-pill { color: #0a0a0a; margin-bottom: 30px; }
.ab-tl .h-section { color: #0a0a0a; font-size: clamp(40px, 4.4vw, 68px); line-height: 1.02; margin: 0; }
.ab-tl .h-section em { font-style: normal; background: linear-gradient(90deg, #d4289b 0%, #a816ee 50%, #3aabe7 100%); -webkit-background-clip: text; background-clip: text; color: #a816ee; -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-bottom: 0.06em; }
.ab-tl .lede { color: #111; font-size: clamp(16px, 1.4vw, 21px); line-height: 1.65; margin-top: 40px; max-width: 580px; }
.ab-tl-list { position: relative; list-style: none; margin: 0; padding: 0; }
.ab-tl-list::before { content: ""; position: absolute; left: 0; top: -12px; bottom: -24px; width: 2px; border-radius: 2px; background: linear-gradient(to bottom, #a32bf0 0%, #44aaf7 100%); transform-origin: top; }
.ab-tl-item { position: relative; padding: 4px 0 52px 40px; }
.ab-tl-item:last-child { padding-bottom: 0; }
.ab-tl-dot { position: absolute; left: -6px; top: 34px; width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.ab-tl-now .ab-tl-dot { left: -11px; top: 29px; width: 24px; height: 24px; background: transparent; border: 2.5px solid var(--c); box-sizing: border-box; }
.ab-tl-now .ab-tl-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--c); }
.ab-tl-now .ab-tl-dot::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--c); animation: ab-ping 2.4s ease-out 2s infinite; opacity: 0; }
@keyframes ab-ping { 0% { opacity: 0.8; scale: 1; } 100% { opacity: 0; scale: 2; } }
.ab-tl-year { display: inline-block; padding: 8px 22px; border-radius: 999px; background: linear-gradient(90deg, #f1980d 0%, #ff5c20 100%); color: #fff; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.2em; margin-bottom: 14px; }
.ab-tl-t { display: block; font-weight: 700; font-size: clamp(19px, 1.6vw, 24px); letter-spacing: -0.015em; color: #0a0a0a; margin-bottom: 10px; }
.ab-tl-p { display: block; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.75; color: #8a8a90; max-width: 720px; }
.js .ab-tl-list::before { scale: 1 0; transition: scale 2.2s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; }
.js .ab-tl.ab-in .ab-tl-list::before { scale: 1 1; }
.js .ab-tl-item { opacity: 0; translate: 0 24px; transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) calc(var(--d) * 2.2), translate 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) calc(var(--d) * 2.2); }
.js .ab-tl.ab-in .ab-tl-item { opacity: 1; translate: 0 0; }
.js .ab-tl-dot { scale: 0; transition: scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--d) * 2.2 + 0.15s); }
.js .ab-tl.ab-in .ab-tl-dot { scale: 1; }
@media (prefers-reduced-motion: reduce) { .js .ab-tl-list::before, .js .ab-tl-item, .js .ab-tl-dot { scale: 1; opacity: 1; translate: none; transition: none; } .ab-tl-now .ab-tl-dot::before { animation: none; } }
@media (max-width: 900px) {
  .section.ab-tl { padding-top: 72px; padding-bottom: 80px; }
  .ab-tl-grid { grid-template-columns: 1fr; gap: 56px; }
  .ab-tl-head { position: static; text-align: center; }
  .ab-tl .lede { margin-left: auto; margin-right: auto; }
  .ab-tl-item { padding: 0 0 44px 32px; }
  .ab-tl-year { font-size: 12px; padding: 7px 18px; }
}
/* ==== ABOUT TEAM: white section, headshot cards on teal/purple, gradient role tags; pages system dormant until a 2nd page exists ==== */
.section.tm-sec { background: radial-gradient(60% 55% at 50% 55%, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0) 70%), #fff; color: #0a0a0a; padding-top: 100px; padding-bottom: 110px; }
.tm-head-wrap { text-align: center; max-width: 980px; margin: 0 auto 64px; }
.tm-sec .faq-pill { color: #0a0a0a; margin-bottom: 30px; }
.tm-sec .h-section { color: #0a0a0a; font-size: clamp(36px, 4.4vw, 68px); line-height: 1.04; margin: 0; }
.tm-sec .h-section em { font-style: normal; color: #0a0a0a; }
.tm-sec .lede { color: #55565c; margin: 24px auto 0; max-width: 720px; text-align: center; }
.tm-wrap { position: relative; }
.tm-page { display: none; flex-wrap: wrap; justify-content: center; gap: 32px 28px; }
.tm-page.is-on { display: flex; }
.tm-card { flex: 0 0 calc((100% - 84px) / 4); background: #fff; border: 1px solid #ececf0; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 50px rgba(20,20,40,0.07); display: flex; flex-direction: column; transition: translate 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.35s ease; }
.tm-photo { position: relative; aspect-ratio: 305 / 335; overflow: hidden; }
.tm-teal { background: #00a5a6; } .tm-purple { background: #7b3ff2; }
.tm-head.dc-lizzy { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; margin: 0; background-size: cover !important; background-position: center top !important; background-repeat: no-repeat; transform: none; opacity: 1; translate: none; transition: scale 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); transform-origin: 50% 100%; }
.tm-body { padding: 22px 22px 28px; display: flex; flex-direction: column; flex: 1; }
.tm-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.tm-tag { display: inline-block; max-width: calc(100% - 36px); padding: 9px 16px; border-radius: 18px; color: #fff; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.15em; line-height: 1.35; text-transform: uppercase; }
.tm-g1 { background: linear-gradient(90deg, #f0447a 0%, #a816ee 55%, #2bc6d9 100%); }
.tm-g2 { background: linear-gradient(90deg, #5b3ff0 0%, #3a8ee8 100%); }
.tm-g3 { background: linear-gradient(90deg, #13a8b4 0%, #1ce6a0 100%); }
.tm-g4 { background: linear-gradient(90deg, #c21fd6 0%, #8f1fe8 100%); }
.tm-arw { flex: none; width: 24px; height: 24px; color: #0a0a0a; margin-top: 6px; transition: translate 0.3s ease; }
.tm-name { font-weight: 700; font-size: clamp(19px, 1.6vw, 24px); letter-spacing: -0.02em; color: #0a0a0a; margin: 0 0 12px; }
.tm-yrs { font-size: 15px; color: #111; margin: 0 0 18px; }
.tm-bio { font-size: 15px; line-height: 1.55; color: #77787e; margin: 0; }
@media (hover: hover) {
  .tm-card:hover { translate: 0 -6px; box-shadow: 0 26px 60px rgba(20,20,40,0.13); }
  .tm-card:hover .tm-head { scale: 1.04; }
  .tm-card:hover .tm-arw { translate: 3px -3px; }
}
.tm-nav { display: none; position: absolute; top: 34%; width: 76px; height: 76px; border-radius: 50%; border: 1.5px solid #0a0a0a; background: #fff; color: #0a0a0a; cursor: pointer; align-items: center; justify-content: center; z-index: 2; }
.tm-nav svg { width: 30px; height: 30px; }
.tm-prev { left: -110px; } .tm-prev svg { rotate: -135deg; }
.tm-next { right: -110px; } .tm-next svg { rotate: 45deg; }
.tm-dots { display: none; justify-content: center; gap: 10px; margin-top: 48px; }
.tm-dots button { width: 56px; height: 9px; border-radius: 9px; border: 0; padding: 0; background: #d9c8f7; cursor: pointer; }
.tm-dots button.is-on { background: #6d2fe8; }
.tm-wrap.tm-multi .tm-nav { display: inline-flex; } .tm-wrap.tm-multi .tm-dots { display: flex; }
@media (max-width: 1500px) {
  .tm-wrap.tm-multi { padding-bottom: 0; }
  .tm-nav { top: auto; bottom: 0; width: 52px; height: 52px; } .tm-nav svg { width: 20px; height: 20px; }
  .tm-prev { left: calc(50% - 150px); } .tm-next { right: calc(50% - 150px); }
  .tm-dots { min-height: 52px; align-items: center; margin-top: 32px; }
}
@media (max-width: 1100px) { .tm-card { flex-basis: calc((100% - 56px) / 3); } }
@media (max-width: 900px) {
  .section.tm-sec { padding-top: 72px; padding-bottom: 80px; }
  .tm-head-wrap { margin-bottom: 40px; }
  .tm-page { gap: 16px 14px; }
  .tm-card { flex-basis: calc((100% - 14px) / 2); border-radius: 18px; }
  .tm-body { padding: 14px 14px 18px; }
  .tm-top { margin-bottom: 12px; gap: 6px; }
  .tm-tag { font-size: 8.5px; padding: 7px 10px; letter-spacing: 0.12em; border-radius: 12px; max-width: calc(100% - 24px); }
  .tm-arw { width: 16px; height: 16px; margin-top: 4px; }
  .tm-name { font-size: 16px; margin-bottom: 6px; } .tm-yrs { font-size: 12px; margin-bottom: 8px; } .tm-bio { font-size: 12px; }
}
/* ==== AUDIT HERO: About-hero styling (no photo), ebook glow mirrored to come in from the right ==== */
.section.au-hero { --hg-x: 80%; --hg-y: 58%; --hg-w: 1050px; --hg-h: 900px; --hg-dx: -45%; --hg-dy: 0%; background: #000; padding: 110px 48px 120px; }
@media (max-width: 900px) { .section.au-hero { --hg-x: 80%; --hg-y: 70%; --hg-w: 820px; --hg-h: 760px; --hg-dx: -60%; --hg-dy: 0%; } }
.au-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 64px; align-items: center; position: relative; z-index: 1; }
.au-hero .h-display { font-size: clamp(44px, 5.2vw, 86px); line-height: 1; margin: 0 0 36px; max-width: 760px; }
.au-list-h { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; margin: 0 0 18px; }
.au-list ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.au-list li { display: flex; align-items: center; gap: 14px; font-size: clamp(16px, 1.35vw, 20px); color: #fff; }
.au-tick { flex: none; width: 16px; height: 16px; color: var(--lemon); rotate: 45deg; }
.au-cards { display: flex; flex-direction: column; gap: 16px; width: min(100%, 360px); justify-self: end; }
.au-cards .ab-card { flex: none; min-height: 132px; padding: 0 30px; }
.au-cards .ab-card-l { font-size: 12px; } .au-cards .ab-card-v { font-size: clamp(32px, 3vw, 46px); } .au-cards .ab-card-arw { width: 26px; height: 26px; right: 26px; top: 26px; }
.js .au-hero.ab-in .ab-card { opacity: 1; translate: 0 0; }
.js .au-hero .ab-card:nth-child(1) { transition-delay: 0.6s; } .js .au-hero .ab-card:nth-child(2) { transition-delay: 0.75s; }
@media (max-width: 900px) {
  .section.au-hero { padding: 64px 20px 80px; text-align: center; }
  .au-grid { grid-template-columns: 1fr; gap: 48px; }
  .au-copy > * { margin-left: auto; margin-right: auto; }
  .au-list ul { align-items: center; } .au-list li { font-size: 16px; }
  .au-hero .ab-btns { justify-content: center; }
  .au-cards { justify-self: center; text-align: left; }
}
/* ==== FORMS site-wide: entrance animation for the ebook-style form blocks ==== */
.js .ebf-rv { opacity: 0; translate: 0 28px; transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0s), translate 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0s); }
.js .ebf-sec.ebf-in .ebf-rv { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .js .ebf-rv { opacity: 1; translate: none; transition: none; } }
.section.fcta-sec:has(+ .greviews-sec) { padding-bottom: 200px !important; }
@media (max-width: 900px) { .section.fcta-sec:has(+ .greviews-sec) { padding-bottom: 140px !important; } }
/* ==== AUDIT + DISCOVERY CALL HEROES: random team member (girls only) with smaller stat cards across the bottom ==== */
.section.au-hero { padding-bottom: 0; }
.au-grid { align-items: end; }
.au-copy { padding-bottom: 110px; align-self: center; }
.au-visual { position: relative; align-self: end; display: flex; justify-content: center; }
.au-girl { width: min(100%, 600px); aspect-ratio: 800 / 828; background: center bottom / contain no-repeat; }


/* Audit hero v2: Daniella presenting the report to a client */
.au-pres-h { padding: 12px 16px 2px; font-weight: 800; font-size: 16px; line-height: 1.15; letter-spacing: -0.01em; color: #0d0d14; }
.au-pres-h small { display: block; font-family: var(--mono); font-weight: 700; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: #6b6b78; margin-bottom: 4px; }
.au-chat { display: flex; align-items: flex-end; gap: 10px; padding: 10px 14px 14px; border-top: 1px solid #eceaf1; margin-top: 6px; background: #faf9fc; }
.au-cav { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #0d0d14 0%, #3a3946 100%); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #04c34b; overflow: hidden; }
.au-cav svg { width: 30px; height: 30px; margin-top: 8px; }
.au-cmsg { display: flex; flex-direction: column; gap: 4px; }
.au-cmsg b { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: #6b6b78; }
.au-cmsg span { display: inline-block; padding: 8px 12px; border-radius: 12px 12px 12px 4px; background: #0d0d14; color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.au-bubble small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; margin-bottom: 3px; }

.au-pres ul { gap: 6px; padding: 8px 16px 4px; }
.au-pres li { font-size: 12px; }
.au-pres .au-pres-h { font-size: 14px; padding-top: 10px; }
.au-pres .au-chat { padding: 8px 12px 10px; }
.au-pres .au-cav { width: 32px; height: 32px; } .au-pres .au-cav svg { width: 26px; height: 26px; margin-top: 7px; }
.au-pres .au-cmsg span { font-size: 11.5px; padding: 7px 10px; }
@media (min-width: 1400px) { .au-walk.au-pres { top: 13%; } }
@media (min-width: 1280px) and (max-width: 1399px) { .au-walk.au-pres { top: 1%; } }
@media (max-width: 1279px) {
  #page-audit .au-hero .au-visual { padding-bottom: 300px; }
  #page-audit .au-hero .au-visual .au-cards { bottom: 336px; }
}
@media (max-width: 560px) {
  #page-audit .au-hero .au-visual { padding-bottom: 290px; }
  #page-audit .au-hero .au-visual .au-cards { bottom: 322px; }
}

/* ===== Ebook page: Marketing Performance Playbook (cover + real pages) ===== */
.ebook-cover.ebc { background: none; }
.ebook-cover.ebc::after { display: none; }
.ebook-cover.ebc .ebook-badge { left: 58%; top: 0%; z-index: 6; }
.ebk { position: absolute; inset: 0; }
.ebk-book { position: absolute; left: 50%; top: 3%; height: 88%; aspect-ratio: 1 / 1.6; transform: translateX(-50%) perspective(1600px) rotateY(-20deg) rotateX(3deg); transform-style: preserve-3d; z-index: 2; }
.ebk-face { position: absolute; inset: 0; container-type: inline-size; background: #0a0b0f; border-radius: 0.6cqw 1.6cqw 1.6cqw 0.6cqw; overflow: hidden; color: #fff; font-family: 'Manrope', sans-serif; box-shadow: inset 2.2cqw 0 2.4cqw -1.4cqw rgba(255,255,255,0.18), inset 3.6cqw 0 0 -3cqw rgba(0,0,0,0.6); }
.ebk-face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 38%); pointer-events: none; }
.ebk-edge { position: absolute; top: 1.2%; bottom: 1.2%; right: 0; width: 7%; transform-origin: right center; transform: rotateY(-90deg) translateX(100%); background: repeating-linear-gradient(90deg, #f3f1ea 0 1px, #d6d2c6 1px 2px); }
.ebk-shadow { position: absolute; left: 26%; right: 20%; bottom: 4%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,0.65), rgba(0,0,0,0)); filter: blur(6px); z-index: 1; }
.ebc-title { position: relative; margin: 9cqw 7cqw 0; font-weight: 800; font-size: 10.4cqw; line-height: 0.98; letter-spacing: -0.01em; }
.ebc-title em { font-style: normal; color: #7cf03a; }
.ebc-sub { position: relative; margin: 4cqw 7cqw 0; font-size: 3.9cqw; line-height: 1.35; color: #e6e7ec; }
.ebc-lap { position: relative; margin: 6cqw 10cqw 0 12cqw; transform: perspective(500px) rotateY(-10deg) rotateZ(-3deg); }
.ebc-scr { position: relative; padding: 2.2cqw; border-radius: 2cqw 2cqw 0 0; border: 1.4cqw solid #2a2b33; background: #10121a; }
.ebc-base { height: 2.4cqw; margin: 0 -5cqw; border-radius: 0 0 2cqw 2cqw; background: linear-gradient(#5b5d68, #2b2c33); }
.ebc-scr svg { display: block; width: 100%; height: 7cqw; margin-top: 1.4cqw; }
.ebc-scr .ebx-dt span { font-size: 2cqw; } .ebc-scr .ebx-kp span { font-size: 1.8cqw; } .ebc-scr .ebx-kp b { font-size: 3cqw; } .ebc-scr .ebx-kp em { font-size: 1.8cqw; } .ebc-scr .ebx-kp > div { padding: 1cqw; }
.ebk-face > .ebc-foot.ebc-foot { position: absolute; left: 7cqw; right: 11cqw; bottom: 6cqw; display: flex; justify-content: space-between; align-items: flex-end; font-weight: 800; font-size: 2.2cqw; line-height: 1.4; letter-spacing: 0.02em; }
.ebc-foot b { color: #7cf03a; font-size: 2.2cqw; }

/* shared ebook page system (sizes in page-relative cqw) */
.ebx { position: absolute; container-type: inline-size; aspect-ratio: 1 / 1.74; background: #0a0b0f; color: #fff; overflow: hidden; border-radius: 1.4cqw; font-family: 'Manrope', sans-serif; box-shadow: 0 3cqw 8cqw rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; padding: 0; }
.ebx > :not(.ebx-glow) { margin-left: 5.5cqw; margin-right: 5.5cqw; }
.ebx > .ebx-tip { margin-bottom: 5.5cqw; }
.ebx-glow, .ebk-face .ebx-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 30% at 0% 100%, rgba(155,92,255,0.55), rgba(155,92,255,0) 70%), radial-gradient(55% 28% at 100% 100%, rgba(124,240,58,0.45), rgba(124,240,58,0) 70%), radial-gradient(40% 20% at 100% 0%, rgba(155,92,255,0.25), rgba(155,92,255,0) 70%); }
.ebx > :not(.ebx-glow), .ebk-face > :not(.ebx-glow) { position: relative; }
.ebx-top { display: flex; justify-content: space-between; align-items: center; padding-top: 5cqw; }
.ebk-face .ebx-top { margin: 0 7cqw; padding-top: 6cqw; }
.ebx-logo { display: flex; align-items: center; gap: 1.8cqw; }
.ebx-logo b { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 8cqw; line-height: 1; letter-spacing: -0.04em; }
.ebx-logo span { font-weight: 800; font-size: 2.2cqw; line-height: 1.15; letter-spacing: 0.22em; }
.ebx-pg { font-size: 3.2cqw; color: #b9bcc8; }
.ebx-head { display: grid; grid-template-columns: auto 1fr; gap: 4cqw; align-items: end; margin-top: 5cqw; }
.ebx-num { font-weight: 800; font-size: 13cqw; line-height: 0.9; letter-spacing: -0.03em; }
.ebx-num small { display: block; font-size: 3cqw; letter-spacing: 0.04em; margin-bottom: 1cqw; }
.ebx-title { font-weight: 800; font-size: 6.6cqw; line-height: 1.05; letter-spacing: -0.02em; }
.ebx-intro { margin: 3.4cqw 0 0; font-size: 3.5cqw; line-height: 1.4; color: #d6d8e0; }
.ebx-ki { margin-top: 3.4cqw; padding: 3.4cqw 3.6cqw; border-radius: 2.4cqw; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); }
.ebx-ki b { display: block; font-weight: 800; font-size: 3.2cqw; letter-spacing: 0.06em; color: #7cf03a; margin-bottom: 2.4cqw; }
.ebx-ki ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8cqw; }
.ebx-ki li { display: grid; grid-template-columns: auto 1fr; gap: 2.2cqw; align-items: start; font-size: 3.1cqw; line-height: 1.3; color: #e6e7ec; }
.ebx-ki li i, .ebx-seg i, .ebx-plan i { display: grid; place-items: center; width: 3.8cqw; height: 3.8cqw; border-radius: 0.8cqw; background: #7cf03a; }
.ebx-ki li i svg, .ebx-seg i svg, .ebx-plan i svg { width: 80%; height: 80%; }
.ebx-exl { margin-top: 3.6cqw; font-weight: 800; font-size: 3.1cqw; letter-spacing: 0.05em; color: #7cf03a; }
.ebx-ex { margin-top: 2.4cqw; margin-bottom: 3cqw; }
.ebx-tip { margin-top: auto; flex: none; display: flex; gap: 3cqw; align-items: center; padding: 3cqw 3.4cqw; border-radius: 2.4cqw; background: rgba(155,92,255,0.10); border: 1px solid rgba(155,92,255,0.35); font-size: 3cqw; line-height: 1.35; color: #e6e7ec; }
.ebx-tip i { flex: none; width: 7cqw; height: 7cqw; } .ebx-tip i svg { width: 100%; height: 100%; }
.ebx-tip b { display: block; color: #b77cff; font-size: 3cqw; letter-spacing: 0.06em; }
.ebx-flow { display: flex; align-items: flex-start; justify-content: space-between; gap: 1cqw; }
.ebx-flow > em { font-style: normal; color: #fff; font-size: 4cqw; margin-top: 3.4cqw; }
.ebx-fs { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; text-align: center; font-size: 2.8cqw; line-height: 1.2; color: #e6e7ec; }
.ebx-fs i { display: grid; place-items: center; width: 12cqw; height: 12cqw; border-radius: 2.4cqw; }
.ebx-fs i svg { width: 60%; height: 60%; }
.ebx-card { padding: 3.4cqw; border-radius: 2.4cqw; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); }
.ebx-ch { display: flex; justify-content: space-between; font-weight: 800; font-size: 3.2cqw; margin-bottom: 2.4cqw; }
.ebx-ch b { color: #7cf03a; }
.ebx-seg { display: grid; grid-template-columns: auto 1fr 22cqw auto; gap: 2cqw; align-items: center; font-size: 2.9cqw; color: #e6e7ec; margin-top: 1.8cqw; }
.ebx-seg em { height: 2.4cqw; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; } .ebx-seg u { display: block; height: 100%; background: #7cf03a; border-radius: 999px; }
.ebx-seg b { color: #7cf03a; font-size: 2.8cqw; }
.ebx-ads { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.ebx-ad { border-radius: 2cqw; background: #fff; padding: 1.6cqw; color: #0a0b0f; }
.ebx-ad > span { display: block; font-weight: 800; font-size: 2.6cqw; margin-bottom: 1.4cqw; }
.ebx-ad > span.g { color: #1a73e8; } .ebx-ad > span.m { color: #0866ff; }
.ebx-ad > div { position: relative; height: 24cqw; border-radius: 1.4cqw; display: flex; flex-direction: column; justify-content: flex-end; padding: 2cqw; color: #fff; font-size: 3.4cqw; line-height: 1.05; }
.ebx-ad .ph1 { background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.6)), linear-gradient(135deg, #5aa0d8 0%, #2f6e45 55%, #c7b08a 100%); }
.ebx-ad .ph1 i { display: inline-block; margin-top: 1.4cqw; padding: 0.8cqw 1.6cqw; border-radius: 1cqw; background: #7cf03a; color: #0a0b0f; font-style: normal; font-weight: 800; font-size: 2.4cqw; align-self: flex-start; }
.ebx-ad .ph2 { background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.6)), linear-gradient(135deg, #e8c28a 0%, #8a6a49 50%, #3a4a3a 100%); }
.ebx-ad .ph2 u { position: absolute; left: 50%; top: 38%; translate: -50% -50%; width: 9cqw; height: 9cqw; border-radius: 50%; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.8); }
.ebx-ad .ph2 u::after { content: ""; position: absolute; left: 38%; top: 28%; border-left: 3cqw solid #fff; border-top: 2cqw solid transparent; border-bottom: 2cqw solid transparent; }
.ebx-lp { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; padding: 2.6cqw; border-radius: 2cqw; background: #fff; color: #0a0b0f; }
.ebx-lp b { display: block; font-size: 3.4cqw; line-height: 1.1; }
.ebx-lp ul { list-style: none; margin: 1.6cqw 0; padding: 0; display: grid; gap: 0.8cqw; font-size: 2.4cqw; color: #3a3d48; }
.ebx-lp li::before { content: "\2713  "; color: #1f9d4b; font-weight: 800; }
.ebx-lp i { display: inline-block; padding: 1cqw 2cqw; border-radius: 1cqw; background: #7cf03a; font-style: normal; font-weight: 800; font-size: 2.5cqw; }
.ebx-lp .img { border-radius: 1.4cqw; background: linear-gradient(180deg, #8fc1e6 0%, #cfe6f4 40%, #6f8f6b 41%, #3f6b8a 70%, #2a4f68 100%); min-height: 22cqw; }
.ebx-seq { display: grid; gap: 1.3cqw; }
.ebx-seq > div { display: grid; grid-template-columns: auto 13cqw 1fr; gap: 2.4cqw; align-items: center; padding: 1.1cqw 2cqw; border-radius: 2cqw; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); font-size: 2.9cqw; color: #e6e7ec; }
.ebx-seq i { display: grid; place-items: center; width: 5.6cqw; height: 5.6cqw; border-radius: 1.4cqw; } .ebx-seq i svg { width: 64%; height: 64%; }
.ebx-seq b { font-weight: 800; }
.ebx-dash { padding: 2.6cqw; border-radius: 2cqw; background: #fff; color: #0a0b0f; }
.ebx-dt { display: flex; gap: 3cqw; font-weight: 800; font-size: 2.6cqw; color: #3a3d48; }
.ebc-scr .ebx-dt { color: #e6e7ec; }
.ebx-dt .g { color: #1a73e8; } .ebx-dt .m { color: #0866ff; }
.ebc-scr .ebx-dt .g, .ebc-scr .ebx-dt .m { color: #8fb8ff; }
.ebx-kp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqw; margin-top: 2cqw; }
.ebx-kp > div { border-radius: 1.2cqw; padding: 1.4cqw; background: rgba(10,11,15,0.05); }
.ebc-scr .ebx-kp > div { background: rgba(255,255,255,0.06); }
.ebx-kp span { display: block; font-size: 2.2cqw; color: #6b6e7a; } .ebc-scr .ebx-kp span { color: #b9bcc8; }
.ebx-kp b { display: block; font-size: 3.4cqw; font-weight: 800; }
.ebx-kp em { font-style: normal; font-size: 2.2cqw; font-weight: 800; color: #1f9d4b; } .ebc-scr .ebx-kp em { color: #7cf03a; }
.ebx-dash svg { display: block; width: 100%; height: 6cqw; margin-top: 1.6cqw; }
.ebx-waste { display: grid; gap: 1.8cqw; }
.ebx-waste > div { display: flex; align-items: center; gap: 2.6cqw; padding: 1.8cqw 2.2cqw; border-radius: 2cqw; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); font-size: 3cqw; color: #e6e7ec; }
.ebx-waste i { display: grid; place-items: center; width: 5cqw; height: 5cqw; border-radius: 1cqw; background: #e5484d; color: #fff; font-style: normal; font-weight: 800; font-size: 4cqw; line-height: 1; }
.ebx-bars { display: flex; align-items: flex-end; gap: 3cqw; height: 26cqw; }
.ebx-bars > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 1cqw; font-size: 2.6cqw; color: #b9bcc8; }
.ebx-bars b { color: #fff; font-size: 2.8cqw; }
.ebx-bars u { display: block; width: 100%; border-radius: 1cqw 1cqw 0 0; background: linear-gradient(180deg, #7cf03a, #3fae2a); }
.ebx-plan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.ebx-plan > div { padding: 2.4cqw 2cqw; border-radius: 2cqw; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); }
.ebx-plan b { display: block; font-weight: 800; font-size: 3.2cqw; }
.ebx-plan em { display: block; font-style: normal; font-weight: 800; font-size: 2.4cqw; margin: 0.6cqw 0 1.6cqw; color: #fff; }
.ebx-plan span { display: grid; grid-template-columns: auto 1fr; gap: 1.4cqw; align-items: center; font-size: 2.3cqw; color: #d6d8e0; margin-top: 1.2cqw; }
.ebx-plan i { width: 3cqw; height: 3cqw; }

/* ebook page panels on the ebook landing page */
.ph.bone-ph.csv.eb { font-family: 'Manrope', sans-serif; }
.eb-chp { position: absolute; z-index: 6; top: 5.5cqw; right: 5.5cqw; display: inline-flex; align-items: center; gap: 1.4cqw; padding: 1cqw 2.4cqw 1cqw 1cqw; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); color: #fff; font-family: var(--mono); font-weight: 700; font-size: clamp(8px, 1.8cqw, 11px); letter-spacing: 0.14em; text-transform: uppercase; }
.eb-chp i { display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; min-width: 18px; min-height: 18px; border-radius: 50%; color: #0a0b0f; font-style: normal; font-weight: 800; font-size: clamp(7px, 1.4cqw, 10px); letter-spacing: 0; }
.ph.bone-ph.csv.eb .csv-tag { z-index: 6; }
.ebx.eb-back { z-index: 2; left: 7cqw; top: 17cqw; width: 33cqw; transform: rotate(-7deg); filter: brightness(0.82); }
.ebx.eb-front { z-index: 3; left: 32cqw; top: 9.5cqw; width: 39cqw; transform: rotate(2deg); box-shadow: 0 3cqw 8cqw rgba(0,0,0,0.6), -1.4cqw 0 4cqw rgba(0,0,0,0.35); }
.eb-note { position: absolute; z-index: 5; right: 3.5cqw; bottom: 7cqw; display: flex; align-items: flex-start; gap: 1.6cqw; max-width: 31cqw; padding: 1.8cqw 2.4cqw 1.8cqw 1.6cqw; border-radius: 2.6cqw 2.6cqw 0.6cqw 2.6cqw; background: linear-gradient(90deg, #f1980d 0%, #ff5c20 100%); color: #fff; box-shadow: 0 2cqw 4cqw rgba(0,0,0,0.35); font-weight: 800; font-size: clamp(9px, 2cqw, 14px); line-height: 1.25; }
.eb-note i { flex: none; display: grid; place-items: center; width: 5cqw; height: 5cqw; min-width: 18px; min-height: 18px; border-radius: 50%; color: #0a0b0f; font-style: normal; font-size: clamp(7px, 1.5cqw, 11px); }
.eb-note small { display: block; font-size: clamp(6px, 1.25cqw, 9px); font-weight: 700; opacity: 0.85; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.4cqw; }


/* ===== Discovery call page: named team photos ===== */
.au-visual { position: relative; }
.au-name { position: absolute; z-index: 3; left: 6px; bottom: calc(100% + 14px); color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.45); line-height: 1.25; }
.au-name b { display: block; font-weight: 800; font-size: 20px; letter-spacing: -0.01em; }
.au-name span { display: block; font-size: 16px; font-weight: 500; opacity: 0.92; }
.ph.bone-ph.csv.dcx { font-family: 'Manrope', sans-serif; }
.dcx-ph { position: absolute; z-index: 1; right: 0; bottom: 0; width: 64cqw; max-width: none; aspect-ratio: 700 / 797; background-position: center bottom; background-size: contain; background-repeat: no-repeat; }
.dcx-name { position: absolute; z-index: 3; left: 41cqw; bottom: 4.5cqw; text-align: left; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.55); line-height: 1.25; }
.dcx-name b { display: block; font-weight: 800; font-size: clamp(11px, 3cqw, 20px); letter-spacing: -0.01em; }
.dcx-name span { display: block; font-size: clamp(9px, 2.4cqw, 16px); font-weight: 500; opacity: 0.92; }
.csv-card.dcx-card { z-index: 2; left: 5cqw; top: 16cqw; bottom: auto; width: 47cqw; padding: 3.8cqw 4cqw; border-radius: clamp(10px, 2.4cqw, 16px); }
.dcx-card .csv-list li { font-size: clamp(9px, 2.4cqw, 14px); }
.dcx-card .csv-h { font-size: clamp(7px, 1.7cqw, 11px); margin-bottom: 2.4cqw; }
.dcx-card .csv-list { gap: 2cqw; }
.dcx-cases { display: grid; gap: 2cqw; }
.dcx-cases > div { display: grid; grid-template-columns: 1fr auto; column-gap: 2cqw; align-items: baseline; padding-bottom: 2cqw; border-bottom: 1px dashed #e2deea; }
.dcx-cases > div:last-child { border-bottom: 0; padding-bottom: 0; }
.dcx-cases span { grid-column: 1 / -1; font-family: var(--mono); font-weight: 700; font-size: clamp(6px, 1.5cqw, 10px); letter-spacing: 0.1em; text-transform: uppercase; color: #6b6b78; }
.dcx-cases b { font-weight: 800; font-size: clamp(14px, 5.6cqw, 34px); letter-spacing: -0.03em; line-height: 1.05; background: linear-gradient(90deg, #ae00f4 0%, #e86b80 60%, #eeba02 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dcx-cases em { font-style: normal; font-weight: 700; font-size: clamp(8px, 2.2cqw, 13px); color: #0d0d14; text-align: right; }
.dcx-opts { display: grid; gap: 1.2cqw; }
.dcx-opts > div { display: flex; align-items: center; gap: 2cqw; padding: 1.8cqw 2.2cqw; border-radius: 10px; background: #f4f2f8; font-weight: 700; font-size: clamp(8px, 2.2cqw, 13px); line-height: 1.25; position: relative; }
.dcx-opts i { flex: none; width: 2.8cqw; height: 2.8cqw; min-width: 10px; min-height: 10px; border-radius: 50%; border: 2px solid #c9c5d3; }
.dcx-opts .on { background: linear-gradient(90deg, rgba(174,0,244,0.10), rgba(232,107,128,0.10)); box-shadow: inset 0 0 0 1.5px #ae00f4; }
.dcx-opts .on i { border-color: #ae00f4; background: radial-gradient(circle, #ae00f4 45%, #fff 50%); }
.dcx-opts em { position: absolute; top: 0; right: 2cqw; translate: 0 -50%; font-style: normal; padding: 0.4cqw 1.6cqw; border-radius: 999px; background: linear-gradient(90deg, #f1980d 0%, #ff5c20 100%); color: #fff; font-family: var(--mono); font-size: clamp(6px, 1.3cqw, 9px); letter-spacing: 0.1em; text-transform: uppercase; }
.dcx-opts .on { margin-top: 1.2cqw; }


.tm-tag.tm-tag-long { letter-spacing: 0.06em; white-space: nowrap; }
@media (max-width: 900px) { .tm-tag.tm-tag-long { white-space: normal; } }
/* About team: 3 + 3 on desktop */
@media (min-width: 1101px) { #page-about .tm-page { max-width: 1080px; margin: 0 auto; } #page-about .tm-card { flex: 0 0 calc((100% - 56px) / 3); } }
/* ===== About page: ownership card (replaces unverified retention image) ===== */
.cv-card.abx-card { left: 47%; top: 14%; width: 40%; padding: 4.5% 4.5% 5%; border-radius: 16px; background: #fff; color: #0d0d14; box-shadow: 0 24px 50px rgba(0,0,0,0.30); font-family: 'Manrope', sans-serif; container-type: inline-size; }
.abx-card small { display: block; font-family: var(--mono); font-weight: 700; font-size: clamp(8px, 4.6cqw, 11px); letter-spacing: 0.14em; color: #6b6b78; }
.abx-card b { display: block; margin: 3cqw 0 6cqw; font-weight: 800; font-size: clamp(18px, 11cqw, 34px); line-height: 1; letter-spacing: -0.03em; background: linear-gradient(90deg, #ae00f4 0%, #e86b80 60%, #eeba02 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.abx-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4cqw; }
.abx-card li { display: flex; align-items: center; gap: 4cqw; font-weight: 700; font-size: clamp(10px, 6cqw, 15px); }
.abx-card li::before { content: ""; flex: none; width: 6cqw; height: 6cqw; min-width: 10px; min-height: 10px; border-radius: 50%; background: #04c34b; box-shadow: 0 0 0 3px rgba(4,195,75,0.15); }


/* ===== NAV v2 (Oct 2026): services up front, case-study proof, resources, phone + free audit ===== */
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-tel { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.nav-tel:hover { color: var(--lemon); }
.nav-tel-ic { width: 16px; height: 16px; color: var(--bone-dim); flex: none; }
.nav-phone-m { display: none; }
.dropdown-item.dd-case, .dropdown-item.dd-res { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.dropdown-item .dd-go { flex: none; width: 12px; height: 12px; fill: var(--lemon); color: var(--lemon); opacity: 0.75; transition: transform 0.15s, opacity 0.15s; }
.dropdown-item:hover .dd-go { opacity: 1; transform: translate(2px, -2px); }
.dropdown-item.dd-res .dd-go { fill: #fff; color: #fff; opacity: 0.55; }
.dropdown-item.dd-res:hover .dd-go { fill: var(--lemon); color: var(--lemon); opacity: 1; }
.nav-item .dropdown.dd-contact { min-width: 380px; left: auto; right: -40px; transform: translateY(-6px); }
.nav-item:hover .dropdown.dd-contact { transform: translateY(0); }
.dropdown-item.dd-rec { box-shadow: inset 0 0 0 1px rgba(240,255,23,0.35); }
.dropdown-item.dd-rec .dd-go { fill: var(--lemon); color: var(--lemon); opacity: 1; }
.nav-item .dropdown.dd-cases { display: grid; grid-template-columns: 1fr 1fr; min-width: 470px; }
.nav-item .dropdown.dd-cases .dd-all { grid-column: 1 / -1; }
.dropdown-item .dd-sub { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 700; letter-spacing: 0; color: var(--lemon); }
.dropdown-item.dd-res .dd-sub { color: var(--bone-dim); font-weight: 500; }
.dropdown-item .dd-free { font-style: normal; font-family: var(--mono); font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; background: var(--lemon); color: #000; padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; }
.dropdown-item.dd-all { display: inline-flex; align-items: center; gap: 8px; color: var(--lemon); background: transparent; font-size: 14px; }
.dropdown-item.dd-all svg { width: 11px; height: 11px; fill: currentColor; }
@media (max-width: 1280px) { .nav-links { gap: 20px; } .nav-right { gap: 14px; } }
@media (min-width: 901px) { .site-nav .nav-links .nav-link { white-space: nowrap; } }
@media (max-width: 1100px) { .nav-tel { display: none; } .nav-links { gap: 16px; } }
@media (max-width: 900px) {
  .nav-right { display: none !important; }
  .nav-item .dropdown.dd-cases { display: flex; min-width: 0; }
  .nav-item .dropdown.dd-contact { min-width: 0; right: auto; }
  .dropdown-item .dd-sub { font-size: 12px; }
  .nav-links.open .dropdown-item { white-space: normal; }
  .nav-links.open .dd-cases .dd-case:nth-of-type(n+5) { display: none; }
  .nav-links.open .nav-cta-mobile { order: 98; }
  .site-nav:has(.nav-links.open) { z-index: 300 !important; }
  .nav-links.open .nav-phone-m { order: 99; display: inline-flex; justify-content: center; align-items: center; gap: 8px; margin-top: 12px; padding: 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); color: #fff; font-weight: 700; font-size: 14px; }
}


/* ===== Growth marketing plan page: green "planned" pins ===== */
.ar-side.ar-side-g li::before { background: #04c34b; }
.ar-flow.ar-flow3 { grid-template-columns: repeat(3, 1fr) !important; }

/* ===== Case study heroes: CTA pair (replaces the outcome stats) ===== */
.csh-ctas { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px; }
.csh-ctas .btn { justify-content: center; }
.btn.btn-grad { background: linear-gradient(90deg, #f1980d 0%, #e5468f 55%, #ae00f4 100%); color: #fff; border: 0; }
.btn.btn-grad:hover { filter: brightness(1.08); }
@media (max-width: 560px) { .csh-ctas { display: grid; grid-template-columns: 1fr; } }

/* ===== Secondary buttons: full brand-gradient fill site-wide (Oct 2026) ===== */
.btn.btn.outline { color: #fff; border-color: transparent; }
.btn.btn.outline::after { opacity: 1; }
.btn.btn.outline::before { opacity: 0; }
.btn.btn.outline:hover { filter: brightness(1.08); }
.btn + .btn.dark-outline, .btn-pair .btn.dark-outline { position: relative; isolation: isolate; color: #fff; border-color: transparent; background: linear-gradient(98deg, #eeba02 0%, #e86b80 30%, #ae00f4 68%, #39c6e9 118%); }
.btn + .btn.dark-outline:hover, .btn-pair .btn.dark-outline:hover { color: #fff; filter: brightness(1.08); }
.btn.btn-grad { background: linear-gradient(98deg, #eeba02 0%, #e86b80 30%, #ae00f4 68%, #39c6e9 118%); }

/* ===== Team-member heroes (audit, discovery call, growth plan): bigger photo + cards on desktop ===== */
@media (min-width: 1101px) {
  .au-grid { grid-template-columns: 1.05fr 1fr; gap: 40px; }
  .au-girl { width: min(118%, 720px); }
  .au-visual .au-cards { width: min(112%, 650px); bottom: 96px; gap: 14px; }
  .au-visual .au-cards .ab-card { min-height: 122px; padding: 0 24px; border-radius: 18px; }
  .au-visual .au-cards .ab-card-l { font-size: 11px; }
  .au-visual .au-cards .ab-card-v { font-size: clamp(32px, 2.8vw, 44px); }
  .au-visual .au-cards .ab-card-arw { width: 22px; height: 22px; right: 20px; top: 20px; }
  .au-name b { font-size: 24px; } .au-name span { font-size: 18px; }
}

/* ===== Problem-block CTA cards (Oct 2026): each challenge links to its best-fit funnel step ===== */
.pcta { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; max-width: 420px; margin-top: 4px; padding: 15px 18px; background: #0b0b0d; border-radius: 10px; color: #fff; text-decoration: none; box-shadow: 0 10px 24px rgba(0,0,0,0.14); transition: transform 0.15s, box-shadow 0.15s; }
.pcta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.2); }
.pcta.pcta-rec { box-shadow: inset 0 0 0 1px rgba(240,255,23,0.45), 0 10px 24px rgba(0,0,0,0.14); }
.pcta-txt { display: block; min-width: 0; }
.pcta-t { display: block; font-weight: 700; font-size: 15px; line-height: 1.3; color: #fff; }
.pcta-sub { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,0.62); }
.pcta-badge { display: inline-block; font-style: normal; font-family: var(--mono); font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; background: var(--lemon); color: #000; padding: 3px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; }
.pcta-go { flex: none; width: 13px; height: 13px; fill: #fff; color: #fff; opacity: 0.6; transition: transform 0.15s, opacity 0.15s; }
.pcta.pcta-rec .pcta-go, .pcta:hover .pcta-go { fill: var(--lemon); color: var(--lemon); opacity: 1; }
.pcta:hover .pcta-go { transform: translate(2px, -2px); }
@media (max-width: 900px) { .pcta { max-width: 460px; } }
@media (max-width: 560px) { .pcta { max-width: none; } }
@media (max-width: 420px) { .pcta { padding: 14px 15px; gap: 12px; } .pcta-t { font-size: 14px; } .pcta-sub { font-size: 12px; } }


/* ===== Playbook sign-up: 2-field lite form (Oct 2026) ===== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ebf-card.ebf-card.ebf-lite { max-width: 560px; padding: 36px 36px 34px; }
.ebf-card.ebf-lite .field { margin-bottom: 16px; }
.ebf-card.ebf-lite .field input { width: 100%; box-sizing: border-box; background: #fff !important; color: #111 !important; border: 1px solid #cfd2d6 !important; border-radius: 12px !important; padding: 17px 18px !important; font-size: 16px !important; line-height: 1.2; }
.ebf-card.ebf-lite .field input::placeholder { color: #8a8d93; opacity: 1; }
.ebf-card.ebf-lite .ebf-submit { margin-top: 24px; }
@media (max-width: 560px) { .ebf-card.ebf-card.ebf-lite { padding: 24px 18px 22px; } }


/* Contact form anchor offset under sticky nav */
#contact-form { scroll-margin-top: 110px; }

/* Role cards: whole card clicks through to the role page */
.role-card:has(.role-card-cta[href]) { cursor: pointer; }
.role-card:hover .role-card-arrow { transform: translate(2px, -2px); transition: transform 0.15s; }

/* ===== ABOUT hero: team group photo (Oct 2026) ===== */
.ab-team::before { content: ""; position: absolute; inset: 8% 6% 10%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(174,0,244,0.32), rgba(57,198,233,0.12) 55%, transparent 100%); filter: blur(30px); }
.ab-visual .ab-cards { z-index: 2; left: auto; right: 6%; top: auto; bottom: 5%; width: 70%; height: 15%; flex-direction: row; gap: 12px; }
.ab-visual .ab-card { padding: 0 5%; }
.ab-visual .ab-card-v { font-size: clamp(20px, 1.9vw, 30px); }
.ab-visual .ab-card-arw { top: 14%; right: 7%; width: clamp(14px, 1.2vw, 20px); height: clamp(14px, 1.2vw, 20px); }
.js .ab-team { opacity: 0; translate: 0 30px; transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s, translate 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s; }
.js .ab-hero.ab-in .ab-team { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .js .ab-team { opacity: 1; translate: none; transition: none; } }
@media (max-width: 1100px) { .ab-visual { aspect-ratio: 16 / 10; } .ab-bg { background-size: cover; } .ab-team { right: auto; left: 50%; translate: -50% 0; width: 80%; bottom: 12%; } .js .ab-team { translate: -50% 30px; } .js .ab-hero.ab-in .ab-team { translate: -50% 0; } .ab-visual .ab-cards { right: auto; left: 50%; translate: -50% 0; width: 68%; height: 13%; } }
@media (max-width: 900px) {
  .ab-team { left: 50%; right: auto; translate: -50% 0; width: min(100%, 600px); bottom: 23%; }
  .js .ab-team { translate: -50% 30px; } .js .ab-hero.ab-in .ab-team { translate: -50% 0; }
  .ab-visual .ab-cards { left: 50%; translate: -50% 0; top: auto; bottom: 4%; width: min(94%, 460px); height: 21%; flex-direction: row; gap: 8px; }
  .ab-visual .ab-card { padding: 0 10px; border-radius: 14px; }
  .ab-visual .ab-card-l { font-size: 8.5px; } .ab-visual .ab-card-v { font-size: 20px; } .ab-visual .ab-card-arw { width: 14px; height: 14px; top: 10px; right: 10px; }
}
/* Shared result-card photos (stored once) */
.qc-photo.qcp-1 { background-image: url(/images/ae15592f5259.jpg); }
.qc-photo.qcp-2 { background-image: url(/images/89ab859bf145.jpg); }
.qc-photo.qcp-3 { background-image: url(/images/405c9816ee39.jpg); }
.qc-photo.qcp-4 { background-image: url(/images/58240a98fa75.jpg); }
.qc-photo.qcp-5 { background-image: url(/images/9cd739ed3cae.jpg); }
.qc-photo.qcp-6 { background-image: url(/images/6ba20477d1be.jpg); }
.qc-photo.qcp-7 { background-image: url(/images/c59c7f7f0296.jpg); }
.qc-photo.qcp-8 { background-image: url(/images/4cbe977649fc.jpg); }
.qc-photo.qcp-9 { background-image: url(/images/0d639d95e1ea.jpg); }

/* Case studies grid: filter hidden for now; linked cards click through */
.csf-sec.csf-hidden { display: none !important; }
.csg-grid .qc-card.qc-link { cursor: pointer; }
.csg-grid .qc-card.qc-link:hover .qc-cta { color: var(--lemon); }

/* Growth plan: "What you'll get" checklists */
.gp-get { margin: 4px 0 26px; padding: 18px 20px; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; }
.gp-get-h { font-family: var(--mono); font-size: 10.5px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(0,0,0,0.55); margin-bottom: 12px; }
.gp-get ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gp-get li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; font-size: 14.5px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.gp-get li svg { width: 12px; height: 12px; margin-top: 4px; fill: #e86b80; color: #e86b80; }
@media (max-width: 560px) { .gp-get { padding: 16px; } .gp-get li { font-size: 14px; } }

/* ===== Growth plan: deck-style example slides (Oct 2026, from CA strategy deck) ===== */
.dkv .csv-tag { z-index: 5; }
.dk { position: absolute; z-index: 2; left: 4.5cqw; right: 4.5cqw; top: 13.5cqw; bottom: 8cqw; display: flex; flex-direction: column; border-radius: 2cqw; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #2a1a52 0%, #12122a 55%, #0b0b18 100%); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 3cqw 6cqw rgba(0,0,0,0.5); color: #fff; }
.dk-bar { display: flex; align-items: center; gap: 2cqw; padding: 1.3cqw 2.2cqw; background: linear-gradient(90deg, #0b0b14 0 30%, #e8603c 55%, #c43aa8 80%, #7a33d6 100%); font-size: clamp(5px, 1.3cqw, 9px); font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.dk-bar b { font-weight: 800; } .dk-bar span { opacity: 0.95; } .dk-bar em { margin-left: auto; font-style: normal; opacity: 0.9; }
.dk-body { flex: 1; padding: 2.2cqw; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
/* 1 keyword hub */
.dk-hubgrid { display: grid; grid-template-columns: 1fr 1.05fr 1fr; gap: 1.8cqw; align-items: center; }
.dk-col { display: grid; gap: 1.6cqw; }
.dk-kw { position: relative; background: #2b2b48; border-radius: 1.2cqw; padding: 1.4cqw 1.6cqw; }
.dk-kw i { position: absolute; top: -1.2cqw; right: -1cqw; display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: #2c3cff; font-style: normal; font-weight: 800; font-size: clamp(5px, 1.4cqw, 10px); box-shadow: 0 0 0 0.5cqw rgba(44,60,255,0.25); }
.dk-kw span { display: block; font-size: clamp(5px, 1.25cqw, 9px); font-weight: 600; color: rgba(255,255,255,0.8); line-height: 1.2; }
.dk-kw b { display: block; margin-top: 0.4cqw; font-size: clamp(9px, 3cqw, 21px); font-weight: 800; color: #F0FF17; letter-spacing: -0.02em; }
.dk-hub { text-align: center; padding: 2.6cqw 1.6cqw; border-radius: 1.6cqw; background: linear-gradient(#14142a, #14142a) padding-box, linear-gradient(135deg, #e86b80, #ae00f4 55%, #39c6e9) border-box; border: 0.5cqw solid transparent; box-shadow: 0 0 5cqw rgba(174,0,244,0.45); }
.dk-hub span { display: block; font-size: clamp(6px, 1.6cqw, 11px); font-weight: 800; }
.dk-hub b { display: block; margin: 0.6cqw 0; font-size: clamp(16px, 6cqw, 42px); font-weight: 800; color: #F0FF17; letter-spacing: -0.03em; line-height: 1; }
.dk-hub small { display: block; font-size: clamp(5px, 1.15cqw, 8px); color: rgba(255,255,255,0.7); }
/* 2 SERP */
.dk-serpwrap { display: grid; grid-template-columns: 1fr 22cqw; gap: 2cqw; align-items: center; }
.dk-serp { background: #fff; color: #202124; border-radius: 1.4cqw; padding: 1.8cqw 2cqw; }
.dk-g { font-weight: 800; font-size: clamp(8px, 2.4cqw, 16px); letter-spacing: -0.02em; display: inline-block; margin-right: 1.4cqw; vertical-align: middle; }
.dk-q { display: inline-block; vertical-align: middle; padding: 0.6cqw 2cqw; border-radius: 999px; border: 1px solid #dfe1e5; font-size: clamp(5px, 1.2cqw, 9px); color: #444; }
.dk-sp { margin: 1.4cqw 0 0.8cqw; font-size: clamp(5px, 1.2cqw, 9px); font-weight: 800; }
.dk-res { position: relative; padding: 1cqw 9cqw 1cqw 1cqw; border-radius: 0.8cqw; margin-bottom: 0.6cqw; }
.dk-res.hl { outline: 0.35cqw dashed #4d6bfe; outline-offset: 0.2cqw; background: rgba(77,107,254,0.05); }
.dk-res-t { display: flex; align-items: center; gap: 0.8cqw; font-size: clamp(5px, 1.05cqw, 8px); color: #555; }
.dk-res-t i { width: 2cqw; height: 2cqw; border-radius: 50%; background: #e8eaed; }
.dk-res-h { height: 1.2cqw; width: 70%; margin: 0.6cqw 0 0.5cqw; border-radius: 0.4cqw; background: #1a0dab; opacity: 0.85; }
.dk-ln { height: 0.7cqw; width: 85%; margin-top: 0.4cqw; border-radius: 0.4cqw; background: #dadce0; } .dk-ln.s { width: 60%; }
.dk-thumb { position: absolute; right: 1cqw; top: 1cqw; width: 7cqw; height: 5.4cqw; border-radius: 0.6cqw; background: linear-gradient(135deg, #9aa3b5, #5d6577); }
.dk-flag { position: absolute; left: 1cqw; bottom: -1.8cqw; z-index: 1; font-style: normal; padding: 0.3cqw 1.2cqw; border-radius: 999px; background: #4d6bfe; color: #fff; font-size: clamp(5px, 1cqw, 8px); font-weight: 800; }
.dk-call { display: grid; gap: 1.4cqw; }
.dk-pill { padding: 1.4cqw 1.6cqw; border-radius: 1.2cqw; background: #2b2b48; font-size: clamp(5px, 1.2cqw, 9px); font-weight: 600; color: rgba(255,255,255,0.85); }
.dk-pill b { display: block; font-size: clamp(9px, 2.8cqw, 19px); font-weight: 800; }
.dk-pill.r b { color: #ff6b6b; } .dk-pill.a b { color: #ffb020; } .dk-pill.g b { color: #F0FF17; }
/* 3 flipped funnel */
.dk-fgrid { display: grid; grid-template-columns: 13cqw 1fr 13cqw; gap: 1.6cqw; align-items: center; }
.dk-side { display: grid; justify-items: center; gap: 0.8cqw; text-align: center; }
.dk-side > span { font-size: clamp(5px, 1.15cqw, 8px); font-weight: 700; color: rgba(255,255,255,0.75); }
.dk-sbox { width: 100%; padding: 0.8cqw 0; border-radius: 0.8cqw; border: 1px solid rgba(240,255,23,0.6); font-size: clamp(5px, 1.3cqw, 9px); font-weight: 800; color: #F0FF17; }
.dk-sbox.hi { background: linear-gradient(135deg, #3b2cff, #ae00f4); border-color: transparent; color: #fff; }
.dk-sarr svg { width: 2.6cqw; height: 2.6cqw; fill: #39c6e9; color: #39c6e9; transform: rotate(135deg); }
.dk-pyr { position: relative; display: grid; justify-items: center; gap: 0.7cqw; padding: 1cqw 0 0; }
.dk-pyr::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; bottom: 6cqw; z-index: -1; background: radial-gradient(60% 70% at 50% 60%, rgba(174,0,244,0.35), transparent 70%); }
.dk-pyr { z-index: 0; }
.dk-tier { position: relative; padding: 0.8cqw 0.6cqw; border-radius: 0.5cqw; text-align: center; font-size: clamp(5px, 1.2cqw, 9px); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-tier.c1 { background: linear-gradient(90deg, #e86b80, #ae00f4); } .dk-tier.c2 { background: linear-gradient(90deg, #22b8d6, #39c6e9); }
.dk-tier.c3 { background: linear-gradient(90deg, #7a33d6, #ae00f4); } .dk-tier.c4 { background: linear-gradient(90deg, #f08a24, #f5a623); }
.dk-tier.c5 { background: linear-gradient(90deg, #ef5a2c, #f08a24); } .dk-tier.c6 { background: linear-gradient(90deg, #f5a623, #ef5a2c); }
.dk-sale { position: relative; margin-top: 0.6cqw; display: grid; place-items: center; width: 7.5cqw; height: 7.5cqw; border-radius: 50%; border: 0.45cqw solid #F0FF17; box-shadow: 0 0 3cqw rgba(240,255,23,0.45); background: #12122a; font-size: clamp(6px, 1.5cqw, 11px); font-weight: 800; }
/* 4 traffic -> landing page -> retargeting */
.dk-lpgrid { display: grid; grid-template-columns: 1fr 16.5cqw 1fr; gap: 2.4cqw; align-items: center; }
.dk-cap { display: block; margin-bottom: 1cqw; font-size: clamp(5px, 1.2cqw, 9px); font-weight: 800; color: rgba(255,255,255,0.8); text-align: center; }
.dk-tf { display: grid; gap: 1.2cqw; }
.dk-tfb { padding: 1.2cqw 1.4cqw; border-radius: 1cqw; font-size: clamp(6px, 1.45cqw, 10px); font-weight: 800; text-align: center; }
.dk-tfb small { display: block; font-size: clamp(4.5px, 0.95cqw, 7px); font-weight: 600; opacity: 0.85; }
.dk-tfb.m { background: linear-gradient(90deg, #ef5a2c, #f5a623); } .dk-tfb.g { background: linear-gradient(90deg, #7a33d6, #ae00f4); }
.dk-arr { justify-self: end; } .dk-arr svg { width: 3.4cqw; height: 3.4cqw; fill: #39c6e9; color: #39c6e9; transform: rotate(45deg); }
.dk-phone { aspect-ratio: 9 / 18; border: 0.9cqw solid #1c1b26; border-radius: 3.2cqw; overflow: hidden; background: #fff; box-shadow: 0 0 5cqw rgba(240,255,23,0.25); }
.dk-scr { height: 100%; display: flex; flex-direction: column; color: #0d0d14; }
.dk-lphero { flex: 0 0 34%; background: linear-gradient(160deg, #3a3f4f, #121418 70%); }
.dk-lph { padding: 1.4cqw 1.6cqw 0.6cqw; font-size: clamp(7px, 2.2cqw, 15px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.dk-lph span { color: #ae00f4; }
.dk-stars { padding: 0 1.6cqw; font-size: clamp(5px, 1.1cqw, 8px); color: #f5a623; } .dk-stars small { color: #555; font-weight: 700; }
.dk-lpbtn { margin: 1.2cqw 1.6cqw 1cqw; padding: 1cqw 0; border-radius: 999px; background: #F0FF17; text-align: center; font-size: clamp(5px, 1.15cqw, 8px); font-weight: 800; }
.dk-lpln { height: 0.8cqw; margin: 0.5cqw 1.6cqw 0; border-radius: 0.4cqw; background: #e6e6ee; } .dk-lpln.s { width: 55%; }
.dk-rt { display: grid; gap: 1cqw; }
.dk-chip2 { display: flex; align-items: center; gap: 1cqw; padding: 0.9cqw 1.2cqw; border-radius: 1cqw; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); font-size: clamp(5px, 1.3cqw, 9px); font-weight: 700; }
.dk-chip2 i { display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; color: #fff; font-style: normal; font-weight: 800; font-size: clamp(5px, 1.3cqw, 9px); }
.dk-lead { margin-top: 0.8cqw; padding: 1.2cqw; border-radius: 1cqw; border: 1px solid #F0FF17; color: #F0FF17; text-align: center; font-size: clamp(5px, 1.3cqw, 9px); font-weight: 800; }
.dk-client { padding: 1.2cqw; border-radius: 1cqw; background: linear-gradient(135deg, #7a33d6, #e86b80); text-align: center; font-size: clamp(5px, 1.3cqw, 9px); font-weight: 800; }
/* 5 strategy cards + roadmap */
.dk-scs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.dk-sc { display: flex; flex-direction: column; border-radius: 1.4cqw; overflow: hidden; background: #191932; border: 1px solid rgba(255,255,255,0.12); }
.dk-sc.s2 { box-shadow: 0 0 0 0.35cqw rgba(174,0,244,0.6), 0 0 4cqw rgba(174,0,244,0.35); }
.dk-sch { position: relative; padding: 1.2cqw 1.4cqw; }
.dk-sch b { display: block; font-size: clamp(7px, 1.9cqw, 13px); font-weight: 800; }
.dk-sch span { display: block; font-size: clamp(4.5px, 1.05cqw, 8px); font-weight: 700; opacity: 0.9; }
.dk-sch svg { position: absolute; top: 1.2cqw; right: 1.2cqw; width: 1.8cqw; height: 1.8cqw; fill: #F0FF17; color: #F0FF17; }
.s1 .dk-sch { background: linear-gradient(90deg, #1546d8, #22b8d6); } .s2 .dk-sch { background: linear-gradient(90deg, #7a33d6, #e86b80); } .s3 .dk-sch { background: linear-gradient(90deg, #e5484d, #f08a24); }
.dk-scb { flex: 1; padding: 1.2cqw 1.4cqw; }
.dk-scb em { display: block; margin-bottom: 0.8cqw; font-style: normal; font-size: clamp(5px, 1.15cqw, 8px); font-weight: 800; text-align: center; }
.dk-scr2 { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; padding: 0.55cqw 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: clamp(4.5px, 1.05cqw, 8px); color: rgba(255,255,255,0.8); }
.dk-scr2 i { width: 4cqw; height: 0.7cqw; border-radius: 0.4cqw; background: rgba(255,255,255,0.18); }
.dk-scp { padding: 1cqw 1.4cqw; text-align: center; font-size: clamp(6px, 1.5cqw, 11px); font-weight: 800; background: rgba(255,255,255,0.05); }
.s2 .dk-scp { background: linear-gradient(90deg, #7a33d6, #e86b80); color: #fff; }
.dk-road { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; margin-top: 1.8cqw; }
.dk-road span { flex: 1; padding: 0.9cqw 1cqw; border-radius: 1cqw; background: #2b2b48; text-align: center; font-size: clamp(5px, 1.3cqw, 9px); font-weight: 800; color: #F0FF17; }
.dk-road span b { display: block; font-size: clamp(4.5px, 1cqw, 7.5px); color: #fff; font-weight: 700; }
.dk-road > svg { flex: none; width: 2.2cqw; height: 2.2cqw; fill: #39c6e9; color: #39c6e9; transform: rotate(45deg); }
.dkv .ar-note { z-index: 4; }
/* About hero without team photo: keep the CA wall sign in view on smaller screens */
@media (max-width: 1100px) { .ab-bg { background-position: 78% center !important; } }
/* ===== Case study cards: Peters Glen (no photo on file yet) + text logo ===== */
.qc-photo.qcp-pg { background: url(/images/2fcd6c090386.svg) center / cover no-repeat, #12081f !important; }
@media (max-width: 560px) { .qc-stat > span { display: block; margin-left: 0 !important; margin-top: 6px; vertical-align: 0 !important; white-space: normal !important; } .qc-stat > span + .arrow { display: none; } }
.qc-logo.qc-logo-txt { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; width: auto; height: auto; }
/* ===== Hero result cards: photo fit, LDR logo, click-through ===== */
.hr-card [class^="cs-photo-"] { background-size: cover !important; background-repeat: no-repeat; }
.hr-card .cs-photo-sals { background-position: center 22% !important; }
.hr-card .cs-photo-ldr { background-position: 55% center !important; }
.cs-logo-ldr { background-image: url(/images/eb1f00f3bfbb.png); background-size: contain; background-repeat: no-repeat; background-position: left top; }
.hr-card.hr-link { cursor: pointer; }
.cs-strip-card [class^="cs-photo-"] { background-size: cover !important; background-repeat: no-repeat; }
.cs-strip-card .cs-photo-sals { background-position: center 22% !important; }
.cs-strip-card .cs-photo-ldr { background-position: 55% center !important; }
.cs-strip-card { border-radius: 20px; }
.cs-strip-card.hr-link { cursor: pointer; }
@media (min-width: 901px) and (max-width: 1360px) { .cs-strip-card div[style*="font-size: 28px"] { font-size: clamp(19px, 1.9vw, 26px) !important; } .cs-strip-card div[style*="font-size: 28px"] > span > span { font-size: 0.4em !important; } }

@media (min-width: 901px) and (max-width: 1360px) { .hr-card div[style*="font-size: 28px"] { font-size: clamp(19px, 1.9vw, 26px) !important; } .hr-card div[style*="font-size: 28px"] > span > span { font-size: 0.4em !important; } }
/* ===== Footer social links ===== */
.ft-socials { display: flex; gap: 10px; margin-top: 4px; }
.ft-soc { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.22); display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.ft-soc svg { width: 18px; height: 18px; }
@media (hover: hover) { .ft-soc:hover { background: var(--lemon); border-color: var(--lemon); color: #0a0a0a; } }
.ft-brand .ft-socials { align-self: inherit; }
@media (max-width: 900px) { .ft-socials { justify-content: center; } }
/* ===== Long offer H1s (audit + plan pages) ===== */
.au-hero .h-display.au-h1-long { font-size: clamp(34px, 3.6vw, 60px); line-height: 1.06; max-width: 820px; }
@media (max-width: 900px) { .au-hero .h-display.au-h1-long { font-size: clamp(32px, 6.4vw, 48px); max-width: none; } }
@media (min-width: 1280px) { #page-audit .au-hero .h-display.au-h1-long { font-size: clamp(40px, 3.1vw, 48px); max-width: 450px; } }
@media (min-width: 1400px) { #page-audit .au-hero .h-display.au-h1-long { max-width: 505px; } }
/* ===== Audit page: example report visuals (device mockups) ===== */
.ph.bone-ph.csv.ar { font-family: 'Manrope', sans-serif; }
.ar-you { position: absolute; z-index: 4; top: 5.5cqw; right: 5.5cqw; display: inline-flex; align-items: center; gap: 1.4cqw; padding: 1cqw 2.4cqw 1cqw 1cqw; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); color: #fff; font-family: var(--mono); font-weight: 700; font-size: clamp(8px, 1.6cqw, 11px); letter-spacing: 0.12em; text-transform: uppercase; backdrop-filter: blur(6px); }
.ar-you i { display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; min-width: 18px; min-height: 18px; border-radius: 50%; background: #0d0d14; font-style: normal; font-size: clamp(6px, 1.3cqw, 9px); letter-spacing: 0; }
.ar-dev { position: absolute; z-index: 2; background: #fff; color: #0d0d14; overflow: hidden; box-shadow: 0 3cqw 6cqw rgba(0,0,0,0.45); }
.ar-laptop { left: 9cqw; right: 9cqw; top: 15cqw; aspect-ratio: 16 / 10; border: 1.3cqw solid #1c1b26; border-bottom-width: 1.8cqw; border-radius: 2.2cqw 2.2cqw 0 0; }
.ar-deck { position: absolute; z-index: 2; left: 5cqw; right: 5cqw; top: calc(15cqw + (82cqw * 10 / 16) + 0.4cqw); height: 2.2cqw; border-radius: 0 0 2.4cqw 2.4cqw; background: linear-gradient(#3a3946, #22212c); box-shadow: 0 2cqw 4cqw rgba(0,0,0,0.4); }
.ar-deck::before { content: ""; position: absolute; left: 42%; right: 42%; top: 0; height: 0.8cqw; border-radius: 0 0 1cqw 1cqw; background: #15141d; }
.ar-tablet { left: 11cqw; right: 11cqw; top: 15cqw; aspect-ratio: 4 / 3; border: 1.6cqw solid #1c1b26; border-radius: 3.4cqw; }
.ar-phone { left: 9cqw; top: 13cqw; width: 30cqw; aspect-ratio: 9 / 19; border: 1.4cqw solid #1c1b26; border-radius: 5cqw; }
.ar-phone::before { content: ""; position: absolute; z-index: 3; top: 0.8cqw; left: 50%; translate: -50% 0; width: 9cqw; height: 1.8cqw; border-radius: 999px; background: #1c1b26; }
.ar-top { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; padding: 1.4cqw 2.4cqw; background: #f4f2f8; border-bottom: 1px solid #e7e4ee; font-family: var(--mono); font-weight: 700; font-size: clamp(5px, 1.25cqw, 9px); letter-spacing: 0.12em; text-transform: uppercase; color: #6b6b78; white-space: nowrap; }
.ar-top b { color: #0d0d14; }
.ar-body { padding: 2cqw 2.4cqw; }
.ar-h { font-weight: 800; font-size: clamp(9px, 2.9cqw, 20px); line-height: 1.05; letter-spacing: -0.02em; }
.ar-sub { font-size: clamp(6px, 1.4cqw, 10px); color: #6b6b78; margin-top: 0.5cqw; }
.ar-grid { display: grid; grid-template-columns: auto 1fr; gap: 2.6cqw; align-items: center; margin-top: 2cqw; }
.ar-ring { position: relative; width: 14cqw; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#e86b80 0 var(--v), #eceaf1 0); }
.ar-ring::before { content: ""; position: absolute; inset: 1.5cqw; border-radius: 50%; background: #fff; }
.ar-ring span { position: relative; text-align: center; font-weight: 800; font-size: clamp(9px, 3.2cqw, 22px); line-height: 1; }
.ar-ring small { display: block; font-size: clamp(5px, 1.1cqw, 8px); font-weight: 700; color: #6b6b78; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.4cqw; }
.ar-rows { display: grid; gap: 1.2cqw; }
.ar-row { display: grid; grid-template-columns: 1fr 13cqw auto; gap: 1.4cqw; align-items: center; font-size: clamp(6px, 1.45cqw, 10.5px); font-weight: 700; }
.ar-trk { height: 1.2cqw; min-height: 4px; border-radius: 999px; background: #eceaf1; overflow: hidden; }
.ar-trk i { display: block; height: 100%; border-radius: 999px; background: #e5484d; }
.ar-trk i.a { background: #f1980d; } .ar-trk i.g { background: #04c34b; }
.ar-tagr { font-family: var(--mono); font-size: clamp(5px, 1.1cqw, 8px); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: #e5484d; white-space: nowrap; }
.ar-tagr.a { color: #c77700; } .ar-tagr.g { color: #039a3c; }
.ar-note { position: absolute; z-index: 5; display: flex; align-items: flex-start; gap: 1.6cqw; max-width: 44cqw; padding: 1.8cqw 2.4cqw 1.8cqw 1.6cqw; border-radius: 2.6cqw 2.6cqw 2.6cqw 0.6cqw; background: linear-gradient(90deg, #f1980d 0%, #ff5c20 100%); color: #fff; box-shadow: 0 2cqw 4cqw rgba(0,0,0,0.35); font-size: clamp(8px, 1.9cqw, 13px); font-weight: 800; line-height: 1.2; }
.ar-note i { flex: none; display: grid; place-items: center; width: 5cqw; height: 5cqw; min-width: 18px; min-height: 18px; border-radius: 50%; background: linear-gradient(135deg, #ae00f4 0%, #39c6e9 100%); font-style: normal; font-size: clamp(7px, 1.6cqw, 11px); }
.ar-note small { display: block; font-size: clamp(6px, 1.25cqw, 9px); font-weight: 700; opacity: 0.85; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.4cqw; }
.ar-donut { width: 11cqw; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#4285f4 0 80%, #ae00f4 0); position: relative; }
.ar-donut::before { content: ""; position: absolute; inset: 2.6cqw; border-radius: 50%; background: #fff; }
.ar-leg { font-size: clamp(5px, 1.2cqw, 9px); color: #6b6b78; line-height: 1.5; }
.ar-leg b { color: #0d0d14; }
.ar-leg em { font-style: normal; display: inline-block; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; margin-right: 0.6cqw; vertical-align: middle; }
.ar-split { display: flex; align-items: center; gap: 2cqw; margin-top: 1.8cqw; padding-top: 1.6cqw; border-top: 1px dashed #e2deea; }
.ar-tbl { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); margin-top: 1.8cqw; border: 1px solid #ece9f2; border-radius: 1.2cqw; overflow: hidden; font-size: clamp(6px, 1.4cqw, 10px); font-weight: 700; }
.ar-tbl > div { padding: 1cqw 1.2cqw; border-bottom: 1px solid #f0edf5; display: flex; align-items: center; justify-content: center; }
.ar-tbl > div:nth-child(4n+1) { justify-content: flex-start; color: #3a3946; }
.ar-tbl > .hd { background: #f7f5fa; font-family: var(--mono); font-size: clamp(5px, 1.1cqw, 8px); letter-spacing: 0.08em; text-transform: uppercase; color: #6b6b78; }
.ar-tbl > .you { background: rgba(174,0,244,0.06); }
.ar-ok, .ar-no, .ar-mid { display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw; min-width: 10px; min-height: 10px; border-radius: 50%; color: #fff; font-size: clamp(6px, 1.4cqw, 10px); font-weight: 800; }
.ar-ok { background: #04c34b; } .ar-no { background: #e5484d; } .ar-mid { background: #f1980d; }
.ar-ads { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; margin-top: 1.8cqw; }
.ar-ad { border-radius: 1.2cqw; padding: 1.4cqw; min-height: 9cqw; display: flex; flex-direction: column; justify-content: flex-end; font-size: clamp(6px, 1.35cqw, 10px); font-weight: 800; line-height: 1.15; }
.ar-ad span { font-family: var(--mono); font-size: clamp(5px, 1cqw, 7.5px); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; margin-bottom: auto; }
.ar-ad.dull { background: #e9e7ee; color: #8b8996; }
.ar-ad.pop { background: linear-gradient(135deg, #ae00f4 0%, #e86b80 60%, #eeba02 100%); color: #fff; }
.ar-ad.pop b { color: #F0FF17; }
.ar-lp { position: absolute; inset: 0; padding: 4.4cqw 2cqw 2cqw; display: flex; flex-direction: column; gap: 1.4cqw; }
.ar-lp .hero { height: 13cqw; border-radius: 1.2cqw; background: linear-gradient(135deg, #5e69ec 0%, #27d0c4 100%); }
.ar-lp .ln { height: 1.3cqw; border-radius: 999px; background: #e3e0ea; }
.ar-lp .ln.s { width: 70%; } .ar-lp .ln.t { width: 85%; }
.ar-lp .btn-m { margin-top: auto; height: 4cqw; border-radius: 999px; background: #F0FF17; }
.ar-lp .rev { height: 3cqw; border-radius: 1cqw; background: #f4f2f8; border: 1px dashed #c9c5d3; }
.ar-pin { position: absolute; z-index: 4; display: grid; place-items: center; width: 4.2cqw; height: 4.2cqw; min-width: 15px; min-height: 15px; border-radius: 50%; background: #e5484d; color: #fff; font-weight: 800; font-size: clamp(7px, 1.6cqw, 11px); box-shadow: 0 0 0 0.8cqw rgba(229,72,77,0.25); }
.ar-side { position: absolute; z-index: 3; right: 6cqw; top: 30cqw; width: 46cqw; background: #fff; color: #0d0d14; border-radius: 2cqw; padding: 2.4cqw; box-shadow: 0 3cqw 6cqw rgba(0,0,0,0.4); }
.ar-side ol { list-style: none; margin: 1.4cqw 0 0; padding: 0; display: grid; gap: 1.2cqw; counter-reset: arp; }
.ar-side li { counter-increment: arp; display: grid; grid-template-columns: auto 1fr; gap: 1.4cqw; align-items: center; font-size: clamp(7px, 1.65cqw, 12px); font-weight: 700; line-height: 1.2; }
.ar-side li::before { content: counter(arp); display: grid; place-items: center; width: 3.4cqw; height: 3.4cqw; min-width: 13px; min-height: 13px; border-radius: 50%; background: #e5484d; color: #fff; font-size: clamp(6px, 1.3cqw, 9px); font-weight: 800; }
.ar-chips { display: flex; gap: 1cqw; flex-wrap: wrap; margin-top: 1.6cqw; }
.ar-chip { padding: 0.6cqw 1.4cqw; border-radius: 999px; font-size: clamp(6px, 1.3cqw, 9.5px); font-weight: 800; background: rgba(229,72,77,0.12); color: #c3373c; }
.ar-chip.a { background: rgba(241,152,13,0.14); color: #b06a00; } .ar-chip.g { background: rgba(4,195,75,0.12); color: #03873a; }
.ar-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2cqw; margin-top: 2.2cqw; align-items: stretch; }
.ar-step { position: relative; border-radius: 1.2cqw; padding: 1.4cqw 1cqw; text-align: center; font-size: clamp(6px, 1.3cqw, 9.5px); font-weight: 800; line-height: 1.15; background: #f4f2f8; }
.ar-step span { display: block; font-family: var(--mono); font-size: clamp(5px, 1cqw, 7.5px); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.6cqw; color: #6b6b78; font-weight: 700; }
.ar-step.ok { background: rgba(4,195,75,0.10); } .ar-step.ok span { color: #03873a; }
.ar-step.miss { background: #fff; border: 1.5px dashed #e5484d; } .ar-step.miss span { color: #c3373c; }
.ar-step.off { background: rgba(241,152,13,0.10); } .ar-step.off span { color: #b06a00; }
.ar-big { display: flex; align-items: baseline; gap: 1.4cqw; margin-top: 2.4cqw; padding-top: 1.8cqw; border-top: 1px dashed #e2deea; }
.ar-big b { font-weight: 800; font-size: clamp(14px, 5cqw, 34px); letter-spacing: -0.03em; background: linear-gradient(90deg, #ae00f4 0%, #e86b80 60%, #eeba02 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ar-big span { font-size: clamp(6px, 1.45cqw, 10.5px); font-weight: 700; color: #3a3946; line-height: 1.25; }
.ar-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; margin-top: 1.8cqw; }
.ar-kpi { border-radius: 1.2cqw; padding: 1.4cqw; background: #f4f2f8; font-size: clamp(6px, 1.3cqw, 9.5px); font-weight: 700; color: #6b6b78; }
.ar-kpi b { display: block; font-size: clamp(8px, 2.1cqw, 15px); color: #0d0d14; font-weight: 800; margin: 0.4cqw 0 0.8cqw; }
.ar-fun { display: grid; gap: 1cqw; margin-top: 1.8cqw; }
.ar-fun div { display: grid; grid-template-columns: 9cqw 1fr auto; gap: 1.2cqw; align-items: center; font-size: clamp(6px, 1.35cqw, 10px); font-weight: 700; }
.ar-fun .ar-trk { height: 2cqw; } .ar-fun .ar-trk i { background: linear-gradient(90deg, #ae00f4 0%, #39c6e9 100%); }
.ar-fun .ar-trk i.gap { background: repeating-linear-gradient(45deg, #e5484d 0 0.8cqw, #f7b9bb 0.8cqw 1.6cqw); }
/* Audit hero: Daniella walking a client through their audit */
.au-walk { position: absolute; z-index: 3; left: -30%; top: 21%; width: 290px; background: #fff; color: #0d0d14; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,0.45); font-family: 'Manrope', sans-serif; text-align: left; }
.au-walk-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f4f2f8; font-family: var(--mono); font-weight: 700; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #6b6b78; white-space: nowrap; }
.au-walk-bar > i { width: 7px; height: 7px; border-radius: 50%; background: #d4d0dc; flex: none; }
.au-walk-bar > span:first-of-type { margin-left: 6px; overflow: hidden; text-overflow: ellipsis; }
.au-live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: #e5484d; }
.au-live b { width: 7px; height: 7px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 3px rgba(229,72,77,0.18); }
.au-walk ul { list-style: none; margin: 0; padding: 12px 16px 6px; display: grid; gap: 9px; }
.au-walk li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; line-height: 1.2; }
.au-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 3px rgba(229,72,77,0.15); }
.au-dot.a { background: #f1980d; box-shadow: 0 0 0 3px rgba(241,152,13,0.18); }
.au-dot.g { background: #04c34b; box-shadow: 0 0 0 3px rgba(4,195,75,0.15); }
.au-st { margin-left: auto; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: #e5484d; }
.au-st.a { color: #c77700; } .au-st.g { color: #039a3c; }
.au-ppl { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid #eceaf1; margin-top: 6px; }
.au-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ae00f4 0%, #39c6e9 100%); }
.au-av-y { background: #0d0d14; font-size: 9px; }
.au-who { display: flex; flex-direction: column; font-size: 10px; color: #6b6b78; line-height: 1.25; }
.au-who b { font-size: 12px; color: #0d0d14; font-weight: 800; }
.au-bubble { position: absolute; z-index: 3; right: -2%; top: 3%; max-width: 46%; padding: 12px 16px; border-radius: 16px 16px 4px 16px; background: linear-gradient(90deg, #f1980d 0%, #ff5c20 100%); color: #fff; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 14px; line-height: 1.25; text-align: left; box-shadow: 0 16px 34px rgba(0,0,0,0.35); }
@media (min-width: 1280px) and (max-width: 1399px) {
  .au-walk { top: 6%; }
}
@media (min-width: 901px) and (max-width: 1279px) {
  #page-audit .au-hero .au-visual { padding-bottom: 262px; }
  #page-audit .au-hero .au-visual .au-cards { bottom: 302px; }
  .au-walk { left: 50%; top: auto; bottom: 0; translate: -50% 0; width: min(100%, 340px); }
}
@media (max-width: 900px) {
  #page-audit .au-hero .au-visual { padding-bottom: 262px; }
  #page-audit .au-hero .au-visual .au-cards { bottom: 302px; }
  .au-walk { left: 50%; right: auto; top: auto; bottom: 0; translate: -50% 0; width: min(100%, 520px); }
  .au-bubble { right: 0; top: 4%; max-width: 40%; font-size: 13px; }
}
@media (max-width: 560px) {
  #page-audit .au-hero .au-visual { padding-bottom: 240px; }
  #page-audit .au-hero .au-visual .au-cards { bottom: 280px; }
  .au-walk { width: 100%; }
  .au-walk ul { padding: 10px 12px 4px; gap: 7px; }
  .au-walk li { font-size: 12px; }
  .au-ppl { padding: 8px 12px 10px; gap: 6px; }
  .au-who { font-size: 9px; } .au-who b { font-size: 11px; }
  .au-bubble { top: 2%; right: 0; max-width: 46%; padding: 9px 12px; font-size: 11.5px; }
}

.js .au-girl { opacity: 0; translate: 0 40px; transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s, translate 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s; }
.js .au-hero.ab-in .au-girl { opacity: 1; translate: 0 0; }
.au-visual .au-cards { position: absolute; left: 50%; bottom: 88px; translate: -50% 0; flex-direction: row; width: min(108%, 600px); gap: 12px; justify-self: auto; }
.au-visual .au-cards .ab-card { flex: 1; min-height: 104px; padding: 0 20px; border-radius: 16px; }
.au-visual .au-cards .ab-card-l { font-size: 10px; letter-spacing: 0.16em; }
.au-visual .au-cards .ab-card-v { font-size: clamp(26px, 2.4vw, 36px); }
.au-visual .au-cards .ab-card-arw { width: 20px; height: 20px; right: 18px; top: 18px; }
.js .au-hero .ab-card:nth-child(1) { transition-delay: 0.9s; } .js .au-hero .ab-card:nth-child(2) { transition-delay: 1.05s; }
@media (prefers-reduced-motion: reduce) { .js .au-girl { opacity: 1; translate: none; transition: none; } }
@media (max-width: 900px) {
  .au-copy { padding-bottom: 0; }
  .au-grid { gap: 32px; }
  .au-girl { width: min(100%, 420px); }
  .au-visual .au-cards { bottom: 40px; width: calc(100% - 8px); text-align: left; }
  .au-visual .au-cards .ab-card { min-height: 84px; padding: 0 14px; }
  .au-visual .au-cards .ab-card-l { font-size: 8.5px; } .au-visual .au-cards .ab-card-v { font-size: 24px; } .au-visual .au-cards .ab-card-arw { width: 16px; height: 16px; right: 12px; top: 12px; }
}
/* ==== PLACEHOLDER IMAGES site-wide: flat grey, rounded, plain label (no pattern, border or label box) ==== */
.ph, .ph.bone-ph, .csx-photo-ph { background: #d0d1d3 !important; border: 0 !important; border-radius: 20px !important; }
.ph::before, .ph.bone-ph::before { display: none !important; }
.ph .ph-label, .ph.bone-ph .ph-label, .csx-photo-ph .ph-label { background: none !important; border: 0 !important; padding: 0 16px !important; color: #6b6d73 !important; text-align: center; line-height: 1.6; max-width: 90%; }
/* ==== CASE STUDY SUB PAGES: banner, client strip, panels, ten lines of work, related cards ==== */
.cs-photo-containers { background-image: url(/images/89ab859bf145.jpg); }
.section.csh { position: relative; isolation: isolate; overflow: hidden; background: #000; padding: 64px 48px 96px; }
.csh-bg { position: absolute; inset: 0; z-index: -2; }
.csh-bg.csh-img { background-size: cover !important; background-position: left center !important; }
.csh-bg.csh-grad { background: radial-gradient(55% 75% at 8% 15%, rgba(80,1,127,0.55) 0%, rgba(80,1,127,0) 70%), radial-gradient(50% 70% at 95% 90%, rgba(255,108,28,0.35) 0%, rgba(255,108,28,0) 70%), radial-gradient(45% 60% at 60% 0%, rgba(27,45,148,0.45) 0%, rgba(27,45,148,0) 70%), #050508; }
.section.csh::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.5) 100%); }
.csh-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: center; }
.csh-back { display: inline-flex; align-items: center; gap: 16px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; margin-bottom: 52px; }
.csh-back-c { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.85); display: inline-flex; align-items: center; justify-content: center; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.csh-back-ic { width: 20px; height: 20px; rotate: -135deg; transition: translate 0.3s ease; }
@media (hover: hover) { .csh-back:hover .csh-back-c { background: var(--lemon); border-color: var(--lemon); color: #000; } .csh-back:hover .csh-back-ic { translate: -3px 0; } }
.csh-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lemon); margin-bottom: 26px; }
.csh-sep { opacity: 0.8; }
.csh-tags-arw { width: 26px; height: 26px; margin-left: auto; color: var(--lemon); }
.csh .h-display { font-size: clamp(40px, 4.6vw, 76px); line-height: 1.02; margin: 0 0 30px; color: #fff; }
.lede.csh-lede { color: #fff; font-size: clamp(16px, 1.3vw, 20px); max-width: 560px; margin: 0 0 40px; }
.csh .csx-stats { margin-bottom: 0; }
.csh-media { position: relative; }
.csh-media .csx-photo { aspect-ratio: 1 / 1; }
.csh-media .csx-name { text-transform: uppercase; }
.js .csh-rv { opacity: 0; translate: 0 28px; transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0s), translate 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0s); }
.js .csh.cs-in .csh-rv { opacity: 1; translate: 0 0; }
.cs-strip.ab-plat { padding: 44px 48px 52px; }
.cs-panel .ph { order: 0; }
/* ===== Case study panel visuals (photo or gradient + info card) ===== */
.ph.bone-ph.csv { position: relative; overflow: hidden; container-type: inline-size; border-radius: 20px !important;
  background: radial-gradient(70% 60% at 15% 10%, rgba(174,0,244,0.55) 0%, rgba(174,0,244,0) 70%), radial-gradient(60% 55% at 90% 95%, rgba(57,198,233,0.45) 0%, rgba(57,198,233,0) 70%), radial-gradient(50% 45% at 85% 15%, rgba(232,107,128,0.35) 0%, rgba(232,107,128,0) 70%), #120d22 !important; }
.csv-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.csv-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(18,13,34,0.05) 0%, rgba(40,10,70,0.35) 45%, rgba(18,13,34,0.82) 100%); }
.csv-tag { position: absolute; top: 5.5cqw; left: 5.5cqw; z-index: 2; padding: 1.4cqw 3.2cqw; border-radius: 999px; background: linear-gradient(90deg, #f1980d 0%, #ff5c20 100%); color: #fff; font-family: var(--mono); font-weight: 700; font-size: clamp(9px, 1.9cqw, 11px); letter-spacing: 0.14em; text-transform: uppercase; }
.csv-card { position: absolute; z-index: 2; left: 6cqw; bottom: 6cqw; width: 68cqw; background: #fff; color: #0d0d14; border-radius: 16px; padding: 4.4cqw 4.8cqw; box-shadow: 0 24px 50px rgba(0,0,0,0.35); font-family: 'Manrope', sans-serif; text-align: left; }
.csv-card.csv-right { left: auto; right: 6cqw; }
.csv-card.csv-mid { left: 50%; bottom: auto; top: 54%; transform: translate(-50%, -50%); width: 76cqw; }
.csv-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 700; font-size: clamp(9px, 1.9cqw, 11px); letter-spacing: 0.14em; text-transform: uppercase; color: #6b6b78; margin-bottom: 3cqw; }
.csv-h b { color: #0d0d14; font-weight: 800; }
.csv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.4cqw; }
.csv-list li { display: flex; align-items: flex-start; gap: 2.4cqw; font-size: clamp(11px, 2.7cqw, 15px); line-height: 1.3; font-weight: 600; }
.csv-dot { flex: none; width: 2.4cqw; height: 2.4cqw; min-width: 9px; min-height: 9px; border-radius: 50%; margin-top: 0.45em; background: #e5484d; box-shadow: 0 0 0 3px rgba(229,72,77,0.15); }
.csv-dot.a { background: #f1980d; box-shadow: 0 0 0 3px rgba(241,152,13,0.18); }
.csv-dot.g { background: #04c34b; box-shadow: 0 0 0 3px rgba(4,195,75,0.15); }
.csv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.2cqw; counter-reset: csv; }
.csv-steps li { counter-increment: csv; display: grid; grid-template-columns: auto 1fr; column-gap: 2.6cqw; align-items: center; padding: 2.2cqw 2.6cqw; border-radius: 12px; background: #f4f2f8; }
.csv-steps li::before { content: counter(csv); grid-row: span 2; display: grid; place-items: center; width: 6.4cqw; height: 6.4cqw; min-width: 24px; min-height: 24px; border-radius: 50%; color: #fff; font-weight: 800; font-size: clamp(11px, 2.5cqw, 14px); background: linear-gradient(135deg, #ae00f4 0%, #39c6e9 100%); }
.csv-steps b { font-size: clamp(12px, 2.9cqw, 16px); font-weight: 800; line-height: 1.15; }
.csv-steps span { font-size: clamp(10px, 2.3cqw, 13px); color: #6b6b78; line-height: 1.25; }
.csv-big { font-weight: 800; font-size: clamp(34px, 11cqw, 64px); line-height: 0.95; letter-spacing: -0.03em; background: linear-gradient(90deg, #ae00f4 0%, #e86b80 50%, #eeba02 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.csv-big-l { font-family: var(--mono); font-weight: 700; font-size: clamp(9px, 1.9cqw, 11px); letter-spacing: 0.14em; text-transform: uppercase; color: #0d0d14; margin: 1.4cqw 0 3.2cqw; }
.csv-bars { display: grid; gap: 1.8cqw; }
.csv-bar { display: grid; grid-template-columns: 22cqw 1fr auto; align-items: center; gap: 2cqw; font-size: clamp(10px, 2.3cqw, 13px); font-weight: 600; }
.csv-bl { color: #6b6b78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csv-bt { height: 2.6cqw; min-height: 9px; border-radius: 999px; background: #eceaf1; overflow: hidden; }
.csv-bt i { display: block; height: 100%; border-radius: 999px; background: #c9c5d3; }
.csv-bar.hi .csv-bt i { background: linear-gradient(90deg, #ae00f4 0%, #39c6e9 100%); }
.csv-bar.hi .csv-bl { color: #0d0d14; }
.csv-bv { white-space: nowrap; font-weight: 800; }
.csv-note { margin-top: 2.6cqw; font-size: clamp(10px, 2.2cqw, 12px); color: #6b6b78; }
.csx-photo.csv-hero { position: relative; container-type: inline-size; background: radial-gradient(70% 60% at 15% 10%, rgba(174,0,244,0.55) 0%, rgba(174,0,244,0) 70%), radial-gradient(60% 55% at 90% 95%, rgba(57,198,233,0.45) 0%, rgba(57,198,233,0) 70%), radial-gradient(50% 45% at 85% 15%, rgba(232,107,128,0.35) 0%, rgba(232,107,128,0) 70%), #120d22; }
.csx-photo.csv-hero .csv-card.csv-mid { top: 56%; }
.testi-slide.testi-nophoto { justify-content: center; }
.testi-slide.testi-nophoto .testi-copy { max-width: 860px; margin: 0 auto; padding-top: 64px; padding-bottom: 64px; }
.csv-logo { display: inline-block; width: 15cqw; height: 6cqw; min-width: 52px; min-height: 20px; background-size: contain; background-repeat: no-repeat; background-position: right center; }

.section.dl-sec { position: relative; isolation: isolate; overflow: hidden; background: #000; padding-top: 100px; padding-bottom: 110px; }
.section.dl-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(45% 55% at 20% 45%, rgba(120,20,140,0.4) 0%, rgba(120,20,140,0) 70%), radial-gradient(40% 50% at 82% 55%, rgba(255,108,28,0.22) 0%, rgba(255,108,28,0) 70%); }
.dl-head { text-align: center; margin-bottom: 64px; }
.dl-head .faq-pill { margin-bottom: 34px; }
.dl-sec .h-section { font-size: clamp(40px, 4.6vw, 72px); margin: 0; color: #fff; }
.dl-box { max-width: 1240px; margin: 0 auto; border: 1px solid rgba(255,255,255,0.1); border-radius: 40px; background: rgba(8,6,12,0.55); padding: 72px; }
.dl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.dl-item { display: flex; align-items: center; gap: 20px; min-height: 146px; box-sizing: border-box; padding: 16px 16px 16px 44px; border-radius: 26px; background: rgba(22,12,26,0.85); border: 1.5px solid rgba(255,255,255,0.04); transition: background 0.35s ease, border-color 0.35s ease, translate 0.35s ease; }
.dl-item.is-glass { background: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.07) 100%); border-color: rgba(255,255,255,0.38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dl-txt { flex: 1; min-width: 0; }
.dl-txt strong { display: block; color: #fff; font-weight: 700; font-size: clamp(17px, 1.45vw, 24px); letter-spacing: 0.01em; margin-bottom: 12px; }
.dl-txt span { display: block; color: rgba(255,255,255,0.72); font-size: clamp(14px, 1.1vw, 17px); line-height: 1.45; }
.dl-ic { flex: none; width: 110px; height: 110px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: scale 0.35s cubic-bezier(0.25, 0.8, 0.25, 1); }
.dl-ic-arw { width: 24px; height: 24px; }
@media (hover: hover) { .dl-item:hover { translate: 0 -3px; border-color: rgba(255,255,255,0.45); } .dl-item:hover .dl-ic { scale: 1.06; } }
.js .dl-item { opacity: 0; translate: 0 22px; transition: opacity 0.7s ease var(--d), translate 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d), background 0.35s ease, border-color 0.35s ease; }
.js .dl-sec.cs-in .dl-item { opacity: 1; translate: 0 0; }
.cs-cta-pill { margin-bottom: 30px; }
.section.rel-sec { background: #000; padding: 90px 48px 100px; border-top: 1px solid rgba(255,255,255,0.06); }
.rel-h { display: flex; align-items: center; gap: 16px; font-weight: 800; font-size: clamp(28px, 3vw, 44px); letter-spacing: -0.025em; color: #fff; margin: 0 0 36px; }
.rel-h-arw { width: 0.7em; height: 0.7em; color: var(--lemon); }
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rel-card { background: #11121c; border: 1px solid #2a2b3d; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: translate 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.35s ease; }
.rel-photo { aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.rel-card .rel-photo.ph { border-radius: 0 !important; }
.rel-body { padding: 22px 24px 28px; }
.rel-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.rel-tag { display: inline-block; padding: 7px 16px; border-radius: 999px; background: linear-gradient(90deg, #f1980d 0%, #ff5c20 100%); color: #fff; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.rel-arw { width: 22px; height: 22px; color: var(--lemon); transition: translate 0.3s ease; }
.rel-body h4 { font-weight: 700; font-size: 20px; letter-spacing: -0.015em; color: #fff; margin: 0 0 8px; }
.rel-body p { font-size: 14px; color: rgba(255,255,255,0.65); margin: 0; }
@media (hover: hover) { .rel-card:hover { translate: 0 -5px; border-color: rgba(240,255,23,0.5); } .rel-card:hover .rel-arw { translate: 3px -3px; } }
@media (prefers-reduced-motion: reduce) { .js .csh-rv, .js .dl-item { opacity: 1; translate: none; transition: none; } }
@media (max-width: 1100px) and (min-width: 901px) { .dl-box { padding: 40px; } .dl-ic { width: 84px; height: 84px; } .dl-item { padding-left: 28px; } }
@media (max-width: 900px) {
  .section.csh { padding: 40px 20px 64px; }
  .csh-grid { grid-template-columns: 1fr; gap: 40px; }
  .csh-back { margin-bottom: 32px; }
  .csh-tags { font-size: 11px; letter-spacing: 0.14em; gap: 4px 10px; }
  .csh-tags-arw { display: none; }
  .csh-media { max-width: 460px; }
  .cs-strip.ab-plat { padding: 36px 20px 40px; }
  .cs-panel [style*="grid-template-columns: 1fr 1fr"] > .ph { order: 2 !important; }
  .dl-box { padding: 16px; border-radius: 26px; }
  .dl-grid { grid-template-columns: 1fr; gap: 10px; }
  .dl-item { min-height: 0; padding: 14px 14px 14px 22px; border-radius: 20px; }
  .dl-item.is-glass { background: rgba(22,12,26,0.85); border-color: rgba(255,255,255,0.04); }
  .dl-grid .dl-item:nth-child(odd) { background: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.07) 100%); border-color: rgba(255,255,255,0.38); }
  .dl-ic { width: 64px; height: 64px; border-radius: 16px; } .dl-ic-arw { width: 18px; height: 18px; }
  .dl-txt strong { margin-bottom: 6px; }
  .section.rel-sec { padding: 64px 20px 72px; }
  .rel-grid { grid-template-columns: 1fr; }
}
.cs-photo-ldr { background-image: url(/images/c59c7f7f0296.jpg); }
.cs-photo-windsor { background-image: url(/images/4cbe977649fc.jpg); }
.cs-photo-sals { background-image: url(/images/0d639d95e1ea.jpg); }
.rel-photo { background-size: cover !important; background-position: center 40% !important; }
.rel-photo.cs-photo-sals { background-position: center 18% !important; }
.rel-card { position: relative; }
.rel-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 3px; pointer-events: none; z-index: 5;
  background: linear-gradient(135deg, #eeba02 0%, #e86b80 30%, #ae00f4 68%, #39c6e9 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
  opacity: 0; transition: opacity 0.5s ease; }
@media (hover: hover) { .rel-card:hover { border-color: #2a2b3d !important; } .rel-card:hover::after { opacity: 1; } }
.section.rel-sec:has(+ .greviews-sec) { padding-bottom: 200px; }
@media (max-width: 900px) { .section.rel-sec:has(+ .greviews-sec) { padding-bottom: 140px; } }
/* ==== STAT CARDS (coded, reusable): drop any .stat-card-N inside a positioned .sc-slot on a .challenge-visual.
   Sizes use cqw so the cards scale with the image they sit on. Change the text freely.
   STAT CARD 1 · Metric alert   STAT CARD 2 · Platform chip (Google)   STAT CARD 3 · Platform chip (Meta)   STAT CARD 4 · Process steps ==== */
.challenge-visual { container-type: inline-size; }
.cv-card.sc-slot { height: auto !important; background: none; }
.cv-card-stack.sc-slot { display: flex; flex-direction: column; gap: 1.6cqw; padding-top: 0.2cqw; }
.stat-card { box-sizing: border-box; color: #fff; font-family: var(--display); pointer-events: auto; }
.stat-card-1 { position: relative; width: 100%; padding: 2.6cqw 2.8cqw 2.4cqw; border-radius: 2cqw; background: linear-gradient(160deg, #1b1c24 0%, #0d0e13 100%); box-shadow: 0 1.8cqw 4cqw rgba(0,0,0,0.45); }
.stat-card-1::before, .stat-card-4::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 0.22cqw; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.06) 45%, #6d4bff 80%, #2fb3ff 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; }
.sc-label { font-size: 1.55cqw; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1.2cqw; }
.sc-value { font-size: 4.4cqw; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--lemon); padding-bottom: 1.7cqw; margin-bottom: 1.5cqw; border-bottom: 1px solid rgba(255,255,255,0.12); }
.sc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1cqw; }
.sc-list li { display: flex; align-items: center; gap: 1cqw; font-size: 1.6cqw; color: rgba(255,255,255,0.88); }
.sc-warn { width: 2cqw; height: 2cqw; flex: none; color: var(--lemon); }
.stat-card-2, .stat-card-3 { display: flex; align-items: center; gap: 1.5cqw; width: 82%; margin-left: 8%; padding: 1.5cqw 1.7cqw; border-radius: 1.2cqw; background: linear-gradient(160deg, #1c1d22 0%, #0f1014 100%); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 1.2cqw 2.5cqw rgba(0,0,0,0.4); }
.sc-chip-logo { width: 3cqw; height: 3cqw; flex: none; }
.sc-chip-name { font-family: var(--mono); font-size: 1.2cqw; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; }
.sc-chip-status { display: flex; align-items: center; gap: 0.6cqw; margin-top: 0.4cqw; font-family: var(--mono); font-size: 0.95cqw; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.65); }
.sc-dot { width: 0.6cqw; height: 0.6cqw; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0.8cqw #22c55e; animation: sc-blink 2.4s ease-in-out infinite; }
@keyframes sc-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.stat-card-4 { position: relative; width: 86%; margin-left: 7%; margin-top: 1cqw; padding: 2cqw 1.8cqw 2.4cqw; border-radius: 2.4cqw; background: linear-gradient(180deg, #121219 0%, #08080c 100%); display: flex; flex-direction: column; gap: 1.3cqw; box-shadow: 0 2cqw 4cqw rgba(0,0,0,0.5); }
.stat-card-4::after { content: ""; position: absolute; inset: -0.75cqw; z-index: 2; pointer-events: none; border-radius: calc(2.4cqw + 0.75cqw); padding: 0.75cqw;
  background: linear-gradient(135deg, #ff5c20 0%, #e8566d 45%, #a816ee 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
  clip-path: inset(calc(100% - 6.5cqw) calc(100% - 6.5cqw) 0 0); }
.sc-step { display: flex; align-items: center; justify-content: center; gap: 1.2cqw; padding: 1.45cqw 1.2cqw; border-radius: 1.2cqw; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.14); font-size: 1.55cqw; font-weight: 500; }
.sc-step-ic { width: 2.6cqw; height: 2.6cqw; flex: none; }
.sc-step.is-on { background: linear-gradient(135deg, #a742f5 0%, #7b5cf6 45%, #4f8ff7 100%); border-color: rgba(255,255,255,0.3); padding: 2.1cqw 1.2cqw; box-shadow: 0 1cqw 3cqw rgba(140,80,255,0.45); }
/* ==== GOOGLE ADS PAGE challenge photos (ch1, ch2, ch4 single photo; ch3 reuses the homepage two-photo layout) ==== */
.challenge-visual.cv-g1, .challenge-visual.cv-g2, .challenge-visual.cv-g4 { aspect-ratio: 710 / 458; }
.cv-photo-g1, .cv-photo-g2, .cv-photo-g4 { left: 0; top: 0; width: 100%; height: 100%; }
.cv-photo-g1 { background-image: url(/images/1848832e0fd4.jpg); }
.cv-photo-g2 { background-image: url(/images/3d166a0714ea.jpg); background-position: center top; }
.cv-photo-monitor.cv-photo-g3a { background-image: url(/images/4a4af4463180.jpg); }
.cv-photo-cro.cv-photo-g3b { background-image: url(/images/7ad4a3745ddc.jpg); }
.cv-photo-g4 { background-image: url(/images/367b2267d771.jpg); }
/* Google Ads page stat card positions (challenge 1 + 2) */
.stat-card-2.sc-solo { width: 100%; margin-left: 0; padding: 1.9cqw 2.2cqw; gap: 1.8cqw; border-radius: 1.6cqw; }
.sc-solo .sc-chip-logo { width: 3.8cqw; height: 3.8cqw; }
.sc-solo .sc-chip-name { font-size: 1.75cqw; }
.sc-solo .sc-chip-status { font-size: 1.3cqw; }
.sc-solo .sc-dot { width: 0.8cqw; height: 0.8cqw; }
.cv-photo-g2 { background-size: 100% 104% !important; }
.sc-g1a { left: 60%; top: 5%; width: 37%; }
.sc-g1b { left: -4%; top: 76%; width: 34%; }
.sc-g2a { left: -5%; top: 10%; width: 37%; }
.sc-g2b { left: 56%; top: 80%; width: 38%; }
/* ==== FACEBOOK ADS PAGE challenge photos + stat card positions (ch1 reuses the Google Ads ch1 photo) ==== */
.cv-photo-f2, .cv-photo-f3, .cv-photo-f4 { left: 0; top: 0; width: 100%; height: 100%; }
.cv-photo-f2 { background-image: url(/images/9baaaf87753b.jpg); }
.cv-photo-f3 { background-image: url(/images/21ec4cbb5598.jpg); }
.cv-photo-f4 { background-image: url(/images/daf32ad9c1d4.jpg); }
.sc-f3a { left: 62%; top: 3%; width: 36%; }
.sc-f3b { left: -4%; top: 76%; width: 32%; }

/* CRO page challenge photos + stat card positions */
.cv-photo-c1, .cv-photo-c2, .cv-photo-c3, .cv-photo-c4 { left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-position: center; }
.cv-photo-c1 { background-image: url(/images/2f32f36c9134.jpg); }
.cv-photo-c2 { background-image: url(/images/ca5e7a942d39.jpg); }
.cv-photo-c3 { background-image: url(/images/06e5eb9d69e2.jpg); }
.cv-photo-c4 { background-image: url(/images/687d744213eb.jpg); }
.sc-c2a { left: -5%; top: 5%; width: 35%; }
.sc-c2b { left: 62%; top: 82%; width: 36%; }
.sc-c4a { left: -5%; top: 10%; width: 31%; }
.sc-c4b { left: 70%; top: 8%; width: 29%; }

/* ==== PAGES TOGGLE (build panel site map + phase 1 visibility) ==== */
.pg-wrap { position: relative; }
.pg-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(240,255,23,0.55); background: rgba(240,255,23,0.08); color: var(--lemon); cursor: pointer; white-space: nowrap; }
.pg-btn .pg-caret { font-size: 8px; transition: transform .2s; }
.pg-wrap.open .pg-btn .pg-caret { transform: rotate(180deg); }
.pg-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 380px; max-height: min(72vh, 680px); overflow-y: auto; background: #0d0d12; border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.6); padding: 14px; display: none; z-index: 400; font-family: var(--sans, 'Manrope', sans-serif); }
.pg-wrap.open .pg-panel { display: block; }
.pg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 6px 12px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 8px; }
.pg-title { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.pg-count { font-weight: 800; font-size: 13px; color: #fff; }
.pg-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 4px 10px; }
.pg-act { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: transparent; color: rgba(255,255,255,0.8); cursor: pointer; }
.pg-act:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
.pg-act.pg-primary { background: linear-gradient(90deg,#f1980d,#ff5c20); border-color: transparent; color: #fff; font-weight: 700; }
.pg-group { padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.pg-group:first-of-type { border-top: 0; }
.pg-row { display: flex; align-items: center; gap: 10px; padding: 6px 6px; border-radius: 8px; }
.pg-row:hover { background: rgba(255,255,255,0.05); }
.pg-row.pg-l1 .pg-name { font-weight: 700; font-size: 13px; color: #fff; }
.pg-row.pg-l2 { padding-left: 22px; }
.pg-row.pg-l2 .pg-name { font-size: 12.5px; color: rgba(255,255,255,0.78); }
.pg-row.pg-l2::before { content: ""; width: 8px; height: 1px; background: rgba(255,255,255,0.25); margin-left: -14px; margin-right: -2px; }
.pg-name { flex: 1; min-width: 0; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font-family: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.pg-row.is-off .pg-name { color: rgba(255,255,255,0.38); }
.pg-row.is-current .pg-name::after { content: " · viewing"; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--lemon); text-transform: uppercase; }
.pg-group-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.4); padding: 6px 6px 2px; }
.pg-sw { position: relative; flex: 0 0 auto; width: 34px; height: 20px; border-radius: 999px; border: 0; background: rgba(255,255,255,0.18); cursor: pointer; transition: background .2s; padding: 0; }
.pg-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s; }
.pg-sw[aria-checked="true"] { background: linear-gradient(90deg,#f1980d,#ff5c20); }
.pg-sw[aria-checked="true"]::after { transform: translateX(14px); }
.pg-sw.is-mixed { background: linear-gradient(90deg,#f1980d 0 50%, rgba(255,255,255,0.18) 50%); }
.pg-note { font-size: 11px; line-height: 1.5; color: rgba(255,255,255,0.45); padding: 10px 6px 2px; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 6px; }
.proto-tab.pg-tab-off { opacity: 0.35; text-decoration: line-through; }
/* what visitors see: links to switched-off pages disappear */
.pg-hide-link, .pg-hide-item { display: none !important; }
.pg-dead-link { pointer-events: none; cursor: default; }
.nav-promoted:not(.is-shown) { display: none !important; }
.nav-item.pg-nodrop .dropdown, .nav-item.pg-nodrop .dropdown-arrow { display: none !important; }
/* visitor preview: no build panel, markers or tags */
html.pg-visitor .proto-bar, html.pg-visitor .page-marker, html.pg-visitor .anno-tag { display: none !important; }
.pg-exit { position: fixed; left: 16px; bottom: 16px; z-index: 500; display: none; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 10px 14px; border-radius: 999px; border: 0; background: var(--lemon); color: #000; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
html.pg-visitor .pg-exit { display: inline-flex; }
@media (max-width: 760px) {
  .pg-wrap { position: static; }
  .pg-panel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; max-height: calc(100vh - 80px); }
}

/* ==== Testimonial carousel v7: 7 client slides, circular logo on the headshot, optional video button ==== */
.testi-photo.testi-p-sals { background-image: url(/images/4e2ee5d39ffa.webp); }
.testi-photo.testi-p-knose { background-image: url(/images/081aff61de23.webp); }
.testi-photo.testi-p-maries { background-image: url(/images/211c111974fb.webp); }
.testi-photo.testi-p-ox { background-image: url(/images/9ca9154b3334.webp); }
.testi-photo.testi-p-shipping { background-image: url(/images/2aad317e4eee.webp); }
.testi-photo.testi-p-lecoq { background-image: url(/images/4ceca7a9df81.webp); }
.testi-photo.testi-p-ldr { background-image: url(/images/407dd8a61d6e.webp); }
.testi-logo-sals { background-image: url(/images/890ca53779cf.webp); }
.testi-logo-knose { background-image: url(/images/9a50d2dba04c.webp); }
.testi-logo-maries { background-image: url(/images/ec6406e54222.webp); }
.testi-logo-ox { background-image: url(/images/6ecb89273125.webp); }
.testi-logo-shipping { background-image: url(/images/3ac0717f0c4e.webp); }
.testi-logo-lecoq { background-image: url(/images/64667840367c.webp); }
.testi-logo-ldr { background-image: url(/images/b4a2a5a30541.webp); }
.testi-photo { position: relative; }
.testi-logo { position: absolute; top: 7%; left: -9%; width: 36%; aspect-ratio: 1; border-radius: 50%; background-color: #fff; background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0 10px 28px rgba(0,0,0,0.35); z-index: 2; }
.testi-logo-knose, .testi-logo-lecoq, .testi-logo-shipping { background-size: 86%; }
.testi-meta { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.testi-meta-l { display: flex; flex-direction: column; align-items: flex-start; }
.testi-video { display: none; align-items: center; gap: 14px; padding: 13px 28px 13px 22px; border-radius: 999px; border: 2px solid var(--lemon); background: transparent; color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease; }
.testi-video { transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.testi-video:hover, .testi-video:focus-visible { background: var(--lemon); color: #000; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(240,255,23,0.28); }
.testi-video .testi-play { width: 0; height: 0; border-left: 13px solid currentColor; transition: border-color .2s ease; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.testi-video.is-on { display: inline-flex; }
@media (max-width: 900px) {
  .testi-meta { flex-direction: column; justify-content: center; }
  .testi-meta-l { align-items: center; }
  .testi-logo { width: 30%; left: -4%; top: 5%; }
  .testi-video { font-size: 14px; padding: 11px 22px 11px 18px; }
}

.cs-logo-sals { background-image: url(/images/890ca53779cf.webp); background-size: contain; background-repeat: no-repeat; background-position: left top; width: 64px !important; height: 64px !important; border-radius: 50%; }

/* ==== BADGE AWARD CYCLE (multi-line): JS marks the showing line .is-cur and the one leaving .is-out ==== */
.badge-award-cycle.bc-multi .badge-award-line { transform: translateY(115%); opacity: 0; }
.badge-award-cycle.bc-multi .badge-award-line.is-cur { transform: translateY(0); opacity: 1; }
.badge-award-cycle.bc-multi .badge-award-line.is-out { transform: translateY(-115%); opacity: 0; }
.badge-award-cycle.bc-multi .badge-award-line.is-reset { transition: none; }
@media (max-width: 900px) { .badge-award-cycle.bc-multi .badge-award-line:not(:first-child) { display: none; } .badge-award-cycle.bc-multi .badge-award-line:first-child { opacity: 1 !important; transform: none !important; } }
.cs-photo-lecoq, .rel-photo.cs-photo-lecoq, .csx-photo.cs-photo-lecoq, .qc-photo.cs-photo-lecoq { background-image: url(/images/4ceca7a9df81.webp), radial-gradient(90% 80% at 30% 15%, #8a3fc4 0%, #4a1878 50%, #170a26 100%) !important; background-size: auto 94%, cover !important; background-position: center bottom, center !important; background-repeat: no-repeat !important; }
  .faq-arrow { width: 10px; height: 10px; color: var(--lemon); margin-right: 14px; vertical-align: 0; flex: none; display: inline-block; }
.qc-radial { position: relative; isolation: isolate; }
.qc-radial::before { content:""; position:absolute; inset:-25% -10%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46% 42% at 50% 48%, rgba(120,64,105,.85) 0%, rgba(120,64,105,0) 72%),
    radial-gradient(34% 30% at 64% 38%, rgba(120,64,64,.6) 0%, rgba(120,64,64,0) 70%),
    radial-gradient(34% 34% at 36% 62%, rgba(90,56,120,.65) 0%, rgba(90,56,120,0) 70%);
  filter: blur(85px); }
.qc-card { border-radius: 20px; overflow: hidden; transition: scale 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.qc-photo { position:absolute; inset:0; background-size:cover; background-position:center; }
.qc-fade { position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.4) 14%, rgba(0,0,0,.12) 30%, rgba(0,0,0,.14) 44%, rgba(0,0,0,.93) 72%, rgba(0,0,0,.97) 100%); }
.qc-logo { position:absolute; top:24px; left:24px; height:66px; width:auto; max-width:70%; z-index:2; filter: drop-shadow(0 1px 3px rgba(0,0,0,.9)) drop-shadow(0 0 14px rgba(0,0,0,.6)) drop-shadow(0 0 28px rgba(0,0,0,.4)); }
.qc-body { position:relative; z-index:2; margin-top:auto; padding:24px; }
.qc-stat { display:flex; align-items:center; gap:8px; font-weight:800; font-size:48px; color:var(--lemon); letter-spacing:-0.04em; line-height:0.9; margin-bottom:14px; }
.qc-stat .arrow { width:0.5em; height:0.5em; flex:none; }
.qc-quote { font-weight:600; font-size:14px; line-height:1.35; color:var(--bone); letter-spacing:-0.01em; margin:0 0 18px; }
.qc-cta { display:flex; align-items:center; gap:6px; justify-content:flex-end; font-weight:600; font-size:14px; color:#fff; }
.qc-cta .arrow { width:0.78em; height:0.78em; }
@media (hover:hover) { .qc-card:hover { scale: 1.035; z-index: 2; cursor: pointer; } }
/* ==== GRADIENT HEADING HIGHLIGHT ====
   First gradient: the highlighted words in the centred "Section heading"
   zones (Why Google & Meta Ads underperform...). Real text, so SEO is
   unaffected. Left-to-right, two stops. Change the two hex values to re-colour. */
.grad-heading h1 em, .grad-heading h2 em, .grad-heading h3 em,
.grad-heading .h-section em, .grad-heading .h-display em {
  background: linear-gradient(90deg, #f09809 0%, #ff4822 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #ff4822;                      /* fallback if gradient text is unsupported */
  -webkit-text-fill-color: transparent;
  padding: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Role cards heading ("...supports your role."): the site's signature
   4-stop rainbow gradient, left to right, instead of the plain blue-grey
   highlighter text this zone normally gets. */
.role-sec .h-section em {
  background: linear-gradient(90deg, #eeba02 0%, #e86b80 33%, #ae00f4 66%, #39c6e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #ae00f4;
  -webkit-text-fill-color: transparent;
  padding: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Role cards (2x3 grid): stark-white section, a soft grey radial glow
   sitting centrally behind the cards, taller white cards with a rounded
   headshot (5px corners) offset over a two-tone gradient corner accent, a
   ROLE eyebrow, a bigger heading, mid-grey supporting copy, black top-right
   arrow and a bottom-right Learn more CTA. */
.role-grid { position: relative; }
.role-grid::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 135%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse farthest-side at center, rgba(178,178,178,0.95) 0%, rgba(178,178,178,0.7) 25%, rgba(178,178,178,0.35) 48%, rgba(178,178,178,0.1) 68%, rgba(178,178,178,0) 88%);
  z-index: 0;
  pointer-events: none;
}
.role-grid > .role-card { position: relative; z-index: 1; }
.role-card {
  background: #fff;
  border-radius: 20px;
  padding: 24px 24px 58px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 18px;
  position: relative;
}
.role-card { transition: scale 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.role-card::before { content:""; position:absolute; inset:-6px; border-radius:26px; padding:6px; pointer-events:none;
  background: linear-gradient(135deg, #eeba02 0%, #e86b80 30%, #ae00f4 68%, #39c6e9 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity:0; transition: opacity 0.5s ease; }
@media (hover:hover) {
  .role-card:hover { scale: 1.035; z-index: 2; cursor: pointer; }
  .role-card:hover::before { opacity: 1; }
}
.role-photo-col { display: flex; flex-direction: column; align-items: flex-start; flex: none; width: 118px; align-self: flex-start; }
.role-photo-wrap { position: relative; width: 118px; aspect-ratio: 300 / 393; flex: none; align-self: flex-start; }
.role-photo-ring {
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  border-radius: 22px;
  padding: 8px;
  background: linear-gradient(135deg, #39c6e9 0%, #2ee6a6 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  clip-path: inset(0 0 calc(100% - 60px) calc(100% - 60px));
  z-index: 2;
  pointer-events: none;
}
.role-card:nth-child(1) .role-photo-ring { background: linear-gradient(135deg, #eeff15 0%, #ecb005 100%); }
.role-card:nth-child(2) .role-photo-ring { background: linear-gradient(135deg, #2acad0 0%, #1ce6a0 100%); }
.role-card:nth-child(3) .role-photo-ring { background: linear-gradient(135deg, #ea8a4f 0%, #d34596 100%); }
.role-card:nth-child(4) .role-photo-ring { background: linear-gradient(135deg, #d44695 0%, #a80dec 100%); }
.role-card:nth-child(5) .role-photo-ring { background: linear-gradient(135deg, #6f4ced 0%, #2acad0 100%); }
.role-card:nth-child(6) .role-photo-ring { background: linear-gradient(135deg, #a70cee 0%, #6c51ed 100%); }
.role-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background-size: cover;
  background-position: center top;
}
.role-photo-1 { background-image: url(/images/b14ccd59fff4.jpg); }
.role-photo-2 { background-image: url(/images/9c7963dbda8f.jpg); }
.role-photo-3 { background-image: url(/images/2721cd755b49.jpg); }
.role-photo-4 { background-image: url(/images/19435617ca07.jpg); }
.role-photo-5 { background-image: url(/images/5c133be7dc0d.jpg); }
.role-photo-6 { background-image: url(/images/f06e7155a6c5.jpg); }
.role-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.role-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.role-card-tag { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(0,0,0,0.45); margin-top: 6px; }
.role-card .role-card-arrow { width: 23px; height: 23px; flex: none; color: var(--ink); fill: currentColor; }
.role-card-title { font-weight: 800; font-size: 38px; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.role-card-sub {
  flex-basis: 100%;
  width: 100%;
  font-size: 12.5px;
  line-height: 1.5;
  color: #6b6b6b;
  margin: 12px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.role-card-cta {
  position: absolute;
  right: 24px;
  bottom: 24px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.role-card:nth-child(odd) { background: #343452; }
.role-card:nth-child(odd) .role-card-title { color: #fff; }
.role-card:nth-child(odd) .role-card-sub { color: rgba(255,255,255,0.62); }
.role-card:nth-child(odd) .role-card-tag { color: rgba(255,255,255,0.45); }
.role-card:nth-child(odd) .role-card-cta { color: #fff; border-bottom-color: rgba(255,255,255,0.65); }
.role-card:nth-child(odd) .role-card-arrow { color: #f3ff04; }
@media (max-width: 900px) {
  .role-card { padding: 20px 20px 52px 20px; gap: 16px; }
  .role-photo-col { width: 92px; }
  .role-photo-wrap { width: 92px; }
  .role-photo-ring { clip-path: inset(0 0 calc(100% - 48px) calc(100% - 48px)); }
  .role-card-title { font-size: 30px; }
  .role-card .role-card-arrow { width: 19px; height: 19px; }
  .role-card-cta { right: 20px; bottom: 20px; }
}
.container { max-width: 1380px; margin: 0 auto; }
.container-tight { max-width: 1100px; margin: 0 auto; }

.eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lemon); display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--lemon); }
.eyebrow.dark { color: var(--ink); }
.eyebrow.dark::before { background: var(--ink); }

.h-display { font-weight: 800; font-size: clamp(40px, 5.4vw, 84px); line-height: 0.92; letter-spacing: -0.035em; margin-bottom: 24px; }
.h-display em { font-style: normal; color: var(--lemon); }
.h-section { font-weight: 800; font-size: clamp(28px, 3.6vw, 52px); line-height: 1; letter-spacing: -0.03em; margin-bottom: 20px; }
.h-section em { font-style: normal; color: var(--lemon); }
.h-block { font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 14px; }

.lede { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; color: var(--bone-dim); font-weight: 400; max-width: 720px; }
.lede.dark { color: rgba(0,0,0,0.65); }

.btn { display: inline-flex; align-items: center; gap: 12px; padding: 18px 28px; background: var(--lemon); color: var(--ink); font-weight: 700; font-size: 14px; border-radius: 999px; transition: scale 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); }
.btn:hover { scale: 1.045; }
.btn.outline {
  position: relative;
  background: transparent;
  color: var(--bone);
  border: 1.5px solid transparent;
}
.btn.outline::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(-15.4612deg, #eeba02 0%, #e86b80 33%, #ae00f4 66%, #39c6e9 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.btn.outline { isolation: isolate; transition: color 0.3s ease, scale 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); }
/* Hover: the pill fills with the brand gradient (orange, salmon, purple, into blue) and the text goes white.
   The fill is a separate layer so it can fade in smoothly (gradients can't be transitioned directly). */
.btn.outline::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(98deg, #eeba02 0%, #e86b80 30%, #ae00f4 68%, #39c6e9 118%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.btn.outline:hover { background: transparent; color: #fff; scale: 1.045; }
.btn.outline:hover::after { opacity: 1; }
.btn.outline::before { transition: opacity 0.3s ease; }
.btn.outline:hover::before { opacity: 0; }
.btn.dark-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn.dark-outline:hover { background: var(--ink); color: var(--bone); scale: 1.045; }
.btn .arrow { transition: transform 0.15s; }
.btn:hover .arrow { transform: translateX(3px); }
svg.arrow { width: 0.72em; height: 0.72em; fill: currentColor; display: inline-block; flex-shrink: 0; }
.btn.lg { padding: 22px 34px; font-size: 16px; }

/* ---- IMAGE PLACEHOLDERS ---- */
.ph { background: #232323; border: 1px solid var(--rule-2); display: grid; place-items: center; position: relative; overflow: hidden; }
.ph::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(45deg, rgba(245,242,235,0.06) 25%, transparent 25%), linear-gradient(-45deg, rgba(245,242,235,0.06) 25%, transparent 25%); background-size: 14px 14px; opacity: 1; }
.ph-label { position: relative; z-index: 1; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-dim); background: var(--ink); padding: 6px 12px; border: 1px solid var(--rule-2); border-radius: 2px; text-align: center; max-width: 80%; }
.ph.bone-ph { background: #D9D3C2; border-color: rgba(0,0,0,0.15); }
.ph.bone-ph::before { background-image: linear-gradient(45deg, rgba(0,0,0,0.08) 25%, transparent 25%), linear-gradient(-45deg, rgba(0,0,0,0.08) 25%, transparent 25%); opacity: 1; }
.ph.bone-ph .ph-label { background: var(--bone); color: rgba(0,0,0,0.7); border-color: rgba(0,0,0,0.18); }

/* ---- MARQUEE ---- */
.marquee { overflow: hidden; padding: 28px 0; position: relative; border-block: 1px solid var(--rule); }
.marquee.bone { background: var(--bone); border-color: rgba(0,0,0,0.08); }
.marquee-track { display: flex; gap: 80px; align-items: center; animation: scroll 50s linear infinite; width: max-content; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logo-cell { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--bone-dim); white-space: nowrap; opacity: 0.65; transition: opacity 0.2s; }
.marquee.bone .logo-cell { color: rgba(0,0,0,0.5); }
.logo-cell:hover { opacity: 1; }

/* ---- TAGS ---- */
.tag { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 9px; border-radius: 2px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tag.lemon { background: var(--lemon); color: var(--ink); }
.tag.outline { color: var(--bone-dim); border: 1px solid var(--rule-2); }
.tag.outline.dark { color: rgba(0,0,0,0.6); border-color: rgba(0,0,0,0.2); }
.tag.lemon-soft { background: var(--lemon-faint); color: var(--lemon); border: 1px solid rgba(240,255,23,0.2); }

/* ---- METRICS ---- */
.metric-value { font-weight: 800; font-size: clamp(28px, 3.6vw, 52px); line-height: 0.95; letter-spacing: -0.04em; color: var(--lemon); font-feature-settings: 'tnum'; }
.metric-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bone-dim); margin-top: 8px; }

/* ---- DIVIDERS ---- */
.divider { height: 1px; background: var(--rule); }
.divider-strong { height: 2px; background: var(--bone); }

/* ---- FORMS ---- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bone-faint); font-weight: 500; }
.field input, .field select, .field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--rule-2); color: var(--bone); font-family: var(--display); font-size: 16px; padding: 10px 0; outline: none; transition: border-color 0.15s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--lemon); }
.field select option, select option { background-color: var(--bone); color: var(--ink); font-weight: 500; padding: 8px 12px; }
.field.dark label { color: rgba(0,0,0,0.5); }
.field.dark input, .field.dark select, .field.dark textarea { color: var(--ink); border-bottom-color: rgba(0,0,0,0.2); }

@media (max-width: 900px) {
  .site-nav { grid-template-columns: 1fr auto; padding: 14px 20px; }
  .nav-links, .nav-phone { display: none; }
  .section { padding: 60px 20px; }
  .h-display { font-size: clamp(36px, 9vw, 56px); }
  .h-section { font-size: clamp(26px, 7vw, 40px); }
  .anno-tag { position: static; display: inline-block; margin-bottom: 12px; }
}

    /* Footer Service Area dropdowns */
    .site-footer .sa-city > summary::-webkit-details-marker { display: none; }
    .site-footer .sa-city > summary::marker { content: ""; }
    .site-footer .sa-city[open] > summary .sa-caret { transform: rotate(180deg); }
    .site-footer .sa-city > summary:hover > span:first-child { color: #fff; }
    .site-footer .sa-city ul a:hover { color: #fff; text-decoration: underline; }
    @media (max-width: 900px) {
      .site-footer { grid-template-columns: 1fr 1fr !important; }
    }
    @media (max-width: 560px) {
      .site-footer { grid-template-columns: 1fr !important; }
    }


  /* =========================================================
     MOBILE RESPONSIVE LAYER — added for full-site mobile pass
     Breakpoints: 900px (tablet/mobile) and 560px (small phone)
     Strategy: this file is built with inline styles almost
     everywhere, so most overrides below use attribute selectors
     ([style*="..."]) with !important to win over the inline
     styles without touching every page's markup individually.
     ========================================================= */

  /* ---- MOBILE NAV: hamburger + slide-in drawer ---- */
  .nav-hamburger {
    display: none;
    width: 40px; height: 40px;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 5px;
    background: transparent; border: 0; cursor: pointer;
    z-index: 210; position: relative;
  }
  .nav-hamburger span {
    display: block; width: 22px; height: 2px; background: var(--bone);
    transition: transform 0.2s, opacity 0.2s;
  }
  .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; }
  .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55);
    z-index: 150; opacity: 0; visibility: hidden; transition: opacity 0.25s;
  }
  .nav-backdrop.show { opacity: 1; visibility: visible; }

  .nav-cta-mobile { display: none; }

  @media (max-width: 900px) {
    .nav-hamburger { display: flex; }
    .site-nav { grid-template-columns: 1fr auto !important; }
    .nav-cta { display: none !important; }

    .nav-links {
      display: none;
    }
    .nav-links.open {
      display: flex !important;
      flex-direction: column;
      align-items: stretch;
      gap: 2px;
      position: fixed;
      top: 0; right: 0;
      width: 82%; max-width: 340px; height: 100vh;
      background: var(--ink);
      padding: 96px 28px 32px;
      overflow-y: auto;
      z-index: 200;
      box-shadow: -16px 0 48px rgba(0,0,0,0.55);
      justify-self: auto !important;
    }
    .nav-links .nav-link {
      padding: 14px 0;
      border-bottom: 1px solid var(--rule);
      width: 100%;
      font-size: 15px;
    }
    .nav-item { flex-direction: column; align-items: stretch; width: 100%; }
    .nav-item .nav-link { border-bottom: 1px solid var(--rule); }
    .nav-item .dropdown {
      position: static !important;
      opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
      transform: none !important;
      background: transparent; border: 0; box-shadow: none;
      padding: 4px 0 10px 14px; min-width: 0; margin: 0;
      transition: none;
    }
    .dropdown-item {
      background: transparent; color: var(--bone-dim);
      padding: 10px 0; font-size: 13.5px;
    }
    .dropdown-item:hover { background: transparent; color: var(--lemon); }

    .nav-cta-mobile {
      display: inline-flex !important;
      margin-top: 20px;
      width: 100%;
      justify-content: center;
    }
  }

  /* ---- GRID COLLAPSE: stack any multi-column layout to 1 column ---- */
  @media (max-width: 900px) {
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns: 1.1fr 1fr"],
    [style*="grid-template-columns: 1.2fr 1fr"],
    [style*="grid-template-columns: 1.3fr 1fr"],
    [style*="grid-template-columns: 1.4fr 1fr"],
    [style*="grid-template-columns: 1fr 1.2fr"],
    [style*="grid-template-columns: 1fr 1.5fr"],
    [style*="grid-template-columns: 1fr 1.6fr"],
    [style*="grid-template-columns: 1fr 2fr"],
    [style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="grid-template-columns: repeat(2, 1fr)"],
    [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns: repeat(4, 1fr)"],
    [style*="grid-template-columns: repeat(6, 1fr)"],
    [style*="grid-template-columns: 1fr repeat(4, auto)"],
    [style*="grid-template-columns: auto 1fr 1.2fr"],
    [style*="grid-template-columns: 0.5fr 2fr 1fr"],
    [style*="grid-template-columns: 265px 1fr"],
    [style*="grid-template-columns: 240px 1fr"],
    [style*="grid-template-columns: 220px 1fr"] {
      grid-template-columns: 1fr !important;
    }
    /* Reduce the gap left over from side-by-side layouts once stacked */
    [style*="gap: 80px"], [style*="gap: 72px"], [style*="gap: 64px"],
    [style*="gap: 56px"], [style*="gap: 48px"] {
      gap: 32px !important;
    }
    [style*="gap: 36px"] { gap: 24px !important; }

    /* 5 Result Cards row (hero strip on Home/service/industry pages):
       instead of stacking all 5 vertically, let it scroll horizontally
       with the thumb, snapping card-to-card, with the next card peeking
       in at the edge so it's obvious there's more to swipe through. */
    [style*="grid-template-columns: repeat(5, 1fr)"] {
      display: flex !important;
      grid-template-columns: none !important;
      overflow-x: auto !important;
      scroll-snap-type: x mandatory !important;
      -webkit-overflow-scrolling: touch;
      gap: 12px !important;
      margin: 0 -20px !important;
      padding: 0 20px 10px !important;
    }
    [style*="grid-template-columns: repeat(5, 1fr)"] > * {
      flex: 0 0 auto !important;
      width: 62% !important;
      scroll-snap-align: start;
    }

    /* Challenge panels (5-panel "Why Google & Meta Ads underperform"
       sections, repeated across every service/industry page): on
       desktop these alternate image-left / text-left. On mobile they
       should ALWAYS show image first, then text — regardless of
       which variant the panel uses on desktop. Scoped to the exact
       grid style these panels share so nothing else on the site is
       affected. */
    [style*="display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;"] > .ph {
      order: -1;
    }

    /* Two-column hero sections (industry, case study, audit, discovery
       call, marketing plan, about pages): on desktop these run text
       left / image-with-floating-stats right. On mobile, show the
       image first. Scoped to the hero's image-wrapper div, which is
       the only place on the site that uses a bare, unadorned
       `position: relative;` inline style (everywhere else it's
       combined with other properties for unrelated purposes) — so
       this can't accidentally catch anything but real hero images.
       The Home page hero doesn't use this two-column pattern at all,
       so it's naturally unaffected. */
    [style="position: relative;"] {
      order: -1;
    }

    /* 6 quote cards ("...care about most." — client results grid,
       reused across Home, industry and service pages): instead of
       stacking all 6 vertically, let it scroll horizontally like the
       5 result cards above, so there's more to swipe through on the
       way to the next section. Scoped with :has() to the exact card
       markup this component uses, so the many OTHER 3-column grids
       on the site (which should still stack normally) are untouched. */
    [style*="grid-template-columns: repeat(3, 1fr)"]:has(> article[style*="background: var(--ink-2); border: 1px solid var(--rule-2); aspect-ratio: 4/5; position: relative; overflow: hidden; display: flex; flex-direction: column;"]) {
      display: flex !important;
      grid-template-columns: none !important;
      overflow-x: auto !important;
      scroll-snap-type: x mandatory !important;
      -webkit-overflow-scrolling: touch;
      gap: 12px !important;
      margin: 0 -20px !important;
      padding: 0 20px 10px !important;
    }
    [style*="grid-template-columns: repeat(3, 1fr)"]:has(> article[style*="background: var(--ink-2); border: 1px solid var(--rule-2); aspect-ratio: 4/5; position: relative; overflow: hidden; display: flex; flex-direction: column;"]) > article {
      flex: 0 0 auto !important;
      width: 78% !important;
      scroll-snap-align: start;
    }
  }

  /* ==== CARD ROW AUTO-SCROLL (mobile/tablet) — styles ====
     Only apply while the script below has switched a row into auto-scroll
     mode (it adds the data-mq attribute at 900px and under). Delete this
     block and the "CARD ROW AUTO-SCROLL" script to revert to the plain
     swipe rows. Hides the scrollbar and turns off snapping so the drift
     is smooth; fingers / mouse still drag freely. */
  html body [data-mq] {
    scroll-snap-type: none !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
  }
  html body [data-mq]::-webkit-scrollbar { display: none; width: 0; height: 0; }
  html body [data-mq].mq-drag { cursor: grabbing; }

  /* ---- SECTION / CONTAINER PADDING: tighten for mobile ---- */
  @media (max-width: 900px) {
    [style*="padding: 96px 48px"] { padding: 48px 20px !important; }
    [style*="padding: 100px 48px"] { padding: 48px 20px !important; }
    [style*="padding: 80px 48px"] { padding: 40px 20px !important; }
    [style*="padding: 72px 48px"] { padding: 36px 20px !important; }
    [style*="padding: 64px 48px"] { padding: 32px 20px !important; }
    [style*="padding: 40px 48px"] { padding: 28px 20px !important; }
    [style*="padding: 32px 48px"] { padding: 24px 20px !important; }
    [style*="padding: 22px 24px"] { padding: 16px 18px !important; }

    [style*="padding-top: 100px"] { padding-top: 48px !important; }
    [style*="padding-top: 80px"]  { padding-top: 40px !important; }
    [style*="padding-top: 72px"]  { padding-top: 36px !important; }
    [style*="padding-top: 64px"]  { padding-top: 32px !important; }
    [style*="padding-top: 60px"]  { padding-top: 32px !important; }
    [style*="padding-top: 40px"]  { padding-top: 28px !important; }
    [style*="padding-top: 32px"]  { padding-top: 24px !important; }

    [style*="padding-bottom: 80px"] { padding-bottom: 40px !important; }
    [style*="padding-bottom: 64px"] { padding-bottom: 32px !important; }
    [style*="padding-bottom: 60px"] { padding-bottom: 32px !important; }
    [style*="padding-bottom: 40px"] { padding-bottom: 28px !important; }
    [style*="padding-bottom: 32px"] { padding-bottom: 24px !important; }

    [style*="padding: 48px 48px 96px"] { padding: 32px 20px 48px !important; }
    [style*="padding: 96px 48px 0"]    { padding: 48px 20px 0 !important; }
  }

  /* ---- LARGE STANDALONE FONT SIZES: scale down on mobile ---- */
  @media (max-width: 900px) {
    [style*="font-size: 80px"] { font-size: 44px !important; }
    [style*="font-size: 60px"] { font-size: 36px !important; }
    [style*="font-size: 48px"] { font-size: 32px !important; }
    [style*="font-size: 36px"] { font-size: 26px !important; }
  }

  /* ---- PROTOTYPE CHROME: keep usable on small screens ---- */
  @media (max-width: 900px) {
    .proto-bar { padding: 10px 14px; gap: 10px; }
    .proto-brand { display: none; }
    .proto-tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .page-marker { padding: 12px 16px; }
    .page-marker-role { display: none; }
  }

  /* ---- Small-phone extra tightening ---- */
  @media (max-width: 560px) {
    .h-display { font-size: clamp(30px, 10vw, 44px) !important; }
    .h-section { font-size: clamp(24px, 8vw, 34px) !important; }
  }





  /* Trust strip logos — real ANZ brand wordmarks, all share the same source canvas height */
  .trust-logo-b1 { background-image: url(/images/cb9f16698e7d.png); background-size: contain; background-repeat: no-repeat; background-position: center; width: 62.4px; height: 90px; }
  .trust-logo-b2 { background-image: url(/images/9035e795709c.png); background-size: contain; background-repeat: no-repeat; background-position: center; width: 60.5px; height: 90px; }
  .trust-logo-b3 { background-image: url(/images/964ee4973eb7.png); background-size: contain; background-repeat: no-repeat; background-position: center; width: 66.2px; height: 90px; }
  .trust-logo-b4 { background-image: url(/images/027a4d886fa5.png); background-size: contain; background-repeat: no-repeat; background-position: center; width: 62.8px; height: 90px; }
  .trust-logo-b5 { background-image: url(/images/23bcdb5f7932.png); background-size: contain; background-repeat: no-repeat; background-position: center; width: 66.9px; height: 90px; }
  .trust-logo-b6 { background-image: url(/images/ce8aba92e9e7.png); background-size: contain; background-repeat: no-repeat; background-position: center; width: 69.6px; height: 90px; }
  .trust-logo-b7 { background-image: url(/images/9e2eddaff303.png); background-size: contain; background-repeat: no-repeat; background-position: center; width: 94.5px; height: 90px; }
  .trust-logo-b8 { background-image: url(/images/1239feefe30f.png); background-size: contain; background-repeat: no-repeat; background-position: center; width: 65.4px; height: 90px; }
  .trust-logo-b9 { background-image: url(/images/adf4fbbf2eba.png); background-size: contain; background-repeat: no-repeat; background-position: center; width: 110.4px; height: 90px; }
  .trust-logo-b10 { background-image: url(/images/a8e375917e5b.png); background-size: contain; background-repeat: no-repeat; background-position: center; width: 69.2px; height: 90px; }
  .trust-logo-b11 { background-image: url(/images/6a33f00a5abf.png); background-size: contain; background-repeat: no-repeat; background-position: center; width: 56.3px; height: 90px; }
  .trust-logo-b12 { background-image: url(/images/e7b133c37b0c.png); background-size: contain; background-repeat: no-repeat; background-position: center; width: 70.3px; height: 90px; }
  /* Hero credibility badges — gradient-outline pill with award icon */
  .badge-award {
    position: relative;
    background: transparent !important;
    color: var(--bone) !important;
    border: 1.5px solid transparent;
  }
  .badge-award::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(90deg, #ff9d28 0%, #e42600 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
  .badge-award-icon {
    display: inline-block;
    width: 13.8px;
    height: 16px;
    background-image: url(/images/beb1764532a9.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
  }
  .badge-award-accent {
    background: linear-gradient(90deg, #ff9d28 0%, #e42600 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  /* ==== BADGE AWARD MESSAGE CYCLE: two lines of copy loop inside the fixed pill shape ==== */
  .badge-award-cycle {
    display: inline-grid;
    position: relative;
    overflow: hidden;
    height: 1.3em;
    line-height: 1.3em;
    vertical-align: middle;
  }
  .badge-award-cycle .badge-award-line {
    grid-area: 1 / 1;
    white-space: nowrap;
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .badge-award-cycle .badge-award-line:nth-child(2) { transform: translateY(115%); opacity: 0; }
  .badge-award-cycle.badge-cycle-2 .badge-award-line:nth-child(1) { transform: translateY(-115%); opacity: 0; }
  .badge-award-cycle.badge-cycle-2 .badge-award-line:nth-child(2) { transform: translateY(0); opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .badge-award-cycle .badge-award-line { transition: none; }
    .badge-award-cycle .badge-award-line:nth-child(2) { display: none; }
  }
  @media (max-width: 900px) {
    .badge-award-cycle { display: inline; height: auto; overflow: visible; white-space: normal; }
    .badge-award-cycle .badge-award-line { position: static; white-space: normal; opacity: 1 !important; transform: none !important; transition: none !important; }
    .badge-award-cycle .badge-award-line:nth-child(2) { display: none; }
  }
  /* Case study logo badges — real client logos */
  .cs-logo-ox-trailers { background-image: url(/images/0297212405d6.png); background-size: contain; background-repeat: no-repeat; background-position: left top; }
  .cs-logo-mariespizza { background-image: url(/images/435957a227d2.png); background-size: contain; background-repeat: no-repeat; background-position: left top; }
  .cs-logo-softwash { background-image: url(/images/2ea8cd8801f8.png); background-size: contain; background-repeat: no-repeat; background-position: left top; }
  .cs-logo-knose { background-image: url(/images/5ad67e70fe6b.png); background-size: contain; background-repeat: no-repeat; background-position: left top; }
  .cs-logo-epicoffroad { background-image: url(/images/bedfa1289bcf.png); background-size: contain; background-repeat: no-repeat; background-position: left top; }
  /* Hero glow: arrow pattern layer (in front) + radial gradient (behind),
     combined into a single background so inline styles can't clobber either */
  .hero-glow-arrows { position: relative; isolation: isolate; }
  .hero-glow-arrows::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, black 7%, black 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, black 7%, black 88%, transparent 100%);
    background:
      url(/images/676ad4b14d60.svg) bottom center / 100% auto no-repeat,
      radial-gradient(ellipse calc(var(--hg-w, 1300px) * (0.6 + 0.4 * var(--hg-rise, 1))) calc(var(--hg-h, 720px) * (0.6 + 0.4 * var(--hg-rise, 1))) at calc(var(--hg-x, 50%) - (1 - var(--hg-rise, 1)) * var(--hg-dx, 0%)) calc(var(--hg-y, -8%) - (1 - var(--hg-rise, 1)) * var(--hg-dy, 70%)), color-mix(in srgb, var(--hg-c1, rgba(255, 108, 28, 0.7)) calc(var(--hg-rise, 1) * 100%), transparent) 0%, color-mix(in srgb, var(--hg-c2, rgba(80, 1, 127, 0.49)) calc(var(--hg-rise, 1) * 100%), transparent) 50%, rgba(0, 0, 0, 0) 100%);
  }
  @media (min-width: 1400px) {
    .hero-glow-arrows::before { background-size: 1380px auto, 100% auto; }
  }
  @media (max-width: 900px) {
    .hero-glow-arrows::before { background-size: 950px auto, 100% auto; }
  }
  /* Case study card photos — real client images */
  .cs-photo-ox-trailers { background-image: url(/images/441bbaa4b9b8.jpg); background-size: cover; background-position: center; }
  .cs-photo-mariespizza { background-image: url(/images/52db64ac5ad9.jpg); background-size: cover; background-position: center; }
  .cs-photo-softwash { background-image: url(/images/c9a2f9026eaa.jpg); background-size: cover; background-position: center; }
  .cs-photo-knose { background-image: url(/images/6c4ab4412468.jpg); background-size: cover; background-position: center; }
  .cs-photo-epicoffroad { background-image: url(/images/0a0db4179ddd.jpg); background-size: cover; background-position: center; }
  
  /* === Testimonial carousel v6: photo travels with its own slide; big site-width arrows; no cropping === */
  .testi-sec { position: relative; overflow: hidden; padding: 0 48px; }
  .testi-bg-fill, .testi-bg-img {
    position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; z-index: 0; pointer-events: none;
  }
  .testi-bg-fill { background: #2b2b44; }
  .testi-bg-img {
    background-image: url(/images/eb4d5331f417.jpg);
    background-size: cover; background-position: center;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
  }
  .testi-sec > .container { position: relative; z-index: 2; }
  .testi-carousel { position: relative; }
  .testi-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 92px; height: 80px;
    border: none; background: transparent; color: #fff; cursor: pointer; padding: 0;
    display: block; z-index: 3; opacity: 0.85; transition: opacity 0.2s ease;
  }
  .testi-arrow:hover { opacity: 1; }
  .testi-arrow svg { width: 100%; height: 100%; display: block; }
  .testi-arrow-prev { left: -10px; }
  .testi-arrow-prev svg { transform: rotate(180deg); }
  .testi-arrow-next { right: -10px; }
  .testi-viewport { overflow: hidden; margin: 0; touch-action: pan-y; cursor: grab; --testi-clear: 88px; --testi-fade: 145px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent var(--testi-clear), #000 var(--testi-fade), #000 calc(100% - var(--testi-fade)), transparent calc(100% - var(--testi-clear)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, transparent var(--testi-clear), #000 var(--testi-fade), #000 calc(100% - var(--testi-fade)), transparent calc(100% - var(--testi-clear)), transparent 100%); }
  .testi-track {
    display: flex; width: 100%;
    transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .testi-track.no-anim { transition: none; }
  .testi-slide {
    flex: 0 0 100%; width: 100%; box-sizing: border-box;
    padding: 32px 130px; min-height: 560px;
    display: flex; align-items: stretch;
  }
  .testi-slide.has-photo { gap: 56px; align-items: flex-end; }
  .testi-photo {
    flex: 0 0 auto; height: 496px; width: auto; aspect-ratio: 480 / 618; margin-bottom: -32px;
    background-image: url(/images/012affba8d5d.webp);
    background-size: 100% 100%; background-repeat: no-repeat;
  }
  @media (min-width: 901px) {
    /* text clump centred on the block (not pinned to the bottom with the photo), plus a little more room above the heads */
    .testi-slide { padding-top: 56px; min-height: 584px; }
    .testi-slide .testi-copy { align-self: center; padding-bottom: 24px; }
  }
  .testi-photo.testi-photo-2 { background-image: url(/images/3b53856806b1.webp); }
  .testi-copy { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
  .testi-q { width: 84px; height: auto; display: block; margin-bottom: 20px; }
  .testi-q-end { width: 68px; height: auto; display: inline-block; vertical-align: -10px; margin-left: 14px; margin-bottom: 0; }
  .testi-quote {
    font-weight: 700; font-size: clamp(28px, 2.8vw, 46px); line-height: 1.28;
    color: #fff; letter-spacing: -0.015em; margin-bottom: 30px;
  }
  .testi-hl { color: var(--lemon); }
  .testi-byline { font-size: 16px; color: rgba(255,255,255,0.75); margin-bottom: 22px; }
  .testi-name { color: var(--lemon); font-weight: 600; }
  .testi-more { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #fff; }
  .testi-more svg { width: 11px; height: 11px; color: #fff; }
  @media (max-width: 900px) {
    .testi-viewport { margin: 0; --testi-clear: 0px; --testi-fade: 36px; }
    .testi-slide, .testi-slide.has-photo { min-height: 0; flex-direction: column; align-items: center; gap: 28px !important; padding: 40px 36px 0; text-align: center; }
    .testi-copy { order: 1; text-align: center; align-items: center; }
    .testi-photo { order: 2; flex: 0 0 auto; width: 78%; max-width: 380px; height: auto; aspect-ratio: 480 / 618; background-size: 100% 100%; background-position: center; margin-bottom: 0; }
    .testi-q { width: 46px; margin-left: auto; margin-right: auto; }
    .testi-q-end { width: 38px; }
    .testi-quote { font-size: 22px; }
    .testi-arrow { display: none; }
  }

/* ==== MOBILE/TABLET CARD EFFECTS ====
   Phones and most tablets can't hover, so the desktop hover effects (grow + gradient border)
   are mirrored here: JS marks the ONE card nearest the middle of the screen with .is-focus. */
@media (max-width: 900px), (hover: none) {
  .hr-card { transition: scale 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
  .js .hr-card.hr-done { transition: scale 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition-delay: 0s; }
  .js .hr-cards > .hr-card.hr-done:nth-child(n) { transition-delay: 0s; }
  .hr-card.is-focus, .svc-card.is-focus, .aud-card.is-focus, .qc-card.is-focus, .role-card.is-focus { scale: 1.035; z-index: 2; }
  .hr-card.is-focus::after, .svc-card.is-focus::before, .aud-card.is-focus::before, .role-card.is-focus::before { opacity: 1; }
}
@media (max-width: 900px) {
  /* a few px of extra breathing room so a grown card never touches its neighbour */
  .role-card, .qc-card { margin-block: 4px; }
  /* hero card strip scrolls sideways, which clips anything outside it: give the grow room at the top */
  .hr-cards[style*="grid-template-columns: repeat(5, 1fr)"] { padding-top: 12px !important; margin-top: -12px !important; }
  /* Homepage "6 quote cards": same sideways looping row as intended (the old selector stopped matching
     these cards, so the loop copies were stacking vertically as 18 cards). */
  .qc-card-grid {
    display: flex !important; grid-template-columns: none !important;
    overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch;
    gap: 12px !important; margin: -12px -20px 0 !important; padding: 12px 20px 10px !important;
  }
  .qc-card-grid > .qc-card { flex: 0 0 auto !important; width: 78% !important; scroll-snap-align: start; margin-block: 0; }
}

/* ==== REPORT DOWNLOAD BLOCK: white, black text/CTA, full-height cover image, gradient THINKING pill ==== */
.section.rpt-sec { background: #fff; color: var(--ink); padding-top: 0 !important; padding-bottom: 0 !important; }
.rpt-grid { align-items: stretch !important; }
.rpt-img { min-height: 100%; background: url(/images/50cbf60a4ae5.webp) center / cover no-repeat; }
.rpt-img { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%); }
.rpt-img { cursor: pointer; }
/* FREE DOWNLOAD pill on the report cover: flashes + pulses to draw the eye */
.rpt-img { position: relative; }
.rpt-badge { position: absolute; left: 9%; top: 85.5%; z-index: 2; display: inline-block; white-space: nowrap;
  padding: 11px 24px; border-radius: 999px; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  background: linear-gradient(90deg, #f1980d 0%, #ff5c20 100%); overflow: hidden;
  transform-origin: center; animation: rpt-pulse 1.6s ease-in-out infinite; }
.rpt-badge::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 100%);
  animation: rpt-shine 2.4s linear infinite; }
@keyframes rpt-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,110,30,0.55), 0 6px 18px rgba(255,92,32,0.35); filter: brightness(1); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(255,110,30,0), 0 8px 30px rgba(255,92,32,0.6); filter: brightness(1.15); }
}
@keyframes rpt-shine {
  0% { left: -60%; animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }   /* builds up speed, glides through, eases off */
  55%, 100% { left: 130%; }
}
/* same shine on the CHALLENGE 1-5 pills (shine only, no pulse) */
.challenge-pill { position: relative; overflow: hidden; }
.challenge-pill::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 100%);
  animation: rpt-shine 2.4s linear infinite; animation-delay: var(--shine-delay, 0s); }
@media (prefers-reduced-motion: reduce) { .rpt-badge, .rpt-badge::after, .challenge-pill::after { animation: none; } }
@media (max-width: 900px) { .rpt-badge { font-size: 10px; padding: 7px 14px; left: 7%; top: 84%; } }   /* will become a link to the report */
.rpt-copy { padding: 110px 0; align-self: center; }
.rpt-sec h3, .rpt-sec h3 em { color: var(--ink); }
.rpt-pill { display: inline-block; padding: 10px 26px; margin-bottom: 22px; border-radius: 999px;
  font-weight: 700; font-size: 12px; letter-spacing: 0.28em; color: var(--ink);
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #a309f2 0%, #3aabe7 50%, #1ce6a0 100%) border-box; }
.rpt-bullet { display: flex; align-items: center; height: 1.45em; }
.rpt-bullet svg { width: 10px; height: 10px; color: var(--ink); fill: currentColor; }
@media (max-width: 900px) {
  /* mobile/tablet: text first (centred), image underneath, sitting on the bottom edge */
  .rpt-copy { order: 1; padding: 56px 0 8px; text-align: center; }
  .rpt-copy ul { align-items: flex-start; width: fit-content; margin-left: auto !important; margin-right: auto !important; }
  .rpt-copy li { text-align: left; }
  .rpt-img { order: 2; min-height: 0; aspect-ratio: 50 / 41; background-size: 133% auto; background-position: 66% 100%; }
}

/* comparison intro: heading + lede left, big brand logo right (logo hidden on mobile/tablet) */
.cmp-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; max-width: 1100px; margin: 0 auto 64px; text-align: left; }
.cmp-intro .h-section { margin: 0; }
.cmp-intro .lede { margin: 20px 0 0; text-align: left; max-width: 560px; }
.cmp-intro-logo { width: 100%; max-width: 460px; height: auto; justify-self: end; display: block; }
@media (max-width: 900px) {
  .cmp-intro { grid-template-columns: 1fr; margin-bottom: 40px; text-align: center; }
  .cmp-intro .lede { text-align: center; margin: 16px auto 0; }
  .cmp-intro-logo { display: none; }
}

/* ==== COMPARISON: yellow CA column that sticks out above and below the table ==== */
.cmp-table { --cmp-r: 18.5px; --cmp-pad: 28px; --cmp-gap: 0px; --cmp-fr: 5; --cmp-ca-fr: 1; --cmp-lead-fr: 2; --cmp-out: 32px; }
.cmp-head { border-radius: var(--cmp-r) var(--cmp-r) 0 0; }
.cmp-row:last-child { border-radius: 0 0 var(--cmp-r) var(--cmp-r); }
.cmp-ca-colbg { position: absolute; z-index: 1; top: calc(-1 * var(--cmp-out)); bottom: calc(-1 * var(--cmp-out)); border-radius: 10px; pointer-events: none;
  background: var(--lemon); animation: cmp-glow 2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 24px rgba(0,0,0,0.45));
  left: calc(var(--cmp-pad) + (100% - 2 * var(--cmp-pad) - 3 * var(--cmp-gap)) * var(--cmp-lead-fr) / var(--cmp-fr) + var(--cmp-gap));
  width: calc((100% - 2 * var(--cmp-pad) - 3 * var(--cmp-gap)) * var(--cmp-ca-fr) / var(--cmp-fr)); }
.cmp-glow-wrap { margin-top: 32px; margin-bottom: 32px; }
/* slimmer tick pills; soft 4% boxes behind the other ticks/crosses */
.cmp-row > .cmp-check, .cmp-row > .cmp-cross { justify-self: center; width: min(92px, 100%); height: 36px; border-radius: 10px; box-sizing: border-box; }
.cmp-row { padding-top: 13px; padding-bottom: 13px; }
.cmp-row > .cmp-check:not(.cmp-ca-col), .cmp-row > .cmp-cross { background: rgba(0,0,0,0.04); }
/* soft echo ring rippling out from the yellow column (a gentler version of the FREE DOWNLOAD pulse) */
.cmp-ca-colbg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  animation: cmp-echo 2.6s cubic-bezier(0.2, 0.6, 0.35, 1) infinite; }
@keyframes cmp-echo {
  0% { box-shadow: 0 0 0 0 rgba(240, 255, 23, 0.32); }
  70%, 100% { box-shadow: 0 0 0 16px rgba(240, 255, 23, 0); }
}
@media (prefers-reduced-motion: reduce) { .cmp-ca-colbg, .cmp-ca-colbg::after { animation: none; } }
@media (max-width: 900px) {
  .cmp-table { --cmp-pad: 12px; --cmp-gap: 6px; --cmp-fr: 4.45; --cmp-ca-fr: 1.3; --cmp-lead-fr: 1.45; --cmp-out: 18px; }
  .cmp-ca-colbg { left: calc(14px + (100% - 24px - 3 * var(--cmp-gap)) * var(--cmp-lead-fr) / var(--cmp-fr) + var(--cmp-gap)); }
  .cmp-ca-colbg { border-radius: 8px; }
  .cmp-row > .cmp-check, .cmp-row > .cmp-cross { width: min(92px, 100%); height: 32px; border-radius: 8px; }
  .cmp-row { padding-top: 16px; padding-bottom: 16px; }
  .cmp-row > .cmp-ca-col { width: min(92px, 78%); }
  .cmp-ca-logo { height: 16px; }
  .cmp-ca-arrow { width: 11px; height: 11px; }
  .cmp-ca-badge { gap: 6px; padding: 2px 0; }
  .cmp-glow-wrap { margin-top: 18px; margin-bottom: 18px; }
}

/* ==== CERTIFICATION STRIP: orange gradient, award line, partner list, triple arrow ==== */
.cert-strip { position: relative; background: linear-gradient(90deg, #ecae09 0%, #e5656c 100%); color: #000; padding: 36px 48px 38px; }
.cert-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.cert-top { display: flex; align-items: center; gap: 22px; }
.cert-award-ic { width: 48px; height: 56px; flex: none; background: #000;
  -webkit-mask: url(/images/beb1764532a9.svg) center / contain no-repeat; mask: url(/images/beb1764532a9.svg) center / contain no-repeat; }
.cert-title { font-family: var(--mono); font-weight: 800; font-size: 15px; letter-spacing: 0.32em; text-transform: uppercase; line-height: 1.3; }
.cert-sub { font-weight: 600; font-size: 13px; color: rgba(0,0,0,0.55); margin-top: 6px; }
.cert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; flex: none; align-items: center; }
/* running ticker: two identical sets slide left forever; edges fade out so it only shows at this width */
.cert-marquee { width: min(840px, 100%); overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%); }
.cert-track { display: flex; width: max-content; animation: cert-scroll 24s linear infinite; }
.cert-marquee:hover .cert-track { animation-play-state: paused; }
@keyframes cert-scroll { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
@media (prefers-reduced-motion: reduce) { .cert-track { animation: none; } }
.cert-list li { font-weight: 800; font-size: clamp(16px, 1.52vw, 22.4px); letter-spacing: -0.025em; line-height: 1.2; padding: 0 22px; position: relative; white-space: nowrap; }
.cert-list li::before { content: ""; position: absolute; left: -1.5px; top: 50%; width: 3px; height: 0.8em; transform: translateY(-50%); background: #fff; border-radius: 2px; }
.cert-arrows { position: absolute; right: 4%; top: 0; width: 46px; height: 48px; background: url(/images/529927d81d16.svg) center / contain no-repeat; }
@media (max-width: 900px) {
  .cert-strip { padding: 32px 20px; }
  .cert-top { gap: 12px; flex-direction: column; text-align: center; }
  .cert-award-ic { width: 34px; height: 40px; }
  .cert-title { font-size: 11px; letter-spacing: 0.2em; }
  .cert-sub { font-size: 12px; }
  .cert-list li { font-size: 17px; padding: 0 16px; }
  .cert-track { animation-duration: 18s; }
  .cert-arrows { display: none; }
}

/* comparison logo: yellow ring spins clockwise and gently pulses around the 'a' */
.ca-ring-pulse, .ca-ring-spin { transform-box: fill-box; transform-origin: center; }
.cmp-intro-logo { overflow: visible; }
.ca-ring-spin { animation: ca-ring-spin 16s linear infinite; }
.ca-ring-pulse { animation: ca-ring-pulse 2.8s ease-in-out infinite; }
@keyframes ca-ring-spin { to { transform: rotate(360deg); } }
@keyframes ca-ring-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(245,255,32,0)); }
  50% { transform: scale(1.06); filter: drop-shadow(0 0 3px rgba(245,255,32,0.55)); }
}
@media (prefers-reduced-motion: reduce) { .ca-ring-spin, .ca-ring-pulse { animation: none; } }

/* ==== SECTION ENTRANCES: role cards + report download ====
   Heading fades down into place, then the supporting text, then the cards / bullets / button, in turn.
   Uses the separate `translate` property so it never fights the cards' hover grow (`scale`). */
.js .role-sec .h-section, .js .role-sec .lede, .js .role-sec .role-card,
.js .rpt-sec .rpt-copy > *, .js .rpt-sec .rpt-img {
  opacity: 0; translate: 0 -24px;
  transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), translate 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), scale 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-delay: var(--sa-d, 0s), var(--sa-d, 0s), 0s;
}
.js .rpt-sec .rpt-img { translate: none; }
.js .sa-in .h-section, .js .sa-in .lede, .js .sa-in .role-card, .js .sa-in .rpt-copy > *, .js .sa-in .rpt-img { opacity: 1; translate: none; }
.role-sec .lede { --sa-d: 0.25s; }
.role-grid > .role-card:nth-child(1) { --sa-d: 0.5s; }
.role-grid > .role-card:nth-child(2) { --sa-d: 0.6s; }
.role-grid > .role-card:nth-child(3) { --sa-d: 0.7s; }
.role-grid > .role-card:nth-child(4) { --sa-d: 0.8s; }
.role-grid > .role-card:nth-child(5) { --sa-d: 0.9s; }
.role-grid > .role-card:nth-child(6) { --sa-d: 1.0s; }
.rpt-copy > :nth-child(2) { --sa-d: 0.08s; }
.rpt-copy > :nth-child(3) { --sa-d: 0.3s; }
.rpt-copy > :nth-child(4) { --sa-d: 0.42s; }
.rpt-copy > :nth-child(5) { --sa-d: 0.6s; }
.rpt-sec .rpt-img { --sa-d: 0.15s; }
@media (prefers-reduced-motion: reduce) {
  .js .role-sec .h-section, .js .role-sec .lede, .js .role-sec .role-card, .js .rpt-sec .rpt-copy > *, .js .rpt-sec .rpt-img { opacity: 1; translate: none; transition: none; }
}


      .st0 {
        fill: #F0FF17;
      }

      .st1 {
        fill: #fff;
      }
    

/* ---- Live site: hide prototype-only UI ---- */
.proto-bar,.page-marker,.anno-tag,.pg-wrap,.pg-exit,.tags-toggle{display:none!important}
section.page{display:block}

/* ==== MENU: scrolls away with the page (no longer sticky) ==== */
.site-nav, nav.site-nav, .site-nav.anno { position: relative !important; top: auto !important; }

/* ==== GRADIENT PILLS: crisp, even border + a light that shines across ====
   Used by the hero award badge (.badge-award) and the "Free audit · Valued at $3,000" pill (.ab-pill).
   The old 1.5px masked ring drew patchy (uneven thickness) on some screens; a whole-pixel ring on its own
   layer draws evenly all the way round. A bright glint then sweeps left to right across the border
   (and across the lettering on the audit pill), pauses, and repeats. */
@property --pill-x { syntax: '<percentage>'; inherits: true; initial-value: -40%; }
.badge-award, .ab-pill { isolation: isolate; animation: pill-shine 3.6s cubic-bezier(0.45, 0, 0.35, 1) infinite; }
.badge-award::before, .ab-pill::before {
  padding: 2px !important; box-sizing: border-box; transform: translateZ(0);
}
.badge-award::after, .ab-pill::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; box-sizing: border-box; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) calc(var(--pill-x) - 20%), rgba(255,240,220,0.55) calc(var(--pill-x) - 7%),
    #ffffff var(--pill-x), rgba(255,240,220,0.55) calc(var(--pill-x) + 7%), rgba(255,255,255,0) calc(var(--pill-x) + 20%));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
  transform: translateZ(0);
}
/* the lettering on the audit pill catches the light as it passes */
.ab-pill {
  background: linear-gradient(100deg, #f1980d 0%, #ff7a1c calc(var(--pill-x) - 14%), #fff3e6 var(--pill-x), #ff6a1c calc(var(--pill-x) + 14%), #ff5c20 100%);
  -webkit-background-clip: text; background-clip: text;
}
@keyframes pill-shine { 0% { --pill-x: -40%; } 55%, 100% { --pill-x: 140%; } }
@media (prefers-reduced-motion: reduce) {
  .badge-award, .ab-pill { animation: none; }
  .badge-award::after, .ab-pill::after { display: none; }
}