/* =========================================================
   Service Page Template — shared by every /services/*.html page
   Reuses design tokens + several components from style.css:
   .td-btn, .td-toggle, .td-about-card, .td-who-features/.td-who-feature,
   .td-stack*, .td-cta* — keep this file additive, never redefine those.
   ========================================================= */

/* ----- Section header primitives ----- */
.td-svc-eyebrow {
  display: inline-block;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--td-pink);
  margin-bottom: 16px;
}

.td-svc-h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.16;
  margin: 0 0 16px;
  color: var(--td-dark-text);
}

.td-svc-h2--light { color: var(--td-white); }
.td-svc-h2 em { font-style: normal; color: var(--td-pink); }

.td-svc-lead {
  font-size: 16px;
  line-height: 1.75;
  color: var(--td-dark-text-soft);
  max-width: 560px;
  margin: 0;
}

.td-svc-lead--light { color: rgba(255, 255, 255, 0.72); }

.td-svc-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

/* ----- Top bar (right-side toggle + CTA only — logo uses .td-hero-logo-corner, reused as-is) ----- */
.td-svc-topbar {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  padding: 28px 40px 0;
}

/* Match the homepage's dark CTA override for the hero top bar */
.td-svc-topbar .td-btn {
  background-color: #000000;
  border: 1px solid rgba(10, 10, 10, 0.2);
}

.td-svc-topbar .td-btn:hover {
  background-color: transparent;
  color: var(--td-black);
  border-color: var(--td-black);
}

/* ----- Hero / banner — rounded floating card, same treatment as .td-hero on the homepage ----- */
.td-svc-hero {
  position: relative;
  margin: 20px;
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #e7eded;
  color: var(--td-dark-text);
}

.td-svc-hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 10px 44px 34px;
}

.td-svc-hero-left {
  flex: 0 0 64%;
  max-width: 740px;
}

.td-svc-hero-right {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.td-svc-hero-visual {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  background: rgba(10, 10, 10, 0.04);
  border: 1px dashed rgba(10, 10, 10, 0.18);
}

.td-svc-hero-visual-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

/* Service page hero — real photo/illustration, no placeholder box styling */
.td-svc-hero-visual--photo {
  width: 100%;
  max-width: none;
  aspect-ratio: auto;
  background: none;
  background-color: transparent;
  border: none;
  border-radius: 0;
}

.td-svc-hero-visual--photo .td-svc-hero-visual-img {
  border-radius: 0;
}

.td-svc-breadcrumb {
  font-size: 13px;
  color: rgba(20, 24, 28, 0.55);
  letter-spacing: 0.02em;
  margin-bottom: 26px;
}

.td-svc-breadcrumb a { color: rgba(20, 24, 28, 0.55); transition: color 0.25s ease; }
.td-svc-breadcrumb a:hover { color: var(--td-dark-text); }
.td-svc-breadcrumb span { color: var(--td-pink); }

.td-svc-hero-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: clamp(38px, 5.2vw, 55px);
  line-height: 1.08;
  padding-top: 32px;
  margin: 0 0 24px;
  color: var(--td-dark-text);
}

/* Service page hero heading */
.td-svc-hero-title--sm {
  font-size: 65px;
}

.td-svc-hero-title em { font-style: normal; color: var(--td-pink); }

.td-svc-hero-desc {
  font-size: 18px;
  line-height: 1.75;
  color: var(--td-dark-text-soft);
  max-width: 600px;
  margin: 0;
}

.td-svc-hero-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 38px;
}

.td-svc-ghost-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--td-dark-text);
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(10, 10, 10, 0.25);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.td-svc-ghost-link:hover { color: var(--td-pink); border-color: var(--td-pink); }

.td-svc-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 48px;
}

.td-svc-hero-tags span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 10, 10, 0.05);
  border: 1px solid rgba(10, 10, 10, 0.12);
  padding: 10px 18px;
  border-radius: 50px;
  font-size: 13px;
  color: var(--td-dark-text);
}

.td-svc-hero-tags svg { color: var(--td-pink); flex: none; }

.td-svc-trust {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 56px;
}

.td-svc-trust-avatars {
  display: flex;
}

.td-svc-trust-avatars img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e7eded;
  margin-left: -12px;
}

.td-svc-trust-avatars img:first-child { margin-left: 0; }

.td-svc-trust p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--td-dark-text-soft);
}

