/* ==========================================================================
   GRAF CONSULTANCY – site stylesheet (2026 UI refresh)
   Static HTML + Bootstrap 5. Brand palette, logo and copy are unchanged;
   this file only modernises layout, typography, spacing and motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette (unchanged) */
  --gc-primary: #208ab2;
  --gc-primary-dark: #1a7398;
  --gc-secondary: #676867;
  --gc-text: #7a7a7a;
  --gc-body: #666767;
  --gc-heading: #181818;
  --gc-dark: #181818;
  --gc-light: #f3f3f3;
  --gc-footer: #f0f1f1;

  /* Tints derived from the palette (alpha only) */
  --gc-primary-rgb: 32, 138, 178;
  --gc-primary-soft: rgba(32, 138, 178, .10);
  --gc-primary-tint: rgba(32, 138, 178, .18);
  --gc-line: rgba(24, 24, 24, .08);
  --gc-line-strong: rgba(24, 24, 24, .14);

  /* Type */
  --font-head: "Exo 2", "Segoe UI", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", Arial, Helvetica, sans-serif;

  /* Shape & depth */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(24, 24, 24, .05), 0 6px 16px -6px rgba(24, 24, 24, .10);
  --shadow-md: 0 12px 32px -12px rgba(24, 24, 24, .20);
  --shadow-lg: 0 32px 64px -24px rgba(24, 24, 24, .28);
  --shadow-primary: 0 16px 32px -12px rgba(32, 138, 178, .45);

  /* Rhythm */
  --section: clamp(64px, 8vw, 112px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 80px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
.site-preloader {
  position: fixed; inset: 0; z-index: 99999; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: #fff; opacity: 1; visibility: visible;
  transition: opacity .4s ease, visibility .4s ease;
}
.js .site-preloader { display: flex; }
html.is-loading, html.is-loading body { overflow: hidden; }
.site-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.site-preloader__content { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.site-preloader__mark {
  width: 52px; height: 52px; border-radius: 50%;
  border: 4px solid rgba(103, 104, 103, .18); border-top-color: var(--gc-primary);
  animation: preloaderSpin .8s linear infinite;
}
.site-preloader__name {
  font-family: var(--font-head); font-size: 13px; font-weight: 700;
  letter-spacing: .16em; color: var(--gc-secondary);
}
@keyframes preloaderSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .site-preloader { transition-duration: .01ms; }
  .site-preloader__mark { animation: none; border-color: var(--gc-primary-soft); border-top-color: var(--gc-primary); }
}
body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--gc-body);
  background: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  color: var(--gc-heading);
  letter-spacing: -.012em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.4rem, 5vw, 3.75rem); }
