@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Jost:wght@400;500;600&display=swap');

/* ==========================================================================
   Create Flo — Home Page 2026
   Built from Figma: Create Flo / home (node 1:3)
   Everything is scoped under .cf26 so it cannot leak into other pages.
   ========================================================================== */

.cf26 {
  --navy: #182738;
  --navy-2: #223449;
  --teal: #0db3b2;
  --teal-dark: #0a8f8e;
  --teal-tint: #e3f6f6;
  --surface: #f5f7f8;
  --border: #e3e8ec;
  --text-muted: #5b6776;
  --on-dark-muted: #a9b6c4;

  --gutter: 24px;
  --sec-y: clamp(64px, 8.5vw, 136px);

  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: #fff;
  color: var(--navy);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.cf26 *,
.cf26 *::before,
.cf26 *::after { box-sizing: border-box; }

/* :where() keeps this reset at zero-class specificity so the component rules
   below can set their own margins without needing to out-specify it. */
.cf26 :where(h1, h2, h3, h4, p, ul, li, figure) {
  margin: 0;
  padding: 0;
}
.cf26 ul { list-style: none; }
.cf26 img, .cf26 svg { display: block; max-width: 100%; }
.cf26 a { color: inherit; text-decoration: none; }

/* max-width is the border box, so the gutters are added on top to leave a
   1280px content column — the same content width as the Figma frame. */
.cf26-wrap {
  width: 100%;
  max-width: calc(1280px + var(--gutter) * 2);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* --- shared type ---------------------------------------------------------- */

.cf26-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 3.3px;
  text-transform: uppercase;
  color: var(--teal);
}
.cf26-eyebrow::before {
  content: '';
  flex: 0 0 auto;
  width: 28px;
  height: 2px;
  background: var(--teal);
}

.cf26-h2 {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 3.55vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.54px;
  color: var(--navy);
}
.cf26-h3 {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
  color: var(--navy);
}
.cf26-lead {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.6;
  color: var(--text-muted);
}
.cf26-body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* --- buttons -------------------------------------------------------------- */

.cf26-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0.09px;
  border-radius: 999px;
  padding: 18px 32px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.cf26-btn--primary {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 10px 24px -6px rgba(13, 178, 178, .28);
}
.cf26-btn--primary:hover {
  background: var(--teal-dark);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -8px rgba(13, 178, 178, .42);
}
.cf26-btn--outline {
  border-color: var(--navy);
  color: var(--navy);
  background: transparent;
}
.cf26-btn--outline:hover { background: var(--navy); color: #fff; }
.cf26-btn--sm { padding: 14px 26px; }
.cf26-btn--onDark { border-color: rgba(255, 255, 255, .28); color: #fff; }
.cf26-btn--onDark:hover { background: #fff; color: var(--navy); border-color: #fff; }

.cf26-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.09px;
  color: var(--teal);
  transition: gap .2s ease;
}
.cf26-link:hover { gap: 14px; }

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

/* ==========================================================================
   Nav
   ========================================================================== */

.cf26-nav {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 3;
}
.cf26-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-block: 22px;
}
.cf26-logo {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 1.92px;
  color: var(--navy);
  white-space: nowrap;
}
.cf26-logo i { font-style: normal; color: var(--teal); }
.cf26-logo b {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  vertical-align: top;
  margin-left: 3px;
}
.cf26-logo--light { color: #fff; }

.cf26-nav__links {
  display: flex;
  align-items: center;
  gap: 40px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.085px;
  color: var(--navy);
}
.cf26-nav__links a { transition: color .2s ease; }
.cf26-nav__links a:hover { color: var(--teal); }

.cf26-nav__actions {
  display: flex;
  align-items: center;
  gap: 28px;
}
.cf26-nav__tel {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.085px;
  color: var(--navy);
  white-space: nowrap;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.cf26-hero {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding-block: clamp(56px, 7vw, 112px) clamp(64px, 7.5vw, 120px);
}

/* Two soft teal glows, drifting very slowly. Radial gradients (not blur
   filters) so the animation stays on the compositor. */
.cf26-hero__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}
.cf26-hero__glow--a {
  width: 900px;
  height: 900px;
  right: -230px;
  top: -300px;
  background: radial-gradient(circle at center,
    rgba(13, 179, 178, .30) 0%,
    rgba(13, 179, 178, .17) 34%,
    rgba(13, 179, 178, .05) 56%,
    rgba(13, 179, 178, 0) 72%);
  animation: cf26-drift-a 26s ease-in-out infinite alternate;
}
.cf26-hero__glow--b {
  width: 620px;
  height: 620px;
  left: -300px;
  bottom: -220px;
  background: radial-gradient(circle at center,
    rgba(13, 179, 178, .22) 0%,
    rgba(13, 179, 178, .12) 36%,
    rgba(13, 179, 178, 0) 70%);
  animation: cf26-drift-b 34s ease-in-out infinite alternate;
}
@keyframes cf26-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .92; }
  to   { transform: translate3d(-46px, 30px, 0) scale(1.07); opacity: 1; }
}
@keyframes cf26-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
  to   { transform: translate3d(38px, -30px, 0) scale(1.06); opacity: 1; }
}

.cf26-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
}
.cf26-hero__copy {
  flex: 1 1 700px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.cf26-hero__title {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 4.8vw, 70px);
  line-height: 1.04;
  letter-spacing: -1.08px;
  color: var(--navy);
}
.cf26-hero__title em { font-style: normal; color: var(--teal); }

.cf26-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.cf26-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding-top: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.cf26-trust__stars {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
}
.cf26-trust__stars span { font-size: 17px; font-weight: 400; color: var(--teal); letter-spacing: 1px; }
.cf26-trust__div { width: 1px; height: 20px; background: var(--border); }
.cf26-trust__loc { color: var(--text-muted); }

/* --- hero visual ---------------------------------------------------------- */

.cf26-hero__visual {
  flex: 0 0 508px;
  position: relative;
  min-height: 600px;
}
.cf26-mock {
  position: absolute;
  left: 24px;
  top: 20px;
  width: 484px;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(24, 39, 56, .16);
}
.cf26-mock__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: var(--surface);
}
.cf26-mock__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d3dae1;
  flex: 0 0 auto;
}
.cf26-mock__url {
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
  border-radius: 8px;
  padding: 5px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cf26-mock__hero {
  background: var(--navy);
  padding: 32px 28px 32px;
}
.cf26-mock__kicker { display: block; width: 90px; height: 8px; border-radius: 4px; background: var(--teal); }
.cf26-mock__h {
  margin-top: 14px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  color: #fff;
}
.cf26-mock__line {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .22);
  margin-top: 14px;
}
.cf26-mock__line--2 { width: 80%; margin-top: 10px; }
.cf26-mock__btns { display: flex; gap: 10px; margin-top: 18px; }
.cf26-mock__btn {
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
}
.cf26-mock__btn--fill { background: var(--teal); color: #fff; }
.cf26-mock__btn--ghost { border: 1px solid rgba(255, 255, 255, .34); color: #fff; }

.cf26-mock__cards {
  display: flex;
  gap: 12px;
  padding: 24px 28px;
}
.cf26-mock__card {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 15px;
}
.cf26-mock__ico { display: block; width: 28px; height: 28px; border-radius: 8px; background: var(--teal-tint); }
.cf26-mock__card p {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
}
.cf26-mock__bar { display: block; width: 52%; height: 6px; border-radius: 3px; background: var(--surface); margin-top: 10px; }
.cf26-mock__bar--s { width: 37%; margin-top: 8px; }

/* --- the animated chart strip --------------------------------------------
   12 bars at their Figma heights. Each one scales up from the baseline on a
   staggered delay, holds, then drops back — so the whole strip reads as a
   wave that keeps rebuilding itself. */

.cf26-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 104px;
  padding: 0 28px 28px;
  box-sizing: content-box;
}
.cf26-chart span {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 6px;
  background: var(--teal-tint);
  transform-origin: bottom center;
  animation: cf26-bar 5.2s cubic-bezier(.22, 1, .36, 1) infinite;
  will-change: transform, opacity;
}
.cf26-chart span:nth-child(10),
.cf26-chart span:nth-child(11),
.cf26-chart span:nth-child(12) { background: var(--teal); }

.cf26-chart span:nth-child(1)  { height: 26px;  animation-delay: 0s; }
.cf26-chart span:nth-child(2)  { height: 34px;  animation-delay: .07s; }
.cf26-chart span:nth-child(3)  { height: 30px;  animation-delay: .14s; }
.cf26-chart span:nth-child(4)  { height: 44px;  animation-delay: .21s; }
.cf26-chart span:nth-child(5)  { height: 40px;  animation-delay: .28s; }
.cf26-chart span:nth-child(6)  { height: 56px;  animation-delay: .35s; }
.cf26-chart span:nth-child(7)  { height: 52px;  animation-delay: .42s; }
.cf26-chart span:nth-child(8)  { height: 70px;  animation-delay: .49s; }
.cf26-chart span:nth-child(9)  { height: 66px;  animation-delay: .56s; }
.cf26-chart span:nth-child(10) { height: 84px;  animation-delay: .63s; }
.cf26-chart span:nth-child(11) { height: 92px;  animation-delay: .70s; }
.cf26-chart span:nth-child(12) { height: 104px; animation-delay: .77s; }

@keyframes cf26-bar {
  0%   { transform: scaleY(.04); opacity: .30; }
  16%  { transform: scaleY(1);   opacity: 1; }
  74%  { transform: scaleY(1);   opacity: 1; }
  90%  { transform: scaleY(.04); opacity: .30; }
  100% { transform: scaleY(.04); opacity: .30; }
}

/* --- floating cards ------------------------------------------------------- */

.cf26-float-review {
  position: absolute;
  left: -40px;
  top: 424px;
  width: 290px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 20px 50px rgba(24, 39, 56, .14);
}
.cf26-float-review__top {
  font-size: 14px;
  font-weight: 500;
  color: var(--teal);
  letter-spacing: .5px;
}
.cf26-float-review__top b { color: var(--navy); font-weight: 500; margin-left: 6px; }
.cf26-float-review p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--navy);
}
.cf26-float-review small {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.cf26-float-chip {
  position: absolute;
  left: 300px;
  top: -10px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  background: #fff;
  border-radius: 999px;
  padding: 13px 22px 13px 15px;
  box-shadow: 0 16px 40px rgba(24, 39, 56, .14);
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  white-space: nowrap;
}
.cf26-float-chip i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-style: normal;
  font-size: 15px;
}

/* ==========================================================================
   Client logos
   ========================================================================== */

.cf26-logos { background: var(--surface); }
.cf26-logos__inner {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding-block: 40px;
}
.cf26-logos__label {
  flex: 0 0 170px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-muted);
}
.cf26-logos__row {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 32px;
  font-family: 'Jost', sans-serif;
  font-size: 22px;
  line-height: 1.3;
  color: var(--navy);
  white-space: nowrap;
}
.cf26-logos__row span { opacity: .45; }
.cf26-logos__row .t1 { font-weight: 600; letter-spacing: 2.64px; }
.cf26-logos__row .t2 { font-weight: 500; }
.cf26-logos__row .t3 { font-weight: 400; letter-spacing: 2.64px; }
.cf26-logos__row .t4 { font-weight: 600; }
.cf26-logos__row .t5 { font-weight: 600; font-size: 28px; }