/* ----- Enquiry form — single horizontal bar (service page only) ----- */
.td-svc-enquiry {
  background-color: var(--td-white);
  padding: 50px 40px;
}

.td-svc-enquiry-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 40px;
}

.td-svc-enquiry-head .td-svc-eyebrow { display: block; }
.td-svc-enquiry-head .td-svc-h2 { margin: 0; }

.td-svc-enquiry-form {
  display: flex;
  align-items: stretch;
  gap: 10px;
  max-width: 1080px;
  margin: 0 auto;
  background: var(--td-white);
  border-radius: 26px;
  padding: 10px;
  box-shadow: 0 24px 60px -30px rgba(10, 10, 10, 0.2);
}

.td-svc-enquiry-field {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 14px 20px;
  border: 1px solid rgba(10, 10, 10, 0.1);
  border-radius: 14px;
  transition: border-color 0.25s ease;
}

.td-svc-enquiry-field:focus-within { border-color: var(--td-pink); }

.td-svc-enquiry-field label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--td-dark-text-soft);
}

.td-svc-enquiry-field .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
  /* CF7 makes this relative, which would anchor the validation tip to the
     input's own box instead of the field. See the tip rules further down. */
  position: static;
}

.td-svc-enquiry-field input,
.td-svc-enquiry-field select {
  width: 100%;
  max-width: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  color: var(--td-dark-text);
  min-width: 0;
}

.td-svc-enquiry-field input::placeholder { color: rgba(20, 24, 28, 0.4); }

.td-svc-enquiry-submit {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: 14px;
  background: var(--td-pink);
  color: var(--td-white);
  font-weight: 600;
  font-size: 15px;
  padding: 0 34px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.25s ease;
}

.td-svc-enquiry-submit:hover { background: var(--td-black); }

/* ----- Validation messages -----
   CF7 injects .wpcf7-not-valid-tip inside .wpcf7-form-control-wrap, which sits
   inside the bordered field. Left in flow it grew the box from 73px to 121px
   and threw the whole row out of alignment. Pin it just below the field
   instead, and reserve the space on the form only once a submit has failed. */
.td-svc-enquiry-field {
  position: relative;
}

.td-svc-enquiry-field .wpcf7-not-valid-tip {
  position: absolute;
  top: calc(100% + 6px);
  left: 2px;
  right: 2px;
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--td-pink);
}

.td-svc-enquiry-field:has(.wpcf7-not-valid-tip) {
  border-color: var(--td-pink);
}

.wpcf7-form.invalid .td-svc-enquiry-form {
  padding-bottom: 34px;
}

/* CF7's own summary sits under the bar; keep it on-brand rather than default. */
.td-svc-enquiry .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid rgba(183, 37, 88, 0.35);
  font-size: 14px;
  color: var(--td-dark-text);
}

@media (max-width: 991px) {
  .td-svc-enquiry-form { flex-wrap: wrap; }
  .td-svc-enquiry-field { flex: 1 1 40%; }
  .td-svc-enquiry-submit { flex: 1 1 100%; padding: 16px; justify-content: center; }
}

@media (max-width: 767px) {
  .td-svc-enquiry { padding: 36px 20px; }
  .td-svc-enquiry-head { margin-bottom: 32px; }
  .td-svc-enquiry-field { flex: 1 1 100%; }
}

/* ----- Intro statement (big centered headline, service page only) ----- */
.td-svc-intro {
  background-color: var(--td-light-bg-2);
  padding: 120px 40px;
}

.td-svc-intro-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.td-svc-intro-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.14;
  color: var(--td-dark-text);
  margin: 0 0 28px;
}

.td-svc-intro-title em { font-style: normal; color: var(--td-pink); }

.td-svc-intro-desc {
  font-size: 18px;
  line-height: 1.8;
  color: var(--td-dark-text-soft);
  max-width: 760px;
  margin: 0 auto;
}

.td-svc-intro-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 40px;
}

@media (max-width: 767px) {
  .td-svc-intro { padding: 80px 24px; }
  .td-svc-intro-desc { font-size: 16px; }
}

/* ----- What's included ----- */
.td-svc-offer {
  background-color: var(--td-light-bg-2);
  padding: 120px 40px;
}

.td-svc-offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.td-svc-offer-grid .td-about-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
  cursor: default;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.td-svc-offer-grid .td-about-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--card-img);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.45s ease, transform 0.6s ease;
}

