/**
 * Standard Theme - Main CSS Entry Point
 * 
 * This file imports all theme CSS in the correct order.
 * For Shopify-like file-based editing, each file can be loaded separately.
 * 
 * Load Order:
 * 1. Base (layout, variables)
 * 2. Components (reusable elements)
 * 3. Sections (modular page sections)
 * 4. Pages (page-specific overrides)
 */

/* =============================================================================
   BASE
   ============================================================================= */

/* getme-css-bundle: css/base.css */
/* Public site layout styles
 * - Global layout & typography
 * - Header
 * - Footer
 */

:root {
  /* =====================================================
     FALLBACK VALUES - These are overridden by server CSS
     ===================================================== */

  /* Brand Colors - Fallbacks, will be overridden by theme */
  --primary-color: #ce3645;
  --secondary-color: #1a1a2e;
  --accent-color: #ff6b35;
  --dark-bg: #1a1a2e;

  /* TF Variables - Reference the main colors */
  --tf-primary: var(--primary, var(--primary-color));
  --tf-secondary: var(--secondary, var(--secondary-color));
  --tf-white: #ffffff;
  --tf-text-dark: var(--header-text-color, var(--dark-bg, #1a1a2e));
  --tf-footer-bg: var(--footer-bg, var(--dark-bg, #0b0b10));
  --tf-footer-border: rgba(148, 163, 184, 0.25);
  --tf-footer-text: var(--footer-text-color, #e5e7eb);
  --tf-footer-muted: var(--footer-text-color, #9ca3af);

  /* Text colors */
  --heading-color: var(--dark-bg, #1a1a2e);
  --text-dark: var(--dark-bg, #1a1a2e);
  --text-muted: #6c757d;
  --text-color: #495057;
  --text-light: #ffffff;

  /* Background colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;

  /* Gradient - Will be overridden by dynamic CSS */
  --gradient-primary: linear-gradient(135deg, var(--tf-primary, #ce3645) 0%, var(--tf-secondary, #1a1a2e) 100%);
  --hero-overlay-gradient: linear-gradient(135deg, rgba(11, 12, 20, 0.9), rgba(11, 12, 20, 0.85));

  /* RGB versions for rgba usage - Overridden by dynamic CSS from server */
  --primary-rgb: 206, 54, 69;
  --secondary-rgb: 26, 26, 46;
  --color-primary-rgb: var(--primary-rgb);
  --color-secondary-rgb: var(--secondary-rgb);

  /* Typography - Will be overridden by dynamic CSS */
  --heading-font: "Inter", sans-serif;
  --body-font: "Inter", sans-serif;
  --font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing - Dynamic from theme */
  --border-radius: 8px;
  --button-radius: 8px;
}

/* In-page anchors glide rather than jump. Targets carry their own
   scroll-margin-top so the sticky header does not cover them on arrival. */
html {
  scroll-behavior: smooth;
}

/* Honour a reader's request for less motion — the jump stays instant. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Global Font Application */
body {
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Container: match reference exactly — no override, use Bootstrap responsive
   widths (xxl 1320 / xl 1140 / lg 960 …). The reference theme has no .container
   rule; a forced max-width here (esp. if the runtime injects
   --container-max-width) would make the header narrower than the reference. */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
}

/* ===========================
   HEADER
   =========================== */

.header-main {
  background-color: var(--header-bg, var(--tf-white));
  padding: 14px 0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.header-main[data-sticky="false"] {
  position: relative;
  top: auto;
}

.header-main[data-transparent-on-hero="true"] {
  background-color: var(--header-bg, var(--tf-white)) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.header-main.header-transparent {
  background-color: var(--header-bg, var(--tf-white)) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.header-main .navbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  transition: transform 0.2s ease;
}

.header-main .navbar-brand:hover {
  transform: translateY(-1px);
}

.logo-img {
  height: 80px;
  width: auto;
  max-width: 360px;
}

section[id^="section-"] {
  padding-top: var(--section-padding-desktop, 100px) !important;
  padding-bottom: var(--section-padding-desktop, 100px) !important;
}

.header-main .nav-link {
  color: var(--tf-text-dark);
  font-weight: 500;
  /* 0.95rem trimmed by 10% — buys the row enough width that seven labels,
     the switcher and the CTA sit on one line without shrinking further. */
  font-size: 0.855rem;
  margin: 0 4px;
  padding: 8px 12px;
  border-radius: 999px;
  /* Two-word labels ("Our Fees") stay on one line; the row shrinks via the
     breakpoints below rather than wrapping a label in half. */
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.header-main .nav-link:hover {
  background-color: rgba(var(--color-primary-rgb, 0, 114, 255), 0.15);
  color: var(--tf-primary);
  transform: translateY(-1px);
}

.header-main .nav-link.active {
  background-color: rgba(var(--color-primary-rgb, 0, 114, 255), 0.15);
  color: var(--tf-primary);
  font-weight: 600 !important;
  transform: translateY(-1px);
}

.header-main .nav-link.active:hover {
  background-color: rgba(var(--color-primary-rgb, 0, 114, 255), 0.15);
  color: var(--tf-primary);
  font-weight: 600 !important;
  transform: translateY(-1px);
}

/* Customer login link. In icon-only mode the label is carried by aria-label. */
.header-main .nav-link-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.header-main .nav-link-login i {
  /* A glyph reads smaller than type set at the same nominal size, so the icon
     is stepped well above the label to sit level with the neighbouring links.
     The unit is em, so it still tracks the nav's narrow-screen font steps. */
  font-size: 1.92em;
  line-height: 1;
}

/* Icon-only: no filled pill behind the glyph — the icon stands on its own and
   answers hover with colour alone, the way an icon control reads rather than a
   labelled menu item. Padding drops to what the touch target needs.

   The gap on either side is equalised so the icon sits centred between the
   language switcher and the CTA: the CTA carries a 16px ms-lg-3 margin, so the
   icon takes 8px of its own on the right (8 + 8 = 16) against 16px on the left,
   where nothing else contributes. */
.header-main .nav-link-login--icon {
  padding: 4px 0;
  margin-left: 16px;
  margin-right: 8px;
  background-color: transparent;
  border-radius: 0;
}

.header-main .nav-link-login--icon:hover,
.header-main .nav-link-login--icon.active,
.header-main .nav-link-login--icon.active:hover {
  background-color: transparent;
  color: var(--tf-primary);
}

/* Icon-only mode still prints its label for the collapsed menu; on the desktop
   row the glyph carries the meaning on its own (aria-label does the rest). */
.header-main .nav-link-login__text--mobile {
  display: none;
}

.btn-book-appointment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid rgba(var(--primary-rgb), 0.7);
  background-color: var(--tf-primary);
  color: var(--tf-white);
  font-weight: 600;
  font-size: 0.855rem;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
}

.btn-book-appointment:hover {
  background-color: var(--primary-hover, #e20f0f);
  color: var(--tf-white);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(var(--primary-rgb), 0.55);
}

/* The horizontal menu is one unbroken row: items shrink (font/padding steps
   below) instead of the row wrapping into two lines. min-width:0 lets the list
   shrink inside the flex navbar rather than forcing overflow. */
@media (min-width: 992px) {
  .header-main .navbar-nav {
    flex-wrap: nowrap;
    min-width: 0;
  }

  /* Nothing in the row is allowed to break mid-label, and no item may be
     squeezed below its own text width — the row shrinks by the font/padding
     steps below, never by folding an item onto a second line. */
  .header-main .navbar-nav > .nav-item {
    flex: 0 0 auto;
  }

  .header-main .language-switcher,
  .header-main .language-toggle,
  .header-main .btn-book-appointment {
    white-space: nowrap;
    flex: 0 0 auto;
  }
}

/* 1200px - 900px arası: menü öğelerini 1.3x küçült */
@media (max-width: 1200px) and (min-width: 900px) {
  .logo-img {
    height: 61px;
    /* 80px / 1.3 ≈ 61px */
    max-width: 277px;
    /* 360px / 1.3 ≈ 277px */
  }

  .header-main .nav-link {
    font-size: 0.657rem;
    /* 0.855rem / 1.3 ≈ 0.657rem */
    margin: 0 3px;
    /* 4px / 1.3 ≈ 3px */
    padding: 6px 9px;
    /* 8px / 1.3 ≈ 6px, 12px / 1.3 ≈ 9px */
  }

  /* The CTA's ms-lg-3 stays 16px at every width, so the icon keeps splitting
     the difference: 16px left against 8px + its own right-hand gap. */
  .header-main .nav-link-login--icon {
    margin-left: 16px;
    margin-right: 8px;
    padding: 4px 0;
  }

  .language-switcher .language-toggle {
    font-size: 0.657rem;
    padding: 6px 9px;
  }

  .btn-book-appointment {
    padding: 7px 15px;
    /* 9px / 1.3 ≈ 7px, 20px / 1.3 ≈ 15px */
    font-size: 0.657rem;
    /* 0.855rem / 1.3 ≈ 0.657rem */
  }
}

/* Tightest horizontal step — just above the 991.98px collapse, where seven
   menu items plus the switcher and the CTA share the narrowest desktop row.
   Type drops one more notch and the gaps close so the row still fits on one
   line; below 992px Bootstrap collapses the menu into the toggler anyway. */
@media (max-width: 1100px) and (min-width: 992px) {
  .logo-img {
    height: 52px;
    max-width: 230px;
  }

  .header-main .nav-link {
    font-size: 0.612rem;
    margin: 0 1px;
    padding: 6px 7px;
  }

  .header-main .nav-link-login--icon {
    margin-left: 16px;
    margin-right: 8px;
    padding: 4px 0;
  }

  .header-main .language-switcher {
    margin-left: 4px;
  }

  .language-switcher .language-toggle {
    font-size: 0.612rem;
    padding: 6px 7px;
  }

  .btn-book-appointment {
    padding: 7px 12px;
    font-size: 0.612rem;
  }
}

.navbar-toggler {
  border: none;
  padding: 6px 8px;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb, 0, 114, 255), 0.35);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2827, 27, 31, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e");
}

@media (max-width: 991.98px) {
  .header-main {
    padding: 10px 0;
  }

  .header-main .navbar-nav {
    padding-top: 12px;
  }

  .header-main .nav-link {
    margin: 2px 0;
    padding: 8px 10px;
  }

  /* Collapsed menu: the items stack, so the horizontal centring between the
     switcher and the CTA no longer applies — the row aligns to the column edge
     like every other item, and the label appears beside the glyph because a
     lone icon has no column context to be read against here. */
  .header-main .nav-link-login--icon {
    margin-left: 0;
    margin-right: 0;
    padding: 8px 10px;
  }

  .header-main .nav-link-login__text--mobile {
    display: inline;
  }

  /* Back in line with the neighbouring labels — the enlarged glyph was sized
     for a text-free desktop control, not for sitting next to its own word. */
  .header-main .nav-link-login i {
    font-size: 1.15em;
    width: 1.3em;
    text-align: center;
  }

  .btn-book-appointment {
    width: 100%;
    margin-top: 8px;
  }

  .logo-img {
    height: 60px;
  }
}

.language-switcher {
  margin-left: 8px;
}

.language-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background-color: var(--form-bg, #ffffff);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-on-form, #4b5563);
}

.language-flag {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  object-fit: cover;
}

.language-dropdown {
  min-width: 180px;
}

.language-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.language-dropdown .dropdown-item.active {
  background-color: rgba(var(--color-primary-rgb, 0, 114, 255), 0.08);
  color: var(--text-on-card, #111827);
}

/* Single language badge (when only one language is available) */
.language-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background-color: rgba(var(--primary-rgb, 0, 114, 255), 0.08);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--tf-primary, #0072ff);
}

.language-badge .language-flag {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  object-fit: cover;
}

/* ===========================
   FOOTER
   =========================== */

.footer-main {
  /* Reference-exact footer colors, hardcoded (independent of CSS-var resolution) */
  background: radial-gradient(circle at top left, rgba(206, 54, 69, 0.14), transparent 55%),
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.04), transparent 60%),
    #0b0b10 !important;
  color: #e5e7eb !important;
  padding: 48px 0 20px;
  position: relative;
  overflow: hidden;
}

.footer-logo {
  height: 80px;
  width: auto;
  max-width: 400px;
}

.footer-slogan {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--tf-footer-text, var(--tf-white));
}

.footer-desc {
  color: var(--tf-footer-muted);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* Regulatory notice: a legal disclosure, so it sits quieter than the blurb
   above it and is separated by its own gap rather than reading as one more
   paragraph of copy. */
.footer-compliance {
  color: var(--tf-footer-muted);
  line-height: 1.6;
  font-size: 0.875rem;
  margin-top: 1.25rem;
  margin-bottom: 0;
}

/* The register link has to be identifiable as a link on a dark ground without
   taking the browser's default blue, which is unreadable here. */
.footer-compliance a {
  color: var(--tf-footer-text, #e5e7eb);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast, 0.15s ease);
}

.footer-compliance a:hover,
.footer-compliance a:focus {
  color: var(--tf-primary, #ce3645);
}

/* Navigation, Legal and the consultation block split the width left of the
   brand column in three equal parts. Bootstrap's 12-unit grid cannot divide the
   remaining 8 units evenly — 3-2-3 left the Legal column sitting closer to the
   consultation block than to Navigation — so the three share the row's free
   space through flex instead, which makes the gaps on either side of Legal
   identical. flex-basis:0 is what forces an equal split rather than one sized
   by each column's own content. */
@media (min-width: 992px) {
  .footer-main .footer-col-even {
    flex: 1 1 0;
    min-width: 0;
  }
}

.footer-title {
  position: relative;
  font-weight: 600;
  padding-bottom: 8px;
  margin-bottom: 18px;
  font-size: 1rem;
  color: var(--tf-footer-text, var(--tf-white));
}

.footer-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 48px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tf-primary), rgba(255, 255, 255, 0.3));
}

.footer-list li {
  margin-bottom: 8px;
}

.footer-list a {
  color: var(--tf-footer-muted);
  text-decoration: none;
  font-size: 0.93rem;
  transition: color 0.2s ease, transform 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.footer-list a::before {
  content: '›';
  font-size: 0.8rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.footer-list a:hover {
  color: var(--tf-primary);
  transform: translateX(1px);
}

.footer-list a:hover::before {
  opacity: 1;
  transform: translateX(0);
}

.btn-footer-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 999px;
  background-color: var(--tf-primary);
  color: var(--tf-white);
  font-weight: 600;
  font-size: 0.94rem;
  text-decoration: none;
  border: 1px solid rgba(var(--primary-rgb), 0.7);
  box-shadow: 0 12px 30px rgba(var(--primary-rgb), 0.45);
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-footer-primary:hover {
  background-color: var(--primary-hover, #e20f0f);
  color: var(--tf-white);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(var(--primary-rgb), 0.55);
}

.footer-social {
  display: flex;
  gap: 10px;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: var(--tf-footer-muted);
  text-decoration: none;
  font-size: 0.88rem;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.social-icon:hover {
  background-color: rgba(var(--color-primary-rgb, 206, 54, 69), 0.16);
  border-color: var(--tf-primary);
  color: var(--tf-primary);
  transform: translateY(-2px);
}

.footer-bottom {
  border-top: 1px solid var(--tf-footer-border);
  margin-top: 32px;
  padding-top: 16px;
  font-size: 0.88rem;
}

.copyright,
.made-with {
  color: var(--tf-footer-muted);
}

@media (max-width: 767.98px) {
  .footer-main {
    padding-top: 40px;
  }

  .footer-bottom {
    text-align: center;
  }

  .made-with {
    margin-top: 8px;
  }

  .footer-social {
    margin-top: 6px;
  }
}

/* Override Bootstrap primary button colors for public site */
.btn-primary {
  background-color: var(--tf-primary);
  border: 1px solid rgba(var(--primary-rgb), 0.7);
  box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.3);
}

.btn-primary:hover {
  background-color: var(--primary-hover, #e20f0f);
  border-color: rgba(var(--primary-rgb), 0.8);
  box-shadow: 0 12px 30px rgba(var(--primary-rgb), 0.45);
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show>.btn-primary.dropdown-toggle {
  filter: brightness(0.95);
  border-color: var(--tf-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb, 0, 114, 255), 0.4);
}

/* =============================================================================
   FOOTER COLORS — reference-exact, hardcoded (preview CSS-var safety)
   text/title #e5e7eb · links/desc/muted #9ca3af · accent/hover #ce3645
   ============================================================================= */
.footer-main .footer-title,
.footer-main .footer-slogan { color: #e5e7eb !important; }
.footer-main .footer-title::after {
  background: linear-gradient(90deg, #ce3645, rgba(206, 54, 69, 0)) !important;
}
.footer-main .footer-desc,
.footer-main .footer-list a,
.footer-main .copyright,
.footer-main .made-with { color: #9ca3af !important; }
.footer-main .footer-list a:hover { color: #ce3645 !important; }
.footer-main .btn-footer-primary {
  background-color: #ce3645 !important;
  color: #ffffff !important;
  border: 1px solid rgba(206, 54, 69, 0.7) !important;
}
.footer-main .btn-footer-primary:hover { background-color: #dd4554 !important; color: #ffffff !important; }
.footer-main .social-icon {
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  color: #9ca3af !important;
}
.footer-main .social-icon:hover {
  background-color: rgba(206, 54, 69, 0.16) !important;
  border-color: #ce3645 !important;
  color: #ce3645 !important;
}
.footer-main .footer-bottom { border-top: 1px solid rgba(148, 163, 184, 0.25) !important; }
.footer-main a[href*="getmeonline"] { color: #ce3645 !important; }

/* getme-css-bundle:end css/base.css */


/* =============================================================================
   COMPONENTS
   ============================================================================= */

/* getme-css-bundle: css/components/typography.css */
/* =============================================================================
   TYPOGRAPHY MODULE - Ortak Text ve Başlık Stilleri
   ============================================================================= */

/* ORTAK Hero Typography (Tüm sayfalar için) */
.hero-title,
.partners-hero-title,
.careers-hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.contact-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #ffffff;
}

.hero-subtitle,
.partners-hero-subtitle,
.careers-hero-subtitle,
.contact-subtitle {
  font-size: 1.5rem;
  margin-bottom: 30px;
  opacity: 0.9;
}

/* Contact specific overrides */
.contact-title {
  margin-bottom: 1rem;
}

.contact-subtitle {
  max-width: 640px;
  margin-bottom: 1.5rem;
}

.contact-hero-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.5rem;
}

.contact-hero-list li {
  margin-bottom: 0.4rem;
  font-size: 0.98rem;
}

.contact-hero-list li i {
  color: #ffb4b4;
  margin-right: 8px;
}

/* Section Titles */
.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}

.section-title:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 50px;
  height: 4px;
  background: var(--primary-gradient);
}

/* About Section Typography */
.about-section-title {
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--tf-primary, #0072ff);
  position: relative;
  display: inline-block;
}

.about-section-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: #ce3645;
  border-radius: 2px;
}

.about-section-subtitle {
  font-size: 1.2rem;
  color: var(--text-secondary, #374151);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.7;
  font-weight: 500;
}

.about-preview-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted, #9ca3af);
  margin-bottom: 6px;
}

.about-preview-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-on-card, #111827);
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}

.about-preview-title::after {
  content: '';
  position: absolute;
  left: 0;
  transform: none;
  bottom: 0;
  width: 64px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tf-primary, #0072ff), rgba(var(--color-primary-rgb, 0, 114, 255), 0.5));
}

.about-preview-text {
  font-size: 1.05rem;
  color: var(--text-secondary, #374151);
  max-width: none;
  margin: 0 0 18px;
  line-height: 1.8;
  font-weight: 400;
}

.about-preview-services-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--tf-primary, #0072ff);
  position: relative;
  padding-left: 16px;
}

.about-preview-services-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: #ce3645;
  border-radius: 2px;
}

.about-preview-services-list {
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.about-preview-services-list li {
  margin-bottom: 12px;
  padding-left: 32px;
  color: var(--text-secondary, #374151);
  font-size: 1rem;
  line-height: 1.6;
  position: relative;
  transition: all 0.2s ease;
}

.about-preview-services-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  background: #ce3645;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.85rem;
}

.about-preview-services-list li:hover {
  color: var(--text-on-card, #111827);
  padding-left: 36px;
}

/* About Approach Typography */
.about-approach-title {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--text-on-bg-secondary, #111827);
  margin-bottom: 24px;
  position: relative;
  padding-left: 20px;
}

.about-approach-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: #ce3645;
  border-radius: 3px;
}

.about-approach-text {
  font-size: 1.1rem;
  color: var(--text-on-bg-secondary, #374151);
  line-height: 1.8;
  margin-bottom: 32px;
}

/* Partners Typography */
.partners-section .partners-title {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-bg-secondary, #1b1b1f);
}

.partners-subtitle {
  font-size: 0.98rem;
  color: var(--text-on-bg-secondary, #1b1b1f);
  opacity: 0.9;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.partners-marquee-title {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-bg-secondary, #1b1b1f);
}

.partners-marquee-title::after {
  display: none;
}

.partners-marquee-subtitle {
  font-size: 0.98rem;
  color: var(--text-on-bg-secondary, #1b1b1f);
  opacity: 0.9;
}

.ideal-partners-section h2,
.looking-for-section h2 {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--text-on-bg-primary, #1b1b1f);
}

.ideal-partners-section p,
.looking-for-section p {
  font-size: 1.05rem;
  color: var(--text-on-bg-primary, #1b1b1f);
  line-height: 1.6;
}

/* Contact Form Typography */
.visible-form-title {
  font-size: 2.1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text-on-bg-primary, var(--heading-color, #1a1a2e));
}

.visible-form-subtitle {
  font-size: 1.02rem;
  color: var(--text-on-bg-primary, var(--text-color, #4b5563));
  opacity: 0.9;
  margin-bottom: 2rem;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.contact-details-heading {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.85rem;
  color: var(--text-on-card, #111827);
}

/* CTA Typography */
.cta-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  /* Use brand gradient color like Barber theme */
  background: var(--gradient-primary, linear-gradient(135deg, var(--tf-primary, #0072ff) 0%, var(--tf-secondary, #00c6ff) 100%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cta-text {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto 30px;
  opacity: 0.9;
  /* Dynamic text color based on CTA background */
  color: var(--text-on-card, #4b5563);
}

/* Responsive - Typography */
@media (max-width: 991px) {

  .hero-title,
  .partners-hero-title,
  .careers-hero-title {
    font-size: 2.5rem;
  }

  .hero-subtitle,
  .partners-hero-subtitle,
  .careers-hero-subtitle {
    font-size: 1.2rem;
  }

  .contact-title {
    font-size: 2.2rem;
  }

  .contact-subtitle {
    font-size: 1rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .cta-title {
    font-size: 2rem;
  }

  .about-approach-title {
    font-size: 2rem;
  }

  .about-approach-text {
    font-size: 1rem;
  }
}

@media (max-width: 767px) {

  .partners-hero-title,
  .careers-hero-title {
    font-size: 2rem;
  }

  .partners-hero-subtitle,
  .careers-hero-subtitle {
    font-size: 1.1rem;
  }
}
/* getme-css-bundle:end css/components/typography.css */


/* getme-css-bundle: css/components/buttons.css */
/* =============================================================================
   BUTTONS MODULE - Ortak Buton Stilleri
   ============================================================================= */

/* Hero Buttons (Tüm sayfalar için ortak) */
.hero-buttons,
.partners-hero-buttons,
.careers-hero-buttons {
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.hero-buttons .btn,
.partners-hero-buttons .btn,
.careers-hero-buttons .btn {
  padding: 12px 30px;
  border-radius: 30px;
  font-weight: 600;
  transition: all 0.1s ease;
  margin-right: 0;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

.hero-buttons .btn-primary,
.partners-hero-buttons .btn-primary,
.careers-hero-buttons .btn-primary {
  background-color: var(--tf-primary);
  border: 1px solid rgba(var(--primary-rgb), 0.7);
  box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.4);
  color: var(--text-light, #ffffff);
}

.hero-buttons .btn-primary:hover,
.partners-hero-buttons .btn-primary:hover,
.careers-hero-buttons .btn-primary:hover {
  background-color: var(--primary-hover, #b92f3d);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(var(--primary-rgb), 0.55);
  color: var(--text-light, #ffffff);
}

.hero-buttons .btn-outline-light:hover,
.partners-hero-buttons .btn-outline-light:hover,
.careers-hero-buttons .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-light, #ffffff);
  transform: translateY(-3px);
}

/* Secondary CTA Buttons (Beyaz butonlar) */
.about-approach-cta .btn-book-appointment,
.services-cta .btn-book-appointment {
  padding: 11px 28px;
  font-size: 1rem;
  background-color: var(--form-bg, #ffffff);
  color: var(--text-on-form, #111827);
  border: 1px solid var(--tf-primary);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}

.about-approach-cta .btn-book-appointment:hover,
.services-cta .btn-book-appointment:hover {
  background-color: var(--tf-primary);
  color: var(--text-light, #ffffff);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.4);
}

/* Primary CTA Buttons */
.cta-section .btn,
.contact-cta-btn {
  padding: 12px 30px;
  border-radius: 30px;
  font-weight: 600;
  background-color: var(--tf-primary);
  border: 1px solid rgba(var(--primary-rgb), 0.7);
  box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light, #ffffff);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.contact-cta-btn {
  padding: 11px 26px;
  border-radius: 999px;
  font-size: 0.98rem;
}

.cta-section .btn:hover,
.contact-cta-btn:hover {
  background-color: var(--primary-hover, #b92f3d);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(var(--primary-rgb), 0.55);
  color: var(--text-light, #ffffff);
}

/* Responsive - Buttons */
@media (max-width: 991px) {

  /* Tablet & küçük desktop – hafif küçült, çok ufaltma */
  .hero-buttons,
  .partners-hero-buttons,
  .careers-hero-buttons {
    gap: 10px;
  }

  .hero-buttons .btn,
  .partners-hero-buttons .btn,
  .careers-hero-buttons .btn {
    padding: 10px 24px;
    font-size: 0.95rem;
  }
}

@media (max-width: 768px) {

  /* Tablet / büyük telefon – biraz daha kompakt */
  .hero-buttons,
  .partners-hero-buttons,
  .careers-hero-buttons {
    gap: 8px;
  }

  .hero-buttons .btn,
  .partners-hero-buttons .btn,
  .careers-hero-buttons .btn {
    padding: 9px 20px;
    font-size: 0.9rem;
  }
}

@media (max-width: 575px) {

  /* Telefon – iki buton yan yana sığsın */
  .hero-buttons,
  .partners-hero-buttons,
  .careers-hero-buttons {
    gap: 6px;
  }

  .hero-buttons .btn,
  .partners-hero-buttons .btn,
  .careers-hero-buttons .btn {
    padding: 8px 16px;
    font-size: 0.85rem;
  }
}

@media (max-width: 390px) {

  /* 390px altı – butonlar alt alta gelsin */
  .hero-buttons,
  .partners-hero-buttons,
  .careers-hero-buttons {
    flex-direction: column;
    white-space: normal;
    align-items: stretch;
  }

  .hero-buttons .btn,
  .partners-hero-buttons .btn,
  .careers-hero-buttons .btn {
    width: 100%;
    text-align: center;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 350px) {

  /* En küçük cihazlar – minimum ama okunabilir */
  .hero-buttons,
  .partners-hero-buttons,
  .careers-hero-buttons {
    gap: 4px;
  }

  .hero-buttons .btn,
  .partners-hero-buttons .btn,
  .careers-hero-buttons .btn {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
}

/* getme-css-bundle:end css/components/buttons.css */


/* getme-css-bundle: css/components/cards.css */
/* =============================================================================
   CARDS MODULE - Ortak Kart Stilleri
   ============================================================================= */

/* General Card Styles */
.feature-card,
.benefit-card,
.testimonial-card {
  background: var(--card-bg, #ffffff);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.25));
  transition: all 0.25s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.feature-card:hover,
.benefit-card:hover,
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
  border-color: rgba(var(--color-primary-rgb, 0, 114, 255), 0.6);
}

/* Feature Card Specific */
.feature-card {
  margin-top: 30px;
}

.feature-image-wrapper {
  width: 100%;
  height: 160px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.14);
}

.feature-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-title {
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 10px;
  color: var(--text-on-card, #111827);
}

.feature-text {
  color: var(--text-on-card, #4b5563);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* Benefit Card Specific (Partners) */
.benefit-card {
  padding: 32px 28px;
  align-items: center;
  text-align: center;
}

.benefit-icon {
  font-size: 2.8rem;
  margin-bottom: 18px;
  color: var(--tf-primary, #0072ff);
}

.benefit-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 14px;
  color: var(--text-on-card, #111827);
}

.benefit-text {
  color: var(--text-secondary, #4b5563);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* Testimonial Card Specific */
.testimonial-card {
  align-items: center;
  background-color: var(--card-bg, #ffffff);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

.testimonial-image-wrapper {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(var(--color-primary-rgb, 0, 114, 255), 0.6);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.15);
  margin-bottom: 16px;
}

.testimonial-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-body {
  text-align: left;
}

.testimonial-quote {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-on-card, #4b5563);
}

.testimonial-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-on-card, #111827);
}

/* About Summary Card */
.about-summary-card {
  background: linear-gradient(135deg, #ffffff 0%, #fefefe 100%);
  border-radius: 20px;
  border: 2px solid rgba(var(--color-primary-rgb, 0, 114, 255), 0.15);
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
  padding: 40px 36px 36px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.about-summary-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--tf-primary, #0072ff), var(--tf-secondary, #00c6ff), var(--tf-primary, #0072ff));
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.about-summary-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 45px rgba(15, 23, 42, 0.12);
  border-color: rgba(var(--color-primary-rgb, 0, 114, 255), 0.3);
}

.about-summary-body {
  flex: 1 1 260px;
}

/* About Founder Card */
.about-founder-card {
  height: 100%;
  border-radius: 16px;
  border: 1px solid var(--tf-primary, #0072ff);
  background-color: var(--card-bg, #ffffff);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 320px;
  width: 100%;
}

.about-founder-card-wrapper {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

.about-founder-image-wrapper {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(var(--color-primary-rgb, 0, 114, 255), 0.7);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.15);
  margin-bottom: 10px;
}

.about-founder-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-founder-name {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 4px;
  color: var(--text-on-card, #111827);
}

.about-founder-company {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--gradient-primary, linear-gradient(135deg, var(--tf-primary) 0%, var(--tf-secondary) 100%));
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.about-founder-title {
  font-size: 0.9rem;
  color: var(--text-secondary, #4b5563);
  margin-bottom: 0;
}

.about-founder-title-primary {
  font-weight: 700;
}

/* Approach Feature Cards */
.approach-feature {
  display: flex;
  gap: 16px;
  margin-bottom: 28px;
  padding: 20px;
  background: var(--card-bg, #ffffff);
  border-radius: 12px;
  border: 1px solid rgba(var(--color-primary-rgb, 0, 114, 255), 0.1);
  transition: all 0.3s ease;
}

.approach-feature:hover {
  transform: translateX(8px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  border-color: rgba(var(--color-primary-rgb, 0, 114, 255), 0.25);
}

.approach-feature-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: var(--gradient-primary, linear-gradient(135deg, var(--tf-primary) 0%, var(--tf-secondary) 100%));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.3rem;
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 0, 114, 255), 0.3);
}

.approach-feature-content {
  flex: 1;
}

.approach-feature-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-on-card, #111827);
  margin-bottom: 8px;
}

.approach-feature-text {
  font-size: 0.95rem;
  color: var(--text-on-card, #4b5563);
  line-height: 1.6;
  margin: 0;
}

/* Contact Info Cards */
.contact-info-card {
  background: var(--card-bg, #ffffff);
  padding: 24px 22px 22px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.25));
}

.contact-info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
  border-color: rgba(var(--color-primary-rgb, 0, 114, 255), 0.6);
}

.contact-icon {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: rgba(var(--color-primary-rgb, 0, 114, 255), 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--tf-primary, #0072ff);
  font-size: 22px;
}

.contact-info-title {
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-on-card, #111827);
  font-size: 1.05rem;
}

.contact-info-content {
  color: var(--text-on-card, #4b5563);
  font-size: 0.96rem;
}

.contact-info-content a {
  color: var(--tf-primary, #0072ff);
  text-decoration: none;
  font-weight: 500;
}

.contact-info-content a:hover {
  text-decoration: underline;
}

/* Responsive - Cards */
@media (max-width: 991px) {

  .feature-card,
  .benefit-card {
    margin-top: 0;
    margin-bottom: 24px;
  }

  .about-founder-card {
    margin-top: 12px;
  }

  .approach-feature {
    margin-bottom: 20px;
    padding: 16px;
  }

  .approach-feature-icon {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }

  .approach-feature-title {
    font-size: 1.05rem;
  }
}
/* getme-css-bundle:end css/components/cards.css */


/* getme-css-bundle: css/components/tag-list.css */
/* ════════════════════════════════════════════════════════════════════
   tag-list — component stylesheet

   Owner     : components/tag-list.html
   Namespace : --tl-*  (tag-list). Do NOT reuse for other components.
   Scope     : every rule starts with `.gm-tag-list`.

   A labelled panel of tag chips. Lives here rather than in a page stylesheet
   because the component is page-agnostic — the blog article uses it today, any
   section with a list of labels can use it next.
   ════════════════════════════════════════════════════════════════════ */

.gm-tag-list {
  /* Values come from the theme surface, so the panel retunes with the palette
     instead of carrying its own colours. */
  --tl-line: var(--color-border-medium, #dee2e6);
  --tl-chip-bg: var(--bg-secondary, #f5f6f8);
  --tl-chip-text: var(--text-on-bg-secondary, #1b1b1f);
  --tl-label: var(--heading-color, #1a1a2e);
  --tl-mark: var(--primary-color, #ce3645);

  border: 2px solid var(--tl-line);
  border-radius: var(--radius-lg, 16px);
  padding: 1.5rem 1.75rem;
}

/* The label names what follows; it is not a heading in the document outline,
   so it stays a paragraph and carries its weight visually instead. */
.gm-tag-list__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  color: var(--tl-label);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gm-tag-list__label i {
  color: var(--tl-mark);
  font-size: 1.1em;
}

.gm-tag-list__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ── Centred variant ─────────────────────────────────────────────────
   The default panel is a block: it fills its column, which is right when it
   closes an article and lines up with the text above it. A filter row is
   different — it is a control the page is arranged around, so the frame shrinks
   to its chips and sits centred on the page, with the chips centred inside it.

   width:fit-content is what makes the box stop at its content; auto margins
   then centre what is left. */
.gm-tag-list--centred {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
}

.gm-tag-list--centred .gm-tag-list__label,
.gm-tag-list--centred .gm-tag-list__items {
  justify-content: center;
}

/* Chips are labels to scan, not controls to press: a soft fill, no border, no
   hover state. Anything clickable here would need to look different. */
.gm-tag-list__item {
  padding: 0.6rem 1.1rem;
  border-radius: var(--theme-radius-md, 10px);
  background: var(--tl-chip-bg);
  color: var(--tl-chip-text);
  font-size: 0.95rem;
  line-height: 1.2;
}

@media (max-width: 575.98px) {
  .gm-tag-list {
    padding: 1.25rem;
  }

  .gm-tag-list__items {
    gap: 0.6rem;
  }

  .gm-tag-list__item {
    font-size: 0.9rem;
    padding: 0.5rem 0.9rem;
  }
}

/* getme-css-bundle:end css/components/tag-list.css */


/* getme-css-bundle: css/components/forms.css */
/* =============================================================================
   FORMS MODULE - Public Form Stilleri
   ============================================================================= */

/* Form Container */
.contact-simple-form {
  background: var(--card-bg, white);
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.12);
  border-radius: 20px;
  padding: 2rem;
  margin: 0 auto;
  max-width: 100%;
}

@media (min-width: 768px) {
  .contact-simple-form {
    padding: 3rem;
  }
}

/* Form Base Styles */
.contact-us-form .form-label {
  font-weight: 600;
  color: var(--text-on-form, #111827);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.contact-us-form .form-control,
.contact-us-form .form-select {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0.625rem 0.875rem;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  background-color: var(--form-bg, #ffffff);
  color: var(--text-on-form, #212529);
}

.contact-us-form .form-control:focus,
.contact-us-form .form-select:focus {
  border-color: var(--tf-primary, #0072ff);
  box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb, 0, 114, 255), 0.15);
  outline: none;
}

.contact-us-form .form-control:disabled,
.contact-us-form .form-select:disabled {
  background-color: var(--bg-secondary, #f3f4f6);
  cursor: not-allowed;
  opacity: 0.6;
}

.contact-us-form textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

/* Form Text (hints) */
.contact-us-form .form-text {
  font-size: 0.85rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

/* Form Check (Checkboxes) */
.contact-us-form .form-check {
  padding-left: 1.75rem;
}

.contact-us-form .form-check-input {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15rem;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.contact-us-form .form-check-input:checked {
  background-color: var(--tf-primary, #0072ff);
  border-color: var(--tf-primary, #0072ff);
}

.contact-us-form .form-check-input:focus {
  border-color: var(--tf-primary, #0072ff);
  box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb, 0, 114, 255), 0.15);
}

.contact-us-form .form-check-label {
  font-size: 0.9rem;
  color: var(--text-secondary, #4b5563);
  line-height: 1.5;
}

/* Form Buttons */
.contact-us-form .btn-primary {
  background: var(--gradient-primary, linear-gradient(135deg, var(--tf-primary) 0%, var(--tf-secondary) 100%));
  border: none;
  padding: 0.625rem 1.875rem;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 0, 114, 255), 0.3);
}

.contact-us-form .btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(var(--color-primary-rgb, 0, 114, 255), 0.4);
}

.contact-us-form .btn-primary:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Unavailable Slot (Appointment Form) */
.slot-unavailable {
  color: #9ca3af !important;
  opacity: 0.5;
}

/* Flatpickr Calendar Styles */
.flatpickr-calendar {
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.15);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.flatpickr-months {
  background: var(--gradient-primary, linear-gradient(135deg, var(--tf-primary) 0%, var(--tf-secondary) 100%));
  padding: 12px 0;
}

.flatpickr-current-month {
  color: #ffffff;
}

.flatpickr-month {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.flatpickr-monthDropdown-months,
.numInputWrapper input {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 4px 8px;
  font-weight: 600;
  margin: 0 4px;
}

.flatpickr-monthDropdown-months:hover,
.numInputWrapper input:hover {
  background: rgba(255, 255, 255, 0.25);
}

.flatpickr-prev-month,
.flatpickr-next-month {
  fill: #ffffff !important;
  padding: 8px;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
}

.flatpickr-weekdays {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  padding: 8px 0;
}

.flatpickr-weekday {
  color: #6b7280;
  font-weight: 600;
  font-size: 0.85rem;
}

.flatpickr-day {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.flatpickr-day:hover {
  background: rgba(var(--color-primary-rgb, 0, 114, 255), 0.1);
  border-color: var(--tf-primary, #0072ff);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--gradient-primary, linear-gradient(135deg, var(--tf-primary) 0%, var(--tf-secondary) 100%));
  border-color: var(--tf-primary, #0072ff);
  color: #ffffff;
  font-weight: 600;
}

.flatpickr-day.today {
  border-color: var(--tf-primary, #0072ff);
  font-weight: 600;
}

.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
  color: #d1d5db;
  background: transparent;
  cursor: not-allowed;
  opacity: 0.4;
}

/* Responsive Flatpickr */
@media (max-width: 768px) {
  .flatpickr-calendar {
    width: 100% !important;
    max-width: 340px;
    font-size: 14px;
  }

  .flatpickr-day {
    max-width: 38px;
    height: 38px;
    line-height: 38px;
  }

  .flatpickr-monthDropdown-months,
  .numInputWrapper input {
    font-size: 13px;
    padding: 3px 6px;
  }
}

@media (max-width: 480px) {
  .flatpickr-calendar {
    max-width: 300px;
    font-size: 13px;
  }

  .flatpickr-day {
    max-width: 34px;
    height: 34px;
    line-height: 34px;
  }

  .flatpickr-months {
    padding: 8px 0;
  }

  .flatpickr-monthDropdown-months,
  .numInputWrapper input {
    font-size: 12px;
    padding: 2px 4px;
    margin: 0 2px;
  }
}

/* Modal Form Styles (Partner & Hiring) */
.modal-content {
  border-radius: 12px;
  overflow: hidden;
  border: none;
}

.modal-header-gradient {
  background: var(--gradient-primary, linear-gradient(135deg, var(--tf-primary) 0%, var(--tf-secondary) 100%));
  color: #ffffff;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  padding: 1.5rem;
}

.modal-header-gradient .btn-close {
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

.modal-header-gradient .btn-close:hover {
  opacity: 1;
}

.modal-body .form-logo {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.5rem;
  display: block;
}

.modal-body .form-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-on-card, #111827);
  margin-bottom: 0.5rem;
  text-align: center;
}

.modal-body .form-subtitle {
  font-size: 0.95rem;
  color: #6b7280;
  margin-bottom: 2rem;
  text-align: center;
  line-height: 1.6;
}

/* File Upload Styling */
.contact-us-form input[type="file"] {
  padding: 0.5rem;
}

.contact-us-form input[type="file"]::file-selector-button {
  background: var(--gradient-primary, linear-gradient(135deg, var(--tf-primary) 0%, var(--tf-secondary) 100%));
  color: #ffffff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  margin-right: 0.75rem;
  transition: all 0.2s ease;
}

.contact-us-form input[type="file"]::file-selector-button:hover {
  filter: brightness(1.1);
}

/* Loading State */
.contact-us-form .btn-primary .spinner-border {
  width: 1rem;
  height: 1rem;
  border-width: 0.15rem;
  margin-right: 0.5rem;
}

/* Toast Notifications */
.toast-container {
  z-index: 1080;
}

.toast {
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
}

.toast-body {
  padding: 1rem;
  font-weight: 500;
}

/* Date Input with Icon */
.date-input-wrapper {
  position: relative;
}

.date-input-wrapper input {
  padding-right: 40px;
}

.date-input-wrapper .fa-calendar-alt {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  pointer-events: none;
}

/* Dynamic Form Fields */
.hidden-field {
  display: none;
}

/* Form Validation States */
.contact-us-form .form-control.is-invalid,
.contact-us-form .form-select.is-invalid {
  border-color: #dc2626;
}

.contact-us-form .form-control.is-valid,
.contact-us-form .form-select.is-valid {
  border-color: #16a34a;
}

.contact-us-form .invalid-feedback {
  color: #dc2626;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.contact-us-form .valid-feedback {
  color: #16a34a;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}
/* getme-css-bundle:end css/components/forms.css */


/* getme-css-bundle: css/components/booking.css */
/* Booking Container - Full Page Layout */
.booking-container {
    max-width: 100%;
    width: 100%;
    margin: 0;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 2rem 0;
}

/* Booking Header - Better spacing */
.booking-header {
    margin-bottom: 2.5rem;
}

.booking-header h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.75rem;
}

.booking-header p {
    font-size: 1.1rem;
    color: #6c757d;
}

@media (min-width: 768px) {
    .booking-container {
        padding: 3rem 0;
    }
    
    .booking-header h3 {
        font-size: 2.5rem;
    }
}

/* Fix checkbox label overlap - Closer to text like standard theme */
.booking-container .form-check {
    padding-left: 1.25rem !important;
    position: relative;
    margin-bottom: 0.5rem;
}

.booking-container .form-check-input {
    position: absolute !important;
    left: 0 !important;
    top: 0.15rem !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
}

.booking-container .form-check-label {
    display: inline !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    line-height: 1.5;
}

/* Enhanced Progress Steps */
.step-progress-container {
    padding: 0 20px;
}

.step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.step-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.step-circle i {
    font-size: 1rem;
    color: #adb5bd;
    transition: color 0.3s ease;
}

.step-label {
    font-size: 0.7rem;
    color: #6c757d;
    margin-top: 8px;
    font-weight: 500;
    text-align: center;
    max-width: 80px;
    transition: all 0.3s ease;
}

.step-indicator.active .step-circle {
    border-color: var(--primary-color, #ce3645);
    background: linear-gradient(135deg, var(--primary-color, #ce3645), #f59e0b);
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(206, 54, 69, 0.3);
}

.step-indicator.active .step-circle i {
    color: #fff;
}

.step-indicator.active .step-label {
    color: var(--primary-color, #ce3645);
    font-weight: 700;
}

.step-indicator.completed .step-circle {
    border-color: #28a745;
    background: #28a745;
}

.step-indicator.completed .step-circle i {
    color: #fff;
}

.step-indicator.completed .step-label {
    color: #28a745;
}

@media (max-width: 576px) {
    .step-circle {
        width: 36px;
        height: 36px;
    }

    .step-circle i {
        font-size: 0.8rem;
    }

    .step-label {
        font-size: 0.6rem;
        max-width: 60px;
    }
}

/* Mode Selection Cards */
.mode-card {
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid #e0e0e0 !important;
}

.mode-card:hover {
    border-color: var(--primary-color, #ce3645) !important;
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.mode-card.selected {
    border-color: var(--primary-color, #ce3645) !important;
    background: linear-gradient(135deg, rgba(206, 54, 69, 0.05), rgba(206, 54, 69, 0.1));
}

.mode-card.selected i {
    color: var(--primary-color, #ce3645) !important;
}

/* Selection Cards */
.branch-card,
.schedule-card,
.staff-card,
.service-card {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.branch-card:hover,
.schedule-card:hover,
.staff-card:hover,
.service-card:hover {
    border-color: var(--primary-color, #ce3645);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.branch-card.selected,
.schedule-card.selected,
.staff-card.selected,
.service-card.selected {
    border-color: var(--primary-color, #ce3645);
    background-color: rgba(206, 54, 69, 0.05);
    position: relative;
}

/* Checkmark for staff and service cards - top right */
.staff-card.selected::after,
.service-card.selected::after,
.schedule-card.selected::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--primary-color, #ce3645);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 10;
}

/* Checkmark for branch cards - bottom right to avoid badge overlap */
.branch-card.selected::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: var(--primary-color, #ce3645);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 10;
}

/* Selection step styling */
.selection-step {
    padding: 1rem;
    border-radius: 0.75rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
}

/* Step Header Icons */
.step-header .step-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(206, 54, 69, 0.1), rgba(245, 158, 11, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Multi-select service card styling */
.service-card.multi-select-mode {
    cursor: pointer;
    position: relative;
}

.service-card.multi-select-mode .multi-select-checkbox {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border: 2px solid #dee2e6;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.service-card.multi-select-mode.selected .multi-select-checkbox {
    background: #28a745;
    border-color: #28a745;
}

.service-card.multi-select-mode.selected .multi-select-checkbox::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #fff;
    font-size: 12px;
}

/* Selected card styling - green highlight */
.service-card.selected,
.staff-card.selected {
    border-color: #28a745 !important;
    background-color: rgba(40, 167, 69, 0.08) !important;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
}

.service-card.selected::after,
.staff-card.selected::after {
    background: #28a745 !important;
}

/* Mode toggle button active state */
.btn-check:checked+.btn-outline-primary {
    background-color: var(--primary-color, #ce3645);
    border-color: var(--primary-color, #ce3645);
    color: white;
}

/* Booking Navigation Buttons - Larger size */
.booking-navigation .btn {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    min-width: 140px;
}

.booking-navigation .btn-primary {
    background: linear-gradient(135deg, #0B2A4A 0%, #1F6FA3 50%, #45A7D3 100%);
    border: 1px solid rgba(31, 111, 163, 0.65);
    box-shadow: 0 10px 26px rgba(31, 111, 163, 0.35);
    transition: all 0.2s ease;
}

.booking-navigation .btn-primary:hover {
    background: linear-gradient(135deg, #123E6A 0%, #1F6FA3 33%, #45A7D3 66%, #3DD9C9 100%);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(61, 217, 201, 0.5);
    border-color: rgba(31, 111, 163, 0.8);
}

.booking-navigation .btn-outline-secondary {
    border: 2px solid #6c757d;
    color: #6c757d;
    transition: all 0.2s ease;
}

.booking-navigation .btn-outline-secondary:hover:not(:disabled) {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.booking-navigation .btn-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: 1px solid #28a745;
    box-shadow: 0 10px 26px rgba(40, 167, 69, 0.35);
    transition: all 0.2s ease;
}

.booking-navigation .btn-success:hover {
    background: linear-gradient(135deg, #218838 0%, #1ea080 100%);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(40, 167, 69, 0.5);
}

@media (max-width: 576px) {
    .booking-navigation .btn {
        padding: 0.625rem 1.5rem;
        font-size: 0.95rem;
        min-width: 120px;
    }
}

/* Time Slots */
.time-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
}

.time-slot {
    padding: 0.75rem;
    text-align: center;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.time-slot:hover:not(.unavailable) {
    border-color: var(--primary-color, #ce3645);
    background-color: rgba(206, 54, 69, 0.05);
}

.time-slot.selected {
    background-color: var(--primary-color, #ce3645);
    color: white;
    border-color: var(--primary-color, #ce3645);
}

.time-slot.unavailable {
    background-color: #f8f9fa;
    color: #adb5bd;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Service Card - Grid layout like staff cards */
.service-card {
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

.service-card .card-body {
    text-align: center;
}

.service-card .service-image {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    border-radius: 0.5rem;
    object-fit: cover;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #868e96;
    font-size: 1.75rem;
}

.service-card .service-info {
    text-align: center;
}

.service-card .service-name {
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
    line-height: 1.3;
    color: #212529;
}

.service-card .service-description {
    font-size: 0.85rem;
    color: #6c757d;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.6em;
    margin-top: 0.5rem;
}

.service-card .service-price {
    font-weight: 600;
    font-size: 1rem;
    color: var(--primary-color, #ce3645);
    margin-top: 0.5rem;
}

/* Staff Card */
.staff-card {
    transition: all 0.25s ease;
    cursor: pointer;
}

.staff-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
}

/* Staff card selected - green to match service cards */
.staff-card .card-body {
    text-align: center;
}

.staff-card .staff-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.staff-card .staff-avatar-initials {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 0 auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.staff-card .staff-name {
    font-weight: 600;
    font-size: 1rem;
    color: #1a1a2e;
}

.staff-card .staff-title {
    font-size: 0.8rem;
    color: #6c757d;
}

.staff-card .staff-bio {
    font-size: 0.75rem;
    line-height: 1.4;
}

/* Branch Card Enhancements */
.branch-card {
    transition: all 0.25s ease;
    cursor: pointer;
}

.branch-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1) !important;
    border-color: var(--primary-color, #ce3645) !important;
}

.branch-card.selected {
    border: 2px solid var(--primary-color, #ce3645) !important;
    background: linear-gradient(135deg, rgba(206, 54, 69, 0.03), rgba(206, 54, 69, 0.08));
}

.branch-card .card-title {
    color: #1a1a2e;
    font-weight: 600;
}

/* Custom badge colors */
.bg-info-subtle {
    background-color: rgba(13, 202, 240, 0.15) !important;
}

.text-info {
    color: #0dcaf0 !important;
}

.bg-purple-subtle {
    background-color: rgba(139, 92, 246, 0.15) !important;
}

.text-purple {
    color: #8b5cf6 !important;
}

.bg-success-subtle {
    background-color: rgba(25, 135, 84, 0.15) !important;
}

.bg-primary-subtle {
    background-color: rgba(206, 54, 69, 0.1) !important;
}

.bg-warning-subtle {
    background-color: rgba(255, 193, 7, 0.15) !important;
}

.text-warning {
    color: #ffc107 !important;
}

.bg-secondary-subtle {
    background-color: rgba(108, 117, 125, 0.15) !important;
}

/* Price Display */
.price-amount {
    color: var(--primary-color, #ce3645);
    font-weight: 700;
}

/* Date Input */
.date-input-wrapper {
    position: relative;
}

/* Booking Summary */
.booking-summary .summary-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e9ecef;
}

.booking-summary .summary-item:last-child {
    border-bottom: none;
}

.booking-summary .summary-label {
    color: #6c757d;
}

.booking-summary .summary-value {
    font-weight: 500;
}

/* Responsive */
@media (max-width: 576px) {
    .time-slots-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .selection-mode-toggle .btn {
        font-size: 0.875rem;
        padding: 0.5rem;
    }
}

/* Flatpickr Customization */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.notAvailable {
    color: #bbb !important;
    background: #f5f5f5 !important;
    cursor: not-allowed !important;
    text-decoration: line-through;
    opacity: 0.6;
}

.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.notAvailable:hover {
    background: #f5f5f5 !important;
    border-color: transparent !important;
}

.flatpickr-day.selected {
    background: var(--primary-color, #ce3645) !important;
    border-color: var(--primary-color, #ce3645) !important;
}

.flatpickr-day.available {
    background: #e8f5e9;
    border-color: #c8e6c9;
}

.flatpickr-day.available:hover {
    background: #c8e6c9 !important;
    border-color: #a5d6a7 !important;
}
/* getme-css-bundle:end css/components/booking.css */


/* =============================================================================
   SECTIONS
   ============================================================================= */

/* getme-css-bundle: css/sections/hero.css */
/**
 * Hero Section Styles
 * Standard Theme - Section CSS
 */

/* ORTAK Hero Section (Tüm sayfalar için) */
.hero-section,
.partners-hero-section,
.careers-hero-section,
.contact-hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  padding: 90px 0 70px;
  position: relative;
  overflow: hidden;
}

/* Home page hero - biraz daha uzun */
.hero-section {
  padding: 100px 0 50px;
}

section#section-hero.hero-section {
  min-height: 0 !important;
  padding-top: 100px !important;
  padding-bottom: 50px !important;
}

/* Hero Gradient Only - resim yoksa sadece gradient */
.hero-section.hero-gradient-only,
.hero-gradient-only {
  background: linear-gradient(135deg, var(--primary-color, #ce3645) 0%, var(--secondary-color, #1a1a2e) 100%);
  color: white;
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
}

.hero-gradient-only::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='rgba(255,255,255,0.1)' d='M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,234.7C672,235,768,213,864,202.7C960,192,1056,192,1152,202.7C1248,213,1344,235,1392,245.3L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") no-repeat bottom;
  background-size: cover;
  pointer-events: none;
}

.hero-gradient-only .container {
  position: relative;
  z-index: 1;
}

.hero-gradient-only .hero-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.hero-gradient-only .hero-subtitle {
  font-size: 1.25rem;
  opacity: 0.9;
  max-width: 700px;
  margin: 0 auto;
}

.hero-content {
  position: relative;
  z-index: 1;
}

/* Hero content column width = reference desktop width (~756px = col-lg-7 inside
   a 1320px container). Pins the text-wrap point so the subtitle breaks exactly
   like the reference (line 1 ends "certified Canadian") regardless of the global
   container width. Hero-only — does NOT touch the header/global container. */
@media (min-width: 992px) {
  .hero-section .row > [class*="col-"] {
    flex: 0 0 auto !important;
    width: 770px !important;
    max-width: 100% !important;
  }
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
}

.hero-subtitle {
  font-size: 1.5rem;
  line-height: 1.5;
  opacity: 0.9;
  margin-bottom: 30px;
}

.hero-buttons {
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.hero-buttons .btn {
  padding: 12px 30px;
  border-radius: 30px;
  font-weight: 600;
  transition: all 0.1s ease;
  margin-right: 0;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

.hero-buttons .btn-primary {
  background-color: var(--tf-primary);
  border: 1px solid rgba(var(--primary-rgb), 0.7);
  box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.4);
  color: var(--text-light, #ffffff);
}

.hero-buttons .btn-primary:hover {
  background-color: var(--primary-hover, #b92f3d);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(var(--primary-rgb), 0.55);
  color: var(--text-light, #ffffff);
}

.hero-buttons .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-light, #ffffff);
  transform: translateY(-3px);
}

/* Default center alignment removed - now controlled by Bootstrap classes */

/* Hero Background & Overlay */
.hero-background {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.hero-background-video {
  overflow: hidden;
}

.hero-background-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-overlay-gradient);
}

/* Responsive */
@media (max-width: 991px) {
  .hero-title {
    font-size: 2.5rem;
  }

  .hero-subtitle {
    font-size: 1.2rem;
  }

  .hero-buttons {
    flex-wrap: wrap;
    gap: 10px;
    max-width: 100%;
  }

  .hero-buttons .btn {
    padding: 10px 24px;
    font-size: 0.95rem;
    /* Bootstrap's ms-2 on the 2nd button adds margin-left:.5rem!important,
       which stacks on the flex gap and pushes it past the viewport → override. */
    margin-left: 0 !important;
  }

  .hero-gradient-only .hero-title {
    font-size: 2.5rem;
  }

  .hero-gradient-only .hero-subtitle {
    font-size: 1.1rem;
  }

  .hero-img {
    margin-top: 40px;
  }
}

@media (max-width: 767.98px) {
  .hero-gradient-only .hero-title {
    font-size: 2rem;
  }

  /* Reference geometry (518px): heading 40px/48px, paragraph 19.2px/28.8px */
  .hero-title {
    font-size: 2.5rem;
  }

  .hero-gradient-only .hero-subtitle {
    font-size: 1rem;
  }

  .hero-subtitle {
    font-size: 1.2rem;
  }

  .hero-buttons {
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    max-width: 100%;
  }

  .hero-buttons .btn {
    font-size: 1rem;
    /* Stack full-width on phones so neither pill can overflow the screen. */
    flex: 1 1 100%;
    margin-left: 0 !important;
  }
}

/* getme-css-bundle:end css/sections/hero.css */


/* getme-css-bundle: css/sections/features.css */
/**
 * Features Section Styles
 * Standard Theme - Section CSS
 */

/* Features Section */
.features-section {
  padding: 80px 0;
  background-color: var(--bg-primary, #ffffff);
}

.features-section .section-title {
  color: var(--text-on-bg-primary, var(--heading-color, #1a1a2e));
}

.features-section .lead {
  color: var(--text-on-bg-primary, var(--text-color, #4b5563));
  opacity: 0.9;
}

/* Feature Card */
.feature-card {
  background: var(--card-bg, #ffffff);
  border-radius: 16px;
  padding: 24px;
  height: 100%;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.25));
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
  border-color: rgba(var(--color-primary-rgb, 0, 114, 255), 0.6);
}

/* Full-bleed card image — reference (modules/cards.css) exact values */
.feature-image-wrapper {
  width: 100%;
  height: 160px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.14);
}

.feature-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-icon {
  font-size: 2.5rem;
  color: var(--tf-primary, #0072ff);
}

.feature-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-on-card, #111827);
  margin-bottom: 10px;
}

.feature-text {
  font-size: 0.95rem;
  color: var(--text-on-card, #4b5563);
  line-height: 1.6;
}

.feature-link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--tf-primary, #0072ff);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.feature-link:hover {
  color: var(--tf-primary-hover, #0056cc);
}

/* Services CTA */
.services-cta {
  text-align: center;
  margin-top: 60px;
  padding-top: 0;
}

.services-cta-text {
  font-size: 1.25rem;
  color: var(--text-color, #4b5563);
  margin-bottom: 12px;
}

/* Features Bottom CTA */
.features-cta-text {
  font-size: 1.1rem;
  color: var(--text-color, #4b5563);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

a.btn-services-cta,
.features-section a.btn-services-cta {
  padding: 12px 32px !important;
  border-radius: 30px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  background-color: transparent !important;
  border: 2px solid #1a1a2e !important;
  color: #1a1a2e !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

a.btn-services-cta:hover,
.features-section a.btn-services-cta:hover {
  background-color: var(--tf-primary, #dc2626) !important;
  border-color: var(--tf-primary, #dc2626) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(220, 38, 38, 0.4);
}

/* Responsive */
@media (max-width: 767.98px) {
  .features-section {
    padding: 60px 0;
  }

  .feature-card {
    padding: 1.5rem;
    margin-top: 0;
    margin-bottom: 24px;
  }
}
/* getme-css-bundle:end css/sections/features.css */


/* getme-css-bundle: css/sections/testimonials.css */
/**
 * Testimonials Section Styles
 * Standard Theme - Section CSS
 */

/* Testimonials Section */
.testimonials-section {
  padding: 80px 0;
  background-color: var(--bg-secondary, #f8fafc);
  color: var(--text-on-bg-secondary, #1b1b1f);
}

.testimonials-section .section-title {
  color: var(--text-on-bg-secondary, #1b1b1f);
}

.testimonials-section .lead {
  color: var(--text-on-bg-secondary, #4b5563);
  opacity: 0.9;
}

/* Testimonial Card */
.testimonial-card {
  background: var(--card-bg, #ffffff);
  border-radius: 16px;
  padding: 2rem;
  height: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* Fill the 110px circular wrapper (components/cards.css) — reference values.
   The ring/border/shadow live on .testimonial-image-wrapper, so the image
   itself just fills 100% with object-fit: cover. */
.testimonial-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-quote {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-color, #4b5563);
  margin-bottom: 1.5rem;
  font-style: italic;
}

.testimonial-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--heading-color, #1a1a2e);
  margin-bottom: 0.25rem;
}

.testimonial-role {
  font-size: 0.875rem;
  color: var(--text-muted, #6c757d);
}

/* Rating Stars */
.testimonial-rating {
  margin-bottom: 1rem;
}

.testimonial-rating i {
  color: #ffc107;
  font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 767.98px) {
  .testimonials-section {
    padding: 60px 0;
  }

  .testimonial-card {
    padding: 1.5rem;
  }
}

/* getme-css-bundle:end css/sections/testimonials.css */


/* getme-css-bundle: css/sections/partners.css */
/**
 * Partners Section Styles
 * Standard Theme - Section CSS
 */

/* Partners Section */
.partners-section {
  padding: 56px 0 40px;
  background-color: var(--bg-secondary, #f9fafb);
  color: var(--text-on-bg-secondary, #1b1b1f);
}

.partners-section .section-title {
  color: var(--text-on-bg-secondary, #1b1b1f);
}

/* Partners Marquee */
.partners-marquee {
  position: relative;
  overflow: hidden;
  padding: 24px 0;
}

.partners-track {
  display: flex;
  align-items: center;
  gap: 40px;
  animation: partners-scroll 30s linear infinite;
  min-width: 200%;
}

.partner-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 18px;
  background-color: transparent;
  box-shadow: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-radius 0.25s ease;
}

.partner-logo-link:hover {
  transform: translateY(-4px);
  background-color: #ffffff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
  border-radius: 999px;
}

.partner-logo-img {
  height: 80px;
  width: auto;
  object-fit: contain;
}

@keyframes partners-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* Partners - Why Partner Section */
.why-partner-section {
  padding: 80px 0;
  background-color: var(--bg-secondary, #f8f9fa);
  color: var(--text-on-bg-secondary, #1b1b1f);
}

.why-partner-section .section-title {
  color: var(--text-on-bg-secondary, #1b1b1f);
}

.why-partner-section .lead {
  color: var(--text-on-bg-secondary, #1b1b1f);
  opacity: 0.9;
}

/* Partners - Ideal Partners Section */
.ideal-partners-section {
  padding: 80px 0;
  background-color: var(--bg-primary, #ffffff);
  color: var(--text-on-bg-primary, #1b1b1f);
}

.partners-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.partners-list li {
  padding: 12px 0;
  font-size: 1.05rem;
  color: var(--text-on-bg-primary, #1b1b1f);
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.partners-list li:last-child {
  border-bottom: none;
}

.partners-list li i {
  color: var(--tf-primary, #0072ff);
  font-size: 1.1rem;
}

.partners-image-wrapper {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
}

.partners-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Our Education Partners Marquee Section */
.our-partners-marquee-section {
  padding: 56px 0 40px;
  background-color: var(--bg-secondary, #f9fafb);
  color: var(--text-on-bg-secondary, #1b1b1f);
}

/* Responsive */
@media (max-width: 991px) {
  .ideal-partners-section {
    padding: 60px 0;
  }

  .ideal-partners-section .partners-image-wrapper {
    margin-bottom: 24px;
  }
}

@media (max-width: 767.98px) {
  .partners-track {
    animation-duration: 18s;
  }
}

@media (min-width: 768px) {
  .partners-track {
    animation-duration: 30s;
  }
}

/* getme-css-bundle:end css/sections/partners.css */


/* getme-css-bundle: css/sections/team.css */
/**
 * Team Section Styles
 * Standard Theme - Section CSS
 */

.team-section {
  background: var(--bg-primary, #f8f9fa);
  padding: 80px 0;
}

.team-section .section-title {
  color: var(--text-on-bg-primary, #1b1b1f);
}

.team-card {
  background: var(--card-bg, #ffffff);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--tf-primary, #0072ff);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
  transition: all 0.3s ease;
  text-align: center;
}

.team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(var(--color-primary-rgb, 0, 114, 255), 0.15);
  border-color: var(--tf-primary, #0072ff);
}

.team-image {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  margin: 1.5rem auto 0;
  border: 4px solid rgba(var(--color-primary-rgb, 0, 114, 255), 0.6);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
  position: relative;
}

.team-image::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb, 0, 114, 255), 0.1), transparent);
  pointer-events: none;
}

.team-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.team-card:hover .team-image {
  border-color: var(--tf-primary, #0072ff);
  box-shadow: 0 12px 30px rgba(var(--color-primary-rgb, 0, 114, 255), 0.25);
}

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

.team-info {
  padding: 1.5rem;
}

.team-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-on-card, #1a1a2e);
  margin-bottom: 0.25rem;
}

.team-position {
  display: inline-block;
  font-size: 0.85rem;
  color: #ffffff;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 20px;
  background: var(--tf-primary);
  margin-bottom: 1rem;
}

.team-bio {
  font-size: 0.875rem;
  color: var(--text-muted, #6c757d);
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 767.98px) {
  .team-section {
    padding: 60px 0;
  }

  .team-image {
    width: 120px;
    height: 120px;
  }

  .team-name {
    font-size: 1.1rem;
  }

  .team-info {
    padding: 1rem;
  }
}

/* getme-css-bundle:end css/sections/team.css */


/* getme-css-bundle: css/sections/faq.css */
/**
 * FAQ Section Styles
 * Standard Theme - Section CSS
 */

/* FAQ Section */
.faq-section {
  padding: 80px 0;
  background-color: var(--bg-primary, #ffffff);
}

.faq-section .section-title {
  color: var(--heading-color, #1a1a2e);
}

/* FAQ Content */
.faq-content {
  padding: 60px 0;
}

/* FAQ Category */
.faq-category {
  margin-bottom: 3rem;
}

.faq-category-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--heading-color, #1a1a2e);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--tf-primary, #0072ff);
  display: inline-block;
}

/* FAQ Accordion */
.faq-accordion {
  border: none;
}

.faq-accordion .accordion-item {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  margin-bottom: 1rem;
  overflow: hidden;
  background: var(--card-bg, #ffffff);
}

.faq-accordion .accordion-button {
  padding: 1.25rem 1.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--heading-color, #1a1a2e);
  background: var(--card-bg, #ffffff);
  border: none;
  box-shadow: none;
}

.faq-accordion .accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb, 0, 114, 255), 0.05), rgba(var(--color-primary-rgb, 0, 114, 255), 0.02));
  color: var(--tf-primary, #0072ff);
}

.faq-accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230072ff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.faq-accordion .accordion-body {
  padding: 1rem 1.5rem 1.5rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-color, #4b5563);
}

/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--tf-primary, #0072ff);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background: var(--tf-primary-hover, #0056cc);
  color: #ffffff;
  transform: translateY(-3px);
}

/* Responsive */
@media (max-width: 767.98px) {
  .faq-section,
  .faq-content {
    padding: 50px 0;
  }

  .faq-category-title {
    font-size: 1.25rem;
  }

  .faq-accordion .accordion-button {
    padding: 1rem 1.25rem;
    font-size: 1rem;
  }

  .faq-accordion .accordion-body {
    padding: 0.75rem 1.25rem 1.25rem;
  }

  .back-to-top {
    width: 45px;
    height: 45px;
    bottom: 20px;
    right: 20px;
  }
}

/* getme-css-bundle:end css/sections/faq.css */


/* getme-css-bundle: css/sections/cta.css */
/**
 * CTA Section Styles
 * Standard Theme - Section CSS
 */

/* CTA Section */
.cta-section {
  padding: 80px 0;
  background-color: var(--card-bg, #ffffff);
  color: var(--text-on-card, #111827);
  text-align: center;
}

.cta-section .section-title,
.cta-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  /* Brand red gradient text (reference typography.css) */
  background: var(--gradient-primary, linear-gradient(135deg, var(--tf-primary, #ce3645) 0%, var(--tf-secondary, #1a1a2e) 100%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cta-section .lead,
.cta-text {
  font-size: 1.125rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto 1.5rem;
}

.cta-image-wrapper {
  max-width: 520px;
  margin: 0 auto 24px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
}

.cta-image {
  width: 100%;
  height: auto;
  display: block;
}

/* CTA with gradient background */
.cta-section.cta-gradient {
  background: linear-gradient(135deg, var(--tf-primary, #0072ff) 0%, var(--secondary-color, #00c6ff) 100%);
  color: #ffffff;
}

.cta-section.cta-gradient .cta-title,
.cta-section.cta-gradient .cta-text {
  color: #ffffff;
}

/* CTA with primary background */
.cta-section.cta-primary {
  background-color: var(--tf-primary, var(--primary-color, #0072ff));
  color: #ffffff;
}

.cta-section.cta-primary .cta-title,
.cta-section.cta-primary .cta-subtitle,
.cta-section.cta-primary p,
.cta-section.cta-primary h2,
.cta-section.cta-primary .section-title {
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* CTA Button on primary background - white background, red text */
.cta-section.cta-primary .btn,
.cta-section.cta-primary .btn-light {
  background-color: #ffffff !important;
  color: var(--tf-primary, #dc2626) !important;
  border-color: #ffffff !important;
  border-radius: 30px;
  padding: 12px 32px;
  font-weight: 600;
}

.cta-section.cta-primary .btn:hover,
.cta-section.cta-primary .btn-light:hover {
  background-color: rgba(255, 255, 255, 0.9) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Counter Items (for CTA sections with stats) */
.counter-item {
  text-align: center;
  margin-top: 40px;
  padding: 20px;
}

.counter-number {
  font-size: 3rem;
  font-weight: 700;
  background: var(--primary-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.counter-text {
  font-size: 1.1rem;
  margin-top: 10px;
  opacity: 0.9;
}

/* Responsive */
@media (max-width: 767.98px) {
  .cta-section {
    padding: 60px 0;
  }

  .cta-title {
    font-size: 1.75rem;
  }

  .counter-number {
    font-size: 2.5rem;
  }
}

/* getme-css-bundle:end css/sections/cta.css */


/* getme-css-bundle: css/sections/newsletter.css */
/* =============================================================================
   NEWSLETTER SECTION
   Markup: sections/newsletter.html → heading + .newsletter-social icon row.

   The signup form was removed (submission + CSRF are runtime-owned, see the
   section template), so this stylesheet no longer skins form controls. It now
   styles the social profile row that took the form's place. Icons follow the
   same visual language as sections/social.css — brand-tinted on hover, lifting
   slightly — but in a compact circular form suited to a closing band.
   ============================================================================= */

.newsletter-section .newsletter-title {
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.newsletter-section .newsletter-subtitle {
  opacity: 0.85;
  margin-bottom: 0;
}

.newsletter-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.75rem;
}

.newsletter-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--border-color, #e0e0e0);
  background: var(--card-bg, #ffffff);
  color: var(--text-on-card, #1b1b1f);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform var(--theme-animation-duration-normal, 250ms)
              var(--theme-animation-easing-standard, ease),
              box-shadow var(--theme-animation-duration-normal, 250ms)
              var(--theme-animation-easing-standard, ease),
              background-color var(--theme-animation-duration-normal, 250ms)
              var(--theme-animation-easing-standard, ease),
              border-color var(--theme-animation-duration-normal, 250ms)
              var(--theme-animation-easing-standard, ease),
              color var(--theme-animation-duration-normal, 250ms)
              var(--theme-animation-easing-standard, ease);
}

.newsletter-social-link i {
  font-size: 1.25rem;
  line-height: 1;
}

.newsletter-social-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
  color: #ffffff;
}

.newsletter-social-link:focus-visible {
  outline: 2px solid var(--primary-color, #ce3645);
  outline-offset: 3px;
}

/* Platform-specific hover colours — same palette as sections/social.css. */
.newsletter-social-link.instagram:hover {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border-color: transparent;
}

.newsletter-social-link.facebook:hover {
  background: linear-gradient(135deg, #1877f2 0%, #0c63d4 100%);
  border-color: transparent;
}

.newsletter-social-link.tiktok:hover {
  background: linear-gradient(135deg, #000000 0%, #333333 100%);
  border-color: transparent;
}

.newsletter-social-link.linkedin:hover {
  background: linear-gradient(135deg, #0077b5 0%, #005885 100%);
  border-color: transparent;
}

.newsletter-social-link.twitter:hover {
  background: linear-gradient(135deg, #1da1f2 0%, #0d8bd9 100%);
  border-color: transparent;
}

.newsletter-social-link.youtube:hover {
  background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
  border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .newsletter-social-link {
    transition: none;
  }

  .newsletter-social-link:hover {
    transform: none;
  }
}

/* getme-css-bundle:end css/sections/newsletter.css */


/* getme-css-bundle: css/sections/contact.css */
/**
 * Contact Section Styles
 * Standard Theme - Section CSS
 */

/* Contact Hero */
.contact-hero {
  padding: 90px 0 70px;
}

.contact-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(var(--color-primary-rgb, 0, 114, 255), 0.35), transparent 55%);
  opacity: 0.9;
}

.contact-hero .container,
.contact-hero .row {
  position: relative;
  z-index: 1;
}

.contact-hero .hero-img-wrapper {
  max-width: 420px;
  margin-left: auto;
}

.contact-hero .hero-img-wrapper img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  object-fit: cover;
}

/* Contact Form Image */
.contact-form-img-wrapper {
  max-width: 520px;
  margin: 0 auto;
}

.contact-form-img-wrapper img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  object-fit: cover;
}

/* Visible Form Section */
.visible-form-section {
  background-color: #ffffff;
  color: var(--text-on-bg-primary, #1b1b1f);
  padding: 80px 0 80px;
  scroll-margin-top: 70px;
}

body.contact-page .visible-form-section {
  background-color: #ffffff;
}

.visible-form-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.visible-form-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted, #6c757d);
  margin-bottom: 2rem;
}

/* Contact Info Section */
.contact-info-section {
  padding: 70px 0;
}

.contact-info-card {
  background: var(--card-bg, #ffffff);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  height: 100%;
}

.contact-info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.contact-info-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tf-primary, #0072ff), var(--secondary-color, #00c6ff));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.5rem;
}

/* Contact Map Section */
.contact-map-section {
  padding: 50px 0 80px;
  background-color: var(--bg-secondary, #f8fafc);
}

.contact-map-section .visible-form-title {
  color: var(--text-on-bg-secondary, #1b1b1f);
}

.contact-map-section .visible-form-subtitle {
  color: var(--text-on-bg-secondary, #4b5563);
  opacity: 0.9;
}

.contact-map-wrapper {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
}

.contact-map-wrapper iframe {
  width: 100%;
  height: 260px;
  border: 0;
  display: block;
}

/* Responsive */
@media (max-width: 991px) {
  .contact-hero {
    padding: 70px 0 50px;
  }

  .contact-hero .hero-img-wrapper {
    margin: 30px auto 0;
  }
}

@media (max-width: 767.98px) {
  .visible-form-section {
    padding: 60px 0;
  }

  .visible-form-title {
    font-size: 1.5rem;
  }
}

/* getme-css-bundle:end css/sections/contact.css */


/* getme-css-bundle: css/sections/about.css */
/**
 * About Section Styles
 * Standard Theme - Section CSS
 */

/* About Page Hero */
body.about-page .hero-section {
  padding: 90px 0 70px;
}

body.about-page .hero-img {
  position: relative;
  z-index: 1;
  padding: 20px;
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb, 0, 114, 255), 0.08), rgba(var(--color-primary-rgb, 0, 114, 255), 0.04));
  border-radius: 20px;
  border: 2px solid rgba(var(--color-primary-rgb, 0, 114, 255), 0.15);
  transition: all 0.4s ease;
}

body.about-page .hero-img:hover {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb, 0, 114, 255), 0.12), rgba(var(--color-primary-rgb, 0, 114, 255), 0.06));
  border-color: rgba(var(--color-primary-rgb, 0, 114, 255), 0.3);
  transform: translateY(-5px);
}

body.about-page .hero-img img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition: all 0.4s ease;
  display: block;
}

body.about-page .hero-img:hover img {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

/* About Preview Section */
.about-preview-section {
  padding: 70px 0 60px;
  background: linear-gradient(135deg, #fafbfc 0%, #f4f5f7 100%);
  position: relative;
}

.about-preview-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(var(--color-primary-rgb, 0, 114, 255), 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(var(--color-primary-rgb, 0, 114, 255), 0.03) 0%, transparent 50%);
  pointer-events: none;
}

.about-section-heading {
  margin-bottom: 40px;
  position: relative;
}

.about-summary-card .about-section-heading {
  margin-bottom: 24px;
}

.about-section-title {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--tf-primary, #0072ff);
  margin-bottom: 0.5rem;
}

.about-section-subtitle {
  font-size: 2rem;
  font-weight: 700;
  color: var(--heading-color, #1a1a2e);
}

.about-summary-card {
  background: var(--card-bg, #ffffff);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.about-preview-text {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-color, #4b5563);
  margin-bottom: 1rem;
}

.about-preview-services-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--heading-color, #1a1a2e);
  margin-bottom: 0.75rem;
}

.about-preview-services-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-preview-services-list li {
  margin-bottom: 12px;
  padding-left: 32px;
  color: var(--text-secondary, #374151);
  font-size: 1rem;
  line-height: 1.6;
  position: relative;
  transition: all 0.2s ease;
}

.about-preview-services-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  background: #ce3645;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.8rem;
}

.about-preview-services-list li:hover {
  color: var(--text-on-card, #111827);
}

.about-banner-wrapper {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
}

.about-banner-image {
  width: 100%;
  height: auto;
  display: block;
}

.about-founder-section {
  padding: 16px 0 40px;
  background-color: var(--bg-secondary, #f9fafb);
}

.about-preview-btn {
  margin-top: 4px;
}

/* About Approach Section */
.about-approach-section {
  padding: 80px 0;
  background-color: var(--bg-secondary, #ffffff);
  color: var(--text-on-bg-secondary, #1b1b1f);
}

.about-approach-content {
  padding-right: 20px;
}

.about-approach-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.about-approach-text {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-color, #4b5563);
  margin-bottom: 1.5rem;
}

.about-approach-features {
  margin-bottom: 20px;
}

.approach-feature {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.approach-feature-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb, 0, 114, 255), 0.1), rgba(var(--color-primary-rgb, 0, 114, 255), 0.05));
  color: var(--tf-primary, #0072ff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.approach-feature-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.approach-feature-text {
  font-size: 0.9rem;
  color: var(--text-muted, #6c757d);
  line-height: 1.5;
}

.about-approach-image-wrapper {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
  position: relative;
}

.about-approach-image {
  width: 100%;
  height: auto;
  display: block;
}

.about-approach-cta {
  margin-top: 1.5rem;
}

/* Responsive */
@media (max-width: 991px) {
  .about-approach-section {
    padding: 60px 0;
  }

  .about-approach-content {
    padding-right: 0;
  }

  .about-approach-image-wrapper {
    margin-bottom: 30px;
  }
}

@media (max-width: 767.98px) {
  .about-preview-section {
    padding: 50px 0 40px;
  }

  .about-summary-card {
    padding: 1.5rem;
  }

  .about-section-subtitle {
    font-size: 1.5rem;
  }
}

/* getme-css-bundle:end css/sections/about.css */


/* getme-css-bundle: css/sections/social.css */
/**
 * Social Section Styles
 * Standard Theme - Section CSS
 */

.about-social-section {
  padding: 80px 0;
  background: var(--bg-secondary, #f8f9fa);
  position: relative;
  overflow: hidden;
}

.about-social-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--color-primary-rgb, 0, 114, 255), 0.3) 50%, transparent 100%);
}

.about-social-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--text-on-bg-secondary, #1b1b1f);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.about-social-subtitle {
  font-size: 1.125rem;
  color: var(--text-on-bg-secondary, #6b7280);
  opacity: 0.9;
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

.about-social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.about-social-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  background: var(--card-bg, #ffffff);
  border-radius: 20px;
  text-decoration: none;
  color: var(--text-on-card, #1b1b1f);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.about-social-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(var(--color-primary-rgb, 0, 114, 255), 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.about-social-link:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.about-social-link:hover::before {
  opacity: 1;
}

.about-social-link i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.about-social-label {
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Platform-specific colors */
.about-social-link.facebook:hover {
  background: linear-gradient(135deg, #1877f2 0%, #0c63d4 100%);
  color: #ffffff;
}

.about-social-link.instagram:hover {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #ffffff;
}

.about-social-link.linkedin:hover {
  background: linear-gradient(135deg, #0077b5 0%, #005885 100%);
  color: #ffffff;
}

.about-social-link.twitter:hover {
  background: linear-gradient(135deg, #1da1f2 0%, #0d8bd9 100%);
  color: #ffffff;
}

.about-social-link.youtube:hover {
  background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
  color: #ffffff;
}

.about-social-link.tiktok:hover {
  background: linear-gradient(135deg, #000000 0%, #333333 100%);
  color: #ffffff;
}

/* Responsive */
@media (max-width: 767.98px) {
  .about-social-section {
    padding: 60px 0;
  }

  .about-social-title {
    font-size: 1.75rem;
  }

  .about-social-subtitle {
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .about-social-links {
    gap: 1rem;
  }

  .about-social-link {
    width: 100px;
    height: 100px;
  }

  .about-social-link i {
    font-size: 1.5rem;
  }

  .about-social-label {
    font-size: 0.75rem;
  }
}

@media (max-width: 575.98px) {
  .about-social-link {
    width: 90px;
    height: 90px;
  }

  .about-social-link i {
    font-size: 1.25rem;
  }
}

/* getme-css-bundle:end css/sections/social.css */


/* getme-css-bundle: css/sections/careers.css */
/**
 * Careers Section Styles
 * Standard Theme - Section CSS
 */

/* Careers Hero */
.careers-hero-section {
  padding: 90px 0 70px;
}

/* Why Join Section */
.why-join-section {
  padding: 80px 0;
  background-color: var(--bg-secondary, #f8f9fa);
  color: var(--text-on-bg-secondary, #1b1b1f);
}

.why-join-section .section-title {
  color: var(--text-on-bg-secondary, #1b1b1f);
}

.why-join-section .lead {
  color: var(--text-on-bg-secondary, #1b1b1f);
  opacity: 0.9;
}

/* What We're Looking For Section */
.looking-for-section {
  padding: 80px 0;
  background-color: var(--bg-primary, #ffffff);
  color: var(--text-on-bg-primary, #1b1b1f);
}

.qualities-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.qualities-list li {
  padding: 12px 0;
  font-size: 1.05rem;
  color: var(--text-on-bg-primary, #1b1b1f);
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.qualities-list li:last-child {
  border-bottom: none;
}

.qualities-list li i {
  color: var(--tf-primary, #0072ff);
  font-size: 1.1rem;
}

.careers-image-wrapper {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
}

.careers-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive */
@media (max-width: 991px) {
  .looking-for-section {
    padding: 60px 0;
  }

  .looking-for-section .careers-image-wrapper {
    margin-bottom: 24px;
  }
}

@media (max-width: 767.98px) {
  .why-join-section,
  .looking-for-section {
    padding: 50px 0;
  }
}

/* getme-css-bundle:end css/sections/careers.css */


/* getme-css-bundle: css/sections/service-detail.css */
/* ════════════════════════════════════════════════════════════════════
   service-detail — section stylesheet (self-contained)

   Owner       : sections/service-detail.json + sections/service-detail.html
   Namespace   : --sd-*  (service-detail). Do NOT reuse for other sections.
   Scope       : Every rule starts with `.gm-service-detail-section`.
   Editor      : Per-instance overrides via inline CSS variables in the
                 section's <section style=""> attribute. Editor uses
                 `css_vars_patch` to mutate them live.
   Token chain : --sd-<x>  →  var(--theme-<x>) / var(--gm-<x>).
   ════════════════════════════════════════════════════════════════════ */

.gm-service-detail-section {
    /* Token chain — overridable by inline style on the section. */
    --sd-section-bg: transparent;
    --sd-text-color: var(--gm-text);
    --sd-title-color: var(--gm-text);
    --sd-kicker-color: var(--gm-muted);
    --sd-price-color: var(--gm-text);
    --sd-compare-color: var(--gm-muted);
    --sd-button-bg: var(--gm-primary);
    --sd-button-text: var(--gm-on-primary);
    --sd-button-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md)));
    --sd-button-shadow: var(--gm-button-shadow, var(--theme-button-shadow, none));
    --sd-section-padding-block: var(--theme-spacing-3xl);
    --sd-content-gap: var(--theme-spacing-xl);
    --sd-media-radius: var(--theme-radius-lg);
    --sd-media-shadow: var(--theme-shadow-sm);
    --sd-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --sd-body-font: var(--font-primary, sans-serif);

    /* The artwork lives on the section, not on the hero: the hero and the
       related-services band below it are both children here, so one picture
       spans the pair instead of stopping at the hero's edge. `100% auto` keeps
       its aspect ratio — every motif scales with the viewport rather than
       being cropped away — and the ground colour matches the artwork's own
       bottom row (#fdd2d4) so the page continues seamlessly past it. */
    background: var(--sd-section-bg);
    border: none;
    /* Positioning context for the mobile wash below. */
    position: relative;
    border-radius: 0;
    color: var(--sd-text-color);
    font-family: var(--sd-body-font);
    padding: var(--sd-section-padding-block) var(--gm-section-inline-padding);
}

/* ── Breadcrumb ─────────────────────────────────────────────────── */
.gm-service-detail-section .gm-service-detail__breadcrumb {
    color: var(--sd-text-color);
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    gap: 6px;
    margin-bottom: 18px;
    opacity: 0.7;
}

.gm-service-detail-section .gm-service-detail__breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.gm-service-detail-section .gm-service-detail__breadcrumb a:hover {
    text-decoration: underline;
}

/* ── Layout: media + info ───────────────────────────────────────── */
.gm-service-detail-section .gm-service-detail__layout {
    display: grid;
    gap: var(--sd-content-gap);
    /* Media ~42% of the row — shared standard with product-detail. */
    grid-template-columns: minmax(0, 0.92fr) minmax(340px, 1.28fr);
}

.gm-service-detail-section .gm-service-detail__gallery,
.gm-service-detail-section .gm-service-detail__info {
    min-width: 0;
}

/* Keep the hero media in view while the info column scrolls —
   matches the storefront product-page reading pattern. */
.gm-service-detail-section .gm-service-detail__gallery {
    align-self: start;
    position: sticky;
    top: 24px;
}

/* ── Media ──────────────────────────────────────────────────────── */
.gm-service-detail-section .gm-service-detail__media {
    /* Frameless media — rounded image, no border/shadow box around it. */
    background: var(--gm-surface);
    border-radius: var(--sd-media-radius);
    overflow: hidden;
}

.gm-service-detail-section .gm-service-detail__media img {
    aspect-ratio: 1 / 1;
    display: block;
    height: auto;
    object-fit: contain;
    width: 100%;
}

.gm-service-detail-section--image-landscape .gm-service-detail__media img { aspect-ratio: 4 / 3; }
.gm-service-detail-section--image-portrait .gm-service-detail__media img { aspect-ratio: 3 / 4; }
.gm-service-detail-section--image-auto .gm-service-detail__media img { aspect-ratio: auto; }

.gm-service-detail-section .gm-service-detail__media-placeholder {
    aspect-ratio: 1 / 1;
    background: var(--gm-media-surface);
    display: block;
    width: 100%;
}

/* ── Info column ────────────────────────────────────────────────── */
.gm-service-detail-section .gm-service-detail__kicker-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.gm-service-detail-section .gm-kicker {
    color: var(--sd-kicker-color);
    line-height: 1.4;
    /* Global .gm-kicker carries margin-bottom: 12px — inside the flex
       kicker row it breaks vertical centering against the badge. */
    margin: 0;
}

.gm-service-detail-section .gm-service-detail__badge {
    line-height: 1.4;
}

.gm-service-detail-section .gm-service-detail__badge {
    background: color-mix(in srgb, var(--sd-button-bg) 12%, transparent);
    border-radius: var(--theme-radius-pill, 999px);
    color: var(--sd-button-bg);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    text-transform: uppercase;
}

.gm-service-detail-section .gm-service-detail__title {
    color: var(--sd-title-color);
    font-family: var(--sd-title-font);
    font-size: 40px;
    line-height: 1.15;
    margin: 6px 0 12px;
    overflow-wrap: anywhere;
}

.gm-service-detail-section .gm-service-detail__summary {
    color: var(--sd-text-color);
    line-height: 1.65;
    margin: 0 0 16px;
    opacity: 0.85;
}

/* ── Price ──────────────────────────────────────────────────────── */
.gm-service-detail-section .gm-service-detail__price {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 8px;
}

.gm-service-detail-section .gm-service-detail__amount {
    color: var(--sd-price-color);
    font-size: 30px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.gm-service-detail-section .gm-service-detail__compare-price {
    color: var(--sd-compare-color);
    font-size: 15px;
    text-decoration: line-through;
}

.gm-service-detail-section .gm-service-detail__period {
    color: var(--sd-text-color);
    font-size: 15px;
    opacity: 0.7;
}

/* ── Availability badge ─────────────────────────────────────────── */
.gm-service-detail-section .gm-service-detail__availability {
    align-items: center;
    color: var(--sd-text-color);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    margin: 0 0 8px;
    opacity: 0.85;
}

.gm-service-detail-section .gm-service-detail__availability-dot {
    background: var(--gm-muted);
    border-radius: 50%;
    height: 8px;
    width: 8px;
}

.gm-service-detail-section .gm-service-detail__availability.is-available .gm-service-detail__availability-dot {
    background: #16a34a;
}

/* ── Actions ────────────────────────────────────────────────────── */
.gm-service-detail-section .gm-service-detail__actions {
    display: grid;
    gap: 10px;
    margin: 20px 0;
}

.gm-service-detail-section .gm-service-detail__cta {
    align-items: center;
    background: var(--sd-button-bg);
    border: 1px solid var(--sd-button-bg);
    border-radius: var(--sd-button-radius);
    box-shadow: var(--sd-button-shadow);
    color: var(--sd-button-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    text-decoration: none;
    transition: filter 160ms ease;
    width: 100%;
}

.gm-service-detail-section .gm-service-detail__cta:hover {
    filter: brightness(0.92);
}

.gm-service-detail-section .gm-service-detail__cta--secondary {
    background: transparent;
    color: var(--sd-button-bg);
}

.gm-service-detail-section .gm-service-detail__cta:disabled,
.gm-service-detail-section .gm-service-detail__cta[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* ── Tags ───────────────────────────────────────────────────────── */
.gm-service-detail-section .gm-service-detail__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.gm-service-detail-section .gm-service-detail__tags li {
    background: var(--gm-surface);
    border: 1px solid var(--gm-border);
    border-radius: var(--theme-radius-pill, 999px);
    color: var(--sd-text-color);
    font-size: 13px;
    opacity: 0.85;
    padding: 4px 12px;
}

/* ── Content sections (description / features) — info column ────── */
.gm-service-detail-section .gm-service-detail__section {
    border-top: 1px solid var(--gm-border);
    margin-top: 24px;
    padding-top: 20px;
}

.gm-service-detail-section .gm-service-detail__section h2 {
    font-family: var(--sd-title-font);
    font-size: 18px;
    margin: 0 0 12px;
}

.gm-service-detail-section .gm-rich-text {
    color: var(--sd-text-color);
    font-size: 15px;
    line-height: 1.7;
}

.gm-service-detail-section .gm-rich-text p:first-child {
    margin-top: 0;
}

.gm-service-detail-section .gm-service-detail__description-text {
    color: var(--sd-text-color);
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

.gm-service-detail-section .gm-service-detail__features {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gm-service-detail-section .gm-service-detail__features li {
    align-items: flex-start;
    color: var(--sd-text-color);
    display: flex;
    font-size: 15px;
    gap: 10px;
    line-height: 1.55;
}

.gm-service-detail-section .gm-service-detail__features svg {
    color: var(--sd-button-bg);
    flex-shrink: 0;
    height: 18px;
    margin-top: 2px;
    width: 18px;
}

/* ── Missing-service fallback ───────────────────────────────────── */
.gm-service-detail-section--missing {
    text-align: center;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .gm-service-detail-section .gm-service-detail__layout {
        grid-template-columns: 1fr;
    }
    .gm-service-detail-section .gm-service-detail__gallery {
        position: static;
    }
}

@media (max-width: 760px) {
    .gm-service-detail-section .gm-service-detail__title {
        font-size: 32px;
    }
}

@media (max-width: 640px) {
    .gm-service-detail-section {
        padding: var(--sd-section-padding-block) 18px;
    }
}

/* =============================================================================
   HERO — full-bleed band, copy on the left, assurance panel on the right
   ============================================================================= */

.gm-service-detail-section .gm-service-detail__hero {
  /* One measure for the whole left column: title, lead, body and buttons all
     end on the same edge instead of each carrying its own width. */
  --sd-copy-measure: 30rem;
  /* Full-bleed without bare 100vw: negative inline margins reach the viewport
     edges without the scrollbar overflow a 100vw width would cause. */
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(31px, 4.2vw, 56px);
  padding-inline: clamp(16px, 3.5vw, 45px);
  background-color: transparent;
}

/* One picture for the pair: the artwork is painted by the section, so it runs
   behind the hero and the related-services band without stopping at the seam
   between them. `100% auto` keeps its aspect ratio — every motif scales with
   the viewport instead of being cropped — and the ground colour matches the
   artwork's own bottom row so the page continues past it cleanly. */
.gm-service-detail-section.has-image {
  background-color: #fdd2d4;
  background-image: var(--sd-hero-bg);
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}

/* Serve the image at roughly the size it is painted at. The original is 2400px
   wide (~102 KB); a phone gets the 800px variant (~6 KB) and a tablet the
   1280px one (~16 KB) — the same picture, since this is a soft low-contrast
   backdrop where the extra pixels are not visible. Each variable falls back to
   the full-size one, so an image without variants still renders. */
@media (max-width: 991px) {
  .gm-service-detail-section.has-image {
    background-image: var(--sd-hero-bg-lg, var(--sd-hero-bg));
  }
}

@media (max-width: 575px) {
  .gm-service-detail-section.has-image {
    background-image: var(--sd-hero-bg-md, var(--sd-hero-bg));
  }
}

/* A retina phone paints ~2x its CSS width, so the 800px file would be stretched
   past its own resolution there; those devices take the 1280px one instead —
   still an eighth of the original's weight. */
@media (max-width: 575px) and (min-resolution: 2dppx) {
  .gm-service-detail-section.has-image {
    background-image: var(--sd-hero-bg-lg, var(--sd-hero-bg));
  }
}

.gm-service-detail-section .gm-service-detail__hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(22px, 3.5vw, 50px);
  max-width: 1080px;
  margin-inline: auto;
}

/* ---- hero price: sits under the service name ---- */

/* The breadcrumb spans the hero's own measure, above the two columns. */
.gm-service-detail-section .gm-service-detail__hero > .gm-service-detail__breadcrumb {
  max-width: 1080px;
  margin-inline: auto;
  margin-block-end: 13px;
}

/* Title left, price hard right on the same line. Centred rather than baseline-
   aligned: the price is a two-line block (label over figure), so its baseline
   is its label's and would ride high against the heading.
   The row is held to the lead paragraph's measure so the price ends on the same
   edge as the copy below it, instead of running out to the column's full width. */
/* The figure sits on the title's line, not the price block's midpoint: the
   price is two lines (a small "From" over the amount) against a one-line title,
   so centring the boxes pushed the amount below the title. `last baseline` takes
   the block's final line — the figure — as the alignment line; the label then
   rides above it, which is the reading order anyway. */
.gm-service-detail-section .gm-service-detail__hero-headrow {
  display: flex;
  /* `end` is the fallback for browsers without `last baseline` (older Safari):
     bottom-aligning the two boxes lands the figure on the title's line too,
     since the figure is the price block's last line. */
  align-items: end;
  align-items: last baseline;
  justify-content: space-between;
  /* The gap closes up before anything else does when the row gets tight. */
  gap: clamp(10px, 3vw, 40px);
  max-width: var(--sd-copy-measure);
  margin-block-end: 16px;
}

/* The title takes the leftover room and wraps within it. */
.gm-service-detail-section .gm-service-detail__hero-headrow .gm-service-detail__hero-kicker {
  flex: 1 1 auto;
  min-width: 0;
  margin-block-end: 0;
}

/* Matches the fees table's "From <amount>" block. The values are restated here
   rather than inherited: those live under .gm-fees in pages/pricing.css, which
   this page does not carry, so relying on them would leave the price unstyled.
   No fixed width: the block is exactly as wide as the figure, so its right edge
   lands on the row's edge — the same edge the copy below ends on. */
.gm-service-detail-section .gm-service-detail__hero-from {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: end;
}

.gm-service-detail-section .gm-service-detail__hero-from .gm-fees__from-label {
  /* 1.2x the fees-table size on a wide screen, easing down to 0.85x on a narrow
     one so the figure keeps its place on the title's line instead of wrapping
     under it. The widget contract fixes this section's editable settings, so
     the scale lives here rather than as a setting. */
  font-size: calc(0.75rem * var(--sd-price-scale, clamp(0.85, 0.62 + 0.9vw, 1.2)));
  font-weight: 400;
  color: var(--text-muted, #6c757d);
  line-height: 1.2;
}

.gm-service-detail-section .gm-service-detail__hero-from .gm-fees__from-amount {
  font-size: calc(1.0625rem * var(--sd-price-scale, clamp(0.85, 0.62 + 0.9vw, 1.2)));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* Brand colour by default. --sd-price-color is not used as the fallback here:
     the section root always defines it (as --gm-text), so it would never fall
     through to the brand red. The template emits --sd-hero-price-color only when
     the "Price color" setting is actually set, so an editor choice still wins. */
  color: var(--sd-hero-price-color, var(--gm-primary, var(--primary-color, #ce3645)));
  line-height: 1.2;
  white-space: nowrap;
}

/* ---- left column ---- */

.gm-service-detail-section .gm-service-detail__breadcrumb {
  margin-block-end: 26px;
}

.gm-service-detail-section .gm-service-detail__hero-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: clamp(0.84rem, 1.74vw, 1.37rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--primary-color, #ce3645);
}

.gm-service-detail-section .gm-service-detail__hero-kicker-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(206, 54, 69, 0.1);
  font-size: 1rem;
}

.gm-service-detail-section .gm-service-detail__hero-title {
  margin: 0 0 11px;
  font-size: clamp(0.84rem, 1.74vw, 1.37rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--heading-color, #0b0c14);
  max-width: var(--sd-copy-measure);
}

.gm-service-detail-section .gm-service-detail__hero-summary {
  margin: 0 0 14px;
  max-width: var(--sd-copy-measure);
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--heading-color, #0b0c14);
}

/* Long copy: smaller and lighter than the lead above it, and held to a
   readable measure so it does not run the width of the band. */
.gm-service-detail-section .gm-service-detail__hero-body {
  margin: 0 0 21px;
  max-width: var(--sd-copy-measure);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--text-color, #495057);
}

.gm-service-detail-section .gm-service-detail__hero-body > :first-child {
  margin-block-start: 0;
}

.gm-service-detail-section .gm-service-detail__hero-body > :last-child {
  margin-block-end: 0;
}

/* ---- actions ---- */

.gm-service-detail-section .gm-service-detail__hero-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  /* Bounded by the copy measure, but never wider than the buttons themselves —
     they size to their labels rather than stretching to fill the column. */
  max-width: min(var(--sd-copy-measure), max-content);
}

.gm-service-detail-section .gm-service-detail__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* An earlier rule in this file sets `width: 100%` on the CTA; that is what
     stretched the pair across the column and under the panel. The label sets
     the width here instead. */
  width: auto;
  /* Compact: the label sets the width, and the padding around it is trimmed so
     the pair reads as a control, not as a banner. Most of a button's width is
     its label, so the type size does the real narrowing here. */
  padding: 9px 20px;
  flex: 0 0 auto;
  border-radius: var(--radius-md, 8px);
  background: var(--primary-color, #ce3645);
  color: #fff;
  font-size: 0.8125rem;
  white-space: nowrap;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--theme-animation-duration-fast, 150ms)
                var(--theme-animation-easing-standard, ease),
              box-shadow var(--theme-animation-duration-fast, 150ms)
                var(--theme-animation-easing-standard, ease);
}

.gm-service-detail-section .gm-service-detail__cta:hover {
  background: var(--primary-hover, #dd4554);
  box-shadow: 0 8px 22px rgba(206, 54, 69, 0.28);
  color: #fff;
}

.gm-service-detail-section .gm-service-detail__cta--secondary {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--primary-color, #ce3645);
  color: var(--primary-color, #ce3645);
}

.gm-service-detail-section .gm-service-detail__cta--secondary:hover {
  background: #fff;
  color: var(--primary-color, #ce3645);
}

.gm-service-detail-section .gm-service-detail__cta svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

/* ---- assurance panel ---- */

/* Held in from the column's full width: at 0.95fr the card ran far past where
   its own point text stops, leaving a wide empty gutter down the right side. */
.gm-service-detail-section .gm-service-detail__panel {
  width: 100%;
  max-width: 430px;
  margin-inline-start: auto;
  padding: 21px 22px 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 46px rgba(206, 54, 69, 0.12);
}

/* The mark follows the title instead of being pushed to the card's far edge —
   space-between left it stranded out past where the point text below ends. */
.gm-service-detail-section .gm-service-detail__panel-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding-block-end: 13px;
  border-block-end: 1px solid rgba(15, 18, 34, 0.08);
}

.gm-service-detail-section .gm-service-detail__panel-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-color, #ce3645);
}

.gm-service-detail-section .gm-service-detail__panel-mark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  color: var(--primary-color, #ce3645);
}

.gm-service-detail-section .gm-service-detail__panel-mark svg {
  width: 15px;
  height: 15px;
}

.gm-service-detail-section .gm-service-detail__panel-list {
  margin: 0;
  padding: 16px 0 17px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gm-service-detail-section .gm-service-detail__point {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.gm-service-detail-section .gm-service-detail__point-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: rgba(206, 54, 69, 0.09);
  color: var(--primary-color, #ce3645);
  font-size: 1rem;
}

.gm-service-detail-section .gm-service-detail__point-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.gm-service-detail-section .gm-service-detail__point-title {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--heading-color, #0b0c14);
}

.gm-service-detail-section .gm-service-detail__point-text {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-color, #495057);
}

/* Foot sits flush to the panel edges, tinted so it reads as a closing note. */
/* The negative margin cancels the card's 22px padding so the band spans the full
   card width, and the matching padding puts its content back on the card's own
   left and right edges — the same edges the point rows above sit between. */
.gm-service-detail-section .gm-service-detail__panel-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-inline: -22px;
  margin-block: 0;
  padding: 12px 22px;
  border-radius: 0 0 14px 14px;
  background: rgba(206, 54, 69, 0.05);
  font-size: 0.875rem;
  color: var(--text-color, #495057);
  /* Nothing here may exceed the card: without this the band's own box can round
     out past the card's edge on a subpixel width. */
  box-sizing: border-box;
  max-width: calc(100% + 44px);
}

.gm-service-detail-section .gm-service-detail__panel-foot svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--primary-color, #ce3645);
}

@media (max-width: 991px) {
  .gm-service-detail-section .gm-service-detail__hero-inner {
    grid-template-columns: minmax(0, 1fr);
    /* Stacked, the two blocks would each run the full band width and the panel
       would read as a page-wide slab. Holding them to a column and centring it
       keeps the same proportions the two-column layout had. */
    justify-items: center;
  }

  .gm-service-detail-section .gm-service-detail__hero-copy {
    width: 100%;
    max-width: 560px;
  }

  /* Stacked, the card is centred rather than held to the right edge it takes in
     the two-column layout. It also keeps the 430px measure it has there: at
     560px the point text stopped well short of the card's right edge and left a
     wide empty band down that side. */
  .gm-service-detail-section .gm-service-detail__panel {
    width: 100%;
    max-width: 430px;
    margin-inline: auto;
  }

  .gm-service-detail-section .gm-service-detail__hero-title,
  .gm-service-detail-section .gm-service-detail__hero-summary {
    max-width: none;
  }
}

@media (max-width: 575px) {
  /* The price stays on the title's line at every width — it shrinks with the
     row rather than dropping below it (see --sd-price-scale further up). */
  .gm-service-detail-section .gm-service-detail__panel {
    padding-inline: 22px;
  }

  .gm-service-detail-section .gm-service-detail__panel-foot {
    margin-inline: -22px;
    padding-inline: 22px;
  }

  .gm-service-detail-section .gm-service-detail__hero-actions {
    /* nowrap keeps them on one line where there is room; on a phone there is
       not, so they stack rather than overflow the viewport. */
    flex-wrap: wrap;
  }

  .gm-service-detail-section .gm-service-detail__cta {
    flex: 1 1 100%;
    justify-content: center;
  }
}


/* On a phone the artwork sits directly behind the copy at a much smaller scale,
   so its motifs crowd the text. A 20% white wash over the whole section lifts
   the contrast without touching the desktop rendering — the layer is inert and
   sits under the content via the z-index pair. */
@media (max-width: 767px) {
  .gm-service-detail-section.has-image::before {
    background: rgba(255, 255, 255, 0.2);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 0;
  }

  .gm-service-detail-section.has-image > * {
    position: relative;
    z-index: 1;
  }
}

/* getme-css-bundle:end css/sections/service-detail.css */


/* getme-css-bundle: css/sections/related-services.css */
/* ════════════════════════════════════════════════════════════════════
   related-services — section stylesheet (self-contained)

   Owner     : sections/related-services.json + sections/related-services.html
   Namespace : --rs-*  (related-services). Do NOT reuse for other sections.
   Scope     : every rule starts with `.gm-related-services`.
   ════════════════════════════════════════════════════════════════════ */

.gm-related-services {
    --rs-title-color: var(--color-text-primary, #1a1a2e);
    --rs-text-color: var(--color-text-secondary, #495057);
    --rs-title-font: var(--font-heading, sans-serif);
    --rs-accent: var(--color-primary, #ce3645);
    --rs-on-accent: var(--color-text-on-primary, #fff);
    --rs-price-color: var(--color-text-primary, #1a1a2e);
    --rs-section-padding-block: clamp(48px, 6vw, 84px);
}

/* ── Related services ───────────────────────────────────────────────
   Sibling services from the same category. The band sits below the detail
   hero on a plain white surface — deliberately no artwork of its own, so the
   hero's Canadian backdrop stays the only image on the page and the cards
   read against a quiet ground.

   The band is full-bleed: it breaks out of the section's inline padding
   so the artwork runs edge to edge, then re-applies that padding inside.
   Negative inline margins (not 100vw) keep it clear of GR-10 — a bare
   100vw overflows by the scrollbar width.                             */

.gm-related-services {
    --rs-card-bg: rgba(255, 255, 255, 0.9);
    --rs-card-border: rgba(17, 24, 39, 0.07);
    --rs-card-radius: var(--radius-lg, 16px);
    --rs-card-shadow: 0 10px 30px rgba(206, 54, 69, 0.07);
    --rs-card-shadow-hover: 0 18px 44px rgba(206, 54, 69, 0.16);
    /* How far the swipe rail reaches past the content measure. */
    --rs-rail-bleed: clamp(16px, 3.5vw, 45px);


    /* No ground of its own: the artwork on .gm-service-detail-section runs
       behind both the hero and this band, and an opaque surface here would
       cut the picture in half. */
    background-color: transparent;
    display: block;
    /* Full-bleed to the viewport without a bare 100vw (which overflows by the
       scrollbar width), matching the hero directly above it. The inline
       padding is the hero's own measure, so both bands start on one edge. */
    margin-inline: calc(50% - 50vw);
    padding-block: clamp(48px, 6vw, 84px);
    padding-inline: clamp(16px, 3.5vw, 45px);
    position: relative;
    /* The band's own content has to sit above the fade layer below. */
    z-index: 0;
}

/* The artwork behind the section ends partway down this band, and its last row
   met the ground colour as a visible line. This layer starts just above the
   kicker and washes the picture out into that colour, so the two meet as a
   gradient instead of an edge. It is decorative and inert — the cards and copy
   sit above it via the z-index pair. */
.gm-related-services::before {
    background: linear-gradient(
        to bottom,
        rgba(253, 210, 212, 0) 0%,
        rgba(253, 210, 212, 0.55) 38%,
        rgba(253, 210, 212, 0.9) 68%,
        #fdd2d4 100%
    );
    content: "";
    /* Reaches above the padding so the fade is already underway before the
       kicker line, then covers the rest of the band. */
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: -1;
}





.gm-related-services__inner {
    margin-inline: auto;
    /* 1080px is the hero-inner measure directly above (service-detail.css), not
       the 1320px page container: the cards have to start and end on the same
       edges as the service title and its copy, otherwise the band reads as a
       wider slab bolted under the hero. */
    max-width: 1080px;
    /* Above the fade layer. */
    position: relative;
    z-index: 1;
}

/* ── Heading ────────────────────────────────────────────────────── */
.gm-related-services__head {
    margin-bottom: clamp(24px, 3vw, 38px);
    max-width: 620px;
}

.gm-related-services__kicker {
    color: var(--rs-accent);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.gm-related-services__title {
    color: var(--rs-title-color);
    font-family: var(--rs-title-font);
    font-size: clamp(1.2rem, 1.9vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.gm-related-services__intro {
    color: var(--rs-text-color);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 10px 0 0;
    opacity: 0.75;
}

/* ── Grid ───────────────────────────────────────────────────────── */
.gm-related-services__grid {
    display: grid;
    gap: clamp(12px, 1.3vw, 16px);
    /* Four fixed columns rather than auto-fit: with a small minimum, auto-fit
       lets four cards stretch to fill the row and they end up wide again. A
       fixed count keeps each card at a quarter of the measure — about 20%
       narrower than before — so titles wrap onto more lines and the band takes
       less vertical room overall. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.gm-related-services__item {
    display: flex;
}

/* ── Card ───────────────────────────────────────────────────────── */
.gm-related-services__card {
    backdrop-filter: blur(6px);
    background: var(--rs-card-bg);
    border: 1px solid var(--rs-card-border);
    border-radius: var(--rs-card-radius);
    box-shadow: var(--rs-card-shadow);
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
    padding: 16px 16px 13px;
    text-decoration: none;
    transition:
        transform var(--transition-fast, .15s ease),
        box-shadow var(--transition-fast, .15s ease),
        border-color var(--transition-fast, .15s ease);
    width: 100%;
}

.gm-related-services__card:hover {
    border-color: color-mix(in srgb, var(--rs-accent) 34%, transparent);
    box-shadow: var(--rs-card-shadow-hover);
    transform: translateY(-3px);
}

.gm-related-services__card:focus-visible {
    outline: 2px solid var(--rs-accent);
    outline-offset: 3px;
}

.gm-related-services__card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gm-related-services__name {
    color: var(--rs-title-color);
    font-family: var(--rs-title-font);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Two lines keep every card the same height whatever the copy length. */
.gm-related-services__desc {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: var(--rs-text-color);
    display: -webkit-box;
    font-size: 0.75rem;
    line-height: 1.5;
    opacity: 0.72;
    overflow: hidden;
}

.gm-related-services__card-foot {
    align-items: center;
    border-top: 1px solid var(--rs-card-border);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    padding-top: 10px;
}

/* The shared "From <figure>" block loses the fees table's left rule and
   fixed width here — in a card it is the only thing on its line. */
.gm-related-services__from {
    border-inline-start: none;
    padding-inline-start: 0;
    width: auto;
}

.gm-related-services__from .gm-fees__from-amount {
    color: var(--rs-price-color);
    /* Scaled with the card: the fees table's 1.0625rem is too heavy here. */
    font-size: 0.875rem;
}

.gm-related-services__from .gm-fees__from-label {
    font-size: 0.66rem;
}

.gm-related-services__go {
    align-items: center;
    background: color-mix(in srgb, var(--rs-accent) 10%, transparent);
    border-radius: 999px;
    color: var(--rs-accent);
    display: inline-flex;
    flex-shrink: 0;
    height: 28px;
    justify-content: center;
    margin-inline-start: auto;
    transition:
        background var(--transition-fast, .15s ease),
        transform var(--transition-fast, .15s ease);
    width: 28px;
}

.gm-related-services__go svg {
    height: 16px;
    width: 16px;
}

.gm-related-services__card:hover .gm-related-services__go {
    background: var(--rs-accent);
    color: var(--rs-on-accent);
    transform: translateX(2px);
}

/* Below the desktop measure the four cards stop stacking and become a single
   swipeable row: on a phone a stacked list buries the band under four
   full-width blocks, while a rail keeps the whole set one thumb-flick away and
   costs one screen of height. Scroll snapping makes each card settle on the
   left edge instead of stopping mid-card. */
@media (max-width: 1199px) {
    .gm-related-services__grid {
        grid-auto-columns: minmax(230px, 42%);
        grid-auto-flow: column;
        grid-template-columns: none;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        /* The rail runs to the viewport edges even though the band is held to
           the hero's measure, so a card is never clipped mid-swipe; the inset
           padding keeps the first and last card on the content edge. */
        margin-inline: calc(var(--rs-rail-bleed) * -1);
        padding-inline: var(--rs-rail-bleed);
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .gm-related-services__grid::-webkit-scrollbar {
        display: none;
    }

    .gm-related-services__item {
        /* Each card settles on the rail's left edge rather than stopping
           mid-card. */
        scroll-snap-align: start;
    }
}

@media (max-width: 767px) {
    .gm-related-services__grid {
        /* Narrower viewport, narrower card — but still wide enough that the
           next one peeks in and signals the row scrolls. */
        grid-auto-columns: minmax(210px, 78%);
    }
}


/* Serve the plate near the size it is painted at — the motifs are soft and
   low-contrast, so a phone loses nothing to the narrower file. */
@media (min-width: 768px) {
    .gm-related-services {
        }
}

@media (min-width: 1400px) {
    .gm-related-services {
        }
}

/* getme-css-bundle:end css/sections/related-services.css */


/* getme-css-bundle: css/sections/service-directory.css */
/* ════════════════════════════════════════════════════════════════════
   service-directory — section stylesheet (self-contained)

   Owner     : sections/service-directory.json + sections/service-directory.html
   Namespace : --sdir-*  (service-directory). Do NOT reuse for other sections.
   Scope     : every rule starts with `.gm-service-directory`.
   ════════════════════════════════════════════════════════════════════ */

.gm-service-directory {
    --sdir-ink: var(--color-text-primary, #1a1a2e);
    --sdir-muted: var(--color-text-secondary, #495057);
    --sdir-accent: var(--color-primary, #ce3645);
    --sdir-line: var(--color-border-light, #e9ecef);
    --sdir-card-bg: rgba(255, 255, 255, 0.92);
    --sdir-radius: var(--radius-lg, 16px);

    /* Section artwork. A theme asset rather than a section setting: it is part
       of this section's own design, not merchant content. Sized variants sit
       beside the upload, so a phone pulls the narrow file. */
    --sdir-band: url("https://cdn.getmeonline.io/tenants/comp_lHMTak9Gk4u1b20WD3wic/assets/media/cmda_I3ft6rFeGTEOoII6Fz6uT/original.webp");
    --sdir-band-lg: url("https://cdn.getmeonline.io/tenants/comp_lHMTak9Gk4u1b20WD3wic/assets/media/cmda_I3ft6rFeGTEOoII6Fz6uT/lg.webp");
    --sdir-band-md: url("https://cdn.getmeonline.io/tenants/comp_lHMTak9Gk4u1b20WD3wic/assets/media/cmda_I3ft6rFeGTEOoII6Fz6uT/md.webp");
    /* The plate's own top row (254,252,252) — the colour the drawing fades into,
       so the extension above it continues the picture rather than meeting it. */
    --sdir-band-top: #fefcfc;



    /* Matches the sibling sections on this page (services-list, process),
       which all use the 80px block rhythm and the Bootstrap container. */
    padding: 80px 0 clamp(96px, 12vw, 160px);

    /* One field for the whole section, however tall it grows. The catalog
       decides the height here — more categories mean more cards — so the
       artwork is anchored to the bottom at its own aspect ratio and the flat
       colour above it (the plate's own top row) extends to fill whatever is
       left. The background is painted inside this element and stops at its
       edge by definition, so the process section below is never touched. */
    background-color: var(--sdir-band-top);
    background-image: var(--sdir-band-md, var(--sdir-band));
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-origin: padding-box;
}



.gm-service-directory__kicker {
    color: var(--sdir-accent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* ── Groups ─────────────────────────────────────────────────────── */
/* One column per category on a wide screen. The count is unknown at build
   time, so the grid fits as many as the measure allows rather than assuming
   a fixed number. */
/* One column of stacked cards — an accordion reads as a single list, and a
   multi-column grid would leave an opened panel hanging beside unrelated
   cards. Matches the fees page, which uses the same construction. */
.gm-service-directory__groups {
    display: grid;
    gap: 12px;
    grid-auto-rows: min-content;
    margin-inline: auto;
    max-width: 760px;
    /* The open panel is out of flow, so the list has to own the space it hangs
       into or it would overlap whatever follows. The section's script measures
       the overhang and sets this; with no script (or nothing open) it is 0. */
    padding-block-end: var(--sdir-open-overhang, 0px);
}

.gm-service-directory__group {
    /* Every card carries an explicit z-index: without one, a card later in the
       DOM paints over the open card's panel even though the panel asks for a
       higher layer (z-index only applies to positioned elements). */
    position: relative;
    z-index: 1;
    background: var(--sdir-card-bg);
    border: 1px solid var(--sdir-line);
    border-radius: var(--sdir-radius);
    box-shadow: 0 4px 18px rgba(206, 54, 69, 0.05);
    transition: box-shadow var(--theme-animation-duration-fast, 150ms)
                var(--theme-animation-easing-standard, ease);
}

.gm-service-directory__group:hover {
    box-shadow: 0 8px 26px rgba(206, 54, 69, 0.1);
}

/* Open, the head is the top half of one card: the panel continues it below, so
   this element gives up its bottom rounding, its bottom border and its own
   shadow — otherwise the two read as separate boxes stuck together. */
.gm-service-directory__group[open] {
    z-index: 5;
    border-color: var(--sdir-accent);
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none;
}

/* With a card open the rest of the list recedes, so the open panel is what the
   eye settles on. The cards keep their space — only their rendering softens. */
.gm-service-directory__groups:has(.gm-service-directory__group[open]) .gm-service-directory__group:not([open]) {
    filter: blur(3px);
    opacity: 0.45;
    transition: filter var(--theme-animation-duration-normal, 250ms)
                  var(--theme-animation-easing-standard, ease),
                opacity var(--theme-animation-duration-normal, 250ms)
                  var(--theme-animation-easing-standard, ease);
}

/* Blur is a heavy visual shift; readers who ask for less motion get the dimming
   without it. Browsers without :has() simply keep every card sharp. */
@media (prefers-reduced-motion: reduce) {
    .gm-service-directory__groups:has(.gm-service-directory__group[open]) .gm-service-directory__group:not([open]) {
        filter: none;
        transition: none;
    }
}

/* ── Head (the clickable summary) ────────────────────────────────── */
.gm-service-directory__group-head {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 12px;
    list-style: none;
    padding: 16px 20px;
}

/* Both are needed: WebKit hides the marker through its own pseudo-element. */
.gm-service-directory__group-head::-webkit-details-marker {
    display: none;
}

.gm-service-directory__group-head::marker {
    content: '';
}

.gm-service-directory__group-head:focus-visible {
    border-radius: var(--sdir-radius);
    outline: 2px solid var(--sdir-accent);
    outline-offset: 2px;
}

.gm-service-directory__headings {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Takes the slack so the count and caret sit hard against the right edge. */
    flex: 1 1 auto;
    min-width: 0;
}

.gm-service-directory__group-title {
    color: var(--sdir-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

/* An optional line under the category name, from the locale files. */
.gm-service-directory__tagline {
    color: var(--sdir-muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

/* The caret is the open/closed cue the removed marker used to carry. */
.gm-service-directory__toggle {
    border-right: 2px solid var(--sdir-accent);
    border-bottom: 2px solid var(--sdir-accent);
    flex-shrink: 0;
    height: 8px;
    width: 8px;
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform var(--theme-animation-duration-fast, 150ms)
                var(--theme-animation-easing-standard, ease);
}

.gm-service-directory__group[open] .gm-service-directory__toggle {
    transform: rotate(-135deg);
}

/* ── Panel ───────────────────────────────────────────────────────── */
/* Out of flow, so an open card does not stretch its row and shove the cards
   below it around — the same construction the fees accordion uses. */
.gm-service-directory__body {
    position: absolute;
    inset-inline: -1px;
    top: 100%;
    background: var(--sdir-card-bg);
    border: 1px solid var(--sdir-accent);
    border-top: 0;
    border-bottom-left-radius: var(--sdir-radius);
    border-bottom-right-radius: var(--sdir-radius);
    box-shadow: 0 14px 34px rgba(206, 54, 69, 0.12);
    overflow: hidden;
}

.gm-service-directory__group-icon {
    align-items: center;
    background: color-mix(in srgb, var(--sdir-accent) 9%, transparent);
    border-radius: 999px;
    color: var(--sdir-accent);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.9rem;
    height: 34px;
    justify-content: center;
    width: 34px;
}

/* How many services sit under this heading — a scan cue, not a label. */
.gm-service-directory__count {
    background: color-mix(in srgb, var(--sdir-accent) 8%, transparent);
    border-radius: 999px;
    color: var(--sdir-accent);
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
}

/* ── Rows ───────────────────────────────────────────────────────── */
.gm-service-directory__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gm-service-directory__row + .gm-service-directory__row {
    border-top: 1px solid var(--sdir-line);
}

.gm-service-directory__link {
    align-items: center;
    color: var(--sdir-muted);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 12px 20px;
    text-decoration: none;
    transition:
        background var(--transition-fast, .15s ease),
        color var(--transition-fast, .15s ease);
}

.gm-service-directory__link:hover,
.gm-service-directory__link:focus-visible {
    background: color-mix(in srgb, var(--sdir-accent) 5%, transparent);
    color: var(--sdir-ink);
}

.gm-service-directory__link:focus-visible {
    outline: 2px solid var(--sdir-accent);
    outline-offset: -2px;
}

.gm-service-directory__name {
    font-size: 0.9rem;
    line-height: 1.45;
}

.gm-service-directory__go {
    color: var(--sdir-accent);
    flex-shrink: 0;
    opacity: 0;
    transition:
        opacity var(--transition-fast, .15s ease),
        transform var(--transition-fast, .15s ease);
}

.gm-service-directory__go svg {
    display: block;
    height: 16px;
    width: 16px;
}

.gm-service-directory__link:hover .gm-service-directory__go,
.gm-service-directory__link:focus-visible .gm-service-directory__go {
    opacity: 1;
    transform: translateX(2px);
}

/* A pointer reveals the arrow on hover; touch has no hover, so it stays on. */
@media (hover: none) {
    .gm-service-directory__go {
        opacity: 0.55;
    }
}

@media (max-width: 767px) {
    .gm-service-directory {
        padding: 56px 0;
    }
}

/* Variant swap sits after the base rule so it is not overridden by it. */
@media (min-width: 768px) {
    .gm-service-directory {
        background-image: var(--sdir-band-lg, var(--sdir-band));
    }
}

@media (min-width: 1400px) {
    .gm-service-directory {
        background-image: var(--sdir-band);
    }
}

/* getme-css-bundle:end css/sections/service-directory.css */


/* getme-css-bundle: css/sections/blog-post.css */
/* ════════════════════════════════════════════════════════════════════
   blog-post — section stylesheet (self-contained)

   Owner       : sections/blog-post.json + sections/blog-post.html
   Namespace   : --bp-*  (blog-post). Do NOT reuse for other sections.
   Scope       : Every rule starts with `.blog-post-hero` / `.blog-post-content`
                 (the section's own roots — the class the schema declares).
   Token chain : --bp-<x>  →  var(--theme-<x>) / theme palette tokens.

   These rules previously lived as an inline <style> block inside
   pages/blog_post.html. They moved here when that shell was reduced to a
   section loop (GR-2), so the article detail keeps its styling while the
   page shell stops owning presentation.
   ════════════════════════════════════════════════════════════════════ */

.blog-post-hero,
.blog-post-content {
  /* Token chain — one place to retune the article surface. */
  --bp-hero-text: #fff;
  --bp-hero-muted: rgba(255, 255, 255, 0.85);
  --bp-hero-dim: rgba(255, 255, 255, 0.7);
  --bp-hero-faint: rgba(255, 255, 255, 0.5);
  --bp-hero-chip-bg: rgba(255, 255, 255, 0.2);
  --bp-hero-chip-border: rgba(255, 255, 255, 0.3);
  --bp-body-bg: var(--bg-primary, #ffffff);
  --bp-body-text: var(--text-on-bg-primary, #1b1b1f);
  --bp-accent: var(--primary-color, #ce3645);
  --bp-code-bg: var(--bg-secondary, #f4f4f4);
  --bp-media-radius: var(--radius-lg, 16px);
  /* Quiet surfaces for tags and the actions frame: the page's own secondary
     background and border, so they retune with the theme. */
  --bp-frame-line: var(--color-border-medium, #dee2e6);
  --bp-note-tint: rgba(13, 110, 253, 0.08);
  /* One gap between the blocks that close an article -- disclaimer, tags,
     actions. They used Bootstrap's mt-4 and mt-5, which put 24px above one and
     48px above the next; the run read as uneven. */
  --bp-close-gap: 2.5rem;
  /* Controls inside a framed panel need a lighter line than the frame itself,
     or the two read as the same weight and the buttons blur into the box. The
     frame moves to the darker of the theme's two border tokens and keeps its
     2px; the buttons take the lighter one at 1px, so the box reads as the
     container and the buttons as things sitting in it. */
  --bp-control-line: var(--color-border-light, #e9ecef);
}

/* base.css sets `section[id^="section-"] { padding: 100px !important }` for
   every section on the site. The article is the exception: it opens right under
   its own hero, and 100px of air there reads as a gap rather than a break.
   Matching the !important is the only way past that rule; it is scoped to this
   single id so nothing else on the page is affected. */
#section-blog-post-content {
  padding-top: 1.5rem !important;
  padding-bottom: 3rem !important;
}

/* ── Hero ────────────────────────────────────────────────────────── */

/* The hero now carries only the orientation line, so its content sits at the
   foot of the image rather than centred in it: align-items:flex-end, and the
   bottom padding is what holds that line clear of the edge. */
.blog-post-hero {
  color: var(--bp-hero-text);
  padding: 140px 0 48px;
  margin-top: -1px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: flex-end;
}

.blog-post-hero__meta {
  position: relative;
  z-index: 2;
}

.blog-post-hero .container {
  position: relative;
  z-index: 2;
}

/* One line, always. The trail is short (Home / Blog / …) but the last crumb is
   the article title, which on a phone is long enough to wrap and push the row
   past the image. flex-wrap:nowrap holds the row together and the rule below
   truncates that last crumb instead of letting it break the layout. */
.blog-post-hero .breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 1.5rem;
  flex-wrap: nowrap;
  max-width: 100%;
}

/* Home and Blog keep their full labels — they are two short words and the trail
   is unreadable without them. */
.blog-post-hero .breadcrumb-item {
  white-space: nowrap;
  flex: 0 0 auto;
}

/* The title crumb is the one that gives: it takes whatever width is left and
   ends in an ellipsis. min-width:0 is what lets a flex child shrink below its
   text width — without it, overflow:hidden never engages. */
.blog-post-hero .breadcrumb-item.active {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-post-hero .breadcrumb-item a {
  color: var(--bp-hero-muted);
  text-decoration: none;
  transition: color var(--theme-animation-duration-fast, 150ms)
              var(--theme-animation-easing-standard, ease);
}

.blog-post-hero .breadcrumb-item a:hover {
  color: var(--bp-hero-text);
}

.blog-post-hero .breadcrumb-item.active {
  color: var(--bp-hero-dim);
}

/* Bootstrap renders the separator as a pseudo-element inside the crumb; it must
   not be the thing that shrinks when space runs out. */
.blog-post-hero .breadcrumb-item + .breadcrumb-item::before {
  color: var(--bp-hero-faint);
  flex-shrink: 0;
}

/* The article title carries the brand red. It sits on a photograph, where red
   reads dimmer than the white it replaced, so the shadow behind it is deepened
   to keep the letterforms off the image underneath. The breadcrumb and meta
   line keep --bp-hero-text, so only the headline changes. */
/* The title lives in the article now, on a plain background. It takes the body
   ink rather than the brand red it needed to stand off the photograph, and the
   shadow that carried it there is gone. */
.blog-post-title {
  font-size: 2.75rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: var(--bp-body-text);
}

@media (max-width: 767px) {
  .blog-post-title {
    font-size: 2rem;
  }
}

.blog-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: 1rem;
  align-items: center;
}

.blog-post-meta i {
  margin-right: 0.5rem;
}

.blog-post-meta .category-badge {
  background: var(--bp-hero-chip-bg);
  padding: 0.4rem 1rem;
  border-radius: var(--theme-radius-pill, 20px);
  font-size: 0.85rem;
  border: 1px solid var(--bp-hero-chip-border);
}

.blog-post-author {
  margin-top: 1.5rem;
  font-size: 1rem;
  color: var(--bp-hero-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.blog-post-author i {
  color: var(--bp-hero-dim);
}

.blog-post-author strong {
  color: var(--bp-hero-text);
}

/* ── Article body ────────────────────────────────────────────────── */

.blog-post-content {
  background: var(--bp-body-bg);
  color: var(--bp-body-text);
  /* Vertical rhythm belongs to the section, not to Bootstrap's py-5 utility
     (removed from the markup). The article opens directly under the hero, so
     the gap above the title is deliberately small; the foot keeps a full
     measure to separate the article from whatever follows it. */
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

.blog-post-lead {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--bp-body-text);
  opacity: 0.85;
  margin-bottom: 2rem;
}

.blog-article {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--bp-body-text);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.blog-article h1,
.blog-article h2,
.blog-article h3,
.blog-article h4,
.blog-article h5,
.blog-article h6 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--bp-accent);
}

.blog-article p {
  margin-bottom: 1.5rem;
  color: var(--bp-body-text);
}

.blog-article img {
  max-width: 100%;
  height: auto;
  border-radius: var(--bp-media-radius);
  margin: 1.5rem 0;
}

.blog-article ul,
.blog-article ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.blog-article li {
  margin-bottom: 0.5rem;
  color: var(--bp-body-text);
}

.blog-article blockquote {
  border-left: 4px solid var(--bp-accent);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--bp-body-text);
  opacity: 0.9;
}

.blog-article pre {
  background: var(--bp-code-bg);
  padding: 1rem;
  border-radius: var(--bp-media-radius);
  overflow-x: auto;
}

.blog-article code {
  background: var(--bp-code-bg);
  padding: 0.2rem 0.4rem;
  border-radius: var(--theme-radius-sm, 4px);
  font-size: 0.9em;
}

/* ── Editorial disclaimer ────────────────────────────────────────────
   Articles close with a legal note the editors write as a fully italic final
   paragraph. It is content, not chrome, so nothing is injected into the body:
   the last paragraph is matched only when its whole text is emphasised, which
   is what makes it the disclaimer rather than an ordinary closing line.

   :has() is what allows "a <p> whose only child is <em>" to be selected. Where
   it is unsupported the paragraph simply stays italic body copy — the note is
   still legible, it just does not get the panel. */
.blog-article > p:last-child:has(> em:only-child) {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-top: var(--bp-close-gap);
  margin-bottom: 0;
  padding: 1.5rem 1.75rem;
  border: 2px solid var(--bp-frame-line);
  border-radius: var(--radius-lg, 16px);
  background: var(--bp-body-bg);
}

/* The shield is drawn rather than shipped as an icon font: this rule reacts to
   the shape of the content, so it cannot rely on markup carrying an <i>. */
.blog-article > p:last-child:has(> em:only-child)::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 999px;
  background-color: var(--bp-note-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d6efd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6l7-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.5rem 1.5rem;
}

.blog-article > p:last-child:has(> em:only-child) em {
  font-size: 0.95rem;
  line-height: 1.7;
  opacity: 0.9;
}

@media (max-width: 575.98px) {
  .blog-article > p:last-child:has(> em:only-child) {
    gap: 1rem;
    padding: 1.25rem;
  }

  .blog-article > p:last-child:has(> em:only-child)::before {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    background-size: 1.25rem 1.25rem;
  }
}

/* ── Tags + share ────────────────────────────────────────────────── */



/* ── Article actions ─────────────────────────────────────────────────
   Share, book and back sit together in one framed row: three things to do with
   the piece you have just finished, grouped rather than scattered down the
   page. They wrap onto a second line on a narrow measure rather than shrinking,
   so no label breaks. */
/* Same frame as the disclaimer and the tag panel above it, so the three blocks
   that close the article read as one family.

   The inset is equal on all four sides here, unlike those two: they hold text,
   which sits closer to its own edges and wants a wider side margin. This one
   holds buttons that are centred in the row, so any difference between the
   horizontal and vertical gap shows up as the buttons looking off-centre. */
.blog-post-tags {
  margin-top: var(--bp-close-gap);
}

.blog-share {
  margin-top: var(--bp-close-gap);
  /* Lighter than the two panels above it in every respect: a 1px line instead
     of 2px, a rounder corner, and a shallower inset. Those hold text and read
     as documents; this one holds pill buttons and should read as a rail around
     them, not as a third box of the same weight. The horizontal inset stays
     wider so the end buttons do not touch the sides. */
  border: 1px solid var(--bp-frame-line);
  border-radius: var(--radius-xl, 24px);
  padding: 1rem 1.5rem;
}

.blog-share-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

/* Back on the left, booking in the middle, sharing on the right. `order` sets
   the visual sequence without touching the markup, so document order stays
   share-first — which is what a screen reader and a no-CSS render still get. */
.blog-share-actions .blog-back-link {
  order: 1;
}

.blog-share-actions .blog-post-cta__button {
  order: 2;
}

.blog-share-actions .blog-share-toggle {
  order: 3;
}

/* On a phone the three stack into a column and each takes the full width, so
   they read as a list of choices rather than a squeezed row. */
@media (max-width: 575.98px) {
  .blog-share-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .blog-share-actions .blog-post-cta__button,
  .blog-share-actions .blog-share-toggle,
  .blog-share-actions .blog-back-link {
    justify-content: center;
  }
}

/* The way back is the quietest of the three: an outline, no fill. */
.blog-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.6rem;
  border: 1px solid var(--bp-control-line);
  border-radius: var(--radius-pill, 50px);
  background: var(--bp-body-bg);
  color: var(--bp-body-text);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--theme-animation-duration-fast, 150ms)
                var(--theme-animation-easing-standard, ease),
              color var(--theme-animation-duration-fast, 150ms)
                var(--theme-animation-easing-standard, ease);
}

.blog-back-link:hover,
.blog-back-link:focus {
  border-color: var(--bp-accent);
  color: var(--bp-accent);
}

.blog-back-link:focus-visible {
  outline: 2px solid var(--bp-accent);
  outline-offset: 2px;
}

.blog-post-cta__button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  /* Matches the share toggle's height so the two sit level. */
  padding: 0.7rem 1.6rem;
  border: 1px solid var(--bp-accent);
  border-radius: var(--theme-radius-pill, 50px);
  background: var(--bp-accent);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(var(--primary-rgb, 206, 54, 69), 0.35);
  transition: background-color var(--theme-animation-duration-fast, 150ms)
                var(--theme-animation-easing-standard, ease),
              border-color var(--theme-animation-duration-fast, 150ms)
                var(--theme-animation-easing-standard, ease),
              transform var(--theme-animation-duration-fast, 150ms)
                var(--theme-animation-easing-standard, ease);
}

.blog-post-cta__button:hover,
.blog-post-cta__button:focus {
  background: var(--primary-hover, #dd4554);
  border-color: var(--primary-hover, #dd4554);
  color: #fff;
  transform: translateY(-2px);
}

.blog-post-cta__button:focus-visible {
  outline: 2px solid var(--bp-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .blog-post-cta__button {
    transition: none;
  }
  .blog-post-cta__button:hover {
    transform: none;
  }
}

/* ── Share ───────────────────────────────────────────────────────── */

.blog-share {
  position: relative;
}

/* The trigger reads as an outlined control rather than a filled CTA — the
   article's own actions (Back to Blog) stay the louder element on the page. */
/* Hidden until the script marks the widget ready — a toggle that cannot
   collapse anything would only mislead. */
.blog-share-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  /* Same box as the two links beside it, so the row reads as one set. */
  padding: 0.7rem 1.6rem;
  border: 1px solid var(--bp-control-line);
  border-radius: var(--radius-pill, 50px);
  background: var(--bp-body-bg);
  color: var(--bp-body-text);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition-fast, 0.15s ease),
    color var(--transition-fast, 0.15s ease),
    box-shadow var(--transition-fast, 0.15s ease);
}

.blog-share-toggle:hover,
.blog-share-toggle[aria-expanded="true"] {
  border-color: var(--primary-color, #ce3645);
  color: var(--primary-color, #ce3645);
  box-shadow: 0 4px 14px rgba(var(--primary-rgb, 206, 54, 69), 0.18);
}

.blog-share-toggle:focus-visible {
  outline: 2px solid var(--primary-color, #ce3645);
  outline-offset: 2px;
}

/* The share mark takes the platform's info blue: it is the one glyph here that
   names an action rather than a destination, and blue separates it from the
   brand red without competing with it. */
.blog-share-toggle > .fa-share-nodes {
  color: var(--color-info, #0d6efd);
  font-size: 1.05em;
}

.blog-back-link > .fa-arrow-left {
  color: var(--bp-body-text);
}

.blog-share[data-share-ready] .blog-share-toggle {
  display: inline-flex;
}

/* The caret is the state indicator: it turns to point up once the panel is
   open, which is the only visual cue the button itself carries. */
.blog-share-caret {
  font-size: 0.75em;
  transition: transform var(--transition-normal, 0.3s ease);
}

.blog-share-toggle[aria-expanded="true"] .blog-share-caret {
  transform: rotate(180deg);
}

/* The panel animates from collapsed to its natural height. grid-template-rows
   is what makes that possible without a hardcoded max-height guess: 0fr → 1fr
   is animatable, and the inner wrapper supplies the measured height. */
.blog-share-panel {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows var(--transition-normal, 0.3s ease),
    opacity var(--transition-normal, 0.3s ease);
}

/* Collapsed only once the script has taken over — with JS off, or before it
   runs, the panel above stays open and every share link remains reachable. */
.blog-share[data-share-ready] .blog-share-panel {
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--transition-normal, 0.3s ease),
    opacity var(--transition-normal, 0.3s ease);
}

.blog-share-panel > .share-buttons {
  overflow: hidden;
  min-height: 0;
}

/* With no script the panel is open from the start and never gets
   [data-share-open], so it takes the gap here. */
.blog-share:not([data-share-ready]) .blog-share-panel {
  margin-top: 0.75rem;
}

/* Only while open: closed, the panel is zero-height and a standing margin would
   quietly add to the frame's bottom inset, leaving the buttons off-centre. */
.blog-share[data-share-ready][data-share-open] .blog-share-panel {
  margin-top: 0.75rem;
  grid-template-rows: 1fr;
  opacity: 1;
}

.blog-share .share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1rem;
}

/* Destination buttons share one neutral shell; each brand tints only on hover,
   so the open panel reads as one set rather than six competing colours. */
.blog-share .share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: var(--radius-pill, 50px);
  background: var(--card-bg, #ffffff);
  color: var(--text-on-card, #1a1a2e);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition-fast, 0.15s ease),
    border-color var(--transition-fast, 0.15s ease),
    background-color var(--transition-fast, 0.15s ease),
    color var(--transition-fast, 0.15s ease);
}

.blog-share .share-btn:hover {
  transform: translateY(-2px);
  color: #ffffff;
}

.blog-share .share-btn--twitter:hover   { background: #000000; border-color: #000000; }
.blog-share .share-btn--facebook:hover  { background: #1877f2; border-color: #1877f2; }
.blog-share .share-btn--linkedin:hover  { background: #0a66c2; border-color: #0a66c2; }
.blog-share .share-btn--whatsapp:hover  { background: #25d366; border-color: #25d366; }
.blog-share .share-btn--telegram:hover  { background: #229ed9; border-color: #229ed9; }

.blog-share .share-btn--email:hover,
.blog-share .share-btn--copy:hover {
  background: var(--primary-color, #ce3645);
  border-color: var(--primary-color, #ce3645);
}

/* Copy confirmation: the button holds the success state for a moment so the
   reader sees that something happened without a toast or an alert. */
.blog-share .share-btn--copy.is-copied,
.blog-share .share-btn--copy.is-copied:hover {
  background: var(--color-success, #28a745);
  border-color: var(--color-success, #28a745);
  color: #ffffff;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .blog-share-panel,
  .blog-share-caret,
  .blog-share .share-btn {
    transition: none;
  }

  .blog-share .share-btn:hover {
    transform: none;
  }
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .blog-post-hero {
    padding: 100px 0 60px;
    min-height: 300px;
  }

  .blog-post-title {
    font-size: 1.75rem;
  }

  .blog-post-lead {
    font-size: 1.1rem;
  }
}

/* getme-css-bundle:end css/sections/blog-post.css */


/* =============================================================================
   PAGES (Optional overrides)
   ============================================================================= */

/* getme-css-bundle: css/pages/home.css */
/* =============================================================================
   HOME PAGE - Page-specific overrides only
   All components and sections are loaded via theme.css (SSOT)
   ============================================================================= */

/* Body Global Override */
body {
  overflow-x: hidden;
}
/* getme-css-bundle:end css/pages/home.css */


/* getme-css-bundle: css/pages/contact.css */
/* =============================================================================
   CONTACT PAGE - Page-specific overrides
   Hero typography matched to reference live CSS (transfiguredimmigration.ca).
   CTA button forced SOLID RED (#ce3645), not var/gradient.
   ============================================================================= */

body.contact-page {}

/* Center the info-card icons (flex box -> not centered by text-align) */
.contact-page .contact-info-card { text-align: center; }
.contact-page .contact-info-card .contact-icon { margin-left: auto !important; margin-right: auto !important; }

/* ---- Contact hero (reference-exact) ---- */
.contact-page .contact-hero { padding: 90px 0 70px; color: #fff; position: relative; overflow: hidden; }
.contact-page .contact-hero .container { position: relative; z-index: 1; }

.contact-page .contact-title { font-size: 3.5rem; font-weight: 700; margin-bottom: 20px; color: #fff; }
.contact-page .contact-subtitle { font-size: 1.5rem; margin-bottom: 30px; opacity: 0.9; max-width: 640px; }

.contact-page .contact-hero-list { list-style: none; padding-left: 0; margin: 0 0 1.5rem; }
.contact-page .contact-hero-list li { margin-bottom: 0.4rem; font-size: 0.98rem; }
.contact-page .contact-hero-list li i { color: #ffb4b4; margin-right: 8px; }

/* CTA button -> solid header red (not var/gradient), reference pill shape */
.contact-page .contact-cta-btn {
  display: inline-block;
  padding: 12px 30px;
  border-radius: 30px;
  font-weight: 600;
  background-color: #ce3645 !important;
  border: 1px solid rgba(206, 54, 69, 0.7) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 30px rgba(206, 54, 69, 0.4) !important;
  text-decoration: none;
  transition: all 0.2s ease;
}
.contact-page .contact-cta-btn:hover {
  background-color: #dd4554 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(206, 54, 69, 0.55) !important;
}

/* Form submit + any primary button -> solid header red (not var/gradient) */
.contact-page .btn-primary,
.contact-page .contact-us-form .btn-primary {
  background-color: #ce3645 !important;
  border: 1px solid rgba(206, 54, 69, 0.7) !important;
  color: #ffffff !important;
}
.contact-page .btn-primary:hover,
.contact-page .contact-us-form .btn-primary:hover {
  background-color: #dd4554 !important;
  color: #ffffff !important;
}

@media (max-width: 991px) { .contact-page .contact-title { font-size: 2.6rem; } }
@media (max-width: 767px) {
  .contact-page .contact-hero { padding: 70px 0 50px; }
  .contact-page .contact-title { font-size: 2.2rem; }
  .contact-page .contact-subtitle { font-size: 1rem; }
}

/* getme-css-bundle:end css/pages/contact.css */


/* getme-css-bundle: css/pages/services.css */
/* =============================================================================
   SERVICES PAGE - CSS
   Ortak modüller kullanılıyor, sayfa-özel stiller burada
   ============================================================================= */

/* Services Hero - uses hero-gradient-only from sections.css */
.services-page .hero-gradient-only {
  text-align: center;
}

.services-page .hero-gradient-only .hero-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.services-page .hero-gradient-only .hero-subtitle {
  font-size: 1.25rem;
  opacity: 0.9;
  max-width: 700px;
  margin: 0 auto 1.5rem;
}

/* Services List Section */
.services-list {
  background: var(--bg-primary, #ffffff);
  padding: 80px 0;
}

.services-list .section-title,
.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--heading-color, #1a1a2e);
}

.services-list .section-lead,
.section-lead {
  font-size: 1.1rem;
  color: var(--text-muted, #6c757d);
  max-width: 700px;
  margin: 0 auto;
}

/* Service Cards */
.service-card {
  background: var(--bg-primary, #ffffff);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Clip image at rounded corners */
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.service-icon {
  width: 60px;
  height: 60px;
  background: var(--gradient-primary, linear-gradient(135deg, var(--tf-primary) 0%, var(--tf-secondary) 100%));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.service-icon i {
  font-size: 1.5rem;
  color: var(--text-light, #ffffff);
}

/* Service Image - full card coverage at top, 3:1 aspect ratio */
.service-card .service-image,
.service-image {
  width: calc(100% + 4rem) !important;
  height: auto !important;
  aspect-ratio: 3 / 1;
  min-height: 200px;
  max-height: 280px;
  margin: -2rem -2rem 1.5rem -2rem !important;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  position: relative;
  background: var(--bg-secondary, #f8f9fa);
}

.service-card .service-image img,
.service-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
  transition: transform 0.3s ease;
  display: block;
}

.service-card:hover .service-image img {
  transform: scale(1.05);
}

.service-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--heading-color, #1a1a2e);
}

.service-description {
  color: var(--text-muted, #6c757d);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.service-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-features li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  color: var(--text-color, #495057);
  font-size: 0.95rem;
}

.service-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-weight: bold;
}

/* Service CTA Link - Learn More button */
.service-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--gradient-primary);
  color: var(--tf-white, #ffffff);
  text-decoration: none;
  border-radius: var(--radius-pill, 50px);
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  border: none;
}

.service-cta-link:hover {
  background: var(--gradient-primary-hover);
  transform: translateX(5px);
  color: var(--tf-white, #ffffff);
  box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);
}

.service-cta-link i {
  transition: transform 0.3s ease;
}

.service-cta-link:hover i {
  transform: translateX(3px);
}

/* Service price badge */
.service-price-badge {
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1.5px solid var(--primary-color, var(--color-primary, #ce3645));
  color: var(--primary-color, var(--color-primary, #ce3645));
  background-color: rgba(var(--primary-rgb, 206, 54, 69), 0);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1;
  white-space: nowrap;
}

/* Footer area inside service card to align button + price at bottom */
.service-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Remove extra top margin when CTA is inside footer */
.service-footer .service-cta-link {
  margin-top: 0;
}

/* Process Section */
/* White, not Bootstrap's bg-light grey. The bg-light class is dropped from the
   markup rather than overridden here, so there is no specificity fight with the
   vendor stylesheet. */
.services-process {
  background: var(--color-bg-primary, #ffffff);
}

.process-step {
  padding: 2rem;
}

.step-number {
  width: 60px;
  height: 60px;
  background: var(--gradient-primary, linear-gradient(135deg, var(--tf-primary) 0%, var(--tf-secondary) 100%));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-light, #ffffff);
  margin: 0 auto 1.5rem;
}

.process-step h4 {
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--heading-color, #1a1a2e);
}

.process-step p {
  color: var(--text-muted, #6c757d);
  font-size: 0.95rem;
}

/* Services CTA Section */
.services-page .cta-section {
  background: linear-gradient(135deg, var(--dark-bg, #1a1a2e) 0%, var(--dark-bg-secondary, #2d2d44) 100%);
  color: white;
  padding: 80px 0;
}

.services-page .cta-section .cta-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: white;
}

.services-page .cta-section .cta-text {
  font-size: 1.1rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto 1.5rem;
  color: white;
}

/* Responsive */
@media (max-width: 991px) {
  .services-page .hero-gradient-only .hero-title {
    font-size: 2.5rem;
  }

  .services-list .section-title {
    font-size: 2rem;
  }

  .services-page .cta-section .cta-title {
    font-size: 2rem;
  }
}

@media (max-width: 767px) {
  .services-page .hero-gradient-only .hero-title {
    font-size: 2rem;
  }

  .service-card {
    padding: 1.5rem;
  }

  .process-step {
    padding: 1rem;
  }

  .services-page .cta-section .hero-buttons .btn {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
  }

  .services-page .cta-section .hero-buttons .btn.ms-2,
  .services-page .cta-section .hero-buttons .btn.me-3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =============================================================================
   SERVICES HERO — layout only. Overlay strength lives in the hero section's
   `overlay_opacity` setting (GR-1); no page-level darkening here.
   ============================================================================= */

/* Reference content column = col-lg-10 centered (overrides the global
   770px home-hero width pin — this selector is more specific). */
@media (min-width: 992px) {
  .services-page .hero-section .row > [class*="col-"] {
    width: 83.33333333% !important;
    max-width: 100% !important;
  }
}

.services-page .hero-section .hero-title {
  font-size: 3.5rem;
  font-weight: 700;
}

.services-page .hero-section .hero-subtitle {
  font-size: 1.5rem;
  opacity: 0.9;
}

@media (max-width: 991px) {
  .services-page .hero-section .hero-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 767px) {
  .services-page .hero-section .hero-title {
    font-size: 2rem;
  }

  .services-page .hero-section .hero-subtitle {
    font-size: 1.2rem;
  }
}

/* =============================================================================
   HARDCODED reference button/accent colors.
   These elements normally use var(--gradient-primary)/var(--tf-primary), but the
   runtime can override those variables (same trap as the hero overlay). Exact
   literals taken from the live reference's compiled :root:
     --gradient-primary:       linear-gradient(135deg,#ce3645 0,#ba2231 100%)
     --gradient-primary-hover: linear-gradient(135deg,#dd4554 0,#ce3645 100%)
     --tf-primary:#ce3645  --primary-hover:#dd4554  --primary-rgb:206,54,69
   ============================================================================= */
/* Solid header-button red (same as .btn-book-appointment), NOT gradient */
.service-cta-link {
  background: #ce3645 !important;
  color: #ffffff !important;
}

.service-cta-link:hover {
  background: #dd4554 !important;
  color: #ffffff !important;
  box-shadow: 0 5px 15px rgba(206, 54, 69, 0.3) !important;
}

.service-icon {
  background: #ce3645 !important;
}

.service-icon i {
  color: #ffffff !important;
}

.step-number {
  background: #ce3645 !important;
  color: #ffffff !important;
}

.service-features li::before {
  color: #ce3645 !important;
}

.services-page .hero-buttons .btn-primary {
  background-color: #ce3645 !important;
  border: 1px solid rgba(206, 54, 69, 0.7) !important;
  box-shadow: 0 10px 30px rgba(206, 54, 69, 0.4) !important;
  color: #ffffff !important;
}

.services-page .hero-buttons .btn-primary:hover {
  background-color: #dd4554 !important;
  box-shadow: 0 14px 40px rgba(206, 54, 69, 0.55) !important;
  color: #ffffff !important;
}

/* getme-css-bundle:end css/pages/services.css */


/* getme-css-bundle: css/pages/pricing.css */
/* =============================================================================
   PRICING PAGE - CSS
   Ortak modüller kullanılıyor, sayfa-özel stiller burada
   ============================================================================= */

/* Pricing Hero Section */
.pricing-hero-section {
    padding: 80px 0 60px;
    background: #f5f5f5;
}

/* Maple Leaf Logo */
.pricing-logo-wrapper {
    margin-bottom: 2rem;
}

.pricing-logo {
    width: 120px;
    height: 144px;
    color: #4a4a4a;
    margin: 0 auto;
    display: block;
}

/* Main Title */
.pricing-main-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c2c2c;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.2;
    margin-bottom: 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
}

/* Content Text */
.pricing-content-text {
    color: #333;
    line-height: 1.8;
    font-size: 1rem;
}

.pricing-paragraph {
    margin-bottom: 1.5rem;
    color: #444;
    text-align: left;
}

.pricing-paragraph:last-of-type {
    margin-bottom: 0;
}

/* Alert Notice */
.pricing-alert-wrapper {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.pricing-alert {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-left: 4px solid #ffc107;
    color: #856404;
    padding: 1rem 1.25rem;
    border-radius: 6px;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
}

.pricing-alert strong {
    color: #856404;
    font-weight: 600;
}

.pricing-alert i {
    color: #ffc107;
}

/* Footer Maple Leaf Icon */
.pricing-footer-icon {
    margin-top: 3rem;
    position: relative;
}

.pricing-footer-leaf {
    width: 24px;
    height: 28px;
    color: #ce3645;
    margin: 0 auto 1rem;
    display: block;
}

.pricing-footer-divider {
    width: 100%;
    height: 1px;
    background: #ddd;
    margin: 0 auto;
    max-width: 200px;
}

/* Responsive */

/* Spacing closes up earlier than the type does: on a narrow screen the gap
   under the notice was three paddings stacked — this section's bottom, the
   alert's own margin, and the fees section's top — which read as an empty
   screen between the two blocks.

   !important is required here, not preferred: base.css sets
   `section[id^="section-"] { padding-block: 100px !important }`, and both
   sections carry such an id (section-pricing-information, section-fees), so a
   plain declaration loses to it no matter the specificity. */
@media (max-width: 991px) {
    /* The id selector is what actually reaches this: base.css targets
       `section[id^="section-"]` (0,1,1 + !important), so a lone class (0,1,0)
       loses the specificity tie even with !important. Matching on the id puts
       this rule ahead of it. */
    .pricing-hero-section,
    section#section-pricing-information.pricing-hero-section {
        padding-top: 60px !important;
        /* 100px (base.css), cut ~70% and then a further 30%. */
        padding-bottom: 8px !important;
    }

    /* The wrapper's own bottom margin is the notice's last piece of spacing —
       the section padding below it already separates the two blocks. */
    .pricing-alert-wrapper,
    .pricing-alert-wrapper.mb-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 0 !important;
    }

    .pricing-alert {
        margin-bottom: 0 !important;
    }

    /* Same base.css !important rule reaches this one through id="section-fees",
       and the shorthand further down this file would otherwise re-expand it.
       The white block opens with real space above its eyebrow — the grey
       section above ends tight, so this side carries the separation. */
    .gm-fees .pricing-table-section,
    .gm-fees section#section-fees.pricing-table-section {
        padding-top: 78px !important;
        padding-bottom: 40px !important;
    }
}

@media (max-width: 768px) {
    .pricing-logo {
        width: 100px;
        height: 120px;
    }

    .pricing-main-title {
        font-size: 1.75rem;
        letter-spacing: 1px;
        margin-bottom: 1.5rem;
    }

    .pricing-content-text {
        font-size: 0.95rem;
    }

    .pricing-paragraph {
        margin-bottom: 1.25rem;
    }

    .pricing-alert {
        font-size: 0.9rem;
        padding: 0.875rem 1rem;
    }
}

@media (max-width: 576px) {
    .pricing-main-title {
        font-size: 1.5rem;
        letter-spacing: 0.5px;
    }

    .pricing-content-text {
        font-size: 0.9rem;
    }
}

/* Pricing Tables */
.pricing-table-section {
    padding: 60px 0;
}

.pricing-table-section:nth-child(even) {
    background: #f8f9fa;
}

.pricing-table-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.pricing-table-header {
    background: linear-gradient(135deg, var(--primary-color, #ce3645) 0%, #a62d3a 100%);
    color: #fff;
    padding: 20px;
    text-align: center;
}

.pricing-table-header h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.pricing-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.pricing-table thead {
    background: #1a1a2e;
    color: #fff;
}

.pricing-table thead th {
    padding: 15px 12px;
    font-weight: 600;
    text-align: center;
    font-size: 0.9rem;
    border: none;
}

.pricing-table thead th:first-child {
    text-align: left;
    width: 40%;
}

.pricing-table thead th.action-column {
    width: 150px;
    min-width: 120px;
}

.pricing-table tbody tr {
    border-bottom: 1px solid #e9ecef;
    transition: background 0.2s ease;
}

.pricing-table tbody tr:hover {
    background: #f8f9fa;
}

.pricing-table tbody td {
    padding: 14px 12px;
    text-align: center;
    vertical-align: middle;
    border: none;
}

.pricing-table tbody td:first-child {
    text-align: left;
    font-weight: 500;
    color: #1a1a2e;
}

.pricing-table .price-cell {
    font-weight: 600;
    color: var(--primary-color, #ce3645);
    font-size: 1rem;
}

.pricing-table .action-cell {
    padding: 10px 8px;
    text-align: center;
}

.pricing-table .btn-learn-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--primary-color, #ce3645) 0%, #a62d3a 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}

.pricing-table .btn-learn-more:hover {
    background: linear-gradient(135deg, #a62d3a 0%, #8a2329 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(206, 54, 69, 0.3);
    color: #fff;
    text-decoration: none;
}

.pricing-table .btn-learn-more:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(206, 54, 69, 0.2);
}

.pricing-table .btn-learn-more i {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.pricing-table .btn-learn-more:hover i {
    transform: translateX(3px);
}

/* CTA Section */
.pricing-cta-section {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #fff;
}

.pricing-cta-section h2 {
    color: #fff;
}

.pricing-cta-section .lead {
    color: rgba(255, 255, 255, 0.8);
}

/* Responsive */
@media (max-width: 768px) {
    .pricing-table-card {
        overflow-x: auto;
    }

    .pricing-table {
        min-width: 600px;
    }

    .pricing-table thead th,
    .pricing-table tbody td {
        padding: 10px 8px;
        font-size: 0.85rem;
    }

    .pricing-table thead th.action-column {
        width: 120px;
        min-width: 100px;
    }

    .pricing-table .btn-learn-more {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .pricing-table .btn-learn-more i {
        font-size: 0.7rem;
    }
}

@media (max-width: 576px) {
    .pricing-table {
        min-width: 650px;
    }

    .pricing-table .btn-learn-more {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    .pricing-table .btn-learn-more span {
        display: none;
    }

    .pricing-table .btn-learn-more i {
        margin: 0;
    }
}


/* =============================================================================
   PAGE OVERRIDES — exact live-reference rendering + runtime-var safety.
   Literals used instead of var(--primary-color)/gradient vars because the
   runtime can override CSS variables (known trap). Buttons are SOLID header
   red per site convention (matches .btn-book-appointment), not gradient.
   ============================================================================= */

/* Hero: full-opacity image + navy gradient 0.92 -> 0.88 (live reference) */

/* Hero content column = reference col-lg-10 centered (beats the global 770px pin) */
@media (min-width: 992px) {
  .pricing-page .hero-section .row > [class*="col-"] {
    width: 83.33333333% !important;
    max-width: 100% !important;
  }
}

.pricing-page .hero-section .hero-title {
  font-size: 1.95rem;
  font-weight: 700;
  text-transform: uppercase;
}

.pricing-page .hero-section .hero-subtitle {
  font-size: 0.975rem;
  opacity: 0.9;
}

.pricing-page .hero-buttons .btn-primary {
  background-color: #ce3645 !important;
  border: 1px solid rgba(206, 54, 69, 0.7) !important;
  box-shadow: 0 10px 30px rgba(206, 54, 69, 0.4) !important;
  color: #ffffff !important;
}

.pricing-page .hero-buttons .btn-primary:hover {
  background-color: #dd4554 !important;
  box-shadow: 0 14px 40px rgba(206, 54, 69, 0.55) !important;
  color: #ffffff !important;
}

/* Table card header + price cells: literal reference colors */
.pricing-table-header {
  background: linear-gradient(135deg, #ce3645 0%, #a62d3a 100%) !important;
}

.pricing-table .price-cell {
  color: #ce3645 !important;
}

/* Learn More buttons: SOLID header red (site convention), not gradient */
.pricing-table .btn-learn-more {
  background: #ce3645 !important;
  color: #ffffff !important;
}

.pricing-table .btn-learn-more:hover {
  background: #dd4554 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(206, 54, 69, 0.3) !important;
}

/* Final CTA (background_type 'dark' → .bg-dark): live reference navy gradient +
   white text + red button. Also neutralize the global red-gradient .cta-title. */
.pricing-page section.cta-section.bg-dark {
  background: linear-gradient(135deg, #1a1a2e, #16213e) !important;
  color: #ffffff;
}

.pricing-page .cta-section.bg-dark .cta-title {
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
}

.pricing-page .cta-section.bg-dark .cta-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.125rem;
  max-width: 700px;
  margin: 0 auto 1.5rem;
}

/* Intro (cta section WITHOUT .bg-dark) — styled as the reference
   pricing-information block: white bg, dark uppercase title, left-aligned
   paragraphs in a wide centered column, yellow notice paragraph. */
.pricing-page section.cta-section:not(.bg-dark) {
  background: #ffffff !important;
  color: #333333;
  padding: 60px 0 40px;
}

.pricing-page .cta-section:not(.bg-dark) .cta-title {
  color: #2c2c2c !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #2c2c2c !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

@media (min-width: 992px) {
  .pricing-page .cta-section:not(.bg-dark) .row > [class*="col-"] {
    width: 83.33333333%;
    max-width: 100%;
  }
}

.pricing-page .cta-section:not(.bg-dark) .cta-subtitle {
  color: #444444;
  text-align: left;
  line-height: 1.8;
  font-size: 1rem;
}

.pricing-page .cta-section:not(.bg-dark) .cta-subtitle p {
  margin-bottom: 1.5rem;
  color: #444444;
}

.pricing-page .cta-section:not(.bg-dark) .cta-subtitle .pricing-alert,
.pricing-page .cta-section:not(.bg-dark) .cta-subtitle p:last-child {
  background-color: #fff3cd;
  border: 1px solid #ffc107;
  border-left: 4px solid #ffc107;
  color: #856404;
  padding: 1rem 1.25rem;
  border-radius: 6px;
}

.pricing-page .cta-section:not(.bg-dark) .cta-subtitle p:last-child strong {
  color: #856404;
  font-weight: 600;
}

.pricing-page .cta-section .btn,
.pricing-page .cta-section .btn-primary,
.pricing-page .cta-section .btn-light {
  background-color: #ce3645 !important;
  border: 1px solid rgba(206, 54, 69, 0.7) !important;
  color: #ffffff !important;
  border-radius: 30px;
  padding: 12px 30px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(206, 54, 69, 0.4) !important;
}

.pricing-page .cta-section .btn:hover {
  background-color: #dd4554 !important;
  color: #ffffff !important;
  box-shadow: 0 14px 40px rgba(206, 54, 69, 0.55) !important;
}

/* =============================================================================
   FEES LIST — category accordion
   One collapsible card per category, built on <details>/<summary>: it opens
   with no JavaScript and keeps native keyboard/AT behaviour. Rows show the
   service name and its fee only.
   ============================================================================= */

.gm-fees {
  --fees-card-gap: 10px;
  --fees-pad-inline: 18px;
  --fees-accent: var(--primary-color, #ce3645);
  --fees-accent-soft: rgba(206, 54, 69, 0.09);
  --fees-ink: var(--heading-color, #0b0c14);
  --fees-muted: var(--text-muted, #6c757d);
  --fees-line: rgba(15, 18, 34, 0.07);
}

.gm-fees .pricing-table-section {
  padding-block: var(--pt-section-padding-block, 60px);
  background: transparent;
}

/* ---- intro ---- */

.gm-fees {
  /* Display face for the intro heading. Playfair Display is on the platform's
     font list and is loaded by layout/base.html when typography.font_family
     .display names it; the serif stack behind it covers the gap if it is not. */
  --fees-display-font: var(--font-display, 'Playfair Display', Georgia, 'Times New Roman', serif);
}

.gm-fees__intro {
  max-width: 76ch;
  /* Centred block: auto margins keep the measure readable instead of letting
     the text run the full container width. */
  margin-inline: auto;
  margin-block-end: 26px;
  text-align: center;
}

.gm-fees__eyebrow {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fees-accent);
}

/* Maple-leaf divider: a rule either side of the mark, both fading out so the
   pair reads as one ornament rather than two stray lines. */
.gm-fees__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-block: 10px 12px;
  color: var(--fees-accent);
}

.gm-fees__ornament-mark {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.gm-fees__ornament-rule {
  width: clamp(40px, 9vw, 88px);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--fees-line));
}

.gm-fees__ornament-rule:last-child {
  background: linear-gradient(to left, transparent, var(--fees-line));
}

.gm-fees__intro-title {
  margin: 0 0 16px;
  font-family: var(--fees-display-font);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--fees-ink);
}

.gm-fees__intro-accent {
  color: var(--fees-accent);
}

.gm-fees__intro-lead {
  margin: 0 0 12px;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-color, #495057);
}

/* Scope and exclusions — present, but quieter than the lead above it. */
.gm-fees__intro-note {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fees-muted);
}

.gm-fees__list {
  /* Holds the grid in from the container edge: at full container width the
     cards stretch far enough that the fee column drifts away from the name. */
  max-width: 1040px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fees-card-gap);
  /* Rows are sized from the closed head, never from an open panel: the panel is
     out of flow, so opening a card never moves its neighbours. */
  align-items: start;
  grid-auto-rows: min-content;
  /* ...but the section still has to own the space the panel hangs into, or it
     would overlap whatever follows. The section's script measures the overhang
     and sets this; with no script (or nothing open) it stays 0. */
  padding-block-end: var(--fees-open-overhang, 0px);
}

.gm-fees__group {
  /* Every card is positioned with an explicit z-index: without one, a card
     later in the DOM paints over the open card's panel even though the panel
     asks for a higher layer (z-index only applies to positioned elements). */
  position: relative;
  z-index: 1;
  /* The card is exactly as tall as its head, open or closed. The panel is out
     of flow, so a <details> that still measured it would stretch the grid row
     and push its neighbours around.

     Tall enough for a two-line title plus its description ("Reviews & Complex
     Cases" / "Second Opinions & Appeals"): at 68px that combination overflowed
     the card. The height is what grows here, never the type size. */
  block-size: 88px;
  background: #fff;
  border: 1px solid var(--fees-line);
  border-radius: 14px;
  /* Brand-tinted rather than neutral black — softer on a warm page. */
  box-shadow: 0 4px 18px rgba(206, 54, 69, 0.05);
  transition: box-shadow var(--theme-animation-duration-fast, 150ms)
              var(--theme-animation-easing-standard, ease);
}

.gm-fees__group:hover {
  box-shadow: 0 8px 26px rgba(206, 54, 69, 0.1);
}

/* ---- exclusions notice ----------------------------------------------
   Sits under the accordion and qualifies every fee above it. Built from the
   same --fees-* tokens as the cards, so it retunes with them rather than
   carrying its own palette. */
.gm-fees__excluded {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 24px;
  /* Same measure as .gm-fees__list above it, so the notice lines up with the
     accordion it qualifies rather than running the full container width. */
  max-width: 1040px;
  margin-inline: auto;
  margin-block-start: 40px;
  background: #fff;
  /* The accent edge marks this as a caveat attached to the list, not a new
     section starting. */
  border: 1px solid var(--fees-line);
  border-inline-start: 4px solid var(--fees-accent);
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(206, 54, 69, 0.05);
  padding: 24px 28px;
}

.gm-fees__excluded-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: 999px;
  background: var(--fees-accent-soft);
  color: var(--fees-accent);
  font-size: 1.5rem;
  align-self: start;
}

.gm-fees__excluded-main {
  min-width: 0;
  border-inline-start: 1px solid var(--fees-line);
  padding-inline-start: 24px;
}

.gm-fees__excluded-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  color: var(--fees-ink);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
}

.gm-fees__excluded-title i {
  color: var(--fees-accent);
  font-size: 0.95em;
}

.gm-fees__excluded-text {
  margin: 0 0 8px;
  color: var(--fees-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

.gm-fees__excluded-text:last-child {
  margin-bottom: 0;
}

/* The emphasis inside the sentence is the point of the notice, so it takes the
   body ink rather than the muted tone around it. */
.gm-fees__excluded-text strong {
  color: var(--fees-ink);
  font-weight: 700;
}

/* Actions span both columns and are divided off, so the panel reads as
   statement first, then what to do about it. */
.gm-fees__excluded-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-block-start: 20px;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--fees-line);
}

.gm-fees__excluded-cta,
.gm-fees__excluded-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--theme-animation-duration-fast, 150ms)
                var(--theme-animation-easing-standard, ease),
              border-color var(--theme-animation-duration-fast, 150ms)
                var(--theme-animation-easing-standard, ease),
              color var(--theme-animation-duration-fast, 150ms)
                var(--theme-animation-easing-standard, ease);
}

.gm-fees__excluded-cta {
  background: var(--fees-accent);
  border: 1px solid var(--fees-accent);
  color: #fff;
}

.gm-fees__excluded-cta:hover,
.gm-fees__excluded-cta:focus {
  background: var(--primary-hover, #dd4554);
  border-color: var(--primary-hover, #dd4554);
  color: #fff;
}

/* Secondary: an outward reference, so it stays outlined next to the filled
   action it accompanies. */
.gm-fees__excluded-link {
  background: #fff;
  border: 1px solid var(--fees-line);
  color: var(--fees-ink);
}

.gm-fees__excluded-link:hover,
.gm-fees__excluded-link:focus {
  border-color: var(--fees-accent);
  color: var(--fees-accent);
}

.gm-fees__excluded-link i:last-child {
  font-size: 0.75em;
  opacity: 0.7;
}

.gm-fees__excluded-cta:focus-visible,
.gm-fees__excluded-link:focus-visible {
  outline: 2px solid var(--fees-accent);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  /* The round mark costs a column the text needs at this width, so the panel
     stacks and the mark sits above the heading. */
  .gm-fees__excluded {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 20px;
  }

  .gm-fees__excluded-main {
    border-inline-start: 0;
    padding-inline-start: 0;
  }

  .gm-fees__excluded-title {
    font-size: 1.25rem;
  }

  .gm-fees__excluded-actions {
    flex-direction: column;
  }

  .gm-fees__excluded-cta,
  .gm-fees__excluded-link {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gm-fees__excluded-cta,
  .gm-fees__excluded-link {
    transition: none;
  }
}

/* The open card grows in flow and simply reads as the taller one — it is
   raised only so its shadow falls over its neighbours, not their content. */
/* Open, the head is the TOP HALF of a single card: the panel continues it
   below, so this element gives up its bottom rounding, its bottom border and
   its own drop shadow (the panel carries the shadow for the whole shape).
   Without that, two separate bordered boxes read as stuck together. */
.gm-fees__group[open] {
  z-index: 5;
  border-color: var(--fees-accent);
  border-bottom-color: transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: none;
}

/* When a card is open the rest of the grid recedes, so the open panel is what
   the eye settles on. They keep their space — only their rendering softens. */
.gm-fees__list:has(.gm-fees__group[open]) .gm-fees__group:not([open]) {
  filter: blur(3px);
  opacity: 0.45;
  transition: filter var(--theme-animation-duration-normal, 250ms)
                var(--theme-animation-easing-standard, ease),
              opacity var(--theme-animation-duration-normal, 250ms)
                var(--theme-animation-easing-standard, ease);
}

/* Blur is a heavy visual shift; readers who ask for less motion get the dimming
   without it. Browsers without :has() simply keep every card sharp. */
@media (prefers-reduced-motion: reduce) {
  .gm-fees__list:has(.gm-fees__group[open]) .gm-fees__group:not([open]) {
    filter: none;
    transition: none;
  }
}

/* ---- summary (the clickable head) ---- */

.gm-fees__head {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Matches the card's fixed height, so every card is identical no matter how
     many lines its title and description take. */
  block-size: 100%;
  padding: 12px var(--fees-pad-inline);
  cursor: pointer;
  list-style: none;
  /* The card no longer clips its children (the panel has to escape it), so the
     head carries the rounding itself. */
  border-radius: 13px;
  transition: background var(--theme-animation-duration-fast, 150ms)
              var(--theme-animation-easing-standard, ease);
}

/* Both are needed: WebKit uses the pseudo-element, others use list-style. */
.gm-fees__head::-webkit-details-marker {
  display: none;
}

.gm-fees__head:hover {
  background: rgba(15, 18, 34, 0.02);
}

.gm-fees__head:focus-visible {
  outline: 2px solid var(--fees-accent);
  outline-offset: -3px;
  border-radius: 13px;
}

.gm-fees__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--fees-accent-soft);
  color: var(--fees-accent);
  font-size: 1rem;
}

/* "From" sits above the amount, separated from the text block by a rule.
   The column is a fixed width so a longer figure (CA$2,400.00) lines up with
   a short one (CA$100.00) instead of shifting the layout card to card. */
.gm-fees__from {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  flex: 0 0 auto;
  width: 108px;
  padding-inline-start: 14px;
  border-inline-start: 1px solid var(--fees-line);
  text-align: start;
}

.gm-fees__from-label {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--fees-muted);
  line-height: 1.2;
}

.gm-fees__from-amount {
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fees-ink);
  line-height: 1.2;
  white-space: nowrap;
}

/* Round +/− control. The glyph is two bars: the upright one rotates flat as
   the card opens, turning the plus into a minus. Drawn in CSS so there is no
   icon swap mid-animation. */
.gm-fees__toggle {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--fees-accent);
}

.gm-fees__toggle::before,
.gm-fees__toggle::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  width: 11px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  translate: -50% -50%;
  transition: rotate var(--theme-animation-duration-normal, 250ms)
              var(--theme-animation-easing-standard, ease);
}

.gm-fees__toggle::after {
  rotate: 90deg;
}

[open] > .gm-fees__head .gm-fees__toggle::after {
  rotate: 0deg;
}

.gm-fees__headings {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  /* Line boxes carry half-leading top and bottom; trimming it makes the block
     sit optically centred rather than a hair low. */
  padding-block: 0;
}

.gm-fees__title,
.gm-fees__tagline {
  margin: 0;
}

/* Titles and descriptions vary in length; clamping them keeps every card's
   text block the same height so the row of cards stays flush. The full text
   is still in the markup for search and assistive tech. */
.gm-fees__title,
.gm-fees__tagline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gm-fees__title {
  /* Two lines rather than one: a long category name was being cut mid-word
     ("Permanen…") in the narrower card. */
  -webkit-line-clamp: 2;
}

.gm-fees__tagline {
  -webkit-line-clamp: 2;
}

.gm-fees__title {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--fees-accent);
}

.gm-fees__tagline {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--fees-muted);
}

[open] > .gm-fees__head {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

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

.gm-fees__body {
  /* Out of flow, so opening a card never shifts its neighbours in the grid.
     The room it needs below the grid is reserved by --fees-open-overhang on
     the list wrapper, which is what keeps it off the section that follows. */
  /* It reads as the lower half of ONE card, not a second box below it:
       - inset-inline: -1px puts its side borders on top of the head's own, so
         the two verticals are a single continuous line down the card;
       - top: calc(100% - 1px) pulls it up over the head's bottom border, and
         its own top border becomes the single 1px divider between the two;
       - only the bottom corners are rounded — the head keeps the top ones;
       - the sides match the open head's brand-coloured frame, so the outline
         does not change colour halfway down. */
  position: absolute;
  inset-inline: -1px;
  top: calc(100% - 1px);
  z-index: 5;
  /* Opaque, so the card underneath is covered rather than showing through. */
  background: #fff;
  border: 1px solid var(--fees-accent);
  border-top: 1px solid var(--fees-line);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 14px 30px rgba(206, 54, 69, 0.12);
}

.gm-fees__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gm-fees__row + .gm-fees__row {
  border-top: 1px solid var(--fees-line);
}

.gm-fees__rows > .gm-fees__row:last-child .gm-fees__link {
  border-radius: 0 0 13px 13px;
}

/* Column captions inside the panel — quiet, uppercase, not a data row. */
.gm-fees__row--head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px var(--fees-pad-inline);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fees-ink);
}

.gm-fees__row--head .gm-fees__name,
.gm-fees__row--head .gm-fees__price {
  color: var(--fees-ink);
  font-weight: 700;
}

.gm-fees__link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px var(--fees-pad-inline);
  text-decoration: none;
  transition: background var(--theme-animation-duration-fast, 150ms)
              var(--theme-animation-easing-standard, ease);
}

.gm-fees__link:hover,
.gm-fees__link:focus-visible {
  background: rgba(15, 18, 34, 0.025);
}

.gm-fees__name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--fees-accent);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

.gm-fees__link:hover .gm-fees__name {
  color: var(--fees-accent);
}

.gm-fees__price {
  flex: 0 0 auto;
  color: var(--fees-accent);
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gm-fees__empty {
  margin: 0;
  padding: 16px var(--fees-pad-inline);
  color: var(--fees-muted);
  font-size: 0.9375rem;
}

/* Two columns need room for a name, a tagline, "From", a figure and a button
   side by side. Below this the pair starts truncating, so the list goes to one
   column while each card is still comfortable. */
@media (max-width: 1100px) {
  .gm-fees__list {
    grid-template-columns: minmax(0, 1fr);
    max-width: 620px;
  }
}

@media (max-width: 767px) {
  .gm-fees {
    --fees-pad-inline: 16px;
    --fees-card-gap: 10px;
  }

  /* Narrower cards wrap the title sooner, so the head needs more room than it
     does on a wide screen — the type stays the size it is. */
  .gm-fees__group {
    block-size: 96px;
  }

  .gm-fees__intro {
    margin-block-end: 22px;
  }

  .gm-fees__title {
    font-size: 0.9375rem;
  }

  /* Single column on a phone, so the open panel sits directly over the cards
     rather than beside them — they need to recede harder to stay out of the
     way. The no-preference guard keeps this from re-applying the blur that the
     reduced-motion rule above removes: that rule sits earlier in the file, so
     without the guard this one would win on cascade order and undo it. */
  @media (prefers-reduced-motion: no-preference) {
    .gm-fees__list:has(.gm-fees__group[open]) .gm-fees__group:not([open]) {
      filter: blur(6px);
      opacity: 0.3;
    }
  }
}

/* The chevron is decorative motion; respect the reader's preference. */
/* The +/− morph is decorative motion; respect the reader's preference. */
@media (prefers-reduced-motion: reduce) {
  .gm-fees__toggle::before,
  .gm-fees__toggle::after {
    transition: none;
  }
}

/* The caption and the figures share one column. Its width counts the arrow and
   the gap before it, so the header — which has an invisible placeholder in the
   arrow's place — ends on exactly the same right edge as the prices. */
.gm-fees__row--head .gm-fees__price,
.gm-fees__link .gm-fees__price {
  /* A fixed column, not a minimum: with min-width the wider caption grew its
     cell while a short figure kept the floor, so the two edges drifted apart.
     Same width on both, and they line up whatever the amount is.

     Aligned to the start, like the card head's own "From CA$…" block: every
     figure then begins on the same vertical, so the CA$ prefixes stack in a
     column instead of the amounts ending flush and the prefixes staggering
     (CA$700 vs CA$1,200). */
  flex: 0 0 96px;
  width: 96px;
  text-align: start;
}

/* The caption shares the figures' column, so "FEE" starts on the same vertical
   the amounts below it start on. */
.gm-fees__row--head .gm-fees__name {
  flex: 1 1 auto;
}



/* The header keeps an empty arrow cell so both rows have the same trailing
   column, which is what holds the fee column on the same vertical in both. */
.gm-fees__row--head,
.gm-fees__link {
  gap: 14px;
}

/* Row arrow: a visual affordance only — the whole row is already the link, so
   it is aria-hidden and never a second tab stop. The header row carries an
   empty placeholder of the same width so its columns stay aligned. */
@media (prefers-reduced-motion: reduce) {
    }


/* getme-css-bundle:end css/pages/pricing.css */


/* getme-css-bundle: css/pages/blog.css */
/* =============================================================================
   BLOG PAGE - CSS
   Ortak modüller kullanılıyor, sayfa-özel stiller burada
   ============================================================================= */

/* Blog Hero - uses hero-gradient-only from sections.css */
.blog-page .hero-gradient-only {
  text-align: center;
}

.blog-page .hero-gradient-only .hero-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.blog-page .hero-gradient-only .hero-subtitle {
  font-size: 1.25rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

/* Blog Categories */
.blog-categories {
  background: var(--bg-primary, #ffffff);
  color: var(--text-on-bg-primary, #1b1b1f);
}

.categories-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.category-btn {
  display: inline-block;
  text-decoration: none;
  background: var(--bg-primary, #ffffff);
  border: 2px solid var(--border-color, #e9ecef);
  border-radius: 25px;
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  color: var(--text-color, #495057);
  cursor: pointer;
  transition: all 0.3s ease;
}

.category-btn:hover,
.category-btn.active {
  background: var(--primary-color, #0072ff);
  border-color: var(--primary-color, #0072ff);
  color: var(--text-light, #ffffff);
}

/* ── Filter chips ────────────────────────────────────────────────────
   Shortcuts into the blog taxonomy (News, Guides, Tips, Updates — whatever the
   editors created). The row scrolls sideways on narrow screens rather than
   wrapping into several lines, so the grid below never gets pushed down. */
/* base.css forces 100px of top padding on every section[id^="section-"]. Here
   that reads as a gap: the grid opens straight under its own hero and the
   section heading is switched off. Trimmed to match the space below the filter
   panel, so the panel sits with equal air above and below it. Matching the
   !important is the only way past that rule; scoped to this id. */
#section-blog {
  padding-top: 2.5rem !important;
}

/* A filter chip is a tag-list item that navigates: the component gives it its
   size and spacing, and these rules add what makes it a control — the pill
   outline, the hover, and the filled active state. */
.blog-filter {
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: var(--radius-pill, 50px);
  background: var(--card-bg, #ffffff);
  color: var(--text-on-card, #1a1a2e);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--transition-fast, 0.15s ease),
    background-color var(--transition-fast, 0.15s ease),
    color var(--transition-fast, 0.15s ease);
}

.blog-filter:hover {
  border-color: var(--primary-color, #ce3645);
  color: var(--primary-color, #ce3645);
}

/* The active chip is filled: it states the current view rather than offering
   another destination, so it reads differently from the rest of the row. */
.blog-filter.is-active {
  background: var(--primary-color, #ce3645);
  border-color: var(--primary-color, #ce3645);
  color: #ffffff;
}

.blog-filter:focus-visible {
  outline: 2px solid var(--primary-color, #ce3645);
  outline-offset: 2px;
}

/* The count is secondary to the label it trails, so it never competes at the
   same weight. */
.blog-filter__count {
  font-size: 0.8em;
  opacity: 0.65;
}

/* The filter panel needs air between it and the grid; the component sets no
   outer margin of its own, since where it sits is the caller's business. */
#section-blog .gm-tag-list {
  margin-bottom: 2.5rem;
}

@media (max-width: 767px) {
  #section-blog {
    padding-top: 1.75rem !important;
  }

  #section-blog .gm-tag-list {
    margin-bottom: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-filter {
    transition: none;
  }
}

/* Blog Posts Section */
.blog-posts {
  background: var(--bg-primary, #ffffff);
  color: var(--text-on-bg-primary, #1b1b1f);
}

/* Blog Cards */
.blog-card {
  background: var(--card-bg, #ffffff);
  color: var(--text-on-card, #111827);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  /* One fixed card height across the whole grid, not just within a row: a
     shorter row would otherwise render shorter cards than the row above it.
     Every slot below holds a fixed height of its own — image, category pill,
     two title lines, three excerpt lines, meta row, link — and they add up to
     this figure, so the copy fits the box rather than pushing against it. */
  height: 500px;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.blog-card-image {
  position: relative;
  height: 200px;
  flex-shrink: 0;
  overflow: hidden;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}

/* Brand fallback for posts published without artwork. A logo is a mark, not a
   photograph: filling the frame with `cover` would crop or stretch it, so the
   mark is contained and centred on a tinted panel instead — the card keeps its
   height and the grid stays even. */
.blog-card-image--brand {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
    rgba(var(--primary-rgb, 206, 54, 69), 0.07),
    rgba(var(--secondary-rgb, 26, 26, 46), 0.07));
}

.blog-card-image--brand > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 2rem;
}

.blog-card-image--brand img,
.blog-card-image__brand {
  width: auto;
  height: auto;
  max-width: 62%;
  max-height: 62%;
  object-fit: contain;
  opacity: 0.85;
}

/* The mark is standing in for a photo, so it does not take the photo's zoom on
   hover — only a slight lift in presence. */
.blog-card:hover .blog-card-image--brand img,
.blog-card:hover .blog-card-image__brand {
  transform: none;
  opacity: 1;
}

/* blog-listing marks the fallback on the image itself rather than the wrapper. */
.blog-card-image__brand {
  margin: auto;
  padding: 2rem;
}

.blog-category-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--primary-color, #0072ff);
  color: var(--text-light, #ffffff);
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 500;
}

.blog-card-content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* The blog-grid section marks its card interior up as .blog-card-body, which
   had no rule at all — the text sat flush against all four corners. Same
   padding on every side so the copy is inset evenly, and the same column
   behaviour as .blog-card-content so the read-more link settles at the bottom
   of cards of unequal length. */
.blog-card-body {
  padding: 1.75rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.blog-card-body .blog-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  line-height: 1.4;
  /* Two lines, then ellipsis — and always two lines' worth of height, so a
     one-line headline does not pull the excerpt and footer up a row. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* 2 lines × 1.4 line-height */
  height: 2.8em;
}

.blog-card-body .blog-title a {
  color: var(--text-on-card, #111827);
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog-card-body .blog-title a:hover {
  color: var(--primary-color, #0072ff);
}

/* The excerpt is the card's only elastic slot, so it is pinned to a fixed three
   lines: clamped when the copy runs long, and holding the same three lines'
   height when it runs short. That is what keeps the meta row and the read-more
   link on one line across the whole grid — the slot above them never changes
   height, so nothing below it moves. */
.blog-card-body .blog-excerpt {
  color: var(--text-on-card, #4b5563);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  opacity: 0.9;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* 3 lines × 1.6 line-height */
  height: 4.8em;
}

/* The clamped excerpt is a -webkit-box, so it cannot double as the growing flex
   child that pushes the footer down. A spacer element would be markup added for
   layout alone, so the slack is collected on whichever element ends up last
   before the footer — but only ONE of them may claim it. Two `margin-top: auto`
   children each absorb a share, which is what dropped the read-more link below
   its neighbours on cards that carry no date.

   So: the meta line takes the slack when it exists, and the rule below hands it
   to the link only on cards where no meta line was rendered. */
.blog-card-body .blog-meta {
  margin-top: auto;
  margin-bottom: 0.75rem;
}

.blog-card-body .blog-read-more {
  /* Only as wide as its own label — as a flex child it would otherwise stretch
     the full card width and take clicks well past the link. */
  align-self: flex-start;
}

/* The meta row keeps its place even with nothing in it, so the read-more link
   below it sits at the same height on every card in the grid. */
.blog-card-body .blog-meta {
  min-height: 1.4em;
}

.blog-card-body .blog-category {
  /* align-self keeps the pill hugging its own text inside the flex column —
     inline-block would otherwise stretch to the card's full width. */
  align-self: flex-start;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--primary-color, #0072ff);
  color: var(--text-light, #ffffff);
}

/* A post filed under no category keeps the slot — invisible, but holding its
   row so the title starts at the same height as on every other card. */
.blog-card-body .blog-category.is-placeholder {
  visibility: hidden;
  /* Empty of text it would collapse to nothing, so the row is held open at the
     height the pill has when it does carry a word. */
  min-height: 1.2em;
}

.blog-read-more {
  color: var(--primary-color, #0072ff);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap 0.3s ease;
}

.blog-read-more:hover {
  gap: 0.75rem;
  color: var(--primary-color-dark, #0056b3);
}

.blog-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--text-on-card, #6c757d);
  opacity: 0.8;
}

.blog-meta i {
  margin-right: 0.25rem;
}

.blog-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.blog-title a {
  color: var(--text-on-card, #111827);
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog-title a:hover {
  color: var(--primary-color, #0072ff);
}

.blog-excerpt {
  color: var(--text-on-card, #4b5563);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  flex-grow: 1;
  opacity: 0.9;
}

.read-more-link {
  color: var(--primary-color, #0072ff);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap 0.3s ease;
}

.read-more-link:hover {
  gap: 0.75rem;
  color: var(--primary-color-dark, #0056b3);
}

/* No Posts State */
.no-posts-icon {
  width: 100px;
  height: 100px;
  background: var(--gradient-primary, linear-gradient(135deg, var(--tf-primary) 0%, var(--tf-secondary) 100%));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.no-posts-icon i {
  font-size: 2.5rem;
  color: var(--text-light, #ffffff);
}

/* Newsletter Section */
.newsletter-section {
  background: var(--bg-secondary, #f8f9fa);
  color: var(--text-on-bg-secondary, #1b1b1f);
}

.newsletter-section .section-title {
  color: var(--text-on-bg-secondary, #1b1b1f);
}

.newsletter-section .section-lead,
.newsletter-section .text-muted {
  color: var(--text-on-bg-secondary, #1b1b1f) !important;
  opacity: 0.8;
}

/* Blog Pagination */
.blog-pagination .page-link {
  border: none;
  padding: 0.75rem 1rem;
  margin: 0 0.25rem;
  border-radius: 8px;
  color: var(--text-color, #495057);
}

.blog-pagination .page-item.active .page-link {
  background: var(--primary-color, #0072ff);
  color: var(--text-light, #ffffff);
}

.blog-pagination .page-link:hover {
  background: var(--primary-color-light, #e6f0ff);
  color: var(--primary-color, #0072ff);
}

/* Blog Section Title */
.blog-page .section-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--heading-color, #1a1a2e);
}

.blog-page .section-lead {
  color: var(--text-muted, #6c757d);
}

/* Responsive */
@media (max-width: 991px) {
  .blog-page .hero-gradient-only .hero-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 767px) {
  .blog-page .hero-gradient-only .hero-title {
    font-size: 2rem;
  }

  .categories-wrapper {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.5rem;
  }

  .category-btn {
    white-space: nowrap;
  }

  .blog-card-content,
  .blog-card-body {
    padding: 1.25rem;
  }

  /* One column at this width, so a fixed height buys no alignment — it would
     only crop copy that now has room to breathe. The clamps above still bound
     the title and excerpt, so cards stay close in size. */
  .blog-card {
    height: auto;
    min-height: 460px;
  }
}
/* =============================================================================
   BLOG HERO — image + navy overlay (match services/pricing site style).
   Literals (runtime-var-safe); buttons SOLID header red.
   ============================================================================= */

@media (min-width: 992px) {
  .blog-page .hero-section .row > [class*="col-"] {
    width: 83.33333333% !important;
    max-width: 100% !important;
  }
}

.blog-page .hero-section .hero-title { font-size: 3.5rem; font-weight: 700; }
.blog-page .hero-section .hero-subtitle { font-size: 1.5rem; opacity: 0.9; }

@media (max-width: 991px) { .blog-page .hero-section .hero-title { font-size: 2.5rem; } }
@media (max-width: 767px) {
  .blog-page .hero-section .hero-title { font-size: 2rem; }
  .blog-page .hero-section .hero-subtitle { font-size: 1.2rem; }
}

/* Newsletter + empty-state buttons: solid header red */
.blog-page .newsletter-section .btn-primary,
.blog-page .newsletter-form .btn-primary,
.blog-page .blog-empty .btn-primary,
.blog-page .btn-primary {
  background-color: #ce3645 !important;
  border-color: #ce3645 !important;
  color: #ffffff !important;
}

.blog-page .newsletter-section .btn-primary:hover,
.blog-page .newsletter-form .btn-primary:hover,
.blog-page .btn-primary:hover {
  background-color: #dd4554 !important;
  border-color: #dd4554 !important;
  color: #ffffff !important;
}

/* Empty-state icon: SOLID header red (not gradient). Category active/badge:
   solid red too (runtime-var-safe). */
.blog-page .no-posts-icon,
.no-posts-icon {
  background: #ce3645 !important;
}

.blog-page .category-btn:hover,
.blog-page .category-btn.active {
  background: #ce3645 !important;
  border-color: #ce3645 !important;
  color: #ffffff !important;
}

.blog-page .blog-category-badge,
.blog-page .blog-category {
  background: #ce3645 !important;
  color: #ffffff !important;
}

/* getme-css-bundle:end css/pages/blog.css */


/* getme-css-bundle: css/pages/legal.css */
/* =====================================================
   Legal Pages CSS (Privacy, Terms, Disclaimer, FAQ)
   Merkezi stiller - tüm legal/bilgi sayfaları için
   Hero stili sections.css'deki hero-gradient-only kullanılıyor
   ===================================================== */

/* Content Section */
.privacy-content,
.terms-content,
.disclaimer-content,
.faq-content,
.policy-content,
.legal-content {
    padding: 50px 0;
    background: var(--bg-primary, #ffffff);
    color: var(--text-on-bg-primary, #1b1b1f);
}

/* Meta Info (Last Updated) */
.privacy-meta,
.terms-meta,
.disclaimer-meta,
.policy-meta,
.legal-meta {
    font-size: 0.9rem;
    color: var(--text-muted, #6c757d);
    margin-bottom: 30px;
}

/* Section Styling */
.privacy-section,
.terms-section,
.disclaimer-section,
.legal-body {
    margin-bottom: 40px;
}

.privacy-section h2,
.terms-section h2,
.disclaimer-section h2 {
    color: var(--primary-color, #0072ff);
    margin-bottom: 20px;
    font-weight: 700;
    position: relative;
    padding-bottom: 10px;
}

.privacy-section h2::after,
.terms-section h2::after,
.disclaimer-section h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(135deg, var(--primary-color, #0072ff), var(--secondary-color, #00c6ff));
}

.privacy-section p,
.terms-section p,
.disclaimer-section p {
    margin-bottom: 15px;
    line-height: 1.7;
    color: var(--text-on-bg-primary, #1b1b1f);
}

/* Lists */
.privacy-section ul,
.terms-section ul {
    margin-bottom: 15px;
    padding-left: 20px;
}

.privacy-section li,
.terms-section li {
    margin-bottom: 8px;
    line-height: 1.6;
    color: var(--text-on-bg-primary, #1b1b1f);
}

/* =====================================================
   FAQ Specific Styles
   ===================================================== */

.faq-category {
    margin-bottom: 40px;
}

.faq-category .category-title {
    color: var(--primary-color, #0072ff);
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 1.5rem;
    position: relative;
    padding-bottom: 10px;
}

.faq-category .category-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(135deg, var(--primary-color, #0072ff), var(--secondary-color, #00c6ff));
}

/* Accordion Styles */
.faq-content .accordion-item {
    border: 1px solid #e9ecef;
    border-radius: 8px !important;
    margin-bottom: 10px;
    overflow: hidden;
    background-color: var(--bg-primary, #fff);
}

.faq-content .accordion-button {
    font-weight: 600;
    color: var(--text-on-bg-primary, #1b1b1f);
    background-color: var(--bg-primary, #fff);
    padding: 1rem 1.25rem;
}

.faq-content .accordion-button:not(.collapsed) {
    color: var(--primary-color, #0072ff);
    background-color: rgba(var(--primary-rgb, 0, 114, 255), 0.05);
}

.faq-content .accordion-button:focus {
    box-shadow: none;
    border-color: var(--primary-color, #0072ff);
}

.faq-content .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230072ff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.faq-content .accordion-body {
    padding: 1rem 1.25rem;
    line-height: 1.7;
    background-color: var(--bg-primary, #fff);
    color: var(--text-on-bg-primary, #1b1b1f);
}

/* FAQ CTA Section */
.faq-cta {
    background: linear-gradient(135deg, var(--primary-color, #0072ff) 0%, var(--secondary-color, #00c6ff) 100%);
    color: white;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    margin-top: 40px;
}

.faq-cta h3 {
    margin-bottom: 15px;
    font-weight: 700;
}

.faq-cta p {
    margin-bottom: 20px;
    opacity: 0.9;
}

.faq-cta .btn-primary {
    background: var(--card-bg, white);
    color: var(--primary-color, #0072ff);
    border: none;
    padding: 12px 30px;
    font-weight: 600;
}

.faq-cta .btn-primary:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

/* =====================================================
   Back to Top Button
   ===================================================== */

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color, #0072ff), var(--secondary-color, #00c6ff));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0, 114, 255, 0.4);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 999;
}

.back-to-top.visible {
    opacity: 1;
}

.back-to-top:hover {
    transform: translateY(-5px);
    color: white;
}

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

@media (max-width: 991px) {
    .faq-cta {
        padding: 30px 20px;
    }
}
/* getme-css-bundle:end css/pages/legal.css */


/* getme-css-bundle: css/pages/partners.css */
/* =============================================================================
   PARTNERS PAGE - MODULAR CSS
   Artık tüm stiller modüllere taşındı
   ============================================================================= */

/* Core Modules */

/* Section Title Override (Partners specific) */
.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
  color: var(--text-on-card, #111827);
}

.section-title:after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  width: 50px;
  height: 4px;
  background: var(--gradient-primary, linear-gradient(135deg, var(--tf-primary) 0%, var(--tf-secondary) 100%));
}

@media (max-width: 991px) {
  .section-title {
    font-size: 2rem;
  }
}
/* =============================================================================
   PARTNERS PAGE — hero (generic .hero-section) styled like the reference
   .partners-hero-section: image + navy overlay 0.92->0.88, LEFT col-lg-7.
   Buttons SOLID header red (site convention). Runtime-var-safe literals.
   ============================================================================= */

@media (min-width: 992px) {
  .partners-page .hero-section .row > [class*="col-"] {
    width: 58.33333333% !important;   /* col-lg-7, left-aligned like reference */
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

.partners-page .hero-section .hero-content { text-align: left !important; }
.partners-page .hero-section .hero-title { font-size: 3rem; font-weight: 700; }
.partners-page .hero-section .hero-subtitle { font-size: 1.4rem; opacity: 0.9; }
.partners-page .hero-section .hero-buttons { justify-content: flex-start !important; }

@media (max-width: 991px) { .partners-page .hero-section .hero-title { font-size: 2.4rem; } }
@media (max-width: 767px) {
  .partners-page .hero-section .hero-title { font-size: 2rem; }
  .partners-page .hero-section .hero-subtitle { font-size: 1.15rem; }
}

/* Benefit-card icon + ideal checklist + buttons -> solid red (not gradient/var) */
.partners-page .benefit-icon { background: transparent !important; border: none !important; box-shadow: none !important; }
.partners-page .benefit-icon i { color: #ce3645 !important; }
.partners-page .partners-list li i { color: #ce3645 !important; }

.partners-page .hero-buttons .btn-primary,
.partners-page .btn-primary {
  background-color: #ce3645 !important;
  border: 1px solid rgba(206, 54, 69, 0.7) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 30px rgba(206, 54, 69, 0.4) !important;
}
.partners-page .hero-buttons .btn-primary:hover,
.partners-page .btn-primary:hover {
  background-color: #dd4554 !important;
  color: #ffffff !important;
  box-shadow: 0 14px 40px rgba(206, 54, 69, 0.55) !important;
}

/* getme-css-bundle:end css/pages/partners.css */


/* getme-css-bundle: css/pages/careers.css */
/* =============================================================================
   CAREERS PAGE - Page-specific overrides only
   All components and sections are loaded via theme.css (SSOT)
   ============================================================================= */

/* Section Title Override (Careers specific) */
.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
  color: var(--text-on-card, #111827);
}

.section-title:after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  width: 50px;
  height: 4px;
  background: var(--gradient-primary, linear-gradient(135deg, var(--tf-primary) 0%, var(--tf-secondary) 100%));
}

@media (max-width: 991px) {
  .section-title {
    font-size: 2rem;
  }
}
/* =============================================================================
   CAREERS — reference-exact (hero + red accents, solid red buttons)
   ============================================================================= */

/* Hero (reuses .contact-hero markup) */
.careers-page .contact-hero { padding: 90px 0 70px; color: #fff; position: relative; overflow: hidden; }
.careers-page .contact-hero .container { position: relative; z-index: 1; }
.careers-page .contact-title { font-size: 3.5rem; font-weight: 700; margin-bottom: 20px; color: #fff; }
.careers-page .contact-subtitle { font-size: 1.2rem; margin-bottom: 30px; opacity: 0.9; max-width: 640px; }
.careers-page .contact-hero-list { display: none; } /* careers hero has no checklist */

/* Section title underline -> solid red (was gradient) */
.careers-page .section-title { color: #111827; }
.careers-page .section-title::after { background: #ce3645 !important; }

/* Benefit icons -> solid red (reference: 2.8rem red icon, no box) */
.careers-page .benefit-icon { color: #ce3645 !important; background: transparent !important; font-size: 2.8rem; }
.careers-page .benefit-icon i { color: #ce3645 !important; }

/* Qualities checklist icons -> red */
.careers-page .qualities-list li i { color: #ce3645 !important; }

/* Buttons -> solid header red (not var/gradient) */
.careers-page .btn-primary,
.careers-page .contact-cta-btn {
  background-color: #ce3645 !important;
  border: 1px solid rgba(206, 54, 69, 0.7) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 30px rgba(206, 54, 69, 0.4) !important;
}
.careers-page .btn-primary:hover,
.careers-page .contact-cta-btn:hover {
  background-color: #dd4554 !important; color: #ffffff !important;
}

@media (max-width: 991px) { .careers-page .contact-title { font-size: 2.6rem; } }
@media (max-width: 767px) {
  .careers-page .contact-hero { padding: 70px 0 50px; }
  .careers-page .contact-title { font-size: 2.2rem; }
  .careers-page .contact-subtitle { font-size: 1rem; }
}

/* getme-css-bundle:end css/pages/careers.css */


/* getme-css-bundle: css/pages/about.css */
/* =============================================================================
   ABOUT PAGE — overrides to match reference (birebir)
   Hero: left-aligned, navy overlay, solid red primary button (not gradient/var).
   ============================================================================= */

/* Hero left alignment (col-lg-7, text-start) — reference sizes: 3.5rem / 1.5rem */
.about-page .hero-section .hero-content { text-align: left !important; }
.about-page .hero-section .hero-title { font-size: 3.5rem; font-weight: 700; margin-bottom: 20px; }
.about-page .hero-section .hero-subtitle { font-size: 1.5rem; margin-bottom: 30px; opacity: 0.9; }
.about-page .hero-section .hero-buttons { justify-content: flex-start !important; }

/* Hero lead paragraph (reference <p class="lead">) — readable on dark hero */
.about-page .hero-section .hero-lead {
  font-size: 1.1rem;
  line-height: 1.7;
  opacity: 0.9;
  margin-top: 1rem;
  max-width: 640px;
}

@media (max-width: 991px) { .about-page .hero-section .hero-title { font-size: 2.5rem; } }
@media (max-width: 767px) {
  .about-page .hero-section .hero-title { font-size: 2rem; }
  .about-page .hero-section .hero-subtitle { font-size: 1.2rem; }
  .about-page .hero-section .hero-lead { font-size: 1rem; }
}

/* =============================================================================
   TYPOGRAPHY — matched to reference live CSS (transfiguredimmigration.ca) exactly.
   Accents (tick icons, bars, underline) forced SOLID RED (#ce3645), not gradient.
   ============================================================================= */

/* About-preview heading: eyebrow (big red) + subtitle */
.about-page .about-section-title {
  font-size: 2.6rem; font-weight: 700; margin-bottom: 16px;
  color: #ce3645; position: relative; display: inline-block;
  text-transform: none; letter-spacing: normal;
}
.about-page .about-section-title::after {
  content: ''; position: absolute; bottom: -8px; left: 50%;
  transform: translateX(-50%); width: 60px; height: 3px;
  background: #ce3645; border-radius: 2px;
}
.about-page .about-section-subtitle {
  font-size: 1.2rem; font-weight: 500; color: #374151;
  max-width: 720px; margin: 0 auto; line-height: 1.7;
}

/* Preview paragraphs */
.about-page .about-preview-text {
  font-size: 1.05rem; color: #374151; max-width: none;
  margin: 0 0 18px; line-height: 1.8; font-weight: 400;
}

/* Services block */
.about-page .about-preview-services-title {
  font-size: 1.15rem; font-weight: 700; margin-bottom: 16px;
  color: #ce3645; position: relative; padding-left: 16px;
}
.about-page .about-preview-services-title::before {
  content: ''; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%); width: 4px; height: 20px;
  background: #ce3645; border-radius: 2px;
}
.about-page .about-preview-services-list { padding-left: 0; margin: 0; list-style: none; }
.about-page .about-preview-services-list li {
  margin-bottom: 12px; padding-left: 32px; color: #374151;
  font-size: 1rem; line-height: 1.6; position: relative; transition: all 0.2s ease;
}
.about-page .about-preview-services-list li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  width: 24px; height: 24px;
  background: #ce3645 !important; background-image: none !important;
  color: #ffffff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: bold; font-size: 0.85rem;
}
.about-page .about-preview-services-list li:hover { color: #111827; padding-left: 36px; }

/* Approach typography + solid red bar */
.about-page .about-approach-title {
  font-size: 2.4rem; font-weight: 700; color: #111827;
  margin-bottom: 24px; position: relative; padding-left: 20px;
  text-transform: none; letter-spacing: normal;
}
.about-page .about-approach-title::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 5px; background: #ce3645; border-radius: 2px;
}
.about-page .about-approach-text {
  font-size: 1.1rem; color: #374151; line-height: 1.8; margin-bottom: 32px;
}

/* Summary card top accent bar -> solid red (was gradient) */
.about-page .about-summary-card::before { background: #ce3645 !important; background-image: none !important; }

@media (max-width: 767px) {
  .about-page .about-section-title { font-size: 2rem; }
  .about-page .about-approach-title { font-size: 2rem; }
  .about-page .about-approach-text { font-size: 1rem; }
}

/* Buttons -> solid header red (same convention as other pages), NOT gradient/var */
.about-page .hero-buttons .btn-primary,
.about-page .btn-primary {
  background-color: #ce3645 !important;
  border: 1px solid rgba(206, 54, 69, 0.7) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 30px rgba(206, 54, 69, 0.4) !important;
}
.about-page .hero-buttons .btn-primary:hover,
.about-page .btn-primary:hover {
  background-color: #dd4554 !important;
  color: #ffffff !important;
  box-shadow: 0 14px 40px rgba(206, 54, 69, 0.55) !important;
}

/* Approach feature icon box -> solid red (was gradient), white icon */
.about-page .approach-feature-icon {
  background: #ce3645 !important; background-image: none !important;
  color: #ffffff !important;
}

/* Book-appointment (approach) button hover -> solid red (safety vs var resolution) */
.about-page .btn-book-appointment:hover {
  background-color: #ce3645 !important;
  border-color: #ce3645 !important;
  color: #ffffff !important;
}

/* getme-css-bundle:end css/pages/about.css */


/* getme-css-bundle: css/pages/appointment.css */
/* =============================================================================
   BOOK APPOINTMENT PAGE - overrides
   Reuses the reference contact-hero styling; buttons forced SOLID RED (#ce3645).
   ============================================================================= */

/* ---- Hero (reference-exact, same as contact hero) ---- */
.appointment-page .contact-hero { padding: 90px 0 70px; color: #fff; position: relative; overflow: hidden; }
.appointment-page .contact-hero .container { position: relative; z-index: 1; }

.appointment-page .contact-title { font-size: 3.5rem; font-weight: 700; margin-bottom: 20px; color: #fff; }
.appointment-page .contact-subtitle { font-size: 1.5rem; margin-bottom: 30px; opacity: 0.9; max-width: 640px; }

.appointment-page .contact-hero-list { list-style: none; padding-left: 0; margin: 0 0 1.5rem; }
.appointment-page .contact-hero-list li { margin-bottom: 0.4rem; font-size: 0.98rem; }
.appointment-page .contact-hero-list li i { color: #ffb4b4; margin-right: 8px; }

/* ---- Booking form buttons / any primary button -> solid header red ---- */
.appointment-page .btn-primary,
.appointment-page .visible-form-section .btn-primary,
.appointment-page .booking-form .btn-primary {
  background-color: #ce3645 !important;
  border: 1px solid rgba(206, 54, 69, 0.7) !important;
  color: #ffffff !important;
}
.appointment-page .btn-primary:hover,
.appointment-page .visible-form-section .btn-primary:hover,
.appointment-page .booking-form .btn-primary:hover {
  background-color: #dd4554 !important;
  color: #ffffff !important;
}

@media (max-width: 991px) { .appointment-page .contact-title { font-size: 2.6rem; } }
@media (max-width: 767px) {
  .appointment-page .contact-hero { padding: 70px 0 50px; }
  .appointment-page .contact-title { font-size: 2.2rem; }
  .appointment-page .contact-subtitle { font-size: 1rem; }
}

/* getme-css-bundle:end css/pages/appointment.css */


/* getme-css-bundle: css/customer/portal.css */
.gm-page-customer-account.gm-layout-focused,
.gm-page-customer-login.gm-layout-focused {
    background: var(--gm-bg);
}

.gm-page-customer-account .gm-main--focused,
.gm-page-customer-login .gm-main--focused {
    margin: 0;
    padding: 0;
    width: 100%;
}

.gm-customer-portal-section {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    place-items: stretch;
    width: 100%;
}

.gm-customer-portal-section__mount {
    min-width: 0;
    width: 100%;
}

.gm-customer-login-section {
    margin-inline: auto;
    width: min(1040px, calc(100% - (var(--gm-page-gutter) * 2)));
}

.gm-page-customer-login .gm-customer-login-section {
    align-items: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    gap: clamp(22px, 4vw, 42px);
    grid-template-columns: minmax(0, 0.9fr) minmax(340px, 1.1fr);
    margin-block: clamp(28px, 6vw, 72px);
    min-height: min(680px, calc(100dvh - 160px));
    padding: 0;
}

.gm-page-customer-login .gm-customer-login-section__copy {
    align-content: center;
    background: var(--gm-surface);
    border: 1px solid var(--gm-border);
    border-radius: var(--theme-radius-md);
    box-shadow: var(--theme-shadow-lg);
    box-sizing: border-box;
    min-height: 320px;
    padding: clamp(24px, 4vw, 42px);
}

.gm-page-customer-login .gm-customer-login-section__copy h1 {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.08;
}

.gm-page-customer-login .gm-customer-login-section__copy p {
    font-size: 16px;
    max-width: 42ch;
}

.gm-page-customer-login .gm-customer-login-section__copy .gm-button {
    justify-self: start;
    margin-top: 6px;
    min-height: 46px;
}

.gm-page-customer-login .gm-customer-login-section__frame {
    background: transparent;
    border: 0;
    box-shadow: none;
    min-height: 0;
    padding: 0;
}

@media (max-width: 760px) {
    .gm-customer-login-section {
        width: calc(100% - 24px);
    }

    .gm-page-customer-login .gm-customer-login-section {
        grid-template-columns: minmax(0, 1fr);
        margin-block: 18px;
        min-height: auto;
    }
}

/* getme-css-bundle:end css/customer/portal.css */