/* =========================================================
   ANTIBE SERVICES PAGE
   Built on Antibe Design System v1
   ========================================================= */

.services-page {
  background: #fff;
  color: var(--ink);
}

.services-page .section-shell {
  width: min(calc(100% - 56px), var(--content-max));
}

/* -------------------------
   HERO
   ------------------------- */

.services-hero {
  position: relative;
  overflow: hidden;
  min-height: 900px;
  background: #e8f3fb;
}

.services-hero__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 85%, rgba(255,102,48,.52), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(74,177,255,.62), transparent 31%),
    radial-gradient(circle at 75% 82%, rgba(15,114,117,.20), transparent 34%),
    linear-gradient(135deg, #dff1fc 0%, #eef7fb 44%, #fdf4ec 100%);
}

.services-hero__backdrop::after {
  content: "";
  position: absolute;
  inset: -10%;
  opacity: .58;
  background:
    radial-gradient(circle at 40% 38%, rgba(255,255,255,.62), transparent 19%),
    linear-gradient(125deg, transparent 24%, rgba(255,255,255,.25) 42%, transparent 58%);
  filter: blur(30px);
}

.services-hero__shell {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 56px), var(--page-max));
  min-height: 900px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

.services-header {
  position: relative;
}

.services-hero__content {
  width: min(calc(100% - 80px), 1440px);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, .72fr);
  gap: 80px;
  align-items: center;
  padding: 70px 0 55px;
}

.services-hero__copy {
  max-width: 900px;
}

.section-kicker--dark {
  color: rgba(8,45,50,.72);
}

.services-hero h1 {
  margin: 22px 0 0;
  max-width: 900px;
  color: #050505;
  font-size: clamp(58px, 5.2vw, 86px);
  line-height: 1.03;
  letter-spacing: -.055em;
  font-weight: 400;
}

.services-hero h1 span {
  color: #135f70;
}

.services-hero__lead {
  max-width: 760px;
  margin: 28px 0 0;
  color: #253c45;
  font-size: 20px;
  line-height: 1.62;
  letter-spacing: -.015em;
}

.services-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 38px;
}

.services-answer-card {
  position: relative;
  overflow: hidden;
  padding: 32px;
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 26px;
  background: rgba(255,255,255,.50);
  box-shadow: 0 24px 55px rgba(37,89,119,.14);
  backdrop-filter: blur(18px);
}

.services-answer-card::before {
  content: "";
  position: absolute;
  inset: auto -70px -90px auto;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(255,102,48,.15);
  filter: blur(10px);
}

.services-answer-card__label {
  position: relative;
  z-index: 1;
  color: #718085;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.services-answer-card h2 {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: -.035em;
  font-weight: 400;
}

.services-answer-card > p {
  position: relative;
  z-index: 1;
  margin: 15px 0 0;
  color: #50656b;
  font-size: 15px;
  line-height: 1.62;
}

.services-answer-card__groups {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 9px;
  margin-top: 26px;
}

.services-answer-card__groups a {
  display: grid;
  gap: 4px;
  padding: 14px 15px;
  border: 1px solid rgba(8,45,50,.08);
  border-radius: 13px;
  background: rgba(255,255,255,.58);
  transition: transform .18s ease, background .18s ease;
}

.services-answer-card__groups a:hover {
  transform: translateX(2px);
  background: rgba(255,255,255,.84);
}

.services-answer-card__groups strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.services-answer-card__groups span {
  color: #758488;
  font-size: 15px;
}

.services-proof-strip {
  width: min(calc(100% - 80px), 1440px);
  margin: 0 auto 34px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  border: 1px solid rgba(8,45,50,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.50);
  backdrop-filter: blur(12px);
}

.services-proof-strip span {
  min-height: 58px;
  display: grid;
  place-items: center;
  padding: 10px 20px;
  color: #4e6267;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  border-right: 1px solid rgba(8,45,50,.07);
}

.services-proof-strip span:last-child {
  border-right: 0;
}

/* -------------------------
   STICKY ANCHORS
   ------------------------- */

