/* ===================================================================
   FINAL GLOBAL ROOT STYLESHEET v3 (g-* prefix)
   ===================================================================
   CHANGES FROM v2:
   • Deduplicated — v2 had Sections 19-24 accidentally repeated
     multiple times via sequential appends. This file has each
     section exactly once.
   • Card shell unified: .g-service-card, .g-reason-card,
     .g-pricing-card, .g-review-card now share ONE base rule block
     (background/border/radius/padding/shadow/hover-lift), with only
     genuine per-type differences written separately below it.
     No HTML changes needed — same class names as before.
   • Pill/tag shell unified: .g-tag and .g-area-tag share one base
     rule; .g-tag--primary and .g-area-tag--primary share the coral
     variant. Two visual variants total, used everywhere.
   HOW TO USE:
   • Add `.g-section` to any section container.
   • Add `.g-bg-dark`, `.g-bg-light`, `.g-bg-white`, `.g-bg-medium-navy`,
     `.g-bg-cool`, `.g-bg-offwhite-deep`, or `.g-faq-section` for
     backgrounds — ALL of these go on the section container itself.
   • Dark-background contrast (headings, subtitles, CTA) is automatic.
   =================================================================== */

/* ---- 1. FONTS & BASE RESET ---- */


html:not(.js) .g-reveal,
html:not(.js) .g-reveal-left,
html:not(.js) .g-reveal-right,
html:not(.js) .svc-pfi,
html:not(.js) .lg-price-card,
html:not(.js) .g-hero-kicker,
html:not(.js) .g-hero-display,
html:not(.js) .g-hero-sub,
html:not(.js) .g-hero-btns,
html:not(.js) .g-hero-chips {
  opacity: 1 !important;
  transform: none !important;
}






@font-face {
  font-family: "DM Sans";
  src: url("/wp-content/uploads/fonts/DMSans-VariableFont_opsz_wght.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/wp-content/uploads/fonts/DMSans-Italic-VariableFont_opsz_wght.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("/wp-content/uploads/fonts/DMSerifDisplay-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("/wp-content/uploads/fonts/DMSerifDisplay-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
*, *::before, *::after { box-sizing: border-box; }
.elementor-section, .e-con, .e-con-inner, .elementor-widget-container { background-color: transparent; }
.g-faq-q:where(button) { -webkit-appearance: none; appearance: none; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }

/* ---- 2. CSS VARIABLES (DESIGN TOKENS) ---- */
:root {
  --g-coral-light: #f0783f;
  --g-coral: #e8622a;
  --g-navy-medium: #2e3d5c;
  --g-navy-dark: #1c2333;
  --g-white: #ffffff;
  --g-offwhite: #f8f6f3;
  --g-offwhite-deep: #f1ede6;
  --g-cool-white: #e6e8ec;
  --g-coral-rgb: 232, 98, 42;
  --g-ink: #1c1b20;
  --g-body: #57535e;
  --g-muted: #8c8794;
  --g-head-light: #f0eee8;
  --g-body-light: rgba(240, 238, 232, .7);
  --g-card: #fefcfa;
  --g-wa: #25D366;
  --g-text-xs: 12px;
  --g-text-small: 15px;
  --g-text-body: 17px;
  --g-text-h3: 26px;
  --g-text-h2: 44px;
  --g-text-h1: clamp(2.1rem, 5.5vw, 4.2rem);
  --g-text-h1-sub: clamp(1.1rem, 3.8vw, 1.45rem);
  --g-fh: "DM Serif Display", Georgia, serif;
  --g-fb: "DM Sans", system-ui, sans-serif;
  --g-lh-heading: 1.2;
  --g-lh-body: 1.65;
  --g-pad-dt: 120px;
  --g-pad-tb: 72px;
  --g-pad-mb: 52px;
  --g-pad-x-dt: 40px;
  --g-pad-x-tb: 24px;
  --g-pad-x-mb: 18px;
  --g-maxw: 1180px;
  --g-maxw-narrow: 720px;
  --g-maxw-mid: 960px;
  --g-hero-h: 82vh;
  --g-shadow-sm: 0 1px 4px rgba(28, 27, 32, .06), 0 4px 16px rgba(28, 27, 32, .04);
  --g-shadow-lg: 0 8px 32px rgba(28, 27, 32, .1);
  --g-shadow-glow: 0 8px 32px rgba(var(--g-coral-rgb), .15);
  --g-ease: cubic-bezier(.4, 0, .2, 1);
  --g-spring: cubic-bezier(.22, 1, .36, 1);
  --g-transition: .3s var(--g-ease);
  --g-r: 999px;
  --g-rc: 16px;
  --g-ri: 12px;
  --g-section-min-dt: 480px;
  --g-section-min-tb: 400px;
  --g-section-min-mb: 320px;
  /* ===== SPACING SCALE — every gap on the site uses one of
     these 8 steps. Don't invent new values; pick the nearest
     step up or down. ===== */
  --g-space-1: 8px;
  --g-space-2: 16px;
  --g-space-3: 24px;
  --g-space-4: 32px;
  --g-space-5: 48px;
  --g-space-6: 64px;
  --g-space-7: 96px;
  --g-space-8: 140px;
}
@media (max-width: 1024px) {
  :root { --g-text-h2: 2.1rem; --g-text-h3: 1.5rem; }
}
@media (max-width: 767px) {
  :root { --g-text-h2: 1.6rem; --g-text-h3: 1.35rem; }
}

/* ---- 3. SECTION & BACKGROUND UTILITIES ---- */
.g-section { padding: 0 !important; }
.g-section > .e-con-inner {
  padding-top: var(--g-pad-dt) !important;
  padding-bottom: var(--g-pad-dt) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: var(--g-maxw);
  margin-inline: auto;
  box-sizing: border-box;
}
/* Content-heavy sections (grids that naturally fill their own
   space) are exempted from the forced min-height/centering —
   forcing extra height on top of a real grid is what creates
   awkward empty gaps. Only sparse, text-only sections (About
   intro, simple CTA, Service Area) get the min-height treatment. */
.g-section:not(.g-hero):not(:has(.g-portfolio-grid)):not(:has(.svc-pf-grid)):not(:has(.g-pricing-grid)):not(:has(.g-service-grid)):not(:has(.g-reason-grid)):not(:has(.g-review-grid)):not(:has(.g-process-grid)):not(:has(.g-faq-wrap)) > .e-con-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--g-section-min-dt);
}
@media (max-width: 1024px) {
  .g-section:not(.g-hero):not(:has(.g-portfolio-grid)):not(:has(.svc-pf-grid)):not(:has(.g-pricing-grid)):not(:has(.g-service-grid)):not(:has(.g-reason-grid)):not(:has(.g-review-grid)):not(:has(.g-process-grid)):not(:has(.g-faq-wrap)) > .e-con-inner {
    min-height: var(--g-section-min-tb);
  }
}
@media (max-width: 767px) {
  .g-section:not(.g-hero):not(:has(.g-portfolio-grid)):not(:has(.svc-pf-grid)):not(:has(.g-pricing-grid)):not(:has(.g-service-grid)):not(:has(.g-reason-grid)):not(:has(.g-review-grid)):not(:has(.g-process-grid)):not(:has(.g-faq-wrap)) > .e-con-inner {
    min-height: var(--g-section-min-mb);
  }
}
.g-section > .elementor-container { max-width: var(--g-maxw); margin-inline: auto; }
@media (max-width: 1024px) {
  .g-section > .e-con-inner { padding-top: var(--g-pad-tb) !important; padding-bottom: var(--g-pad-tb) !important; }
}
@media (max-width: 767px) {
  .g-section > .e-con-inner {
    padding-top: var(--g-pad-mb) !important;
    padding-bottom: var(--g-pad-mb) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
.g-section .elementor-widget-container { padding: 0 !important; }
.g-section > .elementor-container,
.g-section .elementor-column,
.g-section .elementor-widget-wrap,
.g-section .e-con {
  padding: 0 !important;
  margin: 0 !important;
}
.g-section-x > .e-con-inner { padding-left: var(--g-pad-x-dt) !important; padding-right: var(--g-pad-x-dt) !important; }
@media (max-width: 1024px) {
  .g-section-x > .e-con-inner { padding-left: var(--g-pad-x-tb) !important; padding-right: var(--g-pad-x-tb) !important; }
}
@media (max-width: 767px) {
  .g-section-x > .e-con-inner { padding-left: var(--g-pad-x-mb) !important; padding-right: var(--g-pad-x-mb) !important; }
}
.g-bg-dark { background-color: var(--g-navy-dark) !important; color: #fff; }
.g-bg-light { background-color: var(--g-offwhite) !important; color: var(--g-ink); }
.g-bg-offwhite-deep { background-color: var(--g-offwhite-deep) !important; color: var(--g-ink); }
.g-bg-white { background-color: var(--g-white) !important; color: var(--g-ink); }
.g-bg-medium-navy { background-color: var(--g-navy-medium) !important; color: #fff; }
.g-bg-cool { background-color: var(--g-cool-white) !important; }
:where(.g-bg-dark, .g-bg-medium-navy) { --g-on-dark: 1; }

/* ---- 4. HERO COMPONENT ---- */
.g-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--g-navy-medium) 0%, var(--g-navy-dark) 55%, #151c2a 100%) !important;
  min-height: var(--g-hero-h) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.g-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(var(--g-coral-rgb), .06) 0%, transparent 65%);
  pointer-events: none;
  z-index: 1;
}
.g-hero a { text-decoration: none !important; }
body:not(.home) .g-hero { min-height: 62vh !important; padding-top: var(--g-space-7) !important; padding-bottom: var(--g-space-7) !important; }
@media (max-width: 767px) {
  body.home .g-hero {
    min-height: auto !important;
  }
  body.home .g-hero > .elementor-container,
  body.home .g-hero > .e-con-inner,
  body.home .g-hero .elementor-column,
  body.home .g-hero .elementor-widget-wrap,
  body.home .g-hero .e-con {
    min-height: auto !important;
  }
}
.g-hero--compact { min-height: auto !important; }
.g-hero > .elementor-container, .g-hero > .e-con-inner, .g-hero .elementor-column, .g-hero .elementor-widget-wrap, .g-hero .e-con {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  min-height: var(--g-hero-h) !important;
  width: 100% !important;
  position: relative;
  z-index: 3;
  padding: 0 !important;
}
body:not(.home) .g-hero > .elementor-container, body:not(.home) .g-hero > .e-con-inner, body:not(.home) .g-hero .e-con {
  min-height: auto !important;
}
.g-hero-inner {
  width: 100%;
  margin: 0;
  padding-left: var(--g-pad-x-dt) !important;
  padding-right: var(--g-pad-x-dt) !important;
  max-width: 800px;
  padding-top: clamp(80px, 11vh, 130px) !important;
  padding-bottom: clamp(100px, 13vh, 150px) !important;
  position: relative;
  z-index: 2;
}
@media (min-width: 1025px) { .g-hero-inner { flex: 0 1 560px; } }
@media (max-width: 1024px) {
  .g-hero-inner { padding-left: var(--g-pad-x-tb) !important; padding-right: var(--g-pad-x-tb) !important; padding-bottom: 36px; }
}
@media (max-width: 767px) {
  .g-hero-inner {
    padding-left: var(--g-pad-x-mb) !important;
    padding-right: var(--g-pad-x-mb) !important;
    max-width: 100%;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}
.g-hero-tag, .g-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--g-fb) !important;
  font-size: var(--g-text-xs) !important;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--g-coral-light) !important;
  margin-bottom: var(--g-space-3) !important;
  line-height: 1.3;
}
.g-hero-kicker {
  font-size: var(--g-text-body) !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  margin: 0 0 var(--g-space-2) !important;
  gap: 8px;
}
.g-hero-h1, .g-hero-display {
  font-family: var(--g-fh) !important;
  font-size: var(--g-text-h1) !important;
  line-height: 1.1 !important;
  color: var(--g-head-light) !important;
  letter-spacing: -.02em;
  max-width: 700px;
  margin: 0 0 var(--g-space-4);
  font-weight: 400;
}
.g-hero-h1 em, .g-hero-display em { font-style: italic; color: var(--g-coral-light) !important; }
.g-hero-sub {
  font-family: var(--g-fb) !important;
  font-size: var(--g-text-h1-sub) !important;
  max-width: 520px !important;
  color: rgba(240, 238, 232, .85) !important;
  font-weight: 300 !important;
  line-height: 1.65 !important;
  margin: 0 0 var(--g-space-6);
}
/* Desktop-only: wider container so the subheading wraps to fewer
   lines, larger + lighter subheading text, bigger primary CTA
   button, and more breathing room between hero elements. */
