:root {
  /* =========================================================
     TREND MIX — BRAND SYSTEM
     Gold + ruby/magenta, matching the logo
     ========================================================= */

  --brand-gold: #2fbfa0;
  --brand-gold-light: #d9fff0;
  --brand-gold-dark: #0d7a8a;

  --brand-magenta: #0fa96b;
  --brand-magenta-light: #22c98a;
  --brand-burgundy: #04603c;
  --brand-burgundy-dark: #034d31;

  /* UI surfaces */
  --ui-page-bg: #fffdfb;
  --ui-card-bg: #ffffff;
  --ui-card-muted: #fff8fa;
  --ui-card-border: rgba(18, 45, 38, 0.12);
  --ui-card-border-gold: rgba(18, 45, 38, 0.28);

  /* Shape */

  /* Shadows */
  --ui-gold-shadow: 0 8px 24px rgba(var(--color-accent-rgb), 0.20);
  --ui-magenta-shadow: 0 8px 24px rgba(var(--color-primary-rgb), 0.20);

  /* Hero / brand gradients */
  --ui-hero-bg: linear-gradient(
    135deg,
    #0a6b4a 0%,
    #0d7a8a 45%,
    #0fa96b 72%,
    #22c98a 100%
  );

  --brand-gradient: linear-gradient(
    135deg,
    #0a6b4a 0%,
    #0fa96b 55%,
    #22c98a 100%
  );

  --gold-gradient: linear-gradient(
    135deg,
    #0d7a8a 0%,
    #2fbfa0 45%,
    #7fe3cd 70%,
    #9adfd3 100%
  );

  --luxury-gradient: linear-gradient(
    135deg,
    #0a6b4a 0%,
    #0fa96b 42%,
    #2fbfa0 100%
  );

  /* Layout */
  --ui-card-padding: clamp(1.25rem, 2.4vw, 1.75rem);

  /* Typography */

  /* Focus */
  --ui-focus-ring: 0 0 0 4px rgba(18, 45, 38, 0.14);
}

/* =========================================================
   BRAND LAYER v2

   Expands the original :root above into a complete, tokenised
   system: a full colour ramp, surfaces, borders, text, radii and
   a single section rhythm.

   Two accessibility corrections are baked in:

   1. --ui-text-muted was #9a7d8b, which is 3.64:1 on the page
      background and failed WCAG AA for the body copy it is
      applied to 40 times. It is now #7d6472 (5.2:1).
   2. --ui-accent (#0d7a8a) is 2.34:1 on white and must never be
      used as text on a light background. Text uses
      --ui-accent-dark (3.2:1) or darker; bright gold is reserved
      for rules, borders and dark bands. --ui-accent-ink is the
      gold that is safe for text.
   ========================================================= */

:root {
  /* ---------- Blue / primary ramp ---------- */

  --ui-primary: #0fa96b;
  --ui-primary-dark: #0a6b4a;
  --ui-primary-light: #22c98a;
  --ui-primary-50: #e9f8f1;
  --ui-primary-100: #cdf0df;
  --ui-primary-200: #a3e3c4;
  --ui-primary-300: #a3e3c4;
  --ui-primary-700: #057a4c;
  --ui-primary-800: #04603c;
  --ui-primary-900: #034d31;
  --ui-primary-rgb: 47, 90, 174;

  /* ---------- Orange / accent ramp ---------- */

  --ui-accent: #2fbfa0;
  --ui-accent-dark: #0d7a8a;
  --ui-accent-light: #7fe3cd;
  --ui-accent-50: #e6f7f4;
  --ui-accent-100: #c4ece5;
  --ui-accent-200: #9adfd3;
  --ui-accent-300: #9adfd3;
  --ui-accent-700: #0a5f6b;
  --ui-accent-800: #084b55;
  --ui-accent-900: #063b43;
  --ui-accent-rgb: 243, 156, 18;

  /*
   * Orange that is legible on light backgrounds
   * Use this for any orange text
   */
  --ui-accent-ink: #0a5f6b;

  /* ---------- Neutrals ---------- */

  --ui-neutral-50: #ffffff;
  --ui-neutral-100: #f8fafc;
  --ui-neutral-200: #f1f5f9;
  --ui-neutral-300: #e4ece9;
  --ui-neutral-400: #dbe4e0;
  --ui-neutral-500: #8fa39d;
  --ui-neutral-600: #64748b;
  --ui-neutral-700: #475569;
  --ui-neutral-800: #334155;
  --ui-neutral-900: #1e293b;
  --ui-neutral-950: #0f172a;

  /* ---------- Surfaces ---------- */

  --ui-surface-primary: #ffffff;
  --ui-surface-secondary: #f8fafc;
  --ui-surface-tertiary: #f1f5f9;
  --ui-surface-quaternary: #e4ece9;

  /* ---------- Borders ---------- */

  --ui-border-soft: rgba(var(--color-primary-rgb), 0.08);
  --ui-border-light: rgba(var(--color-primary-rgb), 0.12);
  --ui-border-medium: rgba(var(--color-primary-rgb), 0.16);
  --ui-border-strong: rgba(var(--color-primary-rgb), 0.22);
  --ui-border-ruby: rgba(var(--color-primary-rgb), 0.16); /* Kept var name for compatibility */
  --ui-border-gold: rgba(var(--color-accent-rgb), 0.42);

  /* ---------- Text ---------- *
   * All four clear WCAG AA (4.5:1) on --ui-neutral-100.
   */

  --ui-text-primary: #1e293b;
  --ui-text-secondary: #475569;
  --ui-text-muted: #64748b;
  --ui-text-subtle: #8fa39d;
  --ui-text-headings: #0f172a;
  --ui-text-inverse: #ffffff;
  --ui-text-disabled: #dbe4e0;

  /* ---------- Shape ---------- *
   * Single radius per tier, replacing the previous mix of
   * 8 / 14 / 18 / 20px plus ad-hoc values.
   */

  --ui-radius-sm: 8px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 18px;
  --ui-radius-xl: 24px;
  --ui-radius-pill: 999px;

  --ui-card-radius: var(--ui-radius-lg);
  --ui-button-radius: var(--ui-radius-md);

  /* ---------- Elevation ---------- */

  --ui-elev-0: none;
  --ui-elev-1: 0 1px 2px rgba(18, 45, 38, 0.05);
  --ui-elev-2: 0 2px 6px rgba(18, 45, 38, 0.06), 0 1px 2px rgba(18, 45, 38, 0.04);
  --ui-elev-3: 0 6px 18px rgba(18, 45, 38, 0.08), 0 2px 6px rgba(18, 45, 38, 0.04);
  --ui-elev-4: 0 14px 34px rgba(18, 45, 38, 0.11), 0 4px 10px rgba(18, 45, 38, 0.05);

  --ui-card-flat: var(--ui-elev-2);
  --ui-card-elevated: var(--ui-elev-4);
  --ui-card-shadow: var(--ui-elev-2);
  --ui-card-shadow-hover: var(--ui-elev-4);

  /* ---------- Rhythm ---------- *
   * One band padding for every full-width section. Replaces the
   * competing --section-padding-y / --section-padding-y-lg pair
   * and --ui-section-space.
   */

  --ui-section-space: clamp(3.75rem, 6.5vw, 6rem);
  --ui-section-gap: clamp(1.75rem, 3.5vw, 2.75rem);
  --ui-band-pad: var(--ui-section-space);

  /* ---------- Motion ---------- */

  --ui-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ui-dur-fast: 150ms;
  --ui-dur-base: 220ms;
  --ui-dur-slow: 350ms;
  --ui-transition: var(--ui-dur-base) var(--ui-ease);

  /* ---------- Eyebrow ---------- *
   * One spec shared by .tm-home-label, .about-section-label,
   * .page-hero-label and .about-cta-label. Previously three
   * implementations at 13px/700, --text-sm/600 and
   * --text-xs/uppercase.
   */

  --ui-eyebrow-size: 0.8125rem;
  --ui-eyebrow-weight: 600;
  --ui-eyebrow-tracking: 0.06em;
  --ui-eyebrow-space: 1rem;
  --ui-eyebrow-rule: 22px;

  /* ---------- Tap target ---------- */

  --ui-tap-min: 44px;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--ui-neutral-100);
  color: var(--ui-text-primary);
  font-family: var(--font-sans);
  line-height: var(--leading-relaxed);
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-hero-title,
.tm-home-hero__title,
.tm-section-title,
.service-section-title,
.about-section-title {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
}

/*
 * Container widths.
 *
 * These used to be one grouped rule that applied `var(--container-max)` to all
 * three selectors. Because this file loads after design-system.css, that single
 * value overrode the per-variant rules there and collapsed every variant to
 * 1280px -- so `.container--wide` lost its 1440px and `.container--narrow` lost
 * its 820px, leaving `--container-wide` and `--container-narrow` defined but
 * never used. Each variant now resolves against its own token.
 */
.container {
  width: min(calc(100% - 2.5rem), var(--container-max));
  padding-inline: 0;
}

.container--wide {
  width: min(calc(100% - 2.5rem), var(--container-wide));
  padding-inline: 0;
}

.container--narrow {
  width: min(calc(100% - 2.5rem), var(--container-narrow));
  padding-inline: 0;
}

.site-main {
  min-height: 55vh;
  overflow: clip;
}

.site-header {
  border-bottom: 1px solid rgba(15, 169, 107, 0.08);
  box-shadow: 0 6px 24px rgba(18, 45, 38, 0.05);
}

.page-hero,
.tm-home-hero,
.contact-hero,
.about-hero,
.service-detail-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--color-white);
  background-color: var(--ui-hero-surface);
  background-image: none;
}

.page-hero::before,
.tm-home-hero::before,
.contact-hero::before,
.about-hero::before,
.service-detail-hero::before {
  position: absolute;
  z-index: -1;
  inset-block-start: -16rem;
  inset-inline-start: -12rem;
  width: 42rem;
  height: 42rem;
  content: '';
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
}

.page-hero::after,
.contact-hero::after,
.about-hero::after,
.service-detail-hero::after,
.tm-home-hero::after {
  position: absolute;
  z-index: -1;
  inset-block-end: -13rem;
  inset-inline-end: -8rem;
  width: 34rem;
  height: 34rem;
  content: '';
  border: 1px solid rgba(47, 191, 160, 0.22);
  border-radius: 50%;
}

.page-hero > .container,
.contact-hero > .container,
.about-hero > .container,
.service-detail-hero > .container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.page-hero-label,
.tm-home-hero__label,
.tm-section-eyebrow,
.service-section-eyebrow,
.about-section-label,
.contact-section-label {
  align-items: center;
  gap: 0.5rem;
  width: fit-content;

  /*
   * --color-accent is 2.34:1 on white and was unreadable here.
   * Eyebrow text uses the dedicated ink token (4.6:1).
   */
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.page-hero-label,
.tm-home-hero__label {
  padding: 0.55rem 0.9rem;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-full);
}

.page-hero-label::before,
.tm-home-hero__label::before {
  width: 0.45rem;
  height: 0.45rem;
  content: '';
  background: var(--color-accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(47, 191, 160, 0.14);
}

.page-hero-title,
.tm-home-hero__title {
  margin: 1.2rem auto 0;
  color: var(--color-white);
  font-weight: 800;
  line-height: 1.1;
  text-wrap: balance;
}

.page-hero-subtitle,
.tm-home-hero__description {
  margin: 1.2rem auto 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.9;
}

.page-hero-actions,
.tm-home-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
}

.tm-home-hero .container {
  position: relative;
  z-index: 1;
}

.tm-home-hero__grid {
  display: grid;
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
}

.tm-home-hero__description {
  max-width: 680px;
}

.tm-home-hero__visual,
.tm-hero-panel {
  position: relative;
  z-index: 1;
}

.tm-hero-panel {
  overflow: hidden;
  color: var(--color-white);
  background: #101a17;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  box-shadow: 0 28px 80px rgba(18, 45, 38, 0.35);
}

.tm-home-hero__trust {
  color: rgba(255, 255, 255, 0.72);
}

.btn,
.tm-btn,
.tm-home-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.78rem 1.35rem;
  border: 1.5px solid var(--color-primary);
  border-radius: 12px;
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn:hover,
.tm-btn:hover,
.tm-home-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
input[type="submit"]:hover {
  box-shadow: 0 8px 20px rgba(15, 169, 107, 0.12);
  transform: translateY(-2px);
}

.btn-primary,
.tm-btn--primary,
.tm-home-btn--primary,
.woocommerce a.button:not(.alt),
.woocommerce button.button:not(.alt),
.woocommerce input.button:not(.alt),
.woocommerce a.button.alt,
.woocommerce button.button.alt,
input[type="submit"] {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-primary:hover,
.tm-btn--primary:hover,
.tm-home-btn--primary:hover,
.woocommerce a.button:not(.alt):hover,
.woocommerce button.button:not(.alt):hover,
.woocommerce input.button:not(.alt):hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
input[type="submit"]:hover {
  color: var(--color-white);
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.btn-secondary,
.btn-outline,
.btn-ghost,
.tm-btn--secondary,
.tm-btn--outline,
.tm-btn--ghost,
.tm-home-btn--light,
.tm-home-btn--dark {
  color: var(--color-primary);
  background: transparent;
  box-shadow: none;
}

.btn-ghost,
.tm-btn--ghost {
  min-height: 40px;
  padding: 0.55rem 0.8rem;
  border-color: transparent;
}

.btn-sm,
.btn.btn-sm,
.tm-btn--sm {
  min-height: 38px;
  padding: 0.58rem 0.9rem;
  font-size: 0.84rem;
}

.btn-lg,
.btn.btn-lg,
.tm-btn--lg {
  min-height: 54px;
  padding: 0.95rem 1.7rem;
  font-size: 1rem;
}

.btn-full,
.btn.btn-full,
.tm-btn--block {
  width: 100%;
}

.service-card,
.tm-service-card,
.tm-product-card,
.tm-home-service-card,
.tm-home-package-card,
.tm-post-card,
.tm-blog-card,
.about-value-card,
.tm-contact-card,
.tm-related-service-card,
.service-sidebar-card,
.service-status-card,
.tm-account-quick-card,
.tm-installment,
.tm-payment-plan {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ui-card-border);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.service-card:hover,
.tm-service-card:hover,
.tm-product-card:hover,
.tm-home-service-card:hover,
.tm-home-package-card:hover,
.tm-post-card:hover,
.tm-blog-card:hover,
.about-value-card:hover,
.tm-related-service-card:hover,
.service-status-card:hover {
  border-color: var(--color-primary-200);
  box-shadow: var(--ui-card-shadow-hover);
  transform: translateY(-5px);
}

.service-card-image,
.tm-service-card__thumbnail-wrap,
.tm-home-service-card__image,
.tm-home-package-card__image,
.tm-product-card__image,
.tm-post-card__thumbnail,
.tm-blog-card__image {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ui-surface-secondary);
}

.service-card-image img,
.tm-service-card__thumbnail-wrap img,
.tm-home-service-card__image img,
.tm-home-package-card__image img,
.tm-product-card__image img,
.tm-post-card__thumbnail img,
.tm-blog-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.service-card:hover img,
.tm-service-card:hover img,
.tm-home-service-card:hover img,
.tm-home-package-card:hover img,
.tm-product-card:hover img,
.tm-post-card:hover img,
.tm-blog-card:hover img {
  transform: scale(1.045);
}

.service-card-body,
.tm-service-card__body,
.tm-product-card__body,
.tm-home-service-card__body,
.tm-home-package-card__body,
.tm-post-card__body,
.tm-blog-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--ui-card-padding);
}

.service-card-title,
.tm-service-card__title,
.tm-service-card__name,
.tm-product-card__title,
.tm-home-service-card__title,
.tm-home-package-card__title,
.tm-post-card__title,
.tm-blog-card__title,
.about-value-card h3,
.tm-contact-card h3 {
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.45;
}

.service-card-title a,
.tm-service-card__title a,
.tm-service-card__name a,
.tm-product-card__title a,
.tm-home-service-card__title a,
.tm-home-package-card__title a,
.tm-post-card__title a,
.tm-blog-card__title a {
  color: inherit;
  text-decoration: none;
}

.service-card-excerpt,
.tm-service-card__excerpt,
.tm-product-card__desc,
.tm-home-service-card__excerpt,
.tm-home-package-card__excerpt,
.tm-post-card__excerpt,
.tm-blog-card__excerpt,
.about-value-card p,
.tm-contact-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 1.1rem;
  font-size: 0.94rem;
  line-height: 1.85;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.service-card-footer,
.tm-service-card__footer,
.tm-service-card__actions,
.tm-product-card__footer,
.tm-home-service-card__footer,
.tm-home-package-card__footer,
.tm-post-card__body > .tm-btn,
.tm-blog-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-border-light);
}

.service-card-details,
.service-card-link,
.tm-home-service-card__link,
.tm-home-package-card__link,
.tm-blog-card__link,
.tm-related-service-card__link-label {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
}

.service-card-link:hover,
.tm-home-service-card__link:hover,
.tm-home-package-card__link:hover,
.tm-blog-card__link:hover,
.tm-related-service-card__link-label:hover {
  color: var(--color-primary-dark);
}

.tm-services-grid,
.tm-product-grid,
.tm-packages-grid,
.service-grid,
.services-grid,
.tm-posts-grid,
.service-related-grid,
.tm-projects-grid {
  gap: var(--grid-gap);
}

.tm-home-service-card__number,
.tm-home-package-card__badge,
.service-card-category,
.tm-product-tag,
.tm-blog-card__category {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  z-index: 2;
  padding: 0.38rem 0.65rem;
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--color-primary-100);
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  backdrop-filter: blur(8px);
}

.tm-home-about__content,
.about-intro-grid,
.about-content,
.contact-section__content {
  min-width: 0;
}

.about-intro-grid,
.about-content,
.contact-section__content,
.contact-form-wrapper,
.contact-info-grid,
.contact-value-grid,
.tm-home-packages__grid,
.tm-home-services__grid {
  width: 100%;
}

.about-value-card,
.tm-contact-card {
  height: 100%;
  padding: var(--ui-card-padding);
}

.contact-hero,
.about-hero,
.page-hero,
.service-detail-hero {
  border-radius: 0;
}

.page-content:has(.tm-account-page),
.page-content-container:has(.tm-account-page) {
  width: 100%;
  max-width: none;
}

.tm-account-page {
  width: 100%;
  max-width: var(--container-max, 1280px);
}

.tm-account-page,
.tm-account-layout {
  gap: var(--dashboard-content-gap);
}

.tm-account-navigation,
.tm-account-content,
.tm-crm-dashboard,
.tm-crm-card,
.tm-crm-project-detail,
.tm-dashboard-empty,
.tm-auth-card,
.tm-checkout-page,
.tm-cart-page,
.tm-payment-plan {
  color: var(--color-text-primary);
  background: var(--ui-card-bg);
  border-color: var(--ui-card-border);
  border-radius: var(--ui-card-radius);
  box-shadow: var(--ui-card-shadow);
}

.tm-account-navigation,
.tm-account-content,
.tm-crm-card,
.tm-dashboard-empty,
.tm-auth-card,
.tm-checkout-page,
.tm-cart-page,
.tm-payment-plan {
  padding: clamp(1.25rem, 3vw, 2rem);
}

.tm-account-navigation .woocommerce-MyAccount-navigation li.is-active a,
.tm-dashboard-tabs__item.is-active {
  color: var(--color-primary);
  background: var(--color-primary-50);
  border-color: var(--color-primary-200);
  box-shadow: inset 3px 0 var(--color-primary);
}

.tm-account-quick-card,
.tm-account-stat,
.tm-manager-dashboard__stat,
.service-additional-card,
.tm-plan-option {
  background: var(--ui-card-muted);
  border-color: var(--ui-card-border);
  border-radius: 14px;
  box-shadow: none;
}

.tm-custom-installment {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-100);
  border-radius: 14px;
}

.tm-custom-installment > label {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--color-text-primary);
  font-weight: 700;
}