.services-anchor-nav {
  position: sticky;
  z-index: 12;
  top: 0;
  padding: 11px 0;
  border-bottom: 1px solid rgba(8,45,50,.08);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px);
}

.services-anchor-nav__shell {
  width: min(calc(100% - 56px), 1180px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.services-anchor-nav__shell > span {
  margin-right: 6px;
  color: #879396;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.services-anchor-nav a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  border: 1px solid rgba(8,45,50,.08);
  border-radius: 999px;
  color: #5d6f73;
  background: #fff;
  font-size: 15px;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.services-anchor-nav a:hover {
  color: #fff;
  background: var(--ink);
  transform: translateY(-1px);
}

/* -------------------------
   SHARED SECTION HEAD
   ------------------------- */

.services-section-head {
  max-width: 1020px;
}

.services-section-head h2 {
  margin: 15px 0 0;
  color: var(--ink);
  font-size: clamp(48px, 4.2vw, 70px);
  line-height: 1.05;
  letter-spacing: -.048em;
  font-weight: 400;
}

.services-section-head > p {
  max-width: 760px;
  margin: 24px 0 0;
  color: #607176;
  font-size: 17px;
  line-height: 1.65;
}

.services-section-head--center {
  margin-inline: auto;
  text-align: center;
}

.services-section-head--center > p {
  margin-inline: auto;
}

/* -------------------------
   OVERVIEW
   ------------------------- */

.services-overview {
  padding: 110px 0 120px;
  background: #fff;
}

.service-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
  margin-top: 64px;
}

.service-overview-card {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  border: 1px solid rgba(8,45,50,.08);
  border-radius: 26px;
  transition: transform .22s ease, box-shadow .22s ease;
}

.service-overview-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(21,65,93,.10);
}

.service-overview-card::before {
  content: "";
  position: absolute;
  right: -55px;
  top: -55px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  filter: blur(2px);
}

.service-overview-card--design {
  background:
    radial-gradient(circle at 12% 90%, rgba(255,101,47,.15), transparent 34%),
    linear-gradient(145deg, #eef7ff 0%, #f8fbfd 54%, #fff5ef 100%);
}

.service-overview-card--design::before {
  background: rgba(74,177,255,.16);
}

.service-overview-card--development {
  background:
    radial-gradient(circle at 85% 12%, rgba(87,137,194,.18), transparent 30%),
    linear-gradient(145deg, #f3f7fb 0%, #eef3f8 100%);
}

.service-overview-card--development::before {
  background: rgba(26,70,109,.10);
}

.service-overview-card--growth {
  background:
    radial-gradient(circle at 14% 92%, rgba(35,168,157,.16), transparent 35%),
    linear-gradient(145deg, #eef8f6 0%, #f6fbfa 55%, #f2f6fb 100%);
}

.service-overview-card--growth::before {
  background: rgba(255,102,48,.12);
}

.service-overview-card__number {
  position: relative;
  z-index: 1;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--orange-1), var(--orange-2));
  font-size: 15px;
  font-weight: 600;
}

.service-overview-card__body {
  position: relative;
  z-index: 1;
}

.service-overview-card__eyebrow {
  color: #7a898d;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.service-overview-card h3 {
  margin: 13px 0 0;
  color: var(--ink);
  font-size: 33px;
  line-height: 1.1;
  letter-spacing: -.035em;
  font-weight: 400;
}

.service-overview-card p {
  margin: 16px 0 0;
  color: #66777b;
  font-size: 15px;
  line-height: 1.6;
}

.service-overview-card__link {
  display: inline-block;
  margin-top: 24px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

/* -------------------------
   SERVICE FAMILIES
   ------------------------- */

.service-family {
  scroll-margin-top: 80px;
}

.service-family--light {
  padding: 110px 0 120px;
  background: #f7fafc;
}

.service-family--dark {
  padding: 110px 0 120px;
  color: #fff;
  background:
    radial-gradient(circle at 80% 90%, rgba(28,93,101,.34), transparent 36%),
    linear-gradient(135deg, #11151c 0%, #102735 60%, #07383a 100%);
}

.service-family--growth {
  padding: 110px 0 120px;
  background:
    radial-gradient(circle at 8% 90%, rgba(255,109,51,.10), transparent 28%),
    radial-gradient(circle at 90% 12%, rgba(68,171,252,.12), transparent 30%),
    #fff;
}

.service-family__intro {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(480px,1.1fr);
  gap: 72px;
  align-items: center;
}

.service-family__intro--reverse {
  grid-template-columns: minmax(480px,1.1fr) minmax(0,.9fr);
}

.service-family__copy h2 {
  margin: 15px 0 0;
  color: var(--ink);
  font-size: clamp(48px, 4vw, 68px);
  line-height: 1.05;
  letter-spacing: -.048em;
  font-weight: 400;
}

.service-family__copy > p {
  max-width: 680px;
  margin: 23px 0 0;
  color: #617277;
  font-size: 17px;
  line-height: 1.66;
}

.service-family--dark .service-family__copy h2 {
  color: #fff;
}

.service-family--dark .service-family__copy > p {
  color: rgba(255,255,255,.72);
}

.section-kicker--light {
  color: rgba(255,255,255,.62);
}

.service-family__visual {
  overflow: hidden;
  min-height: 460px;
  border-radius: 26px;
  box-shadow: 0 24px 55px rgba(7,32,68,.15);
}

.service-family__visual img {
  width: 100%;
  height: 100%;
  min-height: 460px;
  display: block;
  object-fit: cover;
  transition: transform .55s ease;
}

.service-family__visual:hover img {
  transform: scale(1.025);
}

.service-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px;
  margin-top: 64px;
}

.service-detail-card {
  scroll-margin-top: 95px;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid rgba(8,45,50,.08);
  border-radius: 22px;
  background: #fff;
}

.service-detail-card__number {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--orange-1), var(--orange-2));
  font-size: 15px;
  font-weight: 600;
}

.service-detail-card h3 {
  margin: 19px 0 0;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -.03em;
  font-weight: 400;
}

.service-detail-card__answer {
  margin: 15px 0 0;
  color: #53686d;
  font-size: 15px;
  line-height: 1.62;
}

.service-detail-card ul {
  display: grid;
  gap: 9px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.service-detail-card li {
  position: relative;
  padding-left: 19px;
  color: #758386;
  font-size: 15px;
  line-height: 1.5;
}

.service-detail-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #188f70;
  font-weight: 600;
}

.service-detail-card > a {
  margin-top: auto;
  padding-top: 26px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.service-detail-grid--dark .service-detail-card {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}

.service-detail-grid--dark .service-detail-card h3,
.service-detail-grid--dark .service-detail-card > a {
  color: #fff;
}

.service-detail-grid--dark .service-detail-card__answer {
  color: rgba(255,255,255,.75);
}

.service-detail-grid--dark .service-detail-card li {
  color: rgba(255,255,255,.61);
}

.service-detail-grid--dark .service-detail-card li::before {
  color: #73d5b6;
}

/* -------------------------
   PROCESS
   ------------------------- */

.services-process {
  padding: 110px 0 120px;
  background: #f6f9fb;
}

.process-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 12px;
  margin-top: 62px;
}

.process-line::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 27px;
  height: 1px;
  background: linear-gradient(90deg, rgba(8,45,50,.08), rgba(255,78,46,.32), rgba(8,45,50,.08));
}