@media (min-width: 1025px) {
  .g-hero-inner { flex: 0 1 760px !important; }
  .g-hero-kicker { margin-bottom: var(--g-space-3) !important; }
  .g-hero-h1, .g-hero-display { margin-bottom: var(--g-space-5) !important; }
  .g-hero-sub {
    max-width: 720px !important;
    font-size: 1.65rem !important;
    font-weight: 300 !important;
    margin-bottom: var(--g-space-6) !important;
  }
  .g-hero-btns {
    margin-bottom: var(--g-space-4) !important;
  }
  .g-hero-btns .g-btn--primary {
    font-size: 1.05rem !important;
    padding: 19px 40px !important;
  }
}
.g-hero-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--g-space-3); }
.g-hero-chips { display: flex; align-items: center; flex-wrap: wrap; margin-top: 0; gap: var(--g-space-4); }

/* Center hero content on desktop/tablet when trust chips are
   present — this was in the old system and was lost during
   consolidation. Restoring it here. */
@media (min-width: 768px) {
  .g-hero-inner:has(.g-hero-chips) {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .g-hero-inner:has(.g-hero-chips) .g-hero-kicker,
  .g-hero-inner:has(.g-hero-chips) .g-hero-display,
  .g-hero-inner:has(.g-hero-chips) .g-hero-sub {
    margin-left: auto;
    margin-right: auto;
  }
  .g-hero-inner:has(.g-hero-chips) .g-hero-btns,
  .g-hero-inner:has(.g-hero-chips) .g-hero-chips {
    justify-content: center;
  }
}
.g-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--g-fb) !important;
  font-size: var(--g-text-small) !important;
  font-weight: 600;
  color: rgba(240, 238, 232, .75);
  background: none;
  border: none;
  padding: 0;
}
.g-chip span { color: var(--g-coral-light); }
@media (max-width: 767px) {
  .g-hero > .elementor-container, .g-hero > .e-con-inner, .g-hero .elementor-column, .g-hero .elementor-widget-wrap, .g-hero .e-con { min-height: auto !important; }
  .g-hero-tag, .g-hero-kicker { margin-bottom: 36px !important; font-size: 15px !important; }
  .g-hero-h1, .g-hero-display { font-size: clamp(2rem, 8vw, 2.4rem) !important; margin: 0 0 28px; }
  .g-hero-btns .g-btn--primary, .g-hero-btns .g-btn--outline-light {
    flex: 1 1 0 !important; width: auto !important; font-size: var(--g-text-small) !important; padding: 16px 12px !important; white-space: nowrap !important;
  }
  .g-chip { font-size: 13px !important; }
  .g-hero-sub { line-height: 1.65 !important; margin-bottom: 44px; font-weight: 300 !important; }
  .g-hero-btns { flex-direction: row !important; flex-wrap: nowrap !important; gap: 12px !important; margin-bottom: 28px; }
  .g-hero-chips { gap: 8px 16px; }
  .g-hero-kicker { font-size: var(--g-text-body) !important; margin-bottom: 10px !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .g-hero-inner { padding-left: clamp(18px, 4vw, 40px) !important; padding-right: clamp(18px, 4vw, 40px) !important; }
  .g-hero-btns .g-btn--primary, .g-hero-btns .g-btn--outline-light { font-size: var(--g-text-small) !important; padding: 14px 24px !important; }
  .g-hero-kicker { margin-bottom: var(--g-space-3) !important; }
  .g-hero-h1, .g-hero-display { margin-bottom: var(--g-space-4) !important; }
  .g-hero-sub { margin-bottom: var(--g-space-5) !important; }
  .g-hero-btns { margin-bottom: var(--g-space-3) !important; }
}

/* ---- 5. BUTTONS ---- */
.g-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--g-fb) !important;
  font-size: var(--g-text-small) !important;
  font-weight: 600;
  line-height: 1;
  padding: 14px 28px;
  border-radius: var(--g-r);
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  letter-spacing: .01em;
  transition: background var(--g-transition), border-color var(--g-transition), color var(--g-transition), box-shadow var(--g-transition);
}
.g-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.g-btn--primary {
  background: var(--g-coral-light) !important;
  color: #fff;
  border: 1.5px solid var(--g-coral-light);
  box-shadow: 0 2px 8px rgba(var(--g-coral-rgb), .25);
}
.g-btn--primary:hover { background: var(--g-coral); border-color: var(--g-coral); color: #fff; box-shadow: 0 4px 16px rgba(var(--g-coral-rgb), .35); }
.g-btn--outline-light { background: transparent; color: rgba(255, 255, 255, .82); border: 1.5px solid rgba(255, 255, 255, .28); }
.g-btn--outline-light:hover { border-color: var(--g-coral); color: var(--g-coral); background: rgba(var(--g-coral-rgb), .06); }
.g-btn--whatsapp {
  background: #2d2926 !important; color: #fff !important; border: 1.5px solid #2d2926 !important; box-shadow: 0 2px 8px rgba(45, 41, 38, .3) !important;
}
.g-btn--whatsapp:hover { background: #3d3530 !important; border-color: #3d3530 !important; color: #fff !important; box-shadow: 0 4px 16px rgba(45, 41, 38, .35) !important; }
.g-bg-dark .g-btn--whatsapp { background: #3d3530 !important; border-color: rgba(255, 255, 255, .15) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .2) !important; }
.g-bg-dark .g-btn--whatsapp:hover { background: #4d433d !important; border-color: rgba(255, 255, 255, .22) !important; }
.g-btn--outline-dark { background: transparent; color: var(--g-ink) !important; border: 1.5px solid rgba(28, 27, 32, .22); }
.g-btn--outline-dark:hover { border-color: var(--g-coral); color: var(--g-coral) !important; background: rgba(var(--g-coral-rgb), .05); }
.g-btn--lg { font-size: var(--g-text-body) !important; padding: 17px 36px !important; }
.g-pf-foot .g-btn--outline-light {
  border: 1.5px solid rgba(var(--g-coral-rgb), .22) !important;
  padding: 12px 24px !important;
  font-size: var(--g-text-small) !important;
  color: var(--g-ink) !important;
  border-color: rgba(28, 35, 51, .25) !important;
  background: transparent !important;
}
.g-pf-foot .g-btn--outline-light:hover { color: var(--g-coral) !important; border-color: var(--g-coral) !important; background: rgba(var(--g-coral-rgb), .06) !important; }
:where(.g-bg-dark, .g-bg-medium-navy) .g-pf-foot .g-btn--outline-light { color: rgba(240, 238, 232, .82) !important; border-color: rgba(255, 255, 255, .28) !important; }
:where(.g-bg-dark, .g-bg-medium-navy) .g-pf-foot .g-btn--outline-light:hover { color: var(--g-coral) !important; border-color: var(--g-coral) !important; }

/* ---- 6. TYPOGRAPHY HELPERS ---- */
.g-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--g-fb) !important;
  font-size: var(--g-text-xs) !important;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--g-coral);
  margin-bottom: var(--g-space-2);
}
.g-eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--g-coral); border-radius: 2px; flex-shrink: 0; }
.g-eyebrow--center { justify-content: center; }
.g-heading {
  font-family: var(--g-fh) !important;
  font-size: var(--g-text-h2) !important;
  line-height: var(--g-lh-heading);
  color: var(--g-ink);
  margin: 0;
  font-weight: 400;
  letter-spacing: -.01em;
}
.g-heading em { font-style: italic; color: var(--g-coral); }
.g-heading--light, :where(.g-bg-dark, .g-bg-medium-navy) h2.g-heading, :where(.g-bg-dark, .g-bg-medium-navy) .g-heading { color: var(--g-head-light) !important; }
.g-heading--light em, :where(.g-bg-dark, .g-bg-medium-navy) .g-heading em { color: var(--g-coral-light) !important; }
.g-heading--center { text-align: center; }
.g-section-sub {
  font-family: var(--g-fb) !important;
  font-size: var(--g-text-body) !important;
  line-height: var(--g-lh-body);
  color: var(--g-body);
  margin: var(--g-space-4) 0 0;
}
/* Desktop and tablet: bump every section's supporting paragraph
   text sitewide to 20px. Mobile stays at the default 17px. */