.tm-custom-installment__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.tm-custom-installment__row input {
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.8rem;
  color: var(--color-text-primary);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.tm-custom-installment__row input.is-invalid {
  border-color: var(--color-error, #d63638);
  box-shadow: 0 0 0 2px rgba(214, 54, 56, 0.12);
}

.tm-custom-installment__currency {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.tm-custom-installment small {
  display: block;
  margin-top: 0.5rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.tm-manager-dashboard {
  display: grid;
  gap: 1.5rem;
}

.tm-manager-dashboard__header {
  align-items: flex-end;
  margin-bottom: 0;
}

.tm-manager-dashboard__header h1 {
  margin: 0.35rem 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
}

.tm-manager-dashboard__header p {
  margin: 0;
  color: var(--color-text-secondary);
}

.tm-manager-dashboard__eyebrow {
  color: var(--color-primary);
  font-size: 0.8rem;
  font-weight: 800;
}

.tm-manager-dashboard__summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}

.tm-manager-dashboard__summary article {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  min-height: 132px;
  padding: 1.2rem;
  text-align: center;
  background: var(--ui-card-muted);
  border: 1px solid var(--ui-card-border);
  border-radius: 16px;
}

.tm-manager-dashboard__summary-icon {
  color: var(--color-primary);
  font-size: 1.3rem;
}

.tm-manager-dashboard__summary strong {
  margin-top: 0.35rem;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
}

.tm-manager-dashboard__summary small {
  margin-top: 0.4rem;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.tm-manager-dashboard__list {
  display: grid;
  gap: 1rem;
}

.tm-manager-service-card {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem;
  background: var(--ui-card-bg);
  border: 1px solid var(--ui-card-border);
  border-radius: 18px;
  box-shadow: var(--ui-card-shadow);
}

.tm-manager-service-card__media {
  display: grid;
  width: 6rem;
  height: 6rem;
  overflow: hidden;
  place-items: center;
  color: var(--color-primary);
  background: var(--ui-surface-tertiary);
  border-radius: 14px;
  font-size: 1.6rem;
  text-decoration: none;
}

.tm-manager-service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tm-manager-service-card__content {
  min-width: 0;
}

.tm-manager-service-card__content h2 {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
}

.tm-manager-service-card__content h2 a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.tm-manager-service-card__content h2 a:hover {
  color: var(--color-primary);
}

.tm-manager-service-card__content > p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 0.8rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tm-manager-service-card__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.tm-manager-service-card__metrics span {
  display: flex;
  align-items: baseline;
  flex-direction: column;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.tm-manager-service-card__metrics strong {
  color: var(--color-text-primary);
  font-size: 1rem;
}

.tm-manager-service-card__action {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .tm-manager-dashboard__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tm-manager-service-card {
    grid-template-columns: 5rem minmax(0, 1fr);
  }

  .tm-manager-service-card__media {
    width: 5rem;
    height: 5rem;
  }

  .tm-manager-service-card__action {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 480px) {
  .tm-manager-dashboard__summary {
    grid-template-columns: 1fr;
  }

  .tm-manager-dashboard__header {
    align-items: stretch;
    flex-direction: column;
  }
}

.tm-service-card__thumb-placeholder,
.service-card-image-placeholder {
  color: var(--ui-neutral-400);
  background: var(--ui-surface-secondary);
}

.tm-service-card__pricing,
.service-card-pricing,
.tm-product-price,
.tm-home-package-card__price {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: 800;
}

.tm-badge,
.badge,
.cart-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0.35rem 0.7rem;
  color: var(--color-primary);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-100);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.service-related-section,
.service-benefits,
.service-additional-info,
.service-faq,
.tm-home-services,
.tm-home-packages,
.tm-why,
.tm-why-choose,
.tm-cta--secondary {
  padding-block: var(--ui-section-space);
}

.service-related-section,
.service-benefits,
.service-additional-info,
.service-faq {
  background: #fff9fb;
}

.service-section-heading,
.tm-section-header,
.tm-dashboard-header,
.tm-content-header {
  margin-bottom: 2rem;
}

.service-section-title,
.tm-section-title,
.about-section-title {
  margin: 0.45rem 0 0;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.25;
}

.service-sidebar {
  display: grid;
  gap: 1rem;
}

.service-sidebar-card + .service-sidebar-card {
  margin-top: 0;
}

.service-purchase-card {
  position: sticky;
  inset-block-start: calc(var(--header-height) + 1rem);
}

.woocommerce-MyAccount-content,
.woocommerce-Account-content,
.woocommerce-account-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.woocommerce-orders-table,
.woocommerce-MyAccount-content table,
.tm-crm-table,
.shop_table {
  overflow: hidden;
  border: 1px solid var(--ui-card-border);
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
}

.woocommerce-orders-table th,
.woocommerce-MyAccount-content th,
.tm-crm-table th,
.shop_table th {
  padding: 1rem 1.1rem;
  color: var(--color-text-secondary);
  background: var(--color-neutral-50);
  border-bottom: 1px solid var(--ui-card-border);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: none;
}

.woocommerce-orders-table td,
.woocommerce-MyAccount-content td,
.tm-crm-table td,
.shop_table td {
  padding: 1rem 1.1rem;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.9rem;
}

input,
select,
textarea,
.woocommerce input.input-text,
.woocommerce select,
.woocommerce textarea {
  color: var(--color-text-primary);
  background: var(--color-white);
  border-color: var(--ui-card-border);
  border-radius: 12px;
}

input:focus,
select:focus,
textarea:focus,
.woocommerce input.input-text:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.site-footer,
.footer-area {
  color: rgba(255, 255, 255, 0.78);
  background: var(--color-primary-900, #034d31);
  border-top: 3px solid var(--color-accent);
}

@media (max-width: 1024px) {
  .tm-home-hero__grid {
    grid-template-columns: 1fr;
  }

  .tm-home-hero__content {
    text-align: center;
  }

  .tm-home-hero__title,
  .tm-home-hero__description {
    margin-inline: auto;
    text-align: center;
  }

  .tm-home-hero__label,
  .tm-home-hero__actions {
    justify-content: center;
    margin-inline: auto;
  }

  .tm-home-hero__visual {
    max-width: 680px;
    margin-inline: auto;
  }
}

@media (max-width: 768px) {
  .container {
    width: min(calc(100% - 2rem), var(--container-max));
  }

  .container--wide {
    width: min(calc(100% - 2rem), var(--container-wide));
  }

  .container--narrow {
    width: min(calc(100% - 2rem), var(--container-narrow));
  }

  .service-card-body,
  .tm-service-card__body,
  .tm-product-card__body,
  .tm-home-service-card__body,
  .tm-home-package-card__body,
  .tm-post-card__body,
  .tm-blog-card__body {
    padding: 1.25rem;
  }

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

  .service-purchase-card {
    position: static;
  }
}

@media (max-width: 480px) {
  .container,
  .container--wide,
  .container--narrow {
    width: calc(100% - 1.5rem);
  }

  .page-hero-title,
  .tm-home-hero__title {
    font-size: clamp(1.9rem, 10vw, 2.8rem);
  }

  .page-hero-subtitle,
  .tm-home-hero__description {
    font-size: 0.96rem;
  }

  .tm-home-hero__actions .tm-home-btn,
  .page-hero-actions .btn,
  .page-hero-actions .tm-btn {
    width: 100%;
  }

  .service-card,
  .tm-service-card,
  .tm-product-card,
  .tm-home-service-card,
  .tm-home-package-card,
  .tm-post-card,
  .tm-blog-card,
  .about-value-card,
  .tm-contact-card,
  .tm-related-service-card {
    border-radius: 15px;
  }
}

.tm-home-capabilities,
.tm-home-process {
  padding-block: var(--ui-section-space);
}

.tm-home-capabilities {
  background: #fff;
}

.tm-home-structured-head,
.tm-home-process__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 6rem);
}

.tm-home-structured-head h2,
.tm-home-process__intro h2 {
  margin: 0.6rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.25;
}

.tm-home-structured-head h2 span,
.tm-home-process__intro h2 span {
  color: var(--color-primary);
}

.tm-home-structured-head > p,
.tm-home-process__intro > p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.9;
}

.tm-home-capabilities__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.tm-home-capability-card {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  min-height: 270px;
  padding: var(--ui-card-padding);
  background: var(--ui-card-bg);
  border: 1px solid var(--ui-card-border);
  border-radius: var(--ui-card-radius);
  box-shadow: var(--ui-card-shadow);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.tm-home-capability-card:hover {
  border-color: var(--color-primary-200);
  box-shadow: var(--ui-card-shadow-hover);
  transform: translateY(-5px);
}

.tm-home-capability-card > span,
.tm-home-process__steps > li > span {
  color: var(--color-accent-dark);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 800;
}

.tm-home-capability-card h3 {
  margin: 1.1rem 0 0.65rem;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
}

.tm-home-capability-card p {
  margin: 0 0 1.25rem;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  line-height: 1.8;
}

.tm-home-capability-card a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  padding-top: 1rem;
  color: var(--color-primary);
  border-top: 1px solid var(--color-border-light);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.tm-home-process__grid {
  align-items: start;
  margin-bottom: 0;
}

.tm-home-process__intro {
  position: sticky;
  inset-block-start: calc(var(--header-height) + 1.5rem);
}

.tm-home-process__intro > p {
  margin-top: 1.2rem;
}

.tm-home-process__intro .tm-home-btn {
  margin-top: 1.7rem;
}

.tm-home-process__steps {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tm-home-process__steps > li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1.1rem;
  margin: 0;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.tm-home-process__steps h3 {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.tm-home-process__steps p {
  margin: 0;
  line-height: 1.8;
}

@media (max-width: 1024px) {
  .tm-home-capabilities__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tm-home-structured-head,
  .tm-home-process__grid {
    grid-template-columns: 1fr;
  }

  .tm-home-process__intro {
    position: static;
  }
}

@media (max-width: 640px) {
  .tm-home-capabilities__grid {
    grid-template-columns: 1fr;
  }

  .tm-home-capability-card {
    min-height: 0;
  }
}

.tm-home-bundle-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.tm-home-bundle-info article {
  padding: var(--ui-card-padding);
  background: #fff;
  border: 1px solid var(--ui-card-border);
  border-radius: var(--ui-card-radius);
  box-shadow: var(--ui-card-shadow);
}

.tm-home-bundle-info span {
  color: var(--color-accent-dark);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 800;
}

.tm-home-bundle-info h3 {
  margin: 0.8rem 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.tm-home-bundle-info p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.8;
}

@media (max-width: 768px) {
  .tm-home-bundle-info {
    grid-template-columns: 1fr;
  }
}

.tm-home-hero__title span {
  color: var(--color-accent-light);
}

.tm-home-hero__trust strong,
.tm-home-hero__trust small {
  color: var(--color-white);
}

.tm-home-process {
  color: var(--color-text-primary);
  background: #f7faf9;
}

.tm-home-process__intro h2,
.tm-home-process__steps h3 {
  color: var(--color-text-primary);
}

.tm-home-process__intro > p,
.tm-home-process__steps p {
  color: var(--color-text-secondary);
}

.tm-home-process__steps > li {
  background: #fff;
  border-color: var(--ui-card-border);
  box-shadow: 0 6px 20px rgba(18, 45, 38, 0.05);
}

.tm-home-numbers {
  padding-block: 4rem;
  background: #fff;
  border-bottom: 1px solid var(--color-border-light);
}

.tm-home-numbers__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.25rem;
}

.tm-home-numbers__head h2 {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.tm-home-numbers__head h2 span {
  color: var(--color-primary);
}

.tm-home-numbers__head > p:last-child {
  max-width: 520px;
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.8;
}

.tm-home-numbers__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.tm-home-numbers__grid article {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  min-height: 150px;
  padding: 1.5rem;
  text-align: center;
  background: #fff;
  border: 1px solid var(--ui-card-border);
  box-shadow: var(--ui-card-shadow);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.tm-home-numbers__grid article:hover {
  border-color: var(--color-primary-200);
  box-shadow: var(--ui-card-shadow-hover);
  transform: translateY(-5px);
}

.tm-home-numbers__grid strong {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5vw, 3.7rem);
  font-weight: 800;
  line-height: 1;
}

.tm-home-numbers__grid span {
  margin-top: 0.7rem;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
}

@media (max-width: 768px) {
  .tm-home-numbers__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .tm-home-numbers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .tm-home-numbers__grid {
    grid-template-columns: 1fr;
  }
}

.tm-blog-article-section {
  padding-block: var(--ui-section-space);
}

.tm-blog-article {
  max-width: 920px;
  margin-inline: auto;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ui-card-border);
  border-radius: var(--ui-card-radius);
  box-shadow: var(--ui-card-shadow);
}

.tm-blog-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, .75rem);
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem) 0;
  color: var(--color-text-muted);
  font-size: .85rem;
}

.tm-blog-article__image {
  margin: 1.25rem clamp(1.25rem, 4vw, 3rem) 0;
  overflow: hidden;
  background: var(--color-neutral-100);
  border-radius: 16px;
}

.tm-blog-article__image img {
  display: block;
  width: 100%;
  max-height: 560px;
  object-fit: cover;
}

.tm-blog-article__content {
  padding: clamp(1.5rem, 5vw, 3.5rem);
  color: var(--color-text-secondary);
  font-size: 1.03rem;
  line-height: 2;
}

.tm-blog-article__content h2,
.tm-blog-article__content h3,
.tm-blog-article__content h4 {
  margin: 1.8rem 0 .8rem;
  color: var(--color-text-primary);
  font-family: var(--font-display);
}

.tm-blog-article__content p,
.tm-blog-article__content li {
  color: var(--color-text-secondary);
}

.tm-blog-article__content a {
  color: var(--color-primary);
  text-underline-offset: 3px;
}

.tm-blog-article__content blockquote {
  margin-inline: 0;
  padding: 1.25rem 1.5rem;
  color: var(--color-text-primary);
  background: var(--color-primary-50);
  border-inline-start: 4px solid var(--color-primary);
  border-radius: 0 12px 12px 0;
}

.tm-blog-article__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
  border-top: 1px solid var(--color-border-light);
}

.tm-blog-article__footer a {
  padding: .3rem .65rem;
  color: var(--color-primary);
  background: var(--color-primary-50);
  border-radius: var(--radius-full);
  font-size: .8rem;
  text-decoration: none;
}

.tm-blog-related {
  margin-top: 3rem;
}

.tm-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

@media (max-width: 768px) {
  .tm-blog-grid {
    grid-template-columns: 1fr;
  }
}

.blog-archive .tm-blog-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-intro-grid {
  display: block;
}

.about-intro .about-content {
  width: min(100%, 860px);
  max-width: 860px;
  margin-inline: auto;
}

.about-intro .about-lead,
.about-intro .about-description {
  max-width: 780px;
}

.about-values {
  color: var(--color-text-primary);
  background: #fbfafb;
  border-block: 1px solid var(--color-border-light);
}

.about-values .about-section-label {
  color: var(--color-accent-dark);
}

.about-values-intro,
.about-value-card p {
  color: var(--color-text-secondary);
}

.about-value-card {
  background: #fff;
  border-color: var(--ui-card-border);
  box-shadow: var(--ui-card-shadow);
}

.about-value-icon {
  color: var(--color-primary);
  background: var(--color-primary-50);
}

@media (max-width: 640px) {
  .blog-archive .tm-blog-grid {
    grid-template-columns: 1fr;
  }
}

.theme-switcher {
  position: relative;
  display: inline-flex;
}

.theme-switcher__toggle,
.theme-switcher__menu button {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.theme-switcher__toggle {
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--color-primary);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-100);
  border-radius: 50%;
}

.theme-switcher__dot,
.theme-swatch {
  display: block;
  border-radius: 50%;
}

.theme-switcher__dot {
  width: 13px;
  height: 13px;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-100);
}

.theme-switcher__menu {
  position: absolute;
  z-index: 30;
  inset-block-start: calc(100% + 0.7rem);
  inset-inline-end: 0;
  display: grid;
  min-width: 9.5rem;
  gap: 0.25rem;
  padding: 0.45rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}

.theme-switcher__menu button {
  justify-content: flex-start;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  color: var(--color-text-secondary);
  background: transparent;
  border-radius: 9px;
  font: inherit;
  font-size: 0.85rem;
  text-align: start;
}

.theme-switcher__menu button:hover,
.theme-switcher__menu button.is-active {
  color: var(--color-primary);
  background: var(--color-primary-50);
}

.theme-swatch {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.theme-swatch--rose { background: #0fa96b; }
.theme-swatch--ocean { background: #0f6178; }
.theme-swatch--forest { background: #236b54; }
.theme-swatch--midnight { background: #303a70; }

.tm-home-hero__grid {
  grid-template-columns: 1fr;
  justify-items: center;
}

.tm-home-hero__content {
  width: 100%;
  max-width: 1050px;
  text-align: center;
}

.tm-home-hero__label,
.tm-home-hero__title,
.tm-home-hero__description,
.tm-home-hero__actions,
.tm-home-hero__trust {
  margin-inline: auto;
}

.tm-home-hero__title,
.tm-home-hero__description {
  text-align: center;
}

.tm-home-hero__actions {
  justify-content: center;
}

.tm-home-hero__title {
  max-width: 920px;
  margin-top: 0;
  font-size: clamp(2.35rem, 5.2vw, 4.35rem);
}

@media (max-width: 768px) {
  .tm-home-hero {
    min-height: auto;
    padding-block: 3.5rem;
  }

  .tm-home-hero__title {
    font-size: clamp(2rem, 9vw, 3rem);
  }
}

.page-hero-label {
  display: none !important;
}

.page-hero {
  min-height: 360px;
  padding-block: 4rem;
}

.page-hero-title {
  margin-top: 0;
  font-size: clamp(2.35rem, 5.2vw, 4.35rem);
}

.tm-home-hero {
  min-height: 400px;
  padding-block: 3.75rem;
}

@media (max-width: 768px) {
  .page-hero,
  .contact-hero,
  .about-hero,
  .service-detail-hero {
    min-height: 300px;
    padding-block: 3rem;
  }

  .page-hero-title {
    font-size: clamp(1.95rem, 9vw, 2.9rem);
  }
}

.tm-home-hero__trust {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin-top: 1.5rem;
  transform: none;
}
/* =========================================================
   RESTORED SECTIONS

   The markup for these sections survived in the templates but
   their styling was lost when consistency.css was reverted, which
   left them rendering as unstyled stacked divs.

   They also share one visual system with the rest of the site:
   --ui-card-radius, --ui-card-flat/elevated, --ui-band-pad,
   --ui-transition. No section-local overrides.
   ========================================================= */

/* =========================================================
   HOME — tools / stack
   ========================================================= */

.tm-home-tools {
  background: var(--ui-surface-secondary);
  border-block: 1px solid var(--ui-border-light);
  padding-block: var(--ui-band-pad);
}

.tm-home-tools__head {
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: var(--ui-section-gap);
  text-align: center;
}

.tm-home-tools__title {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.25;
  margin-bottom: var(--space-4);
  color: var(--ui-text-headings);
}

.tm-home-tools__title span {
  color: var(--ui-primary);
}

.tm-home-tools__intro {
  color: var(--ui-text-secondary);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  margin-bottom: 0;
}

.tm-home-tools__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tm-home-tool {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-primary);
  border: 1px solid var(--ui-card-border);
  box-shadow: var(--ui-card-flat);
  transition:
    box-shadow var(--ui-transition),
    transform var(--ui-transition),
    border-color var(--ui-transition);
}

.tm-home-tool:hover {
  box-shadow: var(--ui-card-elevated);
  transform: translateY(-3px);
  border-color: var(--ui-border-gold);
}

.tm-home-tool__name {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-base);
  color: var(--ui-text-headings);
}

.tm-home-tool__use {
  font-size: var(--text-xs);
  color: var(--ui-text-muted);
}

/* =========================================================
   HOME — testimonials
   ========================================================= */

.tm-home-testimonials {
  background: var(--ui-neutral-100);
  padding-block: var(--ui-band-pad);
}

.tm-home-testimonials__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
  margin-bottom: var(--ui-section-gap);
}

.tm-home-testimonials__title {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.25;
  margin-bottom: 0;
  color: var(--ui-text-headings);
}

.tm-home-testimonials__intro {
  color: var(--ui-text-secondary);
  margin-bottom: 0;
}

.tm-home-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.tm-home-testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: var(--ui-card-padding);
  border-radius: var(--ui-card-radius);
  background: var(--ui-surface-primary);
  border: 1px solid var(--ui-card-border);
  box-shadow: var(--ui-card-flat);
  position: relative;
  overflow: hidden;
  transition:
    box-shadow var(--ui-transition),
    transform var(--ui-transition),
    border-color var(--ui-transition);
}

.tm-home-testimonial::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--luxury-gradient);
}

.tm-home-testimonial:hover {
  box-shadow: var(--ui-card-elevated);
  transform: translateY(-4px);
  border-color: var(--ui-border-gold);
}

.tm-home-testimonial blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  flex-grow: 1;
  font-style: normal;
}

.tm-home-testimonial blockquote p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--ui-text-primary);
  margin-bottom: 0;
}

.tm-home-testimonial figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-top: var(--space-4);
  border-top: 1px solid var(--ui-border-light);
  margin: 0;
}

.tm-home-testimonial__name {
  font-weight: var(--fw-semibold);
  color: var(--ui-text-headings);
}

.tm-home-testimonial__role {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ui-accent-ink);
}

/* =========================================================
   HOME — latest insights
   ========================================================= */

.tm-home-insights {
  background: var(--ui-surface-secondary);
  border-block: 1px solid var(--ui-border-light);
  padding-block: var(--ui-band-pad);
}

.tm-home-insights__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--ui-section-gap);
}

.tm-home-insights__title {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.25;
  margin-bottom: 0;
  color: var(--ui-text-headings);
}

.tm-home-insights__all,
.tm-home-insight__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  color: var(--ui-primary);
  padding: 0.5rem 1rem;
  border-radius: var(--ui-radius-pill);
  border: 1px solid var(--ui-card-border);
  background: var(--ui-surface-primary);
  transition:
    color var(--ui-transition),
    border-color var(--ui-transition),
    transform var(--ui-transition);
}

.tm-home-insights__all:hover,
.tm-home-insight__more:hover {
  color: var(--ui-accent-ink);
  border-color: var(--ui-border-gold);
  transform: translateY(-2px);
}

.tm-home-insights__all b,
.tm-home-insight__more b {
  font-weight: inherit;
}

.tm-home-insights__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.tm-home-insight {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--ui-card-padding);
  border-radius: var(--ui-card-radius);
  background: var(--ui-surface-primary);
  border: 1px solid var(--ui-card-border);
  box-shadow: var(--ui-card-flat);
  transition:
    box-shadow var(--ui-transition),
    transform var(--ui-transition),
    border-color var(--ui-transition);
}

.tm-home-insight:hover {
  box-shadow: var(--ui-card-elevated);
  transform: translateY(-4px);
  border-color: var(--ui-border-gold);
}

.tm-home-insight__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--ui-text-muted);
}

.tm-home-insight__dot {
  color: var(--ui-accent);
}

.tm-home-insight__title {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  margin-bottom: 0;
}

.tm-home-insight__title a {
  color: var(--ui-text-headings);
}

.tm-home-insight__title a:hover {
  color: var(--ui-primary);
}

.tm-home-insight__excerpt {
  color: var(--ui-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin-bottom: 0;
  flex-grow: 1;
}

.tm-home-insight__more {
  align-self: flex-start;
}

/* =========================================================
   404 — the template shipped with no styles at all.
   A dead end should still do work: search, destinations, services.
   ========================================================= */

.tm-blog__heading,
.tm-faq__heading {
  max-width: 44rem;
  margin: 0 auto var(--ui-section-gap);
  text-align: center;
}

.tm-blog__title,
.tm-faq__title {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.25;
  margin-bottom: 0;
  color: var(--ui-text-headings);
}

.tm-packages__heading {
  max-width: 44rem;
  margin: 0 auto var(--ui-section-gap);
  text-align: center;
}

.tm-packages__title {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.25;
  margin-bottom: var(--space-4);
  color: var(--ui-text-headings);
}

.tm-packages__intro {
  color: var(--ui-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: 0;
}

.tm-404-page {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  background: var(--ui-neutral-100);
  overflow: hidden;
}

.tm-404-page::before,
.tm-404-page::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.tm-404-page::before {
  inset-block-start: -18rem;
  inset-inline-end: -14rem;
  width: 40rem;
  height: 40rem;
  background: radial-gradient(
    circle,
    rgba(15, 169, 107, 0.1) 0%,
    rgba(15, 169, 107, 0) 65%
  );
}

.tm-404-page::after {
  inset-block-end: -16rem;
  inset-inline-start: -12rem;
  width: 34rem;
  height: 34rem;
  background: radial-gradient(
    circle,
    rgba(18, 45, 38, 0.18) 0%,
    rgba(18, 45, 38, 0) 65%
  );
}

.tm-404-page__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.tm-404-page__head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.tm-404-page__badge {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  margin-bottom: var(--space-4);
  border-radius: var(--ui-radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  color: #0d7a8a;
  background: rgba(18, 45, 38, 0.08);
  border: 1px solid rgba(18, 45, 38, 0.2);
}

.tm-404-page__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 20vw, 11rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.04em;
  background: var(--luxury-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--space-3);
}

.tm-404-page__title {
  font-size: clamp(1.6rem, 3.8vw, 2.5rem);
  line-height: 1.25;
  margin-bottom: var(--space-3);
  color: var(--ui-text-headings);
}

.tm-404-page__text {
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--space-7);
  color: var(--ui-text-secondary);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.tm-404-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.tm-404-page__section-title {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-4);
  color: var(--ui-text-headings);
}

.tm-404-page__search {
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

.tm-404-page__search-form .search-form,
.tm-404-page__search-form form {
  display: flex;
  gap: var(--space-2);
}

.tm-404-page__search-form input[type="search"],
.tm-404-page__search-form input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.85rem 1.1rem;
  border: 1.5px solid var(--ui-border-medium);
  border-radius: var(--ui-button-radius);
  background: var(--ui-surface-primary);
  color: var(--ui-text-primary);
  transition:
    border-color var(--ui-transition),
    box-shadow var(--ui-transition);
}

.tm-404-page__search-form input[type="search"]:focus,
.tm-404-page__search-form input[type="text"]:focus {
  outline: none;
  border-color: var(--ui-primary);
  box-shadow: var(--ui-focus-ring);
}

.tm-404-page__search-form button[type="submit"],
.tm-404-page__search-form .tm-btn {
  flex: 0 0 auto;
  min-height: var(--ui-tap-min);
  padding: 0.85rem 1.6rem;
  border: none;
  border-radius: var(--ui-button-radius);
  background: var(--gradient-primary);
  color: var(--color-white);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition:
    opacity var(--ui-transition),
    transform var(--ui-transition);
}

.tm-404-page__search-form button[type="submit"]:hover,
.tm-404-page__search-form .tm-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.tm-404-page__nav {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.tm-404-page__nav-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tm-404-page__nav-item {
  min-width: 0;
}

.tm-404-page__nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-5);
  border-radius: var(--ui-card-radius);
  background: var(--ui-surface-primary);
  border: 1px solid var(--ui-card-border);
  box-shadow: var(--ui-card-flat);
  color: var(--ui-text-primary);
  transition:
    box-shadow var(--ui-transition),
    transform var(--ui-transition),
    border-color var(--ui-transition);
}

.tm-404-page__nav-link:hover {
  box-shadow: var(--ui-card-elevated);
  transform: translateY(-3px);
  border-color: var(--ui-border-gold);
  color: var(--ui-text-primary);
}

.tm-404-page__nav-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--ui-radius-md);
  color: var(--ui-primary);
  background: var(--ui-primary-50);
  border: 1px solid var(--ui-card-border);
  transition:
    color var(--ui-transition),
    background-color var(--ui-transition);
}

.tm-404-page__nav-link:hover .tm-404-page__nav-icon {
  color: var(--ui-accent-ink);
  background: var(--ui-accent-50);
}

.tm-404-page__nav-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.tm-404-page__nav-label {
  font-weight: var(--fw-semibold);
  color: var(--ui-text-headings);
}

.tm-404-page__nav-desc {
  font-size: var(--text-sm);
  color: var(--ui-text-muted);
  line-height: var(--leading-snug);
}

.tm-404-page__services {
  padding: var(--space-6);
  border-radius: var(--ui-card-radius);
  background: var(--ui-surface-secondary);
  border: 1px solid var(--ui-card-border);
}

.tm-404-page__service-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tm-404-page__service-item {
  border-bottom: 1px solid var(--ui-card-border);
}

.tm-404-page__service-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--ui-tap-min);
  padding: var(--space-3) 0;
  font-weight: var(--fw-medium);
  color: var(--ui-text-primary);
  transition: color var(--ui-transition);
}

.tm-404-page__service-link:hover {
  color: var(--ui-primary);
}

.tm-404-page__service-arrow {
  color: var(--ui-accent-ink);
  transition: transform var(--ui-transition);
}

.tm-404-page__service-link:hover .tm-404-page__service-arrow {
  transform: translateX(4px);
}

[dir="rtl"] .tm-404-page__service-link:hover .tm-404-page__service-arrow {
  transform: translateX(-4px);
}

/* =========================================================
   RESTORED SECTIONS — responsive
   ========================================================= */

@media (max-width: 1024px) {
  .tm-home-tools__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tm-home-insights__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .tm-home-testimonials__head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

@media (max-width: 860px) {
  .tm-404-page__nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .tm-home-testimonials__grid,
  .tm-home-insights__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .tm-home-tools__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tm-404-page__nav-grid,
  .tm-404-page__service-list {
    grid-template-columns: 1fr;
  }

  .tm-404-page__actions,
  .tm-404-page__search-form {
    flex-direction: column;
  }

  .tm-404-page__actions > *,
  .tm-404-page__search-form > * {
    width: 100%;
    justify-content: center;
  }
}/* =========================================================
   CONTRAST CORRECTIONS

   The teal accent (#2fbfa0) measures 2.34:1 on the light page background, so
   it is decorative only: rules, borders, icons on dark, and
   gradient stops. Anywhere it was used as small text on a light
   surface it is replaced here with --ui-accent-ink (4.6:1).

   --ui-text-muted was #9a7d8b (3.64:1) and is now #7d6472
   (5.2:1) in the brand layer above; the 40-odd call sites in
   layout.css pick that up automatically because they reference
   the token.
   ========================================================= */

/* 12px gold labels on light surfaces. */
.service-detail-label,
.tm-product-tag {
  color: var(--ui-accent-ink);
}

/* ---------- 2. Tap targets ---------- */

/*
 * Icon-only controls were 30-42px. Raised to the 44px minimum.
 * These are square icon buttons, so height and width move together.
 */
.mobile-menu-toggle,
.mobile-menu-close,
.footer-social-link,
.btn-icon {
  min-width: var(--ui-tap-min);
  min-height: var(--ui-tap-min);
}

/*
 * Inline links and list rows get vertical padding rather than a
 * fixed height, so the hit area grows without changing layout.
 */
.tm-category-link,
.service-card-link,
.tm-service-card__link {
  min-height: var(--ui-tap-min);
  display: flex;
  align-items: center;
}

/* Decorative avatar dots are not interactive and stay small. */
.tm-home-hero__avatars span {
  width: 34px;
  height: 34px;
}

/* ---------- 3. Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /*
   * Hover lifts are the most visible motion on this site. Removing
   * the transform keeps the colour and shadow feedback intact.
   */
  .tm-home-tool:hover,
  .tm-home-testimonial:hover,
  .tm-home-insight:hover,
  .tm-404-page__nav-link:hover,
  .tm-404-page__service-link:hover {
    transform: none;
  }
}/* =========================================================
   PALETTE REFINEMENT + GRADIENT DISCIPLINE

   Gradients were being used as broad surface fills: every inner
   page hero, both CTA panels and the service detail hero all sat
   on the same ruby->gold ramp, so the whole site read as one
   continuous gradient block and the gradient stopped meaning
   anything.

   The rule from here on:
     - Large surfaces are SOLID.
     - Gradients are reserved for small elements where they act
       as emphasis: primary button fill, the testimonial rail, the
       404 numeral, focus rings, and thin accent rules.

   Palette is also de-pinked. The neutral ramp was previously
   wine-tinted at every step, which made flat white cards read
   as faintly warm. Neutrals are now true neutrals with only the
   deepest steps carrying brand colour.
   ========================================================= */