.td-svc-offer-grid .td-about-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(10, 10, 10, 0.78);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.td-svc-offer-grid .td-about-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -18px rgba(10, 10, 10, 0.3);
}

.td-svc-offer-grid .td-about-card:hover::before { opacity: 1; transform: scale(1); }
.td-svc-offer-grid .td-about-card:hover::after { opacity: 1; }

.td-svc-offer-grid .td-about-card > * {
  position: relative;
  z-index: 2;
}

.td-svc-offer-grid .td-about-card-icon {
  transition: background-color 0.35s ease, color 0.35s ease;
}

.td-svc-offer-grid .td-about-card-title,
.td-svc-offer-grid .td-about-card-text {
  transition: color 0.35s ease;
}

.td-svc-offer-grid .td-about-card:hover .td-about-card-icon {
  background: rgba(255, 255, 255, 0.16);
  color: var(--td-white);
}

.td-svc-offer-grid .td-about-card:hover .td-about-card-title,
.td-svc-offer-grid .td-about-card:hover .td-about-card-text {
  color: var(--td-white);
}

/* ----- Mid-page CTA — hero-old visual language, compact height, own class
   namespace so it never collides with .td-hero-old-* on the homepage ----- */
.td-svc-promo {
  position: relative;
  margin: 20px;
  height: 460px;
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #000000;
}

.td-svc-promo-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(circle at 60% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(circle at 60% 50%, #000 55%, transparent 100%);
}

.td-svc-promo-lines-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background-image:
    linear-gradient(90deg, rgba(183, 37, 88, 0.9) 1px, transparent 1px),
    linear-gradient(0deg, rgba(183, 37, 88, 0.9) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(circle 180px at var(--td-mx, 50%) var(--td-my, 50%), #000 0%, transparent 100%);
  mask-image: radial-gradient(circle 180px at var(--td-mx, 50%) var(--td-my, 50%), #000 0%, transparent 100%);
}

.td-svc-promo-lines-glow.is-active { opacity: 1; }

/* -- Top bar -- */
.td-svc-promo-topbar {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 24px 32px 0;
}

.td-svc-promo-badge {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--td-grey);
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 50px;
  white-space: nowrap;
}

.td-svc-promo-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2ecc71;
}

/* -- Main content -- */
.td-svc-promo-main {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 40px 30px;
}

.td-svc-promo-left {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  max-width: 660px;
}

.td-svc-promo-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(38px, 4.8vw, 60px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--td-white);
  white-space: nowrap;
  margin: 0 0 14px;
}

.td-svc-promo-title-accent { color: var(--td-pink); }

.td-svc-promo-title-swoosh {
  display: block;
  width: 110px;
  height: auto;
  margin-top: 2px;
  opacity: 0.7;
}

.td-svc-promo-btn {
  display: inline-block;
  margin-top: 24px;
}

.td-svc-promo-desc {
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(231, 237, 237, 0.72);
  max-width: 400px;
  margin: 0 0 16px;
}

.td-svc-promo-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.td-svc-promo-features span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--td-grey);
}

.td-svc-promo-features svg {
  flex: 0 0 auto;
  color: var(--td-white);
}

/* -- Right side: circular social ring, half-cropped off the edge -- */
.td-svc-promo-social {
  position: absolute;
  right: -160px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 400px;
  height: 400px;
  pointer-events: none;
}

.td-svc-promo-social-border {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  animation: tdSvcPromoSocialOrbit 9s linear infinite;
}

.td-svc-promo-social-dot {
  position: absolute;
  top: -11px;
  left: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--td-pink);
  transform: translateX(-50%);
  box-shadow: 0 0 20px 6px rgba(183, 37, 88, 0.7);
}

@keyframes tdSvcPromoSocialOrbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.td-svc-promo-social-ring {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.td-svc-promo-social-ring::before {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  border: 48px solid var(--td-pink);
}

.td-svc-promo-social-link {
  --r: 152px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  margin: -26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  color: var(--td-white);
  pointer-events: auto;
  transform: rotate(calc(var(--a) - 90deg)) translate(var(--r)) rotate(calc(-1 * (var(--a) - 90deg)));
  transition: opacity 0.25s ease;
}

.td-svc-promo-social-link svg { width: 27px; height: 27px; }

.td-svc-promo-social-link:hover { opacity: 0.55; }

@media (max-width: 991px) {
  .td-svc-promo { height: auto; }
  .td-svc-promo-main {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px 32px;
  }
  .td-svc-promo-left { max-width: 100%; }
  .td-svc-promo-social {
    position: static;
    transform: none;
    width: auto;
    height: auto;
    order: -1;
    margin-bottom: 20px;
  }
  .td-svc-promo-social-border { display: none; }
  .td-svc-promo-social-ring { display: flex; gap: 10px; }
  .td-svc-promo-social-ring::before { display: none; }
  .td-svc-promo-social-link {
    position: static;
    width: 38px;
    height: 38px;
    margin: 0;
    transform: none !important;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--td-white);
  }
}

@media (max-width: 767px) {
  .td-svc-promo { margin: 10px; }
  .td-svc-promo-topbar { padding: 20px 20px 0; gap: 10px; }
  .td-svc-promo-badge { display: none; }
  .td-svc-promo-main { padding: 16px 20px 28px; }
  .td-svc-promo-title { font-size: 26px; white-space: normal; }
}

/* ----- Process — center timeline, alternating white/pink cards ----- */
.td-svc-process {
  background-color: #e7eded;
  padding: 120px 40px;
}

.td-svc-section-head--center {
  display: block;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 72px;
  text-align: center;
}

.td-svc-section-head--center .td-svc-lead { margin: 16px auto 0; }

.td-svc-timeline {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.td-svc-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(10, 10, 10, 0.12) 6%, rgba(10, 10, 10, 0.12) 94%, transparent);
  transform: translateX(-50%);
}

.td-svc-timeline-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 32px;
}

.td-svc-timeline-item + .td-svc-timeline-item { margin-top: 36px; }

.td-svc-timeline-side {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}

.td-svc-timeline-side--left { justify-content: flex-end; }
.td-svc-timeline-side--right { justify-content: flex-start; }

.td-svc-timeline-dot {
  flex: none;
  position: relative;
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--td-white);
  border: 2px solid var(--td-pink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--td-pink);
}

.td-svc-timeline-card {
  position: relative;
  max-width: 440px;
  width: 100%;
  background: var(--td-white);
  border: 1px solid rgba(10, 10, 10, 0.07);
  border-radius: 20px;
  padding: 36px 40px;
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease, box-shadow 0.4s ease;
}

.td-svc-timeline-side--left .td-svc-timeline-card { transform: translateX(-70px); }
.td-svc-timeline-side--right .td-svc-timeline-card { transform: translateX(70px); }

.td-svc-timeline-card.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.td-svc-timeline-side--left .td-svc-timeline-card:hover { transform: translateX(-14px); }
.td-svc-timeline-side--right .td-svc-timeline-card:hover { transform: translateX(14px); }

.td-svc-timeline-card:hover {
  box-shadow: 0 26px 50px -22px rgba(10, 10, 10, 0.22);
}

.td-svc-timeline-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--td-dark-text);
  margin: 0 0 12px;
}

.td-svc-timeline-text {
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--td-dark-text-soft);
  margin: 0;
}

.td-svc-timeline-card--pink {
  background: var(--td-pink);
  border-color: transparent;
}

.td-svc-timeline-card--pink:hover {
  box-shadow: 0 26px 50px -22px rgba(183, 37, 88, 0.55);
}

.td-svc-timeline-card--pink .td-svc-timeline-title,
.td-svc-timeline-card--pink .td-svc-timeline-text {
  color: var(--td-white);
}

@media (max-width: 767px) {
  .td-svc-process { padding: 70px 20px; }
  .td-svc-section-head--center { margin-bottom: 44px; }
  .td-svc-timeline::before { left: 20px; }
  .td-svc-timeline-item { padding-left: 46px; gap: 0; }
  .td-svc-timeline-side:empty { display: none; }
  .td-svc-timeline-side--left,
  .td-svc-timeline-side--right { flex: 1 1 auto; justify-content: flex-start; }
  .td-svc-timeline-dot { position: absolute; left: 20px; top: 0; transform: translateX(-50%); width: 40px; height: 40px; font-size: 13px; }
  .td-svc-timeline-card { max-width: 100%; padding: 28px 26px; }
  .td-svc-timeline-side--left .td-svc-timeline-card:hover,
  .td-svc-timeline-side--right .td-svc-timeline-card:hover { transform: translateX(6px); }
}