@media (min-width: 768px) {
  .g-section-sub {
    font-size: 20px !important;
  }
}
@media (max-width: 767px) {
  .g-section-sub {
    margin-top: var(--g-space-2) !important;
  }
}
:where(.g-bg-dark, .g-bg-medium-navy) .g-section-sub { color: rgba(240, 238, 232, .65) !important; }
.g-section-head { text-align: center; max-width: 640px; margin: 0 auto var(--g-space-6); }
@media (max-width: 767px) {
  .g-section:has(.g-process-grid) .g-section-head {
    margin-bottom: var(--g-space-3) !important;
  }
}

/* ---- 7. UNIFIED CARD SYSTEM ----
   All 4 card types share one base shell (background, border, radius,
   padding, shadow, hover-lift). Only genuine per-type differences are
   written separately below. No HTML changes needed — same class
   names as before.
*/
.g-service-card, .g-reason-card, .g-pricing-card, .g-review-card {
  background: var(--g-card);
  border: 1px solid rgba(28, 27, 32, .1);
  border-radius: var(--g-rc);
  padding: clamp(20px, 2.5vw, 32px);
  display: flex;
  flex-direction: column;
  gap: var(--g-space-2);
  position: relative;
  box-shadow: var(--g-shadow-sm);
  transition: box-shadow var(--g-transition), border-color var(--g-transition), transform var(--g-transition);
}
.g-service-card:hover, .g-reason-card:hover, .g-pricing-card:hover, .g-review-card:hover {
  border-color: rgba(var(--g-coral-rgb), .22);
  box-shadow: var(--g-shadow-lg);
  transform: translateY(-3px);
}
/* "Accent" variant — featured/highlighted card (pricing's --featured,
   service's --featured). One shared visual treatment for both. */
.g-service-card--featured, .g-pricing-card--featured {
  border-color: rgba(var(--g-coral-rgb), .22);
  box-shadow: 0 2px 20px rgba(var(--g-coral-rgb), .08);
}
.g-service-card--featured:hover, .g-pricing-card--featured:hover { box-shadow: var(--g-shadow-glow); }

/* Service card — specific deltas only */
/* Service card previously forced pure white background, which
   read as flat/plain on a white section — now matches the same
   warm off-white shell every other card type already uses. */