.process-line article {
  position: relative;
  z-index: 1;
  padding: 0 12px;
  text-align: center;
}

.process-line article > span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-inline: auto;
  border: 1px solid rgba(8,45,50,.08);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--orange-1), var(--orange-2));
  font-size: 15px;
  font-weight: 600;
}

.process-line h3 {
  margin: 19px 0 0;
  color: var(--ink);
  font-size: 21px;
  font-weight: 400;
}

.process-line p {
  margin: 10px auto 0;
  max-width: 210px;
  color: #728185;
  font-size: 15px;
  line-height: 1.55;
}

.services-flex-note {
  margin-top: 72px;
  display: grid;
  grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
  gap: 50px;
  align-items: center;
  padding: 34px;
  border: 1px solid rgba(8,45,50,.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at 90% 10%, rgba(74,177,255,.13), transparent 28%),
    linear-gradient(145deg, #fff 0%, #f7fafc 100%);
}

.services-flex-note__label {
  color: var(--orange-2);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.services-flex-note h3 {
  margin: 10px 0 0;
  color: var(--ink);
  font-size: 29px;
  line-height: 1.16;
  font-weight: 400;
}

.services-flex-note > p {
  color: #647579;
  font-size: 15px;
  line-height: 1.65;
}

/* -------------------------
   WORK
   ------------------------- */

.services-work {
  padding: 110px 0 120px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 82%, rgba(22,81,91,.36), transparent 37%),
    linear-gradient(135deg, #15131b 0%, #102432 62%, #06383a 100%);
}

.services-work .services-section-head h2 {
  color: #fff;
}

.services-work-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
  margin-top: 62px;
}

.services-work-card {
  position: relative;
  overflow: hidden;
  min-height: 500px;
  border-radius: 26px;
  isolation: isolate;
}

.services-work-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}