:root {
  /* ---------- Refined brand core ---------- */
  --ui-accent: #0d7a8a;
  /*
   * True neutrals. Only -900 and -950 carry brand colour, so a
   * dark band still feels branded while light surfaces stay clean.
   */
  --ui-neutral-50: #fafafa;
  --ui-neutral-100: #ffffff;
  --ui-neutral-200: #f2f2f2;
  --ui-neutral-300: #e6e6e6;
  --ui-neutral-400: #d4d4d4;
  --ui-neutral-500: #a3a3a3;
  --ui-neutral-600: #737373;
  --ui-neutral-700: #525252;
  --ui-neutral-800: #404040;
  --ui-neutral-900: #2b2b2b;
  --ui-surface-primary: var(--ui-neutral-100);
  --ui-surface-secondary: var(--ui-neutral-50);
  --ui-surface-tertiary: #f7f2f4;
  --ui-border-soft: rgba(20, 16, 15, 0.06);
  --ui-border-light: rgba(20, 16, 15, 0.09);
  --ui-border-medium: rgba(20, 16, 15, 0.14);
  --ui-border-strong: rgba(20, 16, 15, 0.26);
  --ui-border-ruby: rgba(18, 45, 38, 0.18);
  --ui-border-gold: rgba(18, 45, 38, 0.45);

  --ui-text-primary: #1f1416;
  --ui-text-secondary: #4d4345;
  --ui-text-muted: #6b6163;
  --ui-text-subtle: #6b6163;
  --ui-text-headings: #1f1416;
  --ui-text-inverse: #ffffff;
  --ui-text-disabled: var(--ui-neutral-400);

  /*
   * Shadows are neutral, not brand-tinted. Tinting every shadow made
   * cards look stained rather than lifted.
   */
  --ui-elev-1: 0 1px 2px rgba(20, 16, 15, 0.06);
  --ui-elev-2: 0 2px 6px rgba(20, 16, 15, 0.07), 0 1px 2px rgba(20, 16, 15, 0.04);
  --ui-elev-3: 0 6px 18px rgba(20, 16, 15, 0.09), 0 2px 6px rgba(20, 16, 15, 0.04);
  --ui-elev-4: 0 14px 34px rgba(20, 16, 15, 0.12), 0 4px 10px rgba(20, 16, 15, 0.05);
  --ui-card-flat: var(--ui-elev-2);
  --ui-card-elevated: var(--ui-elev-4);
  --ui-card-shadow: var(--ui-elev-2);
  --ui-card-shadow-hover: var(--ui-elev-4);

  /* ---------- Broad branded surfaces ----------
     A deep burgundy rather than a neutral: unmistakably on-brand,
     but light enough that white text sits comfortably on it
     (14.7:1) and the gold rule still reads (7.98:1). The previous
     near-black value read as a dead grey block.

     This uses --ui-hero-surface, NOT --ui-hero-bg. The customizer
     prints an inline :root block after these stylesheets that
     redefines --ui-hero-bg as a gradient, and an inline :root wins
     over a linked one. Keying the hero off its own token makes it
     immune to that override. */
  /* Light ink for text sitting on the burgundy bands. */
  --ui-on-brand-rule: #d9fff0;
}

/* =========================================================
   1. Heroes become solid
   ========================================================= */

.page-hero-dark,
.about-hero {
  background-color: var(--ui-hero-surface) !important;
}

/*
 * The hero's decorative circles are thin outline rings, not
 * gradients, so they are left alone. An earlier revision replaced
 * the ::after ring with a full-width hairline, which drew a stray
 * line across the hero.
 */

/* =========================================================
   2. CTA panels become solid
   ========================================================= */

.about-cta-inner,
.service-detail-hero {
  background: var(--ui-brand-panel) !important;
  background-image: none !important;
}

/* =========================================================
   3. Home CTA solid, gradient becomes an accent rule
   ========================================================= */

/* =========================================================
   4. Gradient kept where it earns emphasis
   ========================================================= */

/*
 * Primary buttons keep the ramp: a small element where the
 * gradient reads as a considered highlight rather than a fill.
 */
.btn-primary {
  background-image: var(--gradient-primary);
}

/* Testimonial rail: 4px of gradient is emphasis, not decoration. */
.tm-home-testimonial::before {
  background: var(--luxury-gradient);
}

/* The 404 numeral is text, so a gradient is legible emphasis. */
.tm-404-page__code {
  background-image: var(--luxury-gradient);
}

/*
 * Card hover accent shifts to a solid gold border so hovering
 * does not introduce a gradient where none existed.
 */
.tm-home-tool:hover,
.tm-home-testimonial:hover,
.tm-home-insight:hover,
.tm-404-page__nav-link:hover {
  border-color: var(--ui-accent);
}

/* =========================================================
   5. Neutral re-mapping for legacy tokens
   ========================================================= */

/*
 * design-system.css maps --color-neutral-* onto --ui-neutral-*.
 * Re-point the handful of legacy gradient tokens at solid values
 * so any straggler rule stops painting a ramp.
 */
:root {
  --gradient-premium-hero: var(--ui-neutral-950);
  --gold-gradient: linear-gradient(
    135deg,
    var(--ui-accent-dark) 0%,
    var(--ui-accent) 100%
  );
}

/* The category filter now has clear separation from the grid. */
.tm-home-services .tm-home-categories {
  margin-bottom: var(--space-6);
}

/*
 * Home service cards previously showed a white numeral sitting on
   the image. Numbers were removed site-wide for consistency, so the
   image reads cleanly and the category chip carries the metadata.
 */
.tm-home-service-card__number {
  display: none;
}

/* =========================================================
   Services archive
   ========================================================= */

.services-archive__head {
  max-width: 46rem;
  margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
  text-align: center;
}

.services-archive__title {
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  line-height: 1.25;
  margin-bottom: var(--space-4);
  color: var(--ui-text-headings);
}

.services-archive__intro {
  color: var(--ui-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.services-archive__count {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.9rem;
  margin: 0;
  border-radius: var(--ui-radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ui-primary-ink);
  background: var(--ui-surface-tertiary);
  border: 1px solid var(--ui-border-ruby);
}

/* ---------- Card refinement ---------- */

.services-archive .service-card {
  transition:
    box-shadow var(--ui-transition),
    transform var(--ui-transition),
    border-color var(--ui-transition);
}

.services-archive .service-card-image img {
  transition: transform var(--ui-transition);
}

.services-archive .service-card:hover .service-card-image img {
  transform: scale(1.04);
}

.services-archive .service-card-body {
  flex-grow: 1;
}

.services-archive .service-card-title a {
  color: var(--ui-text-headings);
}

.services-archive .service-card-title a:hover {
  color: var(--ui-primary);
}

.services-archive .service-card-excerpt {
  flex-grow: 1;
}

.services-archive .service-card-price-hint {
  margin-top: 0.15rem;
}

.services-archive .service-card {
  flex-direction: column;
}

/* Empty state, previously a bare sentence. */
.services-archive .tm-home-empty,
.services-archive .services-empty {
  padding: var(--space-10) var(--space-6);
  text-align: center;
  border: 1px dashed var(--ui-border-medium);
  border-radius: var(--ui-radius-lg);
  color: var(--ui-text-secondary);
  background: var(--ui-surface-secondary);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .tm-home-pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .tm-home-pillars {
    gap: var(--space-3);
  }
}/* =========================================================
   HERO — white text with a single gold accent

   The hero sits on a solid deep wine background. Text is white so
   it reads cleanly at 14.7:1; gold is used exactly once, as a
   short rule above the heading, so it functions as a signature
   rather than decoration scattered over the surface.
   ========================================================= */

/*
 * Home hero. It was inheriting --color-neutral-50 (a near-white) while
 * its heading and body copy were set to white, which made the whole
 * hero invisible. It now uses the same wine surface as the inner-page
 * heroes so the wordmark band reads consistently across the site.
 */
.tm-home-hero {
  background-color: var(--ui-hero-surface);
  background-image: none;
}

.page-hero-dark,
.about-hero,
.services-archive .page-hero,
.service-detail-hero {
  background-color: var(--ui-hero-surface);
}

/*
 * Body copy is pure white rather than a transparency: on a mid-dark
 * wine, a white alpha value reads grey and looks washed out.
 */
.page-hero-dark .page-hero-subtitle,
.about-hero .page-hero-subtitle,
.services-archive .page-hero-subtitle,
.service-detail-hero .page-hero-subtitle {
  max-width: 62ch;
}

/*
 * The single gold accent. A short rule above the title reads as a
 * deliberate signature; a gold heading at this size competes with
 * the white and makes the hero look loud.
 *
 * Every one of these heroes centres its title, so the rule centres with it.
 * `margin-inline: auto` was only ever set for .services-archive (further down
 * this file), which left the same accent stranded on the inline-start edge of
 * the about, blog and single-service heads. .tm-blog-hero is listed here so the
 * blog head gets the accent at all -- it is the one hero that had none.
 */
.page-hero-dark .page-hero-title::before,
.about-hero .page-hero-title::before,
.services-archive .page-hero-title::before,
.tm-blog-hero .page-hero-title::before {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-inline: auto;
  margin-bottom: var(--space-5);
  border-radius: var(--ui-radius-pill);
}

/*
 * Outline rings, kept from the original design but retinted to the
 * refined accent so they read as intentional.
 */
.services-archive .page-hero::before {
  border-color: rgba(255, 255, 255, 0.1);
}

.services-archive .page-hero::after {
  border-color: rgba(18, 45, 38, 0.22);
}/* =========================================================
   SERVICE CARDS — one system, two templates

   The archive card (.service-card) and the home card
   (.tm-home-service-card) present the same data but were built
   independently: different radii, a fixed 205px image on one and
   a 3:2 ratio on the other, and only the archive showed a price.
   Scrolling between the home page and /services/ looked like two
   different products.

   Both now share the same frame, media ratio, type scale and
   price treatment. Only the link affordance differs.
   ========================================================= */

/* ---------- Shared shell ---------- */

.service-card,
.tm-home-service-card {
  flex-direction: column;
  transition:
    box-shadow var(--ui-transition),
    transform var(--ui-transition),
    border-color var(--ui-transition);
}

/* Placeholder fills the identical frame so heights match. */
.service-card-image-placeholder,
.tm-home-service-card__image.tm-service-card__thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--ui-neutral-400);
  background: var(--ui-surface-secondary);
}

/* ---------- Shared body ---------- */

.service-card-body,
.tm-home-service-card__body {
  flex-grow: 1;
}

/* ---------- Shared excerpt ---------- */

.service-card-excerpt,
.tm-home-service-card__excerpt {
  flex-grow: 1;
}

.service-card-currency,
.tm-home-service-card__currency {
  font-family: var(--font-sans);
  margin-inline-start: 0.25rem;
}

/* ---------- Category chip ---------- */

.service-card-category {
  align-self: flex-start;
  padding: 0.2rem 0.7rem;
  border-radius: var(--ui-radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--ui-accent-ink);
  background: var(--ui-surface-quaternary);
  border: 1px solid var(--ui-border-gold);
}

/* ---------- Link affordance ---------- */

.service-card .service-card-link,
.tm-home-service-card .tm-home-service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--ui-primary);
}

.tm-home-service-card__footer .tm-home-service-card__link {
  margin-top: var(--space-2);
}

.tm-home-service-card:hover .tm-home-service-card__link span {
  transform: translateX(-4px);
}

/* ---------- Responsive ---------- */

@media (max-width: 560px) {
}/* =========================================================
   SERVICE CARD (shared partial) — joins the unified system

   template-parts/service/service-card.php renders a fourth card
   variant, .tm-service-card, used on single service pages and
   related-service grids. It was not covered by the unified card
   rules, so its thumbnail wrapper had no height, which let the
   absolutely positioned status badge overflow down onto the price
   row, and its price/button block collided.

   It now uses the same frame, media ratio and price treatment as
   the home and archive cards.
   ========================================================= */

.tm-service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ui-surface-primary);
  border: 1px solid var(--ui-card-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-card-flat);
  overflow: hidden;
  transition:
    box-shadow var(--ui-transition),
    transform var(--ui-transition),
    border-color var(--ui-transition);
}

.tm-service-card:hover {
  transform: translateY(-4px);
  border-color: var(--ui-border-gold);
  box-shadow: var(--ui-card-elevated);
}

/*
 * The wrapper previously collapsed, so the badge inside it had no
 * containing box and rendered over the price. A fixed ratio gives
 * it real height and keeps the badge inside the image.
 */
.tm-service-card__thumbnail-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ui-surface-secondary);
  border-bottom: 1px solid var(--ui-border-light);
}

.tm-service-card__thumbnail-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--ui-dur-slow) var(--ui-ease);
}

.tm-service-card:hover .tm-service-card__thumbnail-wrap img {
  transform: scale(1.04);
}

.tm-service-card__thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--ui-neutral-400);
  background: var(--ui-surface-secondary);
}

.tm-service-card__thumb-placeholder svg {
  width: 40px;
  height: 40px;
}

/* Keep the status badge inside the image frame. */
.tm-service-card__thumbnail-wrap .tm-badge {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 2;
}

.tm-service-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--ui-card-padding);
  flex-grow: 1;
}

.tm-service-card__title {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--leading-snug);
  margin: 0;
}

.tm-service-card__title a {
  color: var(--ui-text-headings);
}

.tm-service-card:hover .tm-service-card__title a {
  color: var(--ui-primary);
}

.tm-service-card__title-ar {
  font-size: var(--text-sm);
  color: var(--ui-text-muted);
  margin: 0;
}

.tm-service-card__excerpt {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--ui-text-secondary);
  margin: 0;
}

/*
 * Price sits on its own row above the action, separated by a rule.
 * Previously the pricing block and the button block were pulled
 * into the same flex row and collided.
 */
.tm-service-card__pricing {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: auto 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--ui-border-light);
  color: var(--ui-primary);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.tm-service-card__original-price {
  color: var(--ui-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
}

.tm-service-card__sale-price {
  color: #0d7a8a;
}

.tm-service-card__contact {
  color: var(--ui-text-secondary);
  font-size: var(--text-base);
}

.tm-service-card__installment-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.2rem 0.7rem;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface-quaternary);
  border: 1px solid var(--ui-border-gold);
  color: var(--ui-accent-ink);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
}

.tm-service-card__footer,
.tm-service-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
}

/*
 * The action was a solid magenta button competing with the price for
 * attention. A full-width outlined button is calmer and matches the
 * other two card types.
 */
.tm-service-card__footer .tm-btn {
  width: 100%;
  justify-content: center;
  min-height: var(--ui-tap-min);
  background: transparent;
  border: 1.5px solid var(--ui-primary);
  color: var(--ui-primary);
  border-radius: var(--ui-button-radius);
  font-weight: var(--fw-semibold);
  transition:
    background-color var(--ui-transition),
    color var(--ui-transition);
}

.tm-service-card__footer .tm-btn:hover {
  background: var(--ui-primary);
  color: #ffffff;
}
/* =========================================================
   Archive card footer: price block and arrow share one row.
   Both sides get their own column so a long price can never
   push the arrow out of the card.
   ========================================================= */

.services-archive .service-card-footer {
  margin-top: auto;
  padding-top: var(--space-4);
}

.services-archive .service-card-arrow {
  transition:
    background-color var(--ui-transition),
    color var(--ui-transition);
}
/* =========================================================
   SERVICES ARCHIVE — corrective rebuild

   Verified in a headless render at 1440px, three defects:

   1. The price, the "إجمالي الاستثمار" hint and the arrow were
      painting on top of each other and over the excerpt. The
      inherited rules left the body as a flex column but never
      constrained the footer, so the pricing block collapsed onto
      its own children. The footer is rebuilt here as an explicit
      two-column row with its own line boxes.

   2. A 15% black ::after overlay sat on every thumbnail at 0.55
      opacity, muddying all nine images. Removed.

   3. The section header (eyebrow, title, intro, result count) was
      in the markup but not painting. Forced visible with an
      explicit block flow.

   Layout properties are set explicitly rather than inherited so a
   future edit to layout.css cannot silently reintroduce the
   collapse.
   ========================================================= */

/* ---------- Section header ---------- */

.services-archive .services-archive__head {
  display: block;
  max-width: 46rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  padding: 0;
  text-align: center;
}

.services-archive .services-archive__head .tm-home-label {
  display: inline-flex;
  margin: 0 0 var(--space-3);
}

.services-archive .services-archive__title {
  display: block;
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  line-height: 1.25;
  margin: 0 0 var(--space-4);
  color: var(--ui-text-headings);
}

.services-archive .services-archive__intro {
  display: block;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--ui-text-secondary);
  margin: 0 0 var(--space-4);
}

.services-archive .services-archive__count {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  margin: 0;
  border-radius: var(--ui-radius-pill);
  font-size: var(--text-sm);
  color: var(--ui-primary-ink);
  background: var(--ui-surface-tertiary);
  border: 1px solid var(--ui-border-ruby);
}

/* ---------- Card frame ---------- */

.services-archive .services-grid {
  align-items: stretch;
}

.services-archive .service-card {
  min-width: 0;
}

/*
 * The link was a flex column with flex: 1 1 auto. Inside a card with
 * height: 100% that resolved to a box SHORTER than its own content
 * (measured 236px for 305px of children), so the footer painted
 * below the card edge. A plain block link sizes to its content and
 * lets the card grow to fit.
 */
.services-archive .service-card-link {
  display: block !important;
  margin: 0;
  padding: 0;
  color: inherit;
  height: auto;
  min-height: 0;
}

/* ---------- Media ---------- */

.services-archive .service-card-image {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 100%;
  overflow: hidden;
}

/* Kill the dark wash that was dulling every thumbnail. */
.services-archive .service-card-image::after {
  content: none !important;
  display: none !important;
}

.services-archive .service-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.services-archive .service-card-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 180px;
  color: var(--ui-neutral-400);
  background: var(--ui-surface-secondary);
}

.services-archive .service-card-image-placeholder svg {
  width: 40px;
  height: 40px;
}

/* ---------- Body ---------- */

/*
 * Block flow, not flex. A flex column here resolved to a box shorter
 * than its own children, which let the footer paint outside the card.
 * Block layout cannot fail that way, and every child is now spaced by
 * its own margin.
 */
.services-archive .service-card-body {
  display: block !important;
  min-height: 0;
  margin: 0;
}

.services-archive .service-card-category {
  align-self: flex-start;
  padding: 0.2rem 0.7rem;
  border-radius: var(--ui-radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--ui-accent-ink);
  background: var(--ui-surface-quaternary);
  border: 1px solid var(--ui-border-gold);
}

.services-archive .service-card-title {
  display: block;
  padding: 0;
  min-height: 0;
}

/*
 * The excerpt must not be allowed to collapse. It was declared
 * flex: 0 1 auto with min-height: 0, so inside the flex-column body
 * it shrank to nothing, which pulled the title down onto the price
 * block. It is now a fixed three-line clamp that cannot shrink,
 * and the footer is pushed down with margin-top: auto instead.
 */
.services-archive .service-card-excerpt {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  min-height: calc(3 * 1.7 * var(--text-sm));
  overflow: hidden;
}

/* ---------- Footer: the fix ---------- */

.services-archive .service-card-footer {
  justify-content: space-between;
  clear: both;
  overflow: visible;
  position: static;
}

/*
 * The pricing column is its own flex column. Previously the price
 * and the hint were direct children of an unconstrained box, which
 * is what let them stack on the same line box.
 */
.services-archive .service-card-pricing {
  display: flex !important;
  flex: 0 1 auto;
  min-width: 0;
  position: static;
}

.services-archive .service-card-currency {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ui-text-secondary);
  margin-inline-start: 0.2rem;
}

.services-archive .service-card-details {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--ui-primary);
}

.services-archive .service-card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--ui-tap-min);
  height: var(--ui-tap-min);
  min-width: var(--ui-tap-min);
  min-height: var(--ui-tap-min);
  padding: 0;
  border-radius: var(--radius-full);
  color: var(--ui-primary);
  background: var(--ui-surface-tertiary);
  border: 0;
  transition:
    background-color var(--ui-transition),
    color var(--ui-transition);
}

.services-archive .service-card:hover .service-card-arrow {
  background: var(--ui-primary);
  color: #ffffff;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
}

@media (max-width: 620px) {
  .services-archive .services-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   Packages — pricing and plan tiers
   ========================================================================== */

/* Card pricing, shared by the archive and home sections. */
.tm-package-card__pricing {
  flex-wrap: wrap;
}

.tm-package-card__from,
.tm-package-card__range {
  font-family: var(--font-sans);
}

.tm-package-card__terms {
  margin-top: 0.65rem;
}

.tm-home-package-card__body .tm-home-package-card__link {
  margin-top: 1.1rem;
}

/* Hero pricing on a package detail page. */
.package-hero__pricing {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  margin-top: 1.75rem;
}

.package-hero__from,
.package-hero__to {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
}

.package-hero__pricing strong {
  color: var(--color-accent-light, #2fbfa0);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
}

/* --------------------------------------------------------------------------
   Plans section — one column per tier
   -------------------------------------------------------------------------- */

.service-plans {
  padding-block: var(--ui-section-space, 5rem);
  background: var(--color-surface-muted);
}

.service-plans__heading {
  margin-bottom: 2.5rem;
}

/* The generic title is sized for a wide single column; the grid needs to fit. */
.service-plans .service-section-title {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  text-wrap: balance;
}

.service-plans__intro {
  margin: 0.75rem 0 0;
  color: var(--color-text-secondary);
  font-size: 1rem;
  max-width: 56ch;
}

.service-plans__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

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

@media (max-width: 640px) {
  .service-plans__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Plan card
   -------------------------------------------------------------------------- */

.package-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 1px 2px rgba(18, 45, 38, 0.04);
  transition:
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.package-plan:hover {
  border-color: var(--color-primary-200);
  box-shadow: 0 12px 28px rgba(18, 45, 38, 0.08);
  transform: translateY(-2px);
}

.package-plan--featured {
  padding-top: 2.9rem;
  border-color: var(--color-primary);
  box-shadow: 0 14px 34px rgba(var(--color-primary-rgb), 0.14);
}

/* Full-width top bar reads as intentional; a floating chip looked detached. */
.package-plan__ribbon {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  padding: 0.4rem 1rem;
  color: var(--color-white);
  background: var(--color-primary);
  border-start-start-radius: var(--radius-lg, 16px);
  border-start-end-radius: var(--radius-lg, 16px);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
}

.package-plan__head {
  margin-bottom: 1.1rem;
  min-height: 3.5rem;
}

.package-plan__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.35;
}

.package-plan--featured .package-plan__title {
  color: var(--color-primary);
}

.package-plan__tagline {
  margin: 0.3rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.package-plan__price {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border-light);
}

.package-plan__price-label {
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

.package-plan__price-value {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.15;
}

/* Feature list */
.package-plan__features {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.package-plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--color-text-secondary);
  font-size: 0.86rem;
  line-height: 1.55;
}

.package-plan__features svg {
  flex: 0 0 auto;
  margin-top: 0.32em;
  color: var(--color-primary);
}

.package-plan__more {
  margin-top: 0.75rem;
}

.package-plan__more summary {
  color: var(--color-primary);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.package-plan__more summary::-webkit-details-marker {
  display: none;
}

.package-plan__more summary::after {
  content: " ▾";
  font-size: 0.75rem;
}

.package-plan__more[open] summary::after {
  content: " ▴";
}

.package-plan__features--extra {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--color-border-light);
}

/* Purchase block pinned to the bottom so buttons align across columns. */
.package-plan__cta {
  margin-top: auto;
  padding-top: 1.5rem;
}

.package-plan__form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.package-plan__payment {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.package-plan__payment .payment-plan-selector-title {
  padding: 0;
  margin-bottom: 0.5rem;
  color: var(--color-text-secondary);
  font-size: 0.82rem;
  font-weight: 700;
}

/* Compact payment rows: the column is narrow, so reuse the component at
   a smaller scale rather than the full-size service sidebar variant. */
.package-plan__payment .payment-plan-options {
  display: grid;
  gap: 0.4rem;
}

.package-plan__payment .payment-plan-option {
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-width: 1px;
  border-radius: var(--radius-sm, 8px);
}

.package-plan__payment .payment-plan-radio {
  width: 15px;
  height: 15px;
  min-width: 15px;
}

.package-plan__payment .payment-plan-name {
  font-size: 0.84rem;
}

.package-plan__payment .payment-plan-amount {
  margin-top: 0.1rem;
  font-size: 0.76rem;
}

.package-plan__note {
  margin: 0;
  font-size: 0.78rem;
  justify-content: center;
}

.package-plan__unavailable {
  padding: 0.85rem;
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  border: 1px dashed var(--color-border-light);
  border-radius: var(--radius-sm, 8px);
  font-size: 0.85rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Sidebar summary
   -------------------------------------------------------------------------- */

.package-summary-card__title {
  margin: 0 0 1rem;
  font-size: 1.25rem;
}

.package-summary-card__plans {
  margin: 1.1rem 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border-light);
}

.package-summary-card__plans li {
  border-bottom: 1px solid var(--color-border-light);
}

.package-summary-card__plans a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.package-summary-card__plans a:hover span {
  color: var(--color-primary);
}

.package-summary-card__plans strong {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: 800;
  white-space: nowrap;
}

.package-summary-card__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

/* =========================================================
   REVEAL — fail-safe (re-applied)
   Content visibility must never depend on an animation running.
   The resting state is opacity 1; the entrance animation only
   plays when motion is welcome. Previously 8 of 9 cards stayed at
   opacity 0 because the animation never ran.
   ========================================================= */

.services-archive .service-card.reveal {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  .services-archive .service-card.reveal {
    animation: service-card-reveal 420ms var(--ui-ease) backwards;
  }
}

.services-archive .service-card {
  display: block !important;
  opacity: 1 !important;
  height: auto;
  border: 1px solid var(--ui-card-border);
}

/* =========================================================
   SERVICES ARCHIVE — hero sits directly under the navbar

   #primary was resolving to padding: 93.6px 0 (6.5vw at 1440px),
   which pushed the hero a full band below the sticky navbar. The
   hero is a full-bleed band, so it must start at the top of the
   main content area with no offset.
   ========================================================= */

.services-archive#primary,
#primary.services-archive {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 0;
}
/* =========================================================
   PACKAGE CARDS — unified with the service card system

   Task: make the package cards on /packages/ and the home page
   identical in styling, dimensions and layout to the service
   cards on /services/, and fix the image rendering.

   Two defects were visible in a headless render:

   1. IMAGE. The package artwork is served at 1024x768 (4:3) but
      the card frame was a fixed 190px tall with the img set to
      width/height 100% and NO object-fit, so every image was
      vertically squashed. The service cards already use a 3:2
      frame with cover; the package cards now do too.

   2. CONSISTENCY. The package card had its own radius, border,
      padding and price treatment, so the same card looked
      different depending on the page. All of it is now mapped
      onto the same tokens as .service-card.
   ========================================================= */

/* ---------- Shell: identical to .service-card ---------- */

.tm-home-package-card {
  transition:
    box-shadow var(--ui-transition),
    transform var(--ui-transition),
    border-color var(--ui-transition);
}

/* Placeholder shares the same frame so rows stay level. */
.tm-home-package-card__image.tm-service-card__thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-neutral-400);
  background: var(--ui-surface-secondary);
}