.g-service-icon {
  width: 50px; height: 50px; border-radius: var(--g-ri);
  background: rgba(var(--g-coral-rgb), .12); border: 1px solid rgba(var(--g-coral-rgb), .22);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: var(--g-space-2);
}
.g-service-icon svg { width: 22px; height: 22px; stroke: var(--g-coral); fill: none; stroke-width: 1.8; }
@media (min-width: 1025px) {
  .g-service-icon { width: 60px; height: 60px; }
  .g-service-icon svg { width: 26px; height: 26px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .g-service-icon { width: 56px; height: 56px; }
  .g-service-icon svg { width: 24px; height: 24px; }
}
h3.g-service-title, .g-service-card h3.g-service-title {
  font-family: var(--g-fh) !important; font-size: var(--g-text-h3) !important; line-height: 1.2;
  color: var(--g-navy-medium) !important; margin: 0 0 var(--g-space-2); font-weight: 400; letter-spacing: -.01em;
}
.g-service-desc { font-family: var(--g-fb) !important; color: var(--g-body); font-size: var(--g-text-body) !important; line-height: 1.55 !important; margin: 0 0 var(--g-space-3); flex: 1; }
.g-service-badge {
  position: absolute; top: -12px; left: 24px; font-family: var(--g-fb); font-size: var(--g-text-xs) !important;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--g-coral);
  padding: 4px 12px; border-radius: var(--g-r); white-space: nowrap;
}
.g-service-cta {
  align-self: flex-start; width: 100%; justify-content: center; text-align: center; display: inline-flex;
  align-items: center; gap: 6px; font-family: var(--g-fb); font-size: var(--g-text-small) !important; font-weight: 600;
  padding: 13px 22px; border-radius: var(--g-r); background: rgba(var(--g-coral-rgb), .06); color: var(--g-coral);
  border: 1.5px solid var(--g-coral); text-decoration: none; cursor: pointer; transition: all var(--g-transition); margin-top: auto;
}
.g-service-cta svg { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none; transition: transform var(--g-transition); }
.g-service-cta:hover { background: var(--g-coral); color: #fff; }
.g-service-cta:hover svg { transform: translateX(3px); }
@media (min-width: 768px) and (max-width: 1024px) { .g-service-cta { padding: 12px 20px; } }
@media (max-width: 767px) {
  .g-service-cta {
    width: auto;
    align-self: center;
    padding: 12px 24px;
  }
}

/* Reason card — specific deltas only */
h3.g-reason-title, .g-reason-card h3.g-reason-title {
  font-family: var(--g-fh) !important; font-size: var(--g-text-h3) !important; font-weight: 400;
  color: var(--g-navy-medium) !important; margin: 0; line-height: 1.25; letter-spacing: -.01em;
}
.g-reason-text { font-family: var(--g-fb) !important; font-size: var(--g-text-small) !important; line-height: 1.75; color: var(--g-body); margin: 0; }
@media (max-width: 767px) {
  .g-reason-card { flex-direction: row; align-items: flex-start; gap: 14px; }
  .g-reason-card .g-service-icon { flex-shrink: 0; margin-bottom: 0; }
  h3.g-reason-title, .g-reason-card h3.g-reason-title { font-size: 1rem !important; }
}
/* Trust grid "extra" hide utility — 6 cards desktop, 4 tablet/mobile */
@media (max-width: 1024px) { .g-reason-extra { display: none !important; } }

/* Pricing card — specific deltas only */
@media (max-width: 767px) { .g-pricing-card--featured { margin-top: 12px; } }
.g-pricing-popular {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-family: var(--g-fb) !important;
  font-size: var(--g-text-xs) !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--g-coral); padding: 4px 14px; border-radius: 20px; white-space: nowrap;
}
.g-pricing-badge { display: block; font-family: var(--g-fb) !important; font-size: var(--g-text-xs) !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--g-coral); margin-bottom: 10px; }
.g-pricing-amount { display: block; font-family: var(--g-fh) !important; font-weight: 400; color: var(--g-ink); line-height: 1; margin-bottom: 6px; font-size: var(--g-text-h2) !important; }
.g-pricing-amount--coral { color: var(--g-coral) !important; }
.g-pricing-amount--navy { color: var(--g-navy-medium) !important; }
/* Standard (non-featured) cards get a subtle navy top accent bar,
   giving a two-tone rhythm against the coral-featured middle card. */
.g-pricing-card:not(.g-pricing-card--featured) {
  border-top: 3px solid var(--g-navy-medium);
}
.g-pricing-note { display: block; font-family: var(--g-fb) !important; font-size: var(--g-text-small) !important; color: var(--g-muted); margin-bottom: 20px; }
.g-pricing-divider { display: block; height: 1px; background: rgba(28, 27, 32, .09); margin-bottom: 20px; }
.g-pricing-list { display: flex; flex-direction: column; gap: 10px; flex: 1; list-style: none !important; padding: 0 !important; margin: 0 0 20px !important; }
.g-pricing-list li { position: relative; padding-left: 22px; font-family: var(--g-fb) !important; font-size: var(--g-text-small) !important; color: var(--g-body); line-height: 1.55; }
.g-pricing-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--g-coral); font-weight: 700; font-size: 12px; }
.g-pricing-ideal { display: block; font-family: var(--g-fb) !important; font-size: var(--g-text-small) !important; color: var(--g-muted); line-height: 1.6; margin: 0 0 20px; font-style: italic; }
.g-pricing-btn { display: flex; width: 100%; justify-content: center; text-align: center; padding: 13px 20px; font-size: var(--g-text-body) !important; margin-top: auto; }
.g-pricing-footer { font-family: var(--g-fb) !important; font-size: var(--g-text-small) !important; color: var(--g-muted); text-align: center; margin: clamp(24px, 3vw, 36px) 0 0; }
.g-pricing-footer a { color: var(--g-coral) !important; text-decoration: none; font-weight: 600; }
.g-pricing-footer a:hover { text-decoration: underline; }

/* Review card — specific deltas only */
.g-review-stars { color: var(--g-coral); font-size: var(--g-text-body) !important; letter-spacing: 2px; line-height: 1; }
.g-review-text { font-family: var(--g-fb) !important; font-size: var(--g-text-small) !important; line-height: 1.7; color: var(--g-body); margin: 0; flex: 1; }
.g-review-author { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(28, 27, 32, .08); }
.g-review-avatar {
  width: 40px; height: 40px; min-width: 40px; border-radius: 50%; background: rgba(var(--g-coral-rgb), .12);
  border: 1px solid rgba(var(--g-coral-rgb), .22); display: flex; align-items: center; justify-content: center;
  font-family: var(--g-fh) !important; font-size: var(--g-text-small) !important; color: var(--g-coral); font-weight: 400;
}
.g-review-info { display: flex; flex-direction: column; gap: 1px; }
.g-review-name { font-family: var(--g-fb) !important; font-size: var(--g-text-small) !important; font-weight: 600; color: var(--g-ink); line-height: 1.3; }
.g-review-loc { font-family: var(--g-fb) !important; font-size: var(--g-text-xs) !important; color: var(--g-muted); line-height: 1.3; }

/* ---- 8. UNIFIED PILL / TAG SYSTEM ----
   Two variants total: default (bordered pill) and --primary (coral
   highlight), shared across every tag/pill component sitewide.
*/
.g-tag, .g-area-tag {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border-radius: var(--g-r);
  font-family: var(--g-fb) !important;
  font-size: var(--g-text-xs) !important;
  font-weight: 600;
}
.g-tag {
  background: rgba(46, 61, 92, .06);
  border: 1px solid rgba(46, 61, 92, .2);
  padding: 6px 14px;
  color: var(--g-ink);
}
.g-area-tag {
  color: var(--g-body);
  background: var(--g-card);
  border: 1px solid rgba(28, 27, 32, .12);
  padding: 6px 14px;
}
.g-tag--primary, .g-area-tag--primary {
  background: rgba(var(--g-coral-rgb), .1);
  border: 1px solid rgba(var(--g-coral-rgb), .3);
  color: var(--g-coral);
}
@media (max-width: 767px) { .g-tag, .g-area-tag { padding: 5px 11px; } }
/* Hero-specific plain-text chip variant (dot-separated, no border —
   sits directly on the dark hero background, a pill would feel heavy) */