h2 { font-size: clamp(2rem, 3.6vw, 2.75rem); }
h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
h4 { font-size: 1.35rem; }
h5 { font-size: 1.15rem; }
h6 { font-size: 1rem; }
p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }
a { color: var(--gc-primary-dark); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--gc-heading); }
img { max-width: 100%; height: auto; }
::selection { background: var(--gc-primary); color: #fff; }
:focus-visible { outline: 3px solid rgba(var(--gc-primary-rgb), .55); outline-offset: 3px; border-radius: 6px; }

.container { --bs-gutter-x: 3rem; max-width: 1240px; }
@media (max-width: 575.98px) { .container { --bs-gutter-x: 2.5rem; } .gx-5 { --bs-gutter-x: 2.5rem; } }

.text-primary-gc { color: var(--gc-primary) !important; }
.font-head { font-family: var(--font-head) !important; }

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn-gc {
  display: inline-flex; align-items: center; justify-content: center; gap: .65em;
  padding: .95em 1.7em;
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem; line-height: 1; letter-spacing: .01em;
  white-space: nowrap; cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s, color .3s, border-color .3s;
}
.btn-gc i { font-size: .95em; }
.btn-gc--primary { background: var(--gc-primary); color: #fff; font-weight: 700; box-shadow: var(--shadow-primary); }
.btn-gc--primary:hover, .btn-gc--primary:focus-visible { background: var(--gc-primary-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 20px 36px -14px rgba(32, 138, 178, .55); }
.btn-gc--white { background: #fff; color: var(--gc-primary); box-shadow: var(--shadow-md); }
.btn-gc--white:hover, .btn-gc--white:focus-visible { background: var(--gc-heading); color: #fff; transform: translateY(-2px); }
.btn-gc--dark { background: var(--gc-heading); color: #fff; }
.btn-gc--dark:hover, .btn-gc--dark:focus-visible { background: var(--gc-primary); color: #fff; transform: translateY(-2px); }
.btn-gc--outline { border-color: var(--gc-primary); color: var(--gc-primary-dark); background: transparent; }
.btn-gc--outline:hover, .btn-gc--outline:focus-visible { background: var(--gc-primary); color: #fff; transform: translateY(-2px); }
.btn-gc--outline-white { border-color: rgba(255, 255, 255, .7); color: #fff; background: transparent; }
.btn-gc--outline-white:hover, .btn-gc--outline-white:focus-visible { background: #fff; border-color: #fff; color: var(--gc-primary); transform: translateY(-2px); }
.btn-gc--lg { padding: 1.05em 2em; font-size: 1.05rem; }
.btn-gc--sm { padding: .75em 1.25em; font-size: .85rem; }
.btn-gc__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2em; height: 2em; margin-left: -.6em; border-radius: 50%;
  background: rgba(255, 255, 255, .18); font-size: .9em;
}
.btn-gc--white .btn-gc__icon, .btn-gc--outline .btn-gc__icon { background: var(--gc-primary-soft); }
.btn-gc--outline:hover .btn-gc__icon { background: rgba(255, 255, 255, .18); }

/* --------------------------------------------------------------------------
   4. Section rhythm & headings
   -------------------------------------------------------------------------- */
.section { position: relative; padding: var(--section) 0; }
.section--tight { padding: calc(var(--section) * .6) 0; }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--light { background: var(--gc-light); }
.section--dark { background: var(--gc-dark); color: rgba(255, 255, 255, .78); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }

.section-head { margin-bottom: clamp(32px, 4.5vw, 56px); }
.section-head--center { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }
.section-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.section-head--split .section-title { margin: 0; }

.section-title { position: relative; margin: 0; padding-bottom: 18px; }
.section-title::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 56px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--gc-primary), rgba(var(--gc-primary-rgb), .35));
}
.section-head--center .section-title::after { left: 50%; transform: translateX(-50%); }
.section-title--plain { padding-bottom: 0; }
.section-title--plain::after { display: none; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-head); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gc-primary-dark); margin: 0 0 14px; line-height: 1.3;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: currentColor; flex: 0 0 auto; }
.eyebrow--center { justify-content: center; }
.section--dark .eyebrow { color: color-mix(in srgb, var(--gc-primary) 65%, #fff); }

.lead-text { font-size: 1.05rem; line-height: 1.85; color: var(--gc-body); }
.lead-text--lg { font-size: 1.15rem; }
.section--dark .lead-text { color: rgba(255, 255, 255, .78); }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
/* The utility bar scrolls away; only the main bar stays pinned. The
   negative top offset equals the utility bar's height, so no JS is needed. */
.site-header { --topbar-h: 38px; position: sticky; top: calc(-1 * var(--topbar-h)); z-index: 1000; }

/* 5a. Utility bar: quiet, light, single line */
.topbar {
  height: var(--topbar-h); background: #fff; border-bottom: 1px solid var(--gc-line);
  color: var(--gc-text); font-family: var(--font-body); font-size: 12.5px; line-height: 1.4;
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 100%; }
.topbar__tagline { margin: 0; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.topbar__tagline i { display: none; }
.topbar__meta { list-style: none; display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; }
.topbar__meta li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.topbar__meta i { color: rgba(24, 24, 24, .35); font-size: 11.5px; }
.topbar__meta a { color: inherit; display: inline-flex; align-items: center; gap: 8px; }
.topbar__meta a:hover { color: var(--gc-heading); }
.topbar__social { gap: 4px !important; padding-left: 20px; border-left: 1px solid var(--gc-line); }
.topbar__social > span { display: none; }
.social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff !important; font-size: 12px;
  transition: transform .3s var(--ease), background-color .3s, color .3s;
}
.topbar__meta .social-icon { width: 26px; height: 26px; background: transparent; color: var(--gc-text) !important; font-size: 12px; }
.topbar__meta .social-icon i { color: inherit; }
.social-icon:hover { transform: translateY(-2px); background: #fff; color: var(--gc-primary) !important; }
.topbar__meta .social-icon:hover { background: var(--gc-primary-soft); color: var(--gc-primary-dark) !important; transform: none; }
@media (max-width: 1399.98px) { .topbar__loc { display: none !important; } }
@media (max-width: 1199.98px) { .topbar__tagline { display: none; } .topbar__inner { justify-content: flex-end; } }

/* 5b. Main bar: frosted glass, logo / segmented nav / CTA */
.mainbar {
  position: relative;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.is-scrolled .mainbar { background: rgba(255, 255, 255, .74); border-bottom-color: var(--gc-line); box-shadow: 0 12px 32px -20px rgba(24, 24, 24, .28); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .mainbar, .site-header.is-scrolled .mainbar { background: #fff; }
}
.mainbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }
.brand { display: inline-block; line-height: 0; }
.brand img { width: 176px; height: auto; display: block; transition: width .35s var(--ease); }
.site-header.is-scrolled .brand img { width: 156px; }
.mainbar__actions { display: flex; align-items: center; gap: 10px; }

.mainbar .btn-consult {
  padding: .85em 1.4em; gap: .55em;
  font-size: .875rem; font-weight: 600; letter-spacing: .01em;
  background: var(--gc-heading); color: #fff; box-shadow: none;
}
.mainbar .btn-consult i { color: color-mix(in srgb, var(--gc-primary) 60%, #fff); transition: color .3s; }
.mainbar .btn-consult:hover, .mainbar .btn-consult:focus-visible { background: var(--gc-primary); color: #fff; transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(32, 138, 178, .6); }
.mainbar .btn-consult:hover i, .mainbar .btn-consult:focus-visible i { color: #fff; }

.nav-gc > ul {
  display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 4px;
  background: rgba(24, 24, 24, .035); border: 1px solid var(--gc-line); border-radius: var(--r-pill);
}
.nav-gc > ul > li { position: relative; }
.nav-gc a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 17px; border-radius: var(--r-pill);
  font-family: var(--font-head); font-weight: 500; font-size: 14.5px; line-height: 1.4; color: rgba(24, 24, 24, .66);
  transition: background-color .25s, color .25s, box-shadow .25s;
}
.nav-gc > ul > li > a:hover, .nav-gc > ul > li.open > a { color: var(--gc-heading); }
.nav-gc > ul > li.active > a { background: #fff; color: var(--gc-heading); box-shadow: 0 1px 2px rgba(24, 24, 24, .06), 0 4px 12px -4px rgba(24, 24, 24, .12); }
.nav-gc .caret { display: block; font-size: 10px; line-height: 1; margin-top: 2px; opacity: .55; transition: transform .3s var(--ease); }
.nav-gc li:hover > a .caret, .nav-gc li.open > a .caret, .nav-gc li:focus-within > a .caret { transform: rotate(180deg); }
.nav-gc .sub-menu {
  position: absolute; left: 50%; top: calc(100% + 14px); z-index: 30;
  min-width: 290px; margin: 0; padding: 6px; list-style: none;
  background: rgba(255, 255, 255, .96); border: 1px solid var(--gc-line); border-radius: var(--r-md);
  box-shadow: 0 24px 48px -20px rgba(24, 24, 24, .25);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav-gc .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-gc li:hover > .sub-menu, .nav-gc li:focus-within > .sub-menu, .nav-gc li.open > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-gc .sub-menu a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r-sm); font-size: 13px; letter-spacing: .05em; color: var(--gc-body); }
.nav-gc .sub-menu a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gc-primary); opacity: .35; transition: opacity .25s, transform .25s; }
.nav-gc .sub-menu a:hover, .nav-gc .sub-menu li.active > a { background: rgba(24, 24, 24, .04); color: var(--gc-heading); }
.nav-gc .sub-menu a:hover::before, .nav-gc .sub-menu li.active > a::before { opacity: 1; transform: scale(1.25); }

.menu-toggle {
  display: none; flex-direction: column; justify-content: center; align-items: flex-end; gap: 6px;
  width: 44px; height: 44px; padding: 0 13px;
  border: 1px solid var(--gc-line); border-radius: 50%; background: rgba(24, 24, 24, .03); cursor: pointer;
  transition: background-color .25s, border-color .25s;
}
.menu-toggle span { display: block; width: 100%; height: 1.5px; border-radius: 2px; background: var(--gc-heading); transition: width .3s var(--ease); }
.menu-toggle span:nth-child(2) { width: 65%; }
.menu-toggle span:nth-child(3) { display: none; }
.menu-toggle:hover { border-color: var(--gc-line-strong); background: rgba(24, 24, 24, .06); }
.menu-toggle:hover span:nth-child(2) { width: 100%; }

@media (max-width: 1199.98px) {
  .nav-gc a { padding: 8px 13px; font-size: 14px; }
  .brand img { width: 160px; }
  .site-header.is-scrolled .brand img { width: 146px; }
}
@media (max-width: 1024.98px) {
  :root { --header-h: 70px; }
  .site-header { --topbar-h: 0px; }
  .topbar { display: none; }
  .nav-gc { display: none; }
  .menu-toggle { display: flex; }
  .brand img { width: 148px; }
  .site-header.is-scrolled .brand img { width: 136px; }
  /* The off-canvas menu carries its own Free Consultation button */
  .btn-consult { display: none; }
}
@media (max-width: 575.98px) {
  :root { --header-h: 64px; }
  .brand img, .site-header.is-scrolled .brand img { width: 124px; }
  .menu-toggle { width: 42px; height: 42px; padding: 0 12px; }
}

/* 5c. Off-canvas mobile navigation */
.mobile-nav.offcanvas { width: min(380px, 90vw); border: 0; box-shadow: var(--shadow-lg); }
.mobile-nav .offcanvas-header { padding: 18px 22px; border-bottom: 1px solid var(--gc-line); }
.mobile-nav .offcanvas-header img { width: 140px; height: auto; display: block; }
.mobile-nav .offcanvas-body { padding: 14px 14px 36px; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav nav a { display: block; padding: 13px 16px; border-radius: var(--r-sm); font-family: var(--font-head); font-weight: 600; font-size: 16px; color: var(--gc-heading); transition: background-color .25s, color .25s; }
.mobile-nav nav a:hover, .mobile-nav nav li.active > a { background: var(--gc-primary-soft); color: var(--gc-primary-dark); }
.mobile-nav .sub-menu { padding: 2px 0 6px 16px; }
/* Expand / collapse (the row, panel and toggle are added by main.js) */
.mobile-nav__row { display: flex; align-items: center; gap: 6px; }
.mobile-nav__row > a { flex: 1 1 auto; }
.mobile-nav__toggle {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: var(--gc-heading); font-size: 12px; cursor: pointer;
  transition: background-color .25s, color .25s;
}
.mobile-nav__toggle:hover { background: var(--gc-primary-soft); color: var(--gc-primary-dark); }
.mobile-nav__toggle i { transition: transform .3s var(--ease); }
.mobile-nav li.is-expanded > .mobile-nav__row .mobile-nav__toggle { background: var(--gc-primary-soft); color: var(--gc-primary-dark); }
.mobile-nav li.is-expanded > .mobile-nav__row .mobile-nav__toggle i { transform: rotate(180deg); }
.mobile-nav__panel {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .32s var(--ease), visibility 0s .32s;
}
.mobile-nav__panel > .sub-menu { min-height: 0; overflow: hidden; padding-block: 0; }
.mobile-nav__panel > .sub-menu > li:first-child { margin-top: 2px; }
.mobile-nav__panel > .sub-menu > li:last-child { margin-bottom: 6px; }
.mobile-nav li.is-expanded > .mobile-nav__panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .32s var(--ease), visibility 0s; }
.mobile-nav nav .sub-menu a { font-size: 13.5px; letter-spacing: .03em; color: var(--gc-body); padding: 11px 16px; }
.mobile-nav__cta { margin: 18px 16px 0; display: flex; }
.mobile-nav .mobile-nav__cta a.btn-gc { display: inline-flex; width: 100%; padding: 1em 1.7em; font-size: .95rem; color: #fff; background: var(--gc-primary); }
.mobile-nav .mobile-nav__cta a.btn-gc:hover { background: var(--gc-primary-dark); color: #fff; }
.mobile-nav__meta { margin: 26px 16px 0; padding-top: 22px; border-top: 1px solid var(--gc-line); }
.mobile-nav__meta p { margin: 0 0 14px; font-family: var(--font-head); font-size: 14px; font-weight: 500; color: var(--gc-text); }
.mobile-nav__meta ul li { display: flex; align-items: flex-start; gap: 12px; padding: 7px 0; font-size: 14.5px; color: var(--gc-body); }
.mobile-nav__meta ul li i { color: var(--gc-primary); margin-top: 6px; width: 16px; text-align: center; flex: 0 0 auto; }
.mobile-nav__meta ul li a { display: inline-block; padding: 4px 0; font-family: var(--font-body); font-weight: 400; font-size: inherit; color: inherit; }
.mobile-nav__meta ul li a:hover { color: var(--gc-primary-dark); background: none; }
.mobile-nav__social { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-family: var(--font-head); font-size: 14px; font-weight: 500; color: var(--gc-text); }
.mobile-nav__social .social-icon { background: var(--gc-primary-soft); color: var(--gc-primary) !important; }
.mobile-nav__social .social-icon:hover { background: var(--gc-primary); color: #fff !important; }

/* --------------------------------------------------------------------------
   6. Home hero
   -------------------------------------------------------------------------- */
/* Inset, rounded "card" hero shared with the inner-page hero (section 10). */
:root { --hero-inset: clamp(8px, 1.1vw, 16px); --hero-radius: clamp(20px, 2.2vw, 32px); }
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  margin-inline: var(--hero-inset); border-radius: var(--hero-radius);
  min-height: min(84vh, 860px);
  min-height: clamp(560px, calc(100svh - var(--header-h) - 38px - var(--hero-inset)), 860px);
  background: var(--gc-dark); color: #fff;
}
.hero__bg { position: absolute; inset: 0; z-index: -3; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; animation: heroZoom 18s var(--ease) both; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(0deg, rgba(24, 24, 24, .9) 0%, rgba(24, 24, 24, 0) 38%),
    linear-gradient(90deg, rgba(24, 24, 24, .94) 0%, rgba(24, 24, 24, .8) 36%, rgba(24, 24, 24, .38) 72%, rgba(24, 24, 24, .22) 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 55% at 88% 38%, rgba(32, 138, 178, .3), transparent 70%);
}
.hero__inner {
  position: relative; flex: 1 1 auto; display: flex; align-items: center; width: 100%;
  padding-block: clamp(72px, 9vw, 120px);
  padding-inline: max(var(--bs-gutter-x, 3rem) * .5, 2.6vw);
}
.hero__content { max-width: 820px; }

.hero__title {
  font-family: var(--font-head); font-weight: 600; font-size: clamp(2.25rem, 5.2vw, 4.25rem);
  line-height: 1.04; letter-spacing: -.032em; color: #fff; margin: 0 0 24px; text-wrap: balance;
  animation: heroUp .9s var(--ease) .35s both;
}
.hero__title span {
  display: block; margin-top: .06em; color: var(--gc-primary);
  background: linear-gradient(90deg, color-mix(in srgb, var(--gc-primary) 55%, #fff), var(--gc-primary) 70%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@supports not ((color: color-mix(in srgb, red, blue)) and ((-webkit-background-clip: text) or (background-clip: text))) {
  .hero__title span { background: none; -webkit-text-fill-color: currentColor; color: var(--gc-primary); }
}
.hero__lead {
  max-width: 540px; margin: 0 0 38px;
  font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.7; color: rgba(255, 255, 255, .72); text-wrap: pretty;
  animation: heroUp .9s var(--ease) .45s both;
}
.hero__actions { display: flex; align-items: center; gap: 14px 30px; flex-wrap: wrap; animation: heroUp .9s var(--ease) .55s both; }
.hero__actions .btn-gc--primary { font-weight: 600; box-shadow: 0 18px 36px -18px rgba(32, 138, 178, .8); }
.hero__link {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 0;
  font-family: var(--font-head); font-weight: 500; font-size: 1rem; color: rgba(255, 255, 255, .88);
}
.hero__link i { font-size: .8em; transition: transform .3s var(--ease); }
.hero__link:hover, .hero__link:focus-visible { color: #fff; }
.hero__link:hover i, .hero__link:focus-visible i { transform: translateX(4px); }

/* Bottom strip: who we serve */
.hero__bar { position: relative; border-top: 1px solid rgba(255, 255, 255, .1); animation: heroFade 1s var(--ease) .8s both; }
.hero__bar-inner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 36px; min-height: 78px;
  padding-inline: max(var(--bs-gutter-x, 3rem) * .5, 2.6vw);
}
.hero__bar-label { font-family: var(--font-head); font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .48); }
.hero__chip {
  display: inline-flex; align-items: center; gap: 12px; padding: 6px 0;
  font-family: var(--font-head); font-size: 15px; font-weight: 500; color: #fff;
}
.hero__chip i {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; font-size: 10px;
  transition: background-color .3s, border-color .3s, transform .3s var(--ease);
}
.hero__chip:hover, .hero__chip:focus-visible { color: #fff; }
.hero__chip:hover i, .hero__chip:focus-visible i { background: var(--gc-primary); border-color: var(--gc-primary); transform: rotate(-45deg); }

@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes heroUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1024.98px) {
  .hero { min-height: clamp(520px, calc(100svh - var(--header-h) - var(--hero-inset)), 760px); }
}
@media (max-width: 767.98px) {
  .hero { min-height: 0; }
  .hero__bg img { object-position: 62% center; }
  .hero::before { background: linear-gradient(0deg, rgba(24, 24, 24, .94) 0%, rgba(24, 24, 24, .72) 55%, rgba(24, 24, 24, .5) 100%); }
  .hero__inner { padding-block: 64px 48px; }
  .hero__lead { margin-bottom: 30px; }
  .hero__bar-inner { flex-direction: column; align-items: flex-start; gap: 4px; padding-block: 18px 22px; min-height: 0; }
  .hero__bar-label { margin-bottom: 4px; }
}
/* Small phones: below 480px the base clamp is pinned at its 2.25rem floor,
   which is a lot of type for a 280px column, so keep scaling down. */
@media (max-width: 479.98px) {
  .hero__title { font-size: clamp(1.9rem, 8.6vw, 2.25rem); margin-bottom: 18px; }
  .hero__actions { gap: 10px 24px; }
}
/* Landscape phones: generous padding would take almost half the screen. */
@media (max-width: 991.98px) and (max-height: 520px) {
  .hero { min-height: 0; }
  .hero__inner { padding-block: 44px 36px; }
  .hero__lead { margin-bottom: 24px; }
}

/* --------------------------------------------------------------------------
   7. Image frames
   -------------------------------------------------------------------------- */
.img-frame { position: relative; border-radius: var(--r-lg); }
.img-frame img {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: inherit; box-shadow: var(--shadow-lg);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.img-frame:hover img { transform: translateY(-4px); }
.img-frame--accent::before, .img-frame--accent-left::before {
  content: ""; position: absolute; z-index: 0; border-radius: inherit;
  inset: 26px -26px -26px 26px;
  background: linear-gradient(135deg, var(--gc-primary), var(--gc-primary-dark));
  opacity: .92; transition: transform .7s var(--ease);
}
.img-frame--accent-left::before { inset: 26px 26px -26px -26px !important; }
.img-frame--accent:hover::before { transform: translate(6px, 6px); }
.img-frame--accent-left:hover::before { transform: translate(-6px, 6px); }
.img-frame--dots::after {
  content: ""; position: absolute; z-index: 0; width: 160px; height: 160px; border-radius: 12px;
  right: -34px; top: -34px;
  background-image: radial-gradient(rgba(var(--gc-primary-rgb), .55) 1.6px, transparent 1.6px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(circle at 100% 0%, #000 30%, transparent 75%);
}
.img-frame--4x3 { aspect-ratio: 4 / 3; }
.img-frame--3x2 { aspect-ratio: 3 / 2; }
.img-frame--16x10 { aspect-ratio: 16 / 10; }
.img-frame--flat img { box-shadow: var(--shadow-md); }
.img-frame--accent, .img-frame--accent-left { margin-bottom: 26px; }
.img-frame--accent { margin-right: 26px; }
.img-frame--accent-left { margin-left: 26px; }
@media (max-width: 991.98px) {
  .img-frame--accent, .img-frame--accent-left { margin-bottom: 20px; }
  .img-frame--accent { margin-right: 20px; }
  .img-frame--accent-left { margin-left: 20px; }
  .img-frame--accent::before { inset: 20px -20px -20px 20px; }
  .img-frame--accent-left::before { inset: 20px 20px -20px -20px !important; }
  .img-frame--dots::after { display: none; }
}

/* --------------------------------------------------------------------------
   8. Cards & tiles
   -------------------------------------------------------------------------- */
/* Core values */
.value-card {
  height: 100%; padding: 38px 28px; text-align: center;
  background: #fff; border: 1px solid var(--gc-line); border-radius: var(--r-lg);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.value-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: rgba(var(--gc-primary-rgb), .35); }
.value-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; margin-bottom: 22px; border-radius: 22px;
  background: var(--gc-primary-soft); color: var(--gc-primary); font-size: 26px;
  transition: background-color .4s, color .4s, transform .4s var(--ease), border-radius .4s var(--ease);
}
.value-card:hover .value-card__icon { background: var(--gc-primary); color: #fff; transform: scale(1.06) rotate(-6deg); border-radius: 50%; }
.value-card__desc { margin: 0; font-size: 15px; line-height: 1.8; color: var(--gc-body); }
.section--light .value-card { border-color: transparent; box-shadow: var(--shadow-sm); }

/* Service cards (home + services page) */
.service-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 18px; height: 100%;
  padding: clamp(30px, 4vw, 44px) clamp(26px, 3.5vw, 40px);
  background: #fff; border: 1px solid var(--gc-line); border-radius: var(--r-xl);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.service-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(135deg, var(--gc-primary) 0%, var(--gc-primary-dark) 100%);
  transition: opacity .45s var(--ease);
}
.service-card::after {
  content: ""; position: absolute; right: -60px; top: -60px; z-index: -1;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(var(--gc-primary-rgb), .07);
  transition: transform .6s var(--ease), background-color .45s;
}
.service-card:hover, .service-card:focus-within { transform: translateY(-8px); box-shadow: var(--shadow-primary); border-color: transparent; }
.service-card:hover::before, .service-card:focus-within::before { opacity: 1; }
.service-card:hover::after, .service-card:focus-within::after { transform: scale(1.6); background: rgba(255, 255, 255, .08); }
.service-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 66px; height: 66px; border-radius: 20px;
  background: var(--gc-primary-soft); color: var(--gc-primary); font-size: 26px;
  transition: background-color .45s, color .45s;
}
.service-card__title { margin: 0; font-size: 1.28rem; letter-spacing: .05em; transition: color .45s; }
.service-card__title a { display: inline-block; padding: 5px 0; margin: -5px 0; color: inherit; }
.service-card__desc { margin: 0; font-size: 15px; line-height: 1.85; color: var(--gc-body); transition: color .45s; }
.service-card__more {
  margin-top: auto; padding-top: 6px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: var(--gc-primary-dark);
  transition: color .45s, gap .3s var(--ease);
}
.service-card__more i { font-size: .85em; transition: transform .3s var(--ease); }
.service-card__more:hover { gap: 14px; }
.service-card:hover .service-card__icon, .service-card:focus-within .service-card__icon { background: rgba(255, 255, 255, .16); color: #fff; }
.service-card:hover .service-card__title, .service-card:hover .service-card__more,
.service-card:focus-within .service-card__title, .service-card:focus-within .service-card__more { color: #fff; }
.service-card:hover .service-card__desc, .service-card:focus-within .service-card__desc { color: rgba(255, 255, 255, .88); }

/* Image tiles (service sub-pages): title + description always visible, hover enhances */
.tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%; min-height: 380px;
  border-radius: var(--r-lg); background: var(--gc-dark);
  box-shadow: var(--shadow-sm); outline-offset: 4px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(24, 24, 24, .96) 0%, rgba(24, 24, 24, .8) 42%, rgba(24, 24, 24, .12) 100%);
  transition: background .45s var(--ease);
}
.tile__body { position: relative; z-index: 2; padding: 190px 26px 28px; }
.tile__title { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 1.3rem; font-weight: 700; color: #fff; line-height: 1.25; }
.tile__title::before { content: ""; flex: 0 0 auto; width: 26px; height: 3px; border-radius: 3px; background: var(--gc-primary); }
.tile__desc { margin: 0; color: rgba(255, 255, 255, .9); font-size: 14.5px; line-height: 1.7; }
.tile:hover, .tile:focus-visible, .tile:focus-within { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.tile:hover img, .tile:focus-within img { transform: scale(1.07); }
.tile:hover::before, .tile:focus-within::before { background: linear-gradient(to top, rgba(32, 138, 178, .96) 0%, rgba(24, 24, 24, .82) 50%, rgba(24, 24, 24, .25) 100%); }
@media (max-width: 575.98px) { .tile { min-height: 0; } .tile__body { padding-top: 170px; } }

/* Steps (contact page) */
.step-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px; height: 100%;
  padding: 34px 30px; border-radius: var(--r-lg); color: #fff;
  background: linear-gradient(145deg, var(--gc-primary), var(--gc-primary-dark));
  box-shadow: var(--shadow-primary);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.step-card::after { content: ""; position: absolute; right: -40px; bottom: -40px; z-index: -1; width: 160px; height: 160px; border-radius: 50%; background: rgba(255, 255, 255, .09); transition: transform .5s var(--ease); }
.step-card:hover { transform: translateY(-8px); color: #fff; box-shadow: 0 24px 40px -16px rgba(32, 138, 178, .6); }
.step-card:hover::after { transform: scale(1.4); }
.step-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 18px; background: rgba(255, 255, 255, .16); font-size: 21px; }
.step-card__title { margin: 0; font-size: 1.25rem; font-weight: 700; color: #fff; }
.step-card__arrow { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--gc-primary); font-size: 14px; transition: transform .3s var(--ease); }
.step-card:hover .step-card__arrow { transform: translateX(6px); }

/* Info tiles (contact details) */
.info-tile {
  display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px;
  padding: 18px 20px; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--gc-line);
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s var(--ease);
}
.info-tile:hover { transform: translateX(4px); border-color: rgba(var(--gc-primary-rgb), .35); box-shadow: var(--shadow-sm); }
.info-tile__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--gc-primary-soft); color: var(--gc-primary); font-size: 18px; }
.info-tile__super { font-family: var(--font-head); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gc-primary-dark); line-height: 1.3; }
.info-tile__title { margin: 4px 0 0; font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; line-height: 1.45; color: var(--gc-heading); overflow-wrap: anywhere; }
.info-tile__title a { display: inline-block; padding: 4px 0; color: inherit; }
.info-tile__title a:hover { color: var(--gc-primary); }
.section--dark .info-tile { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .1); }
.section--dark .info-tile:hover { border-color: rgba(var(--gc-primary-rgb), .6); box-shadow: none; }
.section--dark .info-tile__icon { background: rgba(var(--gc-primary-rgb), .22); color: #fff; }
.section--dark .info-tile__super { color: rgba(255, 255, 255, .78); color: color-mix(in srgb, var(--gc-primary) 55%, #fff); }
.section--dark .info-tile__title { color: #fff; }
.section--dark .info-tile__title a:hover { color: color-mix(in srgb, var(--gc-primary) 65%, #fff); }

/* Dark contact block: soft brand glow so it reads apart from the footer */
.contact-block.section--dark { isolation: isolate; overflow: hidden; }
.contact-block.section--dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 60% at 100% 0%, rgba(32, 138, 178, .26), transparent 70%),
    radial-gradient(34% 50% at 0% 100%, rgba(32, 138, 178, .14), transparent 70%);
}

/* Contact card that wraps the quote form */
.contact-card {
  padding: clamp(28px, 4vw, 48px); border-radius: var(--r-xl);
  background: #fff; border: 1px solid var(--gc-line); box-shadow: var(--shadow-md);
}
.section--dark .contact-card { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .1); box-shadow: none; }
.contact-card .title { margin: 0; font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1.15; }
.contact-card .title strong { color: var(--gc-primary); font-weight: 700; }
.contact-card__head { margin-bottom: 28px; }

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */
.form-gc .form-group { margin-bottom: 16px; }
.form-gc .form-control {
  padding: 14px 18px; border-radius: var(--r-sm);
  border: 1.5px solid var(--gc-line-strong); background: rgba(24, 24, 24, .025);
  font-family: var(--font-body); font-size: 15px; color: var(--gc-heading); box-shadow: none;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.form-gc .form-control::placeholder { color: var(--gc-body); opacity: 1; }
.form-gc .form-control:focus { border-color: var(--gc-primary); background: #fff; box-shadow: 0 0 0 4px var(--gc-primary-soft); }
.form-gc textarea.form-control { min-height: 120px; resize: none; }
.form-gc .form-control.is-invalid { border-color: #9b2c2c; background-image: none; }
.form-gc label { display: block; margin-bottom: 16px; font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--gc-heading); }
.form-gc label .form-control { margin-top: 7px; font-family: var(--font-body); font-weight: 400; }
.form-gc .btn-gc { border: 0; margin-top: 8px; }
.section--dark .form-gc .form-control { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #fff; }
.section--dark .form-gc .form-control::placeholder { color: rgba(255, 255, 255, .55); }
.section--dark .form-gc .form-control:focus { background: rgba(255, 255, 255, .1); border-color: var(--gc-primary); box-shadow: 0 0 0 4px rgba(var(--gc-primary-rgb), .3); }

/* Phone / WhatsApp fields: dialling code chip + number in one control */
.form-gc label.phone-label { margin-bottom: 7px; }
.phone-field {
  position: relative; display: flex; align-items: stretch; margin-bottom: 16px;
  border: 1.5px solid var(--gc-line-strong); border-radius: var(--r-sm);
  background: rgba(24, 24, 24, .025);
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.form-gc .form-group .phone-field { margin-bottom: 0; }
.phone-field:focus-within { border-color: var(--gc-primary); background: #fff; box-shadow: 0 0 0 4px var(--gc-primary-soft); }
.phone-field.is-invalid-group { border-color: #9b2c2c; }

.phone-field .form-control {
  flex: 1 1 auto; min-width: 0; margin: 0; border: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: transparent;
}
.phone-field .form-control:focus { background: transparent; box-shadow: none; }
.phone-field .form-control.is-invalid { background: transparent; }

.phone-field__code {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  margin: 0; padding: 0 12px 0 14px; border: 0; border-right: 1.5px solid var(--gc-line-strong);
  background: transparent; white-space: nowrap;
  font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--gc-heading);
}
/* A fixed box with object-fit:contain keeps every row aligned without
   cropping or stretching flags, whose ratios run from 2:1 to about 3:2. */
.phone-field__flag {
  display: block; flex: 0 0 auto; width: 22px; height: 15px;
  object-fit: contain; border-radius: 1px;
}
.phone-field__toggle { cursor: pointer; transition: background-color .25s; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.phone-field__toggle:hover, .phone-field__toggle:focus-visible { background: var(--gc-primary-soft); }
.phone-field__caret { font-size: 11px; color: var(--gc-body); transition: transform .25s var(--ease); }
.phone-field.is-open .phone-field__caret { transform: rotate(180deg); }

/* The dropdown itself */
/* Placed in a fixed layer by main.js: the two service pages wrap their quote
   form in .contact-block.section--dark, which clips anything absolute. */
.cc-panel {
  display: none; position: fixed; z-index: 1100; max-height: 320px;
  flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--gc-line); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}
.cc-panel.is-open { display: flex; }
.cc-panel__search { padding: 10px; border-bottom: 1px solid var(--gc-line); }
.cc-panel__input {
  width: 100%; padding: 9px 12px; border: 1.5px solid var(--gc-line-strong); border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: 14px; color: var(--gc-heading); background: #fff;
}
.cc-panel__input:focus { outline: 0; border-color: var(--gc-primary); box-shadow: 0 0 0 3px var(--gc-primary-soft); }
.cc-panel__list { flex: 1 1 auto; overflow-y: auto; margin: 0; padding: 6px; list-style: none; overscroll-behavior: contain; }
.cc-option {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm);
  cursor: pointer; font-family: var(--font-body); font-size: 14px; line-height: 1.3;
}
.cc-option:hover, .cc-option.is-active { background: var(--gc-primary-soft); }
.cc-option[aria-selected="true"] { background: var(--gc-primary-soft); }
.cc-option[aria-selected="true"] .cc-option__dial { color: var(--gc-primary-dark); }
.cc-option__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gc-body); }
.cc-option__dial { flex: 0 0 auto; font-family: var(--font-head); font-weight: 600; color: var(--gc-heading); }
.cc-panel__empty { padding: 16px 12px; text-align: center; font-size: 14px; color: var(--gc-body); }

/* On the brand-blue service sections the field sits on a dark ground */
.section--dark .phone-field { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.section--dark .phone-field:focus-within { background: rgba(255, 255, 255, .1); border-color: var(--gc-primary); box-shadow: 0 0 0 4px rgba(var(--gc-primary-rgb), .3); }
.section--dark .phone-field__code { color: #fff; border-right-color: rgba(255, 255, 255, .16); }
.section--dark .phone-field__caret { color: rgba(255, 255, 255, .7); }
.section--dark .phone-field__toggle:hover, .section--dark .phone-field__toggle:focus-visible { background: rgba(255, 255, 255, .1); }
.section--dark .phone-field .form-control:focus { background: transparent; box-shadow: none; }

@media (max-width: 575.98px) {
  .phone-field__code { gap: 6px; padding: 0 9px 0 11px; font-size: 14px; }
  .phone-field .form-control { padding-left: 12px; padding-right: 12px; }
}

/* Cloudflare Turnstile widget (data-size="flexible": fills its container).
   Held at 250px, and the form's submit button is given the same width so the
   two line up. That is below the 300px the widget can render at, so
   fitTurnstile() scales it down to the box. */
.form-turnstile { width: 250px; max-width: 100%; margin: 4px 0 18px; min-height: 65px; }
.form-turnstile iframe { max-width: 100%; }
.pill-form + .form-turnstile { margin-top: 16px; }
.form-gc button[type="submit"] { width: auto; max-width: 100%; }

/* The footer column is only ~220px wide at desktop sizes, below the 300px a
   flexible widget can shrink to, so those use Cloudflare's compact size. */
.form-turnstile--compact { width: auto; min-height: 140px; }

/* fitTurnstile() in main.js measures the box and sets --turnstile-scale
   whenever the widget would not fit. Nothing is clipped: the space the
   shrunken widget no longer fills is taken back with the bottom margin. */
.form-turnstile.is-scaled { margin-bottom: calc(18px - 65px * (1 - var(--turnstile-scale, 1))); }
.form-turnstile.is-scaled > * { transform: scale(var(--turnstile-scale, 1)); transform-origin: left top; }

/* Inline e-mail + button (Engage / Ready / footer) */
.pill-form {
  display: flex; align-items: center; gap: 6px; max-width: 540px;
  padding: 6px 6px 6px 8px; border-radius: var(--r-pill);
  background: #fff; box-shadow: var(--shadow-md);
}
.pill-form input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
  padding: 12px 16px; font-family: var(--font-body); font-size: 15px; color: var(--gc-heading);
}
.pill-form input::placeholder { color: var(--gc-body); }
.pill-form input.is-invalid { box-shadow: inset 0 -2px 0 #9b2c2c; }
.pill-form button { flex: 0 0 auto; border: 0; }
.pill-form--soft { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); box-shadow: none; }
.pill-form--soft input { color: #fff; }
.pill-form--soft input::placeholder { color: rgba(255, 255, 255, .55); }
.pill-form--soft button { box-shadow: none; }
@media (max-width: 479.98px) {
  .pill-form { flex-direction: column; align-items: stretch; gap: 10px; padding: 0; border-radius: 0; background: transparent; border: 0; box-shadow: none; }
  .pill-form input { padding: 14px 20px; border-radius: var(--r-pill); background: #fff; box-shadow: var(--shadow-sm); }
  .pill-form--soft input { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); box-shadow: none; }
  .pill-form button { width: 100%; }
  .pill-form + .form-turnstile:not(.form-turnstile--compact) { width: 100%; } /* match the full-width button */
  .cta-engage .pill-form button, .ready-box .pill-form button { background: var(--gc-heading); color: #fff; box-shadow: var(--shadow-md); }
}

/* Feedback */
.field-error { display: block; margin: -8px 0 12px; color: #9b2c2c; font-size: 12.5px; font-weight: 500; line-height: 1.4; }
.field-error[hidden] { display: none; }
.section--dark .field-error, .cta-engage .field-error, .site-footer .field-error, .ready-box .field-error { color: #ffb4b4; }
.pill-form + .field-error { margin: 8px 12px 0; }
.form-msg { display: none; margin-top: 16px; padding: 12px 16px; border-radius: var(--r-sm); font-size: 14px; line-height: 1.5; }
.form-msg.is-success { display: block; background: #e6f7ec; color: #1c6b3a; border: 1px solid #b6e3c5; }
.form-msg.is-error { display: block; background: #fdecea; color: #9b2c2c; border: 1px solid #f5c2c0; }
.section--dark .form-msg.is-success, .cta-engage .form-msg.is-success, .site-footer .form-msg.is-success, .ready-box .form-msg.is-success { background: rgba(70, 200, 120, .15); color: #9ff3c0; border-color: rgba(70, 200, 120, .4); }
.section--dark .form-msg.is-error, .cta-engage .form-msg.is-error, .site-footer .form-msg.is-error, .ready-box .form-msg.is-error { background: rgba(220, 80, 80, .15); color: #ffb4b4; border-color: rgba(220, 80, 80, .4); }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }
button[disabled] { opacity: .7; cursor: wait; }

/* --------------------------------------------------------------------------
   10. Page hero (inner pages)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  margin-inline: var(--hero-inset); border-radius: var(--hero-radius);
  min-height: clamp(300px, 40vh, 440px);
  background: var(--gc-dark); color: #fff;
}
.page-hero--tall { min-height: clamp(400px, 56vh, 620px); }
.page-hero__bg { position: absolute; inset: 0; z-index: -2; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; animation: heroZoom 14s var(--ease) both; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(24, 24, 24, .92) 0%, rgba(24, 24, 24, .7) 45%, rgba(32, 138, 178, .38) 100%);
}
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(40% 55% at 85% 55%, rgba(32, 138, 178, .38), transparent 70%); }
.page-hero__inner {
  position: relative; width: 100%;
  padding-block: clamp(56px, 8vw, 96px);
  padding-inline: max(var(--bs-gutter-x, 3rem) * .5, 2.6vw);
}
.page-hero__title { margin: 0; font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; color: #fff; letter-spacing: -.02em; line-height: 1.08; }
.page-hero__title::before { content: ""; display: block; width: 56px; height: 4px; margin-bottom: 22px; border-radius: 4px; background: var(--gc-primary); }
.page-hero__text { max-width: 760px; margin-top: 22px; font-size: 1.05rem; line-height: 1.85; color: rgba(255, 255, 255, .84); }
.page-hero__text p { margin-bottom: 1em; }
.page-hero__text p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   11. Home-specific blocks
   -------------------------------------------------------------------------- */
/* Animated headline: "Partner With the [Brightest Minds]" */
.headline-anim { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: clamp(2.1rem, 4.2vw, 3.3rem); line-height: 1.15; letter-spacing: -.02em; color: var(--gc-heading); }
.headline-anim .dynamic { display: inline-block; white-space: nowrap; color: var(--gc-primary); position: relative; z-index: 0; }
.headline-anim .dynamic::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .16em; border-radius: 4px; background: rgba(var(--gc-primary-rgb), .18); z-index: -1; }
.headline-anim .dynamic .letter { display: inline-block; opacity: 0; transform: rotateY(-90deg); animation: swirlIn .45s var(--ease) forwards; }
@keyframes swirlIn { 0% { opacity: 0; transform: rotateY(-90deg); } 100% { opacity: 1; transform: rotateY(0); } }

/* Engage CTA */
.cta-engage { position: relative; isolation: isolate; overflow: hidden; padding: var(--section) 0; background: var(--gc-primary); color: #fff; }
.cta-engage::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(50% 70% at 0% 0%, rgba(255, 255, 255, .16), transparent 70%),
    radial-gradient(40% 60% at 100% 100%, rgba(24, 24, 24, .28), transparent 70%);
}
.cta-engage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .35) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(120deg, #000 20%, transparent 70%);
  mask-image: linear-gradient(120deg, #000 20%, transparent 70%);
}
.cta-engage h2 { margin: 0 0 28px; font-size: clamp(2rem, 4.2vw, 3.3rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.cta-engage .img-frame img { box-shadow: 0 36px 64px -24px rgba(24, 24, 24, .55); }

/* --------------------------------------------------------------------------
   12. Inner-page blocks
   -------------------------------------------------------------------------- */
/* About */
.about-intro { position: relative; isolation: isolate; }
.about-intro::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(24, 24, 24, .09) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
  opacity: .8;
}
.founder-card {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(28px, 5vw, 64px);
  padding: clamp(28px, 4vw, 52px); border-radius: var(--r-xl);
  background: #fff; border: 1px solid var(--gc-line); box-shadow: var(--shadow-md);
}
.founder-card__photo { width: clamp(200px, 26vw, 280px); aspect-ratio: 1; padding: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--gc-primary), rgba(var(--gc-primary-rgb), .25)); }
.founder-card__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 5px solid #fff; display: block; }
.founder-card__name { margin: 0; font-size: 1.7rem; font-weight: 700; }
.founder-card__role { display: inline-flex; align-items: center; gap: 10px; margin: 8px 0 22px; font-family: var(--font-head); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gc-primary-dark); }
.founder-card__role::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.founder-quote { position: relative; margin: 0 0 18px; padding-left: 52px; font-family: var(--font-head); font-style: italic; font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.4; color: var(--gc-heading); }
.founder-quote::before { content: "\f10d"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-style: normal; position: absolute; left: 0; top: -6px; font-size: 34px; color: var(--gc-primary); opacity: .3; }
@media (max-width: 767.98px) {
  .founder-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .founder-card__role { justify-content: center; }
  .founder-quote { padding-left: 0; padding-top: 40px; }
  .founder-quote::before { left: 50%; transform: translateX(-50%); }
}

/* Services page – Ready to meet */
.ready-box { padding-bottom: var(--section); }
.ready-box__inner {
  overflow: hidden; border-radius: var(--r-xl); color: #fff;
  background: linear-gradient(135deg, var(--gc-primary) 0%, var(--gc-primary-dark) 100%);
  box-shadow: var(--shadow-primary);
}
.ready-box__text { padding: clamp(36px, 5vw, 68px); }
.ready-box__text h2 { margin: 0 0 14px; font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: 700; color: #fff; }
.ready-box__text p { max-width: 520px; color: rgba(255, 255, 255, .86); font-size: 1.02rem; }
.ready-box__img { position: relative; min-height: 320px; }
.ready-box__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ready-box__img::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--gc-primary) 0%, rgba(32, 138, 178, .15) 40%, transparent 100%); pointer-events: none; }
@media (max-width: 991.98px) { .ready-box__img { min-height: 280px; } .ready-box__img::before { background: linear-gradient(180deg, var(--gc-primary) 0%, rgba(32, 138, 178, .1) 45%, transparent 100%); } }

/* Partners */
.quote-block { text-align: center; max-width: 900px; margin: 0 auto; }
.quote-block__mark { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: 26px; border-radius: 24px; background: var(--gc-primary-soft); color: var(--gc-primary); font-size: 28px; }
.quote-block .title { margin: 0; font-style: italic; font-weight: 600; font-size: clamp(1.7rem, 3.8vw, 2.7rem); line-height: 1.25; color: var(--gc-heading); }
.statement { position: relative; max-width: 900px; margin: 0 auto; padding: clamp(30px, 4vw, 48px) clamp(26px, 4vw, 56px); border-radius: var(--r-xl); background: var(--gc-light); text-align: center; }
.statement::before { content: ""; position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); width: 64px; height: 4px; border-radius: 4px; background: var(--gc-primary); }
.statement .title { margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 600; line-height: 1.55; color: var(--gc-heading); }

/* Contact page */
.contact-info-card { height: 100%; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-xl); background: var(--gc-light); }
.contact-info-card .img-frame { margin-bottom: 28px; }
.contact-info-card .section-title { margin-bottom: 24px; }
.contact-form-card { height: 100%; padding: clamp(28px, 4vw, 44px); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--gc-line); box-shadow: var(--shadow-md); }
.contact-form-card textarea.form-control { min-height: 220px; }
.contact-map { position: relative; width: 100%; overflow: hidden; background: var(--gc-light); }
.contact-map::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(103, 104, 103, .18); pointer-events: none; }
.contact-map iframe { display: block; width: 100%; max-width: none; height: clamp(360px, 42vw, 560px); border: 0; filter: grayscale(35%); }
@media (max-width: 767.98px) { .contact-map iframe { height: 360px; } }
@media (max-width: 479.98px) { .contact-map iframe { height: 300px; } }
#form { scroll-margin-top: 110px; }

/* 404 */
.error-hero { min-height: 60vh; display: flex; align-items: center; text-align: center; }
.error-hero__icon { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin-bottom: 28px; border-radius: 30px; background: var(--gc-primary-soft); color: var(--gc-primary); font-size: 40px; }

/* Separator */
.divider { border: 0; height: 1px; margin: 0; background: linear-gradient(90deg, transparent, var(--gc-line-strong), transparent); opacity: 1; }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.site-footer { position: relative; background: var(--gc-dark); color: rgba(255, 255, 255, .7); }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--gc-primary) 0%, var(--gc-primary) 40%, rgba(32, 138, 178, .15) 100%); }
.footer-top { padding: clamp(60px, 7vw, 92px) 0 clamp(40px, 5vw, 56px); }
.footer-brand { display: inline-block; padding: 13px 16px; border-radius: var(--r-md); background: #fff; }
.footer-brand img { width: 172px; height: auto; display: block; }
.footer-title { margin: 0 0 22px; font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; letter-spacing: .05em; color: #fff; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links a { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; font-family: var(--font-head); font-size: 14.5px; font-weight: 500; letter-spacing: .02em; color: rgba(255, 255, 255, .72); transition: color .25s, transform .3s var(--ease); }
.footer-links a::before { content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 11px; color: var(--gc-primary); }
.footer-links a:hover { color: #fff; transform: translateX(4px); }
.footer-contact { list-style: none; margin: 0 0 22px; padding: 0; }
.footer-contact li { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; column-gap: 12px; padding: 7px 0; font-size: 14.5px; line-height: 1.7; }
.footer-contact li i { width: 18px; margin-top: .42em; text-align: center; color: var(--gc-primary); font-size: 14px; line-height: 1; }
.footer-contact a { display: inline-block; padding: 0; color: rgba(255, 255, 255, .72); }
.footer-contact a:hover { color: #fff; }
.footer-social { display: flex; gap: 10px; }
.footer-social .social-icon { width: 38px; height: 38px; font-size: 14px; background: rgba(255, 255, 255, .08); }
.footer-social .social-icon:hover { background: var(--gc-primary); color: #fff !important; }
.footer-form .form-msg { margin-top: 12px; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); padding: 22px 0; font-family: var(--font-head); font-size: 13.5px; color: rgba(255, 255, 255, .55); }
.footer-bottom a { display: inline-block; padding: 6px 2px; color: #fff; font-weight: 600; }
.footer-bottom a:hover { color: color-mix(in srgb, var(--gc-primary) 65%, #fff); }
@media (max-width: 1439.98px) {
  /* keep the copyright line clear of the floating WhatsApp button */
  .footer-bottom .container { padding-right: calc(var(--bs-gutter-x) * .5 + 80px); }
}
@media (max-width: 767.98px) {
  .footer-top [class*="col-"] { margin-bottom: 30px; }
  .footer-top [class*="col-"]:last-child { margin-bottom: 0; }
  .footer-bottom { text-align: center; padding-bottom: 104px; }
  .footer-bottom .container { padding-right: calc(var(--bs-gutter-x) * .5); }
}

/* --------------------------------------------------------------------------
   14. Floating controls
   -------------------------------------------------------------------------- */
.whatsapp-btn {
  position: fixed; right: 24px; bottom: 24px; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: #49e670; color: #fff !important; font-size: 30px;
  box-shadow: 0 12px 28px -8px rgba(24, 24, 24, .35);
  transition: transform .3s var(--ease);
}
.whatsapp-btn::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(73, 230, 112, .6); animation: pulseRing 2.4s var(--ease) infinite; }
.whatsapp-btn:hover { transform: scale(1.08); }
.whatsapp-btn .tip {
  position: absolute; right: 70px; top: 50%; transform: translateY(-50%) translateX(6px);
  padding: 8px 14px; border-radius: var(--r-sm); white-space: nowrap;
  background: var(--gc-heading); color: #fff; font-family: var(--font-head); font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transition: all .25s var(--ease);
}
.whatsapp-btn:hover .tip { opacity: 1; visibility: visible; transform: translateY(-50%); }
@keyframes pulseRing { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }

.to-top {
  position: fixed; right: 30px; bottom: 96px; z-index: 1090;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: #fff; color: var(--gc-primary); font-size: 15px;
  box-shadow: var(--shadow-md); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s, visibility .3s, transform .3s var(--ease), background-color .3s, color .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 767.98px) { .to-top { right: auto; left: 20px; bottom: 26px; } }
.to-top:hover { background: var(--gc-primary); color: #fff; }

/* --------------------------------------------------------------------------
   15. Scroll-in animations
   -------------------------------------------------------------------------- */
.js .animate { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .animate.in-view { opacity: 1; transform: none; }
.js .animate--left { transform: translateX(-30px); }
.js .animate--right { transform: translateX(30px); }
.js .animate--scale { transform: scale(.94); }
.js .animate.in-view { transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .animate { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   16. Utilities
   -------------------------------------------------------------------------- */
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.text-white a { color: #fff; }
.text-white a:hover { color: color-mix(in srgb, var(--gc-primary) 65%, #fff); }