/* =====================================================================
   Creative Team as a Service — pricing page (creative-team.html)
   Built from the Figma frame "Pricing //Creative Team as a Service".
   Desktop values are the design's (1440 frame, 1200 content); smaller
   screens reflow the same pieces.
   ===================================================================== */

.ctaas-page { background: var(--c-paper); }
/* same side grid as the home and results pages: 10% each side (the header logo line), 20px on tablet/mobile */
.ct-wrap { margin-inline: var(--gutter, 10%); }
@media (max-width: 991px) { .ct-wrap { margin-inline: 20px; } }
.ct-display { font-family: var(--f-display); font-weight: 400; }
.ct-muted { color: #8e8e8e; }
.ct-eyebrow { margin: 0; font-size: 16px; line-height: 24px; text-transform: uppercase; color: #393939; }
.ct-eyebrow--light { color: var(--c-paper); }
.ct-eyebrow--center { text-align: center; }
.ct-label { margin: 0; font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; }

/* ---------- pill buttons (Pricing/Button: 52px, radius 36, 32px sides, hugs its label) ---------- */
.ct-pill {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 32px; border-radius: 36px; border: 1px solid transparent;
  font-size: 16px; line-height: 24px; white-space: nowrap; text-decoration: none;
  transition: color .45s var(--ease-out) .05s, transform .4s var(--ease-out);
}
.ct-pill::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 100%; width: 150%; aspect-ratio: 1; border-radius: 50%;
  background: var(--fill); transform: translate(-50%, -50%) scale(0); transition: transform .7s var(--ease-out);
}
.ct-pill:hover::before, .ct-pill:focus-visible::before { transform: translate(-50%, -50%) scale(1.15); }
.ct-pill:active { transform: scale(.98); }
.ct-pill--lime { --fill: var(--c-ink); background: var(--c-lime); border-color: var(--c-lime); color: var(--c-ink); }
.ct-pill--lime:hover { color: var(--c-lime); }
.ct-pill--outline-ink { --fill: var(--c-ink); border-color: var(--c-ink); color: var(--c-ink); }
.ct-pill--outline-ink:hover { color: var(--c-paper); }
.ct-pill--outline-light { --fill: var(--c-paper); border-color: var(--c-paper); color: var(--c-paper); }
.ct-pill--outline-light:hover { color: var(--c-ink); }
.ct-pill:focus-visible, .ct-btn:focus-visible, .ct-rate__link:focus-visible { outline: 2px solid var(--c-lime); outline-offset: 3px; }

/* hero buttons (Button 1 / Button 2: 148 × 50, 16px) with the site's inverting hover */
.ct-btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  width: 148px; height: 50px; border-radius: 36px; border: 1px solid var(--c-lime);
  font-size: 16px; line-height: 1; white-space: nowrap; text-decoration: none;
  transition: color .45s var(--ease-out) .05s, transform .4s var(--ease-out);
}
.ct-btn::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 100%; width: 150%; aspect-ratio: 1; border-radius: 50%;
  background: var(--fill); transform: translate(-50%, -50%) scale(0); transition: transform .7s var(--ease-out);
}
.ct-btn:hover::before, .ct-btn:focus-visible::before { transform: translate(-50%, -50%) scale(1.15); }
.ct-btn:active { transform: scale(.98); }
.ct-btn--lime { --fill: var(--c-ink); background: var(--c-lime); color: var(--c-ink); }
.ct-btn--lime:hover { color: var(--c-lime); }
.ct-btn--outline { --fill: var(--c-lime); background: transparent; color: var(--c-lime); }
.ct-btn--outline:hover { color: var(--c-ink); }
@media (prefers-reduced-motion: reduce) { .ct-pill, .ct-pill::before, .ct-btn, .ct-btn::before { transition-duration: .01ms; } }