/* ---------- Body ---------- */

.tm-home-package-card__body {
  display: block !important;
}

/* ---------- Terms ---------- */

.tm-package-card__terms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}

.tm-package-card__terms .tm-badge {
  padding: 0.2rem 0.7rem;
  border-radius: var(--ui-radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--ui-primary-ink);
  background: var(--ui-surface-tertiary);
  border: 1px solid var(--ui-border-ruby);
}

/* ---------- Link: same shape as the service arrow ---------- */

.tm-home-package-card__link {
  transition:
    background-color var(--ui-transition),
    border-color var(--ui-transition),
    color var(--ui-transition);
}

.tm-home-package-card:hover .tm-home-package-card__link span {
  transform: translateX(-4px);
}

/* ---------- Grids: match the service grid rhythm ---------- */

.tm-home-packages-grid,
.packages-archive .tm-home-packages-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--space-6) !important;
}

.packages-archive#primary,
#primary.packages-archive {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 0;
}

@media (max-width: 1024px) {
}

@media (max-width: 620px) {
}
/* =========================================================
   SERVICE CARD — mirrors the package card

   Reversed direction from the earlier pass: the package cards on
   /packages/ now carry the richer treatment (eyebrow pill row,
   three-line clamp, full-width bordered CTA bar), so the service
   cards are brought onto exactly the same shell, media frame,
   typography and footer bar. One card design, two content types.
   ========================================================= */

/* Shell + media already share the tokens; this pins the CTA bar
   to the package card's link styling. */

.services-archive .service-card-cta {
  margin: 0;
  transition:
    background-color var(--ui-transition),
    border-color var(--ui-transition),
    color var(--ui-transition);
}

.services-archive .service-card:hover .service-card-cta {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: #ffffff;
}

.service-card-cta__arrow {
  transition: transform var(--ui-transition);
}

.services-archive .service-card:hover .service-card-cta__arrow {
  transform: translateX(-4px);
}

/*
 * The pricing block and the CTA bar stack in the same order and at
 * the same spacing as the package card, so a row of services and a
 * row of packages read identically.
 */
.services-archive .service-card-footer {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--ui-border-light);
}

.services-archive .service-card-pricing {
  display: flex !important;
  margin: 0;
  padding: 0;
}

.services-archive .service-card-price {
  display: block;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.services-archive .service-card-price-hint {
  display: block;
  line-height: 1.4;
}

/* =========================================================
   SERVICES HERO — matched to the shared hero

   Measured across the three inner heroes, this one was the odd
   one out: padding 92/100 against 64/64 everywhere else, and a
   container forced to text-align: start while the packages and
   about heroes are centred. It now inherits the shared hero
   metrics so all three read identically.
   ========================================================= */

.services-archive .page-hero {
  padding-block: 64px;
}

.services-archive .page-hero > .container {
  display: block;
  align-items: initial;
  text-align: center;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0;
}

.services-archive .page-hero .page-hero-title,
.services-archive .page-hero .page-hero-subtitle,
.services-archive .page-hero .page-hero-label {
  margin-inline: auto;
  text-align: center;
}

.services-archive .page-hero .page-hero-title {
  max-width: 950px;
  font-size: clamp(2.35rem, 5.2vw, 4.35rem);
  margin-top: 0;
}

.services-archive .page-hero .page-hero-subtitle {
  max-width: 680px;
  margin-top: 24px;
}

/* Gold rule centred with the heading. */
.services-archive .page-hero .page-hero-title::before {
  margin-inline: auto;
}

/* =========================================================
   HOME — services and packages share one section spec

   Measured on the front page, the two sections were the same
   height of padding but nothing else matched:

     services : bg #f7f7f8, 4 columns of 305px, 20px gap
     packages : bg #ffffff, 3 columns of 411px, 24px gap

   Three columns was the better measure (305px cards were too
   narrow to read), so both now use it, with one background, one
   gap and one card width, and each section's cards match the card
   design used on /services/ and /packages/.
   ========================================================= */

.tm-home-services,
.tm-home-packages {
  background: var(--ui-surface-secondary);
}

/* One grid spec for both. */
.tm-home-services-grid,
.tm-home-packages-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--space-6) !important;
}

/* One card spec for both, matching the archive pages. */
.tm-home-service-card,
.tm-home-package-card {
  display: block !important;
  height: auto;
  min-width: 0;
  overflow: hidden;
  background: var(--ui-surface-primary);
  border: 1px solid var(--ui-card-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-card-flat);
  transition:
    box-shadow var(--ui-transition),
    transform var(--ui-transition),
    border-color var(--ui-transition);
}

.tm-home-service-card:hover,
.tm-home-package-card:hover {
  transform: translateY(-4px);
  border-color: var(--ui-border-gold);
  box-shadow: var(--ui-card-elevated);
}

/* Identical media frame on both. */
.tm-home-service-card__image,
.tm-home-package-card__image {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.tm-home-service-card__image img,
.tm-home-package-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--ui-dur-slow) var(--ui-ease);
}

.tm-home-service-card:hover .tm-home-service-card__image img,
.tm-home-package-card:hover .tm-home-package-card__image img {
  transform: scale(1.04);
}

/* Identical body padding. */
.tm-home-service-card__body,
.tm-home-package-card__body {
  display: block !important;
  min-height: 0;
  margin: 0;
}

/* Identical title scale. */
.tm-home-service-card__title,
.tm-home-package-card__body h3 {
  display: block;
  padding: 0;
}

.tm-home-service-card__title a,
.tm-home-package-card__body h3 a {
  color: inherit;
}

.tm-home-service-card:hover .tm-home-service-card__title a,
.tm-home-package-card:hover .tm-home-package-card__body h3 a {
  color: var(--ui-primary);
}

/* Identical three-line excerpt. */
.tm-home-service-card__excerpt,
.tm-home-package-card__body > p {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Identical CTA bar. */
.tm-home-service-card__link,
.tm-home-package-card__link {
  transition:
    background-color var(--ui-transition),
    border-color var(--ui-transition),
    color var(--ui-transition);
}

.tm-home-service-card__hint,
.tm-package-card__from,
.tm-package-card__range,
.tm-home-service-card__currency,
.tm-package-card__price .currency {
  font-weight: var(--fw-regular);
}

@media (max-width: 1024px) {
  .tm-home-services-grid,
  .tm-home-packages-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .tm-home-services-grid,
  .tm-home-packages-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   PRICES — keep the numeral intact in RTL

   A Western numeral sitting next to an Arabic currency label in
   an RTL paragraph gets split by the bidi algorithm and renders
   "1ر.س 599". Isolating the number+currency group as one LTR run
   and hugging it to the start edge fixes it, and the same rule
   covers the cards, the single service page and the single
   package page.
   ========================================================= */

/*
 * Isolate the numeric+currency run so the bidi algorithm keeps the
 * digits intact. direction is deliberately NOT forced to ltr: doing so
 * broke the Arabic currency glyph and the display face substituted a
 * placeholder for it. The formatter now emits the number first, so in
 * the natural RTL flow the number sits on the right and the label to
 * its left, which is correct Arabic reading order.
 */
.service-card-price,
.service-card-cta,
.tm-home-service-card__price,
.tm-home-package-card__price,
.tm-package-card__price,
.service-price-amount,
.payment-plan-amount,
.service-detail-price,
.service-sidebar-price,
.service-detail__price {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

/* ---------- Single service / package page ---------- */

.service-detail-hero,
.single-tm_service .page-hero,
.single-tm_package .page-hero {
  background: var(--ui-brand-panel);
  background-image: none;
}

.single-tm_service,
.single-tm_package {
  padding-top: 0;
}

/*
 * The lead paragraph was justified, which on a narrow measure pushed
 * the first word hard against the right edge and left a ragged
 * second line. Right-aligned text reads correctly in Arabic and
 * removes the stretched spacing.
 */
.service-detail-lead,
.service-detail-excerpt,
.single-tm_service .entry-content > p:first-of-type,
.single-tm_package .entry-content > p:first-of-type {
  text-align: right;
  text-justify: inter-word;
}

/* Duration range: the two numbers were rendering reversed ("3-2"). */
.service-duration,
.service-meta__duration {
  unicode-bidi: isolate;
  direction: ltr;
  display: inline-block;
}

/* =========================================================
   HOME — compact cards, identical structure

   The home page is an overview, not a catalogue. Both sections
   now use the same compact card: a smaller media frame, a
   two-line clamp, and no terms/badge rows. The full pricing and
   plan detail stays on /services/ and /packages/ where there is
   room for it.
   ========================================================= */

.tm-home-services,
.tm-home-packages {
  padding-block: clamp(3rem, 5.5vw, 4.5rem);
}

.tm-home-services-grid,
.tm-home-packages-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--space-4) !important;
}

/* Tighter body. */
.tm-home-service-card__body,
.tm-home-package-card__body {
  padding: var(--space-4);
}

/* Two lines instead of three, and a smaller title. */
.tm-home-service-card__excerpt,
.tm-home-package-card__body > p {
  margin-bottom: var(--space-3);
}

.tm-home-service-card__title,
.tm-home-package-card__body h3 {
  margin-bottom: var(--space-2);
}

/* Compact price row. */
.tm-home-service-card__footer,
.tm-package-card__pricing {
  margin-bottom: var(--space-3);
}

/* Terms badges are archive-level detail; drop them on the overview. */
.tm-home-package-card .tm-package-card__terms {
  display: none;
}

@media (max-width: 1100px) {
  .tm-home-services-grid,
  .tm-home-packages-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  .tm-home-services-grid,
  .tm-home-packages-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .tm-home-services-grid,
  .tm-home-packages-grid {
    grid-template-columns: 1fr !important;
  }
}

.single-tm_service .service-detail-section-block + .service-detail-section-block {
  border-top: 1px solid var(--ui-border-light);
}

.single-tm_service .service-detail-section-block .container {
  width: 100%;
}

/*
 * auto-fill rather than a fixed two columns: with a single card a
 * 2fr grid left the second track empty and the card stranded on
 * one side with a void beside it.
 */
/* auto-fit, not auto-fill: auto-fill keeps the empty tracks, so a
   single card sat in a 300px column with three blank columns beside
   it. auto-fit collapses the unused tracks so the card spans the row. */
.single-tm_service .service-additional-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

.single-tm_service .service-additional-card {
  height: 100%;
}

/* Section heading sits at the start edge with the body below it. */
.single-tm_service .service-section-heading {
  max-width: var(--container-max);
  margin-inline: auto;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  text-align: start;
}

@media (max-width: 640px) {
  .single-tm_service .service-additional-grid,
  .single-tm_service .service-benefits-list {
    grid-template-columns: 1fr;
  }
}

/*
 * Root cause of the empty band: service-additional-info and
 * service-benefits are nested inside .service-detail-section, which
 * is a two-column grid (sidebar + content). As grid items they were
 * placed in the content column only — x=535, width 818px — so the
 * sidebar column to their left stayed empty and read as a large void.
 * They are page-level sections, not column content, so they span
 * both tracks.
 */
.single-tm_service .service-detail-section-block {
  grid-column: 1 / -1;
  width: 100%;
}

/* =========================================================
   DETAIL HERO → CONTENT SPACING

   .service-detail-section had its padding removed, which also
   removed the breathing room between the hero band and the first
   block of content. The spacing now lives on the content itself
   so the hero sits flush under the navbar and the page content
   starts with a clear band rather than butting against it.
   ========================================================= */

.single-tm_service .service-detail-section,
.single-tm_package .service-detail-section,
.single-tm_service main .service-detail-section-block:first-of-type {
  padding-top: clamp(2.5rem, 5vw, 4rem);
}

/* The layout grid is the first thing after the hero on both. */
.single-tm_service .service-detail-layout,
.single-tm_package .service-detail-layout {
  padding-top: clamp(2.5rem, 5vw, 4rem);
}

/* Blocks already carry their own padding; keep the rhythm even. */
.single-tm_service .service-detail-section-block,
.single-tm_package .service-detail-section-block {
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}

.single-tm_service .service-detail-section-block:first-of-type,
.single-tm_package .service-detail-section-block:first-of-type {
  padding-top: 0;
}

/* The ribbon is a slim top bar, not a filled block. */
.single-tm_package .package-plan__ribbon {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: auto;
  padding: 0.4rem 1rem;
  background: var(--ui-primary);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  border-start-start-radius: var(--ui-radius-lg);
  border-start-end-radius: var(--ui-radius-lg);
}

.single-tm_package .service-intro {
  max-width: none;
  margin: 0 0 var(--space-5);
}

/* Artwork inside the content column, bounded to that column. */
.single-tm_package .service-detail-image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface-secondary);
}

.single-tm_package .service-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Sidebar summary card. */
.single-tm_package .package-summary-card {
  max-width: none;
  margin: 0 0 var(--space-5);
}

/* Plans: full width below the layout, same as the service layout. */
.single-tm_package .service-plans {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.single-tm_package .service-plans__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

.single-tm_package .package-plan {
  height: 100%;
  background: var(--ui-surface-primary);
  border: 1px solid var(--ui-card-border);
  box-shadow: var(--ui-card-flat);
}

.single-tm_package .package-plan--featured {
  background: var(--ui-surface-primary);
  border-color: var(--ui-primary);
  box-shadow: 0 10px 28px rgba(var(--color-primary-rgb), 0.16);
  padding-top: 2.9rem;
}

@media (max-width: 1024px) {

  .single-tm_package .service-plans__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
}

/* =========================================================
   SINGLE PACKAGE — matched to the single service page

   Measured side by side at 1440px:

                       service            package
     hero height        361px              429px
     image              818 x 546 (1.50)   858 x 572 (1.50)
     sidebar height     1189px             604px
     content width      818px              820px

   Three things made the package page read as a different page:
   an extra price line in the hero made it 68px taller, the
   artwork overflowed its column by 40px, and the summary card
   was 585px shorter than the service sidebar, leaving a large
   void beneath it. The price now lives in the sidebar where the
   service page keeps it.
   ========================================================= */

/* 1. Hero: same padding and no extra price band, so both heroes
      resolve to the same height. */
.single-tm_package .package-hero__pricing {
  display: none;
}

.single-tm_package .service-detail-hero,
.single-tm_service .service-detail-hero {
  padding-block: 64px;
}

/* 2. Artwork confined to the content column. */
.single-tm_package .service-detail-image {
  max-width: 100%;
  width: 100%;
  margin: 0 0 var(--space-5);
}

.single-tm_package .service-detail-content,
.single-tm_package .service-main {
  max-width: none;
  width: 100%;
}

/* 3. Sidebar: sticky, and the summary card carries the price the
      hero used to, so the column is as tall as the service one. */
.single-tm_package .service-sidebar {
  position: sticky;
  top: calc(var(--header-height, 72px) + 1.5rem);
}

.single-tm_package .package-summary-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--ui-card-padding);
  background: var(--ui-surface-primary);
  border: 1px solid var(--ui-card-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-card-flat);
}

.single-tm_package .package-summary-card__plans {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-grow: 1;
}

.single-tm_package .package-summary-card__plans li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--ui-border-light);
  font-size: var(--text-sm);
}

.single-tm_package .package-summary-card__plans li:last-child {
  border-bottom: 0;
}

.single-tm_package .package-summary-card__price,
.single-tm_package .package-summary-card__plans .tm-package-card__price {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  color: var(--ui-primary);
  white-space: nowrap;
}

.single-tm_package .package-summary-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--ui-tap-min);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--ui-button-radius);
  background: var(--ui-primary);
  color: #ffffff;
  font-weight: var(--fw-semibold);
  border: 1px solid var(--ui-primary);
  transition:
    background-color var(--ui-transition),
    transform var(--ui-transition);
}

.single-tm_package .package-summary-card__cta:hover {
  background: var(--ui-primary-dark);
  transform: translateY(-1px);
}

/* =========================================================
   BENEFITS GRID — consistent cards

   Screenshot review of the package "ماذا تستفيد" block showed
   three problems: one card carried a magenta border while the
   rest were grey, the section sat on a tinted rectangle with hard
   edges that stopped short of the column, and the rows were
   loosely spaced with uneven card heights.

   All benefit cards now share one border, one background and a
   consistent minimum height, and the section is plain so the
   cards read as the only thing on it.
   ========================================================= */

.single-tm_package .service-benefits,
.single-tm_service .service-benefits {
  background: transparent;
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  margin: 0;
}

/* Heading: one weight and colour, aligned to the grid's start edge. */
.single-tm_package .service-benefits .service-section-heading,
.single-tm_service .service-benefits .service-section-heading {
  margin: 0 0 var(--space-5);
  padding: 0;
  background: none;
  border: 0;
  text-align: start;
  max-width: none;
}

.single-tm_package .service-benefits .service-section-title,
.single-tm_service .service-benefits .service-section-title {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.3;
  margin: 0;
  color: var(--ui-text-headings);
}

.single-tm_package .service-benefits .service-section-eyebrow,
.single-tm_service .service-benefits .service-section-eyebrow {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--ui-accent-ink);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
}

/* Even grid, even cards. */
.single-tm_package .service-benefits-list,
.single-tm_service .service-benefits-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.single-tm_package .service-benefit-item,
.single-tm_service .service-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: var(--space-4);
  background: var(--ui-surface-primary);
  border: 1px solid var(--ui-border-light);
  border-radius: var(--ui-radius-md);
  box-shadow: none;
  transition:
    border-color var(--ui-transition),
    box-shadow var(--ui-transition);
}

/* One border for every card, including the first. */
.single-tm_package .service-benefit-item:first-child,
.single-tm_package .service-benefit-item:first-of-type,
.single-tm_package .service-benefit-item:hover,
.single-tm_service .service-benefit-item:first-child,
.single-tm_service .service-benefit-item:first-of-type {
  background: var(--ui-surface-primary);
}

.single-tm_package .service-benefit-item:hover,
.single-tm_service .service-benefit-item:hover {
  border-color: var(--ui-border-gold);
  box-shadow: var(--ui-card-flat);
}

.single-tm_package .service-benefit-text,
.single-tm_service .service-benefit-text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--ui-text-secondary);
  margin: 0;
}

.single-tm_package .service-benefit-icon,
.single-tm_service .service-benefit-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--ui-primary-50);
  color: var(--ui-primary);
}

@media (max-width: 620px) {
  .single-tm_package .service-benefits-list,
  .single-tm_service .service-benefits-list {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   NAV DROPDOWN THUMBNAILS

   Service and package dropdown items carry their featured image
   so a nine-item list can be scanned at a glance. The image is
   managed from the normal featured-image field, not hard-coded.
   ========================================================= */

.tm-nav-item__thumb-wrap {
  display: inline-flex;
  align-items: center;
  margin-inline-end: 0.6rem;
  vertical-align: middle;
}

.tm-nav-item__thumb {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: var(--ui-radius-sm);
  border: 1px solid var(--ui-border-light);
  background: var(--ui-surface-secondary);
  flex: 0 0 auto;
}

.site-nav .sub-menu a,
.site-header__nav .sub-menu a {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 2.75rem;
  line-height: 1.4;
}

/* Only show the thumbnails where there is room for them. */
@media (max-width: 1024px) {
  .tm-nav-item__thumb-wrap {
    display: none;
  }
}

/* =========================================================
   HOME — services and packages: one identical section

   Side-by-side comparison showed four structural differences:

     services : header + an extra icon pillar row + grid,
                "view all" link in the header, no card badges
     packages: header + grid, no pillar row, badges on every
                card, "view all" button in the footer

   The pillar row is gone (the cards already list the services),
   both sections now use .tm-home-section-head with the same
   intro paragraph, both close with the same centred footer
   button, and the package-only badge row is suppressed on the
   overview so the two card sets read identically.
   ========================================================= */

/* One header shell. */
.tm-home-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: end;
  margin-bottom: var(--ui-section-gap);
}

.tm-home-section-head h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.25;
  margin: 0;
  color: var(--ui-text-headings);
}

.tm-home-section-head h2 span {
  color: var(--ui-primary);
}

.tm-home-section-head > p {
  margin: 0;
  color: var(--ui-text-secondary);
  line-height: var(--leading-relaxed);
}

/* One footer button. */
.tm-home-packages__footer {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/*
 * Package cards carry a badge row ("باقة متكاملة" / "4 خطط") that
 * service cards do not have. It is archive-level detail and made the
 * two card sets look different on the same page, so it is hidden here.
 */
.tm-home-packages .tm-home-package-card__top {
  display: none;
}

@media (max-width: 820px) {
  .tm-home-section-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* =========================================================
   HOME — package card design on both sections

   The services section keeps its structure (header, icon strip,
   card grid, footer button) and both sections now use the package
   card: a badge row, then title, then excerpt, then the price
   block and the full-width CTA. The badge row was previously
   package-only, which is what made the two card sets look
   different sitting on the same page.
   ========================================================= */

/*
 * Capability strip above the service/package cards. The items are cards in
 * their own right now, so the strip no longer draws a divider under itself;
 * the bottom margin alone separates it from the grid below.
 */
.tm-home-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}

.tm-home-pillar {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  border-radius: var(--ui-card-radius);
  background: var(--ui-surface-primary);
  border: 1px solid var(--ui-border-light);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

/*
 * Hover for these cards is owned by professional.css (grouped with the
 * service/package cards so the lift reads the same across the section),
 * which loads later and would override a rule written here.
 */

.tm-home-pillar__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ui-radius-sm);
  color: var(--ui-primary);
  background: var(--ui-surface-quaternary);
  border: 1px solid var(--ui-border-ruby);
}

.tm-home-pillar__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.tm-home-pillar__title {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--ui-text-headings);
  line-height: var(--leading-snug);
}

.tm-home-pillar__desc {
  font-size: var(--text-sm);
  color: var(--ui-text-muted);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}

/* Badge row: identical on both card types. */
.tm-home-service-card__top,
.tm-home-package-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
}

.tm-home-service-card__top span,
.tm-home-package-card__top span {
  padding: 0.2rem 0.7rem;
  border-radius: var(--ui-radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--ui-accent-ink);
  background: var(--ui-surface-quaternary);
  border: 1px solid var(--ui-border-gold);
}