.services-work-card:hover img {
  transform: scale(1.03);
}

.services-work-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(3,14,24,.02), rgba(3,14,24,.12) 40%, rgba(3,14,24,.88) 100%),
    linear-gradient(90deg, rgba(3,14,24,.30), transparent 62%);
}

.services-work-card__content {
  position: absolute;
  z-index: 2;
  left: 28px;
  right: 28px;
  bottom: 27px;
}

.services-work-card__content > span {
  color: rgba(255,255,255,.62);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.services-work-card h3 {
  margin: 9px 0 0;
  color: #fff;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 400;
}

.services-work-card p {
  margin: 13px 0 0;
  color: rgba(255,255,255,.78);
  font-size: 15px;
  line-height: 1.55;
}

.services-work-card__result {
  display: inline-flex;
  min-height: 33px;
  align-items: center;
  margin-top: 16px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.10);
  font-size: 15px;
  font-weight: 600;
  backdrop-filter: blur(8px);
}

.services-work__footer {
  display: flex;
  justify-content: center;
  margin-top: 42px;
}

/* -------------------------
   AUDIENCE
   ------------------------- */

.services-audience {
  padding: 110px 0 120px;
  background: #fff;
}

.services-audience-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
  margin-top: 60px;
}

.services-audience-card {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid rgba(8,45,50,.07);
  border-radius: 24px;
}

.services-audience-card--b2c {
  background:
    radial-gradient(circle at 85% 16%, rgba(74,177,255,.22), transparent 30%),
    linear-gradient(145deg, #eef7ff 0%, #f7fbfd 56%, #fff4ed 100%);
}

.services-audience-card--professional {
  background:
    radial-gradient(circle at 86% 15%, rgba(93,130,169,.18), transparent 30%),
    linear-gradient(145deg, #eef3f7 0%, #f7f9fb 100%);
}

.services-audience-card--agency {
  background:
    radial-gradient(circle at 15% 90%, rgba(42,173,165,.16), transparent 30%),
    linear-gradient(145deg, #edf8f6 0%, #f8fbfa 56%, #f1f5fa 100%);
}

.services-audience-card > span {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--orange-1), var(--orange-2));
  font-size: 15px;
  font-weight: 600;
}

.services-audience-card h3 {
  margin: auto 0 0;
  padding-top: 40px;
  color: var(--ink);
  font-size: 28px;
  line-height: 1.14;
  font-weight: 400;
}

.services-audience-card p {
  margin: 14px 0 0;
  color: #68797d;
  font-size: 15px;
  line-height: 1.6;
}

/* -------------------------
   FAQ
   ------------------------- */

.services-faq {
  padding: 110px 0 120px;
  background: #f5f8fa;
}

.services-faq__layout {
  display: grid;
  grid-template-columns: minmax(300px,.68fr) minmax(0,1.32fr);
  gap: 80px;
  align-items: start;
}

.services-faq__intro {
  position: sticky;
  top: 95px;
}

.services-faq__intro h2 {
  margin: 16px 0 0;
  color: var(--ink);
  font-size: clamp(44px, 3.6vw, 61px);
  line-height: 1.06;
  letter-spacing: -.046em;
  font-weight: 400;
}

.services-faq__intro > p {
  margin: 20px 0 0;
  color: #697a7e;
  font-size: 15px;
  line-height: 1.62;
}

.services-faq__intro .btn {
  margin-top: 29px;
}

.faq-list {
  border-top: 1px solid rgba(8,45,50,.10);
}

.faq-item {
  border-bottom: 1px solid rgba(8,45,50,.10);
}

.faq-item__question {
  width: 100%;
  min-height: 91px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 0 4px;
  border: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.faq-item__question span {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
}

.faq-item__question i {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid rgba(8,45,50,.14);
  border-radius: 50%;
}

.faq-item__question i::before,
.faq-item__question i::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 13px;
  height: 1px;
  background: var(--ink);
}

.faq-item__question i::after {
  transform: rotate(90deg);
  transition: transform .18s ease;
}

.faq-item.is-open .faq-item__question i::after {
  transform: rotate(0);
}

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease;
}