.g-pkg-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px !important; align-items: center; }
.g-pkg-tag {
  display: inline-flex; align-items: center; font-family: var(--g-fb) !important; font-size: var(--g-text-small) !important;
  font-weight: 600; color: rgba(240, 238, 232, .85) !important; background: none !important; border: none !important;
  padding: 0 !important; border-radius: 0 !important; letter-spacing: .04em;
}
.g-pkg-tag:not(:last-child)::after { content: "·"; margin-left: 8px; color: var(--g-coral-light); }
@media (max-width: 767px) { .g-pkg-tags { margin-top: 18px !important; } }
.g-area-tags { display: flex; flex-wrap: wrap; gap: var(--g-space-1) var(--g-space-2); justify-content: center; margin-top: var(--g-space-5); }
@media (max-width: 767px) { .g-area-tags { margin-top: 20px; } }
.g-area-note { font-family: var(--g-fb) !important; font-size: var(--g-text-small) !important; color: var(--g-muted); text-align: center; margin: var(--g-space-4) 0 0; }
.g-area-note a { color: var(--g-coral) !important; font-weight: 600; text-decoration: none; }
.g-area-note a:hover { text-decoration: underline; }
/* Deliverables strip — reuses .g-tag for each pill */
.g-deliverables { text-align: center; margin-top: clamp(32px, 4vw, 48px); }
.g-deliverables-label {
  display: block; font-family: var(--g-fb) !important; font-size: var(--g-text-xs) !important; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--g-muted); margin-bottom: 14px;
}
.g-deliverables-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }

/* ---- 9. GRID LAYOUTS ---- (card styling itself lives in Section 7 above) */
.g-service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 22px); }
@media (max-width: 1024px) { .g-service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .g-service-grid { grid-template-columns: 1fr; gap: 12px !important; }
  .g-service-card { padding: 18px 16px !important; align-items: center; text-align: center; }
  .g-service-card .g-service-icon { margin-bottom: 8px !important; }
  .g-service-card .g-service-title { margin-bottom: 4px !important; text-align: center; }
  .g-service-card .g-service-desc {
    font-size: var(--g-text-small) !important; line-height: 1.4 !important; text-align: center;
    display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important;
  }
}
.g-reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); }
@media (max-width: 1024px) { .g-reason-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .g-reason-grid { grid-template-columns: 1fr; gap: 12px; } }
.g-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); max-width: var(--g-maxw); margin: 0 auto; }
@media (max-width: 1024px) { .g-pricing-grid { grid-template-columns: 1fr; max-width: 480px; } }
@media (max-width: 767px) { .g-pricing-grid { max-width: 100%; } }
.g-review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); }
@media (max-width: 1024px) { .g-review-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }

/* ---- 10. PORTFOLIO (homepage simple-link + service-page lightbox) ---- */
.g-portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 24px); max-width: 800px; margin: 0 auto clamp(32px, 4vw, 48px); }
.g-portfolio-item {
  display: flex; flex-direction: column; text-decoration: none !important; transition: transform .35s ease; cursor: pointer !important;
  background: none !important; border: none !important; padding: 0 !important; margin: 0 !important; font: inherit !important;
  color: inherit !important; text-align: left !important; -webkit-appearance: none !important; appearance: none !important; outline: none !important;
}
.g-portfolio-item:focus-visible { outline: 2px solid var(--g-coral-light) !important; outline-offset: 2px !important; }
.g-portfolio-item:hover { transform: translateY(-4px); }
.g-portfolio-img { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px !important; background: #ddd7cc; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); transition: box-shadow .35s ease; }
.g-portfolio-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .65s ease; }
.g-portfolio-item:hover .g-portfolio-img { box-shadow: 0 14px 40px rgba(0, 0, 0, .32); }
.g-portfolio-item:hover .g-portfolio-img img { transform: scale(1.04); }
.g-portfolio-cap { display: flex; flex-direction: column; gap: 3px; padding: 10px 2px 0; }
.g-portfolio-name { font-family: var(--g-fb) !important; color: rgba(240, 238, 232, .55) !important; line-height: 1.2; font-size: var(--g-text-small) !important; font-weight: 600; }
.g-portfolio-badge { font-family: var(--g-fb) !important; font-size: var(--g-text-xs) !important; font-weight: 600; color: var(--g-coral-light) !important; }
@media (max-width: 767px) { .g-portfolio-badge { display: none !important; } .g-portfolio-name { font-size: 13px !important; } }
.g-portfolio-grid--featured { max-width: none; margin-bottom: 0; }
@media (min-width: 1025px) {
  .g-portfolio-grid--featured { display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: repeat(2, 1fr); gap: clamp(12px, 1.5vw, 20px); max-width: var(--g-maxw); }
  .g-portfolio-grid--featured .g-portfolio-item--featured { grid-column: 1; grid-row: 1 / 3; }
  .g-portfolio-grid--featured .g-portfolio-item--featured .g-portfolio-img { height: 100%; aspect-ratio: auto; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .g-portfolio-grid--featured { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .g-portfolio-grid--featured .g-portfolio-item:nth-child(5) { display: none; }
}
@media (max-width: 767px) {
  .g-portfolio-grid--featured { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .g-portfolio-grid--featured .g-portfolio-item:nth-child(5) { display: none; }
}
/* Service-page portfolio with lightbox — distinct interaction pattern */
.svc-pf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 24px); max-width: 800px; margin: 0 auto clamp(32px, 4vw, 48px); }
.svc-pfi {
  display: flex; flex-direction: column; text-decoration: none !important; transition: transform .35s ease; cursor: pointer !important;
  background: none !important; border: none !important; padding: 0 !important; margin: 0 !important; font: inherit !important;
  color: inherit !important; text-align: left !important; -webkit-appearance: none !important; appearance: none !important; outline: none !important;
}
.svc-pfi:focus-visible { outline: 2px solid var(--g-coral-light) !important; outline-offset: 2px !important; }
.svc-pfi:hover { transform: translateY(-4px); }
.svc-pf-img { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px !important; background: #ddd7cc; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); transition: box-shadow .35s ease; }
.svc-pf-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .65s ease; }
.svc-pfi:hover .svc-pf-img { box-shadow: 0 14px 40px rgba(0, 0, 0, .32); }
.svc-pfi:hover .svc-pf-img img { transform: scale(1.04); }
.svc-pf-cap { display: flex; flex-direction: column; gap: 3px; padding: 10px 2px 0; }
.svc-pf-name { font-family: var(--g-fb) !important; color: rgba(240, 238, 232, .55) !important; line-height: 1.2; font-size: var(--g-text-small) !important; font-weight: 600; }
.svc-pf-badge { font-family: var(--g-fb) !important; font-size: var(--g-text-xs) !important; font-weight: 600; color: var(--g-coral-light) !important; }
.g-section:has(.svc-pf-grid) .g-heading { color: var(--g-head-light) !important; }
.g-section:has(.svc-pf-grid) .g-heading em { color: var(--g-coral-light) !important; }
.g-section:has(.svc-pf-grid) .g-section-sub { color: rgba(240, 238, 232, .75) !important; }
@media (max-width: 767px) {
  .svc-pf-grid { gap: 12px; } .svc-pf-img { aspect-ratio: 1 / 1 !important; } .svc-pf-badge { display: none !important; } .svc-pf-name { font-size: 13px !important; }
}
.svc-lb { position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; padding: 20px; }
.svc-lb-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .75); }
.svc-lb-content { position: relative; background: #fff; border-radius: 12px; max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; z-index: 1; }
.svc-lb-close { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,.5); color: #fff; border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0; }
.svc-lb-img img { width: 100%; display: block; border-radius: 12px 12px 0 0; }
.svc-lb-info { padding: 20px 24px 24px; }
.svc-lb-title { font-family: var(--g-fh) !important; font-size: 1.3rem; color: var(--g-ink); margin: 0 0 8px; }
.svc-lb-badge { display: inline-block; font-family: var(--g-fb) !important; font-size: 12px; font-weight: 600; color: var(--g-coral); margin-bottom: 12px; }
.svc-lb-desc { font-family: var(--g-fb) !important; font-size: 14px; line-height: 1.6; color: var(--g-body); margin: 0; }
.svc-pf-hdr {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--g-space-6);
}
.g-pf-foot { text-align: center; margin-top: 40px; }
/* Lightweight link alternative to the full outline button — for
   secondary "see more" actions where a full button feels heavier
   than needed. Coral-light for visibility on dark backgrounds. */