/* ----- Why us (reuses .td-who-features / .td-who-feature) ----- */
.td-svc-why {
  background-color: var(--td-black);
  color: var(--td-white);
  padding: 120px 40px;
}

/* ----- FAQ (Bootstrap accordion, reskinned) ----- */
.td-svc-faq {
  background-color: var(--td-light-bg-1);
  padding: 120px 40px;
  text-align: center;
}

.td-svc-faq .td-svc-section-head {
  display: block;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.td-svc-faq .td-svc-lead {
  margin-left: auto;
  margin-right: auto;
}

.td-svc-faq-list {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.td-svc-faq .accordion-item {
  background: var(--td-white);
  border: 1px solid rgba(10, 10, 10, 0.06);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 18px rgba(10, 10, 10, 0.04);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.td-svc-faq .accordion-item:has(.accordion-button:not(.collapsed)) {
  box-shadow: 0 12px 32px rgba(10, 10, 10, 0.09);
  border-color: rgba(183, 37, 88, 0.18);
}

.td-svc-faq .accordion-button {
  background: transparent;
  color: var(--td-dark-text);
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 28px;
  box-shadow: none;
}

.td-svc-faq .accordion-button:not(.collapsed) { color: var(--td-pink); }

.td-svc-faq-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--td-light-bg-1);
  color: var(--td-pink);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.td-svc-faq .accordion-button:not(.collapsed) .td-svc-faq-num {
  background: var(--td-pink);
  color: var(--td-white);
}

.td-svc-faq .accordion-button::after {
  background-image: none;
  content: "+";
  width: auto;
  height: auto;
  margin-left: auto;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--td-pink);
  transition: transform 0.3s ease;
}

.td-svc-faq .accordion-button:not(.collapsed)::after { transform: rotate(45deg); }

.td-svc-faq .accordion-button:focus { box-shadow: none; }

.td-svc-faq .accordion-body {
  padding: 0 28px 28px 80px;
  color: var(--td-dark-text-soft);
  font-size: 16px;
  line-height: 1.75;
}

/* ----- Responsive ----- */
@media (max-width: 991px) {
  .td-svc-offer-grid { grid-template-columns: 1fr 1fr; }
  .td-svc-why .td-who-features { grid-template-columns: 1fr; }
  .td-svc-hero-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px 32px;
  }
  .td-svc-hero-left { flex: 0 0 auto; max-width: 100%; }
  .td-svc-hero-right { order: -1; width: 100%; margin-bottom: 20px; }
  .td-svc-hero-visual { max-width: 380px; margin: 0 auto; }
  .td-svc-offer, .td-svc-why, .td-svc-faq { padding: 90px 24px; }
  .td-svc-process { padding-top: 90px; }
  .td-svc-process .td-svc-section-head { padding: 0 24px; }
}

@media (max-width: 767px) {
  .td-svc-hero { margin: 10px; }
  .td-svc-topbar { padding: 20px 20px 0; }
  .td-svc-hero-inner { padding: 16px 20px 28px; }
  .td-svc-offer-grid { grid-template-columns: 1fr; }
  .td-svc-section-head { margin-bottom: 36px; }
  .td-svc-offer, .td-svc-why, .td-svc-faq { padding: 70px 18px; }
  .td-svc-process { padding-top: 70px; }
  .td-svc-process .td-svc-section-head { padding: 0 18px; }
  .td-svc-faq .accordion-button { font-size: 16px; padding: 20px 18px; gap: 14px; }
  .td-svc-faq-num { width: 28px; height: 28px; font-size: 11px; }
  .td-svc-faq .accordion-body { padding: 0 18px 22px 62px; }
}

@media (max-width: 480px) {
  .td-svc-hero-title { font-size: 32px; }
  .td-svc-hero-title--sm { font-size: 28px; }
  .td-svc-hero-desc { font-size: 16px; }
  .td-svc-trust { flex-wrap: wrap; }
  .td-svc-hero-visual { max-width: 280px; }
}

/* =========================================================
   About page — value cards, team grid
   ========================================================= */
.td-about-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.td-about-page-grid .td-about-card { position: static; margin-bottom: 0; }

.td-about-card-link { color: inherit; transition: color 0.25s ease; }
.td-about-card-link:hover { color: var(--td-pink); }
.td-about-card--active .td-about-card-link:hover { color: var(--td-white); }