/* =========================== HERO =========================== */
.ct-hero {
  position: relative; height: 739px; overflow: hidden;
  /* Figma v4 hero: the flipped, cropped and colour-adjusted photo exported as-is for the 1440 x 739 frame */
  background: var(--c-ink) url("../assets/img/ctaas/hero-v4.jpg") no-repeat 100% 0 / cover;
  background-image: image-set(url("../assets/img/ctaas/hero-v4.webp") 1x, url("../assets/img/ctaas/hero-v4@2x.webp") 2x);
}
.ct-hero::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 780px; pointer-events: none;
  background: linear-gradient(90.47deg, rgb(33 29 29 / .56) -18.91%, rgb(33 29 29 / .491) -2.32%, rgb(33 29 29 / .35) 14.82%, rgb(33 29 29 / .353) 18.34%, rgb(33 29 29 / 0) 90.23%);
}
.ct-hero__inner { position: relative; z-index: 1; padding-top: 230px; }
.ct-hero__eyebrow { margin: 0 0 0 3px; font-size: 14px; line-height: 21px; text-transform: uppercase; color: var(--c-paper); }
.ct-hero__title { margin: 17px 0 0; max-width: 651px; font-family: var(--f-display); font-weight: 700; font-size: 72px; line-height: 80px; letter-spacing: 0; color: #fff; }
.ct-hero__lead { margin: 21px 0 0; max-width: 593px; font-size: 18px; line-height: 24px; color: var(--c-paper); }
.ct-hero__actions { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 48px; }

/* ====================== PLANS (paper) ====================== */
.ct-pricing { padding: 34px 0 140px; }
.ct-pricing__head { max-width: 919px; margin-inline: auto; text-align: center; }
.ct-pricing__title { margin: 11px 0 0; min-height: 77px; font-size: 56px; line-height: 72px; font-weight: 400; color: var(--c-ink); }
.ct-pricing__title .ct-display { font-size: 60px; }
.ct-pricing__desc { max-width: 677px; margin: -2px auto 0; font-size: 20px; line-height: 28px; color: #393939; opacity: .9; }
.ct-plans { display: flex; flex-direction: column; gap: 24px; margin-top: 81px; }
.ct-plans__cards { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }

.ct-plan {
  position: relative; flex: 1 0 0; min-width: 300px;
  display: flex; flex-direction: column; gap: 32px; padding: 40px;
  border-radius: 18px; border: .5px solid rgba(178,178,178,.5); background: rgba(255,255,255,.7);
  --muted: #8e8e8e; --accent: var(--muted);
}
/* v2 (Figma "Creative Team as a Service v2"): each tier has its own tint, rising from the top of the card,
   and an accent on its team label */
.ct-plan--growth { background: linear-gradient(7.2deg, #fff 64.64%, #dcd5fb 157.57%); --accent: #5915ff; }
.ct-plan--enterprise { background: linear-gradient(7.2deg, #fff 64.64%, #ffd2c6 157.57%); --accent: #fe572a; }
.ct-plan--featured {
  border-color: #97a900; box-shadow: 3px 4px 36px rgba(240,248,121,.05);
  background: linear-gradient(181.25deg, #fbfee0 10.582%, rgba(255,255,255,.8) 162.95%);
  --muted: #777; --accent: #777;
}
.ct-plan__badge {
  position: absolute; left: 50%; top: -17.5px; transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 172px; height: 31px; padding: 5px 14px;
  border-radius: 33px; background: #393939; color: var(--c-lime);
  font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap;
}
.ct-plan__top { display: flex; flex-direction: column; gap: 16px; }
.ct-plan__tile { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; background: #393939; }
.ct-plan__icon { display: block; width: 32px; height: 32px; }
.ct-plan__head { display: flex; flex-direction: column; gap: 12px; min-height: 134px; }
.ct-plan__title-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; white-space: nowrap; }
.ct-plan__name { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 32px; line-height: 1.3; color: var(--c-ink); }
.ct-plan--featured .ct-plan__name { color: #393939; }
.ct-plan__hours { font-size: 14px; line-height: 22px; color: var(--muted); }
.ct-plan__fit { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); }
.ct-plan__price { display: flex; flex-direction: column; gap: 8px; }
.ct-plan__price-row { margin: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.ct-plan__amount { font-family: var(--f-display); font-size: 40px; line-height: 1; color: var(--c-ink); }
.ct-plan__per { font-size: 16px; line-height: 26px; color: var(--muted); }
.ct-plan__eq { margin: 0; font-size: 14px; line-height: 22px; color: var(--muted); }
.ct-plan__eq strong { font-weight: 500; color: var(--c-ink); }
.ct-plan__cta { width: 100%; }
.ct-plan__team { display: flex; flex-direction: column; gap: 8px; padding-top: 32px; border-top: .5px solid rgba(178,178,178,.5); }
.ct-plan__team-label { color: var(--accent); }
.ct-plan__roles { list-style: none; margin: 0; padding: 0; }
.ct-plan__role { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; font-size: 14px; line-height: 22px; color: var(--c-ink); }
.ct-plan__role img { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.ct-plan__role-text { display: flex; flex-direction: column; }
.ct-plan__role-desc { font-size: 13px; line-height: 20px; color: var(--muted); }
/* roles carried over from the tier below: a label and one quiet line of names */
.ct-plan__from { margin-top: 16px; color: var(--muted); }
.ct-plan__inherited { margin: 0; font-size: 14px; line-height: 22px; color: var(--c-ink); opacity: .75; }
.ct-plan__best { margin: auto 0 0; display: flex; flex-direction: column; gap: 6px; padding-top: 24px; border-top: .5px solid rgba(178,178,178,.5);
  font-size: 14px; line-height: 22px; color: var(--c-ink); }
.ct-plan__best .ct-label { color: var(--muted); }

.ct-rate {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 24px 32px;
  border: 1px solid rgba(178,178,178,.5); border-radius: 18px;
}
.ct-rate__msg { flex: 1 0 0; min-width: 260px; display: flex; align-items: center; gap: 16px; }
.ct-rate__msg img { flex: none; width: 24px; height: 24px; }
.ct-rate__msg p { margin: 0; font-size: 16px; line-height: 26px; color: var(--c-ink); }
.ct-rate__msg strong { font-weight: 500; }
.ct-rate__link { font-size: 16px; line-height: 26px; color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ================= HOW IT WORKS + FIT (dark) ================= */
.ct-dark { background: var(--c-ink); color: var(--c-paper); padding: 140px 0; }
.ct-how__head { display: flex; justify-content: center; }
.ct-how__title { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ct-how__h2 { margin: 0; min-height: 147px; padding-top: 9.5px; font-size: 56px; line-height: 64px; font-weight: 400; color: #fff; }
.ct-how__h2 .ct-display { font-size: 60px; }

/* journey: four steps on one hairline (the current one's segment fills while it plays),
   and one showcase panel underneath where the current step's illustration fades in.
   js/ctaas.js plays through them; without JS the first step and its illustration show. */
.ct-stepper { list-style: none; margin: 80px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ct-stop__btn { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 0 24px 0 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer; }
/* one line runs through the centres of the circles: each segment starts under its circle and ends under the next one */
.ct-stop__mark { position: relative; display: flex; align-items: center; width: 100%; height: 40px; }
.ct-stop__dot { position: relative; z-index: 1; flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; font-weight: 500; color: rgba(242,242,237,.7); background: var(--c-ink); box-shadow: inset 0 0 0 1px rgba(242,242,237,.28);
  transition: background-color .5s var(--ct-ease), color .5s var(--ct-ease), box-shadow .5s var(--ct-ease); }
.ct-stop__line { position: absolute; left: 16px; top: 50%; width: calc(100% + 48px); height: 1px; margin-top: -.5px; background: rgba(242,242,237,.14); overflow: hidden; }
.ct-stop:last-child .ct-stop__line { width: calc(100% + 8px); }   /* step 4 sits on the line too: it runs on to the right edge of the grid, in line with the panel below */
.ct-stop__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--c-lime); }
.ct-stop__when { margin-top: 28px; font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(242,242,237,.45); }
.ct-stop__title { margin-top: 8px; font-size: 22px; line-height: 30px; color: var(--c-paper); transition: color .5s var(--ct-ease); }
.ct-stop__desc { margin-top: 8px; max-width: 280px; font-size: 15px; line-height: 24px; color: rgba(242,242,237,.6); }
.ct-stop.is-done .ct-stop__dot { color: var(--c-ink); background: var(--c-lime); box-shadow: none; }
.ct-stop.is-done .ct-stop__fill { width: 100%; }
.ct-stop.is-active .ct-stop__dot { color: var(--c-ink); background: var(--c-lime); box-shadow: 0 0 0 6px rgba(240,248,121,.16); }
.ct-stop.is-active .ct-stop__title, .ct-stop__btn:hover .ct-stop__title { color: var(--c-lime); }
.ct-stop__btn:focus-visible { outline: 2px solid var(--c-lime); outline-offset: 8px; border-radius: 8px; }

.ct-show { position: relative; margin-top: 64px; height: 560px; border-radius: 24px; overflow: hidden;
  background-color: #262222; border: .5px solid rgba(242,242,237,.14);
  background-image: linear-gradient(rgba(242,242,237,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(242,242,237,.035) 1px, transparent 1px);
  background-size: 40px 40px; background-position: center center; }
.ct-show::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(38,34,34,0) 0%, #262222 100%); opacity: .85; }
.ct-show__layer { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translate3d(0, 18px, 0) scale(.98);
  transition: opacity .7s var(--ct-ease), transform 1s var(--ct-ease), visibility 0s linear .7s; }
.ct-show__layer.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ct-show__layer:not(.is-on) .ct-illo * { animation-play-state: paused !important; }
.ct-illo { width: min(840px, 92%); }
.ct-illo__svg { display: block; width: 100%; height: auto; }

/* fit: "Built for a specific kind of partner firm." */

:root { --ct-ease: cubic-bezier(.16, 1, .3, 1); }

/* illustration motion (same as the approved prototype; connector lines stay solid, as in the design) */
.ct-illo .wave { transform-box: fill-box; transform-origin: 50% 100%; animation: ct-wave .9s ease-in-out infinite alternate; }
@keyframes ct-wave { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
.ct-illo .bob { animation: ct-bob 3.2s ease-in-out infinite; }
@keyframes ct-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.ct-illo .lift { animation: ct-lift 3.2s ease-in-out infinite; }
@keyframes ct-lift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-7px, -7px); } }
.ct-illo .seg { fill: rgba(242,242,237,.14); animation: ct-seg 5s linear infinite; }
@keyframes ct-seg { 0% { fill: rgba(242,242,237,.14); } 4%, 72% { fill: #f0f879; } 78%, 100% { fill: rgba(242,242,237,.14); } }
.ct-illo .pop { animation: ct-pop 5s cubic-bezier(.22,1,.36,1) infinite; }
@keyframes ct-pop { 0%, 12% { opacity: 0; transform: translate(10px, 10px); } 26%, 86% { opacity: 1; transform: translate(0, 0); } 96%, 100% { opacity: 0; transform: translate(0, 0); } }
.ct-illo .sign { stroke-dasharray: 170; animation: ct-sign 5s ease-in-out infinite; }
@keyframes ct-sign { 0%, 18% { stroke-dashoffset: 170; } 58%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 170; } }
.ct-illo .move { animation: ct-move 5s ease-in-out infinite; }
@keyframes ct-move { 0%, 14% { transform: translate(0, 0); fill: rgba(242,242,237,.85); opacity: 1; } 30%, 46% { transform: translate(70px, 0); fill: rgba(242,242,237,.85); } 62%, 88% { transform: translate(140px, 0); fill: #f0f879; opacity: 1; } 95% { transform: translate(140px, 0); opacity: 0; } 100% { transform: translate(0, 0); opacity: 0; } }
.ct-illo .wk { fill: #fbfbf8; }
.ct-illo .wk1 { animation: ct-wk1 5s linear infinite; } .ct-illo .wk2 { animation: ct-wk2 5s linear infinite; }
.ct-illo .wk3 { animation: ct-wk3 5s linear infinite; } .ct-illo .wk4 { animation: ct-wk4 5s linear infinite; }
@keyframes ct-wk1 { 0%, 8% { fill: #fbfbf8; } 12%, 94% { fill: #f0f879; } 100% { fill: #fbfbf8; } }
@keyframes ct-wk2 { 0%, 28% { fill: #fbfbf8; } 32%, 94% { fill: #f0f879; } 100% { fill: #fbfbf8; } }
@keyframes ct-wk3 { 0%, 48% { fill: #fbfbf8; } 52%, 94% { fill: #f0f879; } 100% { fill: #fbfbf8; } }
@keyframes ct-wk4 { 0%, 68% { fill: #fbfbf8; } 72%, 94% { fill: #f0f879; } 100% { fill: #fbfbf8; } }
/* still frame (reduced motion): the same moment the Figma components show */
@media (prefers-reduced-motion: reduce) {
  .ct-illo * { animation: none !important; }
  .ct-illo .seg:nth-of-type(n) { fill: #f0f879; }
  .ct-illo .wk1, .ct-illo .wk2 { fill: #f0f879; }
  .ct-illo .move { transform: translate(70px, 0); fill: rgba(242,242,237,.85); }
}

/* Creative Team hero, Figma "v5": photo (crop + progressive blur) and the overlay layer exported from Figma and
   baked into one image, so photo and shade always move together. The image keeps the Figma scale and stays pinned
   to the right edge at every width; above 1440px the hero grows with the width so the framing never changes. */
.ct-hero--v5 { background-image: url("../assets/img/ctaas/hero-v5.jpg"); background-image: image-set(url("../assets/img/ctaas/hero-v5.webp") 1x, url("../assets/img/ctaas/hero-v5@2x.webp") 2x); background-size: cover; background-position: 100% 0; }
.ct-hero--v5::before { content: none; }
@media (min-width: 992px) { .ct-hero--v5 { height: max(740px, 51.3889vw); } .ct-hero--v5 .ct-hero__inner { padding-top: max(230px, 15.9722vw); } .ct-hero--v5 + .ct-clients { padding-top: 112px; } }
/* Foundations hero (Figma "Fondation" frame): same treatment, its own photo + overlay baked from the Figma exports */
.ct-hero--fd { background-image: url("../assets/img/ctaas/hero-fd.jpg?v=2"); background-image: image-set(url("../assets/img/ctaas/hero-fd.webp?v=2") 1x, url("../assets/img/ctaas/hero-fd@2x.webp?v=2") 2x); background-size: cover; background-position: 100% 0; }
.ct-hero--fd::before { content: none; }
.ct-hero--fd .ct-hero__title { max-width: 701px; }
@media (min-width: 992px) { .ct-hero--fd { height: max(740px, 51.3889vw); } .ct-hero--fd .ct-hero__inner { padding-top: max(230px, 15.9722vw); } .ct-hero--fd + .ct-clients { padding-top: 91px; } }

/* =========================== responsive =========================== */
@media (max-width: 1100px) {
  .ct-hero { background-size: cover; background-position: 72% 0; }
}
@media (max-width: 991px) {
  .ct-hero { height: auto; min-height: 640px; padding-bottom: 80px; }
  .ct-hero__inner { padding-top: 180px; }
  .ct-hero__title { font-size: 56px; line-height: 62px; }
  .ct-pricing__title { font-size: 44px; line-height: 56px; }
  .ct-pricing__title .ct-display { font-size: 48px; }
  .ct-how__h2 { min-height: 0; font-size: 44px; line-height: 52px; padding-top: 0; }
  .ct-how__h2 .ct-display { font-size: 48px; }
  .ct-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; margin-top: 64px; }
  .ct-show { height: auto; aspect-ratio: 16 / 10; }
  /* stacked: each line runs from its circle to the edge of its own column, so nothing points at the wrong step */
  .ct-stop__line { width: calc(100% + 8px); }
}
@media (max-width: 767px) {
  .ct-hero__title { font-size: 44px; line-height: 50px; }
  .ct-hero__lead { font-size: 16px; }
  .ct-hero__actions { gap: 12px; }
  .ct-pricing { padding: 56px 0 96px; }
  .ct-pricing__title { font-size: 34px; line-height: 44px; min-height: 0; }
  .ct-pricing__title .ct-display { font-size: 38px; }
  .ct-pricing__desc { margin-top: 12px; font-size: 17px; line-height: 26px; }
  .ct-plans { margin-top: 56px; }
  .ct-plans__cards { gap: 32px; }
  .ct-plan { padding: 32px 24px; }
  .ct-rate { padding: 20px; }
  .ct-dark { padding: 96px 0; }
  .ct-how__h2 { font-size: 34px; line-height: 42px; }
  .ct-how__h2 .ct-display { font-size: 37px; }
  /* phone: the illustration panel sits above the list, so the picture is in view while the steps play */
  .ct-journey { display: flex; flex-direction: column; }
  .ct-show { order: -1; margin-top: 48px; aspect-ratio: 4 / 3; border-radius: 18px; }
  .ct-stepper { grid-template-columns: minmax(0, 1fr); row-gap: 28px; margin-top: 40px; }
  .ct-stop__when { margin-top: 16px; }
  .ct-stop__desc { max-width: none; }
}

/* ---------- Proof (Figma v4, node 1849:13939) ---------- */
.ct-proof { margin-top: 184px; display: flex; flex-direction: column; gap: 80px; }
.ct-proof__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.ct-proof__title { display: flex; flex-direction: column; gap: 8px; width: 476px; max-width: 100%; }
.ct-proof__h2 { margin: 0; font-size: 56px; line-height: 68px; font-weight: 400; color: #b2b2b2; }
.ct-proof__h2 .ct-display { font-size: 64px; color: var(--c-paper); }
.ct-proof__body { margin: 0; padding-top: 44px; width: 440px; max-width: 100%; font-size: 16px; line-height: 26px; color: var(--c-paper); }
.ct-proof__card { margin: 0; display: grid; grid-template-columns: 515fr 685fr; min-height: 679px; border: .5px solid rgba(178,178,178,.5); border-radius: 18px; overflow: hidden; }
.ct-proof__testimonial { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 48px; padding: 48px; border-right: 1px solid rgba(242,242,237,.16); min-width: 0; }
.ct-proof__logo { display: block; width: 190px; height: auto; }
.ct-proof__say { display: flex; flex-direction: column; gap: 32px; max-width: 375px; }
.ct-proof__quote { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 24px; }   /* padding/border: Webflow styles bare blockquotes */
.ct-proof__mark { display: block; width: 64px; height: 44px; }
.ct-proof__quote p { margin: 0; font-size: 26px; line-height: 34px; color: #efefeb; }
.ct-proof__quote-lead { font-family: var(--f-display); font-size: 28px; color: var(--c-lime); }
.ct-proof__person { display: flex; flex-direction: column; }
.ct-proof__person strong { font-weight: 600; font-size: 16px; line-height: 26px; color: var(--c-paper); }
.ct-proof__person span { font-size: 12px; line-height: 26px; color: #b2b2b2; }
.ct-proof__link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-size: 18px; line-height: 24px; color: var(--c-paper); text-decoration: none; }
.ct-proof__link img { display: block; width: 16px; height: 11px; transition: transform .35s var(--ease-out, ease); }
.ct-proof__link:hover img, .ct-proof__link:focus-visible img { transform: translateX(5px); }
.ct-proof__link:focus-visible { outline: 2px solid var(--c-lime); outline-offset: 4px; border-radius: 2px; }
.ct-proof__showcase { position: relative; min-width: 0; min-height: 574px; }
.ct-proof__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.ct-proof__stats { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; display: flex; align-items: flex-end; gap: 48px; padding: 48px; border-top: 1px solid rgba(242,242,237,.16); background: linear-gradient(90deg, #211d1d 0%, rgba(33,29,29,.92) 100%); }
.ct-proof__stat { display: flex; flex-direction: column; gap: 16px; padding-right: 48px; }
.ct-proof__stat + .ct-proof__stat { padding-right: 0; }
.ct-proof__stat:first-child { border-right: .5px solid rgba(142,142,142,.5); }
.ct-proof__num { font-family: var(--f-display); font-weight: 400; font-size: 40px; line-height: 44px; letter-spacing: -.8px; color: var(--c-paper); white-space: nowrap; }
.ct-proof__label { margin: 0; display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--c-paper); white-space: nowrap; }
.ct-proof__label span + span { color: rgba(242,242,237,.66); }
@media (prefers-reduced-motion: reduce) { .ct-proof__link img { transition: none; } }
@media (max-width: 1100px) {
  .ct-proof__body { width: 360px; }
  .ct-proof__card { grid-template-columns: 46fr 54fr; }
  .ct-proof__testimonial { padding: 40px 36px; }
  .ct-proof__quote p { font-size: 22px; line-height: 30px; }
  .ct-proof__quote-lead { font-size: 24px; }
  .ct-proof__stats { padding: 32px; gap: 28px; }
  .ct-proof__stat { padding-right: 28px; }
  .ct-proof__num { font-size: 34px; line-height: 40px; }
  .ct-proof__label { letter-spacing: 1px; font-size: 11px; }
}
@media (max-width: 991px) {
  .ct-proof { margin-top: 140px; gap: 48px; }
  .ct-proof__head { flex-direction: column; gap: 24px; }
  .ct-proof__body { padding-top: 0; width: 560px; }
  .ct-proof__h2 { font-size: 44px; line-height: 52px; }
  .ct-proof__h2 .ct-display { font-size: 48px; }
  .ct-proof__card { grid-template-columns: 1fr; min-height: 0; }
  .ct-proof__showcase { min-height: 0; aspect-ratio: 688 / 560; }
  .ct-proof__testimonial { order: 2; border-right: 0; padding: 40px; }
  .ct-proof__say { max-width: 560px; }
  .ct-proof__stats { padding: 32px 40px; gap: 40px; }
  .ct-proof__stat { padding-right: 40px; }
  .ct-proof__num { font-size: 40px; line-height: 44px; }
  .ct-proof__label { letter-spacing: 1.4px; font-size: 12px; }
}
@media (max-width: 600px) {
  .ct-proof { margin-top: 112px; }
  .ct-proof__h2 { font-size: 34px; line-height: 42px; }
  .ct-proof__h2 .ct-display { font-size: 39px; }
  .ct-proof__showcase { aspect-ratio: auto; display: flex; flex-direction: column; }
  .ct-proof__photo { position: static; aspect-ratio: 4 / 3.4; height: auto; }
  .ct-proof__stats { position: static; flex-direction: column; align-items: stretch; gap: 20px; padding: 24px 22px; background: none; }
  .ct-proof__stat, .ct-proof__stat + .ct-proof__stat { padding-right: 0; }
  .ct-proof__stat:first-child { border-right: 0; border-bottom: .5px solid rgba(142,142,142,.5); padding-bottom: 20px; }
  .ct-proof__stat { gap: 10px; }
  .ct-proof__num { font-size: 34px; line-height: 40px; }
  .ct-proof__testimonial { padding: 28px 22px; gap: 36px; border-top: 1px solid rgba(242,242,237,.16); }
  .ct-proof__logo { width: 150px; }
  .ct-proof__quote p { font-size: 20px; line-height: 29px; }
  .ct-proof__quote-lead { font-size: 22px; }
  .ct-proof__mark { width: 48px; height: 33px; }
}

/* ---------- FAQ (Figma v4, section "FAQ" + component FAQ/Item) ---------- */
.ct-faq { background: var(--c-paper); padding: 140px 0; }
.ct-faq__head { display: flex; flex-direction: column; }
.ct-faq__h2 { margin: 8px 0 0; font-family: var(--f-display); font-weight: 400; font-size: 56px; line-height: 68px; color: #393939; }
.ct-faq__lead { margin: 16px 0 0; max-width: 562px; font-size: 18px; line-height: 26px; color: #393939; }
.ct-faq__ask { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ct-faq__ask:hover { text-decoration-color: rgb(57 57 57 / .4); }
.ct-faq__list { margin-top: 64px; border-top: 1px solid rgba(178,178,178,.5); interpolate-size: allow-keywords; }
.ct-faq__item { border-bottom: 1px solid rgba(178,178,178,.5); }
.ct-faq__q { list-style: none; display: grid; grid-template-columns: 56px 1fr 44px; column-gap: 32px; align-items: start; padding: 32px 0; cursor: pointer; transition: padding .35s var(--ease-out, ease); }
.ct-faq__q::-webkit-details-marker { display: none; }
.ct-faq__item[open] > .ct-faq__q { padding-bottom: 12px; }
.ct-faq__num { font-family: var(--f-display); font-size: 20px; line-height: 32px; color: #8e8e8e; }
.ct-faq__question { font-weight: 500; font-size: 22px; line-height: 32px; color: #393939; transition: color .25s ease; }
.ct-faq__toggle { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(178,178,178,.5); color: var(--c-ink); transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.ct-faq__toggle svg { grid-area: 1 / 1; display: block; transition: opacity .25s ease, transform .35s var(--ease-out, ease); }
.ct-faq__minus { opacity: 0; transform: rotate(-90deg); }
.ct-faq__item[open] .ct-faq__toggle { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }
.ct-faq__item[open] .ct-faq__plus { opacity: 0; transform: rotate(90deg); }
.ct-faq__item[open] .ct-faq__minus { opacity: 1; transform: none; }
.ct-faq__q:hover .ct-faq__question { color: var(--c-ink); }
.ct-faq__q:hover .ct-faq__toggle { border-color: var(--c-ink); }
.ct-faq__q:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 4px; border-radius: 4px; }
.ct-faq__a { padding: 0 76px 40px 88px; }
.ct-faq__a p { margin: 0; max-width: 760px; font-size: 16px; line-height: 26px; color: #6f6b66; }
.ct-faq__a strong { font-weight: 600; color: #393939; }
.ct-faq__link { font-weight: 500; color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
.ct-faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--ease-out, ease), content-visibility .4s allow-discrete; }
.ct-faq__item[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
  .ct-faq__item::details-content, .ct-faq__q, .ct-faq__toggle, .ct-faq__toggle svg { transition: none; }
}
@media (max-width: 991px) {
  .ct-faq { padding: 120px 0; }
  .ct-faq__h2 { font-size: 44px; line-height: 52px; }
  .ct-faq__list { margin-top: 48px; }
}
@media (max-width: 767px) {
  .ct-faq { padding: 96px 0; }
  .ct-faq__q { grid-template-columns: 32px 1fr 36px; column-gap: 16px; padding: 24px 0; }
  .ct-faq__item[open] > .ct-faq__q { padding-bottom: 10px; }
  .ct-faq__num { font-size: 16px; line-height: 28px; }
  .ct-faq__question { font-size: 18px; line-height: 28px; }
  .ct-faq__toggle { width: 36px; height: 36px; }
  .ct-faq__toggle svg { width: 16px; height: 16px; }
  .ct-faq__a { padding: 0 0 28px 48px; }
}
@media (max-width: 600px) {
  .ct-faq__h2 { font-size: 34px; line-height: 42px; }
  .ct-faq__lead { font-size: 16px; }
}

/* >>> plans-grow (ported from the canvas artboard PlansGrow) */
.ct-grow { background: #f2f2ed; padding: 60px 0 140px; color: #211d1d; }
.ct-grow * { box-sizing: border-box; }
.ct-grow .label { font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: #8e8e8e; }
.ct-grow .grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.ct-grow .card { position: relative; display: flex; flex-direction: column; gap: 28px; padding: 36px; border-radius: 18px; background: #ffffff; border: .5px solid rgb(178 178 178 / .5); --acc: #211d1d; --soft: rgb(33 29 29 / .08); }
.ct-grow .card--feat { background: linear-gradient(181deg, #fbfee0 10%, #ffffff 160%); border-color: #97a900; box-shadow: 0 15px 30px -40px rgb(240 248 121 / .1); }
.ct-grow .card--growth { --acc: #5915ff; }
.ct-grow .card--enterprise { --acc: #fe572a; }
.ct-grow .card--scale { --acc: #211d1d; }
.ct-grow .badge { position: absolute; left: 50%; top: -15px; transform: translateX(-50%); display: inline-flex; align-items: center; height: 30px; padding: 0 16px; border-radius: 999px; background: #393939; color: #f0f879; font-size: 11px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; }
.ct-grow .card__top { display: flex; flex-direction: column; }
.ct-grow .card__id { display: flex; align-items: center; justify-content: space-between; }
.ct-grow .tile { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; background: #393939; }
.ct-grow .card--growth .tile { color: #dcd5fb; }
.ct-grow .card--scale .tile { color: #f0f879; }
.ct-grow .card--enterprise .tile { color: #ffd2c6; }
.ct-grow .tier { font-size: 11px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: #8e8e8e; }
.ct-grow .name { margin: 20px 0 0; font-size: 32px; line-height: 1.3; }
.ct-grow .tag { margin: 8px 0 0; min-height: 44px; font-size: 14px; line-height: 22px; color: #6f6b66; }
.ct-grow .price { margin: 24px 0 0; display: flex; align-items: baseline; gap: 8px; }
.ct-grow .amount { font-size: 40px; line-height: 1; }
.ct-grow .per { font-size: 16px; color: #8e8e8e; }
.ct-grow .rate { margin: 10px 0 0; font-size: 14px; line-height: 22px; color: #8e8e8e; }
.ct-grow .rate strong { font-weight: 500; color: #211d1d; }
.ct-grow .btn { margin-top: 24px; display: inline-flex; align-items: center; justify-content: center; height: 52px; border-radius: 999px; border: 1px solid #211d1d; font-size: 16px; text-decoration: none; color: #211d1d; transition: background-color .25s ease, color .25s ease; }
.ct-grow .btn { --fill: #211d1d; }
.ct-grow .btn:hover { color: #f0f879; }   /* the dark fill rises from the bottom (base.css), no instant swap */
.ct-grow .btn--lime { background: #f0f879; border-color: #f0f879; }
.ct-grow .btn--lime:hover { border-color: #211d1d; color: #f0f879; }
/* Foundations and Creative Team cards: the hover label takes the card colour (purple, orange; the middle lime card keeps lime) */
.ct-grow .card--growth .btn:hover { color: #cbc0fd; }
.ct-grow .card--enterprise .btn:hover { color: #ffa68f; }
.ct-grow .btn:focus-visible { outline: 2px solid #5915ff; outline-offset: 3px; }
.ct-grow .meter { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: .5px solid rgb(178 178 178 / .5); }
.ct-grow .meter + .meter { border-top: 0; padding-top: 0; }
.ct-grow .meter__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ct-grow .meter__val { font-size: 12px; line-height: 20px; color: #6f6b66; text-align: right; }
.ct-grow .meter__val b { font-weight: 500; color: #211d1d; }
.ct-grow .bar { height: 10px; border-radius: 999px; background: rgb(33 29 29 / .06); overflow: hidden; }
.ct-grow .bar__fill { display: block; height: 100%; border-radius: 999px; background: var(--fill); box-shadow: 0 0 12px var(--glow); transform-origin: left center; animation: ct-grow-bar-in 1.4s cubic-bezier(.16, 1, .3, 1) both; }
.ct-grow .bar__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@keyframes ct-grow-bar-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .ct-grow .bar__fill { animation: none; }
}
.ct-grow .card--growth { --fill: linear-gradient(90deg, #dcd5fb -136.5%, #5915ff 130.2%); --glow: rgb(106 61 255 / .25); }
.ct-grow .card--scale { --fill: linear-gradient(90deg, #f0f879 -65.7%, #a6bd00 167.4%); --glow: rgb(166 189 0 / .25); }
.ct-grow .card--enterprise { --fill: linear-gradient(90deg, #ffd2c6 -109.1%, #fe572a 143.4%); --glow: rgb(254 87 42 / .22); }
.ct-grow .card--feat .bar { background: rgb(33 29 29 / .07); }
.ct-grow .roster { display: flex; padding-left: 6px; }
.ct-grow .av { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: -6px; border-radius: 50%; font-size: 10px; font-weight: 500; letter-spacing: .4px; border: 2px solid #ffffff; }
.ct-grow .av--old { background: #ecebe6; color: #8e8e8e; }
.ct-grow .av--new { background: var(--acc); color: #ffffff; }
.ct-grow .card--feat .av { border-color: #fcfee8; }
.ct-grow .card--scale .av--new { background: #211d1d; color: #f0f879; }
.ct-grow .list .plus { margin: 0; font-size: 12px; line-height: 20px; font-weight: 500; color: var(--acc); }
.ct-grow .card--scale .list .plus { color: #6b7800; }
.ct-grow .list ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ct-grow .item { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 22px; }
.ct-grow .ck { flex: none; margin-top: 2px; color: #393939; display: inline-flex; }
.ct-grow .item__name { display: block; color: #211d1d; }
.ct-grow .item__desc { display: block; font-size: 12px; line-height: 18px; color: #8e8e8e; }
.ct-grow .fit { margin: auto 0 0; display: flex; flex-direction: column; gap: 6px; padding-top: 20px; border-top: .5px solid rgb(178 178 178 / .5); font-size: 14px; line-height: 22px; }
.ct-grow .fit .label { font-size: 12px; line-height: 18px; }
.ct-grow .grow { position: absolute; top: 236px; z-index: 2; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f2f2ed; border: .5px solid rgb(178 178 178 / .7); color: #211d1d; }
@media (max-width: 1100px) {
  .ct-grow .grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .ct-grow .grow { display: none; }
  .ct-grow .tag { min-height: 0; }
}
@media (max-width: 600px) {
  .ct-grow .card { padding: 28px 22px; }
  .ct-grow .h2 { font-size: var(--fs-h2) !important; line-height: var(--lh-h2) !important; }
}
.js .ct-grow .card.pr-reveal:not(.is-in) .bar__fill { animation: none; transform: scaleX(0); }
.ct-grow .h2 .ct-display { font-weight: 400; }
.ct-grow .btn { width: 100%; padding: 0 24px; }   /* the site's own .btn rules would otherwise shrink it to its label */
@media (max-width: 600px) { .ct-grow .h2 .ct-display { font-size: 1.08em !important; } }
/* desktop: the cards (and the terms under them) sit in a narrower centred column, 24px apart, so they read as cards, not a wall */
@media (min-width: 1101px) { .ct-grow .grid { max-width: 1128px; margin-inline: auto; gap: 24px; } .ct-grow .tag { min-height: 66px; } }
/* <<< plans-grow */

/* =====================================================================
   Foundations page (foundation.html): same look as Creative Team as a Service.
   Hero, logos, plan-style cards, dark stepper, FAQ and CTA are the shared
   pieces above; the rules below are only what that page adds.
   ===================================================================== */
.fd-muted { color: #8e8e8e; }
.fd-link { color: var(--c-lime); text-decoration: underline; text-underline-offset: 3px; }
.fd-note .fd-link { color: var(--c-ink); }

/* centred section head (same as the plans head on Creative Team) */
.fd-head { max-width: 1000px; margin: 0 auto 72px; text-align: center; }
.fd-head__eyebrow { margin: 0; font-size: 16px; line-height: 24px; text-transform: uppercase; color: #393939; }
.fd-head__h2 { margin: 12px 0 0; font-size: 56px; line-height: 72px; font-weight: 400; color: var(--c-ink); }
.fd-head__h2 .ct-display { font-size: 60px; }

/* why a one-time Foundation: six benefit cards */

/* the three Foundations reuse the plan cards (.ct-grow); price line is a sentence here */
.fd-found { padding-top: 60px; }
.ct-grow .amount.fd-price { font-size: 26px; line-height: 1.25; }
.fd-note { max-width: 760px; margin: 56px auto 0; text-align: center; font-size: 18px; line-height: 28px; color: #5f5a56; }

/* Foundations cards (Figma "Fondation" frame, Pricing/Foundation Card) */
.fd-head__h2 .fd-strong { color: #393939; }
.fd-head__h2 .fd-muted { font-size: 56px; }
.fd-head__lead { margin: 16px auto 0; max-width: 728px; font-size: 18px; line-height: 28px; color: #5f5a56; }
.ct-grow .fd-from { margin: 24px 0 0; font-size: 11px; line-height: 18px; letter-spacing: 1.1px; }
.ct-grow .fd-price-row { margin-top: 4px; }
.ct-grow .fd-timeline .meter__row { justify-content: flex-start; }
.ct-grow .fd-timeline .meter__val { text-align: left; }
.ct-grow .fd-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10px; line-height: 14px; color: #8e8e8e; }
.fd-note--small { margin-top: 40px; font-size: 14px; line-height: 22px; color: #6f6b66; }
.fd-note--small b { font-weight: 500; color: var(--c-ink); }
@media (max-width: 991px) { .fd-head__h2 .fd-muted { font-size: inherit; } .fd-br { display: none; } }

/* how it works: the shared stepper, static (no showcase panel, nothing to play) */

/* proof: one quote card */

/* is this the right fit? */

/* closing CTA: the second line under the button */

@media (max-width: 991px) {
  .fd-head__h2 { font-size: 44px; line-height: 56px; }
  .fd-head__h2 .ct-display { font-size: 48px; }
}
@media (max-width: 767px) {
  .fd-head { margin-bottom: 48px; }
  .fd-head__h2 { font-size: 34px; line-height: 44px; }
  .fd-head__h2 .ct-display { font-size: 38px; }
  .fd-note { margin-top: 40px; font-size: 16px; line-height: 26px; }
}
.ct-hero__title--wide { max-width: 860px; }

/* Foundations page CTA: its own photo (Figma "Fondation" frame, Footer) */
.cta-section.fd-cta { background: linear-gradient(2.09deg, #211d1d 13%, rgb(33 29 29 / .47) 98.5%), url("../assets/img/cta-bg-foundations.webp"); background-size: auto, 100% auto; background-position: 0 0, 50% 0; background-repeat: no-repeat; }
.cta-section.fd-cta .cta__text { max-width: 640px; }
@media (max-width: 991px) { .cta-section.fd-cta { background-size: auto, cover; } }
@media (max-width: 767px) { .cta-section.fd-cta { background-image: linear-gradient(2.09deg, #211d1d 13%, rgb(33 29 29 / .47) 98.5%), url("../assets/img/cta-bg-foundations-800.webp"); } }