.g-pf-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--g-fb) !important; font-size: var(--g-text-small) !important; font-weight: 600;
  color: var(--g-coral-light); text-decoration: none;
}
.g-pf-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform var(--g-transition); }
.g-pf-link:hover { color: var(--g-coral); }
.g-pf-link:hover svg { transform: translateX(3px); }
@media (min-width: 1025px) {
  .g-pf-foot { margin-top: var(--g-space-7) !important; }
  .g-pf-foot .g-btn--outline-light {
    font-size: var(--g-text-body) !important;
    padding: 16px 32px !important;
  }
}
.g-pf-foot .g-btn--outline-light svg {
  stroke: currentColor !important;
}
@media (max-width: 767px) { .g-pf-foot { margin-top: 20px; } .g-pf-foot .g-btn--outline-light { padding: 12px 24px !important; border-width: 1px !important; } }

/* ---- 11. FAQ ACCORDION ---- */
.g-faq-section { background-color: var(--g-offwhite-deep) !important; }
.g-faq-section > .e-con-inner { background-color: transparent !important; }
.g-faq-wrap { max-width: var(--g-maxw-narrow); margin: 0 auto; }
.g-faq-head { text-align: center; margin-bottom: clamp(40px, 5vw, 60px); }
.g-faq-list { display: flex; flex-direction: column; border-top: 1px solid rgba(28, 27, 32, .1) !important; }
.g-faq-item { border-bottom: 1px solid rgba(28, 27, 32, .08) !important; padding-left: 0; padding-right: 0; }
.g-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px !important;
  appearance: none; -webkit-appearance: none; background: none !important; border: none !important; border-radius: 0 !important;
  box-shadow: none !important; outline: none; cursor: pointer; text-align: left; font-family: var(--g-fb) !important;
  font-size: var(--g-text-body) !important; font-weight: 600; color: var(--g-ink); line-height: 1.45; transition: color var(--g-transition); position: relative; z-index: 1;
}
.g-faq-q:hover, .g-faq-q:focus, .g-faq-q:active, .g-faq-q:focus-visible { background: none !important; border: none !important; box-shadow: none !important; color: var(--g-coral); outline: none; }
.g-faq-open .g-faq-q { color: var(--g-coral); }
.g-faq-icon {
  width: 24px; height: 24px; min-width: 24px; border-radius: 50%; flex-shrink: 0; background: rgba(28, 27, 32, .07);
  border: 1px solid rgba(28, 27, 32, .12); position: relative; transition: background var(--g-transition), border-color var(--g-transition), transform .3s var(--g-ease);
}
.g-faq-icon::before, .g-faq-icon::after { content: ""; position: absolute; background: var(--g-ink); top: 50%; left: 50%; transform: translate(-50%, -50%); transition: background var(--g-transition), transform .3s var(--g-ease); }
.g-faq-icon::before { width: 10px; height: 1.5px; border-radius: 2px; }
.g-faq-icon::after { width: 1.5px; height: 10px; border-radius: 2px; }
.g-faq-open .g-faq-icon { background: rgba(var(--g-coral-rgb), .12); border-color: rgba(var(--g-coral-rgb), .22); transform: rotate(45deg); }
.g-faq-open .g-faq-icon::before, .g-faq-open .g-faq-icon::after { background: var(--g-coral); }
.g-faq-a { max-height: 0; overflow: hidden; transition: max-height .38s var(--g-ease); }
.g-faq-a p { font-family: var(--g-fb) !important; font-size: var(--g-text-body) !important; line-height: 1.78 !important; color: var(--g-body) !important; margin: 0; padding: 2px 4px 22px !important; }
.g-faq-cta { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; margin-top: clamp(36px, 5vw, 56px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid rgba(28, 27, 32, .09); text-align: center; }
.g-faq-cta-text { font-family: var(--g-fb) !important; font-size: var(--g-text-body) !important; color: var(--g-body); margin: 0; }
@media (max-width: 767px) {
  .g-faq-q { padding: 16px 2px !important; line-height: 1.42; }
  .g-faq-a p { padding: 2px 2px 18px !important; }
  .g-faq-cta .g-btn--whatsapp { width: 100%; justify-content: center; }
}

/* ---- 12. PROCESS STEPS ---- */
.g-process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); position: relative; max-width: var(--g-maxw-mid); margin: 0 auto; }
.g-process-grid::before { content: ""; position: absolute; top: 27px; left: 18%; right: 18%; height: 1px; background: linear-gradient(to right, rgba(var(--g-coral-rgb), .5), rgba(var(--g-coral-rgb), .15)); }
.g-process-step { text-align: center; position: relative; }
.g-process-num {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center;
  font-family: var(--g-fh) !important; font-size: var(--g-text-body) !important; color: var(--g-ink) !important; background: var(--g-offwhite) !important;
  border: 1.5px solid rgba(28, 27, 32, .2) !important; position: relative; z-index: 2; box-shadow: 0 0 0 6px var(--g-offwhite) !important;
}
.g-process-title { font-family: var(--g-fh) !important; font-size: var(--g-text-h3) !important; color: var(--g-ink); margin: 0 0 10px; font-weight: 400; letter-spacing: -.005em; }
.g-process-text { font-family: var(--g-fb) !important; font-size: var(--g-text-small) !important; line-height: 1.75; color: var(--g-body); margin: 0; padding: 0 4px; }
.g-process-cta { text-align: center; margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(20px, 3vw, 32px); border-top: 1px solid rgba(28, 27, 32, .12) !important; }
.g-process-cta-text { font-family: var(--g-fb) !important; font-size: var(--g-text-body) !important; color: var(--g-body); margin: 0 0 20px; }
.g-section:has(.g-process-grid) .g-heading, h2.g-heading:has(+ .g-process-grid) { color: var(--g-ink) !important; }
.g-section:has(.g-process-grid) .g-heading em { color: var(--g-coral) !important; }
@media (max-width: 767px) {
  .g-process-grid { grid-template-columns: 1fr; gap: 0 !important; }
  .g-process-grid::before { display: none; }
  .g-process-step { display: flex !important; align-items: center !important; gap: 12px !important; text-align: left !important; padding: 14px 0 !important; border-bottom: 1px solid rgba(28, 27, 32, .12) !important; }
  .g-process-step:last-child { border-bottom: none !important; }
  .g-process-num { width: 32px !important; height: 32px !important; min-width: 32px !important; font-size: var(--g-text-xs) !important; margin: 0 !important; box-shadow: none !important; flex-shrink: 0 !important; }
  .g-process-step-body { display: flex; flex-direction: column; gap: 2px; }
  .g-process-title { margin: 0 !important; line-height: 1.3 !important; text-align: left !important; }
  .g-process-text { line-height: 1.55 !important; text-align: left !important; }
  .g-process-cta { margin-top: 20px !important; padding-top: 18px !important; }
  .g-process-cta .g-btn--whatsapp, .g-process-cta .g-btn--primary { width: 100% !important; justify-content: center !important; }
}

