/**
 * Creator Layer — brand v1.0 (October 2026)
 *
 * Navy / teal identity from the Creator Layer Brand Guidelines. Loaded last,
 * and only on pages whose <body> carries `.cl-brand`, so pages that have not
 * been converted yet keep rendering with the previous palette.
 *
 * The legacy template tokens are re-pointed here rather than rewritten, the
 * same way styles.css aliases them: every existing rule resolves to the new
 * brand, and only the places that need a different *design* are restyled below.
 *
 * Balance to hold: ~70% white and Surface 50, 20% navy, 7% slate text, 3% teal.
 */

/* ------------------------------------------------------------------ fonts */
@font-face {
  font-family: "Geist";
  src: url("../font/geist/Geist-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../font/geist/Geist-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../font/geist/Geist-SemiBold.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------- tokens */
:root {
  /* Brand guidelines, p.10 */
  --color-heading: #1E2C52;   /* Navy — headings, dark surfaces, secondary CTA */
  --btn-primary-bg: #1FB6AE;  /* Teal — primary CTA, accent */
  --color-bg: #FFFFFF;        /* White — page surface */
  --color-text: #3E4C6A;      /* Slate 700 — body text */
  --color-link: #0E7C77;      /* Teal 700 — links and small accent text */
  --color-bg-alt: #F5F7F9;    /* Surface 50 — alternate surface */

  --cl-navy-900: #162241;     /* hover / pressed navy */
  --cl-teal-50: #E8F7F6;      /* teal tint for chips and icon wells */
  --cl-line: rgba(30, 44, 82, 0.12);
  --cl-line-strong: rgba(30, 44, 82, 0.2);
  --cl-on-navy: rgba(255, 255, 255, 0.78);
  --cl-line-on-navy: rgba(255, 255, 255, 0.14);

  --cl-font-head: "Outfit", system-ui, sans-serif;
  /* Body set in Outfit as well (client request, Oct 2026) so headings and
     text read as one family. The guidelines' Geist stays available below:
     swap this line back to "Geist" to restore it. */
  --cl-font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Motion: strong ease-out for anything entering or responding to input. */
  --cl-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --cl-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --cl-radius-sm: 10px;
  --cl-radius: 16px;
  --cl-radius-lg: 24px;
  --cl-shadow: 0 1px 2px rgba(30, 44, 82, 0.05), 0 18px 40px -18px rgba(30, 44, 82, 0.22);
  --cl-shadow-lg: 0 2px 4px rgba(30, 44, 82, 0.04), 0 40px 80px -32px rgba(30, 44, 82, 0.28);

  /* Previous CreatorLayer tokens, re-pointed */
  --cl-blue: var(--color-link);
  --cl-lime: var(--btn-primary-bg);
  --cl-ink: var(--color-heading);
  --cl-navy: var(--color-heading);
  --paragraph: var(--color-text);
  --font-2: var(--cl-font-body);
  --color-primary-rgb: 14, 124, 119;

  /* Template demo palettes, re-pointed */
  --digital-marketing-blue: var(--color-link);
  --digital-marketing-black: var(--color-heading);
  --digital-marketing-light: var(--btn-primary-bg);
  --digital-marketing-gray: var(--color-bg-alt);
  --digital-marketing-dark: var(--color-heading);
  --branding-agency-black: var(--color-heading);
  --seo-gray-dark: var(--cl-teal-50);
  --seo-marketing-gray: var(--color-bg-alt);
  --seo-marketing-pink: var(--color-link);
  --color-border-1: var(--cl-line);
  --color-border-2: var(--cl-line);
  --color-border-4: var(--cl-line);
  --color-border-6: var(--cl-line);
  --color-border-7: var(--cl-line);
  --color-border-8: var(--cl-line);
  --color-bg-3: #DDE3EA;
  --color-bg-4: var(--btn-primary-bg);
  --color-bg-5: rgba(31, 182, 174, 0.08);
  --black: var(--color-heading);
}

/* ------------------------------------------------------------------- base */
body.cl-brand,
body.cl-brand p,
body.cl-brand .ff-2 {
  font-family: var(--cl-font-body);
}

/* The template pins links and form controls to Figtree, which is no longer
   loaded; let them follow whatever they sit in. */
body.cl-brand a,
body.cl-brand button,
body.cl-brand input,
body.cl-brand select,
body.cl-brand textarea {
  font-family: inherit;
}

body.cl-brand {
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

body.cl-brand h1,
body.cl-brand h2,
body.cl-brand h3,
body.cl-brand h4,
body.cl-brand h5,
body.cl-brand h6,
body.cl-brand .h1,
body.cl-brand .h2,
body.cl-brand .h3,
body.cl-brand .h4,
body.cl-brand .h5,
body.cl-brand .h6,
body.cl-brand .counter-item span,
body.cl-brand .odometer,
body.cl-brand .odometer * {
  font-family: var(--cl-font-head) !important;
}

/* Outfit is wider-set than Figtree; the template's -0.03em tracking crushes it. */
body.cl-brand .letter-space--3,
body.cl-brand .letter-space--5 {
  letter-spacing: -0.02em;
}

body.cl-brand .letter-space--2 {
  letter-spacing: -0.01em;
}

/* Entrance animations start some parts a little outside their box; clip
   sideways so they can never widen the page (clip, unlike hidden, keeps the
   sticky header working). */
body.cl-brand #wrapper {
  overflow-x: clip;
}

body.cl-brand ::selection {
  background: var(--btn-primary-bg);
  color: var(--color-heading);
}

body.cl-brand input,
body.cl-brand textarea {
  caret-color: var(--color-link);
}

body.cl-brand h1,
body.cl-brand h2,
body.cl-brand .heading-section .title {
  text-wrap: balance;
}

body.cl-brand .odometer,
body.cl-brand .number-counter {
  font-variant-numeric: tabular-nums;
}

body.cl-brand a:focus-visible,
body.cl-brand button:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Small label that opens a section: teal-700, never a pill. */
body.cl-brand .cl-eyebrow,
body.cl-brand .heading-section .sub-title,
body.cl-brand .sub-title {
  font-family: var(--cl-font-body) !important;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text);
}

body.cl-brand .cl-eyebrow span,
body.cl-brand .heading-section .sub-title span,
body.cl-brand .sub-title span {
  color: var(--color-link);
  font-style: normal;
  font-weight: 600;
}

/* ---------------------------------------------------------------- buttons */
/* One button for the whole site: a 12px-radius block holding the label and a
   nested arrow well, so the arrow never sits naked beside the text. The
   template's separate pill + circle is flattened into it. */
body.cl-brand .tf-btn {
  --btn-bg: var(--color-heading);
  --btn-fg: #FFFFFF;
  --btn-bd: var(--color-heading);
  --btn-well: rgba(255, 255, 255, 0.14);
  --btn-bg-hover: var(--cl-navy-900);
  --btn-fg-hover: #FFFFFF;
  --btn-bd-hover: var(--cl-navy-900);
  --btn-well-hover: rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 5px 5px 5px 18px;
  border: 1.5px solid var(--btn-bd);
  border-radius: 12px;
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  transition:
    background-color 0.22s var(--cl-ease-out),
    border-color 0.22s var(--cl-ease-out),
    color 0.22s var(--cl-ease-out),
    transform 0.16s var(--cl-ease-out);
}

body.cl-brand .tf-btn.style-big {
  min-height: 54px;
  padding: 6px 6px 6px 22px;
  border-radius: 14px;
}

body.cl-brand .tf-btn .text-btn,
body.cl-brand .tf-btn .icon-btn {
  padding: 0;
  border: 0 !important;
  color: inherit !important;
}

body.cl-brand .tf-btn .text-btn {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent !important;
  font-family: var(--cl-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

body.cl-brand .tf-btn.style-big .text-btn {
  font-size: 16px;
}

body.cl-brand .tf-btn .icon-btn {
  flex: none;
  width: 33px;
  height: 33px;
  border-radius: 8px;
  background: var(--btn-well) !important;
  font-size: 15px;
  transform: none;
  transition: background-color 0.22s var(--cl-ease-out);
}

body.cl-brand .tf-btn.style-big .icon-btn {
  width: 39px;
  height: 39px;
  border-radius: 9px;
}

body.cl-brand .tf-btn .icon-btn i {
  display: block;
  transition: transform 0.28s var(--cl-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  body.cl-brand .tf-btn:hover {
    background-color: var(--btn-bg-hover);
    border-color: var(--btn-bd-hover);
    color: var(--btn-fg-hover);
  }

  body.cl-brand .tf-btn:hover .icon-btn {
    background: var(--btn-well-hover) !important;
    transform: none;
  }

  body.cl-brand .tf-btn:hover .icon-btn i {
    transform: translate(2px, -2px);
  }
}

body.cl-brand .tf-btn:active {
  transform: scale(0.97);
}

/* Primary CTA — teal with navy label (white on teal fails AA). */
body.cl-brand .tf-btn.cl-btn-primary,
body.cl-brand .tf-btn.style-color-dt-light,
body.cl-brand .tf-btn.style-bg-color-ba-light-green {
  --btn-bg: var(--btn-primary-bg);
  --btn-fg: var(--color-heading);
  --btn-bd: var(--btn-primary-bg);
  --btn-well: rgba(30, 44, 82, 0.12);
  --btn-bg-hover: var(--color-heading);
  --btn-fg-hover: #FFFFFF;
  --btn-bd-hover: var(--color-heading);
  --btn-well-hover: rgba(255, 255, 255, 0.16);
}

/* Secondary — navy outline. */
body.cl-brand .tf-btn.style-border {
  --btn-bg: #FFFFFF;
  --btn-fg: var(--color-heading);
  --btn-bd: var(--cl-line-strong);
  --btn-well: var(--color-bg-alt);
  --btn-bg-hover: var(--color-heading);
  --btn-fg-hover: #FFFFFF;
  --btn-bd-hover: var(--color-heading);
  --btn-well-hover: rgba(255, 255, 255, 0.16);
}

/* On navy surfaces the navy button would vanish: solid becomes teal, outline
   becomes white. */
body.cl-brand .cl-on-navy .tf-btn,
body.cl-brand .footer .tf-btn {
  --btn-bg: var(--btn-primary-bg);
  --btn-fg: var(--color-heading);
  --btn-bd: var(--btn-primary-bg);
  --btn-well: rgba(30, 44, 82, 0.12);
  --btn-bg-hover: #FFFFFF;
  --btn-fg-hover: var(--color-heading);
  --btn-bd-hover: #FFFFFF;
  --btn-well-hover: rgba(30, 44, 82, 0.08);
}

body.cl-brand .cl-on-navy .tf-btn.style-border {
  --btn-bg: transparent;
  --btn-fg: #FFFFFF;
  --btn-bd: rgba(255, 255, 255, 0.4);
  --btn-well: rgba(255, 255, 255, 0.12);
}

/* ----------------------------------------------------------------- header */
body.cl-brand .header.header-fixed,
body.cl-brand .header.header-fixed.is-fixed {
  background-color: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
}

body.cl-brand .header.header-fixed.is-fixed {
  border-bottom-color: var(--cl-line);
}

body.cl-brand .header .header-content {
  padding: 10px 0;
}

/* Desktop: the bar lifts off the page edge and becomes its own surface. */
@media (min-width: 1200px) {
  body.cl-brand .header.header-fixed,
  body.cl-brand .header.header-fixed.is-fixed {
    top: 14px;
    margin-top: 14px;
    border-bottom: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none;
  }

  body.cl-brand .header .header-content {
    padding: 9px 10px 9px 22px;
    border: 1px solid var(--cl-line);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: saturate(1.5) blur(16px);
    backdrop-filter: saturate(1.5) blur(16px);
    box-shadow: 0 1px 2px rgba(30, 44, 82, 0.04);
    pointer-events: auto;
    transition: box-shadow 0.3s var(--cl-ease-out), background-color 0.3s var(--cl-ease-out);
  }

  /* Once the page scrolls the bar tightens and lifts. */
  body.cl-brand .header.is-fixed .header-content {
    padding-block: 5px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--cl-shadow);
  }

  body.cl-brand .header .header-content {
    transition:
      padding 0.35s var(--cl-ease-out),
      box-shadow 0.3s var(--cl-ease-out),
      background-color 0.3s var(--cl-ease-out);
  }
}

body.cl-brand .header .logo img {
  display: block;
  width: auto;
  height: 44px !important;
}

body.cl-brand .header .box-nav-menu {
  gap: 40px;
}

body.cl-brand .header .item-link {
  font-family: var(--cl-font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-heading);
}

body.cl-brand .header .item-link:hover,
body.cl-brand .header .item-link.active,
body.cl-brand .header .menu-item:hover > .item-link {
  color: var(--color-link);
}

/* Nav links: a teal rule grows under the label on hover and stays under the
   current page. */
body.cl-brand .header .item-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--btn-primary-bg);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.35s var(--cl-ease-out);
}

body.cl-brand .header .item-link.active::after {
  transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
  body.cl-brand .header .menu-item:hover > .item-link::after {
    transform: scaleX(1);
  }
}

body.cl-brand .header .item-link .icon {
  transition: transform 0.3s var(--cl-ease-out);
}

/* Dropdowns open from their trigger: a short rise and fade, faster out. */
body.cl-brand .header .sub-menu {
  top: calc(100% - 4px);
  left: -18px;
  min-width: 220px;
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-radius);
  background: #FFFFFF;
  box-shadow: var(--cl-shadow);
  transform: translateY(8px);
  transform-origin: 50% 0;
  transition:
    opacity 0.15s var(--cl-ease-out),
    transform 0.15s var(--cl-ease-out),
    visibility 0.15s;
}

body.cl-brand .header .menu-item:hover .sub-menu {
  transform: translateY(0);
  transition-duration: 0.25s;
}

body.cl-brand .header .sub-menu_list {
  padding: 8px;
}

body.cl-brand .header .sub-menu_link {
  padding: 10px 12px;
  border-radius: 10px;
  font-family: var(--cl-font-body);
  font-size: 15px;
  color: var(--color-heading);
  transition: background-color 0.2s var(--cl-ease-out), color 0.2s var(--cl-ease-out);
}

body.cl-brand .header .sub-menu_link:hover {
  background: var(--color-bg-alt);
  color: var(--color-link);
}

body.cl-brand .header .logo img {
  transition: transform 0.4s var(--cl-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  body.cl-brand .header .logo:hover img {
    transform: scale(1.03);
  }

  body.cl-brand .tf-btn-sidebar:hover i {
    transform: rotate(90deg);
  }
}

body.cl-brand .tf-btn-sidebar i {
  display: block;
  transition: transform 0.4s var(--cl-ease-out);
}

body.cl-brand .tf-btn-sidebar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--cl-line-strong);
  border-radius: var(--cl-radius-sm);
  transition: border-color 0.2s var(--cl-ease-out), background-color 0.2s var(--cl-ease-out), transform 0.16s var(--cl-ease-out);
}

body.cl-brand .tf-btn-sidebar:active {
  transform: scale(0.96);
}

body.cl-brand .tf-btn-sidebar i {
  color: var(--color-heading);
  font-size: 16px;
}

body.cl-brand .tf-btn-sidebar:hover {
  border-color: var(--color-heading);
  background: var(--color-bg-alt);
}

body.cl-brand .header .mobile-button span {
  background-color: var(--color-heading);
}

/* ------------------------------------------------------------------- hero */
/* Offer and proof on the left, one portrait on the right rising out of a teal
   disc with a few proof cards around it.

   Built to hold on every screen: the columns and type scale fluidly, and
   everything inside the figure is sized in container units (cqw), so the
   cards, chips and ring shrink and grow with the figure itself rather than
   jumping between breakpoints. */
.cl-hero {
  position: relative;
  padding: clamp(28px, 4vw, 72px) 0 clamp(56px, 7vw, 112px);
  background:
    radial-gradient(56% 64% at 18% 52%, rgba(31, 182, 174, 0.1), rgba(31, 182, 174, 0) 70%),
    var(--color-bg);
  overflow: hidden;
}

.cl-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(32px, 5vw, 104px);
  max-width: 1320px;
  margin-inline: auto;
}

body.cl-brand .cl-hero__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(14px, 1.4vw, 22px);
  font-size: clamp(12px, 0.95vw, 14px) !important;
  line-height: 20px !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
}

.cl-hero__kicker::before {
  content: "";
  flex: none;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--btn-primary-bg);
}

/* The template forces h1 to 100px with !important; this has to match it.
   Each colour is its own balanced block, so no word is ever orphaned. */
body.cl-brand .cl-hero__title {
  margin-bottom: clamp(18px, 1.8vw, 28px);
  font-size: clamp(40px, 5.2vw, 84px) !important;
  line-height: 1.04 !important;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--color-heading);
}

.cl-hero__title span {
  display: block;
  text-wrap: balance;
}

.cl-hero__title-a {
  color: var(--color-link);
}

body.cl-brand .cl-hero__desc {
  max-width: 29em;
  margin-bottom: clamp(24px, 2.4vw, 36px);
  font-size: clamp(17px, 1.4vw, 20px) !important;
  line-height: 1.6 !important;
  color: var(--color-text);
}

.cl-hero__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Hand-drawn pointer at the primary action. */
.cl-hero__arrow {
  position: absolute;
  top: -46px;
  left: -86px;
  width: 78px;
  height: 78px;
  color: var(--color-heading);
  pointer-events: none;
}

.cl-hero__proof {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(24px, 2.6vw, 40px);
  padding-top: clamp(20px, 2vw, 28px);
  border-top: 1px solid var(--cl-line);
  max-width: 34em;
}

body.cl-brand .cl-hero__proof-text {
  max-width: 22em;
  font-size: 15px !important;
  line-height: 22px !important;
  color: var(--color-text);
}

.cl-hero__proof-text strong {
  font-weight: 600;
  color: var(--color-heading);
}

.cl-hero__avatars {
  display: flex;
  flex: none;
}

.cl-hero__avatars a {
  width: 44px;
  height: 44px;
  margin-left: -12px;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.cl-hero__avatars a:first-child {
  margin-left: 0;
}

.cl-hero__avatars img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

/* ---- figure: the disc is the frame, the portrait breaks out of its top */
.cl-hero__figure {
  --disc: 84cqw;
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  aspect-ratio: 1 / 1.12;
}

/* A thin orbit around the disc with one teal marker travelling it. */
.cl-hero__ring {
  position: absolute;
  left: 50%;
  bottom: calc(var(--disc) * -0.09);
  width: calc(var(--disc) * 1.18);
  aspect-ratio: 1;
  margin-left: calc(var(--disc) * -0.59);
  border: 1.5px solid rgba(30, 44, 82, 0.12);
  border-radius: 50%;
}

.cl-hero__ring i {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  background: var(--btn-primary-bg);
  box-shadow: 0 0 0 1px rgba(30, 44, 82, 0.1);
}

@media (prefers-reduced-motion: no-preference) {
  .cl-hero__ring {
    animation: cl-orbit 48s linear infinite;
  }
}

@keyframes cl-orbit {
  to { rotate: 360deg; }
}

.cl-hero__disc,
.cl-hero__person {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--disc);
  height: var(--disc);
  transform: translateX(-50%);
}

.cl-hero__disc {
  border-radius: 50%;
  background: linear-gradient(160deg, #46C6C6 0%, var(--btn-primary-bg) 55%, #1596A8 100%);
  box-shadow: 0 40px 70px -40px rgba(14, 124, 119, 0.7);
}

/* Open at the top so the head rises past the disc; rounded to the disc's own
   radius at the bottom so the body is cut by its edge. */
.cl-hero__person {
  clip-path: inset(-60% 0 0 0 round 0 0 calc(var(--disc) / 2) calc(var(--disc) / 2));
}

.cl-hero__person img {
  position: absolute;
  left: 50%;
  bottom: -34%;
  width: auto;
  height: 164% !important;
  max-width: none;
  /* Centred with a margin, not a transform: GSAP animates this image, and a
     CSS transform here gets overwritten and throws the portrait off-centre.
     The image is 0.726 of the disc wide; -52% of that is -0.3775 disc. */
  margin-left: calc(var(--disc) * -0.3775);
}

.cl-hero__chip,
.cl-hero__stat {
  position: absolute;
  z-index: 2;
  border: 1px solid var(--cl-line);
  background: #FFFFFF;
  box-shadow: var(--cl-shadow);
}

.cl-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 1.7cqw 2.8cqw 1.7cqw 2.4cqw;
  border-radius: 999px;
  font-size: clamp(11px, 2.5cqw, 15px);
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-heading);
  white-space: nowrap;
}

.cl-hero__chip--b::before,
.cl-hero__chip--c::before {
  content: "";
  width: clamp(6px, 1.4cqw, 8px);
  height: clamp(6px, 1.4cqw, 8px);
  border-radius: 50%;
  background: var(--btn-primary-bg);
}

.cl-hero__chip--a {
  top: 15%;
  left: 3%;
  display: grid;
  place-items: center;
  width: 13cqw;
  height: 13cqw;
  padding: 0;
}

.cl-hero__chip--a img {
  width: 76%;
  height: auto !important;
}

/* Right-hand chips stay inside the figure unless the screen has spare room. */
.cl-hero__chip--b {
  top: 20%;
  right: 0;
}

.cl-hero__chip--c {
  right: -1%;
  bottom: 31%;
}

.cl-hero__stat {
  padding: 2.9cqw 3.2cqw;
  border-radius: clamp(12px, 2.8cqw, 16px);
}

.cl-hero__stat--retention {
  left: -1%;
  bottom: 35%;
  width: 33cqw;
}

body.cl-brand .cl-hero__stat-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.6cqw;
  font-size: clamp(9.5px, 2.1cqw, 12.5px) !important;
  line-height: 1.35 !important;
  font-weight: 500;
  color: var(--color-text);
}

.cl-hero__stat-top strong {
  font-family: var(--cl-font-head);
  font-size: clamp(15px, 3.9cqw, 23px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-link);
}

.cl-hero__bars {
  display: flex;
  align-items: flex-end;
  gap: 1cqw;
  height: 8.6cqw;
  margin-top: 1.8cqw;
}

.cl-hero__bars i {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: var(--cl-teal-50);
  transform-origin: 50% 100%;
}

.cl-hero__bars i:nth-child(1) { height: 34%; }
.cl-hero__bars i:nth-child(2) { height: 48%; }
.cl-hero__bars i:nth-child(3) { height: 62%; }
.cl-hero__bars i:nth-child(4) { height: 80%; background: var(--btn-primary-bg); }
.cl-hero__bars i:nth-child(5) { height: 100%; background: var(--color-heading); }

.cl-hero__stat--rating {
  left: 6%;
  bottom: 8%;
}

.cl-hero__stars {
  display: flex;
  gap: 0.4cqw;
  margin-bottom: 0.8cqw;
}

.cl-hero__stars svg {
  width: clamp(11px, 2.7cqw, 16px);
  height: clamp(11px, 2.7cqw, 16px);
  fill: var(--btn-primary-bg);
}

body.cl-brand .cl-hero__stat-line {
  font-size: clamp(10.5px, 2.3cqw, 13.5px) !important;
  line-height: 1.35 !important;
  color: var(--color-text);
  white-space: nowrap;
}

.cl-hero__stat-line strong {
  font-family: var(--cl-font-head);
  font-size: clamp(14px, 3.1cqw, 18px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-heading);
}

/* Chips drift a few pixels; nothing else in the hero loops. */
@media (prefers-reduced-motion: no-preference) {
  .cl-hero__chip,
  .cl-hero__stat {
    animation: cl-drift 6s ease-in-out infinite alternate;
  }

  .cl-hero__chip--b,
  .cl-hero__stat--rating {
    animation-duration: 7.5s;
    animation-delay: -2s;
  }

  .cl-hero__chip--c {
    animation-duration: 8.5s;
    animation-delay: -4s;
  }
}

@keyframes cl-drift {
  from { translate: 0 -5px; }
  to { translate: 0 5px; }
}

/* Very wide screens: more room for both columns, and the side cards can
   step outside the figure. */
@media (min-width: 1600px) {
  .cl-hero__grid {
    max-width: 1480px;
  }

  .cl-hero__figure {
    max-width: 680px;
  }

  .cl-hero__chip--b { right: -5%; }
  .cl-hero__chip--c { right: -8%; }
  .cl-hero__stat--retention { left: -6%; }
}

@media (max-width: 1599px) {
  .cl-hero__arrow {
    display: none;
  }
}

/* Tablets: one column, the headline gets the full measure, the figure sits
   centred beneath it. */
@media (max-width: 991px) {
  .cl-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(36px, 7vw, 56px);
  }

  body.cl-brand .cl-hero__title {
    font-size: clamp(40px, 7vw, 60px) !important;
  }

  .cl-hero__figure {
    max-width: min(84%, 520px);
  }
}

/* Phones. */
@media (max-width: 575px) {
  body.cl-brand .cl-hero__title {
    font-size: clamp(31px, 10vw, 44px) !important;
    line-height: 1.06 !important;
  }

  .cl-hero__actions .tf-btn {
    flex: 1 1 100%;
    max-width: none;
    justify-content: space-between;
  }

  .cl-hero__proof {
    align-items: flex-start;
  }

  .cl-hero__avatars a {
    width: 40px;
    height: 40px;
  }

  .cl-hero__figure {
    max-width: min(100%, 380px);
  }
}

/* Short, wide screens (phones on their side, small laptops): keep the hero
   from running far past the fold. */
@media (min-width: 992px) and (max-height: 760px) {
  .cl-hero {
    padding-top: 20px;
    padding-bottom: 48px;
  }

  body.cl-brand .cl-hero__title {
    font-size: clamp(38px, 4.4vw, 64px) !important;
  }

  .cl-hero__figure {
    max-width: min(100%, 70vh);
  }
}

/* The sticky quote bar steps aside while the hero's own buttons are on
   screen, so the same action is never shown twice (class set in cl-motion.js). */
body.cl-brand .cl-mobile-cta {
  transition: transform 0.4s var(--cl-ease-out);
}

body.cl-brand.cl-hero-cta-on .cl-mobile-cta {
  transform: translateY(110%);
}

@media (prefers-reduced-motion: reduce) {
  body.cl-brand .cl-mobile-cta {
    transition: none;
  }
}

/* -------------------------------------------------------------- statement */
/* The agency's position: copy on the left, the "four disciplines, one system"
   illustration on the right, and the four proof points as one ruled row
   underneath. The headline's words come up to full strength on scroll. */
.cl-statement {
  padding: clamp(80px, 9vw, 144px) 0;
}

.cl-statement__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: 48px clamp(40px, 6vw, 112px);
  max-width: 1400px;
  margin-inline: auto;
}

body.cl-brand .cl-statement__label {
  margin-bottom: 20px;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 500;
  color: var(--color-text);
}

.cl-statement__label span {
  font-weight: 600;
  color: var(--color-link);
}

body.cl-brand .cl-statement__text {
  max-width: 19ch;
  margin-bottom: 28px;
  font-size: clamp(30px, 3.5vw, 54px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-heading);
}

.cl-statement__text .cl-word {
  display: inline-block;
}

body.cl-brand .cl-statement__lead {
  max-width: 30em;
  margin-bottom: 32px;
  font-size: 18px !important;
  line-height: 30px !important;
  color: var(--color-text);
}

.cl-statement__art {
  margin: 0;
}

/* The growth-system graphic, built from separate parts so each can move: four
   tiles cut from the illustration, SVG wires, and the official mark on a navy
   core. Everything is placed in % of the original 1848 x 1408 artboard. */
.cl-system {
  position: relative;
  aspect-ratio: 1848 / 1408;
}

.cl-system__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cl-system__wire,
.cl-system__pulse {
  fill: none;
  stroke-linecap: round;
}

.cl-system__wire {
  stroke: var(--color-link);
  stroke-width: 5;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* A short bright run that travels each wire toward the core. Parked just
   before the start of the path until the script sets it moving. */
.cl-system__pulse {
  stroke: var(--btn-primary-bg);
  stroke-width: 9;
  stroke-dasharray: 0.12 1;
  stroke-dashoffset: 0.12;
  opacity: 0;
}

.cl-system__dot {
  fill: var(--color-link);
}

.cl-system__core {
  position: absolute;
  left: 31.76%;
  top: 26.07%;
  width: 36.26%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-heading);
  box-shadow: 0 2px 4px rgba(30, 44, 82, 0.16), 0 26px 40px -14px rgba(30, 44, 82, 0.45);
  will-change: transform;
}

.cl-system__core img {
  width: 96%;
  height: auto !important;
}

.cl-system__tile {
  position: absolute;
  width: 28.14%;
  height: auto !important;
  filter:
    drop-shadow(0 2px 3px rgba(30, 44, 82, 0.1))
    drop-shadow(0 20px 26px rgba(30, 44, 82, 0.16));
  will-change: transform;
}

.cl-system__tile--search { left: 1.19%; top: 1.56%; }
.cl-system__tile--ads { left: 70.67%; top: 1.56%; }
.cl-system__tile--creative { left: 1.19%; top: 65.98%; }
.cl-system__tile--web { left: 70.67%; top: 65.98%; }

.cl-statement__points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 48px);
  max-width: 1400px;
  margin: clamp(56px, 6vw, 96px) auto 0;
  padding: 0;
  list-style: none;
}

.cl-statement__points li {
  position: relative;
  padding: 26px 0 0;
  border-top: 1px solid var(--cl-line-strong);
  font-size: 18px;
  line-height: 27px;
  font-weight: 500;
  color: var(--color-heading);
}

/* A short teal run on each rule marks the start of a point. */
.cl-statement__points li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--btn-primary-bg);
}

@media (max-width: 991px) {
  .cl-statement__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.cl-brand .cl-statement__text {
    max-width: 22ch;
  }

  .cl-statement__points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
  }
}

@media (max-width: 575px) {
  .cl-statement__points {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .cl-statement__points li {
    padding: 18px 0;
    font-size: 17px;
  }
}

/* --------------------------------------------------------- services index */
/* Services as an illustrated index. The intro and a preview panel hold still
   on the left while the list scrolls; each row carries a small illustration,
   and the panel shows the large version of whichever row is hovered, focused
   or nearest the middle of the screen (cl-services.js). */
.cl-services {
  padding: clamp(72px, 8vw, 136px) 0;
  background: var(--color-bg-alt);
}

.cl-services__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: 48px clamp(32px, 5vw, 96px);
  max-width: 1400px;
  margin-inline: auto;
}

.cl-services__intro {
  position: sticky;
  top: 112px;
}

.cl-services .cl-eyebrow {
  margin-bottom: 16px;
}

body.cl-brand .cl-services__title {
  margin-bottom: 16px;
  font-size: clamp(28px, 2.7vw, 44px) !important;
  line-height: 1.1 !important;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--color-heading);
}

body.cl-brand .cl-services__desc {
  max-width: 30em;
  margin-bottom: 24px;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--color-text);
}

/* ---- preview panel: every illustration stacked, one shown */
.cl-svc-art {
  position: relative;
  aspect-ratio: 16 / 10;
  max-height: 38vh;
  margin-bottom: 24px;
  border-radius: 24px;
  background: #C0E9E3;
  box-shadow: 0 0 0 1px var(--cl-line);
  overflow: hidden;
}

.cl-svc-art__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.45s var(--cl-ease-out), transform 0.8s var(--cl-ease-out);
}

.cl-svc-art__img.is-on {
  opacity: 1;
  transform: none;
}

/* ---- list */
.cl-svc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--cl-line-strong);
}

.cl-svc {
  display: grid;
  grid-template-columns: 84px minmax(0, 4fr) minmax(0, 5fr) auto;
  align-items: center;
  gap: 8px 24px;
  padding: 18px 8px 18px 0;
  border-bottom: 1px solid var(--cl-line);
  color: var(--color-heading);
  transition: border-color 0.25s var(--cl-ease-out), background-color 0.25s var(--cl-ease-out);
}

.cl-svc__thumb {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--cl-line);
}

.cl-svc__thumb img {
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s var(--cl-ease-out);
}

.cl-svc__name {
  font-size: clamp(21px, 1.9vw, 30px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  transition: color 0.25s var(--cl-ease-out);
}

body.cl-brand .cl-svc__desc {
  font-size: 15px !important;
  line-height: 23px !important;
  color: var(--color-text);
}

.cl-svc__go {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--cl-line-strong);
  border-radius: 12px;
  background: #FFFFFF;
  font-size: 16px;
  color: var(--color-heading);
  transition:
    background-color 0.25s var(--cl-ease-out),
    border-color 0.25s var(--cl-ease-out),
    scale 0.16s var(--cl-ease-out);
}

.cl-svc__go i {
  display: block;
  transition: transform 0.3s var(--cl-ease-out);
}

/* The row whose illustration is showing in the panel. */
.cl-svc.is-current {
  border-bottom-color: var(--color-heading);
}

.cl-svc.is-current .cl-svc__name {
  color: var(--color-link);
}

.cl-svc.is-current .cl-svc__go {
  border-color: var(--btn-primary-bg);
  background: var(--btn-primary-bg);
}

.cl-svc.is-current .cl-svc__thumb img {
  transform: scale(1.08);
}

@media (hover: hover) and (pointer: fine) {
  .cl-svc:hover {
    color: var(--color-heading);
  }

  .cl-svc:hover .cl-svc__go i {
    transform: translate(2px, -2px);
  }
}

.cl-svc:active .cl-svc__go {
  scale: 0.94;
}

body.cl-brand .cl-services .creatorlayer-services-banner {
  max-width: 1400px;
  margin: clamp(48px, 6vw, 88px) auto 0;
  padding: 32px 36px;
  border: 0;
  background: var(--color-heading);
}

body.cl-brand .cl-services .creatorlayer-services-banner .left-content p {
  color: #FFFFFF;
}

body.cl-brand .cl-services .creatorlayer-services-banner .left-content .text-body-1 {
  color: var(--cl-on-navy);
}

body.cl-brand .cl-services .creatorlayer-services-banner .tf-btn {
  --btn-bg-hover: #FFFFFF;
  --btn-fg-hover: var(--color-heading);
  --btn-bd-hover: #FFFFFF;
  --btn-well-hover: rgba(30, 44, 82, 0.08);
}

@media (max-width: 991px) {
  .cl-services__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cl-services__intro {
    position: static;
  }

  /* No hover on touch: the row thumbnails carry the illustrations instead. */
  .cl-svc-art {
    display: none;
  }

  .cl-svc.is-current {
    border-bottom-color: var(--cl-line);
  }

  .cl-svc.is-current .cl-svc__name {
    color: var(--color-heading);
  }

  .cl-svc.is-current .cl-svc__go {
    border-color: var(--cl-line-strong);
    background: #FFFFFF;
  }

  .cl-svc.is-current .cl-svc__thumb img {
    transform: none;
  }
}

@media (max-width: 575px) {
  .cl-svc {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 4px 16px;
    padding: 16px 0;
  }

  .cl-svc__thumb {
    grid-row: 1 / span 2;
    align-self: start;
  }

  .cl-svc__name {
    grid-column: 2;
    align-self: end;
  }

  .cl-svc__desc {
    grid-column: 2;
    grid-row: 2;
  }

  .cl-svc__go {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  body.cl-brand .cl-services .creatorlayer-services-banner {
    padding: 28px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-svc-art__img,
  .cl-svc__thumb img,
  .cl-svc__go i {
    transition: none;
  }
}

/* ----------------------------------------------------------- navy surfaces */
/* Text that sits on navy: eyebrows go light, the highlighted phrase goes teal
   (teal-700 is too dark to read on navy). */
body.cl-brand .heading-section.style-white .sub-title,
body.cl-brand .footer .sub-title {
  color: var(--cl-on-navy);
}

body.cl-brand .heading-section.style-white .sub-title span,
body.cl-brand .section-working-proccess .color-primary,
body.cl-brand .footer .sub-title span {
  color: var(--btn-primary-bg);
}

/* ------------------------------------------------------------------- band */
/* The four capabilities on one navy bar: a line of intent on the left, each
   discipline with its own drawn icon on the right, the brand mark ghosted
   behind. Icons draw themselves in when the bar scrolls into view. */
.cl-band {
  padding-bottom: 8px;
}

.cl-band__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  align-items: center;
  gap: 28px clamp(32px, 4vw, 72px);
  padding: 30px clamp(24px, 3vw, 44px);
  border-radius: 28px;
  background: var(--color-heading);
  overflow: hidden;
  isolation: isolate;
}

.cl-band__mark {
  position: absolute;
  z-index: -1;
  left: -70px;
  top: 50%;
  width: 300px;
  height: auto !important;
  opacity: 0.06;
  transform: translateY(-50%) rotate(-8deg);
  pointer-events: none;
}

body.cl-brand .cl-band__line {
  max-width: 15em;
  font-family: var(--cl-font-head);
  font-size: clamp(22px, 2vw, 30px) !important;
  line-height: 1.18 !important;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-wrap: balance;
}

.cl-band__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-band__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0 6px clamp(16px, 1.8vw, 28px);
  border-left: 1px solid var(--cl-line-on-navy);
}

.cl-band__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(31, 182, 174, 0.14);
  color: var(--btn-primary-bg);
  transition: background-color 0.3s var(--cl-ease-out), color 0.3s var(--cl-ease-out), transform 0.3s var(--cl-ease-out);
}

.cl-band__icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cl-band__icon svg * {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.cl-band__name {
  font-size: 16px;
  line-height: 21px;
  font-weight: 500;
  color: #FFFFFF;
  text-wrap: balance;
}

@media (hover: hover) and (pointer: fine) {
  .cl-band__item:hover .cl-band__icon {
    background: var(--btn-primary-bg);
    color: var(--color-heading);
    transform: translateY(-2px);
  }
}

@media (max-width: 1199px) {
  .cl-band__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .cl-band__item:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 767px) {
  .cl-band__inner {
    padding: 28px 22px;
    border-radius: 22px;
  }

  .cl-band__mark {
    left: auto;
    right: -80px;
    top: 0;
    width: 220px;
    transform: rotate(-8deg);
  }

  .cl-band__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
  }

  .cl-band__item {
    padding-left: 0;
    border-left: 0;
  }

  .cl-band__icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  .cl-band__name {
    font-size: 15px;
    line-height: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-band__icon {
    transition: none;
  }
}

/* ------------------------------------------------------------------ about */
body.cl-brand .heading-section.style-home-ba .sub-title,
body.cl-brand .heading-section.style-home-sm .sub-title {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

body.cl-brand .section-about .image img,
body.cl-brand .section-why .image img {
  border-radius: var(--cl-radius-lg);
}

body.cl-brand .box-content-about-h-ba {
  border-radius: var(--cl-radius-lg);
}

body.cl-brand .box-content-about-h-ba .box-right .item i {
  color: var(--btn-primary-bg);
}

body.cl-brand .box-content-about-h-ba .box-right .item span {
  color: var(--cl-on-navy);
}

/* --------------------------------------------------------------- services */
body.cl-brand .creatorlayer-services-section::before {
  display: none;
}

body.cl-brand .creatorlayer-services-count,
body.cl-brand .heading-section .sub-title .creatorlayer-services-count,
body.cl-brand .heading-section.style-home-sm .sub-title span.creatorlayer-services-count {
  padding: 4px 10px;
  border-radius: 8px;
  background-color: var(--cl-teal-50);
  color: var(--color-link);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body.cl-brand .creatorlayer-service-card {
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-radius-lg);
  background: #FFFFFF;
  box-shadow: none;
  transition:
    border-color 0.25s var(--cl-ease-out),
    box-shadow 0.25s var(--cl-ease-out),
    transform 0.25s var(--cl-ease-out);
}

body.cl-brand .creatorlayer-service-card:hover {
  box-shadow: none;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  body.cl-brand .creatorlayer-service-card:hover {
    border-color: var(--cl-line-strong);
    box-shadow: var(--cl-shadow);
    transform: translateY(-4px);
  }
}

body.cl-brand .creatorlayer-service-card::before {
  border-color: var(--cl-line);
  border-radius: 8px;
  font-family: var(--cl-font-body);
  font-weight: 600;
  color: var(--color-text);
}

body.cl-brand .creatorlayer-service-card .top-item i {
  color: var(--color-link);
}

body.cl-brand .creatorlayer-service-card .content-item {
  border-radius: var(--cl-radius);
  background: var(--color-bg-alt);
}

body.cl-brand .creatorlayer-service-card .name-services:hover {
  color: var(--color-link);
}

body.cl-brand .creatorlayer-services-banner {
  border-radius: var(--cl-radius-lg);
  background: var(--color-bg-alt);
  box-shadow: none;
}

/* ---------------------------------------------------------------- why us */
/* Three reasons, each with its own illustration on the brand's pale teal. The
   headline's key word is ringed by a hand-drawn stroke that draws itself in
   once (cl-motion.js); without the script the ring is simply there. */
.cl-why {
  padding: clamp(80px, 9vw, 144px) 0;
}

.cl-why__head {
  max-width: 1040px;
  margin: 0 auto clamp(48px, 6vw, 88px);
  text-align: center;
}

body.cl-brand .cl-why__kicker {
  margin-bottom: 18px;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
}

body.cl-brand .cl-why__title {
  font-size: clamp(32px, 4.6vw, 68px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--color-heading);
  text-wrap: balance;
}

.cl-why__ring {
  position: relative;
  display: inline-block;
  font-style: italic;
  white-space: nowrap;
}

.cl-why__ring svg {
  position: absolute;
  left: -9%;
  top: -6%;
  width: 118%;
  height: 118%;
  overflow: visible;
  pointer-events: none;
}

.cl-why__ring path {
  fill: none;
  stroke: var(--btn-primary-bg);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.cl-why__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px clamp(32px, 4.5vw, 80px);
  max-width: 1320px;
  margin-inline: auto;
}

.cl-why__item {
  text-align: center;
}

.cl-why__art {
  margin-bottom: 28px;
  border-radius: 20px;
  background: #CDEFEC;
  overflow: hidden;
}

.cl-why__art img {
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.6s var(--cl-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .cl-why__item:hover .cl-why__art img {
    transform: scale(1.04);
  }
}

body.cl-brand .cl-why__name {
  max-width: 16ch;
  margin: 0 auto 14px;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  text-wrap: balance;
}

body.cl-brand .cl-why__text {
  max-width: 24em;
  margin-inline: auto;
  font-size: 17px !important;
  line-height: 28px !important;
  color: var(--color-text);
}

@media (max-width: 991px) {
  .cl-why__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-why__art img {
    transition: none;
  }
}

/* ---------------------------------------------------------------- process */
/* Research -> design -> results as three illustrated steps on navy, joined by
   one rail. Each card takes its background from its own illustration
   (--card, set inline) so the artwork has no visible edge. */
.cl-process {
  padding: clamp(80px, 9vw, 152px) 0;
  background: var(--color-heading);
  color: #FFFFFF;
}

.cl-process__head {
  max-width: 1040px;
  margin: 0 auto clamp(44px, 5vw, 80px);
  text-align: center;
}

.cl-process .cl-eyebrow {
  margin-bottom: 18px;
}

body.cl-brand .cl-process__title {
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  text-wrap: balance;
}

.cl-process__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 28px);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.cl-process__step {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cl-line-on-navy);
  border-radius: 28px;
  background: var(--card, #233154);
  overflow: hidden;
  transition: border-color 0.35s var(--cl-ease-out);
}

.cl-process__art {
  overflow: hidden;
}

.cl-process__art img {
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.7s var(--cl-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .cl-process__step:hover {
    border-color: rgba(31, 182, 174, 0.6);
  }

  .cl-process__step:hover .cl-process__art img {
    transform: scale(1.05);
  }
}

.cl-process__text {
  position: relative;
  flex: 1;
  padding: clamp(22px, 2.2vw, 34px) clamp(22px, 2.4vw, 36px) clamp(26px, 2.6vw, 40px);
  border-top: 1px solid var(--cl-line-on-navy);
}

/* The step number sits on the divider between art and text. */
.cl-process__num {
  position: absolute;
  top: 0;
  left: clamp(22px, 2.4vw, 36px);
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--btn-primary-bg);
  font-family: var(--cl-font-head);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-heading);
  transform: translateY(-50%);
}

body.cl-brand .cl-process__name {
  margin: 12px 0 10px;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

body.cl-brand .cl-process__desc {
  max-width: 30em;
  font-size: clamp(15px, 1.15vw, 17px) !important;
  line-height: 1.6 !important;
  color: var(--cl-on-navy);
}

.cl-process__foot {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: end;
  gap: 28px clamp(32px, 6vw, 120px);
  max-width: 1400px;
  margin: clamp(48px, 6vw, 96px) auto 0;
  padding-top: clamp(32px, 3.4vw, 52px);
  border-top: 1px solid var(--cl-line-on-navy);
}

body.cl-brand .cl-process__belief {
  max-width: 24em;
  font-family: var(--cl-font-head);
  font-size: clamp(22px, 2.4vw, 36px) !important;
  line-height: 1.22 !important;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-wrap: balance;
}

body.cl-brand .cl-process__years {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 18px;
  font-size: clamp(16px, 1.3vw, 19px) !important;
  line-height: 1.3 !important;
  color: var(--cl-on-navy);
}

.cl-process__years strong {
  font-family: var(--cl-font-head);
  font-size: clamp(80px, 10vw, 168px);
  line-height: 0.82;
  font-weight: 600;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
}

.cl-process__years strong span {
  color: inherit;
}

.cl-process__years > span {
  max-width: 6em;
  padding-bottom: 6px;
}

@media (max-width: 991px) {
  .cl-process__steps {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
  }

  .cl-process__foot {
    grid-template-columns: minmax(0, 1fr);
  }

  body.cl-brand .cl-process__years {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-process__step,
  .cl-process__art img {
    transition: none;
  }
}

/* ----------------------------------------------------------------- voices */
/* Four client quotes around one navy proof column. On desktop the proof card
   runs the full height between the two rows of quotes, so the grid has no
   hole; every quote card is the same height with its author pinned to the
   bottom. Tablets put the proof card across the top; phones stack. */
.cl-voices {
  padding: clamp(80px, 9vw, 144px) 0 clamp(40px, 5vw, 72px);
}

.cl-voices__head {
  max-width: 900px;
  margin: 0 auto clamp(40px, 5vw, 72px);
  text-align: center;
}

.cl-voices .cl-eyebrow {
  margin-bottom: 16px;
}

body.cl-brand .cl-voices__title {
  font-size: clamp(30px, 4vw, 60px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-heading);
  text-wrap: balance;
}

.cl-voices__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr) minmax(0, 1fr);
  grid-template-areas:
    "a proof b"
    "c proof d";
  gap: clamp(16px, 1.6vw, 24px);
  max-width: 1320px;
  margin-inline: auto;
}

.cl-voice--a { grid-area: a; }
.cl-voice--b { grid-area: b; }
.cl-voice--c { grid-area: c; }
.cl-voice--d { grid-area: d; }

.cl-voice {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(24px, 2.4vw, 36px);
  border: 1px solid var(--cl-line);
  border-radius: 24px;
  background: #FFFFFF;
  transition: border-color 0.3s var(--cl-ease-out), box-shadow 0.3s var(--cl-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .cl-voice:hover {
    border-color: var(--cl-line-strong);
    box-shadow: var(--cl-shadow);
  }
}

.cl-voice__stars,
.cl-voices__stars {
  display: flex;
  gap: 3px;
}

.cl-voice__stars {
  margin-bottom: 18px;
}

.cl-voice__stars svg,
.cl-voices__stars svg {
  width: 18px;
  height: 18px;
  fill: var(--btn-primary-bg);
}

body.cl-brand .cl-voice__quote {
  flex: 1;
  margin: 0 0 28px;
  font-family: var(--cl-font-body);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.6;
  font-weight: 400;
  color: var(--color-heading);
  text-wrap: pretty;
}

.cl-voice__by {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--cl-line);
}

.cl-voice__by img {
  flex: none;
  width: 48px;
  height: 48px !important;
  border-radius: 50%;
  object-fit: cover;
}

.cl-voice__who {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cl-voice__who strong {
  font-family: var(--cl-font-head);
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  color: var(--color-heading);
}

.cl-voice__who span {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
}

/* ---- proof column */
.cl-voices__proof {
  grid-area: proof;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 3vw, 48px);
  padding: clamp(32px, 3.4vw, 56px) clamp(24px, 2.6vw, 40px);
  border-radius: 24px;
  background: var(--color-heading);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.cl-voices__mark {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -18%;
  width: 120%;
  max-width: none;
  height: auto !important;
  opacity: 0.06;
  transform: translateX(-50%) rotate(-8deg);
  pointer-events: none;
}

.cl-voices__stat + .cl-voices__stat {
  padding-top: clamp(28px, 3vw, 48px);
  border-top: 1px solid var(--cl-line-on-navy);
}

body.cl-brand .cl-voices__num {
  font-family: var(--cl-font-head);
  font-size: clamp(44px, 5vw, 84px) !important;
  line-height: 1 !important;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}

body.cl-brand .cl-voices__label {
  margin-top: 10px;
  font-size: clamp(16px, 1.3vw, 19px) !important;
  line-height: 1.4 !important;
  font-weight: 500;
  color: var(--cl-on-navy);
}

.cl-voices__stars {
  justify-content: center;
}

.cl-voices__stars svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 1099px) {
  .cl-voices__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "proof proof"
      "a b"
      "c d";
  }

  .cl-voices__proof {
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px 40px;
    text-align: left;
  }

  .cl-voices__stat + .cl-voices__stat {
    padding-top: 0;
    padding-left: 40px;
    border-top: 0;
    border-left: 1px solid var(--cl-line-on-navy);
  }

  .cl-voices__mark {
    left: auto;
    right: -6%;
    bottom: -60%;
    width: 46%;
    transform: rotate(-8deg);
  }
}

@media (max-width: 699px) {
  .cl-voices__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "proof" "a" "b" "c" "d";
  }

  .cl-voices__proof {
    justify-content: flex-start;
    gap: 16px 28px;
  }

  .cl-voices__stat + .cl-voices__stat {
    padding-left: 28px;
  }

  .cl-voices__stars {
    flex-basis: 100%;
    justify-content: flex-start;
  }

  .cl-voice {
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-voice {
    transition: none;
  }
}

/* ------------------------------------------------------------ rated panel */
/* A single teal-700 panel for the agency's strongest proof: a seal overlaps
   its top edge, the claim sits centred beneath with two actions, and the four
   numbers behind the claim close the panel as one ruled row. The brand mark is
   ghosted into the lower corner. White text on teal-700 is 5.1:1; the brighter
   teal would fail. */
.cl-rated {
  padding: clamp(104px, 11vw, 184px) 0 clamp(72px, 8vw, 128px);
}

.cl-rated__panel {
  position: relative;
  max-width: 1480px;
  margin-inline: auto;
  padding: clamp(116px, 11vw, 184px) clamp(22px, 6vw, 120px) 0;
  border-radius: clamp(24px, 2.6vw, 40px);
  background: var(--color-link);
  text-align: center;
  isolation: isolate;
}

/* The mark lives in its own clipped layer so the seal above can still
   overflow the panel's top edge. */
.cl-rated__bg {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.cl-rated__mark {
  position: absolute;
  right: -7%;
  bottom: -16%;
  width: min(46%, 560px);
  height: auto !important;
  opacity: 0.07;
  transform: rotate(-10deg);
}

.cl-rated__seal {
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(140px, 14vw, 212px);
  aspect-ratio: 1;
  translate: -50% -46%;
  border-radius: 50%;
  box-shadow:
    0 0 0 clamp(6px, 0.7vw, 10px) var(--color-link),
    0 2px 4px rgba(30, 44, 82, 0.12),
    0 26px 38px -14px rgba(30, 44, 82, 0.55);
}

.cl-rated__seal svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cl-rated__seal-disc {
  fill: #FFFFFF;
}

.cl-rated__seal-line {
  fill: none;
  stroke: var(--color-heading);
  stroke-width: 1.5;
}

.cl-rated__seal-ring text {
  font-family: var(--cl-font-head);
  font-size: 11.5px;
  font-weight: 600;
  fill: var(--color-heading);
}

.cl-rated__seal-num {
  font-family: var(--cl-font-head);
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -1px;
  fill: var(--color-heading);
}

.cl-rated__seal-stars {
  fill: var(--btn-primary-bg);
}

.cl-rated__seal-stars g {
  scale: 0.72;
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .cl-rated__seal-ring {
    animation: cl-orbit 40s linear infinite;
  }
}

body.cl-brand .cl-rated__title {
  max-width: 21ch;
  margin: 0 auto clamp(20px, 2.2vw, 32px);
  font-size: clamp(30px, 4.5vw, 72px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  text-wrap: balance;
}

.cl-rated__title span {
  color: #BDF3EE;
}

body.cl-brand .cl-rated__text {
  max-width: 44em;
  margin: 0 auto clamp(32px, 3.4vw, 52px);
  font-size: clamp(16px, 1.3vw, 19px) !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.92);
  text-wrap: pretty;
}

.cl-rated__actions {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

body.cl-brand .cl-rated__cta {
  --btn-bg: #FFFFFF;
  --btn-fg: var(--color-heading);
  --btn-bd: #FFFFFF;
  --btn-well: var(--color-bg-alt);
  --btn-bg-hover: var(--color-heading);
  --btn-fg-hover: #FFFFFF;
  --btn-bd-hover: var(--color-heading);
  --btn-well-hover: rgba(255, 255, 255, 0.16);
}

body.cl-brand .cl-rated__alt {
  --btn-bg: transparent;
  --btn-fg: #FFFFFF;
  --btn-bd: rgba(255, 255, 255, 0.55);
  --btn-well: rgba(255, 255, 255, 0.14);
  --btn-bg-hover: #FFFFFF;
  --btn-fg-hover: var(--color-heading);
  --btn-bd-hover: #FFFFFF;
  --btn-well-hover: var(--color-bg-alt);
}

body.cl-brand .cl-rated__cta,
body.cl-brand .cl-rated__alt {
  min-height: 58px;
}

/* Hand-drawn pointer: starts clear of the paragraph and curls in toward the
   buttons from the right. */
.cl-rated__arrow {
  position: absolute;
  left: calc(100% + 16px);
  top: -6px;
  width: 78px;
  height: auto;
  pointer-events: none;
}

.cl-rated__arrow path {
  stroke: #FFFFFF;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

body.cl-brand .cl-rated__note {
  margin-top: 22px;
  font-size: 15px !important;
  line-height: 22px !important;
  color: rgba(255, 255, 255, 0.88);
}

/* The numbers behind the claim. */
.cl-rated__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(48px, 5.5vw, 88px) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  text-align: left;
}

.cl-rated__stats > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  padding: clamp(24px, 2.6vw, 40px) clamp(12px, 2vw, 32px) clamp(28px, 3vw, 48px);
}

.cl-rated__stats > div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.24);
}

.cl-rated__stats > div:first-child {
  padding-left: 0;
}

.cl-rated__stats dt {
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.4;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.cl-rated__stats dd {
  margin: 0;
  font-family: var(--cl-font-head);
  font-size: clamp(36px, 4.4vw, 68px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
}

@media (max-width: 1099px) {
  .cl-rated__arrow {
    display: none;
  }
}

@media (max-width: 767px) {
  .cl-rated__actions {
    display: flex;
  }

  body.cl-brand .cl-rated__cta,
  body.cl-brand .cl-rated__alt {
    flex: 1 1 100%;
    max-width: none;
    justify-content: space-between;
  }

  .cl-rated__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cl-rated__stats > div {
    padding: 22px 12px 24px 0;
  }

  .cl-rated__stats > div:nth-child(even) {
    padding-left: 18px;
  }

  .cl-rated__stats > div:nth-child(3) {
    border-left: 0;
  }

  .cl-rated__stats > div:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.24);
  }

  .cl-rated__mark {
    width: 70%;
  }
}

/* ------------------------------------------------------ websites showcase */
/* One client website per slide, in brand colours only: a flat navy panel with
   the line about the build, the real screenshot set square beneath it, and a
   white fact card. Screenshot and card share one bottom edge so the slide
   reads as a single composition. */
.cl-sites {
  padding: clamp(80px, 9vw, 144px) 0;
  overflow: hidden;
}

.cl-sites__inner {
  max-width: 1240px;
  margin-inline: auto;
}

.cl-sites__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: end;
  gap: 16px 64px;
  margin-bottom: 40px;
}

body.cl-brand .cl-sites__title {
  max-width: 14ch;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-heading);
}

body.cl-brand .cl-sites__intro {
  padding-bottom: 6px;
  font-size: 18px !important;
  line-height: 28px !important;
  color: var(--color-text);
}

.cl-sites__stage {
  position: relative;
}

/* Side and bottom room so the shadows are not cut by the slider's clip. */
.cl-sites__swiper {
  overflow: hidden;
  margin: 0 -24px;
  padding: 0 24px 40px;
}

.cl-site {
  --pad: 64px;
  position: relative;
  height: auto;
  min-height: 664px;
}

.cl-site__panel {
  height: 456px;
  padding: 60px var(--pad);
  border-radius: 28px;
  background: var(--color-heading);
}

body.cl-brand .cl-site__label {
  margin-bottom: 14px;
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cl-on-navy);
}

.cl-site__label span {
  color: var(--btn-primary-bg);
}

body.cl-brand .cl-site__line {
  max-width: 21ch;
  font-size: clamp(28px, 3.1vw, 44px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  text-wrap: balance;
}

/* Screenshot: square to the grid, in a plain browser frame. */
.cl-site__shot {
  position: absolute;
  left: var(--pad);
  bottom: 0;
  display: block;
  width: 51%;
}

.cl-site__frame {
  display: block;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow:
    0 0 0 1px rgba(10, 16, 34, 0.08),
    0 2px 4px rgba(10, 16, 34, 0.08),
    0 32px 48px -24px rgba(10, 16, 34, 0.45);
  overflow: hidden;
  transition: transform 0.45s var(--cl-ease-out), box-shadow 0.45s var(--cl-ease-out);
}

.cl-site__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 16px;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--cl-line);
}

/* Three window dots drawn from one element. */
.cl-site__bar::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C5CDD8;
  box-shadow: 14px 0 0 #C5CDD8, 28px 0 0 #C5CDD8;
  margin-right: 28px;
}

.cl-site__bar b {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--color-text);
}

.cl-site__shot img {
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 0;
}

@media (hover: hover) and (pointer: fine) {
  .cl-site__shot:hover .cl-site__frame {
    transform: translateY(-6px);
    box-shadow:
      0 0 0 1px rgba(10, 16, 34, 0.08),
      0 2px 4px rgba(10, 16, 34, 0.08),
      0 44px 56px -24px rgba(10, 16, 34, 0.5);
  }
}

.cl-site__card {
  position: absolute;
  right: var(--pad);
  bottom: 0;
  width: 34%;
  max-width: 400px;
  padding: 32px;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow:
    0 0 0 1px rgba(10, 16, 34, 0.06),
    0 2px 4px rgba(10, 16, 34, 0.06),
    0 32px 48px -24px rgba(10, 16, 34, 0.4);
}

body.cl-brand .cl-site__name {
  font-family: var(--cl-font-head);
  font-size: clamp(24px, 2.2vw, 30px) !important;
  line-height: 1.12 !important;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  overflow-wrap: anywhere;
}

.cl-site__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
  padding: 18px 0;
  border-block: 1px solid var(--cl-line);
}

.cl-site__facts dt {
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text);
}

.cl-site__facts dd {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--color-heading);
}

body.cl-brand .cl-site__desc {
  margin-bottom: 24px;
  font-size: 15px !important;
  line-height: 24px !important;
  color: var(--color-text);
}

body.cl-brand .cl-site__cta {
  --btn-bg: var(--btn-primary-bg);
  --btn-fg: var(--color-heading);
  --btn-bd: var(--btn-primary-bg);
  --btn-well: rgba(30, 44, 82, 0.12);
  width: 100%;
  max-width: none;
  justify-content: space-between;
}

/* ---- controls */
.cl-sites__nav {
  position: absolute;
  z-index: 3;
  top: 60px;
  right: 64px;
  display: flex;
  align-items: center;
  gap: 8px;
}

body.cl-brand .cl-sites__count {
  margin-right: 12px;
  font-size: 14px !important;
  line-height: 20px !important;
  font-variant-numeric: tabular-nums;
  color: var(--cl-on-navy);
}

.cl-sites__count b {
  font-weight: 600;
  color: #FFFFFF;
}

.cl-sites__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: transparent;
  font-size: 16px;
  color: #FFFFFF;
  cursor: pointer;
  transition:
    background-color 0.2s var(--cl-ease-out),
    border-color 0.2s var(--cl-ease-out),
    color 0.2s var(--cl-ease-out),
    transform 0.16s var(--cl-ease-out);
}

.cl-sites__btn i {
  display: block;
  transform: rotate(45deg);
}

.cl-sites__prev i {
  transform: rotate(-135deg);
}

.cl-sites__next {
  border-color: #FFFFFF;
  background: #FFFFFF;
  color: var(--color-heading);
}

@media (hover: hover) and (pointer: fine) {
  .cl-sites__btn:hover {
    border-color: var(--btn-primary-bg);
    background: var(--btn-primary-bg);
    color: var(--color-heading);
  }
}

.cl-sites__btn:active {
  transform: scale(0.94);
}

/* ---- index: every site by name on one ruled line, with the portfolio link */
.cl-sites__tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 40px;
  border-top: 1px solid var(--cl-line);
}

.cl-sites__tab {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-height: 44px;
  padding: 20px 0 16px;
  border: 0;
  background: none;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: color 0.2s var(--cl-ease-out);
}

.cl-sites__tab-num {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.cl-sites__tab-bar {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
}

.cl-sites__tab-bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--btn-primary-bg);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.cl-sites__tab[aria-current="true"] {
  color: var(--color-heading);
}

.cl-sites__tab[aria-current="true"] .cl-sites__tab-bar i {
  transform: scaleX(1);
}

.cl-sites.is-autoplay .cl-sites__tab[aria-current="true"] .cl-sites__tab-bar i {
  animation: cl-fill var(--cl-sites-delay, 6s) linear both;
}

.cl-sites.is-paused .cl-sites__tab[aria-current="true"] .cl-sites__tab-bar i {
  animation-play-state: paused;
}

@keyframes cl-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

body.cl-brand .cl-sites__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 20px 0 16px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--color-heading);
}

.cl-sites__all i {
  font-size: 14px;
  transition: transform 0.25s var(--cl-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .cl-sites__tab:hover {
    color: var(--color-heading);
  }

  body.cl-brand .cl-sites__all:hover {
    color: var(--color-link);
  }

  .cl-sites__all:hover i {
    transform: translate(2px, -2px);
  }
}

@media (max-width: 1199px) {
  .cl-site {
    --pad: 36px;
    min-height: 620px;
  }

  .cl-site__panel {
    height: 430px;
    padding-top: 48px;
  }

  .cl-site__card {
    width: 38%;
    padding: 26px;
  }

  .cl-site__shot {
    width: 50%;
  }

  .cl-sites__nav {
    top: 44px;
    right: 36px;
  }

  body.cl-brand .cl-site__line {
    max-width: 17ch;
  }
}

@media (max-width: 991px) {
  .cl-sites__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .cl-site {
    min-height: 0;
  }

  .cl-site__panel {
    height: auto;
    padding: 96px 24px 150px;
    border-radius: 20px;
  }

  body.cl-brand .cl-site__line {
    max-width: 20ch;
  }

  .cl-sites__nav {
    top: 28px;
    left: 24px;
    right: 24px;
  }

  body.cl-brand .cl-sites__count {
    margin-right: auto;
  }

  .cl-site__shot,
  .cl-site__card {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    max-width: none;
  }

  .cl-site__shot {
    margin: -122px 16px 0;
  }

  .cl-site__card {
    margin: 20px 0 0;
    padding: 24px;
    box-shadow: 0 0 0 1px var(--cl-line);
  }

  .cl-sites__tabs {
    gap: 0 28px;
  }

  body.cl-brand .cl-sites__all {
    width: 100%;
    margin-left: 0;
    padding-top: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-site__frame,
  .cl-sites__all i {
    transition: none;
  }
}

/* ---------------------------------------------------------- growth sprint */
body.cl-brand .section-growth-sprint {
  margin-top: 0;
  padding-top: clamp(72px, 8vw, 128px);
}

body.cl-brand .growth-sprint-inner {
  border-radius: 28px;
  background: var(--color-bg-alt);
  box-shadow: none;
}

body.cl-brand .growth-pill {
  border-radius: var(--cl-radius);
  transition: border-color 0.22s var(--cl-ease-out), box-shadow 0.22s var(--cl-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  body.cl-brand .growth-pill:hover {
    border-color: var(--cl-line-strong);
    box-shadow: var(--cl-shadow);
  }
}

/* Eyebrows on navy bands: light label, bright-teal emphasis. */
body.cl-brand .cl-on-navy .cl-eyebrow {
  color: var(--cl-on-navy);
}

body.cl-brand .cl-on-navy .cl-eyebrow span {
  color: var(--btn-primary-bg);
}

/* ---------------------------------------------------------------- cadence */
/* Discover -> Build -> Scale as a scroll-driven stepper on a full-width navy
   band. By default (no script, reduced motion, tablets and phones) all three
   steps are open and the three visuals sit in a row. On desktop the script
   adds .is-stepper: the band pins, one step opens at a time as the page
   scrolls, and the matching visual slides in beside it. */
.cl-cadence {
  padding: clamp(72px, 9vw, 144px) 0;
  background: var(--color-heading);
  color: #FFFFFF;
  overflow: hidden;
}

.cl-cadence__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 6vw, 72px);
  max-width: 1240px;
  margin-inline: auto;
}

/* ---- visuals: default = three in a row */
.cl-cadence__visuals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2.5vw, 28px);
}

.cl-cadence__visual {
  position: relative;
  aspect-ratio: 1 / 0.92;
}

.cl-cadence__tile {
  position: absolute;
  height: auto !important;
  filter: drop-shadow(0 22px 28px rgba(8, 14, 34, 0.45));
}

.cl-cadence__tile--back {
  top: 0;
  right: 0;
  width: 62%;
  opacity: 0.55;
}

.cl-cadence__tile--main {
  z-index: 1;
  left: 0;
  bottom: 0;
  width: 78%;
}

/* ---- copy */
.cl-cadence .cl-eyebrow {
  margin-bottom: 16px;
}

body.cl-brand .cl-cadence__title {
  max-width: 16ch;
  margin-bottom: 18px;
  font-size: clamp(30px, 3.8vw, 58px);
  line-height: 1.06;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  text-wrap: balance;
}

body.cl-brand .cl-cadence__desc {
  max-width: 32em;
  margin-bottom: clamp(28px, 3vw, 44px);
  font-size: clamp(16px, 1.25vw, 18px) !important;
  line-height: 1.65 !important;
  color: var(--cl-on-navy);
}

.cl-cadence__steps {
  position: relative;
  display: grid;
  gap: 6px;
  margin: 0 0 clamp(28px, 3vw, 44px);
  padding: 0;
  list-style: none;
}

/* The rail the step markers sit on, and its teal fill (--p set by script). */
.cl-cadence__steps::before,
.cl-cadence__steps::after {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 17px;
  width: 2px;
  border-radius: 2px;
}

.cl-cadence__steps::before {
  background: var(--cl-line-on-navy);
}

.cl-cadence__steps::after {
  background: var(--btn-primary-bg);
  transform: scaleY(var(--p, 1));
  transform-origin: 50% 0;
}

.cl-cadence__step {
  position: relative;
  z-index: 1;
}

.cl-cadence__head {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 44px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: default;
}

.cl-cadence__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--btn-primary-bg);
  font-family: var(--cl-font-head);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-heading);
  transition:
    background-color 0.35s var(--cl-ease-out),
    color 0.35s var(--cl-ease-out),
    scale 0.35s var(--cl-ease-out);
}

.cl-cadence__name {
  font-family: var(--cl-font-head);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  transition: color 0.35s var(--cl-ease-out);
}

/* Body opens by growing a grid row from 0fr to 1fr, so no height is hard-coded. */
.cl-cadence__body {
  display: grid;
  grid-template-rows: 1fr;
  padding-left: 54px;
  transition: grid-template-rows 0.5s var(--cl-ease-out), opacity 0.35s var(--cl-ease-out);
}

.cl-cadence__body > p {
  overflow: hidden;
  max-width: 30em;
  margin: 0;
  padding-bottom: 14px;
  font-size: clamp(16px, 1.25vw, 18px) !important;
  line-height: 1.6 !important;
  color: var(--cl-on-navy);
}

body.cl-brand .cl-cadence__cta {
  margin-left: 54px;
}

/* ---- stepper mode (desktop, set by cl-motion.js) */
.cl-cadence.is-stepper {
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding-block: 96px 48px;
}

.cl-cadence.is-stepper > .container {
  width: 100%;
}

.cl-cadence.is-stepper .cl-cadence__grid {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(40px, 6vw, 104px);
}

.cl-cadence.is-stepper .cl-cadence__visuals {
  position: relative;
  display: block;
  aspect-ratio: 1 / 0.92;
}

.cl-cadence.is-stepper .cl-cadence__visual {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  opacity: 0;
  transform: translateX(-12%) scale(0.94);
  transition: opacity 0.5s var(--cl-ease-out), transform 0.8s var(--cl-ease-out);
}

.cl-cadence.is-stepper .cl-cadence__visual.is-active {
  opacity: 1;
  transform: none;
}

/* A visual that has been passed leaves to the right. */
.cl-cadence.is-stepper .cl-cadence__visual.is-past {
  transform: translateX(12%) scale(0.94);
}

.cl-cadence.is-stepper .cl-cadence__head {
  cursor: pointer;
}

.cl-cadence.is-stepper .cl-cadence__step:not(.is-active) .cl-cadence__num {
  background: var(--color-heading);
  color: transparent;
  box-shadow: inset 0 0 0 2px var(--cl-line-on-navy);
  scale: 0.5;
}

.cl-cadence.is-stepper .cl-cadence__step.is-done .cl-cadence__num {
  background: var(--btn-primary-bg);
  box-shadow: none;
}

.cl-cadence.is-stepper .cl-cadence__step:not(.is-active) .cl-cadence__name {
  color: var(--cl-on-navy);
}

.cl-cadence.is-stepper .cl-cadence__step:not(.is-active) .cl-cadence__body {
  grid-template-rows: 0fr;
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .cl-cadence.is-stepper .cl-cadence__head:hover .cl-cadence__name {
    color: #FFFFFF;
  }
}

@media (max-width: 575px) {
  .cl-cadence__tile--back {
    display: none;
  }

  .cl-cadence__tile--main {
    width: 100%;
  }

  .cl-cadence__visual {
    aspect-ratio: 520 / 455;
  }

  .cl-cadence__body {
    padding-left: 54px;
  }

  body.cl-brand .cl-cadence__cta {
    margin-left: 0;
    width: 100%;
    max-width: none;
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-cadence__num,
  .cl-cadence__name,
  .cl-cadence__body {
    transition: none;
  }
}

/* ------------------------------------------------------------------ video */
body.cl-brand .wg-video .btn-play .icon {
  background: var(--btn-primary-bg);
}

body.cl-brand .wg-video .btn-play .icon i {
  color: var(--color-heading);
}

/* ------------------------------------------------------------------ motto */
body.cl-brand .cl-home-motto {
  padding: 96px 20px;
  background: var(--color-bg);
}

body.cl-brand .cl-home-motto__eyebrow {
  font-family: var(--cl-font-body) !important;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-link);
}

body.cl-brand .cl-home-motto__title {
  color: var(--color-heading);
  line-height: 1.16;
}

body.cl-brand .cl-home-motto__desc {
  color: var(--color-text);
}

/* ---------------------------------------------------------------- marquee */
body.cl-brand .section-infiniteSlide .infiniteSlide-1 {
  background-color: var(--color-heading);
}

body.cl-brand .section-infiniteSlide .infiniteSlide-1 .marquee-item {
  color: #FFFFFF;
}

body.cl-brand .section-infiniteSlide .infiniteSlide-1 .marquee-item i {
  color: var(--btn-primary-bg);
}

body.cl-brand .section-infiniteSlide .infiniteSlide-2 .marquee-item,
body.cl-brand .section-infiniteSlide .infiniteSlide-2 .marquee-item i {
  color: var(--color-heading);
}

/* ---------------------------------------------------------------- process */
body.cl-brand .section-working-proccess .working-item .text,
body.cl-brand .section-working-proccess .bottom-section .left p {
  color: var(--cl-on-navy);
}

body.cl-brand .section-working-proccess .working-item .number {
  color: var(--btn-primary-bg);
}

/* ----------------------------------------------------------- testimonials */
/* The stat disc was a full lime fill; navy keeps teal to accents. */
body.cl-brand .section-testimonials .box-quote-2 {
  border-color: transparent;
  background-color: var(--color-heading);
}

body.cl-brand .section-testimonials .box-quote-2 .line {
  background: var(--cl-line-on-navy);
}

body.cl-brand .section-testimonials .box-quote-2 p {
  color: var(--cl-on-navy);
}

body.cl-brand .section-testimonials .box-quote-2 .fs-55 {
  font-family: var(--cl-font-head);
  color: #FFFFFF;
}

body.cl-brand .section-testimonials .icon-star {
  color: var(--btn-primary-bg);
}

/* --------------------------------------------------------------- projects */
body.cl-brand .cl-home-work__play {
  background: rgba(30, 44, 82, 0.3);
}

body.cl-brand .cl-home-work__category-card:hover .cl-home-work__play {
  background: rgba(30, 44, 82, 0.45);
}

/* -------------------------------------------------------------------- AEO */
body.cl-brand .creatorlayer-aeo-section {
  background: var(--color-bg-alt);
}

body.cl-brand .creatorlayer-aeo-section th {
  background: var(--color-heading);
  color: #FFFFFF;
}

body.cl-brand .creatorlayer-aeo-section tbody th {
  background: var(--color-bg-alt);
  color: var(--color-heading);
}

body.cl-brand .creatorlayer-aeo-section li::before {
  background: var(--btn-primary-bg);
}

body.cl-brand .creatorlayer-aeo-section summary::after {
  background: var(--color-heading);
}

body.cl-brand .creatorlayer-aeo-section a:not(.tf-btn) {
  color: var(--color-link);
}

/* ----------------------------------------------------------------- footer */
body.cl-brand .footer .img-sharp {
  display: none;
}

body.cl-brand .footer .big-text {
  font-family: var(--cl-font-head);
  font-weight: 600;
  letter-spacing: -0.025em;
}

body.cl-brand .footer .logo-footer img,
body.cl-brand .offcanvas .canvas-header img,
body.cl-brand .pop-up-menu-mobile img[src*="brand/"] {
  width: auto;
  height: 44px !important;
}

body.cl-brand .footer .send-btn,
body.cl-brand .pop-up-menu-mobile .send-btn {
  color: var(--btn-primary-bg);
}

body.cl-brand .footer label {
  color: var(--cl-on-navy);
}

body.cl-brand .footer input,
body.cl-brand .footer input::placeholder {
  color: var(--cl-on-navy);
}

body.cl-brand .footer a:hover {
  color: var(--btn-primary-bg);
}

body.cl-brand .top-footer .link-btn:hover .icon-btn,
body.cl-brand .top-footer .link-btn:hover .text-btn {
  color: var(--color-heading);
}

/* Word masks for headline reveals (cl-motion.js wraps the words). */
.cl-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.cl-w__i {
  display: inline-block;
  will-change: transform;
}

/* ------------------------------------------------------------ site footer */
/* The page's closing statement: one enormous line and a round call button,
   the working links beneath on hairlines, and the official wordmark set huge
   along the bottom edge, rising into view as the footer scrolls in. */
.cl-footer {
  position: relative;
  padding-top: clamp(64px, 7vw, 112px);
  background: var(--color-heading);
  color: #FFFFFF;
  overflow: hidden;
  isolation: isolate;
}

.cl-footer a {
  color: inherit;
}

/* ---- call to action */
.cl-footer__cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px clamp(24px, 4vw, 72px);
  padding-bottom: clamp(48px, 6vw, 104px);
}

body.cl-brand .cl-footer__headline {
  font-size: clamp(44px, 6.4vw, 104px) !important;
  line-height: 1 !important;
  font-weight: 500;
  letter-spacing: -0.045em;
  color: #FFFFFF;
}

.cl-footer__headline em {
  font-style: italic;
  color: var(--btn-primary-bg);
}

/* The mask must not clip descenders or the italic's overhang. */
.cl-footer__headline .cl-w {
  padding: 0.06em 0.06em 0.14em 0;
  margin: -0.06em -0.06em -0.14em 0;
}

.cl-footer__call {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  width: clamp(132px, 13vw, 208px);
  aspect-ratio: 1;
  margin-bottom: clamp(6px, 1vw, 20px);
  border-radius: 50%;
  background: var(--btn-primary-bg);
  font-family: var(--cl-font-head);
  font-size: clamp(17px, 1.5vw, 24px);
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  color: var(--color-heading) !important;
  will-change: transform;
  /* Only the colour may transition in CSS. The template gives every link
     "transition: all", and GSAP (which moves this button) records the wrong
     resting state if transform or opacity are mid-transition on a refresh. */
  transition: background-color 0.3s var(--cl-ease-out);
}

.cl-footer__call i {
  font-size: clamp(24px, 2.2vw, 34px);
  transition: transform 0.4s var(--cl-ease-out);
}

.cl-footer__call::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
  opacity: 0;
  scale: 1;
  transition: opacity 0.4s var(--cl-ease-out), scale 0.5s var(--cl-ease-out);
}

.cl-footer__call {
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
  .cl-footer__call:hover {
    background: #FFFFFF;
  }

  .cl-footer__call:hover i {
    transform: translate(4px, -4px);
  }

  .cl-footer__call:hover::after {
    opacity: 1;
    scale: 1.14;
  }
}

/* ---- link grid */
.cl-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 40px clamp(24px, 4vw, 80px);
  padding: clamp(40px, 4.4vw, 72px) 0;
  border-top: 1px solid var(--cl-line-on-navy);
}

.cl-footer__logo img {
  display: block;
  width: auto;
  height: 48px !important;
}

body.cl-brand .cl-footer__place {
  margin: 24px 0 16px;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: var(--cl-on-navy);
}

.cl-footer__contact,
.cl-footer__col ul,
.cl-footer__links,
.cl-footer__social {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-footer__contact {
  display: grid;
  gap: 6px;
}

.cl-footer__contact a {
  font-family: var(--cl-font-head);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.4;
  font-weight: 500;
  color: #FFFFFF;
}

.cl-footer__social {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

body.cl-brand .cl-footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--cl-line-on-navy);
  border-radius: 12px;
  background: none;
  font-size: 16px;
  color: #FFFFFF;
  transition: background-color 0.25s var(--cl-ease-out), border-color 0.25s var(--cl-ease-out), color 0.25s var(--cl-ease-out);
}

body.cl-brand .cl-footer__title {
  margin-bottom: 20px;
  font-family: var(--cl-font-body) !important;
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--btn-primary-bg);
}

.cl-footer__col ul {
  display: grid;
  gap: 12px;
}

/* Links carry an underline that draws in from the left. */
.cl-footer__col a,
.cl-footer__links a,
.cl-footer__contact a {
  display: inline-block;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.4s var(--cl-ease-out), color 0.25s var(--cl-ease-out);
}

.cl-footer__col a {
  font-size: 17px;
  line-height: 1.5;
  color: var(--cl-on-navy);
}

@media (hover: hover) and (pointer: fine) {
  .cl-footer__col a:hover,
  .cl-footer__links a:hover,
  .cl-footer__contact a:hover {
    background-size: 100% 1px;
    color: #FFFFFF;
  }

  body.cl-brand .cl-footer__social a:hover {
    border-color: var(--btn-primary-bg);
    background: var(--btn-primary-bg);
    color: var(--color-heading);
  }
}

/* ---- newsletter */
body.cl-brand .cl-footer__news-text {
  margin-bottom: 20px;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: var(--cl-on-navy);
}

.cl-footer__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body.cl-brand .cl-footer__field {
  position: relative;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

body.cl-brand .cl-footer__field input {
  width: 100%;
  height: 58px;
  padding: 0 64px 0 20px;
  border: 1px solid var(--cl-line-on-navy);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--cl-font-body);
  font-size: 16px;
  color: #FFFFFF;
  transition: border-color 0.25s var(--cl-ease-out), background-color 0.25s var(--cl-ease-out);
}

body.cl-brand .cl-footer__field input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

body.cl-brand .cl-footer__field input:focus {
  outline: none;
  border-color: var(--btn-primary-bg);
  background: rgba(255, 255, 255, 0.1);
}

body.cl-brand .cl-footer__field .send-btn {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: var(--btn-primary-bg);
  font-size: 18px;
  color: var(--color-heading);
  cursor: pointer;
  transform: none;
  transition: background-color 0.25s var(--cl-ease-out), scale 0.16s var(--cl-ease-out);
}

body.cl-brand .cl-footer__field .send-btn i {
  display: block;
  font-size: 18px;
  color: var(--color-heading);
}

body.cl-brand .cl-footer__field .send-btn:hover {
  background: #FFFFFF;
}

body.cl-brand .cl-footer__field .send-btn:active {
  scale: 0.94;
}

body.cl-brand .cl-footer__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

body.cl-brand .cl-footer__consent .input-check-box {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--btn-primary-bg);
}

body.cl-brand .cl-footer__consent label {
  font-size: 14px;
  line-height: 1.5;
  color: var(--cl-on-navy);
}

body.cl-brand .cl-footer__consent label a {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cl-footer .creatorlayer-honey {
  position: absolute !important;
  left: -9999px !important;
}

/* ---- bottom bar */
.cl-footer__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
  padding: 28px 0;
  border-top: 1px solid var(--cl-line-on-navy);
}

.cl-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}

.cl-footer__links a {
  font-size: 15px;
  line-height: 1.5;
  color: var(--cl-on-navy);
}

body.cl-brand .cl-footer__copy {
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--cl-on-navy);
}

.cl-footer__copy strong {
  font-weight: 600;
  color: #FFFFFF;
}

/* ---- the wordmark, set huge and cut by the bottom edge */
/* The wordmark closes the footer at the page's content width, shown whole. */
.cl-footer__wordmark {
  padding-bottom: clamp(28px, 3.4vw, 56px);
  line-height: 0;
  pointer-events: none;
}

.cl-footer__wordmark img {
  display: block;
  width: 100%;
  height: auto !important;
  opacity: 0.08;
}

@media (max-width: 1099px) {
  .cl-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .cl-footer__cta {
    grid-template-columns: minmax(0, 1fr);
  }

  .cl-footer__call {
    width: 136px;
  }

  .cl-footer__grid {
    gap: 36px 20px;
  }

  .cl-footer__brand,
  .cl-footer__news {
    grid-column: 1 / -1;
  }

  .cl-footer__bottom {
    padding-bottom: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-footer__call i,
  .cl-footer__call::after,
  .cl-footer__col a,
  .cl-footer__links a,
  .cl-footer__contact a {
    transition: none;
  }
}

/* ------------------------------------------------------------- scroll-top */
body.cl-brand .progress-wrap {
  background: #FFFFFF;
  box-shadow: inset 0 0 0 2px var(--cl-line);
}

body.cl-brand .progress-wrap::after {
  color: var(--color-heading);
}

body.cl-brand .progress-wrap svg.progress-circle path {
  stroke: var(--btn-primary-bg);
}

@media (max-width: 767px) {
  /* Clear the sticky quote bar. */
  body.cl-brand.cl-has-mobile-cta .progress-wrap {
    bottom: 92px;
  }
}

/* ------------------------------------------------------------ mobile menu */
body.cl-brand .mb-menu-link,
body.cl-brand .sub-nav-link {
  font-family: var(--cl-font-body);
  color: var(--color-heading);
}

body.cl-brand .mb-menu-link.active,
body.cl-brand .sub-nav-link:hover {
  color: var(--color-link);
}

body.cl-brand .offcanvas .tf-btn {
  margin-top: 20px;
}

/* ---------------------------------------------------------- mobile chrome */
body.cl-brand .cl-mobile-cta {
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid var(--cl-line);
  box-shadow: 0 -8px 24px rgba(30, 44, 82, 0.08);
}

body.cl-brand .cl-mobile-cta .tf-btn {
  max-width: none;
  --btn-bg: var(--btn-primary-bg);
  --btn-fg: var(--color-heading);
  --btn-bd: var(--btn-primary-bg);
}

@media (prefers-reduced-motion: reduce) {
  .cl-svc,
  .cl-svc__go i {
    transition-property: color, background-color, border-color;
  }

  body.cl-brand .tf-btn,
  body.cl-brand .tf-btn .icon-btn i,
  body.cl-brand .creatorlayer-service-card {
    transition-property: background-color, border-color, color;
  }

  body.cl-brand .tf-btn:active,
  body.cl-brand .creatorlayer-service-card:hover {
    transform: none;
  }
}


/* ---------------------------------------------------------------- journal */
/* One lead article and a numbered list beside it. The list always fills the
   column, so the layout holds for any number of posts the CRM returns. */
.cl-journal__head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(24px, 5vw, 96px);
  align-items: end;
  margin-bottom: clamp(36px, 4.5vw, 64px);
}

.cl-journal .cl-eyebrow {
  margin-bottom: 16px;
}

body.cl-brand .cl-journal__title {
  max-width: 16ch;
  font-size: clamp(30px, 4vw, 56px) !important;
  line-height: 1.08 !important;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-heading);
  text-wrap: balance;
}

.cl-journal__icon {
  display: block;
  width: clamp(88px, 8vw, 120px);
  height: auto;
  margin-bottom: 24px;
  border-radius: 24px;
  box-shadow: 0 18px 40px -22px rgba(30, 44, 82, 0.45);
}

.cl-journal__desc {
  margin-bottom: 24px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text);
}

.cl-journal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

/* shared meta line: category, date, reading time */
.cl-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text);
}

.cl-post__meta b {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--color-link);
}

.cl-post__meta span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 10px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  vertical-align: middle;
}

/* In the narrower list rows the category takes its own line, so the date and
   reading time never wrap apart. */
.cl-post .cl-post__meta b {
  flex-basis: 100%;
}

.cl-post .cl-post__meta b + span::before {
  content: none;
}

/* lead article */
body.cl-brand .cl-lead {
  display: flex;
  flex-direction: column;
  color: inherit;
}

.cl-lead__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  margin-bottom: 24px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--cl-surface, #F5F7F9);
}

.cl-lead__media img,
.cl-post__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--cl-ease-out);
}

.cl-lead__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #FFFFFF;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-heading);
}

.cl-lead__title {
  margin-top: 12px;
  font-family: var(--cl-font-display, inherit);
  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  text-wrap: balance;
  transition: color 0.3s var(--cl-ease-out);
}

.cl-lead__excerpt {
  margin-top: 12px;
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text);
}

.cl-lead__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--cl-line);
  font-size: 15px;
  line-height: 24px;
  color: var(--color-text);
}

.cl-lead__by b {
  font-weight: 600;
  color: var(--color-heading);
}

.cl-lead__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-heading);
}

.cl-lead__more i {
  font-size: 12px;
  transition: transform 0.3s var(--cl-ease-out);
}

/* numbered list */
.cl-journal__list {
  border-top: 1px solid var(--color-heading);
}

body.cl-brand .cl-post {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) clamp(96px, 9vw, 136px);
  gap: clamp(14px, 1.6vw, 24px);
  align-items: center;
  padding: clamp(20px, 2vw, 28px) 0;
  border-bottom: 1px solid var(--cl-line);
  color: inherit;
}

.cl-post__num {
  align-self: center;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-link);
}

.cl-post__body {
  display: block;
}

.cl-post__title {
  display: block;
  margin-top: 8px;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-heading);
  transition: color 0.3s var(--cl-ease-out);
}

.cl-post__thumb {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--cl-surface, #F5F7F9);
}

@media (hover: hover) {
  .cl-lead:hover .cl-lead__title,
  .cl-post:hover .cl-post__title {
    color: var(--color-link);
  }

  .cl-lead:hover .cl-lead__media img,
  .cl-post:hover .cl-post__thumb img {
    transform: scale(1.04);
  }

  .cl-lead:hover .cl-lead__more i {
    transform: translate(3px, -3px);
  }
}

body.cl-brand .cl-lead:focus-visible,
body.cl-brand .cl-post:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 6px;
  border-radius: 12px;
}

/* Side by side, the list shares the lead article's height between its rows. */
@media (min-width: 992px) {
  .cl-journal__grid {
    align-items: stretch;
  }

  .cl-journal__list {
    display: flex;
    flex-direction: column;
  }

  body.cl-brand .cl-post {
    flex: 1 1 auto;
    grid-template-columns: auto minmax(0, 1fr) clamp(128px, 12vw, 184px);
  }

  body.cl-brand .cl-post:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 991px) {
  .cl-journal__head,
  .cl-journal__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cl-journal__head {
    align-items: start;
  }

  .cl-journal__desc {
    max-width: 52ch;
  }
}

@media (max-width: 575px) {
  .cl-lead__media {
    border-radius: 18px;
  }

  body.cl-brand .cl-post {
    grid-template-columns: minmax(0, 1fr) 88px;
  }

  .cl-post__num {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-lead__media img,
  .cl-post__thumb img,
  .cl-lead__more i {
    transition: none;
  }
}


/* ----------------------------------------------------------- short answer */
/* The TL;DR as a bento: one illustrated tile carrying the question, seven
   fact cards answering it. */
.cl-answer {
  padding: clamp(72px, 8vw, 128px) 0;
  background: var(--cl-surface, #F5F7F9);
}

.cl-answer__head {
  max-width: 880px;
  margin: 0 auto clamp(40px, 5vw, 72px);
  text-align: center;
}

.cl-answer .cl-eyebrow,
.cl-faq .cl-eyebrow {
  margin-bottom: 16px;
}

body.cl-brand .cl-answer__title,
body.cl-brand .cl-faq__title {
  font-size: clamp(30px, 4vw, 56px) !important;
  line-height: 1.08 !important;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-heading);
  text-wrap: balance;
}

.cl-answer__intro {
  max-width: 720px;
  margin: 24px auto 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text);
}

.cl-answer__intro strong {
  font-weight: 600;
  color: var(--color-heading);
}

.cl-answer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 20px);
}

.cl-answer__facts {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-answer__lead {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  overflow: hidden;
  background: #C2EBE5;
}

.cl-answer__lead {
  justify-content: space-between;
}

.cl-answer__art {
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.cl-answer__lead-text {
  padding: 0 clamp(24px, 2.4vw, 36px) clamp(24px, 2.4vw, 36px);
}

.cl-answer__label {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--color-heading);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #FFFFFF;
}

body.cl-brand .cl-answer__q {
  font-size: clamp(22px, 1.9vw, 28px) !important;
  line-height: 1.2 !important;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  text-wrap: balance;
}

.cl-fact {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.2vw, 32px);
  border: 1px solid var(--cl-line);
  border-radius: 24px;
  background: #FFFFFF;
  transition: border-color 0.3s var(--cl-ease-out), box-shadow 0.3s var(--cl-ease-out);
}

.cl-fact__n {
  margin-bottom: clamp(20px, 2.6vw, 40px);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-link);
}

.cl-fact__term {
  margin-bottom: 8px;
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.cl-fact__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
}

@media (hover: hover) {
  .cl-fact:hover {
    border-color: var(--color-heading);
    box-shadow: 0 24px 48px -32px rgba(30, 44, 82, 0.35);
  }
}

@media (max-width: 991px) {
  .cl-answer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cl-answer__lead {
    grid-row: auto;
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
  }

  .cl-answer__lead > .cl-live {
    flex: 0 0 44%;
  }

  .cl-answer__lead-text {
    padding: 24px 24px 24px 8px;
  }

  .cl-fact:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 575px) {
  .cl-answer__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cl-answer__lead {
    flex-direction: column;
    align-items: stretch;
  }

  .cl-answer__lead > .cl-live {
    flex: 0 0 auto;
  }

  .cl-answer__lead-text {
    padding: 0 22px 24px;
  }

  .cl-fact__n {
    margin-bottom: 16px;
  }
}

/* -------------------------------------------------------------------- faq */
.cl-faq {
  padding: clamp(72px, 8vw, 128px) 0;
}

.cl-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}

body.cl-brand .cl-faq__title {
  max-width: 14ch;
  font-size: clamp(30px, 3.4vw, 48px) !important;
}

/* the thinking scene: every piece is its own element so it can move */
.cl-think {
  max-width: 400px;
  margin: clamp(24px, 2.6vw, 36px) 0;
  border-radius: 28px;
  overflow: hidden;
  background: #C2EBE5;
}

.cl-think__scene {
  position: relative;
  aspect-ratio: 1 / 1;
}

.cl-think__person {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: auto;
  height: 76%;
  margin-left: -21%;
  max-width: none;
  will-change: transform;
}

.cl-think__i {
  position: absolute;
  display: block;
  line-height: 0;
  will-change: transform;
}

.cl-think__i svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.cl-think__i--bubble svg {
  filter: drop-shadow(0 10px 14px rgba(30, 44, 82, 0.14));
}

.cl-faq__help p {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
}

body.cl-brand .cl-faq__help p a {
  font-weight: 600;
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* accordion */
.cl-faq__list {
  border-top: 1px solid var(--color-heading);
}

.cl-faq__item {
  border-bottom: 1px solid var(--cl-line);
  interpolate-size: allow-keywords;
}

.cl-faq__item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.4s var(--cl-ease-out), content-visibility 0.4s allow-discrete;
}

.cl-faq__item[open]::details-content {
  block-size: auto;
}

.cl-faq__list.is-collapsed .cl-faq__item.is-extra {
  display: none;
}

.cl-faq__item summary,
.cl-faq__more {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  width: 100%;
  padding: clamp(18px, 1.8vw, 26px) 0;
  list-style: none;
  cursor: pointer;
  text-align: left;
}

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

.cl-faq__q {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-heading);
  transition: color 0.3s var(--cl-ease-out);
}

.cl-faq__icon {
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px solid var(--cl-line);
  border-radius: 12px;
  background: #FFFFFF;
  transition: background-color 0.3s var(--cl-ease-out), border-color 0.3s var(--cl-ease-out);
}

.cl-faq__icon::before,
.cl-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  border-radius: 1px;
  background: var(--color-heading);
  transition: transform 0.4s var(--cl-ease-out);
}

.cl-faq__icon::after {
  transform: rotate(90deg);
}

.cl-faq__item[open] .cl-faq__icon,
.cl-faq__more[aria-expanded="true"] .cl-faq__icon {
  border-color: #1FB6AE;
  background: #1FB6AE;
}

.cl-faq__item[open] .cl-faq__icon::after,
.cl-faq__more[aria-expanded="true"] .cl-faq__icon::after {
  transform: rotate(0deg);
}

.cl-faq__a {
  max-width: 64ch;
  padding: 0 60px clamp(20px, 2vw, 28px) 0;
}

.cl-faq__a p {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text);
}

.cl-faq__a strong {
  font-weight: 600;
  color: var(--color-heading);
}

body.cl-brand .cl-faq__a a {
  font-weight: 600;
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cl-faq__more {
  border: 0;
  background: none;
  font: inherit;
}

.cl-faq__more-label {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--color-link);
}

@media (hover: hover) {
  .cl-faq__item summary:hover .cl-faq__q {
    color: var(--color-link);
  }

  .cl-faq__item:not([open]) summary:hover .cl-faq__icon,
  .cl-faq__more:hover .cl-faq__icon {
    border-color: var(--color-heading);
  }
}

.cl-faq__item summary:focus-visible,
.cl-faq__more:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 4px;
  border-radius: 8px;
}

@media (min-width: 992px) and (min-height: 900px) {
  .cl-faq__aside {
    position: sticky;
    top: 112px;
  }
}

@media (max-width: 991px) {
  .cl-faq__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.cl-brand .cl-faq__title {
    max-width: none;
  }

  .cl-think {
    max-width: 420px;
  }
}

@media (max-width: 575px) {
  .cl-faq__a {
    padding-right: 0;
  }

  .cl-faq__icon {
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-faq__item::details-content,
  .cl-faq__icon::before,
  .cl-faq__icon::after {
    transition: none;
  }
}


/* ----------------------------------------------------- living illustrations */
/* Flat illustrations get moving accents layered on top (cl-motion.js): the
   picture breathes and leans to the pointer, rings pulse on its key points. */
.cl-live {
  position: relative;
  overflow: hidden;
}

.cl-live__in {
  position: relative;
  will-change: transform;
}

.cl-fx {
  position: absolute;
  display: block;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cl-fx__ring {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--fx, #1E2C52);
  border-radius: 50%;
  opacity: 0;
}

.cl-fx svg {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}


/* -------------------------------------------------------------- work reel */
/* Design and video pieces share one height and keep their own proportions,
   so nothing is cropped or letterboxed. The strip runs off the right edge
   and scrolls sideways. */
.cl-work {
  --h: clamp(280px, 31vw, 460px);
  --gutter: max(15px, calc((100vw - 1320px) / 2 + 15px));
  padding: clamp(72px, 8vw, 128px) 0;
  background: var(--cl-surface, #F5F7F9);
  overflow: hidden;
}

.cl-work__head {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: 20px clamp(24px, 5vw, 96px);
  align-items: end;
}

.cl-work .cl-eyebrow {
  margin-bottom: 16px;
}

body.cl-brand .cl-work__title {
  max-width: 14ch;
  font-size: clamp(30px, 4vw, 56px) !important;
  line-height: 1.08 !important;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-heading);
  text-wrap: balance;
}

.cl-work__desc {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text);
}

.cl-work__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin: clamp(28px, 3.4vw, 48px) 0 clamp(20px, 2.4vw, 32px);
  padding-top: clamp(20px, 2.2vw, 28px);
  border-top: 1px solid var(--color-heading);
}

/* filters: one segmented control */
.cl-work__filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--cl-line);
  border-radius: 14px;
  background: #FFFFFF;
}

.cl-work__filter {
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.3s var(--cl-ease-out), color 0.3s var(--cl-ease-out);
}

.cl-work__filter sup {
  top: -0.5em;
  margin-left: 2px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}

.cl-work__filter[aria-pressed="true"] {
  background: var(--color-heading);
  color: #FFFFFF;
}

.cl-work__arrows {
  display: flex;
  gap: 8px;
}

.cl-work__arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--cl-line);
  border-radius: 14px;
  background: #FFFFFF;
  color: var(--color-heading);
  cursor: pointer;
  transition: background-color 0.3s var(--cl-ease-out), border-color 0.3s var(--cl-ease-out),
    color 0.3s var(--cl-ease-out), opacity 0.3s var(--cl-ease-out);
}

.cl-work__arrow i {
  font-size: 13px;
  transform: rotate(45deg);
}

.cl-work__arrow[data-dir="-1"] i {
  transform: rotate(-135deg);
}

.cl-work__arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

/* the strip */
.cl-work__rail {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px var(--gutter) 8px;
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}

.cl-work__rail::-webkit-scrollbar {
  display: none;
}

.cl-work__rail.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.cl-work__rail.is-dragging .cl-piece__media {
  pointer-events: none;
}

.cl-work__track {
  display: flex;
  gap: clamp(14px, 1.6vw, 24px);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-piece {
  flex: 0 0 auto;
  width: calc(var(--h) * var(--r));
  scroll-snap-align: start;
}

.cl-piece[hidden] {
  display: none;
}

body.cl-brand .cl-piece__media {
  position: relative;
  display: block;
  width: 100%;
  height: var(--h);
  padding: 0;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-heading);
  cursor: pointer;
  box-shadow: 0 24px 48px -32px rgba(30, 44, 82, 0.5);
}

.cl-piece__media img,
.cl-piece__media video {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  transition: transform 0.7s var(--cl-ease-out);
}

.cl-piece__badge,
.cl-piece__time {
  position: absolute;
  top: 14px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cl-piece__badge {
  left: 14px;
  background: #FFFFFF;
  color: var(--color-heading);
}

.cl-piece__time {
  right: 14px;
  background: rgba(30, 44, 82, 0.72);
  color: #FFFFFF;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.cl-piece__play {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--btn-primary-bg, #1FB6AE);
  transition: transform 0.4s var(--cl-ease-out);
}

.cl-piece__play svg {
  width: 20px;
  height: 20px;
  fill: var(--color-heading);
}

.cl-piece__play-off,
.cl-piece__media.is-sound .cl-piece__play-on {
  display: none;
}

.cl-piece__media.is-sound .cl-piece__play-off {
  display: block;
}

.cl-piece__cap {
  padding-top: 16px;
}

.cl-piece__kind {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text);
}

.cl-piece__kind b {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-link);
}

body.cl-brand .cl-piece__name {
  margin-top: 4px;
  font-size: clamp(17px, 1.3vw, 20px) !important;
  line-height: 1.3 !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

@media (hover: hover) and (pointer: fine) {
  .cl-work__filter:not([aria-pressed="true"]):hover {
    background: var(--cl-surface, #F5F7F9);
    color: var(--color-heading);
  }

  .cl-work__arrow:not(:disabled):hover {
    border-color: var(--color-heading);
    background: var(--color-heading);
    color: #FFFFFF;
  }

  .cl-piece__media:hover img {
    transform: scale(1.04);
  }

  .cl-piece__media:hover .cl-piece__play {
    transform: scale(1.08);
  }
}

.cl-work__filter:focus-visible,
.cl-work__arrow:focus-visible,
body.cl-brand .cl-piece__media:focus-visible,
.cl-work__rail:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 3px;
}

.cl-work__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  margin-top: clamp(28px, 3vw, 44px);
}

.cl-work__progress {
  flex: 1 1 240px;
  height: 2px;
  border-radius: 1px;
  background: var(--cl-line);
  overflow: hidden;
}

.cl-work__progress span {
  display: block;
  width: 30%;
  height: 100%;
  border-radius: 1px;
  background: var(--color-heading);
  transform-origin: 0 50%;
}

@media (max-width: 991px) {
  .cl-work__head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  body.cl-brand .cl-work__title {
    max-width: none;
  }

  .cl-work__desc {
    max-width: 52ch;
  }
}

@media (max-width: 575px) {
  .cl-work {
    --h: clamp(260px, 78vw, 340px);
  }

  .cl-work__arrows {
    display: none;
  }

  .cl-work__filters {
    width: 100%;
  }

  .cl-work__filter {
    flex: 1 1 auto;
    padding: 10px 8px;
    font-size: 14px;
  }

  /* a wide piece at full reel height would run past the screen, so it keeps
     its own proportions at screen width and sits centred in the row */
  .cl-piece--wide {
    width: 82vw;
    align-self: center;
  }

  body.cl-brand .cl-piece--wide .cl-piece__media {
    height: auto;
    aspect-ratio: var(--r);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-piece__media img,
  .cl-piece__media video,
  .cl-piece__play {
    transition: none;
  }
}


/* ============================================================ inner pages */
/* --------------------------------------------------------------- page hero */
.cl-page-hero {
  position: relative;
  padding: clamp(132px, 12vw, 196px) 0 clamp(40px, 5vw, 72px);
  background: var(--cl-surface, #F5F7F9);
  overflow: hidden;
}

.cl-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: clamp(16px, 2vw, 28px);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--color-text);
}

body.cl-brand .cl-crumbs a {
  color: var(--color-text);
  transition: color 0.3s var(--cl-ease-out);
}

body.cl-brand .cl-crumbs a:hover {
  color: var(--color-link);
}

.cl-crumbs [aria-current] {
  font-weight: 600;
  color: var(--color-link);
}

.cl-page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}

.cl-page-hero__grid--split {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

body.cl-brand .cl-page-hero__title {
  max-width: 18ch;
  font-size: clamp(38px, 6vw, 84px) !important;
  line-height: 1.02 !important;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--color-heading);
  text-wrap: balance;
}

.cl-page-hero__title em {
  font-style: normal;
  color: var(--color-link);
}

.cl-page-hero__title .cl-w {
  padding: 0.06em 0.04em 0.14em 0;
  margin: -0.06em -0.04em -0.14em 0;
}

.cl-page-hero__lead {
  max-width: 46ch;
  margin: 0;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
  color: var(--color-text);
}

.cl-page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

@media (max-width: 991px) {
  .cl-page-hero__grid--split {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}


/* =========================================================== service pages */
[data-cl-rise] { will-change: transform; }

.cl-sp-hero {
  position: relative;
  padding: clamp(132px, 12vw, 190px) 0 clamp(56px, 6vw, 96px);
  background: var(--cl-surface, #F5F7F9);
  overflow: hidden;
}

.cl-sp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: center;
}

.cl-sp-badge {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--color-heading);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
}

body.cl-brand .cl-sp-hero__title {
  font-size: clamp(36px, 4.8vw, 70px) !important;
  line-height: 1.04 !important;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--color-heading);
  text-wrap: balance;
}

.cl-sp-hero__title .cl-w {
  padding: 0.06em 0.04em 0.14em 0;
  margin: -0.06em -0.04em -0.14em 0;
}

body.cl-brand .cl-sp-hero__desc {
  max-width: 52ch;
  margin: 20px 0 0;
  font-size: clamp(17px, 1.35vw, 20px) !important;
  line-height: 1.6;
  color: var(--color-text);
}

.cl-sp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.cl-sp-chips li {
  padding: 8px 14px;
  border: 1px solid var(--cl-line);
  border-radius: 10px;
  background: #FFFFFF;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--color-heading);
}

.cl-sp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.cl-sp-hero__art {
  position: relative;
}

.cl-sp-hero__art .cl-live {
  border-radius: 28px;
  background: #C2EBE5;
  box-shadow: 0 40px 80px -48px rgba(30, 44, 82, 0.55);
}

.cl-sp-hero__art img {
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.cl-sp-kpi {
  position: absolute;
  left: clamp(-28px, -2vw, -12px);
  bottom: clamp(16px, 2.4vw, 36px);
  z-index: 2;
  max-width: 250px;
  padding: 16px 18px;
  border: 1px solid var(--cl-line);
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: var(--cl-shadow);
}

.cl-sp-kpi span {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-link);
}

.cl-sp-kpi strong {
  display: block;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--color-heading);
}

.cl-sp-hero__num {
  position: absolute;
  top: clamp(96px, 9vw, 140px);
  right: clamp(8px, 3vw, 56px);
  font-size: clamp(120px, 20vw, 320px);
  line-height: 0.8;
  font-weight: 600;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(30, 44, 82, 0.1);
  pointer-events: none;
  user-select: none;
}

/* hero variant B: navy */
.cl-sp-hero--b { background: var(--color-heading); }
.cl-sp-hero--b .cl-sp-hero__title { color: #FFFFFF !important; }
body.cl-brand .cl-sp-hero--b .cl-sp-hero__desc { color: rgba(255, 255, 255, 0.82); }
.cl-sp-hero--b .cl-sp-badge { background: var(--btn-primary-bg, #1FB6AE); color: var(--color-heading); }
.cl-sp-hero--b .cl-crumbs,
body.cl-brand .cl-sp-hero--b .cl-crumbs a { color: rgba(255, 255, 255, 0.7); }
.cl-sp-hero--b .cl-crumbs [aria-current] { color: #7FE0D8; }
.cl-sp-hero--b .cl-sp-chips li { border-color: rgba(255, 255, 255, 0.22); background: transparent; color: #FFFFFF; }
.cl-sp-hero--b .cl-sp-hero__num { -webkit-text-stroke-color: rgba(255, 255, 255, 0.1); }
body.cl-brand .cl-sp-hero--b .tf-btn.style-border { --btn-bg: transparent; --btn-fg: #FFFFFF; --btn-bd: rgba(255, 255, 255, 0.35); --btn-well: rgba(255, 255, 255, 0.12); }

/* hero variant C: centred copy over a wide art band */
.cl-sp-hero--c { background: #FFFFFF; padding-bottom: 0; }
.cl-sp-hero--c .cl-sp-hero__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.cl-sp-hero--c .cl-crumbs,
.cl-sp-hero--c .cl-sp-chips,
.cl-sp-hero--c .cl-sp-hero__actions { justify-content: center; }
.cl-sp-hero--c .cl-sp-hero__title { max-width: 20ch; margin-inline: auto; }
.cl-sp-hero--c .cl-sp-hero__desc { margin-inline: auto; }
.cl-sp-hero--c .cl-sp-hero__art { width: min(100%, 880px); margin-top: clamp(8px, 2vw, 24px); }
.cl-sp-hero--c .cl-sp-hero__art .cl-live { border-radius: 28px 28px 0 0; box-shadow: none; }
.cl-sp-hero--c .cl-sp-hero__art img { aspect-ratio: 16 / 9; }
.cl-sp-hero--c .cl-sp-kpi { left: auto; right: clamp(-28px, -2vw, -12px); text-align: left; }

/* hero variant D: art first */
.cl-sp-hero--d { background: #FFFFFF; }
.cl-sp-hero--d .cl-sp-hero__art { order: -1; }
.cl-sp-hero--d .cl-sp-kpi { left: auto; right: clamp(-28px, -2vw, -12px); }
.cl-sp-hero--d .cl-sp-hero__num { right: auto; left: clamp(8px, 3vw, 56px); }

/* sections */
.cl-sp-sec { padding: clamp(64px, 7.5vw, 120px) 0; }
.cl-sp-sec--tint { background: var(--cl-surface, #F5F7F9); }
.cl-sp-sec--navy { background: var(--color-heading); color: #FFFFFF; }

body.cl-brand .cl-sp-h2 {
  max-width: 18ch;
  margin-bottom: clamp(28px, 3.4vw, 48px);
  font-size: clamp(28px, 3.4vw, 48px) !important;
  line-height: 1.1 !important;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-heading);
  text-wrap: balance;
}

.cl-sp-sec--navy .cl-sp-h2 { color: #FFFFFF !important; }
.cl-sp-sec .cl-eyebrow { margin-bottom: 14px; }
.cl-sp-sec--navy .cl-eyebrow { color: rgba(255, 255, 255, 0.72); }
.cl-sp-sec--navy .cl-eyebrow span { color: #7FE0D8 !important; }

.cl-sp-motive {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}

body.cl-brand .cl-sp-motive__text {
  margin: 0;
  font-size: clamp(22px, 2.3vw, 34px) !important;
  line-height: 1.3 !important;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  text-wrap: pretty;
}

.cl-sp-motive__kpi {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--cl-line);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text);
}

.cl-sp-motive__kpi b { display: block; font-size: 18px; font-weight: 600; color: var(--color-heading); }

.cl-sp-scope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}

.cl-sp-card {
  padding: clamp(24px, 2.6vw, 40px);
  border: 1px solid var(--cl-line);
  border-radius: 24px;
  background: #FFFFFF;
}

body.cl-brand .cl-sp-card h3,
body.cl-brand .cl-sp-step h3 {
  margin-bottom: 12px;
  font-size: clamp(20px, 1.6vw, 24px) !important;
  line-height: 1.25 !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.cl-sp-card p,
.cl-sp-card li { font-size: 17px; line-height: 1.65; color: var(--color-text); }
.cl-sp-card p { margin: 0; }
.cl-sp-card--wide { grid-column: 1 / -1; background: var(--cl-surface, #F5F7F9); }
.cl-sp-card ul { margin: 12px 0 0; padding-left: 20px; }
.cl-sp-card li + li { margin-top: 8px; }
.cl-sp-card strong { font-weight: 600; color: var(--color-heading); }

.cl-sp-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sp;
}

.cl-sp-step {
  counter-increment: sp;
  padding: clamp(22px, 2.2vw, 32px);
  border-top: 2px solid var(--color-heading);
  background: #FFFFFF;
  border-radius: 0 0 20px 20px;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--color-heading);
}

.cl-sp-step::before {
  content: counter(sp, decimal-leading-zero);
  display: block;
  margin-bottom: clamp(20px, 2.6vw, 40px);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-link);
}

.cl-sp-out {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
}

.cl-sp-out ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.2); }

.cl-sp-out li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: clamp(18px, 2vw, 26px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.35;
  font-weight: 500;
}

.cl-sp-out li::before {
  content: "";
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #1FB6AE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2C52' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.cl-sp-rel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}

body.cl-brand .cl-sp-relcard {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--cl-line);
  border-radius: 20px;
  background: #FFFFFF;
  color: var(--color-heading);
  transition: border-color 0.3s var(--cl-ease-out), box-shadow 0.3s var(--cl-ease-out);
}

.cl-sp-relcard img { width: 96px; height: 72px !important; border-radius: 12px; object-fit: cover; }
.cl-sp-relcard b { display: block; font-size: 18px; line-height: 1.25; font-weight: 600; }
.cl-sp-relcard small { display: block; margin-top: 2px; font-size: 13px; color: var(--color-text); }
.cl-sp-relcard i { font-size: 12px; transition: transform 0.3s var(--cl-ease-out); }

@media (hover: hover) {
  body.cl-brand .cl-sp-relcard:hover { border-color: var(--color-heading); box-shadow: 0 24px 48px -32px rgba(30, 44, 82, 0.35); }
  .cl-sp-relcard:hover i { transform: translate(3px, -3px); }
}

.cl-sp-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 48px;
  align-items: center;
  padding: clamp(28px, 4vw, 64px);
  border-radius: 28px;
  background: #C2EBE5;
}

body.cl-brand .cl-sp-cta h2 {
  max-width: 20ch;
  font-size: clamp(26px, 3vw, 44px) !important;
  line-height: 1.1 !important;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-heading);
}

.cl-sp-cta p { margin: 12px 0 0; max-width: 48ch; font-size: 17px; line-height: 1.6; color: var(--color-heading); }
.cl-sp-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* services overview grid */
.cl-sv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}

body.cl-brand .cl-sv-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cl-line);
  border-radius: 24px;
  background: #FFFFFF;
  overflow: hidden;
  color: inherit;
  transition: border-color 0.3s var(--cl-ease-out), box-shadow 0.3s var(--cl-ease-out);
}

.cl-sv-card__art { background: #C2EBE5; overflow: hidden; }
.cl-sv-card__art img { display: block; width: 100%; height: auto !important; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.7s var(--cl-ease-out); }
.cl-sv-card__body { display: flex; flex: 1; flex-direction: column; padding: clamp(20px, 2vw, 28px); }
.cl-sv-card__kind { margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-link); }
.cl-sv-card__name { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: var(--color-heading); }
.cl-sv-card__desc { margin: 10px 0 20px; font-size: 16px; line-height: 1.6; color: var(--color-text); }
.cl-sv-card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-size: 15px; font-weight: 600; color: var(--color-heading); }
.cl-sv-card__more i { font-size: 12px; transition: transform 0.3s var(--cl-ease-out); }
body.cl-brand .cl-sv-card--wide { grid-column: span 2; flex-direction: row; }
body.cl-brand .cl-sv-card--full { grid-column: 1 / -1; }
.cl-sv-card--full .cl-sv-card__art { flex-basis: 34%; }
.cl-sv-card--wide .cl-sv-card__body { justify-content: center; }
.cl-sv-card--wide .cl-sv-card__art { flex: 0 0 48%; }
.cl-sv-card--wide .cl-sv-card__art img { height: 100% !important; aspect-ratio: auto; }

@media (hover: hover) {
  body.cl-brand .cl-sv-card:hover { border-color: var(--color-heading); box-shadow: 0 28px 56px -36px rgba(30, 44, 82, 0.4); }
  .cl-sv-card:hover .cl-sv-card__art img { transform: scale(1.04); }
  .cl-sv-card:hover .cl-sv-card__more i { transform: translate(3px, -3px); }
}

@media (max-width: 991px) {
  .cl-sp-hero__grid,
  .cl-sp-motive,
  .cl-sp-out,
  .cl-sp-cta { grid-template-columns: minmax(0, 1fr); }
  .cl-sp-hero--d .cl-sp-hero__art { order: 0; }
  .cl-sp-kpi,
  .cl-sp-hero--c .cl-sp-kpi,
  .cl-sp-hero--d .cl-sp-kpi { position: static; max-width: none; margin-top: 12px; }
  .cl-sp-hero__num { display: none; }
  .cl-sp-rel { grid-template-columns: minmax(0, 1fr); }
  .cl-sv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.cl-brand .cl-sv-card--full { grid-column: 1 / -1; }
}

@media (max-width: 575px) {
  .cl-sp-scope,
  .cl-sv-grid { grid-template-columns: minmax(0, 1fr); }
  body.cl-brand .cl-sv-card--wide { grid-column: auto; flex-direction: column; }
  .cl-sv-card--wide .cl-sv-card__art img { aspect-ratio: 16 / 9; height: auto !important; }
}

/* ------------------------------------------------- bespoke service graphics */
.cl-mock {
  position: relative;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid var(--cl-line);
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 40px 80px -52px rgba(30, 44, 82, 0.55);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-heading);
}

.cl-mock__label { display: block; margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-link); }
.cl-ln { display: block; height: 8px; border-radius: 4px; background: #E3E7EE; }
.cl-ln + .cl-ln { margin-top: 8px; }
.cl-ln--navy { background: var(--color-heading); height: 10px; }
.cl-ln--teal { background: #1FB6AE; }
.cl-tagx { display: inline-block; padding: 3px 8px; border-radius: 6px; background: var(--color-heading); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.04em; color: #FFFFFF; }
.cl-tagx--teal { background: #1FB6AE; color: var(--color-heading); }
.cl-tagx--soft { background: #E8F7F5; color: var(--color-link); }

/* video timeline */
.cl-vid__screen { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 8; border-radius: 16px; background: var(--color-heading); }
.cl-vid__play { width: 56px; height: 56px; border-radius: 16px; background: #1FB6AE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231E2C52'%3E%3Cpath d='M8 5.5v13l11-6.500z'/%3E%3C/svg%3E") center / 22px no-repeat; }
.cl-vid__cap { position: absolute; left: 14px; bottom: 12px; padding: 4px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.14); font-size: 12px; font-weight: 600; color: #FFFFFF; }
.cl-vid__tracks { position: relative; display: grid; gap: 8px; margin-top: 16px; padding: 4px 0; }
.cl-vid__track { position: relative; height: 30px; border-radius: 8px; background: #F0F3F7; }
.cl-vid__track i { position: absolute; top: 3px; bottom: 3px; left: calc(var(--x) * 1%); width: calc(var(--w) * 1%); display: grid; place-items: center; border-radius: 6px; background: #C2EBE5; font-size: 11px; font-style: normal; font-weight: 600; color: var(--color-heading); }
.cl-vid__track i.t { background: #1FB6AE; }
.cl-vid__track i.n { background: var(--color-heading); color: #FFFFFF; }
.cl-vid__track--b i { background: #D9DEE8; }
.cl-vid__track--c i { background: repeating-linear-gradient(90deg, #AEB8CB 0 2px, transparent 2px 6px); }
.cl-vid__head { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #E5484D; animation: cl-playhead 6s linear infinite; }
.cl-vid__head::before { content: ""; position: absolute; top: -4px; left: -5px; width: 12px; height: 8px; border-radius: 3px; background: #E5484D; }
@keyframes cl-playhead { to { left: 100%; } }

/* design artboard */
.cl-art { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 14px; }
.cl-art__type { display: grid; align-content: space-between; padding: 18px; border-radius: 16px; background: var(--color-heading); color: #FFFFFF; min-height: 220px; }
.cl-art__type b { font-size: clamp(64px, 8vw, 104px); line-height: 0.9; font-weight: 600; letter-spacing: -0.05em; }
.cl-art__type span { font-size: 12px; opacity: 0.7; }
.cl-art__side { display: grid; gap: 14px; }
.cl-art__sw { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cl-art__sw i { aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--cl-line); }
.cl-art__comp { display: grid; gap: 10px; padding: 16px; border: 1px dashed #AEB8CB; border-radius: 16px; }
.cl-art__btn { justify-self: start; padding: 8px 16px; border-radius: 10px; background: #1FB6AE; font-size: 13px; font-weight: 600; }

/* web scores */
.cl-web__bar { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.cl-web__bar i { width: 9px; height: 9px; border-radius: 50%; background: #D9DEE8; }
.cl-web__bar span { flex: 1; height: 26px; margin-left: 8px; border-radius: 8px; background: #F0F3F7; }
.cl-web__scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; }
.cl-web__ring { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.cl-web__ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.cl-web__ring circle { fill: none; stroke-width: 8; }
.cl-web__ring circle:first-child { stroke: #EEF1F5; }
.cl-web__ring circle:last-child { stroke: #1FB6AE; stroke-linecap: round; stroke-dasharray: 264; stroke-dashoffset: 26; }
.cl-web__ring b { position: relative; font-size: clamp(18px, 2vw, 26px); font-weight: 600; }
.cl-web__scores small { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--color-text); }

/* search rows (SEO, Google Ads, AEO, AIO) */
.cl-serp__q { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 14px; border-radius: 12px; background: #F0F3F7; font-weight: 500; color: var(--color-text); }
.cl-serp__q::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--color-heading); border-radius: 50%; }
.cl-serp__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; }
.cl-serp__row + .cl-serp__row { margin-top: 6px; }
.cl-serp__row > b { font-size: 13px; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.cl-serp__row.is-you { background: #E8F7F5; outline: 1.5px solid #1FB6AE; }
.cl-serp__row.is-you > b { color: var(--color-link); }
.cl-serp--climb .cl-serp__row.is-you { animation: cl-climb 5s var(--cl-ease-out) infinite; }
@keyframes cl-climb { 0%, 18% { transform: translateY(204%); } 45%, 100% { transform: none; } }
.cl-serp--climb .cl-serp__row:not(.is-you) { animation: cl-drop 5s var(--cl-ease-out) infinite; }
@keyframes cl-drop { 0%, 18% { transform: translateY(-68%); } 45%, 100% { transform: none; } }

/* calendar */
.cl-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cl-cal > div { min-height: 96px; padding: 8px 6px; border-radius: 10px; background: #F5F7F9; }
.cl-cal small { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 600; color: var(--color-text); }
.cl-cal i { display: block; margin-top: 4px; padding: 3px 4px; border-radius: 5px; background: #C2EBE5; font-size: 10px; line-height: 14px; font-style: normal; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-cal i.n { background: var(--color-heading); color: #FFFFFF; }
.cl-cal i.t { background: #1FB6AE; }

/* ad variants */
.cl-ab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cl-ab__card { position: relative; padding: 14px; border: 1px solid var(--cl-line); border-radius: 16px; }
.cl-ab__card.is-win { border-color: #1FB6AE; background: #F2FBFA; }
.cl-ab__img { aspect-ratio: 4 / 3; margin: 10px 0 12px; border-radius: 10px; background: #D9DEE8; }
.cl-ab__card.is-win .cl-ab__img { background: var(--color-heading); }
.cl-ab__m { display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: center; font-size: 11px; font-weight: 600; color: var(--color-text); }
.cl-ab__m + .cl-ab__m { margin-top: 6px; }
.cl-ab__m span { height: 8px; border-radius: 4px; background: #EEF1F5; overflow: hidden; }
.cl-ab__m span::after { content: ""; display: block; height: 100%; width: calc(var(--v) * 1%); border-radius: 4px; background: #AEB8CB; }
.cl-ab__card.is-win .cl-ab__m span::after { background: #1FB6AE; }

/* keyword rows */
.cl-kw { display: grid; grid-template-columns: minmax(0, 1fr) auto 90px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--cl-line); font-weight: 500; }
.cl-kw span:last-child { height: 8px; border-radius: 4px; background: #EEF1F5; overflow: hidden; }
.cl-kw span:last-child::after { content: ""; display: block; height: 100%; width: calc(var(--v) * 1%); background: #1FB6AE; border-radius: 4px; }
.cl-adrow { padding: 14px; margin-bottom: 14px; border-radius: 14px; outline: 1.5px solid #1FB6AE; background: #F2FBFA; }
.cl-adrow .cl-ln { margin-top: 10px; }

/* chat (GEO) */
.cl-chat { display: grid; gap: 12px; }
.cl-chat__q { justify-self: end; max-width: 80%; padding: 12px 16px; border-radius: 16px 16px 4px 16px; background: var(--color-heading); font-weight: 500; color: #FFFFFF; }
.cl-chat__a { max-width: 92%; padding: 16px; border-radius: 16px 16px 16px 4px; background: #F5F7F9; }
.cl-chat__a p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--color-heading); }
.cl-chat__src { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-chat__src span { padding: 6px 10px; border: 1px solid var(--cl-line); border-radius: 8px; background: #FFFFFF; font-size: 12px; font-weight: 600; color: var(--color-text); }
.cl-chat__src span.is-you { border-color: #1FB6AE; background: #E8F7F5; color: var(--color-link); animation: cl-cite 3.2s ease-in-out infinite; }
@keyframes cl-cite { 50% { box-shadow: 0 0 0 5px rgba(31, 182, 174, 0.18); } }
.cl-chat sup { font-weight: 600; color: var(--color-link); }

/* snippet + questions (AEO) */
.cl-snip { padding: 16px; margin-bottom: 12px; border-left: 4px solid #1FB6AE; border-radius: 4px 14px 14px 4px; background: #F2FBFA; }
.cl-snip p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; }
.cl-paa { display: flex; justify-content: space-between; gap: 12px; padding: 12px 2px; border-top: 1px solid var(--cl-line); font-weight: 500; }
.cl-paa::after { content: ""; flex: 0 0 8px; height: 8px; margin-top: 4px; border-right: 2px solid var(--color-heading); border-bottom: 2px solid var(--color-heading); transform: rotate(45deg); }

/* AI overview */
.cl-aio { padding: 18px; margin-bottom: 12px; border-radius: 16px; background: var(--color-heading); color: #FFFFFF; }
.cl-aio .cl-ln { background: rgba(255, 255, 255, 0.22); }
.cl-aio .cl-chat__src { margin-top: 14px; }
.cl-aio .cl-chat__src span { border-color: transparent; }

/* stack builder (custom) */
.cl-stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cl-stack span { display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--cl-line); border-radius: 12px; font-weight: 600; color: var(--color-text); }
.cl-stack span::before { content: ""; width: 14px; height: 14px; border: 2px solid #AEB8CB; border-radius: 4px; }
.cl-stack span.on { border-color: #1FB6AE; background: #F2FBFA; color: var(--color-heading); }
.cl-stack span.on::before { border-color: #1FB6AE; background: #1FB6AE; }
.cl-sprint { display: grid; grid-template-columns: 2fr 3fr 2fr; gap: 4px; margin-top: 18px; }
.cl-sprint i { padding: 10px; border-radius: 8px; background: #C2EBE5; font-size: 12px; font-style: normal; font-weight: 600; text-align: center; }
.cl-sprint i:nth-child(2) { background: #1FB6AE; }
.cl-sprint i:nth-child(3) { background: var(--color-heading); color: #FFFFFF; }

@media (max-width: 575px) {
  .cl-art { grid-template-columns: minmax(0, 1fr); }
  .cl-cal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cl-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .cl-vid__head,
  .cl-serp--climb .cl-serp__row,
  .cl-chat__src span.is-you { animation: none; }
}

.cl-serp__row .cl-tagx { margin-bottom: 8px; }

/* services overview */
.cl-sv-intro { padding: clamp(56px, 6vw, 96px) 0 clamp(64px, 7.5vw, 120px); }
.cl-sv-intro__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 20px clamp(24px, 5vw, 96px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.cl-sv-intro__head p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--color-text); }
@media (max-width: 991px) { .cl-sv-intro__head { grid-template-columns: minmax(0, 1fr); } }


/* ------------------------------------------------ services bento (3D tiles) */
/* Navy tiles with transparent 3D renders. */
.cl-bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-bento__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 440px;
  padding: clamp(24px, 2.6vw, 40px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  background: var(--color-heading);
  overflow: hidden;
  transition: border-color 0.3s var(--cl-ease-out);
}

.cl-bento__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  max-width: 416px;
}

body.cl-brand .cl-bento__num {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: #1FB6AE;
}

body.cl-brand .cl-bento__tile h3 {
  font-size: clamp(24px, 2.2vw, 32px) !important;
  line-height: 1.1 !important;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

body.cl-brand .cl-bento__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #C9D2E3;
}

.cl-bento__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-bento__chips li {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: #DCE4F2;
}

body.cl-brand .cl-bento__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #1FB6AE;
}

.cl-bento__link i { font-size: 12px; transition: transform 0.3s var(--cl-ease-out); }

/* the whole tile is the link target; the visible link keeps the name */
.cl-bento__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 28px;
}

.cl-bento__art {
  position: relative;
  align-self: center;
  width: min(100%, 272px);
  aspect-ratio: 1;
  margin: 0 auto -24px;
  pointer-events: none;
  will-change: transform;
}

.cl-bento__art img {
  width: 100%;
  height: 100% !important;
  object-fit: contain;
  transition: transform 0.5s var(--cl-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .cl-bento__tile:hover { border-color: #1FB6AE; }
  .cl-bento__tile:hover .cl-bento__art img { transform: scale(1.06); }
  .cl-bento__tile:hover .cl-bento__link i { transform: translate(3px, -3px); }
}

@media (min-width: 768px) {
  .cl-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-bento__tile--w7 { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .cl-bento__tile--w7 .cl-bento__art { width: min(46%, 384px); margin: -32px -16px -32px auto; }
}

@media (min-width: 1024px) {
  .cl-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cl-bento__tile--w7 { grid-column: span 7; }
  .cl-bento__tile--w5 { grid-column: span 5; }
  .cl-bento__tile--w4 { grid-column: span 4; }
  .cl-bento__tile--w5 .cl-bento__art { width: min(100%, 288px); }
  .cl-bento__tile--w4 .cl-bento__art { width: min(100%, 240px); }
  .cl-bento__tile--w7 .cl-bento__art { width: min(48%, 352px); }
}

/* dark page hero with layered renders */
.cl-page-hero--dark { background: var(--color-heading); }
body.cl-brand .cl-page-hero--dark .cl-page-hero__title { color: #FFFFFF; max-width: 14ch; font-size: clamp(36px, 5vw, 72px) !important; }
body.cl-brand .cl-page-hero--dark .cl-page-hero__lead { color: #C9D2E3; max-width: 56ch; }
.cl-page-hero--dark .cl-crumbs,
body.cl-brand .cl-page-hero--dark .cl-crumbs a { color: rgba(255, 255, 255, 0.7); }
.cl-page-hero--dark .cl-crumbs [aria-current] { color: #7FE0D8; }
.cl-page-hero--dark .cl-sp-chips li { border-color: rgba(255, 255, 255, 0.22); background: transparent; color: #DCE4F2; font-weight: 500; }
body.cl-brand .cl-page-hero--dark .tf-btn.style-border { --btn-bg: transparent; --btn-fg: #FFFFFF; --btn-bd: rgba(255, 255, 255, 0.35); --btn-well: rgba(255, 255, 255, 0.12); }
.cl-page-hero--dark .cl-page-hero__grid { align-items: center; }

/* the renders carry real transparency, so no blend mode is needed */
.cl-trio { position: relative; aspect-ratio: 1 / 0.92; }
.cl-trio__l { position: absolute; display: block; width: 56%; will-change: transform; }
.cl-trio__l img { display: block; width: 100%; height: auto !important; }
.cl-trio__l--1 { top: 0; left: 0; }
.cl-trio__l--2 { top: 14%; right: 0; width: 50%; }
.cl-trio__l--3 { bottom: 0; left: 22%; width: 58%; }

@media (max-width: 991px) { .cl-trio { max-width: 420px; margin-top: 8px; } }


/* Inner pages: the header floats over the hero instead of pushing it down,
   so a dark hero runs right to the top of the page. */
body.cl-brand:has(.cl-page-hero, .cl-sp-hero) .header.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin-top: 0;
}

@media (min-width: 1200px) {
  body.cl-brand:has(.cl-page-hero, .cl-sp-hero) .header.header-fixed,
  body.cl-brand:has(.cl-page-hero, .cl-sp-hero) .header.header-fixed.is-fixed {
    top: 14px;
    margin-top: 0;
  }
}

/* services page closing panel */
.cl-sv-cta { padding-top: 0; }

.cl-sv-cta__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 24px;
  align-items: center;
  padding: clamp(32px, 5vw, 80px);
  border-radius: 32px;
  background: var(--color-heading);
  overflow: hidden;
}

.cl-sv-cta .cl-eyebrow { margin-bottom: 14px; color: rgba(255, 255, 255, 0.72); }
.cl-sv-cta .cl-eyebrow span { color: #7FE0D8 !important; }

body.cl-brand .cl-sv-cta__title {
  max-width: 16ch;
  margin-bottom: 32px;
  font-size: clamp(30px, 4vw, 60px) !important;
  line-height: 1.05 !important;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  text-wrap: balance;
}

body.cl-brand .cl-sv-cta .tf-btn.style-border { --btn-bg: transparent; --btn-fg: #FFFFFF; --btn-bd: rgba(255, 255, 255, 0.35); --btn-well: rgba(255, 255, 255, 0.12); }
.cl-sv-cta__art { justify-self: center; width: min(100%, 340px); will-change: transform; }
.cl-sv-cta__art img { display: block; width: 100%; height: auto !important; }

@media (max-width: 767px) {
  .cl-sv-cta__panel { grid-template-columns: minmax(0, 1fr); }
  .cl-sv-cta__art { width: min(70%, 260px); order: -1; justify-self: start; }
}


/* ============================================================== SEO page */
.cl-bento--3 { grid-template-columns: minmax(0, 1fr); }
.cl-bento__tile--sm { min-height: 0; }
.cl-bento__tile--sm .cl-bento__art { width: min(100%, 208px); margin-bottom: -16px; }
@media (min-width: 768px) { .cl-bento--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* hero artwork: the render inside two slow rings, with its three disciplines */
.cl-seo-art { position: relative; aspect-ratio: 1; max-width: 560px; margin-inline: auto; width: 100%; }
.cl-seo-art__ring { position: absolute; inset: 9%; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; }
.cl-seo-art__ring--2 { inset: 0; border-style: dashed; border-color: rgba(127, 224, 216, 0.28); }
.cl-seo-art__render { position: absolute; inset: 6%; will-change: transform; }
.cl-seo-art__render img { display: block; width: 100%; height: auto !important; aspect-ratio: 1; object-fit: contain; }
.cl-seo-art__chip {
  position: absolute;
  z-index: 2;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: #26365F;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: #FFFFFF;
  box-shadow: 0 18px 32px -20px rgba(0, 0, 0, 0.6);
  will-change: transform;
}
.cl-seo-art__chip::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #1FB6AE; vertical-align: 1px; }
.cl-seo-art__chip--a { top: 12%; left: 0; }
.cl-seo-art__chip--b { top: 30%; right: -2%; }
.cl-seo-art__chip--c { bottom: 24%; left: 4%; }
.cl-seo .cl-sp-kpi { left: auto; right: 0; bottom: 6%; }
.cl-seo .cl-sp-hero__art .cl-live { box-shadow: none; }

/* overview */
.cl-seo-over { display: grid; gap: clamp(32px, 4vw, 64px); }
body.cl-brand .cl-seo-statement {
  max-width: 22ch;
  font-size: clamp(30px, 4.6vw, 68px) !important;
  line-height: 1.06 !important;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--color-heading);
  text-wrap: balance;
}
.cl-seo-over__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 56px); padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--color-heading); }
body.cl-brand .cl-seo-over__cols h3,
body.cl-brand .cl-seo-inc h3,
body.cl-brand .cl-seo-step h3,
body.cl-brand .cl-seo-kpi h3,
body.cl-brand .cl-seo-fit__card h3 {
  margin-bottom: 10px;
  font-size: clamp(19px, 1.5vw, 22px) !important;
  line-height: 1.25 !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}
.cl-seo-over__cols p,
.cl-seo-inc p,
.cl-seo-step p,
.cl-seo-lead { margin: 0; font-size: 17px; line-height: 1.65; color: var(--color-text); }
.cl-seo-lead { max-width: 46ch; }

.cl-seo-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 20px clamp(24px, 5vw, 96px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.cl-seo-head > p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--color-text); }
.cl-seo-head--navy > p { color: #C9D2E3; }
.cl-seo-head--navy > p strong { color: #FFFFFF; font-weight: 600; }

/* pillars: tabs left, panel right */
.cl-seo-pillars { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.cl-seo-tabs { display: grid; gap: 10px; }
.cl-seo-tab {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--cl-line);
  border-radius: 18px;
  background: #FFFFFF;
  font: inherit;
  text-align: left;
  color: var(--color-heading);
  cursor: pointer;
  transition: background-color 0.3s var(--cl-ease-out), border-color 0.3s var(--cl-ease-out), color 0.3s var(--cl-ease-out);
}
.cl-seo-tab__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--cl-surface, #F5F7F9); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color 0.3s var(--cl-ease-out), color 0.3s var(--cl-ease-out); }
.cl-seo-tab b { display: block; font-size: 19px; line-height: 1.25; font-weight: 600; }
.cl-seo-tab small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--color-text); transition: color 0.3s var(--cl-ease-out); }
.cl-seo-tab[aria-selected="true"] { border-color: var(--color-heading); background: var(--color-heading); color: #FFFFFF; }
.cl-seo-tab[aria-selected="true"] small { color: #C9D2E3; }
.cl-seo-tab[aria-selected="true"] .cl-seo-tab__n { background: #1FB6AE; color: var(--color-heading); }
.cl-seo-tab:focus-visible { outline: 2px solid var(--color-link); outline-offset: 3px; }
@media (hover: hover) { .cl-seo-tab:not([aria-selected="true"]):hover { border-color: var(--color-heading); } }

.cl-seo-panels { position: relative; border: 1px solid var(--cl-line); border-radius: 24px; background: #FFFFFF; overflow: hidden; }
.cl-seo-panel { position: relative; height: 100%; padding: clamp(28px, 3.4vw, 56px); }
.cl-seo-panel[hidden] { display: none; }
.cl-seo-panel__big { position: absolute; top: clamp(8px, 1.4vw, 20px); right: clamp(16px, 2.4vw, 36px); font-size: clamp(88px, 11vw, 168px); line-height: 1; font-weight: 600; letter-spacing: -0.05em; color: var(--cl-surface, #F5F7F9); pointer-events: none; }
body.cl-brand .cl-seo-panel__kind { position: relative; margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-link); }
body.cl-brand .cl-seo-panel h3 { position: relative; max-width: 16ch; font-size: clamp(26px, 2.8vw, 40px) !important; line-height: 1.1 !important; font-weight: 600; letter-spacing: -0.025em; color: var(--color-heading); }
body.cl-brand .cl-seo-panel__text { position: relative; max-width: 46ch; margin: 16px 0 0; font-size: 18px; line-height: 1.6; color: var(--color-text); }

.cl-seo-checks { position: relative; margin: clamp(20px, 2.4vw, 32px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--cl-line); }
.cl-seo-checks li,
.cl-seo-fit__card li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--cl-line); font-size: 17px; line-height: 1.5; font-weight: 500; color: var(--color-heading); }
.cl-seo-checks li::before,
.cl-seo-fit__card li::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #1FB6AE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2C52' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 15px no-repeat;
}

/* growth chart */
.cl-seo-growth { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.cl-seo-chart { margin: 0; padding: clamp(18px, 2.4vw, 32px); border: 1px solid var(--cl-line); border-radius: 24px; background: #FFFFFF; }
.cl-seo-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.cl-seo-chart__grid path { fill: none; stroke: rgba(30, 44, 82, 0.1); stroke-width: 1; stroke-dasharray: 3 5; }
.cl-seo-chart__area { fill: rgba(31, 182, 174, 0.14); }
.cl-seo-chart__line { fill: none; stroke: #1FB6AE; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; }
.cl-seo-chart__dots circle { fill: #FFFFFF; stroke: var(--color-heading); stroke-width: 3; }
.cl-seo-chart__dots circle:last-child { fill: #1FB6AE; }
.cl-seo-chart__x text { fill: var(--color-text); font-size: 13px; font-weight: 600; text-anchor: middle; font-family: inherit; }
.cl-seo-chart figcaption { margin-top: 12px; font-size: 13px; color: var(--color-text); }

/* included */
.cl-seo-incgrid,
.cl-seo-proc { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.cl-seo-photo { margin-top: clamp(24px, 3vw, 40px); border-radius: 24px; overflow: hidden; background: #DCE4EA; }
.cl-seo-photo img { display: block; width: 100%; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; will-change: transform; }
.cl-seo-incs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.cl-seo-inc { padding: clamp(22px, 2.2vw, 32px); border: 1px solid var(--cl-line); border-radius: 22px; background: #FFFFFF; transition: border-color 0.3s var(--cl-ease-out); }
.cl-seo-inc__n { display: block; margin-bottom: clamp(18px, 2.2vw, 32px); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-link); }
@media (hover: hover) { .cl-seo-inc:hover { border-color: var(--color-heading); } }

/* process timeline */
.cl-seo-steps { position: relative; margin: 0; padding: 0; list-style: none; }
.cl-seo-steps__track { position: absolute; top: 24px; bottom: 24px; left: 23px; width: 2px; background: var(--cl-line); }
.cl-seo-steps__track i { display: block; width: 100%; height: 100%; background: #1FB6AE; transform-origin: 50% 0; }
.cl-seo-step { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); padding-bottom: clamp(28px, 3.4vw, 48px); }
.cl-seo-step:last-child { padding-bottom: 0; }
.cl-seo-step__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--cl-line); border-radius: 14px; background: #FFFFFF; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text); transition: background-color 0.4s var(--cl-ease-out), border-color 0.4s var(--cl-ease-out), color 0.4s var(--cl-ease-out); }
.cl-seo-step.is-on .cl-seo-step__dot { border-color: var(--color-heading); background: var(--color-heading); color: #FFFFFF; }
.cl-seo-step__when { display: inline-block; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-link); }
body.cl-brand .cl-seo-step__get { margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: var(--cl-surface, #F5F7F9); font-size: 15px; line-height: 1.45; font-weight: 500; color: var(--color-heading); }
.cl-seo-step__get b { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text); }

/* reporting */
.cl-seo-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.cl-seo-kpi { padding: clamp(20px, 2vw, 28px); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 22px; background: #26365F; }
.cl-seo-spark { display: block; width: 100%; height: auto; margin-bottom: clamp(18px, 2vw, 28px); overflow: visible; }
.cl-seo-spark path { fill: none; stroke: #1FB6AE; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
body.cl-brand .cl-seo-kpi h3 { color: #FFFFFF; }
.cl-seo-kpi p { margin: 0; font-size: 15px; line-height: 1.6; color: #C9D2E3; }

/* outcomes */
.cl-seo-outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.cl-seo-out:nth-child(2) { margin-top: clamp(0px, 4vw, 56px); }
.cl-seo-out__img { border-radius: 24px; overflow: hidden; background: #DCE4EA; }
.cl-seo-out__img img { display: block; width: 100%; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; will-change: transform; }
.cl-seo-out__n { display: block; margin: 20px 0 8px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-link); }
body.cl-brand .cl-seo-out p { margin: 0; max-width: 24ch; font-size: clamp(20px, 1.8vw, 26px) !important; line-height: 1.25 !important; font-weight: 600; letter-spacing: -0.015em; color: var(--color-heading); }

/* fit + tools */
.cl-seo-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.cl-seo-fit__card { padding: clamp(24px, 2.8vw, 44px); border: 1px solid var(--cl-line); border-radius: 24px; background: #FFFFFF; }
.cl-seo-fit__card ul { margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--cl-line); }
.cl-seo-fit__card--no li::before { background: #E6EAF0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2C52' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 13px no-repeat; }
.cl-seo-fit__card > p { margin: 20px 0 0; font-size: 16px; color: var(--color-text); }
body.cl-brand .cl-seo-fit__card > p a { font-weight: 600; color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
.cl-seo-tools { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 40px; align-items: center; margin-top: clamp(32px, 4vw, 56px); padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--color-heading); }
body.cl-brand .cl-seo-tools__title { font-size: 18px !important; line-height: 1.3 !important; font-weight: 600; letter-spacing: 0; color: var(--color-heading); }
.cl-seo-tools ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cl-seo-tools li { padding: 10px 16px; border: 1px solid var(--cl-line); border-radius: 12px; background: #FFFFFF; font-size: 15px; font-weight: 600; color: var(--color-heading); }

@media (min-width: 992px) and (min-height: 760px) {
  .cl-seo-incgrid__aside,
  .cl-seo-proc__aside { position: sticky; top: 112px; }
}

@media (max-width: 991px) {
  .cl-seo-over__cols,
  .cl-seo-head,
  .cl-seo-pillars,
  .cl-seo-growth,
  .cl-seo-incgrid,
  .cl-seo-proc { grid-template-columns: minmax(0, 1fr); }
  .cl-seo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-seo-outs { grid-template-columns: minmax(0, 1fr); }
  .cl-seo-out:nth-child(2) { margin-top: 0; }
  .cl-seo-out p { max-width: none; }
  .cl-seo-art { max-width: 420px; }
  .cl-seo .cl-sp-kpi { position: absolute; right: 0; bottom: 4%; max-width: 220px; margin: 0; }
  .cl-seo-tools { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575px) {
  .cl-seo-incs,
  .cl-seo-fit,
  .cl-seo-kpis { grid-template-columns: minmax(0, 1fr); }
  .cl-seo-art__chip { font-size: 12px; padding: 7px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-seo-tab, .cl-seo-tab__n, .cl-seo-tab small, .cl-seo-step__dot, .cl-seo-inc { transition: none; }
}


/* SEO page, homepage look: light hero, flat mint illustrations, white cards */
.cl-sp-hero--home {
  background:
    radial-gradient(56% 64% at 18% 52%, rgba(31, 182, 174, 0.1), rgba(31, 182, 174, 0) 70%),
    var(--color-bg, #FFFFFF);
}
.cl-sp-hero--home .cl-sp-hero__title em { font-style: normal; color: var(--color-link); }
.cl-sp-hero--home .cl-seo-art { aspect-ratio: auto; max-width: 600px; padding: 7% 5% 9%; }
.cl-sp-hero--home .cl-seo-art__ring { inset: 0; border: 1px solid var(--cl-line); border-radius: 36px; }
.cl-sp-hero--home .cl-live { position: relative; border-radius: 28px; background: #C2EBE5; box-shadow: 0 40px 80px -48px rgba(30, 44, 82, 0.55); }
.cl-sp-hero--home .cl-seo-art__chip { border: 1px solid var(--cl-line); background: #FFFFFF; color: var(--color-heading); box-shadow: var(--cl-shadow); }
.cl-sp-hero--home .cl-seo-art__chip--a { top: 2%; left: -2%; }
.cl-sp-hero--home .cl-seo-art__chip--b { top: 20%; right: -3%; }
.cl-sp-hero--home .cl-seo-art__chip--c { bottom: 30%; left: -4%; }
.cl-sp-hero--home.cl-seo .cl-sp-kpi { right: -2%; bottom: 2%; }

.cl-seo-illus { margin-top: clamp(24px, 3vw, 40px); border-radius: 24px; overflow: hidden; background: #253257; }
.cl-seo-illus--mint { background: #C2EBE5; }
.cl-seo-illus img { display: block; width: 100%; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; }
.cl-seo-out__img--flat { background: #C2EBE5; }
.cl-seo-out__img--flat img { aspect-ratio: 16 / 10; }

@media (max-width: 991px) {
  .cl-sp-hero--home .cl-seo-art { max-width: 520px; }
  .cl-sp-hero--home.cl-seo .cl-sp-kpi { position: absolute; right: 0; bottom: 0; }
}


/* SEO hero figure: the homepage's disc-and-ring, holding a live results card */
.cl-sp-hero--home { min-height: min(100dvh, 860px); display: flex; align-items: center; }
.cl-sp-hero--home > .container { width: 100%; }
.cl-sp-hero--home .cl-sp-hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); }
.cl-seo-fig { position: relative; width: 100%; max-width: 580px; aspect-ratio: 1; margin-inline: auto; }
.cl-seo-fig__ring { position: absolute; inset: 0; border: 1px solid var(--cl-line); border-radius: 50%; }
.cl-seo-fig__ring i { position: absolute; top: 50%; right: -5px; width: 9px; height: 9px; margin-top: -5px; border-radius: 50%; background: #1FB6AE; }
.cl-seo-fig__disc { position: absolute; inset: 8%; border-radius: 50%; background: linear-gradient(160deg, #46C6C6 0%, var(--btn-primary-bg, #1FB6AE) 55%, #1596A8 100%); box-shadow: 0 40px 70px -40px rgba(14, 124, 119, 0.7); }
.cl-seo-fig__serp { position: absolute; top: 50%; left: 50%; width: 66%; margin: -31% 0 0 -33%; padding: clamp(14px, 1.6vw, 22px); border-radius: 22px; will-change: transform; }
.cl-seo-fig__serp .cl-serp__q { margin-bottom: 10px; padding: 9px 12px; font-size: 13px; }
.cl-seo-fig__serp .cl-serp__row { padding: 10px; }
.cl-seo-fig__card { position: absolute; z-index: 2; padding: 14px 16px; border: 1px solid var(--cl-line); border-radius: 16px; background: #FFFFFF; box-shadow: var(--cl-shadow); will-change: transform; }
.cl-seo-fig__card--trend { top: 4%; left: -9%; width: 29%; }
.cl-seo-fig__card--trend span { display: block; margin-bottom: 10px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--color-text); }
.cl-seo-fig__bars { display: flex; align-items: flex-end; gap: 6px; height: 44px; }
.cl-seo-fig__bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: #C2EBE5; transform-origin: 50% 100%; }
.cl-seo-fig__bars i:nth-child(1) { height: 28%; }
.cl-seo-fig__bars i:nth-child(2) { height: 40%; }
.cl-seo-fig__bars i:nth-child(3) { height: 54%; }
.cl-seo-fig__bars i:nth-child(4) { height: 74%; background: #1FB6AE; }
.cl-seo-fig__bars i:nth-child(5) { height: 100%; background: var(--color-heading); }
.cl-seo-fig .cl-seo-art__chip { border: 1px solid var(--cl-line); background: #FFFFFF; color: var(--color-heading); box-shadow: var(--cl-shadow); }
.cl-seo-fig .cl-seo-art__chip--a { top: 2%; left: auto; right: 8%; }
.cl-seo-fig .cl-seo-art__chip--b { top: 34%; right: -5%; }
.cl-seo-fig .cl-seo-art__chip--c { top: auto; bottom: 22%; left: -5%; }
.cl-seo .cl-seo-fig .cl-sp-kpi { position: absolute; left: auto; right: -2%; bottom: 7%; max-width: 230px; margin: 0; }

@media (max-width: 991px) {
  .cl-sp-hero--home { min-height: 0; display: block; }
  .cl-sp-hero--home .cl-sp-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .cl-seo-fig { max-width: 460px; margin-top: 12px; }
}

@media (max-width: 575px) {
  .cl-seo-fig__card--trend { top: 0; left: 0; width: 34%; padding: 10px 12px; }
  .cl-seo-fig__serp { margin-top: -26%; }
  .cl-seo-fig .cl-seo-art__chip--b { right: 0; }
  .cl-seo-fig .cl-seo-art__chip--c { left: 0; }
  .cl-seo .cl-seo-fig .cl-sp-kpi { right: 0; max-width: 190px; padding: 12px 14px; }
  .cl-seo-fig__serp { width: 74%; margin-left: -37%; }
}


/* ================================================ paid-ads service pages */
/* shared: any detailed service page's main hero card */
.cl-seo-fig__main { position: absolute; top: 50%; left: 50%; width: 62%; margin: -34% 0 0 -31%; padding: clamp(14px, 1.6vw, 22px); border-radius: 22px; will-change: transform; }
.cl-seo-fig__main .cl-serp__q { margin-bottom: 10px; padding: 9px 12px; font-size: 13px; }
.cl-seo-fig__main .cl-serp__row { padding: 10px; }

/* each service keeps the disc-and-ring but in its own colour */
.cl-seo-fig--navy .cl-seo-fig__disc { background: var(--color-heading); box-shadow: 0 40px 70px -40px rgba(30, 44, 82, 0.75); }
.cl-seo-fig--navy .cl-seo-fig__ring { border-color: rgba(31, 182, 174, 0.45); border-style: dashed; }
.cl-seo-fig--mint .cl-seo-fig__disc { background: #C2EBE5; box-shadow: 0 40px 70px -44px rgba(14, 124, 119, 0.5); }
.cl-seo-fig--mint .cl-seo-fig__ring { border-color: var(--color-heading); opacity: 0.18; }
.cl-seo-fig--mint .cl-seo-fig__ring i { background: var(--color-heading); }

/* Meta Ads: a feed ad */
.cl-adpost { width: 54%; margin: -40% 0 0 -27%; }
.cl-adpost__head { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-bottom: 12px; }
.cl-adpost__head > i { width: 34px; height: 34px; border-radius: 50%; background: #C2EBE5; }
.cl-adpost__media { position: relative; aspect-ratio: 1 / 0.86; border-radius: 14px; background: #1FB6AE; overflow: hidden; }
.cl-adpost__shape { position: absolute; left: 14%; bottom: -18%; width: 56%; aspect-ratio: 1; border-radius: 50%; background: var(--color-heading); }
.cl-adpost__shape--b { left: auto; right: 10%; top: 14%; bottom: auto; width: 30%; border-radius: 24%; background: #C2EBE5; }
.cl-adpost__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 12px; }
.cl-adpost__cta { padding: 8px 12px; border-radius: 10px; background: var(--color-heading); font-size: 12px; line-height: 16px; font-weight: 600; color: #FFFFFF; white-space: nowrap; }
.cl-seo-fig__card--ab,
.cl-seo-fig__card--kw { width: 33%; }
.cl-seo-fig__card--ab .cl-ab__m span::after,
.cl-seo-fig__card--kw .cl-ab__m span::after { background: #1FB6AE; transform-origin: 0 50%; }
.cl-svc--meta-ads .cl-seo-fig__card--trend { top: 12%; left: -10%; }
.cl-svc--meta-ads .cl-seo-art__chip--a { top: 3%; right: 4%; }

/* Google Ads: the sponsored result, about to be clicked */
.cl-gads { width: 64%; margin: -32% 0 0 -32%; }
.cl-gads .cl-adrow { margin-bottom: 8px; padding: 12px; }
.cl-gads__cursor { position: absolute; right: 12%; top: 34%; width: 38px; height: 38px; filter: drop-shadow(0 6px 8px rgba(30, 44, 82, 0.3)); animation: cl-click 2.8s var(--cl-ease-out) infinite; }
@keyframes cl-click { 0%, 100% { transform: translate(18px, 22px); } 40%, 60% { transform: none; } 50% { transform: scale(0.86); } }
.cl-svc--google-ads .cl-seo-fig__card--trend { top: auto; bottom: 20%; left: -10%; }
.cl-svc--google-ads .cl-seo-art__chip--c { bottom: auto; top: 14%; left: -2%; }

/* signature figures */
.cl-sigfig { padding: clamp(22px, 3vw, 44px); }
.cl-funnel { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cl-funnel__row { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 14px; align-items: center; }
.cl-funnel__bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; width: calc(var(--w) * 1%); min-width: 132px; padding: 16px 18px; border-radius: 14px; background: var(--color-heading); color: #FFFFFF; transform-origin: 0 50%; }
.cl-funnel__row:nth-child(2) .cl-funnel__bar { background: #0E7C77; }
.cl-funnel__row:nth-child(3) .cl-funnel__bar { background: #1FB6AE; color: var(--color-heading); }
.cl-funnel__row:nth-child(4) .cl-funnel__bar { background: #C2EBE5; color: var(--color-heading); }
.cl-funnel__bar b { font-size: 17px; font-weight: 600; }
.cl-funnel__bar i { font-size: 13px; font-style: normal; opacity: 0.8; white-space: nowrap; }
.cl-funnel__n { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-link); }

.cl-own { display: grid; gap: 0; }
.cl-own__step { padding: 16px 18px; border: 1px solid var(--cl-line); border-radius: 16px; background: #FFFFFF; }
.cl-own__step--ad { border-color: #1FB6AE; background: #F2FBFA; }
.cl-own__k { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-link); }
.cl-own__step strong { display: block; margin-top: 8px; font-size: 19px; line-height: 1.25; font-weight: 600; color: var(--color-heading); }
.cl-own__step small { display: block; margin-top: 2px; font-size: 13px; color: var(--color-link); }
.cl-own__step p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--color-text); }
.cl-own__link { justify-self: center; width: 2px; height: 22px; background: #1FB6AE; transform-origin: 50% 0; }
.cl-own__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.cl-own__stats li { padding: 10px 10px 10px 32px; border-radius: 10px; background: var(--cl-surface, #F5F7F9); font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--color-heading); background-repeat: no-repeat; background-position: 10px 50%; background-size: 16px; }
.cl-own__stats .up { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C77' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E"); }
.cl-own__stats .down { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C77' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12l7 7 7-7'/%3E%3C/svg%3E"); }

/* the "and the work around it" card */
.cl-seo-inc--accent { grid-column: 1 / -1; border-color: var(--color-heading); background: var(--color-heading); }
body.cl-brand .cl-seo-inc--accent h3 { color: #FFFFFF; }
.cl-seo-inc--accent .cl-seo-checks { margin-top: 12px; border-top-color: rgba(255, 255, 255, 0.2); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.cl-seo-inc--accent .cl-seo-checks li { border-bottom-color: rgba(255, 255, 255, 0.2); color: #FFFFFF; font-size: 16px; }

@media (max-width: 575px) {
  .cl-seo-fig__main { width: 72%; margin-left: -36%; }
  .cl-adpost { width: 62%; margin-left: -31%; }
  .cl-seo-fig__card--ab, .cl-seo-fig__card--kw { width: 40%; }
  .cl-svc--meta-ads .cl-seo-fig__card--trend, .cl-svc--google-ads .cl-seo-fig__card--trend { left: 0; }
  .cl-seo-inc--accent .cl-seo-checks { grid-template-columns: minmax(0, 1fr); }
  .cl-own__stats { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) { .cl-gads__cursor { animation: none; } }


/* ========================================== video + design service pages */
.cl-seo-fig--deep .cl-seo-fig__disc { background: #0E7C77; box-shadow: 0 40px 70px -40px rgba(14, 124, 119, 0.8); }
.cl-seo-fig--deep .cl-seo-fig__ring { border-color: var(--color-heading); border-width: 1px; opacity: 0.22; }
.cl-seo-fig--paper .cl-seo-fig__disc { background: #FFFFFF; border: 1px solid var(--cl-line); box-shadow: inset 0 0 0 clamp(14px, 2vw, 26px) #C2EBE5, 0 40px 70px -46px rgba(30, 44, 82, 0.45); }
.cl-seo-fig--paper .cl-seo-fig__ring { border-style: dashed; border-color: var(--color-heading); opacity: 0.25; }
.cl-seo-fig--paper .cl-seo-fig__ring i { background: var(--color-heading); }

/* Video Editing: a player with its timeline */
.cl-player { width: 68%; margin: -32% 0 0 -34%; }
.cl-player .cl-vid__screen { aspect-ratio: 16 / 9; }
.cl-player .cl-vid__tracks { margin-top: 12px; }
.cl-player .cl-vid__track { height: 26px; }
.cl-svc--video-editing .cl-seo-fig__card--trend { top: auto; bottom: 16%; left: -9%; }
.cl-svc--video-editing .cl-seo-art__chip--c { bottom: auto; top: 12%; left: -3%; }

/* Graphic Design: an artboard */
.cl-board { width: 70%; margin: -30% 0 0 -35%; }
.cl-board .cl-art__type { min-height: 0; aspect-ratio: 1 / 1.05; }
.cl-board .cl-art__type b { font-size: clamp(44px, 6vw, 84px); }
.cl-seo-fig__card--sizes { width: 34%; }
.cl-sizes { display: flex; align-items: flex-end; gap: 6px; height: 46px; }
.cl-sizes i { height: 100%; aspect-ratio: var(--r); max-width: 60%; border: 1.5px solid var(--color-heading); border-radius: 5px; background: #C2EBE5; transform-origin: 50% 100%; }
.cl-sizes i:nth-child(2) { height: 46%; background: #1FB6AE; }
.cl-sizes i:nth-child(3) { background: #FFFFFF; }
.cl-svc--graphic-design .cl-seo-fig__card--trend { top: 6%; left: -8%; }

/* signature: the 15-second timeline */
.cl-tl { position: relative; display: grid; gap: 10px; }
.cl-tl__ruler { display: flex; justify-content: space-between; margin-left: 84px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text); }
.cl-tl__row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; }
.cl-tl__row b { font-size: 13px; font-weight: 600; color: var(--color-heading); }
.cl-tl__row > span { position: relative; display: block; height: 40px; border-radius: 10px; background: var(--cl-surface, #F5F7F9); }
.cl-tl__clip { position: absolute; top: 4px; bottom: 4px; left: calc(var(--s) * 1%); width: calc(var(--w) * 1%); display: grid; place-items: center; border-radius: 8px; background: #C2EBE5; font-size: 12px; font-style: normal; font-weight: 600; color: var(--color-heading); transform-origin: 0 50%; }
.cl-tl__clip.t { background: #1FB6AE; }
.cl-tl__clip.n { background: var(--color-heading); color: #FFFFFF; }
.cl-tl__clip.c { background: repeating-linear-gradient(90deg, #AEB8CB 0 2px, transparent 2px 7px); }
.cl-tl__head { position: absolute; top: 22px; bottom: 0; left: 84px; width: 2px; background: #E5484D; animation: cl-tlhead 7s linear infinite; }
.cl-tl__head::before { content: ""; position: absolute; top: -5px; left: -5px; width: 12px; height: 8px; border-radius: 3px; background: #E5484D; }
@keyframes cl-tlhead { to { left: 100%; } }

/* signature: the brand board */
.cl-brandboard { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 14px; }
.cl-brandboard__type { grid-row: span 2; display: grid; align-content: space-between; padding: 20px; border-radius: 18px; background: var(--color-heading); color: #FFFFFF; min-height: 220px; }
.cl-brandboard__type b { font-size: clamp(64px, 8vw, 112px); line-height: 0.9; font-weight: 600; letter-spacing: -0.05em; }
.cl-brandboard__type span { font-size: 13px; opacity: 0.75; }
.cl-brandboard__sw, .cl-brandboard__sizes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cl-brandboard__sw { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cl-brandboard__sw i { display: block; aspect-ratio: 1; border: 1px solid var(--cl-line); border-radius: 12px; background: var(--c); }
.cl-brandboard__sw span, .cl-brandboard__sizes span { display: block; margin-top: 6px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text); }
.cl-brandboard__sizes { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; padding: 14px; border: 1px dashed #AEB8CB; border-radius: 16px; }
.cl-brandboard__sizes i { display: block; width: 100%; max-height: 92px; aspect-ratio: var(--r); margin-inline: auto; border-radius: 8px; background: #C2EBE5; border: 1.5px solid var(--color-heading); }
.cl-brandboard__sizes li:nth-child(3) i { width: 52%; }
.cl-brandboard__sizes li:nth-child(4) i { width: 74%; }

@media (max-width: 575px) {
  .cl-player, .cl-board { width: 78%; margin-left: -39%; }
  .cl-svc--video-editing .cl-seo-fig__card--trend, .cl-svc--graphic-design .cl-seo-fig__card--trend { left: 0; }
  .cl-tl__row { grid-template-columns: 58px minmax(0, 1fr); gap: 8px; }
  .cl-tl__ruler, .cl-tl__head { margin-left: 0; }
  .cl-tl__ruler { margin-left: 66px; }
  .cl-tl__head { left: 66px; }
  .cl-brandboard { grid-template-columns: minmax(0, 1fr); }
  .cl-brandboard__type { grid-row: auto; min-height: 150px; }
}

@media (prefers-reduced-motion: reduce) { .cl-tl__head { animation: none; } }
.cl-art__side, .cl-art__type { min-width: 0; }
.cl-board .cl-art { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cl-board .cl-art__comp { padding: 12px; }
.cl-board .cl-art__btn { font-size: 11px; padding: 6px 10px; white-space: nowrap; }

/* phone: the side cards step outside the disc so the main card stays readable */
@media (max-width: 575px) {
  .cl-seo-fig { margin-block: 40px 56px; }
  .cl-seo-fig .cl-seo-fig__card--trend { top: -9% !important; bottom: auto !important; left: 0 !important; }
  .cl-seo .cl-seo-fig .cl-sp-kpi { bottom: -11%; right: 0; }
  .cl-seo-fig .cl-seo-art__chip--a { top: -6%; right: 0; }
  .cl-seo-fig .cl-seo-art__chip--b { top: auto; bottom: 22%; right: 0; }
  .cl-seo-fig .cl-seo-art__chip--c { top: auto !important; bottom: 6% !important; left: 0 !important; }
}


/* ============================================= web development service page */
.cl-seo-fig--grid .cl-seo-fig__disc { background-color: #F5F7F9; background-image: radial-gradient(rgba(30, 44, 82, 0.28) 1.2px, transparent 1.4px); background-size: 18px 18px; border: 1.5px solid var(--color-heading); box-shadow: 0 40px 70px -46px rgba(30, 44, 82, 0.45); }
.cl-seo-fig--grid .cl-seo-fig__ring { border-color: #1FB6AE; border-width: 2px; opacity: 0.6; }
.cl-browser { width: 70%; margin: -31% 0 0 -35%; }
.cl-browser .cl-web__bar { margin-bottom: 12px; }
.cl-browser .cl-web__bar span { height: 22px; }
.cl-browser__hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: #F5F7F9; }
.cl-browser__hero .cl-art__btn { display: inline-block; margin-top: 12px; font-size: 11px; padding: 6px 10px; white-space: nowrap; }
.cl-browser__hero > i { aspect-ratio: 1 / 0.8; border-radius: 12px; background: #1FB6AE; }
.cl-browser__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.cl-browser__cols span { height: 34px; border-radius: 8px; background: #E3E7EE; }
.cl-browser__cols span:nth-child(2) { background: #C2EBE5; }
.cl-seo-fig__card--score { width: 27%; text-align: center; }
.cl-seo-fig__card--score .cl-web__ring { width: 78%; margin-inline: auto; }
.cl-seo-fig__card--score .cl-web__ring b { font-size: clamp(14px, 1.5vw, 19px); }
.cl-web__ring circle[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0.1; }
.cl-svc--web-development .cl-seo-fig__card--trend { top: auto; bottom: 14%; left: -8%; }
.cl-svc--web-development .cl-seo-art__chip--c { bottom: auto; top: 10%; left: -3%; }

.cl-vitals .cl-web__bar span { display: flex; align-items: center; height: 30px; padding: 0 12px; font-size: 13px; font-weight: 500; color: var(--color-text); }
.cl-vitals__body { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(16px, 2.4vw, 36px); align-items: center; }
.cl-vitals__ring { text-align: center; }
.cl-vitals__ring .cl-web__ring { max-width: 190px; margin-inline: auto; }
.cl-vitals__ring .cl-web__ring b { font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -0.03em; }
.cl-vitals__ring > span { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.cl-vitals__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cl-vitals__list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--cl-surface, #F5F7F9); }
.cl-vitals__list span { font-size: 14px; font-weight: 600; color: var(--color-text); }
.cl-vitals__list b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-heading); }

@media (max-width: 575px) {
  .cl-browser { width: 80%; margin-left: -40%; }
  .cl-seo-fig__card--score { width: 32%; }
  .cl-vitals__body { grid-template-columns: minmax(0, 1fr); }
}


/* =============================================== custom growth service page */
.cl-seo-fig--rings .cl-seo-fig__disc { background: repeating-radial-gradient(circle, #FFFFFF 0 9%, #C2EBE5 9% 18%); border: 1.5px solid #1FB6AE; box-shadow: 0 40px 70px -46px rgba(14, 124, 119, 0.5); }
.cl-seo-fig--rings .cl-seo-fig__ring { border-color: var(--color-heading); border-style: dashed; opacity: 0.25; }
.cl-seo-fig--rings .cl-seo-fig__ring i { background: var(--color-heading); }
.cl-builder { width: 70%; margin: -24% 0 0 -35%; }
.cl-builder .cl-stack span { padding: 10px; font-size: 13px; }
.cl-seo-fig__card--sprint { width: 44%; }
.cl-seo-fig__card--sprint .cl-sprint { grid-template-columns: 2fr 3fr 2fr; margin-top: 0; }
.cl-seo-fig__card--sprint .cl-sprint i { padding: 7px 4px; font-size: 11px; transform-origin: 0 50%; }
.cl-svc--custom-growth .cl-seo-fig__card--trend { top: auto; bottom: 15%; left: -8%; }
.cl-svc--custom-growth .cl-seo-art__chip--c { bottom: auto; top: 12%; left: -3%; }

/* signature: every channel pointed at one goal */
.cl-orbit { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin-inline: auto; }
.cl-orbit__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cl-orbit__lines circle { fill: none; stroke: rgba(30, 44, 82, 0.18); stroke-width: 0.4; stroke-dasharray: 1.2 1.6; }
.cl-orbit__lines line { stroke: #1FB6AE; stroke-width: 0.7; stroke-linecap: round; stroke-dasharray: 1; }
.cl-orbit__core { position: absolute; top: 50%; left: 50%; display: grid; place-content: center; width: 34%; aspect-ratio: 1; margin: -17% 0 0 -17%; border-radius: 50%; background: var(--color-heading); text-align: center; color: #FFFFFF; box-shadow: 0 24px 44px -24px rgba(30, 44, 82, 0.7); }
.cl-orbit__core b { font-size: clamp(15px, 1.6vw, 20px); font-weight: 600; }
.cl-orbit__core span { margin-top: 2px; font-size: 12px; color: #7FE0D8; }
.cl-orbit__node { position: absolute; width: 0; height: 0; }
.cl-orbit__node i { position: absolute; top: 0; left: 0; display: grid; place-items: center; min-width: 76px; padding: 10px 14px; border: 1px solid var(--cl-line); border-radius: 12px; background: #FFFFFF; font-size: 14px; font-style: normal; font-weight: 600; color: var(--color-heading); box-shadow: var(--cl-shadow); transform: translate(-50%, -50%); white-space: nowrap; }

@media (max-width: 575px) {
  .cl-builder { width: 82%; margin-left: -41%; }
  .cl-builder .cl-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-seo-fig__card--sprint { width: 52%; }
  .cl-orbit__node i { min-width: 60px; padding: 8px 10px; font-size: 12px; }
}


/* =================================================== services page, bright */
.cl-page-hero--bright {
  background:
    radial-gradient(56% 64% at 18% 52%, rgba(31, 182, 174, 0.1), rgba(31, 182, 174, 0) 70%),
    var(--color-bg, #FFFFFF);
}
body.cl-brand .cl-page-hero--bright .cl-page-hero__title { max-width: 15ch; font-size: clamp(36px, 5vw, 72px) !important; }
.cl-page-hero--bright .cl-page-hero__grid { align-items: center; }
body.cl-brand .cl-page-hero--bright .cl-page-hero__lead { max-width: 56ch; }

/* three illustration cards fanned over a ring */
.cl-trio--cards { aspect-ratio: 1 / 0.94; max-width: 600px; width: 100%; margin-inline: auto; }
.cl-trio__ring { position: absolute; inset: 6% 3%; border: 1px dashed rgba(30, 44, 82, 0.22); border-radius: 50%; }
.cl-trio--cards .cl-trio__l { width: 58%; }
.cl-trio--cards .cl-trio__l--1 { top: 2%; left: 0; z-index: 2; }
.cl-trio--cards .cl-trio__l--2 { top: 24%; right: 0; width: 54%; z-index: 3; }
.cl-trio--cards .cl-trio__l--3 { bottom: 0; left: 14%; width: 56%; z-index: 1; }
.cl-trio__c { display: block; border: 6px solid #FFFFFF; border-radius: 26px; overflow: hidden; background: #C2EBE5; box-shadow: 0 36px 70px -40px rgba(30, 44, 82, 0.6); animation: cl-bob 5s ease-in-out infinite; }
.cl-trio__l--2 .cl-trio__c { animation-duration: 6.2s; animation-delay: -2s; }
.cl-trio__l--3 .cl-trio__c { animation-duration: 5.6s; animation-delay: -3.4s; }
.cl-trio__c img { display: block; width: 100%; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; }
@keyframes cl-bob { 50% { transform: translateY(-12px); } }

/* light bento: white tiles, mint illustration panels */
.cl-bento--light .cl-bento__tile { border-color: var(--cl-line); background: #FFFFFF; transition: border-color 0.3s var(--cl-ease-out), box-shadow 0.3s var(--cl-ease-out); }
.cl-bento--light .cl-bento__tile:nth-child(4n + 1) { background: #E8F7F5; border-color: transparent; }
.cl-bento--light .cl-bento__tile:nth-child(6n + 4) { background: var(--cl-surface, #F5F7F9); }
body.cl-brand .cl-bento--light .cl-bento__num { color: var(--color-link); }
body.cl-brand .cl-bento--light .cl-bento__tile h3 { color: var(--color-heading); }
body.cl-brand .cl-bento--light .cl-bento__text { color: var(--color-text); }
.cl-bento--light .cl-bento__chips li { border-color: var(--cl-line); background: #FFFFFF; color: var(--color-heading); font-weight: 600; }
body.cl-brand .cl-bento--light .cl-bento__link { color: var(--color-heading); }
.cl-bento--light .cl-bento__art { align-self: stretch; width: 100%; aspect-ratio: 16 / 10; margin: 24px 0 0; border-radius: 20px; overflow: hidden; background: #C2EBE5; }
.cl-bento--light .cl-bento__tile:nth-child(4n + 1) .cl-bento__art { box-shadow: 0 0 0 4px #FFFFFF; }
.cl-bento--light .cl-bento__art img { object-fit: cover; }

@media (hover: hover) and (pointer: fine) {
  .cl-bento--light .cl-bento__tile:hover { border-color: var(--color-heading); box-shadow: 0 30px 60px -40px rgba(30, 44, 82, 0.45); }
}

@media (min-width: 768px) {
  .cl-bento--light .cl-bento__tile--w7 .cl-bento__art { align-self: center; width: 46%; margin: 0 0 0 auto; aspect-ratio: 4 / 3; }
}

@media (min-width: 1024px) {
  .cl-bento--light .cl-bento__tile--w5 .cl-bento__art,
  .cl-bento--light .cl-bento__tile--w4 .cl-bento__art { width: 100%; }
  .cl-bento--light .cl-bento__tile--w7 .cl-bento__art { width: 46%; }
}

/* bright closing panel */
.cl-sv-cta__panel--bright { background: #C2EBE5; }
.cl-sv-cta__panel--bright .cl-eyebrow { color: var(--color-heading); }
.cl-sv-cta__panel--bright .cl-eyebrow span { color: var(--color-link) !important; }
body.cl-brand .cl-sv-cta__panel--bright .cl-sv-cta__title { color: var(--color-heading); }
body.cl-brand .cl-sv-cta__panel--bright .tf-btn.style-border { --btn-bg: #FFFFFF; --btn-fg: var(--color-heading); --btn-bd: transparent; --btn-well: var(--cl-surface, #F5F7F9); }
.cl-sv-cta__art--flat { width: min(100%, 420px); border: 6px solid #FFFFFF; border-radius: 26px; overflow: hidden; box-shadow: 0 36px 70px -40px rgba(30, 44, 82, 0.55); }
.cl-sv-cta__art--flat img { aspect-ratio: 4 / 3; object-fit: cover; }

@media (max-width: 991px) { .cl-trio--cards { max-width: 460px; margin-top: 20px; } }
@media (prefers-reduced-motion: reduce) { .cl-trio__c { animation: none; } }
@media (max-width: 575px) { .cl-trio--cards .cl-trio__l--2 { right: 3%; } .cl-trio--cards .cl-trio__l--1 { left: 2%; } }


/* ============================================================ company pages */
.cl-co-art { position: relative; width: 100%; max-width: 560px; margin-inline: auto; padding: 6% 5% 8%; }
.cl-co-art__ring { position: absolute; inset: 0; border: 1px dashed rgba(30, 44, 82, 0.22); border-radius: 44px; }
.cl-co-art__ring i { position: absolute; top: -5px; left: 18%; width: 10px; height: 10px; border-radius: 50%; background: #1FB6AE; }
.cl-co-art__card { position: relative; border: 6px solid #FFFFFF; border-radius: 30px; overflow: hidden; background: #C2EBE5; box-shadow: 0 40px 80px -44px rgba(30, 44, 82, 0.6); }
.cl-co-art__card img { display: block; width: 100%; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; }
body.cl-brand .cl-co-hero .cl-page-hero__title { max-width: 16ch; }

.cl-co-story { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(24px, 4vw, 64px); align-items: start; padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--color-heading); }
body.cl-brand .cl-co-story__text { margin: 0; font-size: clamp(17px, 1.35vw, 20px) !important; line-height: 1.7 !important; color: var(--color-text); }
.cl-co-story__text strong { font-weight: 600; color: var(--color-heading); }
body.cl-brand .cl-co-story__text a { font-weight: 600; color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
.cl-co-quote { margin: 0; padding: clamp(24px, 2.6vw, 40px); border-radius: 24px; background: #E8F7F5; }
.cl-co-quote blockquote { margin: 0 0 24px; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.35; font-weight: 500; letter-spacing: -0.015em; color: var(--color-heading); }
.cl-co-quote figcaption { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--color-text); }
.cl-co-quote figcaption img { width: 52px; height: 52px !important; border-radius: 50%; object-fit: cover; border: 2px solid #FFFFFF; }
.cl-co-quote figcaption b { display: block; font-size: 16px; font-weight: 600; color: var(--color-heading); }

.cl-co-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cl-co-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cl-co-num { display: block; margin-bottom: clamp(18px, 2.2vw, 32px); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: #7FE0D8; }
body.cl-brand .cl-co-navylead { max-width: 58ch; margin: 0 0 clamp(28px, 3.4vw, 48px); font-size: clamp(18px, 1.5vw, 22px) !important; line-height: 1.55 !important; color: #C9D2E3; }

.cl-co-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.cl-co-person { display: grid; grid-template-columns: clamp(96px, 12vw, 168px) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); align-items: center; padding: clamp(16px, 1.8vw, 24px); border: 1px solid var(--cl-line); border-radius: 24px; background: #FFFFFF; }
.cl-co-person__photo { display: block; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: #C2EBE5; }
.cl-co-person__photo img { width: 100%; height: 100% !important; object-fit: cover; transition: transform 0.6s var(--cl-ease-out); }
.cl-co-person__role { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-link); }
body.cl-brand .cl-co-person h3 { font-size: clamp(20px, 1.8vw, 26px) !important; line-height: 1.2 !important; font-weight: 600; letter-spacing: -0.015em; }
body.cl-brand .cl-co-person h3 a { color: var(--color-heading); }
@media (hover: hover) { .cl-co-person:hover .cl-co-person__photo img { transform: scale(1.05); } }

body.cl-brand .cl-co-cta-p { max-width: 46ch; margin: -12px 0 28px; font-size: 17px !important; line-height: 1.6 !important; color: var(--color-heading); }

/* team members (filled by the CRM, so the template's own classes are restyled) */
body.cl-brand .team-members-stack { display: grid; gap: clamp(14px, 1.6vw, 24px); }
body.cl-brand .team-member-detail { display: grid; grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr); gap: clamp(20px, 3vw, 48px); align-items: center; margin: 0; padding: clamp(16px, 2vw, 28px); border: 1px solid var(--cl-line); border-radius: 28px; background: #FFFFFF; visibility: visible !important; animation: none !important; }
body.cl-brand .team-member-detail:nth-child(even) { grid-template-columns: minmax(0, 0.62fr) minmax(0, 0.38fr); }
body.cl-brand .team-member-detail:nth-child(even) .member-photo { order: 2; }
body.cl-brand .team-member-detail .member-photo { border-radius: 20px; overflow: hidden; background: #C2EBE5; aspect-ratio: 1 / 1.05; }
body.cl-brand .team-member-detail .member-photo img { width: 100%; height: 100% !important; object-fit: cover; }
body.cl-brand .team-member-detail .member-content > p:first-child { margin-bottom: 8px; font-size: 12px !important; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-link) !important; }
body.cl-brand .team-member-detail h3 { margin-bottom: 14px; font-size: clamp(26px, 2.8vw, 40px) !important; line-height: 1.1 !important; font-weight: 600; letter-spacing: -0.025em; color: var(--color-heading); }
body.cl-brand .team-member-detail .member-content > p { font-size: 17px !important; line-height: 1.7 !important; color: var(--color-text); }
body.cl-brand .member-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
body.cl-brand .member-tag { padding: 7px 12px; border: 1px solid var(--cl-line); border-radius: 10px; background: var(--cl-surface, #F5F7F9); font-size: 13px; font-weight: 600; color: var(--color-heading); }

/* contact + quote: info on the left, the form in a card on the right */
.cl-co-contact { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.cl-co-channels { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.cl-co-channel { padding: clamp(20px, 2vw, 28px); border: 1px solid var(--cl-line); border-radius: 22px; background: #FFFFFF; }
body.cl-brand .cl-co-channel h3 { margin-bottom: 12px; font-size: 20px !important; line-height: 1.25 !important; font-weight: 600; color: var(--color-heading); }
.cl-co-channel ul { margin: 0; padding: 0; list-style: none; }
.cl-co-channel li { padding: 8px 0; border-top: 1px solid var(--cl-line); font-size: 16px; line-height: 1.5; color: var(--color-text); }
body.cl-brand .cl-co-channel li a { font-weight: 600; color: var(--color-heading); }
body.cl-brand .cl-co-channel li a:hover { color: var(--color-link); }
.cl-co-formcard { padding: clamp(22px, 3vw, 48px); border: 1px solid var(--cl-line); border-radius: 28px; background: #FFFFFF; box-shadow: 0 40px 80px -56px rgba(30, 44, 82, 0.5); }
body.cl-brand .cl-co-formcard__title { margin: 6px 0 24px; font-size: clamp(26px, 2.6vw, 38px) !important; line-height: 1.1 !important; font-weight: 600; letter-spacing: -0.025em; color: var(--color-heading); }
body.cl-brand .cl-co-formcard input:not([type="checkbox"]):not([type="radio"]),
body.cl-brand .cl-co-formcard select,
body.cl-brand .cl-co-formcard textarea { width: 100%; min-height: 52px; padding: 14px 16px; border: 1px solid var(--cl-line); border-radius: 12px; background: var(--cl-surface, #F5F7F9) !important; font-family: inherit !important; font-size: 16px; color: var(--color-heading); transition: border-color 0.3s var(--cl-ease-out), background-color 0.3s var(--cl-ease-out); }
body.cl-brand .cl-co-formcard textarea { min-height: 140px; }
body.cl-brand .cl-co-formcard input:focus,
body.cl-brand .cl-co-formcard select:focus,
body.cl-brand .cl-co-formcard textarea:focus { border-color: var(--color-heading); background: #FFFFFF !important; outline: 2px solid rgba(31, 182, 174, 0.35); outline-offset: 1px; }
body.cl-brand .cl-co-formcard legend { margin-bottom: 14px; font-size: 18px !important; font-weight: 600; color: var(--color-heading); }
body.cl-brand .cl-co-formcard fieldset { margin: 0 0 24px; padding: 0; border: 0; }
body.cl-brand .cl-co-formnote { margin: 18px 0 0; font-size: 14px !important; line-height: 1.5 !important; color: var(--color-text); }
body.cl-brand .cl-co-formnote a { font-weight: 600; color: var(--color-link); text-decoration: underline; }
.cl-co-proms { margin-top: 0; }
.cl-co-proms li span strong { font-weight: 600; color: var(--color-heading); }
.cl-co-proms li span { font-weight: 400; color: var(--color-text); }
body.cl-brand .cl-co-alt { margin: 24px 0 0; font-size: 16px !important; line-height: 1.7 !important; color: var(--color-text); }
body.cl-brand .cl-co-alt a { font-weight: 600; color: var(--color-heading); margin-inline: 4px; }

/* faq page: topics on the left, grouped answers on the right */
.cl-co-faqnav { display: grid; gap: 8px; }
body.cl-brand .cl-co-faqnav a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border: 1px solid var(--cl-line); border-radius: 14px; background: #FFFFFF; font-size: 16px; font-weight: 600; color: var(--color-heading); transition: border-color 0.3s var(--cl-ease-out), background-color 0.3s var(--cl-ease-out); }
.cl-co-faqnav a span { display: grid; place-items: center; min-width: 28px; height: 28px; border-radius: 8px; background: var(--cl-surface, #F5F7F9); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--color-link); }
body.cl-brand .cl-co-faqnav a:hover { border-color: var(--color-heading); }
.cl-co-faqgroup + .cl-co-faqgroup { margin-top: clamp(40px, 5vw, 72px); }
.cl-co-faqgroup { scroll-margin-top: 120px; }
body.cl-brand .cl-co-faqgroup__title { margin-bottom: 16px; font-size: clamp(24px, 2.6vw, 36px) !important; line-height: 1.15 !important; font-weight: 600; letter-spacing: -0.02em; color: var(--color-heading); }

@media (max-width: 991px) {
  .cl-co-story, .cl-co-contact { grid-template-columns: minmax(0, 1fr); }
  .cl-co-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-co-three { grid-template-columns: minmax(0, 1fr); }
  .cl-co-art { max-width: 460px; margin-top: 20px; }
  body.cl-brand .team-member-detail, body.cl-brand .team-member-detail:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  body.cl-brand .team-member-detail:nth-child(even) .member-photo { order: 0; }
}
@media (max-width: 575px) {
  .cl-co-four, .cl-co-people { grid-template-columns: minmax(0, 1fr); }
  .cl-co-person { grid-template-columns: 88px minmax(0, 1fr); }
}

/* quote form: the card is .cl-co-formcard, so the template's own card and gradient button are flattened */
body.cl-brand .cl-co-formcard .creatorlayer-quote-form { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.cl-brand .cl-co-formcard .creatorlayer-quote-form label { font-size: 14px !important; font-weight: 600; color: var(--color-heading); }
body.cl-brand .cl-co-formcard .creatorlayer-quote-group legend { font-size: 20px !important; letter-spacing: -0.01em; color: var(--color-heading); }
body.cl-brand .cl-co-formcard .creatorlayer-req { color: var(--color-link); }
body.cl-brand .cl-co-formcard .creatorlayer-opt { font-weight: 400; color: var(--color-text); }
body.cl-brand .creatorlayer-quote-submit { display: block; margin-top: 4px; }
body.cl-brand .creatorlayer-quote-btn { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 8px 8px 26px; border: 0; border-radius: 14px; background: #1FB6AE; background-image: none; box-shadow: none; font-size: 16px; font-weight: 600; color: #1E2C52; cursor: pointer; transition: background-color 0.3s var(--cl-ease-out), transform 0.2s var(--cl-ease-out); }
body.cl-brand .creatorlayer-quote-btn::before, body.cl-brand .creatorlayer-quote-btn::after { display: none; }
body.cl-brand .creatorlayer-quote-btn:hover { background: #2AC7BF; transform: none; box-shadow: none; }
body.cl-brand .creatorlayer-quote-btn:active { transform: scale(0.98); }
body.cl-brand .creatorlayer-quote-btn__label { color: #1E2C52; }
body.cl-brand .creatorlayer-quote-btn__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(30, 44, 82, 0.14); color: #1E2C52; }
body.cl-brand .creatorlayer-quote-submit__note { max-width: 46ch; margin: 16px 0 0; font-size: 14px !important; line-height: 1.5 !important; color: var(--color-text); }
body.cl-brand .creatorlayer-quote-submit__note a { font-weight: 600; color: var(--color-link); }

/* pricing page: the template's switcher, tabs and cards, redrawn in brand colours */
body.cl-brand .cl-co-pricing .cl-seo-head { margin-bottom: clamp(32px, 4vw, 56px); }
body.cl-brand .cl-co-pricing .pricing-industry-switcher-wrap { max-width: none; margin: 0 0 28px; }
body.cl-brand .cl-co-pricing .pricing-industry-switcher-label,
body.cl-brand .cl-co-pricing .pricing-billing-label { margin-bottom: 12px !important; font-size: 12px !important; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-align: left !important; color: var(--color-text); opacity: 1; }
body.cl-brand .cl-co-pricing .pricing-industry-switcher { padding: 8px; border: 1px solid var(--cl-line); border-radius: 22px; background: var(--cl-surface, #F5F7F9); box-shadow: none; }
body.cl-brand .cl-co-pricing .pricing-industry-switcher__btn { min-height: 76px; border-radius: 16px; color: var(--color-heading); }
body.cl-brand .cl-co-pricing .pricing-industry-switcher__btn:hover:not(.active) { background: #FFFFFF; box-shadow: none; }
body.cl-brand .cl-co-pricing .pricing-industry-switcher__btn.active { background: #1E2C52; color: #FFFFFF; box-shadow: 0 18px 32px -20px rgba(30, 44, 82, 0.7); }
body.cl-brand .cl-co-pricing .pricing-industry-switcher__icon { background: #C2EBE5; color: #0E7C77; }
body.cl-brand .cl-co-pricing .pricing-industry-switcher__btn.active .pricing-industry-switcher__icon { background: #1FB6AE; color: #1E2C52; }
body.cl-brand .cl-co-pricing .pricing-industry-switcher__label { font-size: 18px; font-weight: 600; }
body.cl-brand .cl-co-pricing .pricing-industry-switcher__hint { font-size: 13px; opacity: 0.8; }
body.cl-brand .cl-co-pricing .pricing-industry-banner { max-width: none; margin: 0 0 32px !important; padding: 20px 24px; align-items: center; border: 0; border-radius: 18px; background: #E8F7F5; }
body.cl-brand .cl-co-pricing .pricing-industry-banner__tag { border-radius: 8px; background: #1E2C52; color: #FFFFFF; font-weight: 600; }
body.cl-brand .cl-co-pricing .pricing-industry-banner__text { font-size: 17px !important; line-height: 1.55 !important; color: var(--color-heading); }
body.cl-brand .cl-co-pricing .pricing-billing-tabs.list-price-tabs.style-2 { max-width: 320px; margin: 0 0 32px !important; padding: 5px; border: 1px solid var(--cl-line); border-radius: 14px; background: var(--cl-surface, #F5F7F9); }
body.cl-brand .cl-co-pricing .pricing-billing-tabs ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0; padding: 0; list-style: none; }
body.cl-brand .cl-co-pricing .pricing-billing-tabs .nav-tab-item a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 10px; background: none; font-size: 15px; font-weight: 600; color: var(--color-heading); }
body.cl-brand .cl-co-pricing .pricing-billing-tabs .nav-tab-item a.active { background: #FFFFFF; color: var(--color-heading); box-shadow: 0 6px 14px -8px rgba(30, 44, 82, 0.45); }
body.cl-brand .cl-co-pricing .badge-sale { padding: 3px 7px; border-radius: 6px; background: #C2EBE5; font-size: 11px; font-weight: 600; color: #0E7C77; }

body.cl-brand .cl-co-pricing .pricing-card.style-2 { display: flex; flex-direction: column; height: 100%; padding: clamp(24px, 2.4vw, 36px); border: 1px solid var(--cl-line); border-radius: 28px; background: #FFFFFF; text-align: left; }
body.cl-brand .cl-co-pricing .pricing-card .top-card { align-items: flex-start !important; margin-bottom: 24px; text-align: left; }
body.cl-brand .cl-co-pricing .pricing-card .icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 14px; background: #C2EBE5; }
body.cl-brand .cl-co-pricing .pricing-card .icon i { font-size: 26px; color: #0E7C77; }
body.cl-brand .cl-co-pricing .pricing-card .name-card { display: block; margin-bottom: 8px !important; font-size: 24px !important; line-height: 1.2 !important; font-weight: 600; letter-spacing: -0.02em; color: var(--color-heading); }
body.cl-brand .cl-co-pricing .pricing-card .text { font-size: 16px !important; line-height: 1.55 !important; color: var(--color-text); }
body.cl-brand .cl-co-pricing .pricing-card .middel-card { margin-bottom: 28px; padding: 0 0 28px; border-bottom: 1px solid var(--cl-line); }
body.cl-brand .cl-co-pricing .pricing-card .price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 20px !important; text-align: left; }
body.cl-brand .cl-co-pricing .pricing-card .price .h2 { margin: 0; font-size: clamp(40px, 4vw, 56px) !important; line-height: 1 !important; font-weight: 600; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--color-heading); }
body.cl-brand .cl-co-pricing .pricing-card .price .time { position: static; padding: 0; background: none !important; font-size: 15px; font-weight: 500; color: var(--color-text) !important; }
body.cl-brand .cl-co-pricing .pricing-card .price .time::before { content: "/ "; }
body.cl-brand .cl-co-pricing .pricing-card .tf-btn { width: 100%; max-width: none; justify-content: space-between; }
body.cl-brand .cl-co-pricing .pricing-card .bottom-card { flex: 1; display: flex; flex-direction: column; padding: 0; }
body.cl-brand .cl-co-pricing .list-benefit-2 { margin: 0; padding: 0; list-style: none; }
body.cl-brand .cl-co-pricing .benefit-2-item { position: relative; margin: 0 0 14px !important; padding-left: 30px; font-size: 16px !important; line-height: 1.45 !important; font-weight: 400 !important; color: var(--color-text); }
body.cl-brand .cl-co-pricing .benefit-2-item::before { content: ""; position: absolute; top: 2px; left: 0; width: 20px; height: 20px; border-radius: 6px; background: #C2EBE5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230E7C77' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.4l3 3 6-6.6'/%3E%3C/svg%3E") center / 20px no-repeat; transform: none; overflow: visible; }
body.cl-brand .cl-co-pricing .pricing-card .pricing-eligibility { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--cl-line); font-size: 13px !important; line-height: 1.55 !important; color: var(--color-text); }
body.cl-brand .cl-co-pricing .pricing-card .pricing-eligibility strong { color: var(--color-heading); }
/* the recommended plan is the one navy card */
body.cl-brand .cl-co-pricing .pricing-card.style-2.active { border-color: #1E2C52; background: #1E2C52; box-shadow: 0 40px 70px -44px rgba(30, 44, 82, 0.9); }
body.cl-brand .cl-co-pricing .pricing-card.active .icon { background: rgba(255, 255, 255, 0.1); }
body.cl-brand .cl-co-pricing .pricing-card.active .icon i { color: #7FE0D8; }
body.cl-brand .cl-co-pricing .pricing-card.active .name-card,
body.cl-brand .cl-co-pricing .pricing-card.active .price .h2 { color: #FFFFFF; }
body.cl-brand .cl-co-pricing .pricing-card.active .text,
body.cl-brand .cl-co-pricing .pricing-card.active .benefit-2-item,
body.cl-brand .cl-co-pricing .pricing-card.active .price .time,
body.cl-brand .cl-co-pricing .pricing-card.style-2.active .pricing-eligibility { color: #C9D2E3 !important; }
body.cl-brand .cl-co-pricing .pricing-card.active .pricing-eligibility strong { color: #FFFFFF; }
body.cl-brand .cl-co-pricing .pricing-card.active .middel-card,
body.cl-brand .cl-co-pricing .pricing-card.active .pricing-eligibility { border-color: rgba(255, 255, 255, 0.16); }
body.cl-brand .cl-co-pricing .pricing-card.active .benefit-2-item::before { background-color: rgba(127, 224, 216, 0.18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237FE0D8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.4l3 3 6-6.6'/%3E%3C/svg%3E"); }
body.cl-brand .cl-co-pricing .row.rg-30 { row-gap: 24px; }

/* short quote form on the pricing page */
.cl-co-formcard--inline .creatorlayer-inline-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cl-co-formcard--inline .creatorlayer-inline-grid .full { grid-column: 1 / -1; }
.cl-co-formcard--inline .creatorlayer-inline-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 20px; }
.cl-co-formcard--inline .creatorlayer-inline-submit small { font-size: 14px; color: var(--color-text); }
body.cl-brand .cl-co-formcard--inline .creatorlayer-inline-submit small a { font-weight: 600; color: var(--color-link); text-decoration: underline; }
@media (max-width: 575px) { .cl-co-formcard--inline .creatorlayer-inline-grid { grid-template-columns: minmax(0, 1fr); } }

body.cl-brand .cl-co-formcard button, body.cl-brand .cl-co-formcard label, body.cl-brand .cl-co-formcard legend { font-family: inherit !important; }

/* pricing icons: one drawn set, navy line with a teal accent */
.cl-ic { display: block; width: 100%; height: 100%; }
.cl-ic__a { fill: #1FB6AE; stroke: none; }
.cl-ic__off { opacity: 0.28; }
body.cl-brand .cl-co-pricing .pricing-industry-switcher__icon { width: 52px; height: 52px; padding: 9px; border-radius: 14px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--cl-line); color: #1E2C52; }
body.cl-brand .cl-co-pricing .pricing-industry-switcher__btn.active .pricing-industry-switcher__icon { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); color: #FFFFFF; }
body.cl-brand .cl-co-pricing .pricing-card .icon { width: 64px; height: 64px; padding: 12px; border-radius: 18px; background: #E8F7F5; color: #1E2C52; }
body.cl-brand .cl-co-pricing .pricing-card.active .icon { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); color: #FFFFFF; }
body.cl-brand .cl-co-pricing .pricing-card .icon .cl-ic path { transition: transform 0.5s var(--cl-ease-out); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.cl-brand .cl-co-pricing .pricing-card:hover .icon .cl-ic path:nth-of-type(-n+2) { transform: translateY(-2px); }
  body.cl-brand .cl-co-pricing .pricing-card:hover .icon .cl-ic path:last-of-type { transform: translateY(1.5px); }
}

/* ============================================================ side panel (#pop-up-sidebar) */
body.cl-brand .modal.modalRight .modal-dialog { transition: transform 0.55s var(--cl-ease-out) !important; }
body.cl-brand .modal-sidebar.cl-side { display: flex; flex-direction: column; width: 100%; max-width: 520px; height: 100%; padding: 0; overflow: hidden; border-radius: 28px 0 0 28px; background: #FFFFFF; box-shadow: -40px 0 80px -40px rgba(30, 44, 82, 0.5); }
.cl-side__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--cl-line); }
.cl-side__logo img { display: block; width: 150px; height: auto !important; }
.cl-side__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--cl-line); border-radius: 12px; background: #FFFFFF; color: var(--color-heading); cursor: pointer; transition: background-color 0.3s var(--cl-ease-out), color 0.3s var(--cl-ease-out), border-color 0.3s var(--cl-ease-out); }
.cl-side__close svg { width: 20px; height: 20px; transition: transform 0.4s var(--cl-ease-out); }
.cl-side__close:hover { border-color: #1E2C52; background: #1E2C52; color: #FFFFFF; }
.cl-side__close:hover svg { transform: rotate(90deg); }
.cl-side__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 36px); }
.cl-side__intro { position: relative; margin-bottom: 32px; }
.cl-side__intro::before { content: ""; position: absolute; top: -60px; left: -80px; width: 320px; height: 260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(194, 235, 229, 0.7), rgba(194, 235, 229, 0)); pointer-events: none; }
.cl-side__intro > * { position: relative; }
body.cl-brand .cl-side__title { margin: 14px 0 12px; font-size: clamp(26px, 2.4vw, 32px) !important; line-height: 1.12 !important; font-weight: 600; letter-spacing: -0.025em; color: var(--color-heading); text-wrap: balance; }
.cl-side__title em { font-style: normal; color: var(--color-link); }
body.cl-brand .cl-side__lead { margin: 0; font-size: 16px !important; line-height: 1.6 !important; color: var(--color-text); }
.cl-side__block { margin-bottom: 32px; }
.cl-side__label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text); }
body.cl-brand .cl-side__label a { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
.cl-side__svcs { display: grid; gap: 8px; }
body.cl-brand .cl-side__svc { display: grid; grid-template-columns: 56px minmax(0, 1fr) 20px; gap: 14px; align-items: center; padding: 8px 16px 8px 8px; border: 1px solid var(--cl-line); border-radius: 18px; background: #FFFFFF; color: var(--color-heading); transition: border-color 0.3s var(--cl-ease-out), background-color 0.3s var(--cl-ease-out); }
.cl-side__thumb { display: block; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: #C2EBE5; }
.cl-side__thumb img { width: 100%; height: 100% !important; object-fit: cover; transition: transform 0.5s var(--cl-ease-out); }
.cl-side__svc-t b { display: block; font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.cl-side__svc-t small { display: block; font-size: 14px; line-height: 1.4; color: var(--color-text); }
.cl-side__svc > svg { width: 20px; height: 20px; color: var(--color-link); transition: transform 0.35s var(--cl-ease-out); }
body.cl-brand .cl-side__svc:hover { border-color: #1E2C52; background: var(--cl-surface, #F5F7F9); }
.cl-side__svc:hover .cl-side__thumb img { transform: scale(1.08); }
.cl-side__svc:hover > svg { transform: translate(2px, -2px); }
.cl-side__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
body.cl-brand .cl-side__links a { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 10px; border-radius: 12px; background: var(--cl-surface, #F5F7F9); font-size: 15px; font-weight: 600; color: var(--color-heading); transition: background-color 0.3s var(--cl-ease-out), color 0.3s var(--cl-ease-out); }
body.cl-brand .cl-side__links a:hover { background: #1E2C52; color: #FFFFFF; }
body.cl-brand .cl-side__big { display: block; width: fit-content; font-size: clamp(20px, 1.9vw, 24px); line-height: 1.4; font-weight: 600; letter-spacing: -0.015em; color: var(--color-heading); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size 0.4s var(--cl-ease-out), color 0.3s var(--cl-ease-out); }
body.cl-brand .cl-side__big:hover { color: var(--color-link); background-size: 100% 1.5px; }
body.cl-brand .cl-side__contact p { margin: 8px 0 0; font-size: 15px !important; line-height: 1.5 !important; color: var(--color-text); }
.cl-side__news { padding: 22px; border-radius: 22px; background: #E8F7F5; }
body.cl-brand .cl-side__news-t { margin: 0 0 4px; font-size: 20px !important; line-height: 1.2 !important; font-weight: 600; letter-spacing: -0.015em; color: var(--color-heading); }
body.cl-brand .cl-side__news-d { margin: 0 0 16px; font-size: 15px !important; line-height: 1.5 !important; color: var(--color-text); }
.cl-side__news fieldset { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px; border: 1px solid transparent; border-radius: 14px; background: #FFFFFF; transition: border-color 0.3s var(--cl-ease-out); }
.cl-side__news fieldset:focus-within { border-color: #1E2C52; }
body.cl-brand .cl-side__news .input-newsletter { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; font-family: inherit; font-size: 16px; color: var(--color-heading); outline: none; box-shadow: none; }
body.cl-brand .cl-side__sub { flex: none; display: inline-flex; align-items: center; justify-content: center; align-self: center; height: 44px; min-height: 0; margin: 0; padding: 0 18px !important; line-height: 1 !important; border: 0; border-radius: 10px; background: #1E2C52; font-family: inherit; font-size: 15px; font-weight: 600; color: #FFFFFF; cursor: pointer; transition: background-color 0.3s var(--cl-ease-out), transform 0.2s var(--cl-ease-out); }
.cl-side__sub:hover { background: #0E7C77; }
.cl-side__sub:active { transform: scale(0.97); }
.cl-side__foot { display: flex; align-items: center; gap: 18px; padding: 16px clamp(20px, 3vw, 36px) calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cl-line); background: #FFFFFF; }
body.cl-brand .cl-side__foot .tf-btn { flex: 1; justify-content: space-between; }
body.cl-brand .cl-side__call { flex: none; font-size: 16px; font-weight: 600; color: var(--color-heading); text-decoration: underline; text-underline-offset: 4px; }
body.cl-brand .cl-side__call:hover { color: var(--color-link); }
@media (max-width: 575px) {
  body.cl-brand .modal-sidebar.cl-side { max-width: 100%; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.cl-brand .modal.modalRight .modal-dialog { transition: none !important; }
}

/* ---- about page: detail sections */
.cl-co-factsec { position: relative; z-index: 2; margin-top: clamp(-28px, -2vw, -12px); }
.cl-co-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border: 1px solid var(--cl-line); border-radius: 28px; background: #FFFFFF; box-shadow: 0 40px 80px -60px rgba(30, 44, 82, 0.55); overflow: hidden; }
.cl-co-facts li { padding: clamp(20px, 2.4vw, 36px); }
.cl-co-facts li + li { border-left: 1px solid var(--cl-line); }
.cl-co-facts b { display: block; margin-bottom: 8px; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; color: var(--color-heading); }
.cl-co-facts b em { font-style: normal; color: var(--color-link); }
.cl-co-facts span { display: block; font-size: 16px; line-height: 1.45; color: var(--color-text); }

body.cl-brand .cl-co-inline { font-weight: 600; color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
.cl-co-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.cl-co-group { display: flex; flex-direction: column; border: 1px solid var(--cl-line); border-radius: 28px; background: #FFFFFF; overflow: hidden; }
.cl-co-group__art { aspect-ratio: 16 / 10; background: #C2EBE5; overflow: hidden; }
.cl-co-group__art img { width: 100%; height: 100% !important; object-fit: cover; transition: transform 0.7s var(--cl-ease-out); }
.cl-co-group__body { flex: 1; display: flex; flex-direction: column; padding: clamp(20px, 2.2vw, 32px); }
.cl-co-group .cl-co-num { margin-bottom: 14px; color: var(--color-link); }
body.cl-brand .cl-co-group h3 { margin-bottom: 8px; font-size: clamp(22px, 2vw, 28px) !important; line-height: 1.15 !important; font-weight: 600; letter-spacing: -0.02em; color: var(--color-heading); }
body.cl-brand .cl-co-group__body > p { margin: 0 0 20px; font-size: 16px !important; line-height: 1.55 !important; color: var(--color-text); }
.cl-co-group__body ul { margin: auto 0 0; padding: 0; list-style: none; border-top: 1px solid var(--cl-line); }
body.cl-brand .cl-co-group__body li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--cl-line); font-size: 17px; font-weight: 600; color: var(--color-heading); transition: color 0.3s var(--cl-ease-out), padding 0.3s var(--cl-ease-out); }
.cl-co-group__body li:last-child a { border-bottom: 0; }
.cl-co-group__body li svg { width: 20px; height: 20px; color: var(--color-link); transition: transform 0.35s var(--cl-ease-out); }
@media (hover: hover) {
  .cl-co-group:hover .cl-co-group__art img { transform: scale(1.04); }
  body.cl-brand .cl-co-group__body li a:hover { color: var(--color-link); }
  .cl-co-group__body li a:hover svg { transform: translate(2px, -2px); }
}

.cl-co-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 40px); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.cl-co-steps::before { content: ""; position: absolute; top: 27px; left: 28px; right: 28px; height: 2px; background: repeating-linear-gradient(90deg, rgba(30, 44, 82, 0.28) 0 6px, transparent 6px 12px); }
.cl-co-steps li { position: relative; }
.cl-co-steps__n { position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: clamp(18px, 2vw, 28px); border-radius: 18px; background: #1E2C52; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: #FFFFFF; box-shadow: 0 0 0 8px var(--cl-surface, #F5F7F9); }
.cl-co-steps li:last-child .cl-co-steps__n { background: #1FB6AE; color: #1E2C52; }
body.cl-brand .cl-co-steps h3 { margin-bottom: 8px; font-size: clamp(22px, 2vw, 28px) !important; line-height: 1.15 !important; font-weight: 600; letter-spacing: -0.02em; color: var(--color-heading); }
body.cl-brand .cl-co-steps p { margin: 0; max-width: 34ch; font-size: 16px !important; line-height: 1.6 !important; color: var(--color-text); }

.cl-co-disc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-heading); }
.cl-co-disc li { padding: clamp(22px, 2.4vw, 36px) clamp(16px, 2vw, 32px) clamp(22px, 2.4vw, 36px) 0; border-bottom: 1px solid var(--cl-line); }
.cl-co-disc li:not(:nth-child(3n+1)) { padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--cl-line); }
.cl-co-disc__n { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-link); }
body.cl-brand .cl-co-disc h3 { margin-bottom: 8px; font-size: clamp(20px, 1.8vw, 26px) !important; line-height: 1.2 !important; font-weight: 600; letter-spacing: -0.015em; color: var(--color-heading); }
body.cl-brand .cl-co-disc p { margin: 0; font-size: 16px !important; line-height: 1.6 !important; color: var(--color-text); }

.cl-co-people--bio .cl-co-person { grid-template-columns: clamp(120px, 14vw, 200px) minmax(0, 1fr); align-items: start; }
body.cl-brand .cl-co-person__bio { margin: 10px 0 16px; font-size: 16px !important; line-height: 1.6 !important; color: var(--color-text); }
.cl-co-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cl-co-tags li { padding: 6px 10px; border-radius: 8px; background: var(--cl-surface, #F5F7F9); font-size: 13px; font-weight: 600; color: var(--color-heading); }

@media (max-width: 991px) {
  .cl-co-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-co-facts li:nth-child(3) { border-left: 0; }
  .cl-co-facts li:nth-child(n+3) { border-top: 1px solid var(--cl-line); }
  .cl-co-groups { grid-template-columns: minmax(0, 1fr); }
  .cl-co-group { flex-direction: row; }
  .cl-co-group__art { flex: 0 0 38%; aspect-ratio: auto; }
  .cl-co-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .cl-co-steps::before { display: none; }
  .cl-co-disc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-co-disc li:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .cl-co-disc li:nth-child(even) { padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--cl-line); }
  .cl-co-people--bio { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
  .cl-co-factsec { margin-top: 0; }
  .cl-co-group { flex-direction: column; }
  .cl-co-group__art { flex: none; aspect-ratio: 16 / 10; }
  .cl-co-steps, .cl-co-disc { grid-template-columns: minmax(0, 1fr); }
  .cl-co-disc li:nth-child(even) { padding-left: 0; border-left: 0; }
  .cl-co-people--bio .cl-co-person { grid-template-columns: minmax(0, 1fr); }
  .cl-co-people--bio .cl-co-person__photo { max-width: 140px; }
}

/* ============================================================ portfolio page */
.cl-pf-frame { display: block; border: 1px solid var(--cl-line); border-radius: 18px; overflow: hidden; background: #FFFFFF; box-shadow: 0 40px 80px -48px rgba(30, 44, 82, 0.6); }
.cl-pf-frame__bar { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--cl-line); background: var(--cl-surface, #F5F7F9); }
.cl-pf-frame__bar i { width: 9px; height: 9px; border-radius: 50%; background: #C9D2E3; }
.cl-pf-frame__bar b { margin-left: 10px; padding: 4px 12px; border-radius: 8px; background: #FFFFFF; font-size: 12px; font-weight: 500; color: var(--color-text); }
.cl-pf-frame img { display: block; width: 100%; height: auto !important; }

body.cl-brand .cl-pf-hero .cl-page-hero__grid--split { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(24px, 4vw, 72px); }
body.cl-brand .cl-pf-hero .cl-page-hero__title { max-width: 11ch; font-size: clamp(40px, 5.6vw, 84px) !important; }
.cl-pf-for { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: clamp(24px, 2.6vw, 36px) 0 0; padding-top: 20px; border-top: 1px solid var(--cl-line); font-size: 14px !important; color: var(--color-text); }
.cl-pf-for span { margin-right: 4px; }
.cl-pf-for b { padding: 6px 12px; border: 1px solid var(--cl-line); border-radius: 10px; background: #FFFFFF; font-size: 14px; font-weight: 600; color: var(--color-heading); }
/* hero mosaic: four real pieces on one tidy grid, nothing overlapping */
.cl-pf-mosaic { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(10px, 1.1vw, 16px); width: 100%; max-width: 700px; margin-inline: auto; padding: clamp(10px, 1.1vw, 16px); border-radius: clamp(24px, 2.6vw, 40px); background: #DDF4F0; }
.cl-pf-mosaic__col { display: flex; flex-direction: column; gap: clamp(10px, 1.1vw, 16px); min-width: 0; }
.cl-pf-m { position: relative; border-radius: clamp(14px, 1.6vw, 24px); overflow: hidden; background: #FFFFFF; box-shadow: 0 24px 40px -30px rgba(30, 44, 82, 0.55); }
.cl-pf-m img { display: block; width: 100%; height: auto !important; }
.cl-pf-m--site .cl-pf-frame__bar { height: 34px; }
.cl-pf-frame__bar em { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-style: normal; font-weight: 600; color: #0E7C77; }
.cl-pf-frame__bar em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1FB6AE; box-shadow: 0 0 0 3px rgba(31, 182, 174, 0.22); }
.cl-pf-m--video { flex: 1; min-height: 0; background: #1E2C52; }
.cl-pf-m--video img { position: absolute; inset: 0; height: 100% !important; object-fit: cover; }
.cl-pf-m--video::before { content: ""; display: block; padding-top: 50%; }
.cl-pf-m--video .cl-pf-play { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.cl-pf-m--video .cl-pf-play svg { width: 22px; height: 22px; }
.cl-pf-m--count { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 110px; padding: clamp(14px, 1.5vw, 22px); background: #1E2C52; color: #FFFFFF; }
.cl-pf-m--count b { margin-bottom: auto; font-size: clamp(36px, 4vw, 56px); line-height: 1; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: #7FE0D8; }
.cl-pf-m--count span { font-size: clamp(14px, 1.2vw, 17px); font-weight: 600; line-height: 1.25; }
.cl-pf-m--count small { margin-top: 2px; font-size: 13px; line-height: 1.3; color: #C9D2E3; }
.cl-pf-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: #1FB6AE; color: #1E2C52; transition: transform 0.35s var(--cl-ease-out), opacity 0.3s var(--cl-ease-out); }
.cl-pf-play svg { width: 24px; height: 24px; fill: currentColor; }
.cl-pf-play__off { display: none; }


.cl-pf-nav { position: sticky; top: 96px; z-index: 20; margin-top: clamp(28px, 3vw, 44px); pointer-events: none; }
.cl-pf-nav ul { display: inline-flex; gap: 4px; margin: 0; padding: 5px; list-style: none; border: 1px solid var(--cl-line); border-radius: 16px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 20px 40px -28px rgba(30, 44, 82, 0.5); pointer-events: auto; max-width: 100%; overflow-x: auto; }
body.cl-brand .cl-pf-nav a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 11px; font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--color-heading); transition: background-color 0.3s var(--cl-ease-out), color 0.3s var(--cl-ease-out); }
.cl-pf-nav a span { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 7px; background: #E8F7F5; font-size: 12px; font-variant-numeric: tabular-nums; color: #0E7C77; }
body.cl-brand .cl-pf-nav a:hover { background: var(--cl-surface, #F5F7F9); }
body.cl-brand .cl-pf-nav a.is-current { background: #1E2C52; color: #FFFFFF; }
.cl-pf-nav a.is-current span { background: #1FB6AE; color: #1E2C52; }
.cl-pf-sec { scroll-margin-top: 150px; }

.cl-pf-sites { display: grid; gap: clamp(40px, 6vw, 96px); margin: 0; padding: 0; list-style: none; }
.cl-pf-site { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.cl-pf-site:nth-child(even) { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
.cl-pf-site:nth-child(even) .cl-pf-site__shot { order: 2; }
.cl-pf-site__shot { display: block; padding: clamp(14px, 2vw, 32px); border-radius: 32px; background: #E8F7F5; }
.cl-pf-site__shot .cl-pf-frame { transition: transform 0.6s var(--cl-ease-out); }
@media (hover: hover) { .cl-pf-site__shot:hover .cl-pf-frame { transform: translateY(-6px); } }
.cl-pf-site__label { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 13px !important; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text); }
.cl-pf-site__label span { display: grid; place-items: center; min-width: 30px; height: 26px; border-radius: 8px; background: #1E2C52; font-size: 12px; letter-spacing: 0; color: #FFFFFF; }
body.cl-brand .cl-pf-site h3 { margin-bottom: 14px; font-size: clamp(26px, 2.8vw, 40px) !important; line-height: 1.1 !important; font-weight: 600; letter-spacing: -0.025em; color: var(--color-heading); text-wrap: balance; }
body.cl-brand .cl-pf-site__sum { margin: 0 0 22px; font-size: 17px !important; line-height: 1.6 !important; color: var(--color-text); }
.cl-pf-site__facts { margin: 0 0 26px; border-top: 1px solid var(--cl-line); }
.cl-pf-site__facts div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cl-line); }
.cl-pf-site__facts dt { font-size: 14px; font-weight: 500; color: var(--color-text); }
.cl-pf-site__facts dd { margin: 0; font-size: 16px; font-weight: 600; color: var(--color-heading); }

.cl-pf-cap { padding-top: 14px; }
.cl-pf-cap__kind { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; color: var(--color-text); }
.cl-pf-cap__kind b { font-weight: 600; color: var(--color-link); }
.cl-pf-cap__kind span::before { content: "/"; margin-right: 8px; opacity: 0.5; }
body.cl-brand .cl-pf-cap h3 { margin-bottom: 4px; font-size: 20px !important; line-height: 1.25 !important; font-weight: 600; letter-spacing: -0.015em; color: var(--color-heading); }
body.cl-brand .cl-pf-cap p { margin: 0; font-size: 15px !important; line-height: 1.5 !important; color: var(--color-text); }

/* Work rows: every piece keeps its own shape (--r = width / height) and each
   row shares one height, so portrait, square and wide pieces sit together
   however many there are. The filler takes the spare room on the last row. */
.cl-pf-rows { --rowh: clamp(230px, 25vw, 380px); display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(28px, 3vw, 44px) clamp(14px, 1.8vw, 26px); margin: 0; padding: 0; list-style: none; }
.cl-pf-rows--video { --rowh: clamp(210px, 21vw, 320px); }
.cl-pf-item { --r: 1; --rr: clamp(0.5625, var(--r), 2.4); flex: calc(var(--rr) * 100) 1 calc(var(--rowh) * var(--rr)); min-width: 0; max-width: calc(var(--rowh) * var(--rr) * 1.45); }
.cl-pf-fill { flex: 100000 1 0; min-width: 0; height: 0; }
.cl-pf-item__media { position: relative; display: block; width: 100%; aspect-ratio: var(--rr); padding: 0; border: 0; border-radius: clamp(16px, 1.6vw, 22px); overflow: hidden; background: #1E2C52; box-shadow: 0 30px 56px -40px rgba(30, 44, 82, 0.7); }
.cl-pf-item__media img, .cl-pf-item__media video { display: block; width: 100%; height: 100% !important; object-fit: cover; transition: transform 0.7s var(--cl-ease-out); }
.cl-pf-piece__media { cursor: zoom-in; }
.cl-pf-vid__media { cursor: pointer; }
.cl-pf-piece__zoom { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #FFFFFF; color: #1E2C52; opacity: 0; transform: scale(0.9); transition: opacity 0.3s var(--cl-ease-out), transform 0.3s var(--cl-ease-out); }
.cl-pf-piece__zoom svg { width: 20px; height: 20px; }
@media (hover: hover) { .cl-pf-piece__media:hover img { transform: scale(1.03); } .cl-pf-piece__media:hover .cl-pf-piece__zoom { opacity: 1; transform: none; } }
.cl-pf-piece__media:focus-visible .cl-pf-piece__zoom { opacity: 1; transform: none; }
@media (hover: none) { .cl-pf-piece__zoom { opacity: 1; transform: none; } }
.cl-pf-vid__time { position: absolute; right: 12px; bottom: 12px; padding: 4px 9px; border-radius: 8px; background: rgba(30, 44, 82, 0.82); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: #FFFFFF; }
.cl-pf-vid__media.is-playing .cl-pf-play { opacity: 0; transform: scale(0.8); }
.cl-pf-vid__media.is-playing:hover .cl-pf-play, .cl-pf-vid__media.is-playing:focus-visible .cl-pf-play { opacity: 1; transform: none; }
.cl-pf-vid__media.is-playing .cl-pf-play__on { display: none; }
.cl-pf-vid__media.is-playing .cl-pf-play__off { display: block; }
.cl-pf-vid__media.is-playing .cl-pf-vid__time { opacity: 0; }
@media (hover: hover) { .cl-pf-vid__media:hover .cl-pf-play { transform: scale(1.08); } }
/* narrow (portrait) pieces: smaller caption so it never outgrows the card */
.cl-pf-cap { container-type: inline-size; }
@container (max-width: 230px) {
  body.cl-brand .cl-pf-cap h3 { font-size: 16px !important; }
  body.cl-brand .cl-pf-cap p { display: none; }
  .cl-pf-cap__kind span { display: none; }
}
.cl-pf-cap h3, .cl-pf-cap p { overflow-wrap: anywhere; }
body.cl-brand .cl-pf-cap p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-pf-more.cl-pf-fill { display: flex; flex: 100000 1 240px; height: auto; min-height: calc(var(--rowh) * 0.62); }
body.cl-brand .cl-pf-more a { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: inherit; padding: clamp(20px, 2.2vw, 32px); border-radius: 22px; background: #1E2C52; color: #FFFFFF; transition: background-color 0.3s var(--cl-ease-out); }
.cl-pf-more__k { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #7FE0D8; }
.cl-pf-more b { max-width: 16ch; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
.cl-pf-more svg { position: absolute; right: 20px; top: 20px; width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: #1FB6AE; color: #1E2C52; transition: transform 0.35s var(--cl-ease-out); }
body.cl-brand .cl-pf-more a:hover { background: #26386A; }
.cl-pf-more a:hover svg { transform: translate(3px, -3px); }

.cl-pf-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin: 0; padding: 0; list-style: none; }
body.cl-brand .cl-pf-next a { display: grid; grid-template-columns: 72px minmax(0, 1fr) 20px; gap: 16px; align-items: center; padding: 12px 20px 12px 12px; border: 1px solid var(--cl-line); border-radius: 22px; background: #FFFFFF; color: var(--color-heading); transition: border-color 0.3s var(--cl-ease-out); }
.cl-pf-next__art { display: block; width: 72px; height: 72px; border-radius: 14px; overflow: hidden; background: #C2EBE5; }
.cl-pf-next__art img { width: 100%; height: 100% !important; object-fit: cover; }
.cl-pf-next__t b { display: block; font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }
.cl-pf-next__t small { display: block; margin-top: 2px; font-size: 15px; line-height: 1.4; color: var(--color-text); }
.cl-pf-next a > svg { width: 20px; height: 20px; color: var(--color-link); transition: transform 0.35s var(--cl-ease-out); }
body.cl-brand .cl-pf-next a:hover { border-color: #1E2C52; }
.cl-pf-next a:hover > svg { transform: translate(2px, -2px); }

.cl-pf-zoom { max-width: min(92vw, 1100px); max-height: 92dvh; padding: 0; border: 0; border-radius: 20px; overflow: visible; background: transparent; }
.cl-pf-zoom::backdrop { background: rgba(30, 44, 82, 0.86); }
.cl-pf-zoom img { display: block; width: auto; max-width: min(92vw, 1100px); height: auto !important; max-height: 92dvh; border-radius: 20px; }
.cl-pf-zoom__close { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: #FFFFFF; color: #1E2C52; cursor: pointer; }
.cl-pf-zoom__close svg { width: 20px; height: 20px; }

@media (max-width: 991px) {
  body.cl-brand .cl-pf-hero .cl-page-hero__grid--split { grid-template-columns: minmax(0, 1fr); }
  .cl-pf-mosaic { max-width: 600px; margin-top: 28px; }
  .cl-pf-nav { top: 76px; }
  .cl-pf-site, .cl-pf-site:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .cl-pf-site:nth-child(even) .cl-pf-site__shot { order: 0; }
  .cl-pf-next { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
  body.cl-brand .cl-pf-nav a { padding: 8px 10px; font-size: 14px; }
  .cl-pf-nav a span { display: none; }
  .cl-pf-nav ul { display: flex; justify-content: space-between; }
  .cl-pf-site__facts div { grid-template-columns: 90px minmax(0, 1fr); }
}
@media (max-width: 575px) {
  .cl-pf-m--count small { display: none; }
  .cl-pf-m--count { min-height: 84px; }
}
}
@media (max-width: 575px) {
  .cl-pf-rows, .cl-pf-rows--video { --rowh: 210px; justify-content: center; }
  .cl-pf-item { max-width: min(100%, calc(var(--rowh) * var(--rr) * 1.45)); }
  .cl-pf-rows > .cl-pf-fill:not(.cl-pf-more) { display: none; }
  .cl-pf-more.cl-pf-fill { flex-basis: 100%; }
}

/* ============================================================ sitewide polish */
::selection { background: #1FB6AE; color: #1E2C52; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
:where(section[id], div[id], li[id], article[id]) { scroll-margin-top: 120px; }
body.cl-brand :where(a, button, summary, input, select, textarea):focus-visible { outline: 2px solid #1FB6AE; outline-offset: 3px; border-radius: 6px; }
.cl-progress { position: fixed; inset: 0 0 auto 0; z-index: 1200; height: 3px; background: #1FB6AE; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
/* cards lift on hover; `translate` is used so it never fights the reveal transforms */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cl-seo-inc, .cl-seo-kpi, .cl-co-channel, .cl-co-person, .cl-co-group, .cl-co-quote, .cl-pf-next li, .cl-side__svc,
  body.cl-brand .cl-co-pricing .pricing-card, body.cl-brand .blog-card.style-list-2, body.cl-brand .creatorlayer-legal-card {
    transition: translate 0.45s var(--cl-ease-out), box-shadow 0.45s var(--cl-ease-out), border-color 0.3s var(--cl-ease-out);
  }
  .cl-seo-inc:hover, .cl-co-channel:hover, .cl-co-person:hover, .cl-co-group:hover, .cl-pf-next li:hover,
  body.cl-brand .cl-co-pricing .pricing-card:hover, body.cl-brand .blog-card.style-list-2:hover, body.cl-brand .creatorlayer-legal-card:hover {
    translate: 0 -5px; box-shadow: 0 34px 60px -44px rgba(30, 44, 82, 0.55);
  }
  .tf-btn .icon-btn i { transition: translate 0.35s var(--cl-ease-out); }
  .tf-btn:hover .icon-btn i { translate: 2px -2px; }
}
.tf-btn:active { scale: 0.98; }
/* steps: the dotted line draws as the row scrolls in (--p is driven by cl-motion.js) */
.cl-co-steps::before { transform: scaleX(var(--p, 1)); transform-origin: 0 50%; }
/* plain hero for text pages (no artwork) */
.cl-page-hero--plain .cl-page-hero__grid { grid-template-columns: minmax(0, 1fr); }
body.cl-brand .cl-page-hero--plain .cl-page-hero__title { max-width: 18ch; }

/* ---- legal pages */
body.cl-brand .creatorlayer-legal-hero { padding: 0 0 clamp(24px, 3vw, 40px); }
body.cl-brand .creatorlayer-legal-meta { gap: 8px !important; margin-bottom: 28px !important; }
body.cl-brand .legal-meta-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--cl-line); border-radius: 10px; background: #FFFFFF; font-size: 14px; font-weight: 500; color: var(--color-heading); box-shadow: none; }
body.cl-brand .legal-meta-pill i { color: var(--color-link); }
body.cl-brand .legal-meta-pill a { font-weight: 600; color: var(--color-heading); }
body.cl-brand .creatorlayer-legal-card { height: 100%; padding: clamp(20px, 2.2vw, 32px); border: 1px solid var(--cl-line); border-radius: 24px; background: #FFFFFF; box-shadow: none; }
body.cl-brand .creatorlayer-legal-card .icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 14px; background: #E8F7F5; color: #0E7C77; font-size: 24px; }
body.cl-brand .creatorlayer-legal-card h2 { font-size: 22px !important; line-height: 1.2 !important; font-weight: 600; letter-spacing: -0.015em; color: var(--color-heading); }
body.cl-brand .creatorlayer-legal-card p { font-size: 16px !important; line-height: 1.6 !important; color: var(--color-text); }
body.cl-brand .creatorlayer-legal-content { padding: clamp(32px, 4vw, 64px) 0 clamp(64px, 8vw, 120px); background: var(--cl-surface, #F5F7F9); }
body.cl-brand .creatorlayer-legal-toc { position: sticky; top: 120px; padding: 22px; border: 1px solid var(--cl-line); border-radius: 22px; background: #FFFFFF; box-shadow: none; }
body.cl-brand .creatorlayer-legal-toc .toc-title { margin-bottom: 12px; font-size: 12px !important; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text); }
body.cl-brand .creatorlayer-legal-toc .toc-list { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
body.cl-brand .creatorlayer-legal-toc .toc-list li { counter-increment: toc; margin: 0; }
body.cl-brand .creatorlayer-legal-toc .toc-list a { display: flex; gap: 12px; padding: 8px 10px; border-radius: 10px; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--color-heading); transition: background-color 0.3s var(--cl-ease-out), color 0.3s var(--cl-ease-out); }
body.cl-brand .creatorlayer-legal-toc .toc-list a::before { content: counter(toc, decimal-leading-zero); font-size: 12px; font-weight: 600; line-height: 1.7; font-variant-numeric: tabular-nums; color: var(--color-link); }
body.cl-brand .creatorlayer-legal-toc .toc-list a:hover { background: #E8F7F5; color: #0E7C77; }
body.cl-brand .creatorlayer-legal-body { padding: clamp(22px, 3.4vw, 56px); border: 1px solid var(--cl-line); border-radius: 28px; background: #FFFFFF; }
body.cl-brand .legal-section { padding: 0 0 clamp(28px, 3vw, 44px); margin: 0 0 clamp(28px, 3vw, 44px); border-bottom: 1px solid var(--cl-line); background: none; }
body.cl-brand .legal-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
body.cl-brand .legal-section-num { display: inline-grid; place-items: center; min-width: 34px; height: 28px; margin-bottom: 12px; padding: 0 8px; border-radius: 8px; background: #1E2C52; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: #FFFFFF; }
body.cl-brand .legal-section h2 { margin-bottom: 14px; font-size: clamp(24px, 2.4vw, 34px) !important; line-height: 1.15 !important; font-weight: 600; letter-spacing: -0.02em; color: var(--color-heading); }
body.cl-brand .legal-section h3 { margin: 22px 0 10px; font-size: 20px !important; line-height: 1.25 !important; font-weight: 600; color: var(--color-heading); }
body.cl-brand .creatorlayer-legal-body .legal-section p, body.cl-brand .creatorlayer-legal-body .legal-list li { max-width: 70ch; font-size: 17px !important; line-height: 1.7 !important; color: var(--color-text); }
body.cl-brand .legal-section p + p { margin-top: 12px; }
body.cl-brand .legal-list { margin: 12px 0; padding: 0; list-style: none; }
body.cl-brand .legal-list li { position: relative; margin-bottom: 8px; padding-left: 22px; }
body.cl-brand .legal-list li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 8px; height: 2px; border-radius: 2px; background: #1FB6AE; }
body.cl-brand .legal-section a { font-weight: 600; color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
body.cl-brand .legal-section strong { font-weight: 600; color: var(--color-heading); }
@media (max-width: 991px) { body.cl-brand .creatorlayer-legal-toc { position: static; } }

/* ---- 404 */
body.cl-brand .wg-404 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 72px); align-items: center; min-height: min(78dvh, 760px); padding: clamp(130px, 14vw, 190px) 0 clamp(56px, 7vw, 110px); }
body.cl-brand .wg-404 .img-bg { display: none; }
body.cl-brand .wg-404 .sub-title { display: inline-flex; gap: 8px; margin-bottom: 18px !important; padding: 8px 14px; border-radius: 10px; background: #E8F7F5; font-size: 14px !important; font-weight: 600; color: #0E7C77; }
body.cl-brand .wg-404 .sub-title span { color: var(--color-heading); }
body.cl-brand .wg-404 h1 { max-width: 14ch; margin-bottom: 20px !important; font-size: clamp(38px, 5.4vw, 76px) !important; line-height: 1.03 !important; font-weight: 600; letter-spacing: -0.035em; color: var(--color-heading); text-wrap: balance; }
body.cl-brand .wg-404 .desc { max-width: 48ch; margin-bottom: 28px !important; font-size: 18px !important; line-height: 1.6 !important; font-weight: 400 !important; color: var(--color-text); }
body.cl-brand .wg-404 .tf-btn { background: #1FB6AE; color: #1E2C52; }
body.cl-brand .wg-404 .right .image { padding: 8%; border-radius: 40px; background: #DDF4F0; }
body.cl-brand .wg-404 .right img { display: block; width: 100%; height: auto !important; }
@media (max-width: 991px) { body.cl-brand .wg-404 { grid-template-columns: minmax(0, 1fr); } body.cl-brand .wg-404 .right { max-width: 420px; } }

/* ---- blog listing + article */
body.cl-brand .blog-card.style-list-2 { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); gap: 0; margin-bottom: 20px !important; border: 1px solid var(--cl-line); border-radius: 26px; overflow: hidden; background: #FFFFFF; box-shadow: none; }
body.cl-brand .blog-card.style-list-2 .image { display: block; min-height: 100%; border-radius: 0; overflow: hidden; background: #C2EBE5; }
body.cl-brand .blog-card.style-list-2 .image img { width: 100%; height: 100% !important; object-fit: cover; transition: transform 0.7s var(--cl-ease-out); }
body.cl-brand .blog-card.style-list-2:hover .image img { transform: scale(1.05); }
body.cl-brand .blog-card.style-list-2 .card-content { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(20px, 2.4vw, 36px); }
body.cl-brand .blog-card .meta { gap: 10px !important; margin-bottom: 14px; }
body.cl-brand .blog-card .meta .tag { padding: 5px 10px; border-radius: 8px; background: #E8F7F5; font-size: 13px; font-weight: 600; color: #0E7C77; }
body.cl-brand .blog-card .meta .date { font-size: 13px; font-weight: 500; color: var(--color-text); }
body.cl-brand .blog-card .name-card { margin-bottom: 10px; font-size: clamp(20px, 1.9vw, 26px) !important; line-height: 1.2 !important; font-weight: 600; letter-spacing: -0.02em; color: var(--color-heading); text-wrap: balance; }
body.cl-brand .blog-card .name-card:hover { color: var(--color-link); }
body.cl-brand .blog-card .desc { margin-bottom: 18px; font-size: 16px !important; line-height: 1.6 !important; color: var(--color-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.cl-brand .blog-card .tf-btn.style-2 { margin-top: auto; padding: 0; background: none; font-size: 15px !important; font-weight: 600; color: var(--color-heading); text-decoration: underline; text-underline-offset: 4px; }
body.cl-brand .blog-card .tf-btn.style-2:hover { color: var(--color-link); }
body.cl-brand .tf-sidebar .sidebar-content { margin-bottom: 20px !important; padding: 22px; border: 1px solid var(--cl-line); border-radius: 22px; background: #FFFFFF; }
body.cl-brand .tf-sidebar .sidebar-content > .title { margin-bottom: 14px !important; font-size: 12px !important; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text); }
body.cl-brand .form-search-siderbar fieldset { display: flex; gap: 6px; padding: 6px; border: 1px solid var(--cl-line); border-radius: 14px; background: #FFFFFF; }
body.cl-brand .form-search-siderbar input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 0; background: none; font-family: inherit; font-size: 16px; }
body.cl-brand .form-search-siderbar .tf-btn-search { position: static; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: #1E2C52; color: #FFFFFF; transform: none; }
body.cl-brand .item-tags { padding: 8px 12px; border: 1px solid var(--cl-line); border-radius: 10px; background: #FFFFFF; font-size: 14px; font-weight: 600; color: var(--color-heading); }
body.cl-brand .item-tags:hover, body.cl-brand .item-tags.active { border-color: #1E2C52; background: #1E2C52; color: #FFFFFF; }
body.cl-brand .list-categories-item a { color: var(--color-heading); font-weight: 500; }
body.cl-brand .list-categories-item a:hover { color: var(--color-link); }
body.cl-brand .wg-cta { border-radius: 22px; overflow: hidden; }
body.cl-brand .page-title.page-detail { padding: clamp(140px, 14vw, 200px) 0 clamp(40px, 5vw, 72px); background: radial-gradient(56% 64% at 50% 40%, rgba(31, 182, 174, 0.12), rgba(31, 182, 174, 0) 70%), #FFFFFF; }
body.cl-brand .page-title.page-detail .img-sharp { display: none; }
body.cl-brand .page-title.page-detail .breadkcum, body.cl-brand .page-title.page-detail .breadkcum a { font-size: 15px; font-weight: 500; color: var(--color-text); }
body.cl-brand .page-title.page-detail .breadkcum-active { color: var(--color-link); }
body.cl-brand .page-title.page-detail h1 { max-width: 22ch; margin: 16px auto 20px; font-size: clamp(32px, 4.4vw, 60px) !important; line-height: 1.08 !important; font-weight: 600; letter-spacing: -0.03em; color: var(--color-heading); text-wrap: balance; }
body.cl-brand .page-title.page-detail .post-meta { gap: 8px; }
body.cl-brand .page-title.page-detail .meta-item { display: inline-block; padding: 6px 12px; border: 1px solid var(--cl-line); border-radius: 10px; background: #FFFFFF; font-size: 14px; font-weight: 500; color: var(--color-text); }
body.cl-brand .page-title.page-detail .meta-item .color-white { color: var(--color-heading) !important; font-weight: 600; }
body.cl-brand .image-blog-detail { border-radius: 26px; overflow: hidden; }
body.cl-brand .image-blog-detail img { width: 100%; height: auto !important; }
body.cl-brand .cl-post-body { font-size: 18px; line-height: 1.75; color: var(--color-text); }
body.cl-brand .cl-post-body p { max-width: 70ch; margin: 0 0 1.1em; font-size: 18px !important; line-height: 1.75 !important; color: var(--color-text); }
body.cl-brand .cl-post-body h2 { margin: 1.6em 0 0.5em; font-size: clamp(26px, 2.6vw, 36px) !important; line-height: 1.15 !important; font-weight: 600; letter-spacing: -0.02em; color: var(--color-heading); }
body.cl-brand .cl-post-body h3 { margin: 1.4em 0 0.4em; font-size: clamp(21px, 2vw, 26px) !important; line-height: 1.2 !important; font-weight: 600; color: var(--color-heading); }
body.cl-brand .cl-post-body a { font-weight: 600; color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
body.cl-brand .cl-post-body ul, body.cl-brand .cl-post-body ol { max-width: 70ch; margin: 0 0 1.2em; padding-left: 1.3em; }
body.cl-brand .cl-post-body li { margin-bottom: 0.4em; font-size: 18px; line-height: 1.7; }
body.cl-brand .cl-post-body li::marker { color: #1FB6AE; font-weight: 600; }
body.cl-brand .cl-post-body blockquote { margin: 1.4em 0; padding: 20px 24px; border-radius: 18px; background: #E8F7F5; font-size: 20px; line-height: 1.5; font-weight: 500; color: var(--color-heading); }
body.cl-brand .cl-post-body img { max-width: 100%; height: auto !important; border-radius: 18px; }
body.cl-brand .cl-post-body table { width: 100%; margin: 1.2em 0; border-collapse: collapse; font-size: 16px; }
body.cl-brand .cl-post-body th, body.cl-brand .cl-post-body td { padding: 12px 14px; border-bottom: 1px solid var(--cl-line); text-align: left; }
body.cl-brand .cl-post-body th { font-weight: 600; color: var(--color-heading); background: var(--cl-surface, #F5F7F9); }
@media (max-width: 767px) { body.cl-brand .blog-card.style-list-2 { grid-template-columns: minmax(0, 1fr); } body.cl-brand .blog-card.style-list-2 .image { aspect-ratio: 16 / 10; } }
body.cl-brand .blog-card.style-list-2 .card-content { width: auto; max-width: none; min-width: 0; }
body.cl-brand .blog-card.style-list-2 .image { max-width: none; width: 100%; }
body.cl-brand .blog-card .meta { flex-wrap: wrap; }

/* ============================================================ GoHighLevel embeds */
.cl-ghl { position: relative; min-height: var(--h, 600px); border-radius: 16px; overflow: hidden; background: linear-gradient(100deg, #F5F7F9 30%, #FFFFFF 50%, #F5F7F9 70%) 0 0 / 300% 100%; }
@media (prefers-reduced-motion: no-preference) { .cl-ghl:not(.is-ready) { animation: cl-ghl-wait 1.6s linear infinite; } }
@keyframes cl-ghl-wait { to { background-position: -150% 0; } }
.cl-ghl.is-ready { background: #FFFFFF; }
.cl-ghl iframe { display: block; width: 100%; min-height: var(--h, 600px); border: 0; }
body.cl-brand .cl-ghl__alt { margin: 14px 0 0; font-size: 14px !important; line-height: 1.5 !important; color: var(--color-text); }
body.cl-brand .cl-ghl__alt a { font-weight: 600; color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
.cl-co-formcard:has(.cl-ghl) { padding: clamp(12px, 1.6vw, 24px); }
.cl-co-contact--cal { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); }
.cl-co-facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cl-co-next { display: grid; gap: 0; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: nx; border-top: 1px solid var(--cl-line); }
.cl-co-next li { counter-increment: nx; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 14px; padding: 16px 0; border-bottom: 1px solid var(--cl-line); }
.cl-co-next li::before { content: counter(nx); grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #1E2C52; font-size: 14px; font-weight: 600; color: #FFFFFF; }
.cl-co-next b { font-size: 17px; font-weight: 600; color: var(--color-heading); }
.cl-co-next span { font-size: 15px; line-height: 1.5; color: var(--color-text); }
.cl-ghl-dialog { width: min(92vw, 520px); max-height: 90dvh; padding: clamp(18px, 2.4vw, 28px); padding-top: 60px; border: 0; border-radius: 24px; background: #FFFFFF; overflow: auto; box-shadow: 0 60px 120px -40px rgba(30, 44, 82, 0.7); }
.cl-ghl-dialog::backdrop { background: rgba(30, 44, 82, 0.72); }
.cl-ghl-dialog__close { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--cl-line); border-radius: 12px; background: #FFFFFF; color: #1E2C52; cursor: pointer; }
.cl-ghl-dialog__close svg { width: 18px; height: 18px; }
.cl-footer__sub { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border: 0; border-radius: 14px; background: #1FB6AE; font-family: inherit; font-size: 16px; font-weight: 600; color: #1E2C52; cursor: pointer; transition: background-color 0.3s var(--cl-ease-out), scale 0.2s var(--cl-ease-out); }
.cl-footer__sub:hover { background: #2AC7BF; }
.cl-footer__sub:active { scale: 0.98; }
body.cl-brand .cl-side__sub--wide { width: 100%; height: 48px; border-radius: 12px; }
@media (max-width: 991px) { .cl-co-contact--cal { grid-template-columns: minmax(0, 1fr); } .cl-co-facts--3 { grid-template-columns: minmax(0, 1fr); } .cl-co-facts--3 li + li { border-left: 0; border-top: 1px solid var(--cl-line); } }
.cl-post-comment { margin-top: clamp(32px, 4vw, 56px); padding: clamp(20px, 2.6vw, 36px); border: 1px solid var(--cl-line); border-radius: 26px; background: #FFFFFF; }
body.cl-brand .cl-post-comment h2 { margin-bottom: 6px; font-size: clamp(24px, 2.4vw, 32px) !important; line-height: 1.15 !important; font-weight: 600; letter-spacing: -0.02em; color: var(--color-heading); }
body.cl-brand .cl-post-comment > p { margin: 0 0 18px; font-size: 16px !important; line-height: 1.5 !important; color: var(--color-text); }

.cl-ghl-dialog, .cl-pf-zoom { position: fixed; inset: 0; margin: auto; }

/* ============================================================ "Have a question?" helper */
.cl-chat { position: fixed; right: clamp(14px, 2vw, 24px); bottom: clamp(14px, 2vw, 24px); z-index: 1100; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; font-family: "Outfit", sans-serif; pointer-events: none; }
.cl-chat > * { pointer-events: auto; }
.cl-chat__fab { position: relative; display: grid; place-items: center; width: 62px; height: 62px; padding: 0; border: 0; border-radius: 50%; background: #1FB6AE; color: #1E2C52; cursor: pointer; box-shadow: 0 22px 40px -18px rgba(30, 44, 82, 0.75); transition: background-color 0.3s var(--cl-ease-out), scale 0.25s var(--cl-ease-out); }
.cl-chat__fab:hover { background: #2AC7BF; scale: 1.05; }
.cl-chat__fab:active { scale: 0.96; }
.cl-chat__fab span { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity 0.25s var(--cl-ease-out), rotate 0.35s var(--cl-ease-out), scale 0.35s var(--cl-ease-out); }
.cl-chat__fab svg { width: 28px; height: 28px; }
.cl-chat__fab-close { opacity: 0; rotate: -90deg; scale: 0.6; }
.cl-chat.is-open .cl-chat__fab { background: #1E2C52; color: #FFFFFF; }
.cl-chat.is-open .cl-chat__fab-open { opacity: 0; rotate: 90deg; scale: 0.6; }
.cl-chat.is-open .cl-chat__fab-close { opacity: 1; rotate: 0deg; scale: 1; }
.cl-chat__tease { position: absolute; right: 76px; bottom: 11px; padding: 11px 18px; border: 0; border-radius: 14px; background: #FFFFFF; font-family: inherit; font-size: 16px; font-weight: 500; white-space: nowrap; color: #1E2C52; cursor: pointer; box-shadow: 0 18px 36px -18px rgba(30, 44, 82, 0.6), 0 0 0 1px rgba(30, 44, 82, 0.08); animation: cl-chat-in 0.5s var(--cl-ease-out) both; }
@keyframes cl-chat-in { from { opacity: 0; translate: 12px 0; } }
.cl-chat__panel { display: flex; flex-direction: column; width: min(392px, calc(100vw - 28px)); height: min(640px, calc(100dvh - 120px)); border-radius: 24px; overflow: hidden; background: #FFFFFF; box-shadow: 0 50px 100px -40px rgba(30, 44, 82, 0.75), 0 0 0 1px rgba(30, 44, 82, 0.08); opacity: 0; translate: 0 16px; scale: 0.96; transform-origin: 100% 100%; transition: opacity 0.26s var(--cl-ease-out), translate 0.26s var(--cl-ease-out), scale 0.26s var(--cl-ease-out); }
.cl-chat__panel[hidden] { display: none; }
.cl-chat.is-open .cl-chat__panel { opacity: 1; translate: 0 0; scale: 1; }
.cl-chat__view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.cl-chat__view[hidden] { display: none; }
.cl-chat__head { position: relative; padding: 24px 24px 76px; background: radial-gradient(90% 120% at 100% 0%, rgba(31, 182, 174, 0.55), rgba(31, 182, 174, 0) 60%), #1E2C52; color: #FFFFFF; }
.cl-chat__faces { display: flex; margin-bottom: 44px; }
.cl-chat__faces img { width: 44px; height: 44px !important; border: 2px solid #FFFFFF; border-radius: 50%; object-fit: cover; background: #C2EBE5; }
.cl-chat__faces img + img { margin-left: -12px; }
.cl-chat__faces--sm { margin: 0; }
.cl-chat__faces--sm img { width: 32px; height: 32px !important; }
body.cl-brand .cl-chat__title { margin: 0 0 6px; font-size: 28px !important; line-height: 1.1 !important; font-weight: 600; letter-spacing: -0.02em; color: #FFFFFF; }
body.cl-brand .cl-chat__sub { margin: 0; font-size: 17px !important; line-height: 1.4 !important; color: #C9D2E3; }
.cl-chat__body { position: relative; margin-top: -52px; padding: 0 16px 16px; display: grid; gap: 12px; }
.cl-chat__topics { margin: 0; padding: 4px 18px; list-style: none; border: 1px solid var(--cl-line); border-radius: 18px; background: #FFFFFF; box-shadow: 0 18px 36px -28px rgba(30, 44, 82, 0.5); }
.cl-chat__topics li + li { border-top: 1px solid var(--cl-line); }
body.cl-brand .cl-chat__topics a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; font-size: 16px; font-weight: 500; line-height: 1.3; color: #1E2C52; transition: color 0.25s var(--cl-ease-out); }
.cl-chat__topics svg { flex: none; width: 20px; height: 20px; transition: translate 0.3s var(--cl-ease-out); }
body.cl-brand .cl-chat__topics a:hover { color: #0E7C77; }
.cl-chat__topics a:hover svg { translate: 3px 0; }
.cl-chat__start { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 16px 18px; border: 1px solid var(--cl-line); border-radius: 18px; background: #FFFFFF; font-family: inherit; text-align: left; color: #1E2C52; cursor: pointer; transition: border-color 0.25s var(--cl-ease-out), background-color 0.25s var(--cl-ease-out); }
.cl-chat__start:hover { border-color: #1E2C52; background: #F5F7F9; }
.cl-chat__start b { display: block; font-size: 17px; font-weight: 600; }
.cl-chat__start small { display: block; margin-top: 2px; font-size: 14px; color: #3E4C6A; }
.cl-chat__start svg { flex: none; width: 24px; height: 24px; color: #0E7C77; }
.cl-chat__bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--cl-line); background: #FFFFFF; font-size: 16px; color: #1E2C52; }
.cl-chat__back { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: #F5F7F9; color: #1E2C52; cursor: pointer; }
.cl-chat__back svg { width: 20px; height: 20px; }
.cl-chat__msg { padding: 16px; }
body.cl-brand .cl-chat__note { margin: 0 0 12px; font-size: 15px !important; line-height: 1.5 !important; color: #3E4C6A; }
.cl-chat__tabs { flex: none; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--cl-line); background: #FFFFFF; }
.cl-chat__tabs button { display: grid; justify-items: center; gap: 2px; padding: 10px 0 12px; border: 0; background: none; font-family: inherit; font-size: 14px; font-weight: 500; color: #7A869E; cursor: pointer; transition: color 0.25s var(--cl-ease-out); }
.cl-chat__tabs svg { width: 22px; height: 22px; }
.cl-chat__tabs button.is-on { color: #1E2C52; font-weight: 600; }
/* keep clear of the back-to-top ring and the phone quote bar */
body.cl-brand.cl-has-chat .progress-wrap { right: clamp(22px, 2.6vw, 32px); bottom: calc(clamp(14px, 2vw, 24px) + 76px); }
@media (max-width: 767px) {
  body.cl-brand.cl-has-mobile-cta .cl-chat { bottom: 88px; }
  body.cl-brand.cl-has-mobile-cta.cl-has-chat .progress-wrap { bottom: 164px; }
  .cl-chat__panel { height: min(600px, calc(100dvh - 190px)); }
  .cl-chat__fab { width: 56px; height: 56px; }
  .cl-chat__tease { right: 68px; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .cl-chat__panel, .cl-chat__fab span { transition: none; } .cl-chat__tease { animation: none; } }

/* ============================================================ campaign landing pages (/lp/…) */
.cl-lp-head { position: fixed; inset: 0 0 auto 0; z-index: 1000; padding: 12px 0; background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid var(--cl-line); }
.cl-lp-head .container { display: flex; align-items: center; gap: 20px; }
.cl-lp-head__logo { margin-right: auto; }
.cl-lp-head__logo img { display: block; width: 150px; height: auto !important; }
body.cl-brand .cl-lp-head__tel { font-size: 16px; font-weight: 600; color: var(--color-heading); }
body.cl-brand .cl-lp-head__tel:hover { color: var(--color-link); }
body.cl-brand.cl-lp .cl-lp-hero { padding-top: clamp(120px, 12vw, 170px); }
body.cl-brand .cl-lp-hero .cl-page-hero__title { max-width: 13ch; }
.cl-lp-points { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding: 20px 0 0; list-style: none; border-top: 1px solid var(--cl-line); }
.cl-lp-points li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--color-heading); }
.cl-lp-points svg { width: 20px; height: 20px; padding: 3px; border-radius: 6px; background: #C2EBE5; color: #0E7C77; }
.cl-lp-logos { padding: clamp(20px, 2.4vw, 32px) 0; border-block: 1px solid var(--cl-line); background: #FFFFFF; }
.cl-lp-logos .container { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 40px; }
body.cl-brand .cl-lp-logos p { margin: 0; font-size: 13px !important; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text); }
.cl-lp-logos ul { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px; margin: 0; padding: 0; list-style: none; }
.cl-lp-logos li { font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; letter-spacing: -0.02em; color: #7A869E; }
.cl-co-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cl-lp-banner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: center; padding: clamp(24px, 4vw, 64px); border-radius: clamp(24px, 3vw, 40px); background: #1E2C52; color: #FFFFFF; }
body.cl-brand .cl-lp-banner h2 { margin-bottom: 12px; font-size: clamp(30px, 3.6vw, 52px) !important; line-height: 1.05 !important; font-weight: 600; letter-spacing: -0.03em; color: #FFFFFF; }
body.cl-brand .cl-lp-banner > div > p { max-width: 44ch; margin: 0 0 26px; font-size: 18px !important; line-height: 1.55 !important; color: #C9D2E3; }
.cl-lp-banner figure { margin: 0; padding: clamp(20px, 2.4vw, 36px); border-radius: 24px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.cl-lp-banner blockquote { margin: 0 0 20px; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.35; font-weight: 500; letter-spacing: -0.015em; color: #FFFFFF; }
.cl-lp-banner figcaption { font-size: 15px; color: #C9D2E3; }
.cl-lp-banner figcaption b { display: block; font-size: 17px; font-weight: 600; color: #7FE0D8; }
.cl-lp-compare { border: 1px solid var(--cl-line); border-radius: 26px; background: #FFFFFF; overflow: hidden; }
.cl-lp-compare table { width: 100%; border-collapse: collapse; }
.cl-lp-compare th, .cl-lp-compare td { padding: clamp(14px, 1.5vw, 20px) clamp(14px, 2vw, 28px); border-bottom: 1px solid var(--cl-line); text-align: left; }
.cl-lp-compare tbody tr:last-child th, .cl-lp-compare tbody tr:last-child td { border-bottom: 0; }
.cl-lp-compare thead th { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; color: var(--color-text); }
.cl-lp-compare thead th:nth-child(2) { background: #1E2C52; color: #FFFFFF; }
.cl-lp-compare tbody th { font-size: clamp(16px, 1.3vw, 19px); font-weight: 500; color: var(--color-heading); }
.cl-lp-compare td { width: 20%; text-align: center; }
.cl-lp-compare td.is-yes { background: #E8F7F5; }
.cl-lp-compare td svg { width: 30px; height: 30px; padding: 5px; border-radius: 9px; }
.cl-lp-compare td.is-yes svg { background: #1FB6AE; color: #1E2C52; }
.cl-lp-compare td.is-no svg { background: #F5F7F9; color: #7A869E; }
.cl-lp-quotes, .cl-lp-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.cl-lp-quote { display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 34px); border: 1px solid var(--cl-line); border-radius: 26px; background: #FFFFFF; }
.cl-lp-quote__stat { display: flex; align-items: baseline; gap: 10px; margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid var(--cl-line); }
.cl-lp-quote__stat b { font-size: clamp(36px, 3.6vw, 52px); line-height: 1; font-weight: 600; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: #0E7C77; }
.cl-lp-quote__stat span { font-size: 15px; color: var(--color-text); }
.cl-lp-quote blockquote { flex: 1; margin: 0 0 24px; font-size: 18px; line-height: 1.55; color: var(--color-heading); }
.cl-lp-quote__by { margin: 0; font-size: 14px !important; color: var(--color-text); }
.cl-lp-quote__by b { display: block; font-size: 16px; font-weight: 600; color: var(--color-heading); }
.cl-lp-pack { display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 34px); border: 1px solid var(--cl-line); border-radius: 26px; background: #FFFFFF; }
body.cl-brand .cl-lp-pack h3 { margin-bottom: 8px; font-size: clamp(22px, 2vw, 28px) !important; line-height: 1.15 !important; font-weight: 600; letter-spacing: -0.02em; color: var(--color-heading); }
body.cl-brand .cl-lp-pack > p { margin: 0 0 18px; font-size: 16px !important; line-height: 1.55 !important; color: var(--color-text); }
.cl-lp-pack ul { flex: 1; margin: 0 0 22px; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--cl-line); }
.cl-lp-pack li { display: flex; gap: 10px; margin-bottom: 12px; font-size: 16px; line-height: 1.4; color: var(--color-heading); }
.cl-lp-pack li svg { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 6px; background: #C2EBE5; color: #0E7C77; }
body.cl-brand .cl-lp-pack__price { margin: 0 0 18px; font-size: 26px !important; line-height: 1.1 !important; font-weight: 600; letter-spacing: -0.02em; color: var(--color-heading); }
.cl-lp-pack__price span { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--color-text); }
.cl-lp-pack .tf-btn { justify-content: space-between; }
.cl-lp-foot { padding: 28px 0 calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cl-line); background: #FFFFFF; }
.cl-lp-foot .container { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.cl-lp-foot img { height: auto !important; }
body.cl-brand .cl-lp-foot p { flex: 1; margin: 0; font-size: 14px !important; color: var(--color-text); }
.cl-lp-foot nav { display: flex; gap: 20px; }
body.cl-brand .cl-lp-foot a { font-size: 14px; font-weight: 600; color: var(--color-heading); }
@media (max-width: 991px) {
  .cl-lp-banner { grid-template-columns: minmax(0, 1fr); }
  .cl-lp-quotes, .cl-lp-packs { grid-template-columns: minmax(0, 1fr); }
  .cl-co-steps--3 { grid-template-columns: minmax(0, 1fr); }
  .cl-lp-head__tel { display: none; }
}
@media (max-width: 575px) {
  .cl-lp-head .tf-btn .icon-btn { display: none; }
  .cl-lp-head .tf-btn { padding-inline: 16px; font-size: 14px; }
  .cl-lp-head__logo img { width: 122px; }
  .cl-lp-compare td { width: 22%; padding-inline: 6px; }
  .cl-lp-compare thead th { font-size: 11px; padding-inline: 4px; }
}
.cl-lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 88px); align-items: center; }
.cl-lp-art { border: 6px solid #FFFFFF; border-radius: 30px; overflow: hidden; background: #C2EBE5; box-shadow: 0 40px 80px -48px rgba(30, 44, 82, 0.6); }
.cl-lp-art img { display: block; width: 100%; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; }
.cl-lp-art--sm { margin-top: 28px; border-radius: 24px; }
.cl-co-steps--stack { grid-template-columns: minmax(0, 1fr); gap: 0; }
.cl-co-steps--stack::before { display: none; }
.cl-co-steps--stack li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 20px; padding: 22px 0; border-bottom: 1px solid var(--cl-line); }
.cl-co-steps--stack li:first-child { border-top: 1px solid var(--cl-line); }
.cl-co-steps--stack .cl-co-steps__n { grid-row: span 2; margin: 0; box-shadow: none; }
body.cl-brand .cl-co-steps--stack p { max-width: none; }
@media (max-width: 991px) { .cl-lp-split { grid-template-columns: minmax(0, 1fr); } .cl-lp-art--sm { display: none; } }

/* ---- video sales page (/lp/…, kind = vsl): hook, problem, insight, proof, call to action */
.cl-vsl { text-align: center; }
.cl-vsl .cl-hero__kicker { justify-content: center; }
body.cl-brand .cl-vsl .cl-page-hero__title { max-width: 22ch; margin-inline: auto; font-size: clamp(32px, 4.4vw, 60px) !important; text-wrap: balance; }
body.cl-brand .cl-vsl .cl-page-hero__lead { max-width: 56ch; margin: 20px auto 0; }
.cl-vsl__frame { position: relative; max-width: 920px; margin: clamp(28px, 3.4vw, 48px) auto 0; aspect-ratio: 16 / 9; border: 6px solid #FFFFFF; border-radius: clamp(20px, 2.4vw, 32px); overflow: hidden; background: #1E2C52; box-shadow: 0 60px 110px -60px rgba(30, 44, 82, 0.75), 0 0 0 1px var(--cl-line); }
.cl-vsl__frame iframe, .cl-vsl__frame img { position: absolute; inset: 0; width: 100%; height: 100% !important; border: 0; object-fit: cover; }
.cl-vsl__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: clamp(64px, 7vw, 92px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: #1FB6AE; box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.5); }
.cl-vsl__play svg { width: 40%; height: 40%; margin-left: 6%; fill: #1E2C52; }
.cl-vsl__len { position: absolute; right: 16px; bottom: 16px; padding: 5px 11px; border-radius: 9px; background: rgba(30, 44, 82, 0.86); font-size: 14px; font-weight: 600; color: #FFFFFF; }
.cl-vsl__soon { position: absolute; left: 16px; bottom: 16px; padding: 5px 11px; border-radius: 9px; background: #FFFFFF; font-size: 14px; font-weight: 600; color: #1E2C52; }
.cl-vsl__cta { display: grid; justify-items: center; gap: 4px; margin-top: clamp(24px, 3vw, 40px); }
.cl-vsl__cta .cl-lp-points { justify-content: center; margin-top: 18px; padding-top: 0; border-top: 0; }
.cl-vsl__head { max-width: 760px; margin: 0 auto clamp(32px, 4vw, 56px); text-align: center; }
.cl-vsl__head .cl-sp-h2 { margin-bottom: 0; text-wrap: balance; }
.cl-vsl__head .cl-co-navylead { margin: 20px auto 0; }
.cl-sp-sec--navy .cl-vsl__pillars::before { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 6px, transparent 6px 12px); }
.cl-sp-sec--navy .cl-vsl__pillars .cl-co-steps__n { background: #1FB6AE; color: #1E2C52; box-shadow: 0 0 0 8px #1E2C52; }
body.cl-brand .cl-sp-sec--navy .cl-vsl__pillars h3 { color: #FFFFFF; }
body.cl-brand .cl-sp-sec--navy .cl-vsl__pillars p { color: #C9D2E3; }
.cl-lp-quotes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(14px, 1.6vw, 24px); }
@media (max-width: 991px) { .cl-lp-quotes--2 { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================ dark landing page (/lp/…, kind = dark) */
body.cl-brand.cl-lp--dark { --dk-bg: #0A1024; --dk-panel: #121B36; --dk-line: rgba(255, 255, 255, 0.1); --dk-text: #B9C3DA; --dk-hi: #5FD9D0; background: var(--dk-bg); color: var(--dk-text); }
.cl-lp--dark .cl-lp-head { background: rgba(10, 16, 36, 0.9); border-bottom-color: var(--dk-line); }
body.cl-brand.cl-lp--dark .cl-lp-head__tel { color: #FFFFFF; }
.cl-lp--dark .cl-lp-foot { background: var(--dk-bg); border-top-color: var(--dk-line); }
body.cl-brand.cl-lp--dark .cl-lp-foot p { color: var(--dk-text); }
body.cl-brand.cl-lp--dark .cl-lp-foot a { color: #FFFFFF; }
.cl-dk-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 28px; border-radius: 14px; background: #1FB6AE; font-size: 18px; font-weight: 600; color: #0A1024 !important; box-shadow: 6px 6px 0 rgba(31, 182, 174, 0.28); transition: translate 0.25s var(--cl-ease-out), box-shadow 0.25s var(--cl-ease-out), background-color 0.25s var(--cl-ease-out); }
.cl-dk-btn svg { width: 20px; height: 20px; }
.cl-dk-btn:hover { background: #2AC7BF; translate: 3px 3px; box-shadow: 3px 3px 0 rgba(31, 182, 174, 0.28); }
.cl-dk-btn:active { translate: 6px 6px; box-shadow: 0 0 0 rgba(31, 182, 174, 0.28); }
.cl-dk-btn--sm { min-height: 46px; padding: 0 18px; font-size: 15px; box-shadow: none; }
.cl-dk-btn--ink { background: #0A1024; color: #FFFFFF !important; box-shadow: 6px 6px 0 rgba(10, 16, 36, 0.22); }
.cl-dk-btn--ink:hover { background: #1E2C52; box-shadow: 3px 3px 0 rgba(10, 16, 36, 0.22); }
.cl-dk-hero { position: relative; padding: clamp(140px, 15vw, 210px) 0 clamp(56px, 7vw, 100px); text-align: center; background: radial-gradient(60% 70% at 50% 0%, rgba(31, 182, 174, 0.16), rgba(31, 182, 174, 0) 70%); }
body.cl-brand .cl-dk-hero__label { margin: 0 0 22px; font-size: clamp(16px, 1.5vw, 20px) !important; font-weight: 500; color: #FFFFFF; }
body.cl-brand .cl-dk-hero h1 { max-width: 15ch; margin: 0 auto 26px; font-size: clamp(42px, 7.2vw, 104px) !important; line-height: 1.02 !important; font-weight: 600; letter-spacing: -0.04em; color: #FFFFFF; text-wrap: balance; }
.cl-dk-hero h1 em, .cl-dk-head h2 em, .cl-dk-video h2 em { font-style: normal; color: var(--dk-hi); }
body.cl-brand .cl-dk-hero__lead { max-width: 54ch; margin: 0 auto 36px; font-size: clamp(18px, 1.6vw, 22px) !important; line-height: 1.6 !important; color: #E3E8F3; }
.cl-dk-hero__points { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 34px 0 0; padding: 0; list-style: none; }
.cl-dk-hero__points li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: #E3E8F3; }
.cl-dk-hero__points svg, .cl-dk-ticks svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 7px; background: rgba(31, 182, 174, 0.18); color: var(--dk-hi); }
.cl-dk-sec { padding: clamp(56px, 7vw, 110px) 0; }
.cl-dk-head { max-width: 900px; margin: 0 auto clamp(32px, 4.4vw, 64px); text-align: center; }
body.cl-brand .cl-dk-head h2 { margin: 0; font-size: clamp(30px, 4.2vw, 60px) !important; line-height: 1.08 !important; font-weight: 600; letter-spacing: -0.03em; color: #FFFFFF; text-wrap: balance; }
body.cl-brand .cl-dk-head p { max-width: 62ch; margin: 20px auto 0; font-size: clamp(17px, 1.4vw, 20px) !important; line-height: 1.6 !important; color: #E3E8F3; }
.cl-dk-video { padding-top: 0; }
.cl-dk-video__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(18px, 3vw, 48px); border: 1px solid var(--dk-line); border-radius: clamp(24px, 3vw, 40px); background: var(--dk-panel); }
.cl-dk-video .cl-vsl__frame { max-width: none; margin: 0; border-color: rgba(255, 255, 255, 0.9); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8); }
body.cl-brand .cl-dk-video h2 { margin: 0 0 22px; font-size: clamp(26px, 2.8vw, 40px) !important; line-height: 1.12 !important; font-weight: 600; letter-spacing: -0.025em; color: #FFFFFF; text-wrap: balance; }
.cl-dk-ticks { display: grid; gap: 14px; margin: 0 0 26px; padding: 0; list-style: none; }
.cl-dk-ticks li { display: flex; gap: 12px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; color: #E3E8F3; }
.cl-dk-trust { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.cl-dk-trust p { margin: 0; font-size: 15px !important; line-height: 1.3 !important; color: #FFFFFF; }
.cl-dk-trust p b { display: block; font-weight: 600; }
.cl-dk-trust p span { color: var(--dk-hi); letter-spacing: 2px; }
.cl-dk-raters { display: inline-flex; }
.cl-dk-raters span { display: grid; place-items: center; width: 40px; height: 40px; margin-left: -10px; border: 2px solid #FFFFFF; border-radius: 50%; background: #1E2C52; font-size: 12px; font-weight: 600; color: #FFFFFF; }
.cl-dk-raters span:first-child { margin-left: 0; }
.cl-dk-raters span:nth-child(3n+2) { background: #0E7C77; }
.cl-dk-raters span:nth-child(3n) { background: #3E4C6A; }
.cl-dk-raters .is-more { background: #FFFFFF; color: #0A1024; font-size: 18px; }
.cl-dk-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.cl-dk-card { padding: clamp(24px, 3vw, 48px); border: 1px solid var(--dk-line); border-radius: 20px; background: var(--dk-panel); transition: border-color 0.3s var(--cl-ease-out), translate 0.4s var(--cl-ease-out); }
.cl-dk-card:hover { border-color: rgba(95, 217, 208, 0.5); translate: 0 -4px; }
.cl-dk-card__ic { width: 44px; height: 44px; margin-bottom: 22px; color: var(--dk-hi); }
body.cl-brand .cl-dk-card h3 { margin-bottom: 14px; font-size: clamp(24px, 2.4vw, 34px) !important; line-height: 1.15 !important; font-weight: 600; letter-spacing: -0.02em; color: #FFFFFF; }
body.cl-brand .cl-dk-card p { margin: 0; font-size: clamp(17px, 1.4vw, 20px) !important; line-height: 1.65 !important; color: var(--dk-text); }
.cl-dk-steps { position: relative; display: grid; gap: clamp(28px, 4vw, 64px); max-width: 1040px; margin: 0 auto; padding: clamp(16px, 2vw, 32px) 0; list-style: none; }
.cl-dk-steps::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: linear-gradient(#FFFFFF, rgba(255, 255, 255, 0.14)); }
.cl-dk-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: clamp(16px, 3vw, 48px); align-items: center; }
.cl-dk-step__t { text-align: right; }
.cl-dk-step__t span { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--dk-hi); }
body.cl-brand .cl-dk-step__t h3 { font-size: clamp(22px, 2.4vw, 32px) !important; line-height: 1.15 !important; font-weight: 600; letter-spacing: -0.02em; color: #FFFFFF; }
.cl-dk-step__dot { justify-self: center; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 6px var(--dk-bg); }
body.cl-brand .cl-dk-step__d { margin: 0; padding: clamp(18px, 2.2vw, 30px); border-radius: 14px; background: #FFFFFF; font-size: clamp(16px, 1.3vw, 18px) !important; line-height: 1.65 !important; color: #1E2C52; }
.cl-dk-ready { position: relative; margin-top: clamp(40px, 5vw, 72px); padding: clamp(32px, 4.4vw, 64px) clamp(20px, 3vw, 48px); border-radius: clamp(20px, 2.4vw, 32px); overflow: hidden; background: #1FB6AE; text-align: center; color: #0A1024; }
.cl-dk-ready::before, .cl-dk-ready::after { content: ""; position: absolute; width: 340px; aspect-ratio: 1; border-radius: 50%; border: 60px solid rgba(255, 255, 255, 0.1); pointer-events: none; }
.cl-dk-ready::before { left: -120px; top: -160px; }
.cl-dk-ready::after { right: -100px; bottom: -180px; }
.cl-dk-ready > * { position: relative; }
body.cl-brand .cl-dk-ready h2 { margin: 0 0 10px; font-size: clamp(30px, 4vw, 56px) !important; line-height: 1.05 !important; font-weight: 600; letter-spacing: -0.03em; color: #0A1024; }
body.cl-brand .cl-dk-ready > p { margin: 0 0 24px; font-size: clamp(17px, 1.5vw, 21px) !important; color: #0A1024; }
.cl-dk-ready__rate { display: inline-flex; align-items: center; gap: 16px; margin-bottom: 26px; padding: 10px 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.4); }
.cl-dk-ready__rate b { font-size: 26px; font-weight: 600; }
.cl-dk-ready__rate b span { margin-left: 4px; font-size: 20px; }
.cl-dk-compare { max-width: 1040px; margin: 0 auto; border: 1px solid var(--dk-line); border-radius: 24px; overflow: hidden; background: var(--dk-panel); }
.cl-dk-compare table { width: 100%; border-collapse: collapse; }
.cl-dk-compare th, .cl-dk-compare td { padding: clamp(14px, 1.6vw, 22px) clamp(14px, 2vw, 28px); border-bottom: 1px solid var(--dk-line); text-align: left; }
.cl-dk-compare tbody tr:last-child > * { border-bottom: 0; }
.cl-dk-compare thead th { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; color: var(--dk-text); }
.cl-dk-compare thead th:nth-child(2) { background: #1FB6AE; color: #0A1024; }
.cl-dk-compare tbody th { font-size: clamp(16px, 1.4vw, 20px); font-weight: 500; color: #FFFFFF; }
.cl-dk-compare td { width: 20%; text-align: center; }
.cl-dk-compare td.is-yes { background: rgba(31, 182, 174, 0.14); }
.cl-dk-compare td svg { width: 32px; height: 32px; padding: 6px; border-radius: 10px; }
.cl-dk-compare td.is-yes svg { background: #1FB6AE; color: #0A1024; }
.cl-dk-compare td.is-no svg { background: rgba(255, 255, 255, 0.08); color: #7A869E; }
.cl-dk-sec--paper { background: #F5F7F9; }
.cl-dk-sec--flush { padding-top: 0; }
body.cl-brand .cl-dk-head--ink h2 { color: #0A1024; }
body.cl-brand .cl-dk-head--ink p { color: #3E4C6A; }
.cl-dk-head--ink h2 em { color: #0E7C77; }
.cl-dk-swoosh { display: block; width: 240px; height: 14px; margin: 14px auto 0; border-top: 3px solid #1FB6AE; border-radius: 50%; }
.cl-dk-wall { columns: 2; column-gap: clamp(14px, 2vw, 26px); max-width: 1100px; margin: 0 auto; padding: 0; list-style: none; }
.cl-dk-quote { break-inside: avoid; margin-bottom: clamp(14px, 2vw, 22px); padding: clamp(20px, 2.4vw, 30px); border-radius: 8px; }
.cl-dk-quote--light { background: #FFFFFF; color: #0A1024; }
.cl-dk-quote--dark { background: #0A1024; color: #FFFFFF; }
.cl-dk-quote__who { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.cl-dk-quote__av { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #C2EBE5; font-size: 20px; font-weight: 600; color: #0E7C77; }
.cl-dk-quote--dark .cl-dk-quote__av { background: #1E2C52; color: #7FE0D8; }
body.cl-brand .cl-dk-quote__who p { margin: 0; font-size: 13px !important; line-height: 1.4 !important; color: inherit; }
.cl-dk-quote__who b { display: block; font-size: 14px; font-weight: 600; }
.cl-dk-quote__who span { display: block; }
.cl-dk-quote__who strong { font-weight: 600; }
.cl-dk-quote__who em { display: block; margin-top: 6px; font-size: 20px; font-style: normal; font-weight: 600; letter-spacing: -0.03em; opacity: 0.9; }
.cl-dk-quote blockquote { margin: 0; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.6; color: inherit; }
.cl-dk-quote__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 26px 0 20px; }
.cl-dk-quote__stats dt { font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: -0.02em; color: #0E7C77; }
.cl-dk-quote--dark .cl-dk-quote__stats dt { color: #5FD9D0; }
.cl-dk-quote__stats dd { margin: 4px 0 0; font-size: 13px; line-height: 1.5; }
body.cl-brand .cl-dk-quote__more { display: inline-block; padding: 10px 22px; border-radius: 6px; background: #1FB6AE; font-size: 13px; font-weight: 600; color: #0A1024; box-shadow: 4px 4px 0 rgba(31, 182, 174, 0.3); }
.cl-dk-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); max-width: 1160px; margin: 0 auto; padding: 0; list-style: none; }
.cl-dk-pack { display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 32px); border-radius: 10px; color: #0A1024; }
.cl-dk-pack--teal { background: #1FB6AE; }
.cl-dk-pack--mint { background: #C2EBE5; }
.cl-dk-pack--line { background: #FFFFFF; box-shadow: inset 0 0 0 1.5px #0A1024; }
body.cl-brand .cl-dk-pack h3 { margin-bottom: 14px; font-size: clamp(22px, 2vw, 28px) !important; line-height: 1.15 !important; font-weight: 600; letter-spacing: -0.02em; color: #0A1024; }
.cl-dk-pack ul { flex: 1; margin: 0 0 24px; padding-left: 20px; }
.cl-dk-pack li { margin-bottom: 8px; font-size: 16px; line-height: 1.5; }
.cl-dk-pack .cl-dk-btn { align-self: center; min-height: 54px; font-size: 16px; }
body.cl-brand .cl-dk-pack > p { margin: 16px 0 0; font-size: 13px !important; text-align: center; color: #0A1024; }
.cl-dk-faq { max-width: 900px; margin: 0 auto; }
body.cl-brand.cl-lp--dark .cl-faq__item { border-color: var(--dk-line); }
body.cl-brand.cl-lp--dark .cl-faq__q { color: #FFFFFF; }
body.cl-brand.cl-lp--dark .cl-faq__a p { color: var(--dk-text); }
.cl-dk-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: clamp(14px, 1.8vw, 24px); max-width: 1160px; margin: 0 auto; padding: 0; list-style: none; }
.cl-dk-post { display: flex; grid-row: span 2; border: 1px solid var(--dk-line); border-radius: 10px; }
.cl-dk-post:nth-child(2), .cl-dk-post:nth-child(3) { grid-column: 2; grid-row: span 1; border: 0; }
.cl-dk-post:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
body.cl-brand .cl-dk-post a { flex: 1; display: flex; flex-direction: column; padding: clamp(18px, 2vw, 26px); color: #FFFFFF; }
.cl-dk-post__img { display: block; aspect-ratio: 16 / 10; margin-bottom: 18px; border-radius: 8px; overflow: hidden; }
.cl-dk-post__img img { width: 100%; height: 100% !important; object-fit: cover; transition: transform 0.6s var(--cl-ease-out); }
.cl-dk-post a:hover .cl-dk-post__img img { transform: scale(1.05); }
.cl-dk-post__by { display: block; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--dk-line); font-size: 14px; }
.cl-dk-post__by b { display: block; font-weight: 600; }
.cl-dk-post__by i { font-style: normal; color: var(--dk-text); }
body.cl-brand .cl-dk-post h3 { margin-bottom: 10px; font-size: clamp(20px, 1.9vw, 26px) !important; line-height: 1.2 !important; font-weight: 600; letter-spacing: -0.02em; color: inherit; }
body.cl-brand .cl-dk-post p { flex: 1; margin: 0 0 18px; font-size: 15px !important; line-height: 1.6 !important; color: var(--dk-text); }
.cl-dk-post__more { align-self: flex-start; padding: 10px 22px; border-radius: 6px; background: #1FB6AE; font-size: 13px; font-weight: 600; color: #0A1024; }
.cl-dk-post--tile, .cl-dk-post--tile2 { border-radius: 10px; text-align: center; }
.cl-dk-post--tile { background: #1FB6AE; }
.cl-dk-post--tile2 { background: #C2EBE5; }
body.cl-brand .cl-dk-post--tile a, body.cl-brand .cl-dk-post--tile2 a { justify-content: center; min-height: 220px; color: #0A1024; }
body.cl-brand .cl-dk-post--tile p, body.cl-brand .cl-dk-post--tile2 p { flex: none; margin: 0; color: #0A1024; }
.cl-dk-others { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); max-width: 1160px; margin: 0 auto; padding: 0; list-style: none; }
body.cl-brand .cl-dk-others a { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 0 24px; border: 1px solid var(--dk-line); border-radius: 8px; background: var(--dk-panel); font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; color: #FFFFFF; transition: border-color 0.3s var(--cl-ease-out), background-color 0.3s var(--cl-ease-out); }
.cl-dk-others svg { width: 22px; height: 22px; color: var(--dk-hi); transition: translate 0.3s var(--cl-ease-out); }
body.cl-brand .cl-dk-others a:hover { border-color: rgba(95, 217, 208, 0.5); background: #17223F; }
.cl-dk-others a:hover svg { translate: 3px -3px; }
.cl-dk-cal { max-width: 1040px; margin: 0 auto; padding: clamp(10px, 1.4vw, 20px); border-radius: 24px; background: #FFFFFF; }
body.cl-brand .cl-dk-cal .cl-ghl__alt { padding: 0 8px 6px; }
@media (max-width: 991px) {
  .cl-dk-video__grid { grid-template-columns: minmax(0, 1fr); }
  .cl-dk-packs { grid-template-columns: minmax(0, 1fr); }
  .cl-dk-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-dk-post, .cl-dk-post:nth-child(n) { grid-column: auto; grid-row: auto; }
}
@media (max-width: 767px) {
  .cl-dk-cards, .cl-dk-others, .cl-dk-posts { grid-template-columns: minmax(0, 1fr); }
  .cl-dk-wall { columns: 1; }
  .cl-dk-steps::before { left: 10px; }
  .cl-dk-step { grid-template-columns: 20px minmax(0, 1fr); gap: 8px 18px; }
  .cl-dk-step__t { grid-column: 2; text-align: left; }
  .cl-dk-step__dot { grid-column: 1; grid-row: 1; }
  .cl-dk-step__d { grid-column: 2; }
  .cl-dk-raters span { width: 32px; height: 32px; font-size: 10px; }
  .cl-dk-ready__rate { flex-direction: column; gap: 8px; }
  .cl-dk-raters span:nth-child(n+7):not(.is-more) { display: none; }
  .cl-dk-compare td { width: 22%; padding-inline: 6px; }
  .cl-dk-compare thead th { font-size: 11px; padding-inline: 4px; }
  .cl-lp--dark .cl-lp-head .cl-dk-btn svg { display: none; }
}
.cl-dk-quote__av, .cl-dk-raters span { display: flex !important; align-items: center; justify-content: center; line-height: 1 !important; text-align: center; }
.cl-dk-pack ul { padding-left: 0; list-style: none; }
.cl-dk-pack li { position: relative; padding-left: 18px; }
.cl-dk-pack li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: #0A1024; }
.cl-dk-hero { padding-bottom: clamp(40px, 5vw, 72px); }
@media (max-width: 575px) { .cl-lp--dark .cl-lp-head .cl-dk-btn { min-height: 42px; padding: 0 12px; font-size: 13px; white-space: nowrap; } .cl-lp--dark .cl-lp-head .container { gap: 10px; } }

/* ============================================================ conversion landing page (/lp/…, kind = audit)
   Tokens: primitives come from the brand kit, the --cv-* layer gives them a job on this page. */
body.cl-brand.cl-lp--cv {
  --cv-bg: #0A1024; --cv-surface: #121B36; --cv-raise: #17223F; --cv-line: rgba(255, 255, 255, 0.11);
  --cv-heading: #FFFFFF; --cv-text: #C5CDE0; --cv-muted: #8B96B0;
  --cv-accent: #1FB6AE; --cv-accent-hi: #5FD9D0; --cv-on-accent: #0A1024; --cv-warn: #F2A98B;
  --cv-r-sm: 12px; --cv-r: 20px; --cv-r-lg: clamp(22px, 2.6vw, 36px);
  --cv-gap: clamp(14px, 1.8vw, 26px); --cv-sec: clamp(64px, 8vw, 128px);
  background: var(--cv-bg); color: var(--cv-text);
}
.cl-lp--cv ::selection { background: var(--cv-accent); color: var(--cv-on-accent); }

/* button: one primary action everywhere */
.cl-cv-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 62px; padding: 0 30px; border-radius: 16px; background: var(--cv-accent); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; color: var(--cv-on-accent) !important; box-shadow: 0 18px 40px -16px rgba(31, 182, 174, 0.7); transition: background-color 0.25s var(--cl-ease-out), translate 0.25s var(--cl-ease-out), box-shadow 0.25s var(--cl-ease-out); }
.cl-cv-btn svg { width: 22px; height: 22px; transition: translate 0.3s var(--cl-ease-out); }
.cl-cv-btn:hover { background: #2AC7BF; translate: 0 -2px; box-shadow: 0 24px 46px -16px rgba(31, 182, 174, 0.85); }
.cl-cv-btn:hover svg { translate: 4px 0; }
.cl-cv-btn:active { translate: 0 0; scale: 0.985; }
.cl-cv-btn--sm { min-height: 46px; padding: 0 18px; border-radius: 12px; font-size: 15px; box-shadow: none; }
.cl-cv-btn--sm svg { width: 18px; height: 18px; }
.cl-cv-btn--ink { background: var(--cv-on-accent); color: #FFFFFF !important; box-shadow: 0 18px 40px -18px rgba(10, 16, 36, 0.8); }
.cl-cv-btn--ink:hover { background: #1E2C52; box-shadow: 0 24px 46px -18px rgba(10, 16, 36, 0.9); }

.cl-cv-head { position: fixed; inset: 0 0 auto 0; z-index: 1000; padding: 12px 0; background: rgba(10, 16, 36, 0.88); border-bottom: 1px solid var(--cv-line); }
.cl-cv-head .container { display: flex; align-items: center; gap: 20px; }
.cl-cv-head__logo { margin-right: auto; }
.cl-cv-head__logo img { display: block; width: 150px; height: auto !important; }
body.cl-brand .cl-cv-head__tel { font-size: 16px; font-weight: 600; color: var(--cv-heading); }

.cl-cv-hero { position: relative; padding: clamp(104px, 9.5vw, 136px) 0 clamp(36px, 4vw, 56px); overflow: hidden; }
.cl-cv-hero::before { content: ""; position: absolute; inset: -20% -10% auto 40%; height: 120%; background: radial-gradient(closest-side, rgba(31, 182, 174, 0.22), rgba(31, 182, 174, 0)); pointer-events: none; }
.cl-cv-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
body.cl-brand .cl-cv-chip { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 8px 14px; border: 1px solid var(--cv-line); border-radius: 10px; background: rgba(255, 255, 255, 0.05); font-size: 15px !important; font-weight: 500; color: var(--cv-heading); }
.cl-cv-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cv-accent-hi); }
body.cl-brand .cl-cv-hero h1 { max-width: 13ch; margin: 0 0 22px; font-size: clamp(40px, 5.4vw, 78px) !important; line-height: 1.02 !important; font-weight: 600; letter-spacing: -0.04em; color: var(--cv-heading); text-wrap: balance; }
.cl-cv-hero h1 em { font-style: normal; color: var(--cv-accent-hi); }
body.cl-brand .cl-cv-hero__lead { max-width: 50ch; margin: 0 0 30px; font-size: clamp(18px, 1.55vw, 21px) !important; line-height: 1.55 !important; color: var(--cv-text); }
.cl-cv-hero__act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.cl-cv-points { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cl-cv-points li { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--cv-heading); }
.cl-cv-points svg, .cl-cv-audit svg, .cl-cv-fit svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 7px; background: rgba(31, 182, 174, 0.18); color: var(--cv-accent-hi); }
.cl-cv-points--ink li { color: var(--cv-on-accent); }
.cl-cv-points--ink svg { background: rgba(10, 16, 36, 0.14); color: var(--cv-on-accent); }
body.cl-brand .cl-cv-trust { display: flex; align-items: center; gap: 14px; max-width: 46ch; margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--cv-line); font-size: 15px !important; line-height: 1.45 !important; color: var(--cv-text); }
.cl-cv-trust b { display: block; font-weight: 600; color: var(--cv-heading); }
.cl-cv-faces { display: flex; flex: none; }
.cl-cv-faces img { width: 44px; height: 44px !important; border: 2px solid var(--cv-bg); border-radius: 50%; object-fit: cover; background: #C2EBE5; }
.cl-cv-faces img + img { margin-left: -12px; }
.cl-cv-player { position: relative; aspect-ratio: 4 / 3; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--cv-r-lg); overflow: hidden; background: var(--cv-surface); box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 0.9), 0 0 0 10px rgba(255, 255, 255, 0.04); }
.cl-cv-player iframe, .cl-cv-player img { position: absolute; inset: 0; width: 100%; height: 100% !important; border: 0; object-fit: cover; }
.cl-cv-player__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: clamp(72px, 7vw, 96px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--cv-accent); box-shadow: 0 0 0 14px rgba(255, 255, 255, 0.45); }
.cl-cv-player__play svg { width: 38%; height: 38%; margin-left: 6%; fill: var(--cv-on-accent); }
@media (prefers-reduced-motion: no-preference) { .cl-cv-player__play { animation: cl-cv-pulse 2.6s var(--cl-ease-out) infinite; } }
@keyframes cl-cv-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); } 70%, 100% { box-shadow: 0 0 0 26px rgba(255, 255, 255, 0); } }
.cl-cv-player__cap { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 14px; background: rgba(10, 16, 36, 0.86); color: #FFFFFF; }
.cl-cv-player__cap b { font-size: 16px; font-weight: 600; }
.cl-cv-player__cap i { font-size: 14px; font-style: normal; color: var(--cv-accent-hi); }


.cl-cv-sec { padding: var(--cv-sec) 0; }
.cl-cv-sec--tight { padding-top: 0; }
.cl-cv-head2 { max-width: 820px; margin: 0 0 clamp(32px, 4vw, 60px); }
body.cl-brand .cl-cv-head2 h2, body.cl-brand .cl-cv-offer h2 { margin: 0; font-size: clamp(30px, 4vw, 58px) !important; line-height: 1.05 !important; font-weight: 600; letter-spacing: -0.035em; color: var(--cv-heading); text-wrap: balance; }
body.cl-brand .cl-cv-head2 p { max-width: 56ch; margin: 18px 0 0; font-size: clamp(17px, 1.45vw, 20px) !important; line-height: 1.6 !important; color: var(--cv-text); }
body.cl-brand .cl-cv-kicker { margin: 0 0 12px; font-size: 14px !important; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cv-accent-hi); }

/* leaks: editorial rows on a rail that fills as you scroll */

.cl-cv-offer { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4.4vw, 80px); align-items: center; padding: clamp(18px, 3.4vw, 56px); border: 1px solid var(--cv-line); border-radius: var(--cv-r-lg); background: var(--cv-surface); }
.cl-cv-offer__art { border-radius: var(--cv-r); overflow: hidden; background: #C2EBE5; }
.cl-cv-offer__art img { display: block; width: 100%; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; }
.cl-cv-audit { display: grid; gap: 0; margin: clamp(20px, 2.4vw, 32px) 0; padding: 0; list-style: none; border-top: 1px solid var(--cv-line); }
.cl-cv-audit li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--cv-line); }
.cl-cv-audit svg { margin-top: 2px; }
.cl-cv-audit b { display: block; font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; letter-spacing: -0.01em; color: var(--cv-heading); }
.cl-cv-audit span { display: block; margin-top: 2px; font-size: 16px; line-height: 1.5; color: var(--cv-text); }
.cl-cv-offer__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
body.cl-brand .cl-cv-offer__act p { margin: 0; font-size: 15px !important; color: var(--cv-text); }

.cl-cv-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cv-gap); margin: 0; padding: 0; list-style: none; }
.cl-cv-result { display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 38px); border-radius: var(--cv-r-lg); background: var(--cv-surface); box-shadow: inset 0 0 0 1px var(--cv-line); }
.cl-cv-result:nth-child(2) { background: var(--cv-accent); color: var(--cv-on-accent); box-shadow: none; }
body.cl-brand .cl-cv-result__n { display: flex; align-items: baseline; margin: 0; font-size: clamp(64px, 7.4vw, 112px) !important; line-height: 0.95 !important; font-weight: 600; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: var(--cv-accent-hi); }
.cl-cv-result__n i { margin-left: 4px; font-size: 0.5em; font-style: normal; letter-spacing: -0.02em; }
body.cl-brand .cl-cv-result__l { margin: 12px 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--cv-line); font-size: 15px !important; line-height: 1.45 !important; color: var(--cv-text); }
.cl-cv-result__l b { display: block; font-size: 19px; font-weight: 600; color: var(--cv-heading); }
.cl-cv-result blockquote { flex: 1; margin: 0 0 22px; font-size: 17px; line-height: 1.55; color: var(--cv-heading); }
body.cl-brand .cl-cv-result__by { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; align-items: center; margin: 0; font-size: 14px !important; line-height: 1.35 !important; color: var(--cv-text); }
.cl-cv-result__by span { grid-row: span 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cv-raise); font-size: 14px; font-weight: 600; color: var(--cv-accent-hi); }
.cl-cv-result__by b { font-size: 15px; font-weight: 600; color: var(--cv-heading); }
body.cl-brand .cl-cv-result:nth-child(2) .cl-cv-result__n, body.cl-brand .cl-cv-result:nth-child(2) .cl-cv-result__l, .cl-cv-result:nth-child(2) .cl-cv-result__l b, .cl-cv-result:nth-child(2) blockquote, body.cl-brand .cl-cv-result:nth-child(2) .cl-cv-result__by, .cl-cv-result:nth-child(2) .cl-cv-result__by b { color: var(--cv-on-accent); }
body.cl-brand .cl-cv-result:nth-child(2) .cl-cv-result__l { border-bottom-color: rgba(10, 16, 36, 0.2); }
.cl-cv-result:nth-child(2) .cl-cv-result__by span { background: var(--cv-on-accent); color: #FFFFFF; }

.cl-cv-fit { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--cv-gap); }
.cl-cv-fit__col { padding: clamp(22px, 2.8vw, 44px); border-radius: var(--cv-r-lg); background: var(--cv-surface); box-shadow: inset 0 0 0 1px var(--cv-line); }
.cl-cv-fit__col--no { background: transparent; }
body.cl-brand .cl-cv-fit h2 { margin: 0 0 20px; font-size: clamp(22px, 2.2vw, 30px) !important; line-height: 1.15 !important; font-weight: 600; letter-spacing: -0.02em; color: var(--cv-heading); }
.cl-cv-fit ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.cl-cv-fit li { display: flex; gap: 12px; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.5; color: var(--cv-heading); }
.cl-cv-fit__col--no li { color: var(--cv-text); }
.cl-cv-fit__col--no svg { background: rgba(242, 169, 139, 0.16); color: var(--cv-warn); }

.cl-cv-how { --p: 1; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 48px); margin: 0 0 var(--cv-sec); padding: 0; list-style: none; }
.cl-cv-how::before, .cl-cv-how::after { content: ""; position: absolute; left: 30px; right: 30px; top: 29px; height: 2px; background: var(--cv-line); }
.cl-cv-how::after { background: var(--cv-accent-hi); transform: scaleX(var(--p)); transform-origin: 0 50%; }
.cl-cv-how li { position: relative; z-index: 1; }
.cl-cv-how li > span { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-bottom: 22px; border-radius: 18px; background: var(--cv-accent); font-size: 22px; font-weight: 600; color: var(--cv-on-accent); box-shadow: 0 0 0 8px var(--cv-bg); }
body.cl-brand .cl-cv-how h3 { margin: 0 0 8px; font-size: clamp(22px, 2.1vw, 28px) !important; line-height: 1.15 !important; font-weight: 600; letter-spacing: -0.02em; color: var(--cv-heading); }
body.cl-brand .cl-cv-how p { max-width: 32ch; margin: 0; font-size: 17px !important; line-height: 1.6 !important; color: var(--cv-text); }
.cl-cv-faq { display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 72px); margin-bottom: var(--cv-sec); }
body.cl-brand .cl-cv-faq h2 { margin: 0; font-size: clamp(26px, 3vw, 42px) !important; line-height: 1.08 !important; font-weight: 600; letter-spacing: -0.03em; color: var(--cv-heading); }
body.cl-brand.cl-lp--cv .cl-faq__item { border-color: var(--cv-line); }
body.cl-brand.cl-lp--cv .cl-faq__q { color: var(--cv-heading); }
body.cl-brand.cl-lp--cv .cl-faq__a p { color: var(--cv-text); }
.cl-cv-final { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 72px); align-items: center; padding: clamp(28px, 4.6vw, 80px); border-radius: var(--cv-r-lg); overflow: hidden; background: var(--cv-accent); color: var(--cv-on-accent); }
.cl-cv-final::before { content: ""; position: absolute; right: -140px; top: -180px; width: 460px; aspect-ratio: 1; border-radius: 50%; border: 70px solid rgba(255, 255, 255, 0.12); }
.cl-cv-final > * { position: relative; }
body.cl-brand .cl-cv-final h2 { margin: 0 0 14px; font-size: clamp(30px, 4.2vw, 62px) !important; line-height: 1.03 !important; font-weight: 600; letter-spacing: -0.035em; color: var(--cv-on-accent); text-wrap: balance; }
body.cl-brand .cl-cv-final p { max-width: 44ch; margin: 0; font-size: clamp(17px, 1.5vw, 21px) !important; line-height: 1.55 !important; color: var(--cv-on-accent); }
.cl-cv-final__act { display: grid; gap: 22px; justify-items: start; }
.cl-cv-foot { padding: 26px 0 calc(26px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cv-line); }
.cl-cv-foot .container { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.cl-cv-foot img { height: auto !important; }
body.cl-brand .cl-cv-foot p { flex: 1; margin: 0; font-size: 14px !important; color: var(--cv-muted); }
.cl-cv-foot nav { display: flex; gap: 20px; }
body.cl-brand .cl-cv-foot a { font-size: 14px; font-weight: 500; color: var(--cv-text); }
/* phone: the offer follows the thumb once the hero button has scrolled away */
.cl-cv-sticky { display: none; }

@media (max-width: 991px) {
  .cl-cv-hero__grid, .cl-cv-offer, .cl-cv-fit, .cl-cv-final, .cl-cv-faq { grid-template-columns: minmax(0, 1fr); }
  .cl-cv-player { aspect-ratio: 16 / 10; }
  body.cl-brand .cl-cv-hero h1 { max-width: 16ch; }
  .cl-cv-results { grid-template-columns: minmax(0, 1fr); }
  .cl-cv-how { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cl-cv-how::before, .cl-cv-how::after { left: 29px; right: auto; top: 30px; bottom: 30px; width: 2px; height: auto; }
  .cl-cv-how::after { transform: scaleY(var(--p)); transform-origin: 50% 0; }
  .cl-cv-how li { display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 18px; }
  .cl-cv-how li > span { grid-row: span 2; margin: 0; }
  .cl-cv-head__tel { display: none; }
}
@media (max-width: 767px) {
  .cl-cv-head .cl-cv-btn--sm svg { display: none; }
  .cl-cv-head .cl-cv-btn--sm { min-height: 42px; padding: 0 14px; font-size: 14px; }
  .cl-cv-head__logo img { width: 124px; }
  .cl-cv-hero { padding-top: 88px; }
  .cl-cv-hero__act .cl-cv-btn { width: 100%; }
  .cl-cv-hero__act .cl-cv-points { grid-auto-flow: column; justify-content: space-between; width: 100%; }
  .cl-cv-hero__act .cl-cv-points li { font-size: 13px; }
  .cl-cv-offer__act .cl-cv-btn, .cl-cv-final .cl-cv-btn { width: 100%; }
  .cl-cv-final__act { justify-items: stretch; }
  .cl-cv-sticky { position: fixed; inset: auto 0 0 0; z-index: 900; display: block; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(10, 16, 36, 0.94); border-top: 1px solid var(--cv-line); translate: 0 110%; transition: translate 0.4s var(--cl-ease-out); }
  .cl-cv-sticky.is-on { translate: 0 0; }
  .cl-cv-sticky .cl-cv-btn { width: 100%; min-height: 54px; font-size: 17px; }
  .cl-cv-foot { padding-bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) { .cl-cv-sticky { transition: none; } }

/* ---- conversion page, second pass: texture, the audit console, logo band, stacked leaks, calculator */
.cl-cv-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--cv-line) 1px, transparent 1px), linear-gradient(90deg, var(--cv-line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 72% 40%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse 70% 80% at 72% 40%, #000 0%, transparent 72%); opacity: 0.6; pointer-events: none; }
.cl-cv-hero .container { position: relative; z-index: 1; }
.cl-cv-hero h1 em { position: relative; white-space: nowrap; }
.cl-cv-hero h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.04em; height: 0.09em; border-radius: 0.09em; background: var(--cv-accent); transform: scaleX(var(--u, 1)); transform-origin: 0 50%; }

.cl-cv-scan { position: relative; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--cv-r-lg); overflow: hidden; background: linear-gradient(180deg, #17223F, #101831); box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 0.95), 0 0 0 10px rgba(255, 255, 255, 0.035); font-variant-numeric: tabular-nums; }
.cl-cv-scan__bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--cv-line); }
.cl-cv-scan__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.cl-cv-scan__bar b { margin-left: 10px; font-size: 14px; font-weight: 600; color: var(--cv-heading); }
.cl-cv-scan__bar span { margin-left: auto; padding: 4px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); font-size: 12px; font-weight: 500; color: var(--cv-text); }
.cl-cv-scan__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--cv-line); }
body.cl-brand .cl-cv-scan__kpis p { margin: 0; padding: 16px 18px; font-size: 13px !important; line-height: 1.3 !important; color: var(--cv-muted); }
.cl-cv-scan__kpis p + p { border-left: 1px solid var(--cv-line); }
.cl-cv-scan__kpis b { display: block; margin-top: 4px; font-size: clamp(20px, 2vw, 28px); font-weight: 600; letter-spacing: -0.03em; color: var(--cv-heading); }
.cl-cv-scan__kpis .is-warn b { color: var(--cv-warn); }
.cl-cv-scan__body { position: relative; padding: 8px 18px; }
.cl-cv-scan__rows { margin: 0; padding: 0; list-style: none; }
.cl-cv-scan__rows li { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 62px 84px; gap: 14px; align-items: center; padding: 13px 0; font-size: 14px; color: var(--cv-text); }
.cl-cv-scan__rows li + li { border-top: 1px solid var(--cv-line); }
.cl-cv-scan__rows span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--cv-heading); }
.cl-cv-scan__rows i { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.cl-cv-scan__rows i::before { content: ""; display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--cv-accent); transform: scaleX(var(--g, 1)); transform-origin: 0 50%; }
.cl-cv-scan__rows .is-leak i::before { background: var(--cv-warn); }
.cl-cv-scan__rows b { font-weight: 500; text-align: right; color: var(--cv-text); }
.cl-cv-scan__rows em { justify-self: end; padding: 4px 10px; border-radius: 8px; background: rgba(31, 182, 174, 0.16); font-size: 12px; font-style: normal; font-weight: 600; color: var(--cv-accent-hi); }
.cl-cv-scan__rows .is-leak em { background: rgba(242, 169, 139, 0.18); color: var(--cv-warn); }
.cl-cv-scan__beam { position: absolute; left: 0; right: 0; top: 0; height: 64px; background: linear-gradient(180deg, rgba(95, 217, 208, 0), rgba(95, 217, 208, 0.16)); border-bottom: 1px solid var(--cv-accent-hi); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .cl-cv-scan__beam { animation: cl-cv-beam 4.2s cubic-bezier(0.6, 0, 0.4, 1) infinite; } }
@keyframes cl-cv-beam { 0% { translate: 0 -64px; opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { translate: 0 300px; opacity: 0; } }
.cl-cv-scan__found { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 18px; border-top: 1px solid var(--cv-line); background: rgba(10, 16, 36, 0.5); }
body.cl-brand .cl-cv-scan__found p { margin: 0; font-size: 15px !important; color: var(--cv-heading); }
.cl-cv-scan__found p b { display: inline-grid; place-items: center; min-width: 28px; height: 28px; margin-right: 6px; border-radius: 9px; background: var(--cv-warn); font-weight: 700; color: var(--cv-on-accent); }
.cl-cv-scan__play { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: #FFFFFF; font-size: 14px; font-weight: 600; color: var(--cv-on-accent); }
.cl-cv-scan__play svg { width: 28px; height: 28px; padding: 7px; border-radius: 50%; background: var(--cv-accent); fill: var(--cv-on-accent); }
.cl-cv-scan__play i { font-style: normal; font-weight: 500; color: #3E4C6A; }

.cl-cv-logos { padding: clamp(20px, 2.2vw, 30px) 0; border-block: 1px solid var(--cv-line); overflow: hidden; }
body.cl-brand .cl-cv-logos > p { margin: 0 auto 14px; font-size: 13px !important; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cv-muted); }
.cl-cv-band { display: flex; width: max-content; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.cl-cv-band ul { display: flex; flex: none; gap: clamp(36px, 5vw, 84px); margin: 0; padding: 0 clamp(18px, 2.5vw, 42px); list-style: none; }
.cl-cv-band li { font-size: clamp(20px, 2.1vw, 30px); font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; color: #7E8AA6; }
@media (prefers-reduced-motion: no-preference) { .cl-cv-band { animation: cl-cv-band 34s linear infinite; } .cl-cv-logos:hover .cl-cv-band { animation-play-state: paused; } }
@keyframes cl-cv-band { to { translate: -50% 0; } }

/* leaks: each card sticks under the header and the next slides over it */
.cl-cv-leaks { margin: 0; padding: 0; list-style: none; }
.cl-cv-leak { position: sticky; top: calc(92px + var(--i) * 22px); padding-bottom: clamp(18px, 2.4vw, 34px); }
.cl-cv-leak__card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(20px, 4vw, 72px); align-items: center; min-height: min(560px, 68vh); padding: clamp(22px, 3.6vw, 60px); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--cv-r-lg); background: var(--cv-surface); box-shadow: 0 -24px 60px -30px rgba(0, 0, 0, 0.8); transform-origin: 50% 0; }
.cl-cv-leak__card { position: relative; overflow: hidden; }
.cl-cv-leak__card::after { content: ""; position: absolute; inset: 0; background: var(--cv-bg); opacity: var(--dim, 0); pointer-events: none; }
.cl-cv-leak:nth-child(2) .cl-cv-leak__card { background: var(--cv-raise); }
.cl-cv-leak:nth-child(3) .cl-cv-leak__card { background: #1E2C52; }
.cl-cv-leak__n { display: block; margin-bottom: clamp(14px, 2vw, 28px); font-size: clamp(44px, 5.6vw, 84px); line-height: 0.9; font-weight: 600; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: var(--cv-accent-hi); }
.cl-cv-leak__n i { font-size: 0.3em; font-style: normal; letter-spacing: 0; color: var(--cv-muted); }
body.cl-brand .cl-cv-leak h3 { margin: 0 0 12px; font-size: clamp(26px, 3.1vw, 44px) !important; line-height: 1.08 !important; font-weight: 600; letter-spacing: -0.03em; color: var(--cv-heading); }
body.cl-brand .cl-cv-leak p { max-width: 46ch; margin: 0; font-size: clamp(16px, 1.35vw, 19px) !important; line-height: 1.6 !important; color: var(--cv-text); }
.cl-cv-leak__f { margin-top: clamp(18px, 2vw, 28px); padding-left: 18px; border-left: 3px solid var(--cv-accent); }
.cl-cv-leak__f span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cv-accent-hi); }
body.cl-brand .cl-cv-leak__f p { color: var(--cv-heading); }
.cl-cv-v { padding: clamp(18px, 2.4vw, 34px); border-radius: var(--cv-r); background: var(--cv-bg); box-shadow: inset 0 0 0 1px var(--cv-line); }
body.cl-brand .cl-cv-v p { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; max-width: none; margin: 0; font-size: 15px !important; line-height: 1.4 !important; color: var(--cv-text); }
.cl-cv-v small { display: block; margin-top: 16px; font-size: 12px; color: var(--cv-muted); }
.cl-cv-v svg { display: block; width: 100%; height: auto; }
.cl-cv-v--bars p b { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--cv-heading); }
.cl-cv-v--bars i { display: block; height: 28px; margin: 8px 0 22px; border-radius: 9px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.cl-cv-v--bars i::before { content: ""; display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--cv-accent); }
.cl-cv-v--bars i.is-warn { margin-bottom: 0; }
.cl-cv-v--bars i.is-warn::before { background: var(--cv-warn); }
.cl-cv-v--chart .g { stroke: var(--cv-line); }
.cl-cv-v--chart path.up, .cl-cv-v--chart path.dn { stroke-width: 4; stroke-linecap: round; }
.cl-cv-v--chart path.up { stroke: var(--cv-warn); } .cl-cv-v--chart path.dn { stroke: var(--cv-accent-hi); }
.cl-cv-v--chart circle.up { fill: var(--cv-warn); } .cl-cv-v--chart circle.dn { fill: var(--cv-accent-hi); }
.cl-cv-v--chart p { margin-top: 14px !important; }
.cl-cv-v--chart p span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 3px; background: currentColor; }
.cl-cv-v--chart span.up { color: var(--cv-warn); } .cl-cv-v--chart span.dn { color: var(--cv-accent-hi); }
.cl-cv-v--venn circle { fill: rgba(31, 182, 174, 0.14); stroke: var(--cv-accent-hi); stroke-width: 2; }
.cl-cv-v--venn circle.hit { fill: var(--cv-warn); stroke: none; }
body.cl-brand .cl-cv-v--venn p { margin-top: 14px; color: var(--cv-heading); }

.cl-cv-calc { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); border-radius: var(--cv-r-lg); overflow: hidden; background: var(--cv-surface); box-shadow: inset 0 0 0 1px var(--cv-line); }
.cl-cv-calc__in { padding: clamp(22px, 3.6vw, 60px); }
body.cl-brand .cl-cv-calc h2 { margin: 0 0 clamp(22px, 2.6vw, 38px); font-size: clamp(28px, 3.4vw, 48px) !important; line-height: 1.06 !important; font-weight: 600; letter-spacing: -0.035em; color: var(--cv-heading); }
.cl-cv-field { display: block; margin: 0 0 26px; }
.cl-cv-field > span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 16px; font-weight: 500; color: var(--cv-text); }
.cl-cv-field output { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--cv-heading); }
.cl-cv-field input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.cl-cv-field input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--cv-accent) var(--f, 50%), rgba(255, 255, 255, 0.14) var(--f, 50%)); }
.cl-cv-field input[type="range"]::-moz-range-track { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.14); }
.cl-cv-field input[type="range"]::-moz-range-progress { height: 8px; border-radius: 8px; background: var(--cv-accent); }
.cl-cv-field input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border: 4px solid var(--cv-accent); border-radius: 50%; background: #FFFFFF; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); }
.cl-cv-field input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 4px solid var(--cv-accent); border-radius: 50%; background: #FFFFFF; }
.cl-cv-field input[type="range"]:focus-visible { outline: 2px solid var(--cv-accent-hi); outline-offset: 6px; border-radius: 8px; }
.cl-cv-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.cl-cv-seg legend { float: none; width: 100%; margin: 0 0 12px; padding: 0; font-size: 16px; font-weight: 500; color: var(--cv-text); }
.cl-cv-seg label { position: relative; margin: 0; cursor: pointer; }
.cl-cv-seg input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cl-cv-seg span { display: grid; place-items: center; min-height: 52px; border: 1px solid var(--cv-line); border-radius: 14px; font-size: 18px; font-weight: 600; color: var(--cv-heading); transition: background-color 0.2s var(--cl-ease-out), border-color 0.2s var(--cl-ease-out), color 0.2s var(--cl-ease-out); }
.cl-cv-seg label:hover span { border-color: var(--cv-accent-hi); }
.cl-cv-seg input:checked + span { border-color: var(--cv-accent); background: var(--cv-accent); color: var(--cv-on-accent); }
.cl-cv-seg input:focus-visible + span { outline: 2px solid var(--cv-accent-hi); outline-offset: 3px; }
.cl-cv-calc__out { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(22px, 3.6vw, 60px); background: var(--cv-accent); color: var(--cv-on-accent); }
body.cl-brand .cl-cv-calc__big { margin: 0; font-size: 18px !important; line-height: 1.35 !important; font-weight: 500; color: var(--cv-on-accent); }
.cl-cv-calc__big b { display: block; font-size: clamp(84px, 10.5vw, 168px); line-height: 0.9; font-weight: 600; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.cl-cv-calc__big b::before { content: "+"; font-size: 0.5em; vertical-align: 0.42em; letter-spacing: 0; }
.cl-cv-calc__big span { display: block; max-width: 24ch; margin-top: 10px; font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; }
.cl-cv-calc dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; margin: clamp(20px, 2.4vw, 32px) 0; padding: 18px 0; border-block: 1px solid rgba(10, 16, 36, 0.22); }
.cl-cv-calc dt { font-size: 14px; font-weight: 500; }
.cl-cv-calc dd { margin: 2px 0 0; font-size: clamp(22px, 2.3vw, 32px); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
body.cl-brand .cl-cv-calc__note { max-width: 44ch; margin: 16px 0 0; font-size: 14px !important; line-height: 1.5 !important; color: var(--cv-on-accent); }

@media (max-width: 991px) {
  .cl-cv-leak__card, .cl-cv-calc { grid-template-columns: minmax(0, 1fr); }
  .cl-cv-leak { position: static; }
  .cl-cv-leak__card { min-height: 0; }
}
@media (max-width: 767px) {
  .cl-cv-scan__rows li { grid-template-columns: minmax(0, 1fr) 56px 78px; gap: 10px; padding: 11px 0; font-size: 13px; }
  .cl-cv-scan__rows i { display: none; }
  body.cl-brand .cl-cv-scan__kpis p { padding: 12px; font-size: 12px !important; }
  .cl-cv-scan__body, .cl-cv-scan__bar, .cl-cv-scan__found { padding-inline: 12px; }
  .cl-cv-scan__play i { display: none; }
  .cl-cv-calc__out .cl-cv-btn { width: 100%; }
}

/* ============================================================ restaurant landing page (/lp/restaurants, kind = rest)
   Light poster layout: a tall condensed headline with photo "O"s, a cut-out figure on a disc, a dark band. */
body.cl-brand.cl-lp--rs {
  --rs-bg: #FFFFFF; --rs-ink: #1E2C52; --rs-text: #3E4C6A; --rs-quiet: #A3ACC0; --rs-accent: #1FB6AE; --rs-accent-ink: #0E7C77;
  --rs-display: "Anton", "Outfit", Impact, sans-serif;
  background: var(--rs-bg); color: var(--rs-text); overflow-x: clip;
}
.cl-lp--rs ::selection { background: var(--rs-accent); color: var(--rs-ink); }
.cl-rs-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); }
.cl-rs-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 26px; border-radius: 12px; background: var(--rs-ink); font-size: 16px; font-weight: 600; white-space: nowrap; color: #FFFFFF !important; transition: background-color 0.25s var(--cl-ease-out), translate 0.25s var(--cl-ease-out), box-shadow 0.25s var(--cl-ease-out); }
.cl-rs-btn:hover { background: var(--rs-accent-ink); translate: 0 -2px; box-shadow: 0 16px 30px -14px rgba(14, 124, 119, 0.7); }
.cl-rs-btn:active { translate: 0 0; scale: 0.98; }
.cl-rs-btn--lg { min-height: 60px; padding: 0 30px; font-size: 17px; }
.cl-rs-head { position: relative; z-index: 10; padding: clamp(16px, 2.4vw, 32px) 0; }
.cl-rs-head .cl-rs-wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.cl-rs-head__logo img { display: block; width: clamp(130px, 12vw, 160px); height: auto !important; }
.cl-rs-nav { display: flex; gap: clamp(20px, 2.6vw, 38px); }
body.cl-brand .cl-rs-nav a { position: relative; font-size: 16px; font-weight: 500; color: var(--rs-ink); }
.cl-rs-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--rs-accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s var(--cl-ease-out); }
.cl-rs-nav a:hover::after { transform: scaleX(1); }
.cl-rs-head .cl-rs-btn { justify-self: end; }

.cl-rs-hero { --fs: clamp(46px, 10.4vw, 152px); position: relative; padding: clamp(8px, 2vw, 28px) 0 clamp(24px, 4vw, 60px); }
body.cl-brand .cl-rs-h1 { position: relative; z-index: 1; margin: 0; font-family: var(--rs-display) !important; font-size: var(--fs) !important; line-height: 0.88 !important; font-weight: 400 !important; letter-spacing: -0.005em; text-align: center; text-transform: uppercase; color: var(--rs-ink); }
.cl-rs-line { display: block; padding: 0.02em 0; overflow: hidden; }
.cl-rs-line > span { display: inline-block; white-space: nowrap; }
.cl-rs-o { position: relative; display: inline-block; width: 0.84em; height: 0.84em; margin: 0 0.01em; vertical-align: -0.035em; border-radius: 50%; overflow: hidden; background: var(--rs-ink); line-height: 0; }
/* the photo fills the whole disc; the ring is drawn on top so it never shows a gap */
.cl-rs-o img { position: absolute; inset: 0; display: block; width: 100%; height: 100% !important; max-width: none; margin: 0; object-fit: cover; transition: scale 0.6s var(--cl-ease-out); }
.cl-rs-o::after { content: ""; position: absolute; inset: 0; border: 0.068em solid var(--rs-ink); border-radius: 50%; pointer-events: none; }
.cl-rs-o:hover img { scale: 1.12; }

.cl-rs-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr) minmax(0, 1fr); align-items: center; gap: clamp(8px, 1.4vw, 20px); }
.cl-rs-copy { position: relative; z-index: 3; align-self: start; padding-top: calc(var(--fs) * 1.05); }
body.cl-brand .cl-rs-lead { max-width: 21ch; margin: 0 0 12px; font-size: clamp(19px, 1.75vw, 25px) !important; line-height: 1.25 !important; font-weight: 600; letter-spacing: -0.015em; color: var(--rs-ink); }
.cl-rs-lead b { font-weight: 600; color: var(--rs-accent-ink); }
body.cl-brand .cl-rs-system { margin: 0 0 22px; font-size: 14px !important; font-weight: 500; color: var(--rs-text); }
.cl-rs-system::after { content: "\2122"; font-size: 0.8em; vertical-align: 0.4em; }
.cl-rs-figure { position: relative; z-index: 2; aspect-ratio: 1 / 0.88; margin-top: calc(var(--fs) * 0.3); }
.cl-rs-disc { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #DDF5F1, #C2EBE5 55%, #A9E1D9); }
.cl-rs-person { position: absolute; left: 50%; bottom: -9%; width: 108%; height: auto !important; translate: -50% 0; filter: drop-shadow(0 30px 40px rgba(30, 44, 82, 0.25)); }
body.cl-brand .cl-rs-not { position: relative; z-index: 3; align-self: start; margin: 0; padding-top: calc(var(--fs) * 0.95); font-family: var(--rs-display) !important; font-size: clamp(36px, 4.8vw, 74px) !important; line-height: 0.9 !important; text-align: right; text-transform: uppercase; color: var(--rs-quiet); }
.cl-rs-band { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-around; gap: clamp(14px, 2.4vw, 40px); margin-top: clamp(-110px, -7vw, -40px); padding: clamp(24px, 2.8vw, 42px) clamp(20px, 3.4vw, 56px); border-radius: clamp(20px, 2.4vw, 32px); background: var(--rs-ink); box-shadow: 0 40px 80px -40px rgba(30, 44, 82, 0.6); }
body.cl-brand .cl-rs-band p { margin: 0; font-family: var(--rs-display) !important; font-size: clamp(20px, 2.5vw, 38px) !important; line-height: 0.98 !important; text-align: center; text-transform: uppercase; color: #FFFFFF; }
.cl-rs-star { flex: none; width: clamp(24px, 2.4vw, 36px); height: auto; fill: var(--rs-accent); }
@media (prefers-reduced-motion: no-preference) { .cl-rs-star { animation: cl-rs-spin 9s linear infinite; } }
@keyframes cl-rs-spin { to { rotate: 1turn; } }

@media (max-width: 991px) {
  .cl-rs-copy, body.cl-brand .cl-rs-not { align-self: center; }
  .cl-rs-nav { display: none; }
  .cl-rs-head .cl-rs-wrap { grid-template-columns: 1fr auto; }
  .cl-rs-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cl-rs-figure { grid-column: 1 / -1; grid-row: 1; width: min(560px, 92%); margin: calc(var(--fs) * 0.5) auto 0; }
  .cl-rs-copy, body.cl-brand .cl-rs-not { padding-top: 0; }
  .cl-rs-band { margin-top: 28px; }
}
@media (max-width: 767px) {
  .cl-rs-head .cl-rs-btn { min-height: 46px; padding: 0 18px; font-size: 15px; }
  .cl-rs-hero { --fs: clamp(38px, 12.6vw, 92px); }
  .cl-rs-stage { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cl-rs-figure { width: 100%; margin-top: calc(var(--fs) * 0.95); }
  .cl-rs-copy { text-align: center; }
  body.cl-brand .cl-rs-lead { margin-inline: auto; }
  .cl-rs-copy .cl-rs-btn { width: 100%; }
  body.cl-brand .cl-rs-not { display: none; }
  .cl-rs-band { flex-direction: column; gap: 16px; margin-top: 8px; }
}

/* ---- restaurant page, sections after the hero */
.cl-rs-sec { padding: clamp(64px, 8vw, 120px) 0; scroll-margin-top: 20px; }
body.cl-brand .cl-rs-h2 { margin: 0 auto clamp(30px, 4vw, 56px); font-family: var(--rs-display) !important; font-size: clamp(38px, 5.6vw, 84px) !important; line-height: 0.92 !important; font-weight: 400 !important; text-align: center; text-transform: uppercase; color: var(--rs-ink); }
.cl-rs-h2 span { color: var(--rs-accent-ink); }
.cl-rs-btn--light { background: #FFFFFF; color: var(--rs-ink) !important; }
.cl-rs-btn--light:hover { background: #C2EBE5; color: var(--rs-ink) !important; }

.cl-rs-inc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); margin: 0; padding: 0; list-style: none; }
.cl-rs-inc__card { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: clamp(150px, 15vw, 210px); padding: clamp(18px, 1.8vw, 26px); border-radius: 22px; background: #F5F7F9; transition: translate 0.35s var(--cl-ease-out), box-shadow 0.35s var(--cl-ease-out), background-color 0.35s var(--cl-ease-out); }
.cl-rs-inc__card:hover { translate: 0 -4px; background: #FFFFFF; box-shadow: 0 24px 50px -28px rgba(30, 44, 82, 0.45), inset 0 0 0 1px #E3E8EF; }
.cl-rs-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--rs-ink); color: #FFFFFF; }
.cl-rs-ic svg { width: 22px; height: 22px; }
body.cl-brand .cl-rs-inc__card p { max-width: 22ch; margin: 0; font-size: clamp(16px, 1.25vw, 18px) !important; line-height: 1.35 !important; font-weight: 600; color: var(--rs-ink); }
.cl-rs-inc__card--promise { padding: 0; background: linear-gradient(140deg, #1FB6AE 0%, #0E7C77 100%); }
.cl-rs-inc__card--promise:hover { background: linear-gradient(140deg, #26C4BB 0%, #0E7C77 100%); }
body.cl-brand .cl-rs-inc__card--promise a { display: flex; align-items: flex-end; height: 100%; padding: clamp(18px, 1.8vw, 26px); font-family: var(--rs-display) !important; font-size: clamp(28px, 2.6vw, 40px); line-height: 0.95; text-transform: uppercase; color: #FFFFFF; }

.cl-rs-sec--proof { overflow: hidden; background: #F5F7F9; }
.cl-rs-reels { margin-bottom: clamp(36px, 5vw, 72px); }
.cl-rs-reels__track { display: flex; gap: clamp(12px, 1.4vw, 20px); width: max-content; align-items: center; padding: 20px 0; }
@media (prefers-reduced-motion: no-preference) { .cl-rs-reels__track { animation: cl-rs-marquee 48s linear infinite; } .cl-rs-reels:hover .cl-rs-reels__track { animation-play-state: paused; } }
@keyframes cl-rs-marquee { to { translate: -50% 0; } }
.cl-rs-reel { flex: none; width: clamp(150px, 15vw, 220px); aspect-ratio: 9 / 16; margin: 0; border: 6px solid var(--rs-ink); border-radius: 28px; overflow: hidden; background: var(--rs-ink); box-shadow: 0 30px 60px -30px rgba(30, 44, 82, 0.6); }
.cl-rs-reel:nth-child(odd) { translate: 0 -14px; }
.cl-rs-reel:nth-child(3n) { width: clamp(170px, 17vw, 250px); }
.cl-rs-reel img { display: block; width: 100%; height: 100% !important; object-fit: cover; transition: scale 0.6s var(--cl-ease-out); }
.cl-rs-reel:hover img { scale: 1.06; }
.cl-rs-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); max-width: 980px; margin: 0 auto; padding: 0; list-style: none; }
.cl-rs-quote { display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 34px); border-radius: 22px; background: #FFFFFF; box-shadow: 0 1px 0 #E3E8EF, 0 30px 60px -40px rgba(30, 44, 82, 0.35); }
.cl-rs-quote blockquote { flex: 1; margin: 0 0 18px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.55; color: var(--rs-ink); }
.cl-rs-stars { display: flex; gap: 3px; margin-bottom: 14px; }
.cl-rs-stars svg { width: 18px; height: 18px; fill: var(--rs-accent); }
body.cl-brand .cl-rs-quote p { margin: 0; font-size: 14px !important; line-height: 1.4 !important; color: var(--rs-text); }
.cl-rs-quote b { display: block; font-size: 15px; font-weight: 600; color: var(--rs-ink); }

.cl-rs-promise { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 18px; padding: clamp(40px, 6vw, 96px) clamp(20px, 5vw, 80px); border-radius: clamp(24px, 3vw, 40px); background: var(--rs-ink); text-align: center; }
.cl-rs-promise::before, .cl-rs-promise::after { content: ""; position: absolute; width: 420px; aspect-ratio: 1; border-radius: 50%; border: 70px solid rgba(31, 182, 174, 0.14); pointer-events: none; }
.cl-rs-promise::before { left: -180px; top: -200px; }
.cl-rs-promise::after { right: -170px; bottom: -220px; }
.cl-rs-promise > * { position: relative; }
body.cl-brand .cl-rs-promise__k { margin: 0; padding: 8px 14px; border-radius: 10px; background: rgba(31, 182, 174, 0.18); font-size: 14px !important; font-weight: 600; color: #5FD9D0; }
body.cl-brand .cl-rs-promise h2 { max-width: 16ch; margin: 0; font-family: var(--rs-display) !important; font-size: clamp(38px, 5.4vw, 80px) !important; line-height: 0.95 !important; font-weight: 400 !important; text-transform: uppercase; color: #FFFFFF; text-wrap: balance; }
body.cl-brand .cl-rs-promise p:not(.cl-rs-promise__k) { max-width: 52ch; margin: 0 0 8px; font-size: clamp(16px, 1.4vw, 19px) !important; line-height: 1.6 !important; color: #C5CDE0; }

.cl-rs-faq { display: grid; gap: 10px; max-width: 720px; margin: 0 auto; }
.cl-rs-q { border-radius: 18px; background: #F5F7F9; transition: background-color 0.3s var(--cl-ease-out), box-shadow 0.3s var(--cl-ease-out); }
.cl-rs-q[open] { background: #FFFFFF; box-shadow: inset 0 0 0 1px #E3E8EF, 0 20px 40px -30px rgba(30, 44, 82, 0.4); }
.cl-rs-q summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; list-style: none; cursor: pointer; font-size: clamp(16px, 1.3vw, 18px); font-weight: 600; color: var(--rs-ink); }
.cl-rs-q summary::-webkit-details-marker { display: none; }
.cl-rs-q summary span { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--rs-accent); transition: rotate 0.3s var(--cl-ease-out), background-color 0.3s; }
.cl-rs-q summary span::before, .cl-rs-q summary span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; translate: -50% -50%; border-radius: 2px; background: #FFFFFF; }
.cl-rs-q summary span::after { rotate: 90deg; }
.cl-rs-q[open] summary span { rotate: 45deg; background: var(--rs-ink); }
.cl-rs-q summary:focus-visible { outline: 2px solid var(--rs-accent-ink); outline-offset: 2px; border-radius: 18px; }
body.cl-brand .cl-rs-q p { margin: 0; padding: 0 22px 20px; font-size: 16px !important; line-height: 1.6 !important; color: var(--rs-text); }

.cl-rs-sec--close { padding-bottom: 0; overflow: hidden; text-align: center; }
.cl-rs-sec--close .cl-rs-btn { margin-bottom: clamp(40px, 5vw, 70px); }
.cl-rs-fan { position: relative; height: clamp(280px, 30vw, 440px); }
.cl-rs-fan__card { --r: calc(var(--i) * 9deg); position: absolute; left: 50%; bottom: calc(-1 * clamp(80px, 9vw, 140px) + (2 - max(var(--i), -1 * var(--i))) * 18px); width: clamp(170px, 17vw, 260px); aspect-ratio: 9 / 16; margin: 0; border: 6px solid #FFFFFF; border-radius: 26px; overflow: hidden; background: var(--rs-ink); box-shadow: 0 30px 70px -30px rgba(30, 44, 82, 0.7); --lift: 0px; transform-origin: 50% 120%; transform: translate(calc(-50% + var(--i) * 78%), var(--lift)) rotate(var(--r)); z-index: calc(10 - max(var(--i), -1 * var(--i))); }
.cl-rs-fan__card img { display: block; width: 100%; height: 100% !important; object-fit: cover; }
.cl-rs-foot { padding: 28px 0 calc(28px + env(safe-area-inset-bottom, 0px)); background: var(--rs-ink); }
.cl-rs-foot .cl-rs-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.cl-rs-foot img { height: auto !important; }
body.cl-brand .cl-rs-foot p { flex: 1; margin: 0; font-size: 14px !important; color: #A3ACC0; }
.cl-rs-foot nav { display: flex; gap: 20px; }
body.cl-brand .cl-rs-foot a { font-size: 14px; font-weight: 500; color: #FFFFFF; }

@media (max-width: 991px) {
  .cl-rs-inc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-rs-quotes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .cl-rs-inc__card { min-height: 150px; gap: 18px; }
  .cl-rs-fan__card { width: 150px; transform: translate(calc(-50% + var(--i) * 62%), var(--lift)) rotate(var(--r)); }
  .cl-rs-fan { height: 260px; }
}

/* ---- restaurant page: "We do everything for you", set like a menu */
.cl-rs-menu { --ease: cubic-bezier(0.22, 1, 0.36, 1); position: relative; padding: clamp(80px, 9vw, 140px) 0 clamp(70px, 8vw, 120px); background: #FFFFFF; }
.cl-rs-menu__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; margin-bottom: clamp(36px, 4vw, 60px); }
body.cl-brand .cl-rs-menu__k { grid-column: 1 / -1; margin: 0; font-family: Outfit, sans-serif !important; font-size: 18px !important; font-style: italic; font-weight: 500; color: var(--rs-accent-ink); }
body.cl-brand .cl-rs-menu__h { margin: 0; font-family: var(--rs-display) !important; font-size: clamp(52px, 7.4vw, 116px) !important; line-height: 0.88 !important; font-weight: 400 !important; text-transform: uppercase; color: var(--rs-ink); }
.cl-rs-menu__h span { display: block; }
body.cl-brand .cl-rs-menu__note { margin: 0 0 0.5em; font-size: 16px !important; line-height: 1.55 !important; text-align: right; color: var(--rs-text); }

.cl-rs-menu__list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(30, 44, 82, 0.16); }
.cl-rs-menu__row { --line: 1; position: relative; display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; grid-template-areas: "name dots inc" "desc desc ."; align-items: end; column-gap: 18px; row-gap: 6px; margin: 0 -22px; padding: clamp(20px, 2vw, 28px) 22px; border-radius: 16px; cursor: default; isolation: isolate; }
.cl-rs-menu__row::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 1px; background: rgba(30, 44, 82, 0.16); transform: scaleX(var(--line)); transform-origin: 0 50%; }
.cl-rs-menu__row::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--rs-ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.5s var(--ease); }
.cl-rs-menu__row:hover::after { transform: scaleX(1); }
body.cl-brand .cl-rs-menu__name { grid-area: name; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; color: var(--rs-ink); transition: color 0.18s linear 0.12s, translate 0.65s var(--ease); }
.cl-rs-menu__desc { grid-area: desc; max-width: 52ch; font-size: 16px; line-height: 1.5; color: var(--rs-text); transition: color 0.18s linear 0.12s, translate 0.65s var(--ease); }
.cl-rs-menu__dots { grid-area: dots; align-self: end; height: 0; margin-bottom: 0.55em; border-bottom: 2px dotted rgba(30, 44, 82, 0.28); transition: border-color 0.45s var(--ease); }
.cl-rs-menu__inc { grid-area: inc; padding-bottom: 0.3em; font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rs-accent-ink); transition: color 0.45s var(--ease); }
.cl-rs-menu__thumb { display: none; }
.cl-rs-menu__row:hover .cl-rs-menu__name { color: #FFFFFF; translate: 10px 0; }
.cl-rs-menu__row:hover .cl-rs-menu__desc { color: #C5CDE0; translate: 10px 0; }
.cl-rs-menu__row:hover .cl-rs-menu__dots { border-color: rgba(255, 255, 255, 0.3); }
.cl-rs-menu__row:hover .cl-rs-menu__inc { color: #5FD9D0; }

.cl-rs-menu__row--promise { display: block; padding: 0; }
.cl-rs-menu__row--promise::after { background: var(--rs-accent); }
.cl-rs-menu__row--promise a { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(24px, 2.6vw, 36px) 22px; }
body.cl-brand .cl-rs-menu__row--promise .cl-rs-menu__name { font-family: var(--rs-display) !important; font-size: clamp(40px, 5.4vw, 84px); line-height: 0.95; font-weight: 400; letter-spacing: 0; text-transform: uppercase; color: var(--rs-accent-ink); }
.cl-rs-menu__arrow { display: grid; place-items: center; flex: none; width: clamp(56px, 5vw, 76px); aspect-ratio: 1; border-radius: 50%; background: var(--rs-ink); color: #FFFFFF; transition: rotate 0.65s var(--ease), background-color 0.45s var(--ease), color 0.45s var(--ease); }
.cl-rs-menu__arrow svg { width: 42%; height: 42%; }
.cl-rs-menu__row--promise:hover .cl-rs-menu__name { color: var(--rs-ink); }
.cl-rs-menu__row--promise:hover .cl-rs-menu__arrow { rotate: -45deg; background: #FFFFFF; color: var(--rs-ink); }
.cl-rs-menu__row--promise a:focus-visible { outline: 2px solid var(--rs-accent-ink); outline-offset: 4px; border-radius: 16px; }

/* the photo that follows the cursor over the list */
.cl-rs-menu__float { position: fixed; left: 0; top: 0; z-index: 20; width: clamp(170px, 14vw, 220px); aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; pointer-events: none; opacity: 0; box-shadow: 0 40px 80px -30px rgba(30, 44, 82, 0.7); }
.cl-rs-menu__float img { display: block; width: 100%; height: 100% !important; object-fit: cover; }

@media (hover: none), (max-width: 991px) {
  .cl-rs-menu__float { display: none; }
  .cl-rs-menu__row { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "thumb name inc" "thumb desc desc"; align-items: center; column-gap: 16px; margin: 0; padding: 18px 0; }
  .cl-rs-menu__row::before { left: 0; right: 0; }
  .cl-rs-menu__row::after { display: none; }
  .cl-rs-menu__dots { display: none; }
  .cl-rs-menu__thumb { grid-area: thumb; display: block; width: 64px; height: 64px !important; border-radius: 14px; object-fit: cover; }
  body.cl-brand .cl-rs-menu__name { font-size: 20px; }
  .cl-rs-menu__desc { font-size: 15px; }
  .cl-rs-menu__inc { align-self: start; padding-top: 4px; font-size: 11px; }
  .cl-rs-menu__row--promise a { padding: 24px 0; }
}
@media (max-width: 767px) {
  .cl-rs-menu__head { grid-template-columns: minmax(0, 1fr); }
  body.cl-brand .cl-rs-menu__note { text-align: left; }
  .cl-rs-menu__inc { display: none; }
  .cl-rs-menu__row { grid-template-areas: "thumb name name" "thumb desc desc"; }
}
@media (prefers-reduced-motion: reduce) { .cl-rs-menu__row::after, .cl-rs-menu__name, .cl-rs-menu__desc { transition: none; } }