#tdAboutTeam { background-color: var(--td-light-bg-1); }

.td-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.td-team-card {
  position: relative;
  text-align: center;
  background: var(--td-white);
  border: 1px solid rgba(10, 10, 10, 0.06);
  border-radius: 22px;
  padding: 46px 26px 32px;
  box-shadow: 0 2px 16px rgba(10, 10, 10, 0.03);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.td-team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 50px -22px rgba(10, 10, 10, 0.18);
  border-color: rgba(183, 37, 88, 0.2);
}

.td-team-avatar {
  position: relative;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 24px;
  box-shadow: 0 0 0 4px var(--td-white), 0 0 0 6px rgba(183, 37, 88, 0.2);
  transition: box-shadow 0.35s ease;
}

.td-team-card:hover .td-team-avatar {
  box-shadow: 0 0 0 4px var(--td-white), 0 0 0 6px var(--td-pink);
}

.td-team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.td-team-card:hover .td-team-avatar img { transform: scale(1.08); }

.td-team-name {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--td-dark-text);
  margin: 0 0 6px;
}

.td-team-role {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--td-pink);
  margin: 0 0 22px;
}

.td-team-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.td-team-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--td-light-bg-1);
  color: var(--td-dark-text-soft);
  font-size: 13px;
  font-weight: 600;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.td-team-social a:hover {
  background: var(--td-pink);
  color: var(--td-white);
  transform: translateY(-2px);
}

/* =========================================================
   Contact page — info cards, form, side panel
   ========================================================= */
.td-contact-section {
  background-color: var(--td-light-bg-2);
  padding: 120px 40px;
}

.td-contact-form-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.td-contact-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: var(--td-white);
  border-radius: 24px;
  padding: 44px;
  border: 1px solid rgba(10, 10, 10, 0.06);
  box-shadow: 0 20px 60px -30px rgba(10, 10, 10, 0.15);
}

.td-contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.td-contact-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.td-contact-form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--td-dark-text);
}

.td-contact-form-group input,
.td-contact-form-group select,
.td-contact-form-group textarea {
  border: 1px solid rgba(10, 10, 10, 0.12);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  color: var(--td-dark-text);
  background: var(--td-light-bg-1);
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.td-contact-form-group input:focus,
.td-contact-form-group select:focus,
.td-contact-form-group textarea:focus {
  outline: none;
  border-color: var(--td-pink);
  background: var(--td-white);
}

.td-contact-form-group textarea { resize: vertical; min-height: 150px; }

.td-contact-form-submit {
  align-self: flex-start;
  border: none;
  cursor: pointer;
}

.td-contact-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.td-contact-side-card {
  background: var(--td-black);
  color: var(--td-white);
  border-radius: 20px;
  padding: 30px;
}

.td-contact-side-card h4 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 10px;
}

.td-contact-side-card p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 20px;
}

.td-contact-side-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--td-pink);
  font-weight: 600;
  font-size: 14px;
}

.td-contact-side-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--td-white);
  border: 1px solid rgba(10, 10, 10, 0.06);
  border-radius: 18px;
  padding: 20px 22px;
}

.td-contact-side-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--td-light-bg-1);
  color: var(--td-pink);
}

.td-contact-side-item h5 {
  font-size: 13px;
  font-weight: 600;
  color: var(--td-dark-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 4px;
}

.td-contact-side-item a,
.td-contact-side-item p {
  font-size: 15px;
  font-weight: 600;
  color: var(--td-dark-text);
  margin: 0;
}

/* ----- Responsive: about / contact ----- */
@media (max-width: 991px) {
  .td-about-page-grid { grid-template-columns: 1fr 1fr; }
  .td-team-grid { grid-template-columns: 1fr 1fr; }
  .td-contact-section { padding: 90px 24px; }
  .td-contact-form-wrap { grid-template-columns: minmax(0, 1fr); }
  .td-contact-form { padding: 32px; }
}

@media (max-width: 767px) {
  .td-about-page-grid { grid-template-columns: 1fr; }
  .td-team-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .td-contact-section { padding: 70px 18px; }
  .td-contact-form-row { grid-template-columns: 1fr; gap: 16px; }
  .td-contact-form { padding: 26px; }
}

@media (max-width: 480px) {
  .td-team-grid { grid-template-columns: 1fr; }
}