/* ---- 13. CTA (CALL TO ACTION) ---- */
.g-cta { max-width: var(--g-maxw); margin: 0 auto; background: var(--g-navy-medium) !important; color: #fff; padding: 0; }
:where(.g-bg-dark, .g-bg-medium-navy) .g-cta { background: transparent !important; }
.g-cta--split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.g-cta--center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.g-cta--center .g-cta-sub { max-width: 600px; margin-left: auto; margin-right: auto; }
.g-cta--center .g-btn--primary { display: inline-flex !important; margin: 0 auto 28px !important; }
.g-cta-h2 { font-family: var(--g-fh) !important; font-size: var(--g-text-h2) !important; line-height: var(--g-lh-heading); font-weight: 400; color: var(--g-head-light) !important; margin: 8px 0 16px; letter-spacing: -.01em; }
.g-cta-h2 em { font-style: italic; color: var(--g-coral) !important; }
.g-cta-sub { font-family: var(--g-fb) !important; font-size: var(--g-text-body) !important; line-height: var(--g-lh-body); color: var(--g-body-light); margin: 0 0 34px; max-width: 440px; }
.g-cta-trust { display: flex !important; align-items: center; justify-content: center !important; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); text-align: center !important; }
.g-cta-trust-item { font-family: var(--g-fb) !important; font-size: var(--g-text-small) !important; font-weight: 500; color: rgba(240, 238, 232, .65); }
.g-cta-trust-item span { color: var(--g-coral); }
.g-cta-trust-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, .28); flex-shrink: 0; }
@media (max-width: 1024px) { .g-cta--split { grid-template-columns: 1fr; gap: 44px; } .g-cta-sub { max-width: 100%; } }
@media (max-width: 767px) {
  .g-cta--split { display: flex !important; flex-direction: column !important; gap: 0 !important; }
  .g-cta-sub { line-height: 1.55 !important; margin-bottom: 24px !important; max-width: 100% !important; }
  .g-cta-trust { gap: 4px 12px !important; padding-top: 14px !important; margin-top: 4px !important; }
  .g-cta-trust-item { font-size: 13px !important; color: rgba(240, 238, 232, .5) !important; font-weight: 400 !important; }
  .g-cta-trust-dot { display: none !important; }
  .g-cta-h2 { line-height: 1.12 !important; margin: 6px 0 10px !important; }
  .g-cta--center .g-btn--primary { margin-top: 20px !important; margin-bottom: 20px !important; }
}

/* ---- 14. ABOUT / INTRO TEXT BLOCK ---- */
.g-ab-wrap { text-align: center; max-width: 760px; margin: 0 auto var(--g-space-2); }
.g-ab-text { font-family: var(--g-fb) !important; font-size: var(--g-text-body) !important; line-height: var(--g-lh-body); color: var(--g-body); margin: var(--g-space-3) 0 0; }
@media (min-width: 1025px) {
  .g-ab-text { font-size: 20px !important; }
}
.g-ab-link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--g-space-3); font-family: var(--g-fb) !important; font-size: var(--g-text-small) !important; font-weight: 600; color: var(--g-coral); text-decoration: none; }
.g-ab-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform var(--g-transition); }
.g-ab-link:hover svg { transform: translateX(3px); }

/* ---- 15. SCROLL REVEAL ---- */
.g-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--g-ease), transform .7s var(--g-ease); }
.g-reveal-left { opacity: 0; transform: translateX(-26px); transition: opacity .7s var(--g-ease), transform .7s var(--g-ease); }
.g-reveal-right { opacity: 0; transform: translateX(26px); transition: opacity .7s var(--g-ease), transform .7s var(--g-ease); }
.g-reveal.on, .g-reveal-left.on, .g-reveal-right.on { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; } .d4 { transition-delay: .32s; } .d5 { transition-delay: .4s; }
.g-hero-tag.on, .g-hero-kicker.on { opacity: 1; transform: none; }
.g-hero-h1.on, .g-hero-display.on { opacity: 1; transform: none; transition-delay: .1s; }
.g-hero-sub.on { opacity: 1; transform: none; transition-delay: .2s; }
.g-hero-btns.on { opacity: 1; transform: none; transition-delay: .3s; }
.g-hero-chips.on { opacity: 1; transform: none; transition-delay: .38s; }
@media (prefers-reduced-motion: reduce) {
  .g-reveal, .g-reveal-left, .g-reveal-right, .g-hero-tag, .g-hero-kicker, .g-hero-h1, .g-hero-display, .g-hero-sub, .g-hero-btns, .g-hero-chips {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}
.no-js .g-reveal, .no-js .g-reveal-left, .no-js .g-reveal-right { opacity: 1 !important; transform: none !important; }

/* ---- 16. ACCESSIBILITY & MISC ---- */
a:focus-visible, button:focus-visible { outline: 2px solid var(--g-coral); outline-offset: 3px; border-radius: 4px; }
.ct-header .ct-menu-link { font-family: var(--g-fb) !important; font-weight: 500; }
.ct-header-cta .ct-button-ghost { font-family: var(--g-fb) !important; font-size: var(--g-text-small) !important; font-weight: 600 !important; border-radius: var(--g-r) !important; padding: 9px 20px !important; }
#footer { background-color: var(--g-navy-dark) !important; }
#footer p, #footer a { font-family: var(--g-fb) !important; }
#footer .ct-footer-copyright p { font-family: var(--g-fb) !important; font-size: var(--g-text-small) !important; color: rgba(240, 238, 232, .4); }
#footer .ct-social-box a:hover .ct-icon-container { border-color: var(--g-coral) !important; }
.g-header-phone {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--g-fb) !important; font-size: var(--g-text-small) !important;
  font-weight: 600; color: #fff !important; text-decoration: none !important; background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 20px; padding: 6px 14px; white-space: nowrap; margin-left: 14px;
}
.g-header-phone svg { stroke: var(--g-coral); flex-shrink: 0; }
.g-header-phone:hover { background: rgba(255, 255, 255, .16); border-color: var(--g-coral); }

/* ---- 17. LEGACY ELEMENTOR ID OVERRIDES ----
   Kept only so pages not yet migrated don't break. Replace with
   .g-bg-* / .g-section-x utilities as each page is converted.
   NOTE: page-specific ID/class overrides (Contact page's
   .ct-form-sec/.ct-hdr-sec/.ct-form-card, homepage's CTA ID rule,
   Print's .pd-contact-line) now live in their own page-specific
   files — not duplicated here.
*/

/* ---- 18. PROCESS STEPS — dark section variant ----
   .g-process-* was only built assuming a light background.
   This adds the automatic light-text/light-ring treatment when
   the section sits on .g-bg-dark or .g-bg-medium-navy, matching
   the same auto-contrast pattern already used for headings.
*/
:where(.g-bg-dark, .g-bg-medium-navy) .g-process-num {
  color: var(--g-head-light) !important;
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 255, 255, .25) !important;
  box-shadow: 0 0 0 6px transparent !important;
}
:where(.g-bg-dark, .g-bg-medium-navy) .g-process-title {
  color: var(--g-head-light) !important;
}
:where(.g-bg-dark, .g-bg-medium-navy) .g-process-text {
  color: rgba(240, 238, 232, .75) !important;
}
:where(.g-bg-dark, .g-bg-medium-navy) .g-process-cta {
  border-top-color: rgba(255, 255, 255, .1) !important;
}
:where(.g-bg-dark, .g-bg-medium-navy) .g-process-cta-text {
  color: rgba(240, 238, 232, .75) !important;
}
@media (max-width: 767px) {
  :where(.g-bg-dark, .g-bg-medium-navy) .g-process-step {
    border-bottom-color: rgba(255, 255, 255, .1) !important;
  }
}

/* ---- REASON CARDS — dark section variant ----
   Same issue as Process: g-reason-title/text default to dark
   colors and would be invisible on a dark section background.
*/
:where(.g-bg-dark, .g-bg-medium-navy) .g-reason-card {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
}
:where(.g-bg-dark, .g-bg-medium-navy) h3.g-reason-title {
  color: var(--g-head-light) !important;
}
:where(.g-bg-dark, .g-bg-medium-navy) .g-reason-text {
  color: rgba(240, 238, 232, .75) !important;
}