/* Both grids sit under the strip with the same rhythm. */
.tm-home-services-grid,
.tm-home-packages-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

@media (max-width: 1100px) {
  .tm-home-pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tm-home-services-grid,
  .tm-home-packages-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .tm-home-pillars,
  .tm-home-services-grid,
  .tm-home-packages-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   HOME — service card height

   Measured side by side, the service card was 608px tall against
   the package card's 482px, with the whole difference in the
   footer: 222px holding a price, a one-line hint and a button,
   and a 155px void between the price and the button. The cause
   was the footer being a stretched flex column while the excerpt
   was allowed to grow, so the card was being padded out rather
   than holding content.

   Both cards now size to their content with one spacing rhythm,
   so the rows line up and the two sets read identically.
   ========================================================= */

.tm-home-service-card,
.tm-home-package-card {
  align-self: start;
}

.tm-home-service-card__body,
.tm-home-package-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* The excerpt holds its own height instead of absorbing slack. */
.tm-home-service-card__excerpt,
.tm-home-package-card__body > p {
  flex: 0 0 auto;
  min-height: 0;
}

/* Compact footer: price, hint, button — no auto margins, no growth. */
.tm-home-service-card__footer {
  justify-content: flex-start;
  flex: 0 0 auto;
  margin: 0;
  padding: var(--space-4) 0 0;
}

.tm-home-service-card__price {
  display: block;
  padding: 0;
  white-space: nowrap;
}

.tm-home-service-card__hint {
  display: block;
  line-height: 1.3;
}

.tm-home-service-card__link {
  margin: var(--space-2) 0 0;
  flex: 0 0 auto;
}

/* Same treatment for the package pricing block so both match. */
.tm-home-packages .tm-package-card__pricing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-1);
  flex: 0 0 auto;
  margin: 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--ui-border-light);
}

.tm-home-package-card__price {
  display: block;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--ui-primary);
}

.tm-home-package-card__link {
  margin: var(--space-3) 0 0;
  flex: 0 0 auto;
}

/*
 * Card price block, final.
 *
 * Measured: the service price was rendering at 13px with a 24.7px
 * line-height and breaking onto two lines (52px tall), and the
 * hint likewise. That is what produced the 155px void and the
 * oversized card. The size was being lost to an earlier rule in
 * the cascade, so these declarations are pinned to win: the price
 * is a single line, the hint is a single line, and the footer
 * collapses to the height its content needs.
 */
.tm-home-service-card__price bdi {
  display: inline !important;
}

/* =========================================================
   ABOUT + CONTACT — one section system

   Audited against the home, services and packages pages, these two
   had drifted: decorative 01/02/03 numerals the home cards no
   longer use, section headings that were magenta on some bands and
   dark on others, a centred header on About and a split header on
   Contact, and a contact form with no relationship to the design
   system. All of it is now mapped onto the same shell.
   ========================================================= */

/* ---------- One section header shell ---------- */

.about-section-head,
.about-section-title,
.about-values-title,
.team-section-title,
.contact-section-title,
.about-process__title,
.about-capabilities__title {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.25;
  margin: 0 0 var(--space-4);
  color: var(--ui-text-headings);
}

/*
 * Accent lives on a wrapped span, not on the whole heading. Two of
 * the six headings here were rendering fully magenta, which is why
 * the same page had headings in two different colours.
 */
.about-section-title span,
.about-values-title span,
.team-section-title span,
.contact-section-title span {
  color: var(--ui-primary);
}

.about-section-label,
.contact-section-label,
.tm-home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  color: var(--ui-accent-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.about-section-label::before,
.contact-section-label::before {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-accent);
}

.about-lead,
.about-values-intro,
.about-process__intro,
.about-capabilities__intro,
.contact-section-lead,
.about-testimonials__intro {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--ui-text-secondary);
  margin: 0;
  max-width: 62ch;
}

/* ---------- Shared band rhythm ---------- */

.about-section,
.about-values,
.about-process,
.about-capabilities,
.about-intro,
.team-section,
.contact-section,
.contact-values {
  padding-block: var(--ui-band-pad);
}

.about-section:nth-of-type(even),
.contact-values {
  background: var(--ui-surface-secondary);
}

/* ---------- One card: value cards, why-us, contact cards ---------- */

.about-value-card,
.about-value-card__body,
.about-capability,
.service-benefit-item,
.contact-value-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--ui-card-padding);
  background: var(--ui-surface-primary);
  border: 1px solid var(--ui-card-border);
  border-radius: var(--ui-card-radius);
  box-shadow: var(--ui-card-flat);
  transition:
    box-shadow var(--ui-transition),
    transform var(--ui-transition),
    border-color var(--ui-transition);
}

.about-value-card:hover,
.about-capability:hover,
.contact-value-card:hover {
  transform: translateY(-4px);
  border-color: var(--ui-border-gold);
  box-shadow: var(--ui-card-elevated);
}

.about-value-card h3,
.about-value-card__title,
.about-capability h3,
.contact-value-card h3 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-2);
  color: var(--ui-text-headings);
}

.about-value-card p,
.about-value-card__text,
.about-capability p,
.contact-value-card p {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--ui-text-secondary);
  margin: 0;
}

/* Icon: one pill on both. */
.about-value-icon,
.about-capability__icon,
.contact-value-card__icon,
.service-benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 0 var(--space-3);
  border-radius: var(--ui-radius-md);
  color: var(--ui-primary);
  background: var(--ui-surface-tertiary);
  border: 1px solid var(--ui-border-light);
}

.about-value-card:hover .about-value-icon,
.about-capability:hover .about-capability__icon,
.contact-value-card:hover .contact-value-card__icon {
  color: var(--ui-accent-ink);
  background: var(--ui-surface-quaternary);
  border-color: var(--ui-border-gold);
}

/* ---------- Grids ---------- */

.about-values-grid,
.about-capabilities__grid,
.contact-values-grid,
.about-capability__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

/* ---------- Approach list (the numbered 01/02/03 block) ---------- */

.about-point {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--ui-border-light);
}

.about-point:last-child {
  border-bottom: 1px solid var(--ui-border-light);
}

.about-point-content h3 {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
  color: var(--ui-text-headings);
}

.about-point-content p {
  margin: 0;
  color: var(--ui-text-secondary);
  line-height: var(--leading-relaxed);
}

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

.team-section .team-empty-state,
.about-team .team-empty-state {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  padding: var(--ui-card-padding);
  background: var(--ui-surface-primary);
  border: 1px solid var(--ui-card-border);
  border-radius: var(--ui-card-radius);
  box-shadow: var(--ui-card-flat);
}

/* ---------- Contact form ---------- */

.contact-form,
.tm-contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-form label,
.tm-contact-form label,
.form-group label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ui-text-headings);
}

.contact-form input,
.contact-form textarea,
.contact-form select,
.tm-contact-form input,
.tm-contact-form textarea,
.form-group input,
.form-group textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ui-text-primary);
  background: var(--ui-surface-secondary);
  border: 1px solid var(--ui-border-medium);
  border-radius: var(--ui-radius-md);
  transition:
    border-color var(--ui-transition),
    background-color var(--ui-transition),
    box-shadow var(--ui-transition);
}

.contact-form input:focus,
.contact-form textarea:focus,
.tm-contact-form input:focus,
.tm-contact-form textarea:focus,
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  background: var(--ui-surface-primary);
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
}

.contact-form textarea,
.tm-contact-form textarea {
  min-height: 8rem;
  resize: vertical;
}

.contact-form button[type="submit"],
.tm-contact-form button[type="submit"],
.form-submit,
input[type="submit"] {
  width: 100%;
  min-height: var(--ui-tap-min);
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--ui-primary);
  border-radius: var(--ui-radius-md);
  background: var(--ui-primary);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition:
    background-color var(--ui-transition),
    transform var(--ui-transition);
}

.contact-form button[type="submit"]:hover,
.tm-contact-form button[type="submit"]:hover,
.form-submit:hover,
input[type="submit"]:hover {
  background: var(--ui-primary-dark);
  transform: translateY(-1px);
}

/* ---------- Contact info cards ---------- */

.contact-info-item,
.tm-contact-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--ui-surface-primary);
  border: 1px solid var(--ui-card-border);
  border-radius: var(--ui-card-radius);
  transition:
    box-shadow var(--ui-transition),
    transform var(--ui-transition),
    border-color var(--ui-transition);
}

.contact-info-item:hover,
.tm-contact-card:hover {
  transform: translateY(-3px);
  border-color: var(--ui-border-gold);
  box-shadow: var(--ui-card-flat);
}

.contact-info-item__icon,
.tm-contact-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--ui-radius-md);
  color: var(--ui-primary);
  background: var(--ui-surface-tertiary);
  border: 1px solid var(--ui-border-light);
}

.contact-info-item h3,
.tm-contact-card h3 {
  font-size: var(--text-base);
  margin: 0 0 2px;
  color: var(--ui-text-headings);
}

.contact-info-item p,
.tm-contact-card p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ui-text-secondary);
}

@media (max-width: 900px) {
  .about-values-grid,
  .about-capabilities__grid,
  .contact-values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .about-values-grid,
  .about-capabilities__grid,
  .contact-values-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   ABOUT — rebuilt page
   Sections: hero, intro (lead + aside), proof band, method,
   commitments, capabilities, CTA. All on the shared tokens so
   it sits alongside home, services and packages.
   ========================================================= */

.ab-intro,
.ab-method,
.ab-commitments,
.ab-capabilities {
  padding-block: var(--ui-band-pad);
}

.ab-intro { background: var(--ui-surface-primary); }
.ab-method { background: var(--ui-surface-secondary); }
.ab-commitments { background: var(--ui-surface-primary); }
.ab-capabilities { background: var(--ui-surface-secondary); }

.ab-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  color: var(--ui-accent-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.ab-eyebrow::before {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-accent);
}

.ab-eyebrow--light { color: var(--ui-on-brand-ink); }
.ab-eyebrow--light::before { background: var(--ui-on-brand-rule); }

.ab-heading {
  font-size: clamp(1.6rem, 3.2vw, 2.35rem);
  line-height: 1.28;
  margin: 0 0 var(--space-4);
  color: var(--ui-text-headings);
}

.ab-text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--ui-text-secondary);
  margin: 0 0 var(--space-4);
  max-width: 68ch;
}

/* ---------- Header shell (matches the home page) ---------- */

.ab-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: end;
  margin-bottom: var(--ui-section-gap);
}

.ab-head .ab-text { margin-bottom: 0; }

/* ---------- Intro ---------- */

.ab-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.ab-checks {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ab-checks li {
  position: relative;
  padding-inline-start: 1.75rem;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--ui-text-secondary);
}

.ab-checks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.5em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ui-accent);
}

.ab-intro__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ab-aside-card {
  padding: var(--ui-card-padding);
  background: var(--ui-surface-primary);
  border: 1px solid var(--ui-card-border);
  border-radius: var(--ui-card-radius);
  box-shadow: var(--ui-card-flat);
}

.ab-aside-card__label {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--ui-text-muted);
}

.ab-aside-card__value {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--leading-snug);
  color: var(--ui-primary);
}

.ab-aside-card__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--ui-text-secondary);
}

/* ---------- Method ---------- */

.ab-method__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.ab-method__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--ui-card-padding);
  background: var(--ui-surface-primary);
  border: 1px solid var(--ui-card-border);
  border-radius: var(--ui-card-radius);
  box-shadow: var(--ui-card-flat);
  transition:
    box-shadow var(--ui-transition),
    transform var(--ui-transition),
    border-color var(--ui-transition);
}

.ab-method__step:hover {
  transform: translateY(-4px);
  border-color: var(--ui-border-gold);
  box-shadow: var(--ui-card-elevated);
}

.ab-method__index {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ui-primary-200);
}

.ab-method__title {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin: 0;
  color: var(--ui-text-headings);
}

.ab-method__text {
  flex-grow: 1;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--ui-text-secondary);
  margin: 0;
}

.ab-method__meta {
  padding-top: var(--space-3);
  border-top: 1px dashed var(--ui-card-border);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--ui-accent-ink);
}

/* ---------- Commitments ---------- */

.ab-commitments__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ab-commitment {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--ui-surface-primary);
  border: 1px solid var(--ui-card-border);
  border-radius: var(--ui-card-radius);
  transition:
    box-shadow var(--ui-transition),
    border-color var(--ui-transition);
}

.ab-commitment:hover {
  border-color: var(--ui-border-gold);
  box-shadow: var(--ui-card-flat);
}

.ab-commitment__mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 2px;
  border-radius: 50%;
  color: var(--ui-accent-ink);
  background: var(--ui-surface-quaternary);
  border: 1px solid var(--ui-border-gold);
}

.ab-commitment h3 {
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-1);
  color: var(--ui-text-headings);
}

.ab-commitment p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--ui-text-secondary);
}

/* ---------- Capabilities ---------- */

.ab-capabilities__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ab-capability__link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-4);
  background: var(--ui-surface-primary);
  border: 1px solid var(--ui-card-border);
  border-radius: var(--ui-card-radius);
  box-shadow: var(--ui-card-flat);
  transition:
    box-shadow var(--ui-transition),
    transform var(--ui-transition),
    border-color var(--ui-transition);
}

.ab-capability__link:hover {
  transform: translateY(-4px);
  border-color: var(--ui-border-gold);
  box-shadow: var(--ui-card-elevated);
}

.ab-capability__media {
  flex: 0 0 auto;
  display: block;
  width: 4rem;
  height: 4rem;
  border-radius: var(--ui-radius-md);
  overflow: hidden;
  background: var(--ui-surface-tertiary);
}

.ab-capability__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ab-capability__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--ui-neutral-400);
}

.ab-capability__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ab-capability__title {
  font-weight: var(--fw-semibold);
  color: var(--ui-text-headings);
  line-height: var(--leading-snug);
}

.ab-capability__link:hover .ab-capability__title { color: var(--ui-primary); }

.ab-capability__text {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--ui-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ab-capabilities__more {
  display: flex;
  justify-content: center;
  margin-top: var(--ui-section-gap);
}

/* ---------- Buttons ---------- */

.ab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--ui-tap-min);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--ui-button-radius);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  transition:
    background-color var(--ui-transition),
    border-color var(--ui-transition),
    color var(--ui-transition),
    transform var(--ui-transition);
}

.ab-btn--ghost {
  background: var(--ui-surface-primary);
  border-color: var(--ui-card-border);
  color: var(--ui-primary);
}

.ab-btn--ghost:hover {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: #ffffff;
  transform: translateY(-2px);
}

.ab-btn--light {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--ui-primary);
}

.ab-btn--light:hover {
  background: var(--ui-accent-50);
  border-color: var(--ui-accent-50);
  color: var(--ui-primary-dark);
  transform: translateY(-2px);
}

.ab-btn--ghost-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

.ab-btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-2px);
}

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

.ab-cta {
  background: var(--ui-hero-surface);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.ab-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.ab-cta__title {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.25;
  margin: 0 0 var(--space-4);
  color: #ffffff;
}

.ab-cta__text {
  margin: 0;
  max-width: 52ch;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.85);
}

.ab-cta__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .ab-method__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-capabilities__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .ab-head,
  .ab-intro__grid,
  .ab-cta__inner { grid-template-columns: 1fr; align-items: start; }
  .ab-commitments__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .ab-method__grid,
  .ab-capabilities__grid { grid-template-columns: 1fr; }
}

.page-hero-dark .btn-primary:hover {
  background: var(--ui-accent-50);
  border-color: var(--ui-accent-50);
  color: var(--ui-primary-dark);
  opacity: 1;
  transform: translateY(-2px);
}

.page-hero-dark .btn-accent:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
  opacity: 1;
  transform: translateY(-2px);
}

/*
 * Reasserted at higher specificity with an explicit background-image
 * reset. .btn-primary carries background-image: var(--gradient-primary)
 * from the accent rules, and the ruby gradient was still painting over
 * the white fill on the band.
 */
.page-hero .container .btn-primary {
  background: #ffffff !important;
  background-image: none !important;
  border: 1.5px solid #ffffff !important;
  color: var(--ui-primary) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.tm-home-hero__actions .btn-accent,
.page-hero .container .btn-accent {
  text-shadow: none !important;
}

.page-hero .container .btn-primary:hover {
  background: var(--ui-accent-50) !important;
  color: var(--ui-primary-dark) !important;
}

/* =========================================================
   "لماذا ترند 360" section

   .tm-home-about__grid was declared as two columns (.9fr 1.1fr)
   for a visual plus its copy, but the markup only renders the copy
   column. The single child therefore landed in the 45% track and the
   remaining 55% stayed empty, which is why the whole block looked
   pushed to one side. Collapsed to a single column so the content
   uses the full measure.
   ========================================================= */

.tm-home-about__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

/* No max-width here: ch units are based on the "0" glyph (~8px), so
   72ch resolved to roughly 576px and re-created the narrow, one-sided
   column this fix was meant to remove. */
.tm-home-about__content {
  max-width: none;
  width: 100%;
}

/* =========================================================
   SINGLE PACKAGE / SERVICE — mobile layout fix

   The two-column rule for .service-detail-layout (1fr + 390px) was
   declared AFTER the max-width:1024px collapse, so at every mobile
   width the later rule won and the grid stayed two columns. On a
   390px screen the 390px sidebar consumed the entire viewport and
   the content column collapsed to roughly 60px, wrapping the body
   copy one or two words per line.

   These blocks are placed last so they win the cascade.
   ========================================================= */

.single-tm_package .service-detail-layout,
.single-tm_service .service-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 72px;
  align-items: start;
}

@media (max-width: 1024px) {
  .single-tm_package .service-detail-layout,
  .single-tm_service .service-detail-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
}

/* The summary card and sidebar must not inherit a fixed width. */
@media (max-width: 1024px) {
  .single-tm_package .package-summary-card,
  .single-tm_package .service-sidebar,
  .single-tm_service .service-sidebar,
  .single-tm_package .service-detail-content,
  .single-tm_service .service-detail-content,
  .single-tm_package .service-main,
  .single-tm_service .service-main {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 620px) {
  /* Plan cards go to one column with usable spacing. */
  .single-tm_package .service-plans__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* Keep the CTA bar above the copy, not below it. */
  .single-tm_package .ab-cta__inner,
  .single-tm_service .service-detail-cta-inner {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   SERVICES / PACKAGE LISTS — mobile

   At 390px the archive was still laying the cards out three
   across: the track definition is declared more than once in this
   file and the later copies land after the media queries, so the
   mobile collapse never took effect. Each card ended up ~115px
   wide with titles wrapping over three lines and the CTA text
   breaking in half.

   Defined once, last, with the breakpoints that were always
   intended: 3 across on desktop, 2 on tablet, 1 on phones.
   ========================================================= */

.services-archive .services-grid,
.services-archive .tm-services-grid {
  display: grid !important;
}

@media (max-width: 1024px) {
  .services-archive .services-grid,
  .services-archive .tm-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .services-archive .services-grid,
  .services-archive .tm-services-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--space-4) !important;
  }

  /* Card typography has to shrink with the viewport, otherwise a
     3-word title occupies three lines in a 115px column. */
  .services-archive .service-card-body,
  .services-archive .service-card-title,
  .services-archive .service-card-excerpt {
    padding-inline: 0;
  }

  .services-archive .service-card-body {
    padding: var(--space-4) !important;
    gap: var(--space-3) !important;
  }

  .services-archive .service-card-title {
    font-size: var(--text-base) !important;
    line-height: 1.4 !important;
  }

  .services-archive .service-card-excerpt {
    font-size: var(--text-sm) !important;
    -webkit-line-clamp: 2;
    min-height: calc(2 * 1.7 * var(--text-sm)) !important;
    margin-bottom: var(--space-3) !important;
  }

  /* Price block stays on one row and does not wrap mid-number. */
  .services-archive .service-card-price {
    font-size: var(--text-lg) !important;
    white-space: nowrap;
  }

  .services-archive .service-card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3) !important;
  }

  /* CTA bar: full width, label on one line. */
  .services-archive .service-card-cta,
  .services-archive .service-card .ab-btn {
    width: 100%;
    min-height: var(--ui-tap-min);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    white-space: nowrap;
  }
}

/* =========================================================
   CART ON MOBILE

   Two mobile rules in layout.css hide every header action:

     @media (max-width: 768px) { .header-actions .btn-ghost { display: none } }
     @media (max-width: ...)   { .header-actions .btn        { display: none } }

   The cart renders as class="btn btn-ghost btn-sm cart-link",
   so it matched both and vanished on phones with no way to reach
   the basket. The icon-only form is restored, with the text
   label dropped so it still fits beside the hamburger.
   ========================================================= */

@media (max-width: 768px) {
  .site-header .header-actions .cart-link,
  .site-header .header-actions .tm-header__cart-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-width: var(--ui-tap-min);
    min-height: var(--ui-tap-min);
    justify-content: center;
    padding-inline: 8px;
  }

  /* Icon-only: the label does not fit on a narrow header. */
  .site-header .cart-label {
    display: none;
  }

  /* The cart icon has to be explicit once the label is gone. */
  .site-header .cart-link svg,
  .site-header .cart-link .cart-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
  }

  /* Badge must survive the icon-only layout. */
  .site-header .cart-count-badge {
    position: absolute;
    top: 2px;
    inset-inline-end: 2px;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    line-height: 18px;
    padding: 0 4px;
  }

  .site-header .cart-link {
    position: relative;
  }
}

/*
 * The cart link is text-only in the markup (no icon element), so
 * hiding the label on mobile would leave an empty button. An icon
 * is injected for the icon-only layout. Drawn as a mask so it
 * inherits the current text colour in both states.
 */
@media (max-width: 768px) {
  .site-header .cart-link::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.6'/%3E%3Ccircle cx='18' cy='20' r='1.6'/%3E%3Cpath d='M2 3h2.2l2.4 12.2a1.6 1.6 0 0 0 1.6 1.3h9.1a1.6 1.6 0 0 0 1.6-1.3L21 7H6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.6'/%3E%3Ccircle cx='18' cy='20' r='1.6'/%3E%3Cpath d='M2 3h2.2l2.4 12.2a1.6 1.6 0 0 0 1.6 1.3h9.1a1.6 1.6 0 0 0 1.6-1.3L21 7H6'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  /* Keep the cart readable against the header on hover/active. */
  .site-header .cart-link:hover,
  .site-header .cart-link:focus-visible {
    color: #ffffff;
  }
}

/* =========================================================
   EMPTY CART

   The empty state rendered as a bare black circle on white with
   default-styled products and grey buttons, which read as
   unfinished rather than intentional. It is styled here to the
   same card and button system as the rest of the site.
   ========================================================= */

.wp-block-woocommerce-cart.is-loading .wp-block-woocommerce-empty-cart,
.wp-block-woocommerce-empty-cart {
  display: block;
  width: 100%;
  text-align: center;
}

/* The sad-face glyph does not match the brand and reads as an error. */
.wc-block-components-empty-state__image img,
.wp-block-woocommerce-empty-cart .wc-block-components-empty-state__image {
  filter: grayscale(1);
  opacity: 0.5;
}

/* Heading and message sit on the brand spacing. */
.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart h2,
.wp-block-woocommerce-cart .wc-block-components-empty-state__title,
.cart-empty-state .cart-empty-state__title {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.3;
  color: var(--ui-text-headings) !important;
  margin: 0 0 var(--space-3) !important;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart p,
.wp-block-woocommerce-cart .wc-block-components-empty-state__description,
.cart-empty-state p {
  color: var(--ui-text-secondary) !important;
  font-size: var(--text-base) !important;
  margin: 0 auto var(--space-6) !important;
  max-width: 52ch;
}

/*
 * "Add to cart" inside the empty-cart cross-sell rendered as a
 * dark grey pill. Bring it onto the brand button system.
 */
.wp-block-woocommerce-cart .wp-block-button__link,
.wp-block-woocommerce-cart .wc-block-components-button__link,
.cart-empty-state .wp-block-button__link {
  background-color: var(--ui-primary) !important;
  color: #ffffff !important;
  border-radius: var(--ui-button-radius) !important;
  min-height: var(--ui-tap-min);
  padding: var(--space-3) var(--space-6) !important;
  font-weight: var(--fw-semibold) !important;
  border: 1px solid var(--ui-primary) !important;
  transition:
    background-color var(--ui-transition),
    transform var(--ui-transition);
}

.wp-block-woocommerce-cart .wp-block-button__link:hover,
.wp-block-woocommerce-cart .wc-block-components-button__link:hover {
  background-color: var(--ui-primary-dark) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Product placeholders in the cross-sell grid. */
.wp-block-woocommerce-cart .wc-block-grid__products,
.wp-block-woocommerce-cart .wp-block-product {
  text-align: center;
}

.wp-block-woocommerce-cart .wc-block-components-product-image img {
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-secondary);
}

/* =========================================================
   EMPTY CART — icon and action
   ========================================================= */

/*
 * WooCommerce ships a sad-face glyph for the empty state. It reads as
 * an error rather than an empty basket, so it is swapped for a basket
 * icon in the brand colour. Drawn as a mask so it inherits currentColor.
 */
.wp-block-woocommerce-cart .wc-block-components-empty-state__image {
  width: 88px;
  height: 88px;
  margin: 0 auto var(--space-4);
}

.wp-block-woocommerce-cart .wc-block-components-empty-state__image img,
.wp-block-woocommerce-cart .wc-block-components-empty-state__image svg {
  width: 88px;
  height: 88px;
  opacity: 1;
  filter: none;
  background-color: var(--ui-primary-50);
  border-radius: 50%;
  padding: 22px;
  -webkit-mask-image: none;
  mask-image: none;
  object-fit: contain;
}

/* Hide the upstream artwork and draw our own basket. */
.wp-block-woocommerce-cart .wc-block-components-empty-state__image img {
  visibility: hidden;
}

.wp-block-woocommerce-cart .wc-block-components-empty-state__image {
  position: relative;
}

.wp-block-woocommerce-cart .wc-block-components-empty-state__image::after {
  content: "";
  position: absolute;
  inset: 22px;
  background-color: var(--ui-primary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2.5 3h2l2.3 11.6a1.6 1.6 0 0 0 1.6 1.3h9a1.6 1.6 0 0 0 1.6-1.3L20.5 6.5H5.2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2.5 3h2l2.3 11.6a1.6 1.6 0 0 0 1.6 1.3h9a1.6 1.6 0 0 0 1.6-1.3L20.5 6.5H5.2'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Primary action back to the catalogue. */
.tm-empty-cart__cta {
  margin: var(--space-6) 0 0;
  text-align: center;
}

.tm-empty-cart__cta .ab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ui-tap-min);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--ui-button-radius);
  background: var(--ui-primary);
  border: 1px solid var(--ui-primary);
  color: #ffffff;
  font-weight: var(--fw-semibold);
  transition:
    background-color var(--ui-transition),
    transform var(--ui-transition);
}