.faq-item.is-open .faq-item__answer {
  max-height: 320px;
}

.faq-item__answer p {
  max-width: 760px;
  margin: -5px 0 30px;
  color: #697a7e;
  font-size: 15px;
  line-height: 1.7;
}

/* -------------------------
   FINAL CTA
   ------------------------- */

.services-final-cta {
  position: relative;
  min-height: 640px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #dceafa;
}

.services-final-cta__background {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    url("../assets/cta-background-v2.webp") center / cover no-repeat;
}

.services-final-cta__background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 75%, rgba(255,112,57,.16), transparent 28%),
    radial-gradient(circle at 83% 18%, rgba(255,255,255,.18), transparent 26%);
}

.services-final-cta__content {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 40px), 1050px);
  text-align: center;
}

.services-final-cta h2 {
  margin: 37px 0 0;
  color: var(--ink);
  font-size: clamp(50px, 4.9vw, 76px);
  line-height: 1.04;
  letter-spacing: -.05em;
  font-weight: 400;
}

.services-final-cta p {
  max-width: 690px;
  margin: 23px auto 0;
  color: #425b65;
  font-size: 16px;
  line-height: 1.62;
}

.services-final-cta .btn {
  margin-top: 36px;
}

/* -------------------------
   RESPONSIVE
   ------------------------- */