/* ---- 19. SERVICE GRID — 3-column variant ----
   For pages where 6 cards need to divide evenly (avoids the
   4-column default leaving a 2-card gap on the second row).
   Add .g-service-grid--3col alongside .g-service-grid.
*/
@media (min-width: 1025px) {
  .g-service-grid--3col {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ---- 20. (pd-contact-line moved to print-design.css — page-specific) ---- */

/* ---- 21. AB-TEXT — dark section variant ----
   .g-ab-text defaults to dark body-grey text, invisible on
   dark/navy sections. Same auto-contrast pattern already used
   for headings and section-sub.
*/
:where(.g-bg-dark, .g-bg-medium-navy) .g-ab-text {
  color: rgba(240, 238, 232, .75) !important;
}
:where(.g-bg-dark, .g-bg-medium-navy) .g-ab-text strong {
  color: var(--g-head-light) !important;
}

/* ---- 22. SECTION SEPARATION ----
   Subtle top border for a section that sits directly against
   another section of the same/similar background tone — prevents
   consecutive light sections from blurring into one undifferentiated
   block. Add .g-sec-divider to the section wrapper when its
   background matches the section immediately above it.
*/
.g-sec-divider {
  border-top: 1px solid rgba(28, 27, 32, .08);
}
:where(.g-bg-dark, .g-bg-medium-navy).g-sec-divider {
  border-top-color: rgba(255, 255, 255, .08);
}
   .g-area-tags defaults to centered (used on hero-adjacent
   sections). This variant left-aligns for 2-column layouts
   like the Contact page's map section.
*/
.g-area-tags--left {
  justify-content: flex-start;
}

/* ---- MOBILE HIDE UTILITY ----
   Hides supporting/secondary sentences on mobile only, so pages
   can carry more depth on desktop without feeling cluttered on
   small screens. The primary sentence in each block always stays
   visible at every size — only the added, secondary sentence hides.
*/
@media (max-width: 767px) {
  .g-mobile-hide {
    display: none !important;
  }
}

/* ---- PORTFOLIO HEADING — brighter coral em ----
   Scoped specifically to the portfolio grid's heading, so it
   doesn't affect the shared --g-coral-light token used elsewhere.
*/
.g-section:has(#pfCarousel) .g-heading em,
.g-section:has(.g-portfolio-grid) .g-heading em {
  color: #ff9466 !important;
}

/* ---- LEGAL PAGES (Privacy Policy, Terms & Conditions) ----
   Simple, readable styling using existing site tokens — no new
   component needed, just brings these pages in line with the
   rest of the site's typography and spacing.
*/
.g-legal-content {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--g-space-6) clamp(18px, 4vw, 40px);
}
.g-legal-content h2 {
  font-family: var(--g-fh) !important;
  font-size: var(--g-text-h2) !important;
  color: var(--g-ink);
  font-weight: 400;
  margin: 0 0 var(--g-space-4);
}
.g-legal-content p {
  font-family: var(--g-fb) !important;
  font-size: var(--g-text-body) !important;
  line-height: var(--g-lh-body);
  color: var(--g-body);
  margin: 0 0 var(--g-space-3);
}
.g-legal-content p strong {
  display: block;
  color: var(--g-ink);
  font-weight: 700;
  margin-bottom: 4px;
}
.g-legal-content p em {
  color: var(--g-muted);
  font-style: italic;
}
.g-legal-content a {
  color: var(--g-coral);
  font-weight: 600;
  text-decoration: none;
}
.g-legal-content a:hover {
  text-decoration: underline;
}
.g-legal-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 var(--g-space-4) !important;
  display: flex;
  flex-direction: column;
  gap: var(--g-space-3);
}
.g-legal-list li {
  font-family: var(--g-fb) !important;
  font-size: var(--g-text-body) !important;
  line-height: var(--g-lh-body);
  color: var(--g-body);
  padding-left: 22px;
  position: relative;
}
.g-legal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g-coral);
}
.g-legal-list li strong {
  display: inline;
  color: var(--g-ink);
  font-weight: 700;
}

/* ---- FOOTER LOGO BLOCK ALIGNMENT ----
   Targets the existing footer widget directly (#block-28) — no
   HTML changes needed. Left-aligned on desktop/tablet (natural
   default), explicitly centered on mobile as requested.
*/
#block-28 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (max-width: 767px) {
  #block-28 {
    align-items: center;
    text-align: center;
  }
  #block-28 img {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---- PORTFOLIO SECTION SPACING FIX ----
   The grid is now a single-row 4-square layout, much shorter than
   the old 2-row featured layout. The section's own fixed padding
   plus the "View full portfolio" link's top margin were stacking
   into a lot of empty space below on desktop. Scoped to this
   section only — no other section is affected.
*/
@media (min-width: 1025px) {
  .g-section:has(#pfCarousel) > .e-con-inner {
    padding-bottom: var(--g-space-6) !important;
  }
  .g-section:has(#pfCarousel) .g-pf-foot {
    margin-top: var(--g-space-5) !important;
  }
}

/* ---- PORTFOLIO GRID — remove leftover forced second row ----
   The old featured layout set grid-template-rows: repeat(2, 1fr)
   on desktop. The new uniform 4-across grid never needed this,
   but the property was never reset — it was silently reserving
   an empty second row's worth of space below the images. This
   removes it, letting the grid size to exactly one row of content.
*/
.g-portfolio-grid--featured {
  grid-template-rows: none !important;
}

/* ---- PORTFOLIO GRID — FINAL comprehensive fix for uniform 4-across ----
   The original desktop-only featured-layout rule (3 columns, 2 rows,
   special positioning for the first item, stretched non-square image)
   was never actually overridden — only grid-template-rows was reset
   earlier. This resets everything needed for a true uniform 4-square
   grid: correct column count, no special positioning for the first
   item, and a genuinely square image for every item including it.
*/
@media (min-width: 1025px) {
  .g-portfolio-grid--featured {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .g-portfolio-grid--featured .g-portfolio-item--featured {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .g-portfolio-grid--featured .g-portfolio-item--featured .g-portfolio-img {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* ---- PORTFOLIO GRID — square every image, every item, every size ----
   The previous fix only targeted the first (featured) image. The
   base .g-portfolio-img rule still forces a 4:3 ratio for every
   other item, at every screen size. This resets ALL portfolio
   images to true squares, unconditionally, overriding the base
   4:3 rule sitewide for this component.
*/
.g-portfolio-grid--featured .g-portfolio-img {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
}

/* ---- PORTFOLIO HEADER — tighter mobile spacing now that the
   supporting subtext paragraph has been removed. Scoped to this
   section only, matching the same pattern used for Process. ----
*/
@media (max-width: 767px) {
  .g-section:has(#pfCarousel) .g-section-head {
    margin-bottom: var(--g-space-4) !important;
  }
}





.g-reason-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px 28px;
  align-items: start;
}

.g-reason-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.g-reason-card .g-service-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.g-reason-card h3.g-reason-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 0 6px !important;
}

.g-reason-card p.g-reason-text {
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  opacity: 0.85;
}

@media (max-width: 1024px) {
  .g-reason-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }
  .g-reason-card h3.g-reason-title {
    font-size: 1.1rem !important;
  }
  .g-reason-card p.g-reason-text {
    font-size: 0.92rem !important;
  }
}

@media (max-width: 767px) {
  .g-reason-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 16px;
  }
  .g-reason-card .g-service-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
  }
  .g-reason-card h3.g-reason-title {
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
  }
  .g-reason-card p.g-reason-text {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }
}




.sajc-about-matrix p.g-ab-text strong a {
  color: var(--g-coral) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--g-coral-rgb, 224, 122, 95), 0.35);
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.sajc-about-matrix p.g-ab-text strong a:hover {
  border-bottom-color: var(--g-coral);
  opacity: 0.85;
}




.ab-intro-image {
  margin: 28px 0;
}

.ab-intro-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

@media (max-width: 767px) {
  .ab-intro-image {
    margin: 20px 0;
  }
}