/* =========================================================================
   Aegean Blue Key — brand overrides
   Loaded LAST so these win the cascade over the generated template CSS.
   Rebrands the Merapi template palette to the Aegean Blue Key identity
   (shared with the main app at aegeanbluekey.com). Typography is kept
   from the template on purpose.
   ========================================================================= */

:root {
  /* Primary accent — buttons, links, highlights */
  --blue: #3a6f8f;          /* aegean        (was #1076da) */
  --dark-blue: #2a5670;     /* aegean-dark   (was #0f467c) */
  --light-blue: #9cc2d4;    /* soft aegean   (was #7ed8ff) */

  /* Neutrals — warmed to match the Cycladic palette */
  --black: #1d1b18;         /* charcoal      (was #111417) */
  --grey: #44403a;          /* warm body text (was #3a3f41) */
  --light-grey: #c9c2b6;    /* stone border  (was #b5babb) */
  --subtle-grey: #eceae3;   /* warm light section (was #f0f3f4) */
}

/* Warm off-white page background (whitewash), instead of pure white,
   while keeping --white pure for text/icons on dark surfaces. */
body {
  background-color: #f7f4ee;
}

/* The hero "G / gohome" rating chip becomes a neutral trust pill. */
.rating .g-icon { display: none; }

/* Circular badge logo sizing in the navbar + footer. */
.navbar-brand img { height: 50px; width: auto; }
.footer-brand-image { height: 76px; width: auto; }

/* Wordmark next to the navbar badge.
   The template hard-codes .navbar-brand { width: 180px } for the old narrow
   wordmark; let it size to its content so the badge + text don't overlap the divider. */
.navbar-brand,
.navbar-brand.w-nav-brand { display: inline-flex; align-items: center; gap: .55rem; width: auto !important; max-width: none !important; flex: 0 0 auto; margin-right: 1rem; }
.navbar-brand img { flex: 0 0 auto; }
.navbar-brand-text { flex: 0 0 auto; }
.navbar-brand-text {
  font-family: var(--_typography---font-family--instrument-sans);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
  color: var(--black);
}
.navbar-brand-text span { color: var(--blue); }
@media screen and (max-width: 479px) { .navbar-brand-text { display: none; } }

/* ===== Service detail pages ===== */
.svc-hero { padding: 9rem 0 2.5rem; }
.svc-breadcrumb { font-size: .85rem; color: var(--grey); margin-bottom: 1.25rem; letter-spacing: .02em; }
.svc-breadcrumb a { color: inherit; text-decoration: none; }
.svc-breadcrumb a:hover { color: var(--blue); }
.svc-lead { max-width: 760px; margin-top: 1rem; }
.svc-hero-img { width: 100%; height: auto; max-height: 460px; object-fit: cover; border-radius: 14px; margin-top: 2.5rem; display: block; }
.svc-section { padding: 3rem 0; }
.svc-grid2 { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: start; }
.svc-list { display: grid; gap: 1rem; margin-top: 1.5rem; }
.svc-list .pricing-point { display: flex; gap: .75rem; align-items: flex-start; }
.svc-cta { background: var(--dark-blue); border-radius: 16px; padding: 3rem; text-align: center; margin: 1rem 0 0; }
.svc-cta .heading-3, .svc-cta .text { color: var(--white); }
.svc-cta .button-wrapper { justify-content: center; margin-top: 1.5rem; }
.svc-other { padding: 3.5rem 0 5rem; }
.service-wrapper.two { grid-template-columns: repeat(2, 1fr); }
@media screen and (max-width: 767px) {
  .svc-grid2 { grid-template-columns: 1fr; gap: 2rem; }
  .svc-hero { padding-top: 7rem; }
  .service-wrapper.two { grid-template-columns: 1fr; }
}

/* Slightly soften the bright cyan focus/hover that the template uses. */
.button.light-green,
.color-block.light-green { background-color: var(--blue); color: var(--white); }

/* About-section stats row (replaces the template's fake partner-logo marquee). */
.about-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 2.5rem;
}
.about-stat .heading-4 { color: var(--blue); margin-bottom: .25rem; }
.about-stat .subtitle { color: var(--grey); }

/* Static service cards: keep the template's 3-up grid now that the
   template CMS list wrapper is gone. */
.service-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media screen and (max-width: 767px) {
  .service-wrapper { grid-template-columns: 1fr; }
}