/* ==========================================================================
   Why Create Flo
   ========================================================================== */

.cf26-why { background: #fff; padding-block: var(--sec-y); }
.cf26-why__head {
  display: flex;
  align-items: flex-end;
  gap: clamp(32px, 6vw, 96px);
  margin-bottom: 72px;
}
.cf26-why__head > div { flex: 1 1 0; min-width: 0; }
.cf26-why__head .cf26-h2 { margin-top: 24px; }

.cf26-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cf26-pillar {
  background: var(--surface);
  border-radius: 24px;
  padding: 36px 36px 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.cf26-num {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--teal);
  color: #fff;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
}

/* ==========================================================================
   Services  — dark section #1: teal glow from the bottom-right
   ========================================================================== */

.cf26-services {
  padding-block: var(--sec-y);
  background:
    radial-gradient(820px 620px at 94% 100%, rgba(13, 179, 178, .22), rgba(13, 179, 178, 0) 62%),
    linear-gradient(200deg, #182738 0%, #1b2f44 54%, #16283a 100%);
}
.cf26-services__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 64px;
}
.cf26-services__head .cf26-h2 { color: #fff; margin-top: 24px; max-width: 760px; }

.cf26-svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.cf26-svc {
  background: rgba(34, 52, 73, .78);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 28px;
  padding: 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  transition: transform .25s ease, border-color .25s ease, background-color .25s ease;
}
.cf26-svc:hover {
  transform: translateY(-4px);
  border-color: rgba(13, 179, 178, .45);
  background: rgba(34, 52, 73, .95);
}
.cf26-svc__ico { flex: 0 0 auto; width: 64px; height: 64px; }
.cf26-svc__ico svg { width: 64px; height: 64px; }
.cf26-svc h3 {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
  color: #fff;
}
.cf26-svc__desc { color: var(--on-dark-muted); font-size: 17px; line-height: 1.6; }
.cf26-svc__list { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.cf26-svc__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 17px;
  line-height: 1.6;
  color: #fff;
}
.cf26-svc__list li::before { content: '✓'; color: var(--teal); flex: 0 0 auto; }
.cf26-svc__foot {
  width: 100%;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

/* ==========================================================================
   Our work
   ========================================================================== */

.cf26-work { background: var(--surface); padding-block: var(--sec-y); }
.cf26-work__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 64px;
}
.cf26-work__head .cf26-h2 { margin: 24px 0 24px; }
.cf26-work__head .cf26-lead { max-width: 720px; }

.cf26-cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cf26-case {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(24, 39, 56, .06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cf26-case:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 56px rgba(24, 39, 56, .12);
}
.cf26-case__thumb {
  height: 280px;
  background: var(--teal-tint);
  padding: 32px 32px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.cf26-case__win {
  height: 220px;
  border-radius: 14px 14px 0 0;
  background: var(--navy);
  padding: 22px;
  box-shadow: 0 -8px 30px rgba(24, 39, 56, .1);
}
.cf26-case--teal .cf26-case__win { background: var(--teal); }
.cf26-case__win i { display: block; border-radius: 3px; background: var(--teal); height: 6px; width: 60px; }
.cf26-case--teal .cf26-case__win i { background: #fff; }
.cf26-case__win u {
  display: block;
  text-decoration: none;
  border-radius: 4px;
  background: #fff;
  height: 14px;
  margin-top: 12px;
}
.cf26-case__win u.w1 { width: 64%; }
.cf26-case__win u.w2 { width: 46%; }
.cf26-case__win s {
  display: block;
  text-decoration: none;
  border-radius: 3px;
  background: rgba(255, 255, 255, .45);
  height: 6px;
  margin-top: 12px;
}
.cf26-case__win s.w3 { width: 76%; }
.cf26-case__win s.w4 { width: 58%; }
.cf26-case__win div { display: flex; gap: 8px; padding-top: 14px; }
.cf26-case__win div b { display: block; height: 28px; width: 96px; border-radius: 14px; background: var(--teal); }
.cf26-case__win div em { display: block; height: 28px; width: 80px; border-radius: 14px; background: #fff; }
.cf26-case--teal .cf26-case__win div b { background: var(--navy); }
.cf26-case--teal .cf26-case__win div em { background: rgba(255, 255, 255, .6); }

.cf26-case__body {
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.cf26-tag {
  background: var(--teal-tint);
  color: var(--teal-dark);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

/* ==========================================================================
   Process
   ========================================================================== */

.cf26-process { background: #fff; padding-block: var(--sec-y); }
.cf26-process__head { text-align: center; max-width: 820px; margin: 0 auto 72px; }
.cf26-process__head .cf26-eyebrow { justify-content: center; }
.cf26-process__head .cf26-h2 { margin-top: 24px; }

.cf26-steps { display: grid; grid-template-columns: repeat(4, 1fr); }
.cf26-step { padding-right: 24px; }
.cf26-step__track { display: flex; align-items: center; }
.cf26-step__dot {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--teal);
  background: #fff;
  color: var(--teal);
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
}
.cf26-step:first-child .cf26-step__dot { background: var(--teal); color: #fff; }
.cf26-step__track::after {
  content: '';
  flex: 1 1 0;
  height: 2px;
  background: var(--teal);
}
.cf26-step:last-child .cf26-step__track::after { background: linear-gradient(90deg, var(--teal), rgba(13, 179, 178, 0)); }
.cf26-step h3 {
  margin-top: 28px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  color: var(--navy);
}
.cf26-step p { margin-top: 12px; padding-right: 16px; }

/* ==========================================================================
   Reviews
   ========================================================================== */

.cf26-reviews { background: var(--teal-tint); padding-block: var(--sec-y); }
.cf26-reviews__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 64px;
}
.cf26-reviews__head .cf26-h2 { margin-top: 24px; }
.cf26-score {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  border-radius: 20px;
  padding: 20px 32px 20px 28px;
}
.cf26-score__n {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 54px;
  line-height: 1.1;
  letter-spacing: -0.54px;
  color: var(--navy);
}
.cf26-score__s {
  display: block;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  color: var(--teal);
}
.cf26-score__c { display: block; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--text-muted); margin-top: 4px; }

.cf26-rev-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cf26-rev {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  background: #fff;
  border-radius: 24px;
  padding: 32px;
}
.cf26-rev__q {
  display: block;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 64px;
  line-height: 36px;
  letter-spacing: -0.64px;
  color: var(--teal);
  height: 36px;
}
.cf26-rev__t {
  margin-top: 20px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  color: var(--navy);
}
.cf26-rev__by { display: flex; align-items: center; gap: 14px; }
.cf26-rev__av {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}
.cf26-rev__who { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--navy); }
.cf26-rev__who span { display: block; color: var(--text-muted); margin-top: 2px; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.cf26-faq { background: #fff; padding-block: clamp(56px, 7.5vw, 120px); }
.cf26-faq__inner { display: flex; align-items: flex-start; gap: clamp(40px, 6vw, 96px); }
.cf26-faq__aside { flex: 0 0 420px; max-width: 420px; }
.cf26-faq__aside .cf26-h2 { margin: 24px 0 24px; }
.cf26-faq__list { flex: 1 1 0; min-width: 0; }

.cf26-faq details {
  border-bottom: 1px solid var(--border);
  padding-block: 28px;
}
.cf26-faq summary {
  display: flex;
  align-items: center;
  gap: 24px;
  cursor: pointer;
  list-style: none;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.3;
  color: var(--navy);
}
.cf26-faq summary::-webkit-details-marker { display: none; }
.cf26-faq summary span { flex: 1 1 auto; min-width: 0; }
.cf26-faq summary i {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--navy);
  font-style: normal;
  font-family: 'Jost', sans-serif;
  font-size: 22px;
  line-height: 1;
  transition: background-color .2s ease, color .2s ease;
}
.cf26-faq summary i::before { content: '+'; }
.cf26-faq details[open] summary i { background: var(--teal); color: #fff; }
.cf26-faq details[open] summary i::before { content: '–'; }
.cf26-faq details p { margin-top: 16px; max-width: 620px; }

/* ==========================================================================
   Final CTA  — dark section #2: teal glow from the top-left
   ========================================================================== */

.cf26-cta {
  padding-block: var(--sec-y);
  background:
    radial-gradient(780px 660px at 4% 4%, rgba(13, 179, 178, .28), rgba(13, 179, 178, 0) 60%),
    linear-gradient(158deg, #1c3548 0%, #182738 46%, #131f2c 100%);
}
.cf26-cta__inner { display: flex; align-items: center; gap: clamp(40px, 6vw, 96px); }
.cf26-cta__copy { flex: 1 1 624px; min-width: 0; }
.cf26-cta__copy .cf26-h2 { color: #fff; margin: 24px 0; max-width: 624px; }
.cf26-cta__copy .cf26-lead { color: var(--on-dark-muted); max-width: 624px; }

.cf26-cta__list { display: flex; flex-direction: column; gap: 14px; margin-top: 40px; }
.cf26-cta__list li { display: flex; align-items: center; gap: 14px; color: #fff; }
.cf26-cta__list li i {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(13, 179, 178, .22);
  color: var(--teal);
  font-style: normal;
  font-size: 13px;
}
.cf26-cta__talk {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  color: var(--on-dark-muted);
}
.cf26-cta__talk a { color: var(--teal); font-family: 'Jost', sans-serif; font-weight: 500; font-size: 18px; }

/* --- lead form ------------------------------------------------------------ */

.cf26-form {
  flex: 0 0 560px;
  max-width: 100%;
  background: #fff;
  border-radius: 28px;
  padding: 44px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
}
.cf26-form h3 {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 20px;
}
.cf26-form__row { display: flex; gap: 16px; }
.cf26-field { flex: 1 1 0; min-width: 0; margin-bottom: 20px; }
.cf26-field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--navy);
  margin-bottom: 8px;
}
.cf26-field input {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--navy);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 15px 18px;
  transition: border-color .2s ease, background-color .2s ease;
}
.cf26-field input::placeholder { color: var(--text-muted); }
.cf26-field input:focus {
  outline: none;
  background: #fff;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(13, 179, 178, .15);
}

.cf26-chips { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cf26-chips input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.cf26-chips label {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 17px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--navy);
  cursor: pointer;
  margin: 0;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cf26-chips label:hover { border-color: var(--teal); }
.cf26-chips input:checked + label { background: var(--teal); border-color: var(--teal); color: #fff; }
.cf26-chips input:focus-visible + label { outline: 2px solid var(--teal); outline-offset: 3px; }

.cf26-form__submit { width: 100%; margin-top: 10px; padding: 20px 32px; }
.cf26-form__note {
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ==========================================================================
   Footer — the teal gradient
   ========================================================================== */

.cf26-footer {
  position: relative;
  color: #fff;
  background:
    radial-gradient(900px 560px at 8% 0%, rgba(13, 179, 178, .42), rgba(13, 179, 178, 0) 60%),
    linear-gradient(112deg, #0a8f8e 0%, #0c6d76 30%, #17324a 66%, #182738 100%);
}
.cf26-footer__top {
  display: flex;
  gap: clamp(32px, 4vw, 64px);
  flex-wrap: wrap;
  padding-block: 80px 40px;
}
.cf26-footer__brand { flex: 1 1 400px; max-width: 400px; }
.cf26-footer__brand p {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
}
.cf26-social { display: flex; gap: 10px; margin-top: 20px; }
.cf26-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  transition: background-color .2s ease;
}
.cf26-social a:hover { background: var(--teal); }

.cf26-fcol { flex: 1 1 200px; }
.cf26-fcol h4 {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 3.3px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}
.cf26-fcol li + li { margin-top: 12px; }
.cf26-fcol a, .cf26-fcol li {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
}
.cf26-fcol a:hover { color: var(--teal); }
.cf26-fcol .cf26-fcol__cta { color: var(--teal); }

.cf26-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 25px 40px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .6);
}
.cf26-footer__bar nav { display: flex; gap: 28px; }
.cf26-footer__bar a:hover { color: #fff; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1400px) {
  .cf26-float-chip { left: auto; right: -16px; }
}

@media (max-width: 1180px) {
  .cf26-nav__links { display: none; }

  .cf26-hero__inner { flex-direction: column; align-items: stretch; }
  .cf26-hero__copy { flex: 1 1 auto; }
  .cf26-hero__visual { flex: 1 1 auto; width: 100%; max-width: 560px; margin: 0 auto; min-height: 640px; }
  .cf26-mock { left: 24px; right: 24px; width: auto; }
  .cf26-float-chip { left: auto; right: 0; top: -14px; }
  .cf26-float-review { left: -8px; top: 470px; }

  .cf26-svc-grid { grid-template-columns: 1fr; }
  .cf26-rev-grid { grid-template-columns: repeat(2, 1fr); }
  .cf26-steps { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }

  .cf26-cta__inner { flex-direction: column; align-items: stretch; }
  .cf26-form { flex: 1 1 auto; }
}

@media (max-width: 960px) {
  .cf26-why__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .cf26-pillars { grid-template-columns: 1fr; }
  .cf26-cases { grid-template-columns: 1fr; }
  .cf26-services__head,
  .cf26-work__head,
  .cf26-reviews__head { flex-direction: column; align-items: flex-start; }
  .cf26-faq__inner { flex-direction: column; }
  .cf26-faq__aside { flex: 1 1 auto; max-width: none; }
  .cf26-logos__inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .cf26-logos__label { flex: 0 0 auto; }
  .cf26-logos__row { justify-content: flex-start; gap: 16px 28px; }
  .cf26-logos__row span { font-size: 18px; }
  .cf26-logos__row .t5 { font-size: 22px; }
}

@media (max-width: 720px) {
  .cf26-hero__visual { min-height: 0; max-width: none; }
  .cf26-mock { position: relative; left: 0; right: 0; top: 0; width: 100%; }
  .cf26-float-chip { display: none; }
  .cf26-float-review { position: relative; left: 0; top: 0; width: 100%; margin-top: 16px; }

  .cf26-rev-grid { grid-template-columns: 1fr; }
  .cf26-steps { grid-template-columns: 1fr; row-gap: 36px; }
  .cf26-step { padding-right: 0; }
  .cf26-step p { padding-right: 0; }

  .cf26-svc { padding: 32px 26px; }
  .cf26-form { padding: 32px 24px; }
  .cf26-form__row { flex-direction: column; gap: 0; }
  .cf26-score { padding: 16px 22px; gap: 14px; }
  .cf26-score__n { font-size: 40px; }

  .cf26-nav__tel { display: none; }
  .cf26-mock__cards { flex-wrap: wrap; }
  .cf26-mock__card { flex: 1 1 40%; }
  .cf26-footer__top { padding-block: 56px 32px; }
}

/* Respect the OS "reduce motion" setting: show the finished chart, hold the
   glows still. */
@media (prefers-reduced-motion: reduce) {
  .cf26-chart span { animation: none; transform: none; opacity: 1; }
  .cf26-hero__glow { animation: none; }
  .cf26 * { transition-duration: .01ms !important; }
}

/* ==========================================================================
   Footer accent contrast

   In Figma the footer sits on flat navy, so the brand teal reads cleanly as
   an accent. This build puts the teal gradient behind it instead, which
   leaves teal-on-teal in the logo and the column headings. These lift those
   accents to a paler teal so they stay legible across the whole sweep.
   ========================================================================== */

.cf26-footer .cf26-logo--light i,
.cf26-footer .cf26-logo--light b { color: #7ff0ee; }
.cf26-footer .cf26-logo--light b { background: #7ff0ee; }
.cf26-fcol h4 { color: #7ff0ee; }
.cf26-fcol .cf26-fcol__cta { color: #7ff0ee; }
.cf26-fcol a:hover { color: #fff; }

/* ==========================================================================
   ==========================================================================
   STICKY HEADER, MEGA MENU & GLASS LAYER
   Added after the base build. Rules here intentionally come last so they
   override the solid card backgrounds defined above.
   ==========================================================================
   ========================================================================== */

.cf26 {
  /* Shared glass recipe. Keep the blur modest — these surfaces are large and
     backdrop-filter is the expensive part. */
  --glass-blur: saturate(180%) blur(16px);
  --glass-edge: rgba(255, 255, 255, .55);

  /* sticky positioning needs a scrollport ancestor, and overflow clipping on
     the root would trap it — the hero clips its own glows instead. */
  overflow: visible;
}

/* in-page anchors must clear the sticky header */
.cf26 [id] { scroll-margin-top: 104px; }

/* ==========================================================================
   Header — sticky, glass, shrinks on scroll
   ========================================================================== */

.cf26-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(227, 232, 236, .75);
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.cf26-nav.is-stuck {
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 34px -12px rgba(24, 39, 56, .18);
}

/* WordPress pins its admin bar to the top for logged-in users, so the sticky
   header has to start below it. Below 782px the admin bar scrolls away. */
.admin-bar .cf26-nav { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .cf26-nav { top: 0; }
}

.cf26-nav__inner {
  padding-block: 22px;
  transition: padding-block .32s cubic-bezier(.4, 0, .2, 1);
}
.cf26-nav.is-stuck .cf26-nav__inner { padding-block: 11px; }

/* --- logo (real brand asset) ---------------------------------------------- */

.cf26-logo { line-height: 0; }
.cf26-logo img {
  display: block;
  height: 30px;
  width: auto;
  transition: height .32s cubic-bezier(.4, 0, .2, 1);
}
.cf26-nav.is-stuck .cf26-logo img { height: 24px; }
.cf26-footer .cf26-logo img { height: 28px; }

.cf26-nav.is-stuck .cf26-btn--sm { padding: 11px 24px; }

/* ==========================================================================
   Nav items + mega triggers
   ========================================================================== */

.cf26-nav__links { gap: 34px; }
.cf26-nav__item { position: static; display: flex; align-items: center; }

.cf26-nav__link,
.cf26-nav__trigger {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.085px;
  color: var(--navy);
  transition: color .2s ease;
}
.cf26-nav__link:hover,
.cf26-nav__trigger:hover { color: var(--teal); }
.cf26-nav__trigger svg {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  transition: transform .25s ease;
}
.cf26-nav__item.is-open > .cf26-nav__trigger { color: var(--teal); }
.cf26-nav__item.is-open > .cf26-nav__trigger svg { transform: rotate(180deg); }

/* --- hamburger ------------------------------------------------------------ */

.cf26-nav__toggle {
  display: none;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 42px;
  height: 42px;
  padding: 11px 9px;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 0 auto;
}
.cf26-nav__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--navy);
  transition: transform .28s ease, opacity .2s ease;
}
.cf26-nav.is-nav-open .cf26-nav__toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.cf26-nav.is-nav-open .cf26-nav__toggle span:nth-child(2) { opacity: 0; }
.cf26-nav.is-nav-open .cf26-nav__toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ==========================================================================
   Mega menu
   ========================================================================== */

.cf26-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 5;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border-top: 1px solid rgba(227, 232, 236, .8);
  border-bottom: 1px solid rgba(227, 232, 236, .8);
  box-shadow: 0 34px 60px -24px rgba(24, 39, 56, .22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.cf26-nav__item.is-open .cf26-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.cf26-mega__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  padding-block: 40px 44px;
}
.cf26-mega__inner--wide { grid-template-columns: minmax(0, 1fr); }

.cf26-mega__label {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 18px;
}

.cf26-mega__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 24px;
}
.cf26-mega__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid transparent;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.cf26-mega__item:hover {
  background: rgba(255, 255, 255, .72);
  border-color: var(--glass-edge);
  transform: translateX(3px);
}
.cf26-mega__item svg { width: 40px; height: 40px; flex: 0 0 auto; }
.cf26-mega__item strong {
  display: block;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--navy);
}
.cf26-mega__item em {
  display: block;
  font-style: normal;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: 3px;
}

/* promo card in the right-hand column */
.cf26-mega__promo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px;
  border-radius: 22px;
  border: 1px solid var(--glass-edge);
  background:
    radial-gradient(420px 260px at 80% 0%, rgba(13, 179, 178, .22), rgba(13, 179, 178, 0) 70%),
    rgba(227, 246, 246, .55);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.cf26-mega__promo h4 {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  color: var(--navy);
}
.cf26-mega__promo p { font-size: 15px; line-height: 1.55; color: var(--text-muted); }
.cf26-mega__promo .cf26-btn { margin-top: 4px; }

/* case-study cards inside the Our Work mega */
.cf26-mega__cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cf26-mega__case {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: transform .22s ease, box-shadow .22s ease;
}
.cf26-mega__case:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -16px rgba(24, 39, 56, .28); }
.cf26-mega__thumb {
  display: block;
  height: 96px;
  background: var(--navy);
  padding: 18px;
}
.cf26-mega__thumb--teal { background: var(--teal); }
.cf26-mega__thumb i,
.cf26-mega__thumb u {
  display: block;
  border-radius: 3px;
  text-decoration: none;
}
.cf26-mega__thumb i { height: 5px; width: 38px; background: var(--teal); }
.cf26-mega__thumb--teal i { background: #fff; }
.cf26-mega__thumb u { height: 9px; margin-top: 9px; background: rgba(255, 255, 255, .9); }
.cf26-mega__thumb u.s { width: 58%; background: rgba(255, 255, 255, .45); }
.cf26-mega__case span {
  display: block;
  padding: 16px 18px 18px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.3;
  color: var(--navy);
}
.cf26-mega__case span em {
  display: block;
  font-style: normal;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--teal-dark);
  margin-top: 5px;
}
.cf26-mega__foot {
  grid-column: 1 / -1;
  padding-top: 8px;
}

/* ==========================================================================
   Glass on the content surfaces
   Light sections get a gentle translucency + highlight edge; the surfaces
   sitting over gradients get the real frosted treatment.
   ========================================================================== */

.cf26-float-chip,
.cf26-float-review {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
}

.cf26-pillar {
  background: rgba(245, 247, 248, .66);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  backdrop-filter: saturate(150%) blur(10px);
}

.cf26-svc {
  background: rgba(34, 52, 73, .55);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-color: rgba(255, 255, 255, .12);
}
.cf26-svc:hover { background: rgba(34, 52, 73, .72); }

.cf26-case {
  background: rgba(255, 255, 255, .66);
  border-color: var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.cf26-rev,
.cf26-score {
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* the lead form stays the most opaque of the set — it has to stay readable */
.cf26-form {
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.cf26-faq summary i { background: rgba(245, 247, 248, .8); }

/* ==========================================================================
   Mega menu + header: tablet / mobile
   Below 1180px the links collapse into a glass drawer and each mega panel
   becomes an inline expanding group, reusing the exact same markup.
   ========================================================================== */

@media (max-width: 1180px) {
  .cf26-nav__toggle { display: flex; }

  .cf26-nav__links {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    padding: 10px var(--gutter) 28px;
    gap: 0;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border-bottom: 1px solid rgba(227, 232, 236, .8);
    box-shadow: 0 34px 60px -24px rgba(24, 39, 56, .22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .24s ease, transform .24s ease, visibility .24s;
  }
  .cf26-nav.is-nav-open .cf26-nav__links {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .cf26-nav__item { display: block; border-bottom: 1px solid rgba(227, 232, 236, .7); }
  .cf26-nav__item:last-child { border-bottom: 0; }
  .cf26-nav__link,
  .cf26-nav__trigger {
    width: 100%;
    justify-content: space-between;
    padding-block: 17px;
    font-size: 19px;
  }

  .cf26-mega {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
  }
  .cf26-nav__item.is-open .cf26-mega { display: block; }

  .cf26-mega__inner,
  .cf26-mega__inner--wide {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding: 4px 0 22px;
  }
  .cf26-mega__grid { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cf26-mega__item { padding: 11px 0; }
  .cf26-mega__item:hover { transform: none; background: none; border-color: transparent; }
  .cf26-mega__cases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cf26-mega__promo { padding: 22px; }
}

@media (max-width: 640px) {
  .cf26-mega__cases { grid-template-columns: minmax(0, 1fr); }
  .cf26-logo img { height: 26px; }
  .cf26-nav.is-stuck .cf26-logo img { height: 22px; }
}

/* The drawer animates open; honour reduce-motion here too. */
@media (prefers-reduced-motion: reduce) {
  .cf26-nav__inner,
  .cf26-logo img,
  .cf26-mega,
  .cf26-nav__links { transition: none !important; }
}

/* Correction: `.cf26-mega__case span` above is broad enough to also catch the
   thumbnail span, which would give it the caption's padding and font. Re-assert
   the thumbnail's own box. */
.cf26-mega__case > span.cf26-mega__thumb {
  padding: 18px;
  font-size: 0;
}

/* --------------------------------------------------------------------------
   Sticky-header prerequisite

   hello-elementor / the Elementor kit set `overflow-x: hidden` on html+body.
   Because `hidden` on one axis forces the other axis from `visible` to `auto`,
   that turns <body> into a scroll container — and a sticky child then sticks
   to <body>'s own scrollport, which is exactly as tall as the content, so it
   never appears to stick at all.

   `clip` does the same horizontal clipping but is NOT a scroll container, and
   is the one value allowed to sit next to `visible` without promoting it.
   The :has() scoping keeps this from touching any other page if this file is
   ever enqueued site-wide.
   -------------------------------------------------------------------------- */
html:has(.cf26),
body:has(.cf26) {
  overflow-x: clip;
  overflow-y: visible;
}

/* --------------------------------------------------------------------------
   Nested backdrop-filter fix

   An element with backdrop-filter establishes a "backdrop root" for its
   descendants — they can only sample what that ancestor painted. The mega
   panel and the mobile drawer are children of .cf26-nav, so while the header
   itself carried the blur those panels sampled an empty backdrop and rendered
   as flat translucent sheets with the page showing through unblurred.

   So the header's glass moves to a ::before that covers only the bar. The
   panels are siblings of that pseudo-element rather than descendants, so they
   get their own backdrop root against the page and frost properly.
   -------------------------------------------------------------------------- */

.cf26-nav {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
  box-shadow: none;
}
.cf26-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(227, 232, 236, .75);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.cf26-nav.is-stuck::before {
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 34px -12px rgba(24, 39, 56, .18);
}
.cf26-nav__inner { position: relative; z-index: 1; }

/* now that they own their backdrop, the panels can be a touch more
   transparent and lean harder on the blur */
.cf26-mega {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
}

@media (max-width: 1180px) {
  .cf26-nav__links {
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    backdrop-filter: saturate(180%) blur(30px);
  }
}

/* ==========================================================================
   ==========================================================================
   ROUND 3 — logo marquee, service link contrast, mobile mega polish
   ==========================================================================
   ========================================================================== */

/* --------------------------------------------------------------------------
   "Learn more" links on the dark Services cards

   Brand teal on navy-2 sits too close in value to the card and reads as part
   of the surface. A paler teal keeps the accent on-brand but lifts it well
   clear of the background (roughly 11:1 against the card).
   -------------------------------------------------------------------------- */

.cf26-svc__foot .cf26-link {
  color: #7ff0ee;
  font-weight: 500;
}
.cf26-svc__foot .cf26-link:hover { color: #fff; }
.cf26-svc__foot { border-top-color: rgba(255, 255, 255, .16); }

/* --------------------------------------------------------------------------
   Client logo marquee

   All white, no dividers — the strip reads as one continuous white band with
   the row drifting through it and dissolving at both ends.

   Each <li> is a drop-in slot: replace the <span> with
   <img src="…" alt="Brand name"> and the sizing/greyscale rules below take
   over with no other change.
   -------------------------------------------------------------------------- */

.cf26-logos { background: #fff; }
.cf26-logos__inner { gap: clamp(24px, 3vw, 48px); padding-block: 44px; }

.cf26-marquee {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

/* the white fade at each end */
.cf26-marquee::before,
.cf26-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(48px, 9%, 120px);
  z-index: 2;
  pointer-events: none;
}
.cf26-marquee::before {
  left: 0;
  background: linear-gradient(90deg, #fff 18%, rgba(255, 255, 255, 0) 100%);
}
.cf26-marquee::after {
  right: 0;
  background: linear-gradient(270deg, #fff 18%, rgba(255, 255, 255, 0) 100%);
}

.cf26-marquee__track {
  display: flex;
  width: max-content;
  animation: cf26-marquee 38s linear infinite;
  will-change: transform;
}
.cf26-marquee:hover .cf26-marquee__track,
.cf26-marquee:focus-within .cf26-marquee__track { animation-play-state: paused; }

/* two identical sets, so translating exactly -50% lands seamlessly */
@keyframes cf26-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.cf26-marquee__set {
  display: flex;
  align-items: center;
  gap: clamp(48px, 5vw, 76px);
  padding-right: clamp(48px, 5vw, 76px);
  flex: 0 0 auto;
  margin: 0;
}
.cf26-marquee__set li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  flex: 0 0 auto;
}

/* real logo files, once they exist */
.cf26-marquee__set img {
  max-height: 46px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
  transition: filter .25s ease, opacity .25s ease;
}
.cf26-marquee__set li:hover img { filter: none; opacity: 1; }

/* the interim wordmark placeholders */
.cf26-marquee__set span {
  font-family: 'Jost', sans-serif;
  font-size: 22px;
  line-height: 1.3;
  color: var(--navy);
  opacity: .45;
  white-space: nowrap;
  transition: opacity .25s ease;
}
.cf26-marquee__set li:hover span { opacity: .75; }
.cf26-marquee__set .t1 { font-weight: 600; letter-spacing: 2.64px; }
.cf26-marquee__set .t2 { font-weight: 500; }
.cf26-marquee__set .t3 { font-weight: 400; letter-spacing: 2.64px; }
.cf26-marquee__set .t4 { font-weight: 600; }
.cf26-marquee__set .t5 { font-weight: 600; font-size: 28px; }

@media (max-width: 960px) {
  .cf26-logos__inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .cf26-marquee { width: 100%; }
  .cf26-marquee__set span { font-size: 19px; }
  .cf26-marquee__set .t5 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .cf26-marquee__track { animation: none; }
}

/* --------------------------------------------------------------------------
   Mobile mega panels — a little more structure

   The drawer reuses the desktop mega markup, so give the expanded groups a
   tinted well and keep the promo card and case thumbs feeling deliberate
   rather than like a flat list.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .cf26-nav__item.is-open > .cf26-nav__trigger { color: var(--teal); }

  .cf26-mega__inner,
  .cf26-mega__inner--wide {
    background: rgba(245, 247, 248, .72);
    border: 1px solid var(--glass-edge);
    border-radius: 18px;
    padding: 18px 16px;
    margin-bottom: 16px;
  }
  .cf26-mega__label { margin-bottom: 10px; font-size: 12px; }
  .cf26-mega__item {
    gap: 14px;
    padding: 12px 8px;
    border-radius: 12px;
  }
  .cf26-mega__item + .cf26-mega__item { border-top: 1px solid rgba(227, 232, 236, .9); }
  .cf26-mega__item svg { width: 34px; height: 34px; }
  .cf26-mega__item strong { font-size: 17px; }
  .cf26-mega__item em { font-size: 13.5px; }
  .cf26-mega__promo { padding: 20px; border-radius: 16px; }
  .cf26-mega__promo h4 { font-size: 20px; }
  .cf26-mega__foot { padding-top: 4px; }
}

/* very narrow phones: keep the header bar from crowding */
@media (max-width: 420px) {
  .cf26-nav__actions { gap: 10px; }
  .cf26-nav__actions .cf26-btn--sm { padding: 10px 16px; font-size: 16px; }
  .cf26-logo img { height: 24px; }
  .cf26-nav.is-stuck .cf26-logo img { height: 21px; }
  .cf26-mega__cases { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Small-phone header fit

   At 390px the content box is 340px and logo + actions came to exactly that,
   which forced "Get a free audit" onto two lines. Tighten the gaps, the logo
   and the button so the CTA stays a single-line pill with room to spare.
   -------------------------------------------------------------------------- */

.cf26-nav__actions .cf26-btn { white-space: nowrap; }

@media (max-width: 440px) {
  .cf26-nav__inner { gap: 12px; }
  .cf26-nav__actions { gap: 8px; }
  .cf26-nav__actions .cf26-btn--sm { padding: 10px 15px; font-size: 15px; }
  .cf26-nav.is-stuck .cf26-nav__actions .cf26-btn--sm { padding: 9px 15px; }
  .cf26-nav__toggle { width: 38px; height: 38px; padding: 10px 7px; }
  .cf26-logo img { height: 22px; }
  .cf26-nav.is-stuck .cf26-logo img { height: 20px; }
}

/* ==========================================================================
   Real client logos in the marquee

   The five files have very different proportions (Detox California is 5.48:1,
   Ascend is 1.38:1), so a single max-height would make the wide wordmark
   dominate and the stacked lockups look tiny. Each logo gets its own cap,
   chosen so the *ink* reads at a similar visual weight rather than a matching
   pixel height. Hatch carries ~13% transparent padding at the bottom of its
   file, so it is sized a little taller to compensate.
   ========================================================================== */

.cf26-marquee__set li { height: 64px; }

.cf26-marquee__set img {
  max-height: 64px;
  max-width: 240px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .6;
  transition: filter .3s ease, opacity .3s ease;
}
.cf26-marquee__set li:hover img { filter: none; opacity: 1; }

.cf26-brand--detox   img { max-height: 40px; }  /* wide single-line wordmark */
.cf26-brand--sierra  img { max-height: 58px; }
.cf26-brand--hatch   img { max-height: 60px; }  /* padded file */
.cf26-brand--ascend  img { max-height: 60px; }
.cf26-brand--newleaf img { max-height: 54px; }

/* Ten logos per set (the five, twice) keeps the track comfortably wider than
   the viewport at every breakpoint, so the -50% loop never exposes a gap. */
.cf26-marquee__track { animation-duration: 55s; }

@media (max-width: 960px) {
  .cf26-marquee__set li { height: 52px; }
  .cf26-brand--detox   img { max-height: 32px; }
  .cf26-brand--sierra  img { max-height: 48px; }
  .cf26-brand--hatch   img { max-height: 50px; }
  .cf26-brand--ascend  img { max-height: 50px; }
  .cf26-brand--newleaf img { max-height: 45px; }
}

/* --------------------------------------------------------------------------
   Logo presence

   grayscale + 60% opacity was tuned against bold text placeholders. Real marks
   are finer, and these five start at very different lightnesses — Detox
   California's thin gold wordmark all but vanished while Hatch stayed strong.
   Darkening and adding a little contrast pulls them to a common weight, and
   the higher opacity stops the row reading as a ghost.

   For full colour instead, delete the `filter` line and set opacity to 1.
   -------------------------------------------------------------------------- */

.cf26-marquee__set img {
  filter: grayscale(1) brightness(.62) contrast(1.12);
  opacity: .82;
}
.cf26-marquee__set li:hover img { filter: none; opacity: 1; }

/* ==========================================================================
   ==========================================================================
   ROUND 4 — colour logos, continuous scroll, softer hero glow
   ==========================================================================
   ========================================================================== */

/* --------------------------------------------------------------------------
   Client logos in full brand colour, and the row never stops
   -------------------------------------------------------------------------- */

.cf26-marquee__set img,
.cf26-marquee__set li:hover img {
  filter: none;
  opacity: 1;
}

/* the marquee keeps moving through hover and focus */
.cf26-marquee:hover .cf26-marquee__track,
.cf26-marquee:focus-within .cf26-marquee__track {
  animation-play-state: running;
}

/* --------------------------------------------------------------------------
   Let the hero glow flow down instead of being guillotined

   .cf26-hero clips its own overflow (it has to — the glows are far wider than
   the page), so the teal wash stopped dead in a hard horizontal line right
   above "Trusted by behavioral health leaders". Rather than unclipping — which
   would drop a tinted blob on top of the white logo strip and fight the
   marquee's white edge fades — the hero dissolves to white across its last
   240px, so the wash runs out naturally and the boundary disappears.

   The overlay sits in the positioned layer at z-index auto, below
   .cf26-hero__inner (z-index 1), so it veils only the glows, never the copy.
   -------------------------------------------------------------------------- */

.cf26-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 240px;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .55) 45%,
    rgba(255, 255, 255, .88) 78%,
    #fff 100%);
}

/* --------------------------------------------------------------------------
   Mobile hero glow

   The glows are sized in absolute pixels, so on a 390px screen the 900px blob
   covered the entire hero and sat directly behind the headline. On stacked
   layouts they shrink to roughly a third, drop to about half the intensity and
   tuck into the top-right / bottom-left corners, well clear of the text.
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  .cf26-hero__glow--a {
    width: 380px;
    height: 380px;
    right: -190px;
    top: -120px;
    background: radial-gradient(circle at center,
      rgba(13, 179, 178, .15) 0%,
      rgba(13, 179, 178, .07) 40%,
      rgba(13, 179, 178, 0) 70%);
  }
  .cf26-hero__glow--b {
    width: 320px;
    height: 320px;
    left: -180px;
    bottom: -110px;
    background: radial-gradient(circle at center,
      rgba(13, 179, 178, .12) 0%,
      rgba(13, 179, 178, 0) 68%);
  }
  .cf26-hero::after { height: 170px; }
}

@media (max-width: 560px) {
  .cf26-hero__glow--a { width: 320px; height: 320px; right: -175px; top: -95px; }
  .cf26-hero__glow--b { width: 270px; height: 270px; left: -160px; bottom: -95px; }
}

/* ==========================================================================
   ==========================================================================
   ROUND 5 — real case studies, no menu highlight
   ==========================================================================
   ========================================================================== */

/* --------------------------------------------------------------------------
   Menu items: no highlight box on interaction

   Nothing in the page's own CSS draws a background on these, but a dragged
   click can still select the label text (the <a> items are selectable even
   though <button> is not), and touch devices paint a tap-highlight rectangle.
   Both are suppressed here, and the page gets a branded ::selection so any
   text that does get selected reads teal rather than a browser default.
   -------------------------------------------------------------------------- */

.cf26-nav__links a,
.cf26-nav__link,
.cf26-nav__trigger,
.cf26-nav__toggle,
.cf26-logo,
.cf26-btn {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.cf26 ::selection { background: rgba(13, 179, 178, .22); color: var(--navy); }
.cf26 ::-moz-selection { background: rgba(13, 179, 178, .22); color: var(--navy); }

/* --------------------------------------------------------------------------
   Case study cards — real client screenshots

   Four live case studies (Sierra Meadows, Ascend, Detox California, New Leaf),
   each linking to its own page. The whole card is the link. Screenshots are
   anchored to the top so the client's header and hero stay visible in the crop.
   -------------------------------------------------------------------------- */

.cf26-cases { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cf26-case { text-decoration: none; }

.cf26-case__shot {
  display: block;
  height: 200px;
  overflow: hidden;
  background: var(--teal-tint);
  border-bottom: 1px solid var(--border);
}
.cf26-case__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .45s ease;
}
.cf26-case:hover .cf26-case__shot img { transform: scale(1.05); }

.cf26-case__body {
  flex: 1 1 auto;
  padding: 22px 24px 26px;
  gap: 12px;
}
.cf26-case__body .cf26-h3 { font-size: clamp(18px, 1.45vw, 21px); }
.cf26-case__body .cf26-link { font-size: 16px; margin-top: auto; }

@media (max-width: 1180px) {
  .cf26-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cf26-cases { grid-template-columns: minmax(0, 1fr); }
  .cf26-case__shot { height: 190px; }
}

/* --- the same four inside the Our Work mega panel ------------------------- */

.cf26-mega__cases { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cf26-mega__shot {
  display: block;
  height: 92px;
  overflow: hidden;
  background: var(--teal-tint);
}
.cf26-mega__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.cf26-mega__case span.cf26-mega__shot { padding: 0; font-size: 0; }

@media (max-width: 1180px) {
  .cf26-mega__cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cf26-mega__cases { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   ==========================================================================
   ROUND 6 — hard-transparent menu items, mobile flyout menu
   ==========================================================================
   ========================================================================== */

/* --------------------------------------------------------------------------
   Top-level menu items can never paint a background

   A CSSOM sweep of every stylesheet on this page finds no rule that sets a
   background on these elements in any state (hover, active, focus), including
   via custom properties — so the tint being reported is coming from outside
   the page's own CSS. This nails them shut regardless: child combinators keep
   it to the top-level items so the mega panel's own hover tint survives.
   -------------------------------------------------------------------------- */

.cf26-nav__links > .cf26-nav__item > a,
.cf26-nav__links > .cf26-nav__item > .cf26-nav__trigger,
.cf26-nav__link,
.cf26-nav__trigger,
.cf26-nav__toggle,
.cf26-logo {
  background-color: transparent !important;
  background-image: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   Mobile menu — slide-in flyout
   ========================================================================== */

/* hidden entirely on desktop */
.cf26-nav__scrim,
.cf26-nav__panelhead,
.cf26-nav__panelfoot { display: none; }

@media (max-width: 1180px) {

  /* --- tap-anywhere-outside backdrop ------------------------------------ */
  .cf26-nav__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(18, 30, 44, .45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s;
  }
  .cf26-nav.is-nav-open .cf26-nav__scrim {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* --- the panel -------------------------------------------------------- */
  .cf26-nav__links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 120;
    width: min(88vw, 400px);
    max-height: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    backdrop-filter: saturate(180%) blur(30px);
    border-bottom: 0;
    border-left: 1px solid rgba(255, 255, 255, .6);
    box-shadow: -30px 0 70px -24px rgba(24, 39, 56, .4);
    opacity: 1;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform .36s cubic-bezier(.4, 0, .2, 1), visibility .36s;
  }
  .cf26-nav.is-nav-open .cf26-nav__links {
    transform: none;
    visibility: visible;
  }

  /* clear the WP admin bar for logged-in users */
  .admin-bar .cf26-nav__links,
  .admin-bar .cf26-nav__scrim { top: 32px; }

  /* --- panel header ----------------------------------------------------- */
  .cf26-nav__panelhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 auto;
    padding: 15px 18px;
    border-bottom: 1px solid rgba(227, 232, 236, .9);
    background: rgba(255, 255, 255, .72);
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .cf26-nav__panelhead img { display: block; height: 24px; width: auto; }
  .cf26-nav__close {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    cursor: pointer;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface);
    color: var(--navy);
    font-family: 'Jost', sans-serif;
    font-size: 24px;
    line-height: 1;
    transition: background-color .2s ease, color .2s ease;
  }
  .cf26-nav__close:hover { background: var(--navy); color: #fff; }

  /* --- items ------------------------------------------------------------ */
  .cf26-nav__item {
    flex: 0 0 auto;
    padding-inline: 20px;
  }
  .cf26-nav__link,
  .cf26-nav__trigger { padding-block: 16px; font-size: 18px; }

  /* --- CTA block pinned under everything -------------------------------- */
  .cf26-nav__panelfoot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 auto;
    margin-top: auto;
    padding: 20px 20px calc(24px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(227, 232, 236, .9);
    background: rgba(245, 247, 248, .72);
  }
  .cf26-nav__panelfoot .cf26-btn {
    width: 100%;
    padding: 15px 24px;
    font-size: 17px;
  }
  .cf26-nav__meta {
    text-align: center;
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-muted);
  }
  .cf26-nav__meta b { display: block; color: var(--navy); font-weight: 500; }
  .cf26-nav__meta i { font-style: normal; color: var(--teal); letter-spacing: 1.5px; }
}

/* --------------------------------------------------------------------------
   Flyout transition — don't animate `visibility`

   Transitioning `visibility` alongside `transform` left the panel frozen at
   its closed values: the cascade resolved correctly (the open rule won, and
   even an inline `!important` could not move it) but the computed transform
   never advanced. Setting `transition: none` released it instantly, which
   pins the cause on the visibility transition rather than specificity.

   The dependable pattern is to transition transform + opacity only, and to
   switch `visibility` with a zero-duration delayed step: instant on open, and
   held until after the slide on close, so the panel stays hit-testable for
   the whole animation and is properly removed afterwards.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .cf26-nav__links {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
      transform .36s cubic-bezier(.4, 0, .2, 1),
      opacity .26s ease,
      visibility 0s linear .36s;
  }
  .cf26-nav.is-nav-open .cf26-nav__links {
    transform: none;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition:
      transform .36s cubic-bezier(.4, 0, .2, 1),
      opacity .2s ease,
      visibility 0s linear 0s;
  }

  .cf26-nav__scrim {
    transition: opacity .3s ease, visibility 0s linear .3s;
  }
  .cf26-nav.is-nav-open .cf26-nav__scrim {
    transition: opacity .3s ease, visibility 0s linear 0s;
  }
}

@media (max-width: 1180px) and (prefers-reduced-motion: reduce) {
  .cf26-nav__links,
  .cf26-nav.is-nav-open .cf26-nav__links { transition: none; }
}

/* The desktop nav sets `align-items: center` for its horizontal row. The
   flyout reuses the same element as a column, where that value shrink-wraps
   every child to its text width and centres it. Stretch them back out. */
@media (max-width: 1180px) {
  .cf26-nav__links { align-items: stretch; }
  .cf26-nav__link,
  .cf26-nav__trigger { width: 100%; justify-content: space-between; text-align: left; }
}

/* The panel's backdrop-filter samples whatever sits behind it — which is the
   dark scrim — so at .94 the whole menu picked up a grey cast. Push it close
   to opaque so the menu stays light and legible; the blur still softens the
   edge without dragging the scrim's darkness through. */
@media (max-width: 1180px) {
  .cf26-nav__links { background: rgba(255, 255, 255, .97); }
  .cf26-nav__panelhead { background: rgba(255, 255, 255, .9); }
  .cf26-nav__scrim { background: rgba(18, 30, 44, .38); }
}

/* ==========================================================================
   THE PINK: hello-elementor's button styling

   hello-elementor ships
     button:hover, button:focus,
     [type=button]:hover, [type=button]:focus,
     [type=submit]:hover, [type=submit]:focus { background-color: #cc3366; }

   — a dark magenta. It lands on every <button> in the page, which is why the
   menu triggers (Services / Our Work are <button>s, the plain links are <a>s)
   flashed pink on hover and focus. At (0,1,1) it also out-specifies our own
   single-class button rules on :focus.

   The nav trigger/toggle are already forced transparent above; these restore
   the intended colour for the remaining buttons at a specificity that beats
   the theme in every state.
   ========================================================================== */

.cf26 button:hover,
.cf26 button:focus,
.cf26 button:active,
.cf26 [type="button"]:hover,
.cf26 [type="button"]:focus,
.cf26 [type="submit"]:hover,
.cf26 [type="submit"]:focus { background-color: transparent; }

/* primary buttons keep the brand teal in every state */
.cf26 button.cf26-btn--primary,
.cf26 button.cf26-btn--primary:focus,
.cf26 button.cf26-btn--primary:active { background-color: var(--teal); }
.cf26 button.cf26-btn--primary:hover { background-color: var(--teal-dark); }

/* outline buttons */
.cf26 button.cf26-btn--outline,
.cf26 button.cf26-btn--outline:focus { background-color: transparent; }
.cf26 button.cf26-btn--outline:hover { background-color: var(--navy); }

/* the flyout's close button */
.cf26 .cf26-nav__close,
.cf26 .cf26-nav__close:focus,
.cf26 .cf26-nav__close:active { background-color: var(--surface); }
.cf26 .cf26-nav__close:hover { background-color: var(--navy); }

/* menu controls stay clear in every state */
.cf26 .cf26-nav__trigger:hover,
.cf26 .cf26-nav__trigger:focus,
.cf26 .cf26-nav__trigger:active,
.cf26 .cf26-nav__toggle:hover,
.cf26 .cf26-nav__toggle:focus,
.cf26 .cf26-nav__toggle:active { background-color: transparent; }

/* ==========================================================================
   ==========================================================================
   INNER PAGES — shared patterns for the site-wide preview
   Every preview page is: [shell header] + page hero + sections +
   [shell CTA] + [shell footer].
   ==========================================================================
   ========================================================================== */

/* --- page hero ------------------------------------------------------------ */

.cf26-phero {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding-block: clamp(48px, 6vw, 96px) clamp(40px, 5vw, 76px);
}
.cf26-phero__glow {
  position: absolute;
  right: -180px;
  top: -240px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at center,
    rgba(13, 179, 178, .24) 0%,
    rgba(13, 179, 178, .10) 40%,
    rgba(13, 179, 178, 0) 70%);
}
.cf26-phero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 180px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.85) 70%, #fff);
}
.cf26-phero__inner { position: relative; z-index: 1; max-width: 880px; }
.cf26-phero h1 {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.8px;
  color: var(--navy);
  margin-top: 20px;
}
.cf26-phero h1 em { font-style: normal; color: var(--teal); }
.cf26-phero .cf26-lead { margin-top: 22px; max-width: 720px; }
.cf26-phero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* --- generic section ------------------------------------------------------ */

.cf26-sec { padding-block: clamp(56px, 7vw, 108px); }
.cf26-sec--surface { background: var(--surface); }
.cf26-sec--tint { background: var(--teal-tint); }
.cf26-sec--white { background: #fff; }
.cf26-sec--dark {
  background:
    radial-gradient(760px 560px at 90% 100%, rgba(13, 179, 178, .20), rgba(13, 179, 178, 0) 62%),
    linear-gradient(200deg, #182738 0%, #1b2f44 54%, #16283a 100%);
}
.cf26-sec--dark .cf26-h2,
.cf26-sec--dark h3 { color: #fff; }
.cf26-sec--dark .cf26-lead,
.cf26-sec--dark .cf26-body { color: var(--on-dark-muted); }

.cf26-shead { max-width: 780px; margin-bottom: clamp(36px, 4vw, 56px); }
.cf26-shead .cf26-h2 { margin-top: 20px; }
.cf26-shead .cf26-lead { margin-top: 18px; }

/* --- cards ---------------------------------------------------------------- */

.cf26-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cf26-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cf26-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

.cf26-card {
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--glass-edge);
  border-radius: 24px;
  padding: 32px;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.cf26-card--surface { background: rgba(245, 247, 248, .72); }
.cf26-card--dark {
  background: rgba(34, 52, 73, .55);
  border-color: rgba(255, 255, 255, .1);
}
.cf26-card--dark h3 { color: #fff; }
.cf26-card--dark p { color: var(--on-dark-muted); }
.cf26-card h3 {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  color: var(--navy);
  margin-bottom: 10px;
}
.cf26-card > svg { width: 56px; height: 56px; margin-bottom: 18px; }
.cf26-card .cf26-num { margin-bottom: 18px; }

/* --- checklist ------------------------------------------------------------ */

.cf26-checks { display: flex; flex-direction: column; gap: 13px; }
.cf26-checks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--navy);
}
.cf26-checks li::before { content: '✓'; color: var(--teal); flex: 0 0 auto; }
.cf26-sec--dark .cf26-checks li { color: #fff; }

/* --- split row ------------------------------------------------------------ */

.cf26-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.cf26-split + .cf26-split { margin-top: clamp(48px, 6vw, 88px); }
.cf26-split__shot {
  display: block;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px -24px rgba(24, 39, 56, .3);
  background: var(--teal-tint);
}
.cf26-split__shot img { display: block; width: 100%; height: auto; }
.cf26-split h2 { margin-bottom: 18px; }
.cf26-split .cf26-checks { margin-top: 22px; }

/* --- team ----------------------------------------------------------------- */

.cf26-team { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 20px; }
.cf26-team figure { margin: 0; }
.cf26-team img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top center;
  border-radius: 20px;
  background: var(--teal-tint);
}
.cf26-team figcaption { margin-top: 14px; }
.cf26-team strong {
  display: block;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.3;
  color: var(--navy);
}
.cf26-team span {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* --- stat / empty --------------------------------------------------------- */

.cf26-empty {
  text-align: center;
  padding: clamp(48px, 6vw, 80px) 24px;
  border: 1px dashed var(--border);
  border-radius: 24px;
  background: rgba(245, 247, 248, .6);
}
.cf26-empty h3 {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--navy);
  margin-bottom: 12px;
}
.cf26-empty p { max-width: 520px; margin-inline: auto; }

/* --- preview ribbon ------------------------------------------------------- */

.cf26-ribbon {
  background: var(--navy);
  color: #fff;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  padding: 9px 20px;
  letter-spacing: .3px;
}
.cf26-ribbon b { color: var(--teal); font-weight: 500; }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 1180px) {
  .cf26-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf26-team { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .cf26-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf26-split { grid-template-columns: minmax(0, 1fr); }
  .cf26-split__shot { order: -1; }
  .cf26-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cf26-phero__glow { width: 420px; height: 420px; right: -200px; top: -150px; }
}
@media (max-width: 640px) {
  .cf26-grid2,
  .cf26-grid3,
  .cf26-grid4 { grid-template-columns: minmax(0, 1fr); }
  .cf26-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf26-card { padding: 26px 22px; }
}

/* ==========================================================================
   ==========================================================================
   ROUND 7 — smaller team avatars, case-study data components
   ==========================================================================
   ========================================================================== */

/* --------------------------------------------------------------------------
   Team avatars

   The headshot files are circular portraits on a transparent background, so
   the square tile + teal-tint fill behind them read as a box around a circle.
   Drop the fill, round the element to match the artwork, and cap the size —
   at five across a 1280px grid they were rendering 240px wide.
   -------------------------------------------------------------------------- */

.cf26-team { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 20px; }
.cf26-team figure { text-align: center; }
.cf26-team img {
  width: 100%;
  max-width: 132px;
  margin-inline: auto;
  background: none;
  border-radius: 50%;
}
.cf26-team figcaption { margin-top: 12px; }
.cf26-team strong { font-size: 16px; }
.cf26-team span { font-size: 13px; }

@media (max-width: 1180px) { .cf26-team { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .cf26-team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  {
  .cf26-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf26-team img { max-width: 116px; }
}

/* --------------------------------------------------------------------------
   Case study: headline stat row
   -------------------------------------------------------------------------- */

.cf26-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.cf26-stat {
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--glass-edge);
  border-radius: 22px;
  padding: 28px 26px;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.cf26-stat b {
  display: block;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 3.2vw, 46px);
  line-height: 1.04;
  letter-spacing: -1px;
  color: var(--teal-dark);
}
.cf26-stat span {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
}
.cf26-sec--dark .cf26-stat { background: rgba(34, 52, 73, .5); border-color: rgba(255, 255, 255, .1); }
.cf26-sec--dark .cf26-stat b { color: #7ff0ee; }
.cf26-sec--dark .cf26-stat span { color: var(--on-dark-muted); }

/* --------------------------------------------------------------------------
   Case study: conversion funnel

   Bars are drawn strictly to scale against the top figure — the value sits
   outside the bar so the narrow stages stay readable without inflating them.
   -------------------------------------------------------------------------- */

.cf26-funnel { display: flex; flex-direction: column; gap: 18px; }
.cf26-funnel__row {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
}
.cf26-funnel__label { font-size: 16px; line-height: 1.4; color: var(--navy); }
.cf26-funnel__track {
  height: 52px;
  border-radius: 12px;
  background: rgba(13, 179, 178, .10);
  overflow: hidden;
}
.cf26-funnel__bar {
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--teal), var(--teal-dark));
  transform-origin: left center;
  animation: cf26-funnel-grow 1.1s cubic-bezier(.22, 1, .36, 1) both;
}
.cf26-funnel__row:nth-child(2) .cf26-funnel__bar { animation-delay: .12s; }
.cf26-funnel__row:nth-child(3) .cf26-funnel__bar { animation-delay: .24s; }
@keyframes cf26-funnel-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.cf26-funnel__val {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
  color: var(--navy);
  white-space: nowrap;
}
.cf26-funnel__val i {
  display: block;
  font-style: normal;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 5px;
}

.cf26-sec--dark .cf26-funnel__label { color: #fff; }
.cf26-sec--dark .cf26-funnel__track { background: rgba(255, 255, 255, .08); }
.cf26-sec--dark .cf26-funnel__val { color: #fff; }
.cf26-sec--dark .cf26-funnel__val i { color: var(--on-dark-muted); }

@media (max-width: 860px) {
  .cf26-funnel__row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  .cf26-funnel__label { grid-column: 1 / -1; font-size: 15px; }
  .cf26-funnel__track { height: 40px; }
  .cf26-funnel__val { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   Case study: fact strip + strategy timeline
   -------------------------------------------------------------------------- */

.cf26-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  padding: 22px 0;
  border-block: 1px solid var(--border);
}
.cf26-facts div { min-width: 140px; }
.cf26-facts dt {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--teal);
}
.cf26-facts dd {
  margin: 6px 0 0;
  font-size: 17px;
  line-height: 1.4;
  color: var(--navy);
}

.cf26-steps2 { display: flex; flex-direction: column; gap: 0; }
.cf26-step2 {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 24px;
  padding-block: 28px;
  border-bottom: 1px solid var(--border);
}
.cf26-step2:last-child { border-bottom: 0; }
.cf26-step2 h3 {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  color: var(--navy);
  margin-bottom: 10px;
}
.cf26-sec--dark .cf26-step2 { border-color: rgba(255, 255, 255, .12); }

@media (max-width: 640px) {
  .cf26-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf26-step2 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .cf26-funnel__bar { animation: none; }
}

/* The funnel track is a grid item so it gets blockified automatically, but the
   bar inside it is a plain <span> in a non-flex parent — it stayed inline, so
   its width/height were ignored and every bar measured 0. */
.cf26-funnel__track { display: block; }
.cf26-funnel__bar { display: block; }

/* ==========================================================================
   ==========================================================================
   ROUND 8 — scroll reveal
   The hidden state is scoped to .cf26-anim, which the shell only adds once
   JavaScript is running and motion is allowed. If the script never executes,
   nothing is ever hidden — content degrades to fully visible.
   ==========================================================================
   ========================================================================== */

.cf26-anim [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .75s cubic-bezier(.22, 1, .36, 1),
    transform .75s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
  will-change: opacity, transform;
}
.cf26-anim [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* the big page screenshots get a slightly richer entrance */
.cf26-anim .cf26-split__shot[data-reveal] {
  transform: translateY(34px) scale(.985);
}
.cf26-anim .cf26-split__shot[data-reveal].is-in { transform: none; }

/* checklist items sweep in from the left instead of up */
.cf26-anim .cf26-checks li[data-reveal] { transform: translateX(-16px); }
.cf26-anim .cf26-checks li[data-reveal].is-in { transform: none; }

/* stat cards lift a touch further */
.cf26-anim .cf26-stat[data-reveal] { transform: translateY(32px); }
.cf26-anim .cf26-stat[data-reveal].is-in { transform: none; }

/* once revealed, drop will-change so we are not holding layers forever */
.cf26-anim [data-reveal].is-in { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  .cf26-anim [data-reveal],
  .cf26-anim [data-reveal].is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   Long-form case study helpers
   -------------------------------------------------------------------------- */

.cf26-lede {
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.55;
  color: var(--navy);
  max-width: 820px;
}
.cf26-sec--dark .cf26-lede { color: #fff; }

.cf26-prose { max-width: 760px; }
.cf26-prose p + p { margin-top: 20px; }

/* numbered detail blocks used for the SEO / build deep-dives */
.cf26-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cf26-detail__item {
  border-top: 2px solid var(--teal);
  padding-top: 20px;
}
.cf26-detail__item h4 {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.3;
  color: var(--navy);
  margin-bottom: 10px;
}
.cf26-sec--dark .cf26-detail__item { border-top-color: #7ff0ee; }
.cf26-sec--dark .cf26-detail__item h4 { color: #fff; }

/* before / after */
.cf26-ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cf26-ba__card {
  border-radius: 24px;
  padding: 32px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .7);
}
.cf26-ba__card--after {
  border-color: rgba(13, 179, 178, .35);
  background:
    radial-gradient(420px 260px at 90% 0%, rgba(13, 179, 178, .14), rgba(13, 179, 178, 0) 70%),
    rgba(227, 246, 246, .5);
}
.cf26-ba__card span {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.cf26-ba__card--after span { color: var(--teal-dark); }

@media (max-width: 860px) {
  .cf26-detail { grid-template-columns: minmax(0, 1fr); }
  .cf26-ba { grid-template-columns: minmax(0, 1fr); }
}

/* Strategy steps on dark sections: teal titles (the navy default blended into the dark background) */
.cf26-sec--dark .cf26-step2 h3 { color: var(--teal); }
/* Card titles inside dark sections: teal (a later `.cf26-card h3` navy rule was overriding the white) */
.cf26-sec--dark .cf26-card--dark h3 { color: var(--teal); }
/* Service icons in the teal tile (Organic Search page) */
.cf26-num--icon { color: #fff; }
.cf26-num--icon svg { width: 30px; height: 30px; display: block; }

/* Mega menu + mobile flyout: solid white. The frosted glass turned muddy grey-blue over the navy sections. */
@media (min-width: 1181px) {
  .cf26-mega {
    top: calc(100% + 10px);
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid rgba(227, 232, 236, .95);
    border-radius: 24px;
    box-shadow: 0 34px 70px -24px rgba(24, 39, 56, .38);
  }
  /* invisible bridge over the 10px gap so the hover menu doesn't close on the way down */
  .cf26-mega::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
}
@media (max-width: 1180px) {
  .cf26-nav__links { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Case-study hero: copy left, laptop + phone mockup right */
.cf26-phero--split .cf26-phero__inner {
  max-width: calc(1280px + var(--gutter) * 2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.cf26-phero__art img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(24, 39, 56, .12)); }
@media (max-width: 960px) {
  .cf26-phero--split .cf26-phero__inner { grid-template-columns: minmax(0, 1fr); }
  .cf26-phero__art { max-width: 620px; }
}

/* Case-study facts: three icon cards instead of a flat grey bar */
.cf26-facts {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: -36px;
  padding: 0;
  border: 0;
}
.cf26-facts div {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-content: start;
  column-gap: 16px;
  min-width: 0;
  padding: 26px 26px 28px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 22px 48px -28px rgba(24, 39, 56, .32);
  overflow: hidden;
  transition: box-shadow .35s ease, border-color .35s ease;
}
.cf26-facts div:hover { box-shadow: 0 28px 56px -26px rgba(13, 179, 178, .45); border-color: rgba(13, 179, 178, .35); }
.cf26-facts div::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), #7ff0ee);
}
.cf26-facts div::before {
  content: '';
  grid-row: 1 / span 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(13, 179, 178, .14) center / 24px 24px no-repeat;
}
.cf26-facts div:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ff0ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.cf26-facts div:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ff0ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3Cpath d='M3.22 12H9.5l.5-1 2 4.5 2-7 1.5 3.5h5.27'/%3E%3C/svg%3E"); }
.cf26-facts div:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ff0ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E"); }
.cf26-facts dt { grid-column: 2; margin-top: 4px; }
.cf26-facts dd { grid-column: 2; margin-top: 8px; font-size: 18px; line-height: 1.45; font-weight: 500; }
@media (max-width: 860px) {
  .cf26-facts { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: -24px; }
  .cf26-facts div { padding: 22px; }
}

/* Facts cards v2: dark gradient cards, home-page-style icons (light-green circle + two rotating dashed rings), white band */
.cf26-sec--surface:has(> .cf26-wrap > .cf26-facts) { background: #fff; padding-bottom: clamp(32px, 4vw, 56px); }
.cf26-facts div {
  column-gap: 28px;
  padding: 28px 28px 30px;
  border: 1px solid rgba(255, 255, 255, .08);
  background:
    linear-gradient(90deg, #0db3b2, #7ff0ee) top / 100% 3px no-repeat,
    radial-gradient(260px 200px at 100% 100%, rgba(13, 179, 178, .28), rgba(13, 179, 178, 0) 70%),
    linear-gradient(200deg, #182738 0%, #1b2f44 54%, #16283a 100%);
  box-shadow: 0 26px 52px -26px rgba(24, 39, 56, .55);
  overflow: visible;
}
.cf26-facts div:hover { border-color: rgba(127, 240, 238, .35); box-shadow: 0 30px 60px -24px rgba(13, 179, 178, .45); }
.cf26-facts div::before { background-color: rgba(13, 179, 178, .2); }
/* ring 1 (was the accent bar) */
.cf26-facts div::after {
  left: 19px; top: 19px; right: auto;
  width: 70px; height: 70px;
  border-radius: 50%;
  background: none;
  border: 1.5px dashed rgba(13, 179, 178, .7);
  animation: cf26-orbit 24s linear infinite;
}
/* ring 2 */
.cf26-facts dt::before {
  content: '';
  position: absolute;
  left: 10px; top: 10px;
  width: 88px; height: 88px;
  border-radius: 50%;
  border: 1.5px dashed rgba(127, 240, 238, .35);
  animation: cf26-orbit 36s linear infinite reverse;
  pointer-events: none;
}
.cf26-facts div:hover::after { animation-duration: 12s; border-color: rgba(127, 240, 238, .85); }
.cf26-facts dt { color: #7ff0ee; }
.cf26-facts dd { color: #fff; }
@keyframes cf26-orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cf26-facts div::after, .cf26-facts dt::before { animation: none; } }
@media (max-width: 860px) { .cf26-facts div { padding: 24px; } .cf26-facts div::after { left: 15px; top: 15px; } .cf26-facts dt::before { left: 6px; top: 6px; } }
/* facts cards: no top accent line, no border */
.cf26-facts div {
  border-color: transparent;
  background:
    radial-gradient(260px 200px at 100% 100%, rgba(13, 179, 178, .28), rgba(13, 179, 178, 0) 70%),
    linear-gradient(200deg, #182738 0%, #1b2f44 54%, #16283a 100%);
}
.cf26-facts div:hover { border-color: transparent; }

/* About team: names in the section-heading style, titles in teal body text */
.cf26-team strong {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: var(--navy);
}
.cf26-team span {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--teal);
}
@media (max-width: 560px) { .cf26-team strong { font-size: 18px; } .cf26-team span { font-size: 13.5px; } }
/* the theme italicises figcaption; keep team names and titles upright */
.cf26-team figcaption, .cf26-team strong, .cf26-team span { font-style: normal; }

/* audit form status + invalid fields */
.cf26-form__msg { margin-top: 14px; font-size: 15px; line-height: 1.5; font-weight: 500; }
.cf26-form__msg:empty { display: none; }
.cf26-form__msg.is-ok { color: #0a8f8e; }
.cf26-form__msg.is-err { color: #c0392b; }
.cf26-form [aria-invalid="true"] { border-color: #c0392b !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, .12) !important; }
.cf26-form__submit:disabled { opacity: .7; cursor: wait; }

/* Mobile menu: the blurred scrim sat above .cf26-nav__inner (z-index 1), which contains the panel,
   so the menu looked fuzzy and taps hit the scrim. Put the scrim beneath the bar + panel. */
.cf26-nav__scrim { z-index: 0 !important; }
.cf26-nav__inner { position: relative; z-index: 1; }
/* no scroll anchoring jumps while the sticky header resizes */
html:has(.cf26) { overflow-anchor: none; }

/* Nav parents are links (Services -> /services/, Our Work -> /case-studies/); a separate chevron button toggles the submenu */
.cf26-has-mega { display: inline-flex; align-items: center; gap: 2px; }
.cf26 a.cf26-nav__trigger { text-decoration: none; }
.cf26 .cf26-nav__sub {
  -webkit-appearance: none; appearance: none; display: inline-grid; place-items: center;
  width: 26px; height: 32px; padding: 0; margin: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--navy); cursor: pointer;
}
.cf26 .cf26-nav__sub:hover, .cf26 .cf26-nav__sub:focus, .cf26 .cf26-nav__sub:active { background: transparent; color: var(--teal); }
.cf26 .cf26-nav__sub:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.cf26-nav__sub svg { width: 10px; height: 10px; transition: transform .25s ease; }
.cf26-nav__item.is-open > .cf26-nav__sub { color: var(--teal); }
.cf26-nav__item.is-open > .cf26-nav__sub svg { transform: rotate(180deg); }
.cf26-nav__item.is-open > a.cf26-nav__trigger { color: var(--teal); }
@media (max-width: 1180px) {
  .cf26-has-mega { display: flex; flex-wrap: wrap; align-items: center; }
  .cf26-has-mega > a.cf26-nav__trigger { flex: 1 1 auto; width: auto; }
  .cf26 .cf26-nav__sub { width: 48px; height: 48px; flex: 0 0 auto; }
  .cf26 .cf26-nav__sub svg { width: 14px; height: 14px; }
  .cf26-has-mega > .cf26-mega { flex: 0 0 100%; }
  /* Our Work: plain link on mobile, no dropdown */
  .cf26-nav__item--flat-m > .cf26-nav__sub, .cf26-nav__item--flat-m > .cf26-mega { display: none !important; }
}

/* Mega menu hover: smoother, softer (desktop) */
@media (min-width: 1181px) {
  .cf26-mega__item {
    background-color: rgba(227, 246, 246, 0);
    box-shadow: 0 0 0 rgba(24, 39, 56, 0);
    transition: background-color .45s cubic-bezier(.22, .8, .3, 1), border-color .45s cubic-bezier(.22, .8, .3, 1),
                transform .5s cubic-bezier(.22, .8, .3, 1), box-shadow .5s cubic-bezier(.22, .8, .3, 1);
  }
  .cf26-mega__item:hover {
    background-color: rgba(227, 246, 246, .65);
    border-color: rgba(13, 179, 178, .18);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -18px rgba(13, 110, 110, .35);
  }
  .cf26-mega__item svg { transition: transform .5s cubic-bezier(.22, .8, .3, 1); }
  .cf26-mega__item:hover svg { transform: translateY(-2px) scale(1.06); }
  .cf26-mega__item strong { transition: color .4s ease; }
  .cf26-mega__item:hover strong { color: #0a8f8e; }

  .cf26-mega__case { transition: transform .55s cubic-bezier(.22, .8, .3, 1), box-shadow .55s cubic-bezier(.22, .8, .3, 1); }
  .cf26-mega__case:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -20px rgba(24, 39, 56, .3); }
  .cf26-mega__shot img { transition: transform .9s cubic-bezier(.22, .8, .3, 1); }
  .cf26-mega__case:hover .cf26-mega__shot img { transform: scale(1.04); }

  .cf26-mega__foot .cf26-link span { display: inline-block; transition: transform .4s cubic-bezier(.22, .8, .3, 1); }
  .cf26-mega__foot .cf26-link:hover span { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .cf26-mega__item, .cf26-mega__item svg, .cf26-mega__case, .cf26-mega__shot img { transition: none !important; }
}
/* `.cf26-nav__links a { transition: color .2s }` (0,1,1) was beating the item rules (0,1,0) and killing every
   hover transition, which is why items snapped. Re-assert at (0,2,1). */
@media (min-width: 1181px) {
  .cf26-nav__links a.cf26-mega__item {
    transition: background-color .45s cubic-bezier(.22, .8, .3, 1), border-color .45s cubic-bezier(.22, .8, .3, 1),
                transform .5s cubic-bezier(.22, .8, .3, 1), box-shadow .5s cubic-bezier(.22, .8, .3, 1), color .4s ease;
  }
  .cf26-nav__links a.cf26-mega__case { transition: transform .55s cubic-bezier(.22, .8, .3, 1), box-shadow .55s cubic-bezier(.22, .8, .3, 1); }
  .cf26-nav__links a.cf26-link { transition: color .35s ease; }
}

/* ---------- Home hero, phones: condensed (was ~1,810px tall) ---------- */
@media (max-width: 720px) {
  .cf26-hero { padding-block: 28px 44px; }
  .cf26-hero__inner { gap: 34px; }
  .cf26-hero .cf26-lead { margin-top: 14px; }
  .cf26-hero__ctas { margin-top: 22px; gap: 10px; }
  .cf26-trust { margin-top: 18px; gap: 6px 14px; }
  /* compact mock: cards stay in one row, shorter chart, tighter padding */
  .cf26-hero__visual { position: relative; padding-bottom: 58px; }
  .cf26-mock__hero { padding: 18px 18px 20px; }
  .cf26-mock__kicker { width: 60px; height: 6px; }
  .cf26-mock__h { margin-top: 10px; font-size: 19px; }
  .cf26-mock__line { height: 6px; margin-top: 10px; }
  .cf26-mock__line--2 { margin-top: 7px; }
  .cf26-mock__btns { margin-top: 14px; gap: 8px; }
  .cf26-mock__btn { font-size: 12px; padding: 7px 12px; }
  .cf26-mock__cards { flex-wrap: nowrap; gap: 8px; padding: 14px 16px; }
  .cf26-mock__card { flex: 1 1 0; padding: 10px; border-radius: 11px; }
  .cf26-mock__ico { width: 20px; height: 20px; border-radius: 6px; }
  .cf26-mock__card p { margin-top: 7px; font-size: 12px; }
  .cf26-mock__bar { height: 4px; margin-top: 7px; }
  .cf26-mock__bar--s { margin-top: 5px; }
  .cf26-chart { height: 64px; gap: 6px; padding: 0 16px 16px; }
  .cf26-chart span { border-radius: 4px; }
  .cf26-chart span:nth-child(1) { height: 16px; } .cf26-chart span:nth-child(2) { height: 21px; } .cf26-chart span:nth-child(3) { height: 18px; }
  .cf26-chart span:nth-child(4) { height: 27px; } .cf26-chart span:nth-child(5) { height: 25px; } .cf26-chart span:nth-child(6) { height: 34px; }
  .cf26-chart span:nth-child(7) { height: 32px; } .cf26-chart span:nth-child(8) { height: 43px; } .cf26-chart span:nth-child(9) { height: 41px; }
  .cf26-chart span:nth-child(10) { height: 52px; } .cf26-chart span:nth-child(11) { height: 57px; } .cf26-chart span:nth-child(12) { height: 64px; }
  /* review floats over the corner of the mock instead of stacking below it */
  .cf26 .cf26-float-review { position: absolute; left: -6px; right: auto; top: auto; bottom: 0; width: 76%; margin: 0; padding: 14px 16px; z-index: 3; }
  .cf26 .cf26-float-review p { font-size: 13.5px; line-height: 1.45; }
  .cf26 .cf26-float-review small { font-size: 11.5px; }
  .cf26 .cf26-float-review__top { font-size: 13px; }
}
@media (max-width: 720px) {
  .cf26-hero__copy { gap: 18px; }
  .cf26-hero .cf26-lead, .cf26-hero__ctas, .cf26-trust { margin-top: 0; }
  .cf26-hero__ctas { margin-top: 4px; }
  .cf26-hero__visual { padding-bottom: 112px; }
  .cf26 .cf26-float-review { width: 72%; }
}

/* Eyebrow labels: no decorative line (user request) */
.cf26-eyebrow::before, .cf26-eyebrow::after { content: none !important; display: none !important; }
.cf26-eyebrow { gap: 0; }

/* Header logo a little smaller on desktop */
@media (min-width: 1181px) {
  .cf26-nav .cf26-logo img { height: 25px; }
  .cf26-nav.is-stuck .cf26-logo img { height: 21px; }
}

/* Condensed desktop header: ~74px at top, ~56px when stuck (was 96 / 68) */
@media (min-width: 1181px) {
  .cf26-nav .cf26-nav__inner { padding-block: 14px; transition: padding .3s ease; }
  .cf26-nav.is-stuck .cf26-nav__inner { padding-block: 8px; }
  .cf26-nav .cf26-logo img { height: 22px; transition: height .3s ease; }
  .cf26-nav.is-stuck .cf26-logo img { height: 19px; }
  .cf26-nav .cf26-nav__actions .cf26-btn--sm { padding: 12px 22px; font-size: 16px; }
  .cf26-nav.is-stuck .cf26-nav__actions .cf26-btn--sm { padding: 10px 20px; }
}