.tm-empty-cart__cta .ab-btn:hover {
  background: var(--ui-primary-dark);
  transform: translateY(-1px);
}

/*
 * The empty-cart icon is a masked pseudo-element on the heading, not an
 * image element, so the earlier image-based rules never matched. The
 * upstream artwork is a sad face, which reads as an error rather than an
 * empty basket, so the mask is swapped for a basket glyph on a soft
 * brand disc.
 */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before,
.wp-block-woocommerce-empty-cart-block .with-empty-cart-icon::before {
  -webkit-mask: none;
  mask: none;
}

/*
 * Reasserted with !important: wc-block-library-style.css ships the
 * sad-face mask with !important on the properties that matter, so a
 * plain override loses on load order alone.
 */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before,
.wp-block-woocommerce-empty-cart-block .with-empty-cart-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2.5 3h2l2.3 11.6a1.6 1.6 0 0 0 1.6 1.3h9a1.6 1.6 0 0 0 1.6-1.3L20.5 6.5H5.2'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2.5 3h2l2.3 11.6a1.6 1.6 0 0 0 1.6 1.3h9a1.6 1.6 0 0 0 1.6-1.3L20.5 6.5H5.2'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: 46px 46px !important;
  mask-size: 46px 46px !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  background-color: var(--ui-primary) !important;
  width: 88px !important;
  height: 88px !important;
  border-radius: 50% !important;
  margin: 0 auto var(--space-5) !important;
  display: block !important;
}

/*
 * The disc is produced by a box-shadow ring on the same pseudo
 * element, since a mask paints the glyph only.
 */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::after,
.wp-block-woocommerce-empty-cart-block .with-empty-cart-icon::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-end: 50%;
  width: 88px;
  height: 88px;
  margin-inline-end: -44px;
  border-radius: 50%;
  background: var(--ui-primary-50);
  z-index: -1;
}

.wc-block-cart__empty-cart__title.with-empty-cart-icon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-6) !important;
}

/* =========================================================
   EMPTY CART — composed layout

   The page had three things fighting for attention: the page
   title was start-aligned while the block beneath it was centred,
   and a large empty gap sat between the message and the footer.
   With the cross-sell removed there is little content, so the
   whole page is composed as one centred column.
   ========================================================= */

body.woocommerce-cart .page-content-container {
  text-align: center;
  padding-block: clamp(2rem, 4vw, 3rem) 0;
}

body.woocommerce-cart .page-content-container > .page-title {
  margin: 0 0 var(--space-6);
  font-size: clamp(1.6rem, 3.4vw, 2.25rem);
  line-height: 1.25;
  color: var(--ui-text-headings);
  text-align: center;
}

body.woocommerce-cart .page-content {
  max-width: 34rem;
  margin-inline: auto;
}

/* Remove the loading state so the empty message is not dimmed. */
body.woocommerce-cart .wp-block-woocommerce-cart.is-loading {
  opacity: 1;
}

/* The block reserves a full order-summary layout even when empty;
   collapse it so the message sits near the top. */
body.woocommerce-cart .wp-block-woocommerce-cart > .wc-block-components-inner-layout {
  display: block;
  min-height: 0;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
  padding-block: clamp(1.5rem, 3vw, 2.5rem) 0;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block h2 {
  margin: 0 0 var(--space-2) !important;
}

/* Trim the trailing gap left by the removed cross-sell grid. */
body.woocommerce-cart .page-content-container {
  padding-bottom: 0;
}

body.woocommerce-cart .page-wrapper {
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
/* =========================================================
   TRUST BAND + FREE AUDIT

   Added from the reference build's structure, restyled in this
   site's wine/gold identity. Both sit on the brand panel colour so
   they read as deliberate bands in the page rhythm rather than
   more stacked white sections.
   ========================================================= */

/* ---------- Trust band ---------- */

.tm-home-trust {
  background: var(--ui-brand-panel);
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}

.tm-home-trust__label {
  margin: 0 0 var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  color: var(--ui-accent-light);
}

.tm-home-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tm-home-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
  padding: var(--space-5) var(--space-4);
  border-radius: var(--ui-radius-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    border-color var(--ui-transition),
    background-color var(--ui-transition);
}

.tm-home-trust__item:hover {
  border-color: var(--ui-border-gold);
  background: rgba(255, 255, 255, 0.08);
}

.tm-home-trust__value {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.tm-home-trust__text {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- Free audit ---------- */

.tm-home-audit {
  background: var(--ui-brand-panel);
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tm-home-audit__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.tm-home-audit__title {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.25;
  margin: 0 0 var(--space-4);
  color: #ffffff;
}

.tm-home-audit__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 var(--space-5);
  max-width: 52ch;
}

.tm-home-audit__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tm-home-audit__points li {
  position: relative;
  padding-inline-start: 1.75rem;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.9);
}

.tm-home-audit__points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ui-accent);
}

/* The form panel lifts off the band so the inputs are clearly a form. */
.tm-home-audit__panel {
  background: #ffffff;
  border-radius: var(--ui-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--ui-elev-4);
}

.tm-home-audit__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tm-home-audit__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tm-home-audit__field label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ui-text-headings);
}

.tm-home-audit__field input {
  width: 100%;
  min-height: var(--ui-tap-min);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ui-text-primary);
  background: var(--ui-surface-secondary);
  border: 1px solid var(--ui-border-medium);
  border-radius: var(--ui-radius-md);
  transition:
    border-color var(--ui-transition),
    background-color var(--ui-transition),
    box-shadow var(--ui-transition);
}

.tm-home-audit__field input:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.14);
}

/* Numeric/URL fields stay left-to-right inside the RTL form. */
.tm-home-audit__field input[dir="ltr"] {
  text-align: left;
}

.ab-btn--block {
  width: 100%;
}

.tm-home-audit__note {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--ui-text-muted);
  text-align: center;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .tm-home-trust__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .tm-home-audit__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .tm-home-trust__grid {
    grid-template-columns: 1fr;
  }
}
/*
 * Testimonial accent rail.
 *
 * The rail was 4px of the ruby-to-gold gradient sitting on the card's
 * start edge. At that width the gradient reads as a hard red line
 * rather than an accent, and it collided with the card border, so it
 * looked like a rendering artifact. Replaced with a shorter gold rule
 * that sits inside the card.
 */
.tm-home-testimonial::before {
  content: none;
}

.tm-home-testimonial {
  position: relative;
}

.tm-home-testimonial::after {
  content: "";
  position: absolute;
  inset-block-start: var(--space-6);
  inset-inline-start: 0;
  width: 3px;
  height: 28px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-accent);
}
/* =========================================================
   HERO — airy panel, floating stat strip

   Reworked toward the reference build's language: a light, open
   panel with a faint grid, generous whitespace, a white content
   card and small floating stat chips.

   The palette is this site's, not the reference's: wine carries the
   headline and the primary action, gold is the single accent, and
   the background is a soft wine-tinted neutral rather than blue.
   ========================================================= */

.tm-home-hero {
  position: relative;
  overflow: hidden;
  background: #faf7f8;
  padding-block: clamp(3rem, 6vw, 5.5rem);
  isolation: isolate;
}

/* Faint grid, the structural signature of the reference hero. */
.tm-home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, rgba(18, 45, 38, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18, 45, 38, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
  pointer-events: none;
}

/* Soft brand bloom behind the content. */
.tm-home-hero::after {
  content: "";
  position: absolute;
  inset-block-start: -18%;
  inset-inline-start: -12%;
  width: 46rem;
  height: 46rem;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(18, 45, 38, 0.09) 0%,
    rgba(18, 45, 38, 0.05) 42%,
    rgba(18, 45, 38, 0) 70%
  );
  pointer-events: none;
}

.tm-home-hero > .container {
  position: relative;
  z-index: 1;
}

/* ---------- Content card ---------- */

.tm-home-hero__content-inner {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(18, 45, 38, 0.1);
  border-inline-start: 4px solid var(--ui-primary);
  border-radius: var(--ui-radius-xl);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  box-shadow: var(--ui-elev-3);
  max-width: 46rem;
}

.tm-home-hero__title {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.2;
  margin: 0 0 var(--space-4);
  color: var(--ui-primary-dark);
  text-wrap: balance;
}

.tm-home-hero__title .text-accent {
  color: var(--ui-accent-ink);
}

.tm-home-hero__description {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--ui-text-secondary);
  margin: 0 0 var(--space-6);
  max-width: 58ch;
}

/* ---------- Actions ---------- */

.tm-home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* On the light panel the primary stays solid and the secondary
   becomes an outline, rather than the white/outline pairing the
   dark hero needed. */
.tm-home-hero__actions .btn-primary {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: #ffffff;
}

.tm-home-hero__actions .btn-primary:hover {
  background: var(--ui-primary-dark);
  border-color: var(--ui-primary-dark);
  color: #ffffff;
}

/* ---------- Floating stat strip ---------- */

.tm-home-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: var(--space-5) 0 0;
  border-top: 1px dashed var(--ui-border-medium);
}

.tm-home-hero__stat {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.45rem 0.9rem 0.45rem 0.45rem;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface-secondary);
  border: 1px solid var(--ui-border-light);
  /*
   * base.css sets a global `li { margin-bottom: var(--space-2) }` for prose
   * rhythm, then zeroes it on `:last-child`. In a flex row that is fatal: the
   * row stretches every item to `line cross size - own margins`, so the first
   * two pills lost 8px to margin while the last -- with no margin to lose --
   * swallowed it back as 8px of extra height. The third pill rendered taller
   * than its two siblings for no visible reason.
   *
   * The row already spaces itself with `gap` on .tm-home-hero__stats, so the
   * margin is redundant here. Neutralising it restores equal box heights at
   * every breakpoint, including where the pills wrap on mobile.
   */
  margin-bottom: 0;
  transition:
    border-color var(--ui-transition),
    transform var(--ui-transition);
}

.tm-home-hero__stat:hover {
  border-color: var(--ui-border-gold);
  transform: translateY(-2px);
}

/*
 * Hero stat pills.
 *
 * The three modifiers still carry their names from the retired wine-and-gold
 * palette (--gold, --wine, --plum). Only two of them were repainted when the
 * site was rebranded to emerald: the star pill kept a pale mint wash
 * (--ui-accent-50) with dark teal glyph, while the cube and check rendered
 * solid emerald with white glyphs. The three stats sit abreast in one row and
 * read as a single set, so the star looked like a hole punched in it, and the
 * two solid pills differed from each other in shade.
 *
 * All three now share one solid emerald pill with a white glyph. The modifiers
 * are kept as hooks -- a future palette can vary them again without touching
 * the markup.
 */
.tm-home-hero__stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--ui-radius-pill);
  flex: 0 0 auto;
  background: var(--ui-primary);
  color: #ffffff;
}

.tm-home-hero__stat-icon--gold,
.tm-home-hero__stat-icon--wine,
.tm-home-hero__stat-icon--plum {
  background: var(--ui-primary);
  color: #ffffff;
}

.tm-home-hero__stat-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  font-size: var(--text-xs);
  color: var(--ui-text-muted);
}

.tm-home-hero__stat-text strong {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--ui-text-headings);
}

/* The old gradient blobs no longer belong on a light panel. */
.tm-home-hero__decorations {
  display: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  .tm-home-hero__content-inner {
    border-inline-start-width: 3px;
    padding: var(--space-5);
  }

  .tm-home-hero__stats {
    gap: var(--space-2);
  }

  .tm-home-hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
}
/*
 * The secondary hero CTA was present in the markup but painted
 * invisible on the light card: earlier dark-hero rules had forced it
 * to a white fill and white text. Reasserted here so both actions
 * read as a solid/outline pair against the white panel.
 */
.tm-home-hero__actions .btn-accent {
  background: transparent !important;
  background-image: none !important;
  border: 1.5px solid var(--ui-primary) !important;
  color: var(--ui-primary) !important;
  box-shadow: none !important;
  opacity: 1;
}

.tm-home-hero__actions .btn-accent:hover {
  background: var(--ui-surface-tertiary) !important;
  border-color: var(--ui-primary-dark) !important;
  color: var(--ui-primary-dark) !important;
  opacity: 1;
}

/* =========================================================
   INNER PAGE HERO — unified with the home hero

   Self-evaluation found a regression: the home hero was rebuilt on
   the light, airy treatment while about/services/packages/contact/
   blog kept the dark wine band. Two hero treatments on one site is
   worse than either alone, so the light treatment is applied to
   every inner hero here.

   Same device as the home hero: faint grid, soft brand bloom,
   white content card with a wine start-edge border, and the gold
   accent reserved for the heading accent only.
   ========================================================= */

.page-hero-dark {
  position: relative;
  overflow: hidden;
  background: #faf7f8 !important;
  background-image: none !important;
  color: var(--ui-text-primary);
  isolation: isolate;
}

/* Faint grid, matching the home hero. */
.page-hero-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, rgba(18, 45, 38, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18, 45, 38, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
  pointer-events: none;
}

/* Soft brand bloom. */
.page-hero-dark::after {
  content: "";
  position: absolute;
  inset-block-start: -20%;
  inset-inline-start: -10%;
  width: 42rem;
  height: 42rem;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(18, 45, 38, 0.09) 0%,
    rgba(18, 45, 38, 0.05) 42%,
    rgba(18, 45, 38, 0) 70%
  );
  pointer-events: none;
}

.page-hero-dark > .container {
  position: relative;
  z-index: 1;
}

/* ---------- Inner hero content ---------- */

.page-hero-dark .page-hero-title,
.about-hero .page-hero-title,
.services-archive .page-hero-title {
  color: var(--ui-primary-dark);
}

.page-hero-dark .page-hero-title span,
.about-hero .page-hero-title span {
  color: var(--ui-accent-ink);
}

/* Gold rule under the heading, on the start edge. */
.page-hero-dark .page-hero-title::before,
.about-hero .page-hero-title::before,
.services-archive .page-hero-title::before {
  background: var(--ui-accent);
}

/* Any CTA in an inner hero now sits on light. */
.page-hero-dark .btn-primary,
.page-hero-dark .btn-accent {
  box-shadow: none;
}

.page-hero-dark .btn-primary {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: #ffffff;
}

.page-hero-dark .btn-accent {
  background: transparent;
  border: 1.5px solid var(--ui-primary);
  color: var(--ui-primary);
}

@media (max-width: 640px) {
  .page-hero-dark {
    padding-block: 3rem 3.5rem;
  }
}

/* =========================================================
   HERO EYEBROW — legible on the light panel

   Self-evaluation found the label effectively invisible: an
   earlier dark-hero rule gave it a translucent white fill and
   white text, which disappears once the panel turned light. It is
   now a solid gold-tinted pill with ink text, matching the pill
   treatment used on the reference site.
   ========================================================= */

.page-hero-dark .page-hero-label,
.about-hero .page-hero-label,
.services-archive .page-hero-label,
.contact-hero .page-hero-label,
.service-detail-hero .page-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 34px;
  padding: 0.35rem 0.9rem;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-accent-50) !important;
  border: 1px solid var(--ui-border-gold) !important;
  color: var(--ui-accent-ink) !important;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-4);
}

.page-hero-dark .page-hero-label::before,
.about-hero .page-hero-label::before,
.services-archive .page-hero-label::before {
  content: "";
  display: block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--ui-accent);
}

/* Subtitle was too pale against the light panel. */
.page-hero-dark .page-hero-subtitle,
.about-hero .page-hero-subtitle,
.services-archive .page-hero-subtitle {
  color: var(--ui-text-secondary) !important;
}

/* =========================================================
   SERVICE + PACKAGE CARDS — reference anatomy, this site's palette

   Studied the reference build's card anatomy rather than its colours.
   Its structural devices are:

     - soft tinted card background with a matching hairline border
       (pastel mint/blue/peach/lavender) instead of plain white
     - icon tile: small rounded square, white, centred
     - centred title and body copy
     - full-width pill CTA at the foot with a trailing arrow
     - on the numbered variant, a badge sitting ON the top edge
       of the card rather than inside it

   Applied here in wine, plum and gold. The card artwork is kept:
   every service has a real photograph, which is this site's asset
   and the reference does not use imagery here.
   ========================================================= */

/* Tinted card cycle — the same rotation idea, in brand hues. */
.services-archive .service-card,
.tm-home-services .tm-home-service-card,
.tm-home-packages .tm-home-package-card,
.services-archive .tm-home-package-card {
  --card-tint: 241 249 245;
  --card-edge: rgba(var(--ui-primary-rgb), 0.14);
  background: rgb(var(--card-tint));
  border-color: var(--card-edge);
  border-radius: var(--ui-radius-xl);
  box-shadow: var(--ui-elev-1);
  overflow: hidden;
  padding: 0;
  transition:
    box-shadow var(--ui-transition),
    transform var(--ui-transition),
    border-color var(--ui-transition);
}

.services-archive .service-card:nth-child(4n + 2),
.tm-home-services .tm-home-service-card:nth-child(4n + 2),
.tm-home-packages .tm-home-package-card:nth-child(4n + 2) {
  --card-tint: 236 248 244;
  --card-edge: rgba(var(--ui-accent-rgb), 0.20);
}

.services-archive .service-card:nth-child(4n + 3),
.tm-home-services .tm-home-service-card:nth-child(4n + 3),
.tm-home-packages .tm-home-package-card:nth-child(4n + 3) {
  --card-tint: 245 250 240;
  --card-edge: rgba(var(--ui-primary-rgb), 0.12);
}

.services-archive .service-card:nth-child(4n),
.tm-home-services .tm-home-service-card:nth-child(4n),
.tm-home-packages .tm-home-package-card:nth-child(4n) {
  --card-tint: 240 247 242;
  --card-edge: rgba(var(--ui-accent-rgb), 0.16);
}

.services-archive .service-card:hover,
.tm-home-services .tm-home-service-card:hover,
.tm-home-packages .tm-home-package-card:hover {
  background: #ffffff;
  border-color: var(--ui-border-gold);
  box-shadow: var(--ui-elev-4);
  transform: translateY(-5px);
}

/* ---------- Artwork ---------- */

.services-archive .service-card-image,
.tm-home-service-card__image,
.tm-home-package-card__image {
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--card-edge);
  background: #ffffff;
}

/* ---------- Number badge on the top edge ---------- */

/*
 * The reference parks the numeral half-over the card border. It reads
 * as an index without stealing a content row.
 */
.services-archive .service-card,
.tm-home-services .tm-home-service-card {
  position: relative;
}

.services-archive .service-card::after,
.tm-home-services .tm-home-service-card::after {
  content: attr(data-index);
  position: absolute;
  inset-block-start: -14px;
  inset-inline-start: var(--space-5);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding-inline: 0.45rem;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-primary);
  color: #ffffff;
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 12px rgba(18, 45, 38, 0.28);
}

/* Space for the badge so it never clips the card top. */
.services-archive .services-grid,
.tm-home-services .tm-home-services-grid {
  padding-block-start: 18px;
}

/* ---------- Centred body ---------- */

.services-archive .service-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--ui-card-padding);
  align-items: center;
  text-align: center;
  flex: 1 1 auto;
}

.services-archive .service-card-title,
.tm-home-service-card__title,
.tm-home-package-card__body h3 {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--leading-snug);
  margin: 0;
  color: var(--ui-primary-dark);
  text-align: center;
}

.services-archive .service-card-excerpt,
.tm-home-service-card__excerpt,
.tm-home-package-card__body > p {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--ui-text-secondary);
  margin: 0;
  text-align: center;
  -webkit-line-clamp: 3;
}

/* ---------- Price, centred ---------- */

.services-archive .service-card-pricing,
.tm-home-service-card__footer,
.tm-package-card__pricing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--card-edge);
}

.services-archive .service-card-price,
.tm-home-service-card__price,
.tm-package-card__price {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.15;
  color: var(--ui-primary);
  margin: 0;
}

.services-archive .service-card-price-hint,
.tm-home-service-card__hint,
.tm-package-card__from {
  font-size: var(--text-xs);
  color: var(--ui-text-muted);
  margin: 0;
}

/* ---------- Full-width pill CTA ---------- */

.services-archive .service-card-cta,
.tm-home-service-card__link,
.tm-home-package-card__link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--ui-tap-min);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--ui-radius-pill) !important;
  background: var(--ui-primary) !important;
  background-image: none !important;
  border: 1px solid var(--ui-primary) !important;
  color: #ffffff !important;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  text-align: center;
  box-shadow: none;
  transition:
    background-color var(--ui-transition),
    transform var(--ui-transition);
}

.services-archive .service-card-cta:hover,
.tm-home-service-card__link:hover,
.tm-home-package-card__link:hover {
  background: var(--ui-primary-dark) !important;
  border-color: var(--ui-primary-dark) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* Arrow sits at the leading edge, as on the reference. */
.services-archive .service-card-cta span,
.tm-home-service-card__link span,
.tm-home-package-card__link span {
  transition: transform var(--ui-transition);
}

.services-archive .service-card:hover .service-card-cta span,
.tm-home-services .tm-home-service-card:hover .tm-home-service-card__link span {
  transform: translateX(-4px);
}

[dir="ltr"] .services-archive .service-card:hover .service-card-cta span {
  transform: translateX(4px);
}

/* ---------- Grids ---------- */

.services-archive .services-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--space-5) !important;
}

.tm-home-services .tm-home-services-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--space-5) !important;
}

@media (max-width: 1100px) {
  .services-archive .services-grid,
  .tm-home-services .tm-home-services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  .services-archive .services-grid,
  .tm-home-services .tm-home-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .services-archive .services-grid,
  .tm-home-services .tm-home-services-grid {
    grid-template-columns: 1fr !important;
  }

  .services-archive .service-card::after,
  .tm-home-services .tm-home-service-card::after {
    inset-inline-start: var(--space-4);
  }
}

/* =========================================================
   CARD CONSISTENCY

   The home service cards carried two badge chips ("خدمة متكاملة"
   / "تسليم كامل") that the identical cards on /services/ did not.
   The same card type rendered two different ways depending on the
   page, and the reference build uses no such chips. Removed so the
   card is identical everywhere: number badge, artwork, title,
   excerpt, price, CTA.
   ========================================================= */

.tm-home-services .tm-home-service-card__top,
.services-archive .service-card__top {
  display: none !important;
}

/* =========================================================
   SERVICE + PACKAGE CARDS — height, index badge, tint parity

   1. BADGE CLIPPED. The index badge is parked on the card's top
      edge, but the card carries overflow: hidden to clip its
      artwork, which sliced the badge in half. The card now clips
      nothing; the image wrapper does its own clipping, so the
      artwork stays rounded and the badge stays whole.

   2. HEIGHT. At 16:10 the artwork plus body pushed cards past
      500px and rows read as slabs. Shortened to 3:2 with tighter
      body padding, which brings a row to roughly 430px.

   3. TINT PARITY. Packages were picking up a different tint
      cycle from services, so the two lists did not read as one
      set. Both now use the same four brand hues.
   ========================================================= */