@media (max-width: 1120px) {
  .services-hero__content {
    grid-template-columns: 1fr;
    gap: 38px;
    padding-top: 45px;
  }

  .services-answer-card {
    max-width: 780px;
  }

  .service-overview-grid,
  .services-work-grid,
  .services-audience-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .service-overview-card:last-child,
  .services-audience-card:last-child {
    grid-column: 1 / -1;
  }

  .service-family__intro,
  .service-family__intro--reverse {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .service-family__intro--reverse .service-family__visual {
    order: 2;
  }

  .service-family__intro--reverse .service-family__copy {
    order: 1;
  }

  .process-line {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 34px 12px;
  }

  .process-line::before {
    display: none;
  }

  .services-faq__layout {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .services-faq__intro {
    position: static;
    max-width: 760px;
  }
}

@media (max-width: 980px) {
  .services-hero__shell {
    width: calc(100% - 40px);
  }

  .services-hero__content,
  .services-proof-strip {
    width: 100%;
  }

  .services-hero {
    min-height: auto;
  }

  .services-hero__shell {
    min-height: 0;
  }

  .services-hero__content {
    padding-top: 85px;
    padding-bottom: 42px;
  }

  .services-proof-strip {
    grid-template-columns: repeat(2,minmax(0,1fr));
    margin-bottom: 24px;
  }

  .services-proof-strip span:nth-child(2) {
    border-right: 0;
  }

  .services-proof-strip span:nth-child(-n+2) {
    border-bottom: 1px solid rgba(8,45,50,.07);
  }

  .services-anchor-nav {
    top: 0;
  }

  .services-anchor-nav__shell {
    width: calc(100% - 40px);
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .services-anchor-nav__shell::-webkit-scrollbar {
    display: none;
  }

  .services-page .section-shell {
    width: calc(100% - 40px);
  }
}

@media (max-width: 820px) {
  .services-hero__content {
    grid-template-columns: 1fr;
  }

  .services-hero h1 {
    font-size: clamp(50px, 8vw, 66px);
  }

  .services-hero__lead {
    font-size: 18px;
  }

  .service-overview-grid,
  .service-detail-grid,
  .services-work-grid,
  .services-audience-grid {
    grid-template-columns: 1fr;
  }

  .service-overview-card:last-child,
  .services-audience-card:last-child {
    grid-column: auto;
  }

  .service-overview-card {
    min-height: 340px;
  }

  .service-family__visual,
  .service-family__visual img {
    min-height: 360px;
  }

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

  .services-flex-note {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .services-work-card {
    min-height: 460px;
  }
}

@media (max-width: 720px) {
  .services-hero__shell {
    width: calc(100% - 30px);
  }

  .services-hero__content {
    padding-top: 70px;
  }

  .services-hero h1 {
    font-size: 8vw;
    line-height: 1.08;
  }

  .services-hero__actions {
    width: 100%;
    flex-direction: column;
  }

  .services-hero__actions .btn {
    width: 100%;
  }

  .services-answer-card {
    padding: 24px;
  }

  .services-proof-strip {
    grid-template-columns: 1fr;
  }

  .services-proof-strip span {
    border-right: 0;
    border-bottom: 1px solid rgba(8,45,50,.07);
  }

  .services-proof-strip span:last-child {
    border-bottom: 0;
  }

  .services-anchor-nav__shell {
    width: calc(100% - 30px);
  }

  .services-page .section-shell {
    width: calc(100% - 30px);
  }
}

@media (max-width: 560px) {
  .services-overview,
  .service-family--light,
  .service-family--dark,
  .service-family--growth,
  .services-process,
  .services-work,
  .services-audience,
  .services-faq {
    padding-top: 78px;
    padding-bottom: 84px;
  }

  .services-hero__lead {
    font-size: 16px;
  }

  .services-section-head h2,
  .service-family__copy h2 {
    font-size: 42px;
  }

  .service-family__visual,
  .service-family__visual img {
    min-height: 300px;
  }

  .service-detail-card {
    min-height: 0;
    padding: 24px;
  }

  .process-line {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .services-work-card {
    min-height: 420px;
  }

  .services-final-cta {
    min-height: 560px;
  }

  .services-final-cta h2 {
    font-size: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-overview-card,
  .service-family__visual img,
  .services-work-card img,
  .faq-item__answer,
  .faq-item__question i::after {
    transition: none;
  }
}


/* =========================================================
   V17 — SERVICES COPY BALANCE + DESIGN SECTION REWORK
   ========================================================= */

/* Hero description: exactly two intentional rows on larger screens. */
.services-hero__lead {
  max-width: 1040px;
}

.services-hero__lead-line {
  display: block;
  white-space: nowrap;
}

/* Overview headline: balanced two-line desktop composition. */
.services-overview__headline {
  max-width: 1380px;
}

.services-overview__headline > span {
  display: block;
  white-space: nowrap;
}

/* Design family: services now live directly below the left-column copy. */
.service-family--design {
  padding-top: 110px;
  padding-bottom: 120px;
}

.service-family__intro--design {
  grid-template-columns: minmax(0, .94fr) minmax(500px, 1.06fr);
  gap: 78px;
  align-items: start;
}

.service-family__copy--with-list {
  max-width: 720px;
}

.design-services-list {
  margin-top: 40px;
  border-top: 1px solid rgba(8,45,50,.11);
}

.design-service-item {
  scroll-margin-top: 95px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 17px;
  align-items: start;
  padding: 20px 0 21px;
  border-bottom: 1px solid rgba(8,45,50,.11);
}

.design-service-item__number {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--orange-1), var(--orange-2));
  font-size: 15px;
  font-weight: 600;
}

.design-service-item h3 {
  margin: 1px 0 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 500;
}

.design-service-item p {
  max-width: 600px;
  margin: 7px 0 0;
  color: #68797d;
  font-size: 15px;
  line-height: 1.55;
}

.service-family__visual--design {
  position: sticky;
  top: 110px;
  min-height: 640px;
}

.service-family__visual--design img {
  min-height: 640px;
}

@media (max-width: 1260px) {
  .services-hero__lead-line,
  .services-overview__headline > span {
    white-space: normal;
  }

  .service-family__intro--design {
    grid-template-columns: minmax(0, .95fr) minmax(440px, 1.05fr);
    gap: 50px;
  }
}

@media (max-width: 1120px) {
  .services-hero__lead-line,
  .services-overview__headline > span {
    display: inline;
  }

  .services-hero__lead-line + .services-hero__lead-line::before,
  .services-overview__headline > span + span::before {
    content: " ";
  }

  .service-family__intro--design {
    grid-template-columns: 1fr;
  }

  .service-family__copy--with-list {
    max-width: 820px;
  }

  .service-family__visual--design {
    position: static;
    min-height: 420px;
  }

  .service-family__visual--design img {
    min-height: 420px;
  }
}

@media (max-width: 560px) {
  .design-service-item {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 13px;
    padding: 18px 0;
  }

  .design-service-item__number {
    width: 32px;
    height: 32px;
  }

  .design-service-item h3 {
    font-size: 18px;
  }

  .design-service-item p {
    font-size: 15px;
  }
}


/* =========================================================
   V18 — SERVICE FAMILY CONSISTENCY + PROCESS CTA + FAQ BALANCE
   ========================================================= */

/* Overview headline: no longer stretches edge-to-edge. */
.services-overview__headline {
  max-width: 1080px;
}

.services-overview__headline > span {
  display: block;
  white-space: normal;
}

/* CTA beneath the service list in each family. */
.service-family__cta {
  min-width: 245px;
  margin-top: 30px;
}

/* Reuse the compact list system for Development and Growth. */
.service-family__intro--development,
.service-family__intro--growth {
  align-items: start;
}

.service-family__visual--development,
.service-family__visual--growth {
  position: sticky;
  top: 110px;
  min-height: 640px;
}

.service-family__visual--development img,
.service-family__visual--growth img {
  min-height: 640px;
}

.design-services-list--dark {
  border-top-color: rgba(255,255,255,.15);
}

.design-services-list--dark .design-service-item {
  border-bottom-color: rgba(255,255,255,.15);
}

.design-services-list--dark .design-service-item h3 {
  color: #fff;
}

.design-services-list--dark .design-service-item p {
  color: rgba(255,255,255,.64);
}

/* Process headline: smaller and more controlled. */
.services-process .services-section-head {
  max-width: 1180px;
}

.services-process .services-section-head h2 {
  max-width: 1120px;
  margin-inline: auto;
  font-size: clamp(38px, 3.3vw, 54px);
  line-height: 1.08;
}

/* Large standalone CTA inside the process section. */
.services-flex-note--cta {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  margin-top: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 74px 70px;
  border: 1px solid rgba(8,45,50,.07);
  border-radius: 28px;
  text-align: center;
  background:
    radial-gradient(circle at 12% 82%, rgba(255,103,48,.18), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(74,177,255,.20), transparent 31%),
    radial-gradient(circle at 68% 92%, rgba(39,170,160,.12), transparent 28%),
    linear-gradient(145deg, #f3f9fd 0%, #fff 48%, #fff5ef 100%);
  box-shadow: 0 24px 55px rgba(24,67,95,.08);
}

.services-flex-note--cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background:
    linear-gradient(125deg, rgba(255,255,255,.36), transparent 30%, transparent 70%, rgba(255,255,255,.18));
}

.services-flex-note--cta > * {
  position: relative;
  z-index: 1;
}

.services-flex-note--cta .services-flex-note__label {
  font-size: 15px;
}

.services-flex-note--cta h3 {
  max-width: 1060px;
  margin: 18px auto 0;
  color: var(--ink);
  font-size: clamp(46px, 4vw, 66px);
  line-height: 1.05;
  letter-spacing: -.045em;
  font-weight: 400;
}

.services-flex-note--cta > p {
  max-width: 820px;
  margin: 24px auto 0;
  color: #5f7277;
  font-size: 16px;
  line-height: 1.66;
}

.services-flex-note__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 34px;
}

.services-flex-note__link {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

/* FAQ: requested 40/60 balance. */
.services-faq__layout {
  grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  gap: 64px;
}

/* Tablet behavior */
@media (max-width: 1120px) {
  .service-family__visual--development,
  .service-family__visual--growth {
    position: static;
    min-height: 420px;
  }

  .service-family__visual--development img,
  .service-family__visual--growth img {
    min-height: 420px;
  }

  .services-faq__layout {
    grid-template-columns: 1fr;
  }

  .services-flex-note--cta {
    min-height: 390px;
    padding: 60px 42px;
  }
}

@media (max-width: 720px) {
  .service-family__cta {
    width: 100%;
  }

  .services-flex-note--cta {
    min-height: 0;
    padding: 52px 24px;
  }

  .services-flex-note--cta h3 {
    font-size: 42px;
  }

  .services-flex-note__actions {
    width: 100%;
    flex-direction: column;
  }

  .services-flex-note__actions .btn {
    width: 100%;
  }
}


/* =========================================================
   V19 — FAQ GAP + PROCESS CTA HEADLINE BALANCE
   ========================================================= */

/* FAQ: increase the space between the 40/60 columns. */
.services-faq__layout {
  gap: 80px;
}

/* Full-stack CTA: give the headline 10% left/right breathing room
   so the line breaks feel more balanced. */
.services-flex-note--cta h3 {
  width: 80%;
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1120px) {
  .services-faq__layout {
    gap: 56px;
  }

  .services-flex-note--cta h3 {
    width: 86%;
  }
}

@media (max-width: 720px) {
  .services-flex-note--cta h3 {
    width: 100%;
  }
}


/* =========================================================
   V20 — TYPOGRAPHY ACCESSIBILITY + FAQ INTRO CARD
   ========================================================= */

/* Full-stack CTA headline: slightly smaller and still balanced. */
.services-flex-note--cta h3 {
  width: 80%;
  max-width: 1040px;
  font-size: clamp(40px, 3.5vw, 58px);
  line-height: 1.07;
}

/* FAQ left column becomes a distinct gradient content card. */
.services-faq__intro {
  position: sticky;
  top: 95px;
  overflow: hidden;
  padding: 42px;
  border: 1px solid rgba(8,45,50,.08);
  border-radius: 26px;
  background:
    radial-gradient(circle at 86% 12%, rgba(74,177,255,.20), transparent 31%),
    radial-gradient(circle at 12% 88%, rgba(255,102,48,.14), transparent 32%),
    linear-gradient(145deg, #eef7ff 0%, #f8fbfd 53%, #fff5ef 100%);
  box-shadow: 0 20px 45px rgba(24,67,95,.08);
}

.services-faq__intro::after {
  content: "";
  position: absolute;
  right: -105px;
  bottom: -120px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(40,169,160,.10);
}

.services-faq__intro > * {
  position: relative;
  z-index: 1;
}

.services-faq__intro > p {
  max-width: 480px;
}

@media (max-width: 1120px) {
  .services-faq__intro {
    position: static;
    max-width: none;
    padding: 36px;
  }

  .services-flex-note--cta h3 {
    width: 86%;
    font-size: clamp(38px, 5vw, 52px);
  }
}

@media (max-width: 720px) {
  .services-faq__intro {
    padding: 28px 24px;
  }

  .services-flex-note--cta h3 {
    width: 100%;
    font-size: 38px;
  }
}


/* =========================================================
   V21 — FAQ INTRO FULL HEIGHT
   ========================================================= */

.services-faq__intro {
  height: 100%;
  box-sizing: border-box;
}