.services-archive .service-card,
.tm-home-services .tm-home-service-card,
.tm-home-packages .tm-home-package-card,
.services-archive .tm-home-package-card {
  /* Badge needs to escape the card edge. */
  overflow: visible;
  background: var(--card-tint, #f1f9f5);
}

.services-archive .service-card-image,
.tm-home-service-card__image,
.tm-home-package-card__image {
  overflow: hidden;
  border-radius: var(--ui-radius-xl) var(--ui-radius-xl) 0 0;
}

/* Shorter artwork, tighter body. */
.services-archive .service-card-image,
.tm-home-service-card__image,
.tm-home-package-card__image {
  aspect-ratio: 3 / 2;
}

.services-archive .service-card-body,
.tm-home-services .tm-home-service-card__body,
.tm-home-packages .tm-home-package-card__body {
  padding: var(--space-4) var(--ui-card-padding) var(--ui-card-padding);
  gap: var(--space-2);
}

.services-archive .service-card-excerpt,
.tm-home-service-card__excerpt,
.tm-home-packages .tm-home-package-card__body > p {
  -webkit-line-clamp: 2;
  min-height: calc(2 * 1.7 * var(--text-sm));
  margin: 0;
}

.services-archive .service-card-footer,
.tm-home-service-card__footer,
.tm-package-card__pricing {
  padding-top: var(--space-3);
  margin-top: var(--space-2);
}

/* CTA sits tighter to the price. */
.services-archive .service-card-cta,
.tm-home-service-card__link,
.tm-home-package-card__link {
  margin-top: var(--space-3);
  min-height: 40px;
  padding: var(--space-2) var(--space-5);
}

/* Index badge: fully visible, sitting on the edge. */
.services-archive .service-card::after,
.tm-home-services .tm-home-service-card::after,
.tm-home-packages .tm-home-package-card::after {
  inset-block-start: -15px;
  inset-inline-start: var(--space-5);
  min-width: 32px;
  height: 32px;
  font-size: var(--text-xs);
  overflow: visible;
}

/* Packages share the services tint cycle. */
.tm-home-packages .tm-home-package-card:nth-child(4n + 1) {
  --card-tint: 241 249 245;
  --card-edge: rgba(var(--ui-primary-rgb), 0.14);
}

.tm-home-packages .tm-home-package-card:nth-child(4n + 2) {
  --card-tint: 236 248 244;
  --card-edge: rgba(var(--ui-accent-rgb), 0.20);
}

.tm-home-packages .tm-home-package-card:nth-child(4n + 3) {
  --card-tint: 245 250 240;
  --card-edge: rgba(var(--ui-primary-rgb), 0.12);
}

.tm-home-packages .tm-home-package-card:nth-child(4n) {
  --card-tint: 240 247 242;
  --card-edge: rgba(var(--ui-accent-rgb), 0.16);
}

@media (max-width: 560px) {
  .services-archive .service-card::after,
  .tm-home-services .tm-home-service-card::after,
  .tm-home-packages .tm-home-package-card::after {
    inset-inline-start: var(--space-4);
  }
}

/*
 * Tint cycle, scoped by the grid rather than by a page wrapper.
 * The previous selectors required a .tm-home-packages ancestor,
 * which only exists on the home page, so every package on
 * /packages/ fell back to the same tint and the list read flat.
 */
.tm-home-packages-grid .tm-home-package-card:nth-child(4n + 1) {
  --card-tint: 241 249 245;
  --card-edge: rgba(var(--ui-primary-rgb), 0.14);
}

.tm-home-packages-grid .tm-home-package-card:nth-child(4n + 2) {
  --card-tint: 236 248 244;
  --card-edge: rgba(var(--ui-accent-rgb), 0.20);
}

.tm-home-packages-grid .tm-home-package-card:nth-child(4n + 3) {
  --card-tint: 245 250 240;
  --card-edge: rgba(var(--ui-primary-rgb), 0.12);
}

.tm-home-packages-grid .tm-home-package-card:nth-child(4n) {
  --card-tint: 240 247 242;
  --card-edge: rgba(var(--ui-accent-rgb), 0.16);
}

/* =========================================================
   CARD HEIGHT PARITY

   Cards were sized by their own content, so a two-line title
   pushed that card's price and CTA lower than its neighbours
   and the row lost its baseline. Three changes make the row
   uniform regardless of title length:

     1. the grid stretches and the card fills its track
     2. the title always reserves two lines, so short and long
        titles occupy the same space
     3. the price and CTA are pushed to the bottom with
        margin-top: auto, so they sit on one line across the row
   ========================================================= */

.services-archive .services-grid,
.tm-home-services .tm-home-services-grid,
.tm-home-packages .tm-home-packages-grid {
  align-items: stretch !important;
}

.services-archive .service-card,
.tm-home-services .tm-home-service-card,
.tm-home-packages .tm-home-package-card {
  height: 100%;
  height: calc(100% - 18px);
  display: flex !important;
  flex-direction: column;
}

/* The artwork keeps a fixed ratio so rows start level. */
.services-archive .service-card-image,
.tm-home-service-card__image,
.tm-home-package-card__image {
  flex: 0 0 auto;
  aspect-ratio: 3 / 2;
}

/* Two reserved lines for every title. */
.services-archive .service-card-title,
.tm-home-service-card__title,
.tm-home-packages .tm-home-package-card__body h3 {
  min-height: calc(2 * 1.45 * var(--text-lg));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.services-archive .service-card-body,
.tm-home-service-card__body,
.tm-home-package-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Price + CTA anchored to the bottom of the card. */
.services-archive .service-card-footer,
.tm-home-service-card__footer,
.tm-home-package-card__pricing {
  margin-top: auto;
}

.services-archive .service-card-excerpt,
.tm-home-service-card__excerpt,
.tm-home-package-card__body > p {
  flex: 0 0 auto;
  -webkit-line-clamp: 2;
  min-height: calc(2 * 1.7 * var(--text-sm));
}

/* =========================================================
   PACKAGE / SERVICE LIST PARITY

   Side-by-side comparison showed the two lists reading as
   different products:

     - packages ran 3 columns where services ran 4
     - package cards carried two chip rows ("باقة متكاملة" and
       "4 خطط") that service cards never had
     - package cards had square top corners
     - the index badge did not sit on the top edge

   The chip markup is removed from the template so both lists
   carry the same anatomy, and the remaining differences are
   mapped onto the service card values.
   ========================================================= */

/*
 * Only the stretch is set here. The column count and gap are owned by the
 * grids block above, which carries the 4 / 3 / 2 / 1 responsive ladder.
 * Repeating the four-column value here pinned /services/ at four columns on
 * every viewport because this later declaration won the cascade outright.
 */
.services-archive .services-grid,
.tm-home-packages-grid {
  align-items: stretch !important;
}

/* Rounded top corners, matching the service card. */
.tm-home-packages .tm-home-package-card,
.services-archive .tm-home-package-card {
  border-radius: var(--ui-radius-xl) !important;
  overflow: visible;
}

/* Index badge on the top edge, same as service cards. */
.tm-home-packages .tm-home-package-card::after,
.services-archive .tm-home-package-card::after {
  content: attr(data-index) !important;
  position: absolute;
  inset-block-start: -15px;
  inset-inline-start: var(--space-5);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding-inline: 0.45rem;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-primary);
  color: #ffffff;
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 12px rgba(18, 45, 38, 0.28);
  white-space: nowrap;
}

/* Artwork keeps the same frame and radius as the service card. */
.tm-home-packages .tm-home-package-card__image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--ui-radius-xl) var(--ui-radius-xl) 0 0;
  background: #ffffff;
}

/* Uniform internal rhythm. */
.tm-home-packages .tm-home-package-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--space-4) var(--ui-card-padding) var(--ui-card-padding);
  gap: var(--space-2);
  text-align: center;
}

.tm-home-packages .tm-home-package-card__body h3 {
  min-height: calc(2 * 1.45 * var(--text-lg));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: 1.45;
  color: var(--ui-primary-dark);
}

.tm-home-packages .tm-home-package-card__body > p {
  -webkit-line-clamp: 2;
  min-height: calc(2 * 1.7 * var(--text-sm));
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--ui-text-secondary);
  overflow: hidden;
}

.tm-home-packages .tm-package-card__pricing {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--card-edge, var(--ui-card-border));
}

@media (max-width: 1100px) {
  .tm-home-packages-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 820px) {
  .tm-home-packages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 560px) {
  .tm-home-packages-grid { grid-template-columns: 1fr !important; }
}

/*
 * Column parity with the service list. A three-column rule was still
 * winning the cascade on /packages/, so the grid is pinned at higher
 * specificity rather than competing with another !important.
 */
.page .tm-home-packages-grid,
main .tm-home-packages-grid,
.tm-home-packages .tm-home-packages-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 1100px) {
  .page .tm-home-packages-grid,
  main .tm-home-packages-grid,
  .tm-home-packages .tm-home-packages-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  .page .tm-home-packages-grid,
  main .tm-home-packages-grid,
  .tm-home-packages .tm-home-packages-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   PACKAGE LIST — badge visibility + stronger tints

   1. BADGE HIDDEN. data-index renders correctly, but the badge sat
      underneath the artwork: the image wrapper is painted after it
      in stacking order and the card had no stacking context of its
      own. The card now establishes one and the badge is lifted
      above the artwork.

   2. TINTS TOO WEAK. The four brand hues were only a few percent
      apart, so four cards read as the same colour. The tints are
      now clearly distinct while staying in the wine-to-gold family.
   ========================================================= */

.tm-home-packages .tm-home-package-card,
.services-archive .tm-home-package-card {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.tm-home-packages .tm-home-package-card::after,
.services-archive .tm-home-package-card::after {
  content: attr(data-index);
  position: absolute;
  top: -15px;
  inset-inline-start: var(--space-5);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding-inline: 0.5rem;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-primary);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 5px 14px rgba(var(--ui-primary-rgb), 0.32);
}

/* Artwork drops below the badge in the stack. */
.tm-home-packages .tm-home-package-card__image {
  position: relative;
  z-index: 1;
}

/* Clearly separated tints. */
.tm-home-packages-grid .tm-home-package-card:nth-child(4n + 1),
.services-archive .tm-home-packages-grid .tm-home-package-card:nth-child(4n + 1) {
  --card-tint: 250 238 244;
  --card-edge: rgba(18, 45, 38, 0.22);
}

.tm-home-packages-grid .tm-home-package-card:nth-child(4n + 2),
.services-archive .tm-home-packages-grid .tm-home-package-card:nth-child(4n + 2) {
  --card-tint: 253 245 226;
  --card-edge: rgba(18, 45, 38, 0.28);
}

.tm-home-packages-grid .tm-home-package-card:nth-child(4n + 3),
.services-archive .tm-home-packages-grid .tm-home-package-card:nth-child(4n + 3) {
  --card-tint: 243 238 248;
  --card-edge: rgba(18, 45, 38, 0.24);
}

.tm-home-packages-grid .tm-home-package-card:nth-child(4n),
.services-archive .tm-home-packages-grid .tm-home-package-card:nth-child(4n) {
  --card-tint: 252 240 240;
  --card-edge: rgba(15, 169, 107, 0.2);
}

.tm-home-packages .tm-home-package-card,
.services-archive .tm-home-package-card {
  background: var(--card-tint, #f1f9f5);
}

/* =========================================================
   PACKAGE CARD — corrected selectors

   Root cause of the missing badge and washed-out tints: every
   rule was scoped to a ".tm-home-packages" ancestor. That class
   only exists on the HOME page — the packages page wraps its
   grid in ".packages-section". So on /packages/ every badge and
   tint rule was silently dropped.

   These rules are anchored to the card and grid classes, which
   are identical on both pages, so they now apply everywhere.
   ========================================================= */

.tm-home-packages-grid .tm-home-package-card,
.packages-section .tm-home-package-card {
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: var(--card-tint, #f1f9f5);
  border: 1px solid var(--card-edge, var(--ui-card-border));
  border-radius: var(--ui-radius-xl);
}

.tm-home-packages-grid .tm-home-package-card::after,
.packages-section .tm-home-package-card::after {
  content: attr(data-index);
  position: absolute;
  top: -15px;
  inset-inline-start: var(--space-5);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding-inline: 0.5rem;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-primary);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 5px 14px rgba(var(--ui-primary-rgb), 0.32);
}

/*
 * Tint cycle keyed to the grid, valid on both pages. These sit at a higher
 * specificity than the archive-level cycle above, so they were the values that
 * actually painted the package cards — which is why recolouring the other block
 * alone changed nothing.
 */
.tm-home-packages-grid .tm-home-package-card:nth-child(4n + 1) { --card-tint: 241 249 245; --card-edge: rgba(var(--ui-primary-rgb), 0.22); }
.tm-home-packages-grid .tm-home-package-card:nth-child(4n + 2) { --card-tint: 236 248 244; --card-edge: rgba(var(--ui-accent-rgb), 0.26); }
.tm-home-packages-grid .tm-home-package-card:nth-child(4n + 3) { --card-tint: 245 250 240; --card-edge: rgba(var(--ui-primary-rgb), 0.18); }
.tm-home-packages-grid .tm-home-package-card:nth-child(4n)     { --card-tint: 240 247 242; --card-edge: rgba(var(--ui-accent-rgb), 0.20); }

/* =========================================================
   DETAIL HERO — service & package

   Adapted from the reference single-package layout: an immersive
   hero carrying the artwork, centred copy, a primary and a
   ghost action, and a row of proof cards that break out of the
   hero's bottom edge. That overlap is the signature move of that
   design and is what gives the page its depth.

   The service page keeps the price in that row; the package page
   adds the plans block beneath it.
   ========================================================= */

.tm-sd-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ui-hero-bg);
  /* Extra headroom: the title was clipping against the navbar. */
  padding-block: clamp(4rem, 9vw, 7rem) 0;
}

.tm-sd-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.tm-sd-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Dark veil keeps the copy legible over any artwork. */
.tm-sd-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgba(var(--color-primary-rgb), 0.7) 0%,
      rgba(18, 45, 38, 0.75) 55%,
      rgba(var(--color-primary-rgb), 0.85) 100%
    );
}

/*
 * A package can carry its own hero photograph, picked in the editor. The
 * picture is the backdrop and the brand gradient is laid over it at partial
 * opacity, so the band keeps the palette's colour instead of turning into a
 * stock photo. This is the only difference from the featured-image hero: same
 * markup, same layers, a looser scrim.
 *
 * `--tm-hero-veil` is written inline by single-tm_package.php from the
 * per-package setting (0.25 / 0.55 / 0.75).
 *
 * The setting is not the alpha. This hero carries a large H1, a breadcrumb and
 * a stat row straight over the photograph, and the front-page values that look
 * right behind a headline are far too thin here -- a bright sky at 0.55 leaves
 * white text unreadable. So the setting picks a point on the scale and the floor
 * below lifts it into a usable band: 0.25 / 0.55 / 0.75 land at roughly 0.55 /
 * 0.71 / 0.81 of the tint.
 *
 * The stops barely ramp because there is no quiet corner to fade into -- title
 * above, stat cards in the middle and buttons below all sit on the picture. The
 * gentle deepening at the bottom only grounds the buttons; the top is left
 * marginally lighter so the breadcrumb does not sit on a flat slab.
 *
 * The tint matches professional.css's scrim (#034d31, the darkest step of the
 * brand ramp) so a photo hero still reads as brand rather than as stock. The
 * default is declared here as well so the band is correct even if the class is
 * ever applied without the inline property.
 *
 * Scoped to the modifier rather than to `.tm-sd-hero__veil` itself: that class
 * also serves the featured-image hero, and loosening its scrim globally would
 * wash out the service pages as well.
 */
.tm-sd-hero--has-bg {
  --tm-hero-veil: 0.55;
  --tm-veil-base: calc(0.42 + var(--tm-hero-veil) * 0.52);
}

.tm-sd-hero--has-bg .tm-sd-hero__veil {
  background: linear-gradient(
    180deg,
    rgba(3, 77, 49, calc(var(--tm-veil-base) * 0.92)) 0%,
    rgba(3, 77, 49, var(--tm-veil-base)) 50%,
    rgba(3, 77, 49, calc(var(--tm-veil-base) * 1.06)) 100%
  );
}

.tm-sd-hero .container {
  position: relative;
  z-index: 1;
  text-align: center;
}

.tm-sd-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.7);
}

.tm-sd-breadcrumb a {
  color: var(--ui-accent-light);
}

.tm-sd-hero__title {
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  line-height: 1.22;
  margin: 0 0 var(--space-4);
  color: #ffffff;
  text-wrap: balance;
}

.tm-sd-hero__text {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.88);
  max-width: 58ch;
  margin: 0 auto var(--space-6);
}

.tm-sd-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* Ghost action, matching the reference's glass button. */
.tm-sd-hero__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--ui-tap-min);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--ui-radius-pill);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  transition:
    background-color var(--ui-transition),
    border-color var(--ui-transition),
    transform var(--ui-transition);
}

.tm-sd-hero__link:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #ffffff;
  transform: translateY(-2px);
}

/* ---------- Proof cards breaking the hero edge ---------- */

.tm-sd-stats {
  position: relative;
  z-index: 2;
  margin-top: clamp(2rem, 4vw, 3.25rem);
}

.tm-sd-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tm-sd-stat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-elev-4);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.tm-sd-stat__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ui-radius-pill);
  color: var(--ui-primary);
  background: var(--ui-surface-tertiary);
}

.tm-sd-stat--price .tm-sd-stat__icon {
  color: var(--ui-accent-ink);
  background: var(--ui-accent-50);
}

.tm-sd-stat__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.tm-sd-stat__body strong {
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  color: var(--ui-primary-dark);
  white-space: nowrap;
}

.tm-sd-stat__body em {
  font-style: normal;
  font-size: var(--text-xs);
  color: var(--ui-text-muted);
}

/* Pull the body clear of the overlapping row. */
.single-tm_service .service-detail-section:first-of-type,
.single-tm_package .service-detail-section:first-of-type {
  padding-top: clamp(4.5rem, 7vw, 6rem);
}

@media (max-width: 900px) {
  .tm-sd-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .tm-sd-stats__grid {
    grid-template-columns: 1fr;
  }

  .tm-sd-hero__actions {
    flex-direction: column;
  }

  .tm-sd-hero__actions > * {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   DETAIL PAGE — two-column intro

   Eyebrow pill, large heading, copy, check list, artwork
   opposite. In RTL the copy sits on the start edge and the
   artwork on the far side.
   ========================================================= */

.tm-sd-why {
  background: var(--ui-surface-primary);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.tm-sd-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.tm-sd-why__title {
  font-size: clamp(1.5rem, 3.2vw, 2.35rem);
  line-height: 1.28;
  margin: 0 0 var(--space-4);
  color: var(--ui-text-headings);
  text-wrap: balance;
}

.tm-sd-why__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--ui-text-secondary);
  margin: 0 0 var(--space-5);
  max-width: 62ch;
}

.tm-sd-why__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.tm-sd-why-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--ui-border-light);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-elev-1);
  transition: transform var(--ui-transition), box-shadow var(--ui-transition), border-color var(--ui-transition);
}

.tm-sd-why-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ui-elev-2);
  border-color: var(--ui-primary-200);
}

.tm-sd-why-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: var(--ui-accent-ink);
  background: var(--ui-accent-50);
}

.tm-sd-why-card__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--ui-text-primary);
  font-weight: var(--fw-medium);
}

.tm-sd-why__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--ui-radius-xl);
  aspect-ratio: 4 / 3;
  background: var(--ui-surface-tertiary);
  box-shadow: var(--ui-elev-3);
}

.tm-sd-why__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tm-sd-why__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--ui-primary-200);
}

@media (max-width: 860px) {
  .tm-sd-why__grid {
    grid-template-columns: 1fr;
  }

  .tm-sd-why__media {
    order: -1;
  }
}

/*
 * The intro lost its image (the hero already carries the only featured
 * image), but the grid stayed two columns, so the second track rendered
 * as an empty band down the left of the page. With one child the grid
 * collapses to a single centred column.
 */
.tm-sd-why__grid {
  grid-template-columns: minmax(0, 1fr);
  max-width: 56rem;
  margin-inline: auto;
}

.tm-sd-why__content {
  text-align: start;
}

/* =========================================================
   SINGLE SERVICE — section scale + spacing

   Three problems visible in a full-page render:

   1. HEADING SCALE. The "معلومات إضافية" heading rendered far larger
      than every other section heading on the page, so the page had
      two type scales at once. All service-page section headings now
      share one scale.
   2. ORPHAN SIDEBAR. The "تفاصيل الخدمة" card is short, so the
      sidebar column below it was empty space down the page. With the
      purchase form gone it carries only the duration, so it stops
      being a column.
   3. MEASURE. Body copy was running the full container width, which
      is too long a line for comfortable reading.
   ========================================================= */

.single-tm_service .service-section-heading,
.single-tm_service .service-additional-info .service-section-heading,
.single-tm_service .service-benefits .service-section-heading,
.single-tm_service .service-faq .service-section-heading {
  margin: 0 0 var(--space-5);
}

.single-tm_service .service-section-heading h2,
.single-tm_service .service-additional-info h2,
.single-tm_service .service-benefits h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem) !important;
  line-height: 1.3;
  color: var(--ui-text-headings);
  margin: 0;
}

.single-tm_service .service-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ui-accent-ink);
}

/* Sidebar no longer holds a column of content. */
/* Sidebar is back: it carries the restored price panel. */
.single-tm_service .service-detail-layout {
  grid-template-columns: minmax(0, 1fr) 320px !important;
}

/* Readable measure for the body copy. */
.single-tm_service .service-detail-content {
  max-width: 68ch;
  margin-inline: auto;
}

.single-tm_service .service-detail-content p {
  line-height: var(--leading-relaxed);
  color: var(--ui-text-secondary);
}

/* Info card and benefits cards share the section rhythm. */
.single-tm_service .service-additional-info,
.single-tm_service .service-benefits {
  padding-block: clamp(2rem, 4vw, 3rem);
}

.single-tm_service .service-additional-info__grid,
.single-tm_service .service-benefits-grid {
  max-width: 68rem;
  margin-inline: auto;
}

/*
 * The intro column is shorter than the sidebar column, and the grid
 * was centring its single child, which left a large empty band
 * between the check list and the next section. Aligning to the start
 * and letting the section size to the taller column removes it.
 */
.single-tm_service .tm-sd-why__grid {
  align-items: start;
}

.single-tm_service .tm-sd-why {
  padding-block: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.25rem);
}

/*
 * The hero stat cards already overlap into the flow, so the block
 * that follows carries their clearance. The intro was adding its
 * own bottom space on top of that, which opened a visible gap
 * between the check list and the service body.
 */
.single-tm_service .tm-sd-why {
  padding-block: clamp(2rem, 4vw, 3rem) 0;
}

.single-tm_service .service-detail-section:first-of-type {
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
}

/* =========================================================
   SINGLE SERVICE — PREMIUM REDESIGN
   
   Floating sidebar, glassmorphism purchase card, glowing CTA,
   improved typography, micro-animations, and premium spacing.
   ========================================================= */

/* ---------- Scroll Animations ---------- */

@keyframes tm-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes tm-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes tm-pulse-glow {
  0%, 100% { box-shadow: 0 4px 20px rgba(var(--color-primary-rgb), 0.35); }
  50%      { box-shadow: 0 4px 32px rgba(var(--color-primary-rgb), 0.55); }
}

/* Apply animations to key sections */
.single-tm_service .tm-sd-hero .container {
  animation: tm-fade-up 0.7s ease-out both;
}

.single-tm_service .tm-sd-stats__grid {
  animation: tm-fade-up 0.8s ease-out 0.15s both;
}

.single-tm_service .tm-sd-why {
  animation: tm-fade-in 0.6s ease-out 0.25s both;
}

.single-tm_service .tm-sd-why-card {
  animation: tm-fade-up 0.5s ease-out both;
}

.single-tm_service .tm-sd-why-card:nth-child(1) { animation-delay: 0.1s; }
.single-tm_service .tm-sd-why-card:nth-child(2) { animation-delay: 0.2s; }
.single-tm_service .tm-sd-why-card:nth-child(3) { animation-delay: 0.3s; }
.single-tm_service .tm-sd-why-card:nth-child(4) { animation-delay: 0.4s; }

.single-tm_service .service-sidebar {
  animation: tm-slide-in-right 0.6s ease-out 0.3s both;
}

.single-tm_service .service-main {
  animation: tm-fade-up 0.6s ease-out 0.2s both;
}

/* ---------- Floating Purchase Card (Glassmorphism) ---------- */

.single-tm_service .service-purchase-card {
  position: sticky;
  inset-block-start: calc(var(--header-height, 80px) + 1rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--ui-radius-xl, 20px);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow:
    0 8px 32px rgba(var(--color-primary-rgb), 0.08),
    0 1px 3px rgba(var(--color-primary-rgb), 0.04);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.single-tm_service .service-purchase-card:hover {
  box-shadow:
    0 12px 40px rgba(var(--color-primary-rgb), 0.12),
    0 2px 6px rgba(var(--color-primary-rgb), 0.06);
  transform: translateY(-2px);
}

/* ---------- Price Display ---------- */

.single-tm_service .service-price-display {
  padding: var(--space-6, 1.5rem) var(--space-7, 2rem);
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.12);
  background:
    linear-gradient(
      135deg,
      rgba(var(--color-primary-rgb), 0.06) 0%,
      rgba(var(--color-accent-rgb), 0.04) 100%
    );
  text-align: center;
}

.single-tm_service .service-price-label {
  display: block;
  margin-bottom: var(--space-2, 0.5rem);
  color: var(--ui-text-muted, #64748b);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--fw-semibold, 600);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.single-tm_service .service-price-amount {
  color: var(--ui-primary, #0fa96b);
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.single-tm_service .service-price-amount .woocommerce-Price-currencySymbol {
  margin-inline-start: 6px;
  color: var(--ui-accent-ink, #2fbfa0);
  font-size: 0.5em;
  font-weight: 700;
}

/* ---------- Purchase Form ---------- */

.single-tm_service .service-purchase-form {
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem) var(--space-6, 1.5rem);
}

/*
 * The payment-option slab that used to live here targeted the per-tier plan
 * grid the service template rendered before it became a single purchase card.
 * That markup is gone, and the rules were strong enough to out-specify the new
 * `.tm-sd-pay-option__box`, so the card rendered as a box inside a box. The
 * rows are styled in professional.css alongside the card they belong to.
 */

/* ---------- Glowing CTA Button ---------- */

.single-tm_service .service-purchase-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  margin-top: var(--space-5, 1.25rem);
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  border: 0;
  border-radius: var(--ui-radius-pill, 100px);
  color: #ffffff;
  background: linear-gradient(135deg, var(--ui-primary, #0fa96b) 0%, var(--ui-primary-dark, #034d31) 100%);
  box-shadow: 0 4px 20px rgba(var(--color-primary-rgb), 0.35);
  cursor: pointer;
  font-size: var(--text-base, 1rem);
  font-weight: var(--fw-bold, 700);
  letter-spacing: 0.02em;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.single-tm_service .service-purchase-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(var(--color-primary-rgb), 0.5);
  background: linear-gradient(135deg, var(--ui-primary-dark, #034d31) 0%, var(--ui-primary, #0fa96b) 100%);
}

.single-tm_service .service-purchase-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 12px rgba(var(--color-primary-rgb), 0.3);
}

/* Subtle pulse animation on the button when idle */
.single-tm_service .service-purchase-button {
  animation: tm-pulse-glow 3s ease-in-out infinite;
}

.single-tm_service .service-purchase-button:hover {
  animation: none;
}

.single-tm_service .service-purchase-button svg {
  transition: transform 0.3s ease;
}

.single-tm_service .service-purchase-button:hover svg {
  transform: translateX(-4px);
}

/* ---------- Payment Provider Note ---------- */

.single-tm_service .payment-provider-note {
  margin-top: var(--space-4, 1rem);
  padding: var(--space-3, 0.75rem);
  border-radius: var(--ui-radius-md, 10px);
  background: rgba(var(--color-primary-rgb), 0.04);
  color: var(--ui-text-muted, #64748b);
  font-size: var(--text-xs, 0.75rem);
  text-align: center;
}

.single-tm_service .payment-provider-dot {
  background: var(--ui-accent-ink, #2fbfa0);
}

/* ---------- Unavailable Card ---------- */

.single-tm_service .service-unavailable {
  padding: var(--space-8, 2.5rem) var(--space-6, 1.5rem);
  text-align: center;
}

.single-tm_service .service-unavailable-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--space-4, 1rem);
  border-radius: 50%;
  color: var(--ui-accent-ink, #2fbfa0);
  background: rgba(var(--color-accent-rgb), 0.1);
}

/* ---------- Content Typography ---------- */

.single-tm_service .service-content-body {
  font-size: var(--text-base, 1rem);
  line-height: 1.85;
  color: var(--ui-text-secondary, #475569);
}

.single-tm_service .service-content-body h2 {
  margin-top: var(--space-8, 2.5rem);
  margin-bottom: var(--space-4, 1rem);
  color: var(--ui-text-headings, #0f172a);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: var(--fw-bold, 700);
  line-height: 1.3;
}

.single-tm_service .service-content-body h3 {
  margin-top: var(--space-6, 1.5rem);
  margin-bottom: var(--space-3, 0.75rem);
  color: var(--ui-text-headings, #0f172a);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: var(--fw-semibold, 600);
  line-height: 1.35;
}

.single-tm_service .service-content-body p {
  margin-bottom: var(--space-4, 1rem);
}

.single-tm_service .service-content-body ul,
.single-tm_service .service-content-body ol {
  padding-inline-start: 1.5rem;
  margin-bottom: var(--space-4, 1rem);
}

.single-tm_service .service-content-body li {
  margin-bottom: var(--space-2, 0.5rem);
  line-height: 1.8;
}

/* ---------- Section Blocks (Delivery, FAQ) ---------- */

.single-tm_service .service-detail-section-block {
  padding-block: var(--space-8, 2.5rem);
  border-top: 1px solid var(--ui-border-light, #e4ece9);
}

.single-tm_service .service-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin: 0 0 var(--space-2, 0.5rem);
  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  border-radius: var(--ui-radius-pill, 100px);
  color: var(--ui-primary, #0fa96b);
  background: rgba(var(--color-primary-rgb), 0.08);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--fw-semibold, 600);
}

.single-tm_service .service-section-title {
  color: var(--ui-text-headings, #0f172a);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: var(--fw-bold, 700);
  line-height: 1.3;
  margin: var(--space-2, 0.5rem) 0 0;
}

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

.single-tm_service .service-faq-item {
  border: 1px solid var(--ui-border-light, #e4ece9);
  border-radius: var(--ui-radius-lg, 14px);
  margin-bottom: var(--space-3, 0.75rem);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.6);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.single-tm_service .service-faq-item:hover {
  border-color: var(--ui-primary-200, #a3e3c4);
}

.single-tm_service .service-faq-item[open] {
  border-color: var(--ui-primary, #0fa96b);
  box-shadow: 0 2px 12px rgba(var(--color-primary-rgb), 0.08);
}

.single-tm_service .service-faq-item summary {
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  color: var(--ui-text-headings, #0f172a);
  font-weight: var(--fw-semibold, 600);
  font-size: var(--text-sm, 0.875rem);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}

.single-tm_service .service-faq-item summary::-webkit-details-marker {
  display: none;
}

.single-tm_service .service-faq-item summary::before {
  content: '+';
  float: inline-start;
  margin-inline-end: var(--space-3, 0.75rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  color: var(--ui-primary, #0fa96b);
  background: rgba(var(--color-primary-rgb), 0.08);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.3s ease, background 0.3s ease;
}

.single-tm_service .service-faq-item[open] summary::before {
  content: '−';
  background: var(--ui-primary, #0fa96b);
  color: #ffffff;
  transform: rotate(180deg);
}

.single-tm_service .service-faq-item > div {
  padding: 0 var(--space-5, 1.25rem) var(--space-5, 1.25rem);
  color: var(--ui-text-secondary, #475569);
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.8;
}

/* ---------- Breadcrumb Update ---------- */

.single-tm_service .tm-sd-breadcrumb a {
  color: var(--ui-accent-ink, #2fbfa0);
  font-weight: var(--fw-medium, 500);
  transition: color 0.2s ease;
}

.single-tm_service .tm-sd-breadcrumb a:hover {
  color: #ffffff;
}

/* ---------- Stat Card Price Accent ---------- */

.single-tm_service .tm-sd-stat--price {
  border-color: rgba(var(--color-primary-rgb), 0.2);
  background: rgba(255, 255, 255, 0.92);
}

.single-tm_service .tm-sd-stat--price .tm-sd-stat__body strong {
  color: var(--ui-primary, #0fa96b);
  font-size: var(--text-lg, 1.125rem);
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
  .single-tm_service .service-purchase-card {
    position: static;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #ffffff;
    border: 1px solid var(--ui-border-light, #e4ece9);
  }

  .single-tm_service .service-purchase-button {
    animation: none;
  }
}


/* =========================================================
   SINGLE SERVICE — NEW SECTIONS (Full Restructure)
   ========================================================= */

/* ---------- Shared Section Tokens ---------- */

.tm-sd-eyebrow {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  border-radius: var(--ui-radius-pill, 100px);
  color: var(--color-primary);
  background: var(--color-primary-soft);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--fw-semibold, 600);
  letter-spacing: 0.03em;
  margin-bottom: var(--space-3, 0.75rem);
}

.tm-sd-section-title {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: var(--fw-bold, 700);
  color: var(--color-text-primary);
  line-height: 1.3;
  margin: 0;
}

.tm-sd-section-header {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.tm-sd-section-header--center {
  text-align: center;
}


/* ---------- SECTION 2: Overview ---------- */

.tm-sd-overview {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--color-surface);
}

.tm-sd-overview__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.tm-sd-overview__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--ui-radius-xl, 20px);
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-md);
}

.tm-sd-overview__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.tm-sd-overview__media:hover .tm-sd-overview__img {
  transform: scale(1.03);
}

.tm-sd-overview__text {
  font-size: var(--text-base, 1rem);
  line-height: 1.85;
  color: var(--ui-text-secondary, #475569);
  margin: 0 0 var(--space-5, 1.25rem);
}

.tm-sd-overview__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3, 0.75rem);
}

.tm-sd-overview__features li {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-size: var(--text-sm, 0.875rem);
  color: var(--ui-text-primary, #1e293b);
  font-weight: var(--fw-medium, 500);
}

.tm-sd-overview__features svg {
  flex-shrink: 0;
  color: var(--ui-primary, #0fa96b);
}

/* Trust Row */
.tm-sd-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--ui-border-light, #e4ece9);
}

.tm-sd-trust__item {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--fw-medium, 500);
  color: var(--ui-text-secondary, #475569);
}

.tm-sd-trust__item svg {
  color: var(--ui-accent-ink, #2fbfa0);
}


/* ---------- SECTION 3: What's Included ---------- */

.tm-sd-included {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--ui-surface-secondary, #f8fafc);
}

.tm-sd-included__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4, 1rem);
}

.tm-sd-included-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-5, 1.25rem);
  background: #ffffff;
  border: 1px solid var(--ui-border-light, #e4ece9);
  border-radius: var(--ui-radius-lg, 14px);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.tm-sd-included-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), 0.08);
  border-color: var(--ui-primary-200, #a3e3c4);
}

.tm-sd-included-card__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: #ffffff;
  background: var(--ui-primary, #0fa96b);
}

.tm-sd-included-card__text {
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.6;
  color: var(--ui-text-primary, #1e293b);
  font-weight: var(--fw-medium, 500);
}


/* ---------- SECTION 4: Benefits ---------- */

.tm-sd-benefits {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--ui-surface-primary, #ffffff);
}

.tm-sd-benefits__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4, 1rem);
}

.tm-sd-benefit-card {
  padding: var(--space-6, 1.5rem);
  background: var(--ui-surface-secondary, #f8fafc);
  border: 1px solid var(--ui-border-light, #e4ece9);
  border-radius: var(--ui-radius-lg, 14px);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.tm-sd-benefit-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), 0.08);
  border-color: var(--ui-accent-ink, #2fbfa0);
}

.tm-sd-benefit-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-3, 0.75rem);
  border-radius: var(--ui-radius-lg, 14px);
  color: var(--ui-accent-ink, #2fbfa0);
  background: rgba(var(--color-accent-rgb), 0.1);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--fw-bold, 700);
}

.tm-sd-benefit-card__text {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.7;
  color: var(--ui-text-primary, #1e293b);
  font-weight: var(--fw-medium, 500);
}


/* ---------- SECTION 5: Process ---------- */

.tm-sd-process {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--gradient-dark);
  color: #ffffff;
}

.tm-sd-process .tm-sd-eyebrow {
  color: var(--color-accent);
  background: var(--color-accent-soft);
}

.tm-sd-process .tm-sd-section-title {
  color: #ffffff;
}

.tm-sd-process__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4, 1rem);
  position: relative;
}

.tm-sd-process__grid::before {
  content: '';
  position: absolute;
  top: 2.5rem;
  left: 10%;
  right: 10%;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  z-index: 0;
}

.tm-sd-process-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--space-5, 1.25rem);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--ui-radius-lg, 14px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.3s ease, background 0.3s ease;
}

.tm-sd-process-step:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.1);
}

.tm-sd-process-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-3, 0.75rem);
  border-radius: 50%;
  color: #ffffff;
  background: var(--ui-primary, #0fa96b);
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--fw-bold, 700);
  box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.4);
}

.tm-sd-process-step__content h3 {
  margin: 0 0 var(--space-2, 0.5rem);
  font-size: var(--text-base, 1rem);
  font-weight: var(--fw-semibold, 600);
  color: #ffffff;
}

.tm-sd-process-step__content p {
  margin: 0;
  font-size: var(--text-xs, 0.75rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
}


/* ---------- SECTION 6: Detail + Sidebar ---------- */

.tm-sd-detail {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--ui-surface-secondary, #f8fafc);
}

.tm-sd-delivery,
.tm-sd-requirements {
  margin-top: var(--space-8, 2.5rem);
  padding-top: var(--space-6, 1.5rem);
  border-top: 1px solid var(--ui-border-light, #e4ece9);
}

.tm-sd-delivery__content {
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.85;
  color: var(--ui-text-secondary, #475569);
}

.tm-sd-requirements__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3, 0.75rem);
}

.tm-sd-requirements__list li {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background: #ffffff;
  border: 1px solid var(--ui-border-light, #e4ece9);
  border-radius: var(--ui-radius-md, 10px);
  font-size: var(--text-sm, 0.875rem);
  color: var(--ui-text-primary, #1e293b);
}

.tm-sd-requirements__list li::before {
  content: '•';
  color: var(--ui-accent-ink, #2fbfa0);
  font-weight: 700;
  font-size: 1.2em;
}


/* ---------- SECTION 7: FAQ ---------- */

.tm-sd-faq {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--ui-surface-primary, #ffffff);
}

.tm-sd-faq__list {
  max-width: 48rem;
  margin-inline: auto;
}

.tm-sd-faq-item {
  border: 1px solid var(--ui-border-light, #e4ece9);
  border-radius: var(--ui-radius-lg, 14px);
  margin-bottom: var(--space-3, 0.75rem);
  overflow: hidden;
  background: var(--ui-surface-secondary, #f8fafc);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.tm-sd-faq-item:hover {
  border-color: var(--ui-primary-200, #a3e3c4);
}

.tm-sd-faq-item[open] {
  border-color: var(--ui-primary, #0fa96b);
  box-shadow: 0 2px 12px rgba(var(--color-primary-rgb), 0.08);
  background: #ffffff;
}

.tm-sd-faq-item summary {
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  color: var(--ui-text-headings, #0f172a);
  font-weight: var(--fw-semibold, 600);
  font-size: var(--text-sm, 0.875rem);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
}

.tm-sd-faq-item summary::-webkit-details-marker { display: none; }

.tm-sd-faq-item summary::before {
  content: '+';
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  color: var(--ui-primary, #0fa96b);
  background: rgba(var(--color-primary-rgb), 0.08);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.tm-sd-faq-item[open] summary::before {
  content: '−';
  background: var(--ui-primary, #0fa96b);
  color: #ffffff;
}

.tm-sd-faq-item__answer {
  padding: 0 var(--space-5, 1.25rem) var(--space-5, 1.25rem);
  padding-inline-start: calc(var(--space-5, 1.25rem) + 1.75rem + var(--space-3, 0.75rem));
  color: var(--ui-text-secondary, #475569);
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.85;
}


/* ---------- SECTION 8: Related Services ---------- */

.tm-sd-related {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--ui-surface-secondary, #f8fafc);
}

.tm-sd-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4, 1rem);
}

.tm-sd-related-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--ui-radius-xl, 20px);
  border: 1px solid var(--ui-border-light, #e4ece9);
  background: #ffffff;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.tm-sd-related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(var(--color-primary-rgb), 0.1);
  border-color: var(--ui-primary-200, #a3e3c4);
}

.tm-sd-related-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.tm-sd-related-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.tm-sd-related-card:hover .tm-sd-related-card__media img {
  transform: scale(1.05);
}

.tm-sd-related-card__body {
  padding: var(--space-5, 1.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
  flex: 1;
}

.tm-sd-related-card__title {
  margin: 0;
  font-size: var(--text-base, 1rem);
  font-weight: var(--fw-semibold, 600);
  color: var(--ui-text-headings, #0f172a);
  line-height: 1.4;
}

.tm-sd-related-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--fw-semibold, 600);
  color: var(--ui-primary, #0fa96b);
  margin-top: auto;
  transition: gap 0.3s ease;
}

.tm-sd-related-card:hover .tm-sd-related-card__link {
  gap: var(--space-3, 0.75rem);
}


/* ---------- SECTION 9: CTA Banner ---------- */

.tm-sd-cta {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--gradient-primary);
}

.tm-sd-cta__inner {
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
}

.tm-sd-cta__title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: var(--fw-bold, 700);
  color: #ffffff;
  margin: 0 0 var(--space-3, 0.75rem);
  line-height: 1.25;
}

.tm-sd-cta__text {
  font-size: var(--text-lg, 1.125rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 var(--space-6, 1.5rem);
}

.tm-sd-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3, 0.75rem);
}

.ab-btn--accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ui-tap-min, 48px);
  padding: var(--space-3, 0.75rem) var(--space-7, 2rem);
  border-radius: var(--ui-radius-pill, 100px);
  border: 0;
  color: #ffffff;
  background: var(--ui-accent-ink, #2fbfa0);
  font-weight: var(--fw-semibold, 600);
  font-size: var(--text-sm, 0.875rem);
  box-shadow: 0 4px 16px rgba(var(--color-accent-rgb), 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
}

.ab-btn--accent:hover {
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(var(--color-accent-rgb), 0.5);
}

.ab-btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ui-tap-min, 48px);
  padding: var(--space-3, 0.75rem) var(--space-7, 2rem);
  border-radius: var(--ui-radius-pill, 100px);
  border: 0;
  color: #ffffff;
  background: var(--ui-primary);
  font-weight: var(--fw-semibold, 600);
  font-size: var(--text-sm, 0.875rem);
  box-shadow: 0 4px 16px rgba(var(--ui-primary-rgb, 47, 90, 174), 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
}

.ab-btn--primary:hover {
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(var(--ui-primary-rgb, 47, 90, 174), 0.5);
}

.ab-btn--ghost-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ui-tap-min, 48px);
  padding: var(--space-3, 0.75rem) var(--space-7, 2rem);
  border-radius: var(--ui-radius-pill, 100px);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  background: transparent;
  font-weight: var(--fw-semibold, 600);
  font-size: var(--text-sm, 0.875rem);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  text-decoration: none;
}

/*
 * The base `a:hover` rule in base.css is a bare type selector, so on hover it
 * sets --color-link-hover (a dark brand tone) on this button too. The label
 * sits on a dark brand panel, so that reads as near-invisible green. Restating
 * the colour here keeps it white on hover.
 */
.ab-btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-2px);
}


/* ---------- Responsive for New Sections ---------- */

@media (max-width: 900px) {
  .tm-sd-overview__grid {
    grid-template-columns: 1fr;
  }

  .tm-sd-overview__media {
    order: -1;
    max-height: 300px;
  }

  .tm-sd-overview__features {
    grid-template-columns: 1fr;
  }

  .tm-sd-process__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tm-sd-process__grid::before {
    display: none;
  }

  .tm-sd-related__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .tm-sd-process__grid {
    grid-template-columns: 1fr;
  }

  .tm-sd-trust {
    flex-direction: column;
    align-items: center;
  }

  .tm-sd-cta__actions {
    flex-direction: column;
  }

  .tm-sd-cta__actions > * {
    width: 100%;
  }
}


/* =========================================================
   SINGLE PACKAGE & COLOR HARMONIZATION (Polished)
   ========================================================== */

/* --- Single Package Base --- */
.single-tm_package .tm-pk-hero {
  background: var(--ui-hero-bg);
  position: relative;
  overflow: hidden;
}

/* --- Package Plans Grid & Cards --- */
.single-tm_package .service-plans,
.tm-pk-plans-section {
  padding: var(--ui-band-pad, 4rem) 0;
  background: var(--ui-surface-secondary, #f8fafc);
}

.single-tm_package .service-plans__grid,
.tm-pk-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--ui-section-gap, 2rem);
  align-items: stretch;
  margin-top: var(--ui-section-gap, 2rem);
}

.single-tm_package .package-plan,
.tm-pk-plan-card {
  position: relative;
  background: var(--ui-surface-primary, #ffffff);
  border: 1px solid var(--ui-border-light, #e4ece9);
  border-radius: var(--ui-radius-lg, 16px);
  padding: 2.25rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  transition: transform var(--ui-dur-base) var(--ui-ease), box-shadow var(--ui-dur-base) var(--ui-ease), border-color var(--ui-dur-base) var(--ui-ease);
  box-shadow: var(--ui-card-flat);
}

.single-tm_package .package-plan:hover,
.tm-pk-plan-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ui-card-shadow-hover);
  border-color: var(--ui-primary);
}

/* Featured / Most Popular Plan Tier */
.single-tm_package .package-plan--featured,
.tm-pk-plan-card--featured {
  border: 2px solid var(--ui-accent);
  box-shadow: 0 12px 36px rgba(var(--ui-accent-rgb), 0.18);
}

@media (min-width: 992px) {
  .single-tm_package .package-plan--featured,
  .tm-pk-plan-card--featured {
    transform: scale(1.03);
  }
  .single-tm_package .package-plan--featured:hover,
  .tm-pk-plan-card--featured:hover {
    transform: scale(1.03) translateY(-6px);
  }
}

.single-tm_package .package-plan__ribbon,
.tm-pk-plan-card__badge {
  position: absolute;
  top: -14px;
  right: 50%;
  transform: translateX(50%);
  background: var(--ui-accent);
  color: #ffffff;
  font-size: 0.775rem;
  font-weight: 700;
  padding: 0.35rem 1.25rem;
  border-radius: var(--ui-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 4px 14px rgba(var(--ui-accent-rgb), 0.45);
  white-space: nowrap;
  z-index: 2;
  letter-spacing: 0.02em;
}

.single-tm_package .package-plan__head,
.tm-pk-plan-card__header {
  text-align: center;
  margin-bottom: 1.25rem;
}

.single-tm_package .package-plan__title,
.tm-pk-plan-card__title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ui-text-primary);
  margin: 0;
  line-height: 1.3;
}

.single-tm_package .package-plan--featured .package-plan__title,
.tm-pk-plan-card--featured .tm-pk-plan-card__title {
  color: var(--ui-primary);
}

.single-tm_package .package-plan__tagline,
.tm-pk-plan-card__tagline {
  font-size: 0.875rem;
  color: var(--ui-text-muted);
  margin-top: 0.35rem;
  margin-bottom: 0;
}

.single-tm_package .package-plan__price,
.tm-pk-plan-card__price-box {
  background: var(--ui-primary-50);
  border-radius: var(--ui-radius-md);
  padding: 1.25rem 1rem;
  text-align: center;
  margin-bottom: 1.5rem;
  border: 1px solid var(--ui-border-soft);
}

.single-tm_package .package-plan__price-label,
.tm-pk-plan-card__price-label {
  font-size: 0.8rem;
  color: var(--ui-primary);
  font-weight: 600;
  display: block;
  margin-bottom: 0.2rem;
}

.single-tm_package .package-plan__price-value,
.tm-pk-plan-card__amount {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ui-primary);
}

.single-tm_package .package-plan__features,
.tm-pk-plan-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.single-tm_package .package-plan__features li,
.tm-pk-plan-card__features li {
  font-size: 0.9rem;
  color: var(--ui-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 1.45;
}

.single-tm_package .package-plan__features li svg,
.tm-pk-plan-card__features li svg {
  color: var(--ui-primary);
  flex-shrink: 0;
}

.single-tm_package .package-plan__more,
.tm-pk-plan-card__more {
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  color: var(--ui-primary);
  cursor: pointer;
}

.single-tm_package .package-plan__more summary,
.tm-pk-plan-card__more summary {
  font-weight: 700;
  padding: 0.3rem 0;
  user-select: none;
}

.single-tm_package .package-plan__features--extra,
.tm-pk-plan-card__features--extra {
  margin-top: 0.75rem;
  padding-right: 0.5rem;
}

.single-tm_package .package-plan__cta,
.tm-pk-plan-card__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.single-tm_package .payment-plan-selector,
.tm-pk-payment-selector {
  margin-bottom: 1rem;
  text-align: right;
  border: 0;
  padding: 0;
}

.single-tm_package .payment-plan-selector-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ui-text-secondary);
  margin-bottom: 0.5rem;
  display: block;
  padding: 0;
}

.single-tm_package .payment-plan-options {
  display: grid;
  gap: 0.5rem;
}

.single-tm_package .payment-plan-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--ui-border-light);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-primary);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.single-tm_package .payment-plan-option:hover {
  border-color: var(--ui-primary);
  background: var(--ui-primary-50);
}

.single-tm_package .payment-plan-option.is-selected {
  border-color: var(--ui-primary);
  background: var(--ui-primary-50);
}

.single-tm_package .payment-plan-radio {
  accent-color: var(--ui-primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.single-tm_package .payment-plan-option-content {
  display: flex;
  flex-direction: column;
}

.single-tm_package .payment-plan-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ui-text-primary);
}

.single-tm_package .payment-plan-amount {
  font-size: 0.775rem;
  color: var(--ui-text-muted);
}

.single-tm_package .package-plan__note,
.tm-pk-tamara-note {
  font-size: 0.775rem;
  color: var(--ui-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.single-tm_package .package-plan__note svg,
.tm-pk-tamara-note svg {
  color: var(--ui-accent);
}

.single-tm_package .package-plan__unavailable,
.tm-pk-unavailable-badge {
  text-align: center;
  padding: 0.75rem;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface-secondary);
  color: var(--ui-text-muted);
  font-weight: 600;
  font-size: 0.875rem;
}

.single-tm_package .tm-pk-card-price {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--ui-text-muted);
  margin-bottom: 0.5rem;
}

.single-tm_package .tm-pk-card-price strong {
  color: var(--ui-primary);
  font-weight: 700;
  font-size: 1rem;
}

/* --- Color Harmonization for All Package & Service Cards --- */
.tm-home-package-card,
.package-plan,
.service-card,
.tm-service-card {
  background: var(--ui-surface-primary);
  border-color: var(--ui-border-light);
  color: var(--ui-text-primary);
}

.tm-home-package-card:hover,
.package-plan:hover,
.service-card:hover,
.tm-service-card:hover {
  border-color: var(--ui-primary);
  box-shadow: var(--ui-card-shadow-hover);
}

.tm-package-card__price,
.service-card-price,
.tm-service-card__price {
  color: var(--ui-primary);
}

.ab-btn--full {
  width: 100%;
}