:root {
  /* ===============================
     Brand colors (from your logo)
     =============================== */
  --brand-50: #e9f3fb;
  --brand-100: #d3e7f7;
  --brand-200: #a9cff0;
  --brand-300: #7fb7e8;
  --brand-400: #4b94d8;
  --brand-500: #1c74b7; /* primary (logo blue) */
  --brand-600: #185f97;
  --brand-700: #134a78;
  --brand-800: #0f395e;
  --brand-900: #0a2a46;

  --brand-deep: #292d6a; /* deep navy from logo */
  --brand-accent: #1c74b7; /* bright accent from logo */
  --brand-muted: #a5b6cf; /* desaturated blue from logo */
  --brand-gradient: linear-gradient(
    135deg,
    var(--brand-accent) 0%,
    var(--brand-deep) 100%
  );

  /* On-color (text/icons that sit on brand backgrounds) */
  --on-brand: #ffffff;

  /* ===============================
     Neutrals
     =============================== */
  --neutral-0: #ffffff;
  --neutral-50: #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1f2937;
  --neutral-900: #0f172a;

  /* Page surfaces */
  --bg: var(--neutral-50);
  --bg-elev-1: #ffffff;
  --bg-elev-2: #f6f8fb;
  --border: var(--neutral-200);
  --divider: rgba(15, 23, 42, 0.08);

  /* Text colors */
  --text: #0f172a; /* primary body */
  --text-weak: #475569; /* secondary */
  --text-muted: #64748b; /* tertiary */
  --text-on-dark: #e5e7eb; /* for dark surfaces */

  /* Status colors */
  --success-500: #16a34a;
  --warning-500: #f59e0b;
  --danger-500: #292E61;
  --info-500: var(--brand-500);

  --on-success: #ffffff;
  --on-warning: #0b1220;
  --on-danger: #ffffff;
  --on-info: #ffffff;

  /* ===============================
     Typography
     =============================== */
  --font-sans: "Inter", "Poppins", system-ui, -apple-system, Segoe UI, Roboto,
    Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-serif: "Playfair Display", ui-serif, Georgia, serif;
  --font-mono: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
  font-weight: 600;

  --fs-12: 0.75rem; /* 12px */
  --fs-14: 0.875rem; /* 14px */
  --fs-16: 1rem; /* 16px base */
  --fs-18: 1.125rem; /* 18px */
  --fs-20: 1.25rem; /* 20px */
  --fs-24: 1.5rem; /* 24px */
  --fs-30: 1.875rem; /* 30px */
  --fs-36: 2.25rem; /* 36px */
  --fs-48: 3rem; /* 48px */
  --lh-tight: 1.2;
  --lh-normal: 1.55;
  --lh-loose: 1.8;
  --tracking-tight: -0.01em;
  --tracking-wide: 0.02em;

  /* ===============================
     Spacing scale
     =============================== */
  --space-0: 0;
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --container: 1200px;
  --container-narrow: 820px;
  --section-pad-y: clamp(3rem, 6vw, 6rem);
  --grc-fab-gap: 12px;
  --grc-fab-size: 56px;
  --grc-fab-z: 4900; /* above content, below menus if you want */
  --grc-fab-shadow: 0 12px 30px rgba(0,0,0,.35);
  --grc-fab-ring: 0 0 0 0 rgba(37,211,102,.45);
  --grc-call-grad: linear-gradient(135deg,
                     var(--brand-500, #1c74b7),
                     var(--brand-700, #134a78));
  --grc-text-on-dark: #ffffff;
  /* ===============================
     Radii & Shadows
     =============================== */
  --radius-sm: 0.5rem; /* 8px */
  --radius-md: 0.875rem; /* 14px */
  --radius-lg: 1.25rem; /* 20px */
  --radius-xl: 2rem; /* 32px */
  --radius-pill: 999px;

  --shadow-1: 0 6px 18px rgba(16, 24, 40, 0.06);
  --shadow-2: 0 10px 30px rgba(16, 24, 40, 0.1);
  --shadow-3: 0 18px 48px rgba(16, 24, 40, 0.14);

  /* ===============================
     Motion & Opacity
     =============================== */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;

  --opacity-0: 0;
  --opacity-25: 0.25;
  --opacity-50: 0.5;
  --opacity-75: 0.75;
  --opacity-100: 1;

  /* ===============================
     Component tokens
     =============================== */
  /* Buttons */
  --btn-bg: var(--brand-500);
  --btn-bg-hover: #175f96;
  --btn-text: var(--on-brand);
  --btn-radius: var(--radius-pill);
  --btn-shadow: var(--shadow-2);
  --btn-pad-y: 0.75rem;
  --btn-pad-x: 1.25rem;

  /* Outline button */
  --btn-ol-border: 1px solid var(--brand-500);
  --btn-ol-text: var(--brand-500);
  --btn-ol-hover-bg: rgba(28, 116, 183, 0.08);

  /* Links */
  --link: var(--brand-500);
  --link-hover: var(--brand-deep);
  --link-underline: currentColor;

  /* Cards */
  --card-bg: var(--bg-elev-1);
  --card-border: 1px solid var(--border);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-1);
  --card-pad: var(--space-6);

  /* Inputs */
  --input-bg: #ffffff;
  --input-border: 1px solid var(--neutral-200);
  --input-border-focus: 1px solid var(--brand-400);
  --input-radius: 12px;
  --input-pad-y: 0.75rem;
  --input-pad-x: 1rem;
  --input-placeholder: var(--neutral-400);
  --input-ring: 0 0 0 4px rgba(28, 116, 183, 0.15);

  /* Header / Nav */
  --nav-height: 72px;
  --nav-bg: rgba(255, 255, 255, 0.8);
  --nav-blur: saturate(180%) blur(10px);
  --nav-border: 1px solid rgba(15, 23, 42, 0.06);

  /* Hero */
  --hero-gradient: var(--brand-gradient);
  --hero-text: #ffffff;

  /* Badges / Chips */
  --chip-bg: rgba(28, 116, 183, 0.08);
  --chip-text: var(--brand-700);

  /* Z-index */
  --z-nav: 1000;
  --z-modal: 1100;
  --z-popover: 1200;
  --z-toast: 1300;
}
html, body{ overflow-x: hidden;
} 
/* ===============================
   Dark mode (auto via prefers-color-scheme)
   =============================== */
@media  {
  :root {
    --bg: #0b1020; 
    --bg-elev-1: #0f1629;
    --bg-elev-2: #0c1323;
    --border: rgba(255, 255, 255, 0.08);
    --divider: rgba(255, 255, 255, 0.06);

    --text: #e8edf7;
    --text-weak: #c7d1e2;
    --text-muted: #9fb1cc;

    --nav-bg: rgba(11, 16, 32, 0.7);
    --nav-border: 1px solid rgba(255, 255, 255, 0.06);

    --card-bg: #0f1629;
    --card-border: 1px solid rgba(255, 255, 255, 0.06);
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

    --input-bg: #0c1323;
    --input-border: 1px solid rgba(255, 255, 255, 0.1);
    --input-border-focus: 1px solid var(--brand-400);
    --input-placeholder: #7f8daa;

    --btn-bg: var(--brand-deep);
    --btn-bg-hover: #1b2154;

    --chip-bg: rgba(90, 131, 214, 0.16);
    --chip-text: #b9cdf3;
  }
}
body {
  font-family: var(--font-mono);
}
/* ===============================
   Quick starter classes (optional)
   =============================== */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.section {
  padding-block: var(--section-pad-y);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  color: var(--btn-text);
  background: var(--btn-bg);
  border: none;
  border-radius: var(--btn-radius);
  box-shadow: var(--btn-shadow);
  transition: transform var(--dur-1) var(--ease-out),
    background var(--dur-1) var(--ease-out);
}
.btn:hover {
  background: var(--btn-bg-hover);
  transform: translateY(-1px);
}
.btn--outline {
  background: transparent;
  color: var(--btn-ol-text);
  border: var(--btn-ol-border);
}
.btn--outline:hover {
  background: var(--btn-ol-hover-bg);
}

.card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-pad);
}

.input,
input,
select,
textarea {
  background: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--input-radius);
  color: var(--text);
  padding: var(--input-pad-y) var(--input-pad-x);
  outline: 0;
  transition: box-shadow var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out);
}
.input:focus,
input:focus,
select:focus,
textarea:focus {
  border: var(--input-border-focus);
  box-shadow: var(--input-ring);
}

.nav-blur {
  backdrop-filter: var(--nav-blur);
  -webkit-backdrop-filter: var(--nav-blur);
  background: var(--nav-bg);
  border-bottom: var(--nav-border);
}

/* ===== Boxed header wrapper ===== */
.grc-outer {
  max-width: 1220px;
  margin: 18px auto 0;
  padding: 0 16px;
}
.grc-container {
  background: var(--neutral-0, #fff);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  border-radius: 12px;
  height: 74px;
  display: flex;
  align-items: center;
  padding-inline: 20px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.12);
}
.grc-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ===== Brand ===== */
.grc-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--brand-deep, #0f1b3a);
  text-decoration: none;
}
.grc-logo {
  height: 60px;
  width: auto;
}
.grc-brand-name {
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ===== Desktop Nav ===== */
.grc-desktop {
  margin-left: 24px;
}
.grc-nav {
  display: flex;
  gap: 50px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.grc-nav a,
.grc-dd-trigger {
  color: var(--brand-700, #134a78);
  opacity: 0.95;
  text-decoration: none;
  font-weight: 700;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.50rem;
  transition: color 0.2s ease, opacity 0.2s ease;
  font-family: var(--font-mono);
}
.grc-nav a:hover,
.grc-dd-trigger:hover {
  color: var(--brand-500, #1c74b7);
}
.grc-nav a.is-active {
  color: var(--danger-500, #e11d2e);
}
.grc-has-dd {
  position: relative;
}
.grc-chev {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
  opacity: 0.9;
}

/* ===== Premium Services dropdown (no feature) ===== */
.grc-mega {
  position: absolute;
  right: -367px;
  top: calc(100% + 16px);
  width: min(814px, 94vw);
  padding: 16px;
  background: #fff;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  border-radius: 14px;
  box-shadow: 0 26px 70px rgba(16, 24, 40, 0.18);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 0px;

  /* gradient top rule */
  background-image: linear-gradient(
      90deg,
      var(--brand-500, #1c74b7),
      var(--brand-700, #134a78)
    ),
    linear-gradient(#fff, #fff);
  background-repeat: no-repeat;
  background-size: 100% 3px, 100% calc(100% - 0px);
  background-position: 0 0, 0 0;

  /* animated open */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.18s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 0.18s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    visibility 0.18s;
}
.grc-mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}
.mega-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text, #0f172a);
  font-weight: 700;
  transition: background 0.18s var(--ease-out), transform 0.18s var(--ease-out),
    color 0.18s var(--ease-out);
}
.mega-link .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-400, #4b94d8);
  box-shadow: 0 0 0 0 rgba(75, 148, 216, 0.35);
  transition: box-shadow 0.28s var(--ease-out), background 0.18s;
  flex: none;
}
.mega-link:hover {
  background: var(--neutral-100, #f1f5f9);
  transform: translateX(2px);
  color: var(--brand-900, #0a2a46);
}
.mega-link:hover .dot {
  background: var(--brand-500, #1c74b7);
  box-shadow: 0 0 0 6px rgba(28, 116, 183, 0.15);
}

/* open state (set by JS) */
.grc-has-dd.is-open > .grc-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.grc-has-dd.is-open > .grc-dd-trigger {
  color: var(--brand-500, #1c74b7);
}
.grc-has-dd.is-open > .grc-dd-trigger .grc-chev {
  transform: rotate(180deg);
}

/* ===== Tools ===== */
.grc-tools {
  display: flex;
  align-items: center;
  gap: 18px;
}
.grc-search {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  background: transparent;
  color: var(--brand-deep, #0f1b3a);
  cursor: pointer;
}
/* Premium header CTA (matches brand blues) */
.grc-cta{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 12px 22px;
  border-radius: 12px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;

  /* brand gradient + subtle top gloss */
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)),
    linear-gradient(90deg, var(--brand-700,#134a78), var(--brand-500,#1c74b7));
  border: 1px solid rgba(28,116,183,.38);

  /* depth + ambient glow */
  box-shadow:
    0 10px 26px rgba(28,116,183,.28),
    inset 0 0 0 0 rgba(255,255,255,.18);

  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  transition:
    transform .28s cubic-bezier(.16,1,.3,1),
    box-shadow .28s cubic-bezier(.16,1,.3,1),
    background .28s cubic-bezier(.16,1,.3,1),
    border-color .28s cubic-bezier(.16,1,.3,1);
  overflow: hidden;
}

/* sheen sweep */
.grc-cta::before{
  content:"";
  position:absolute; inset:-1px;
  background: linear-gradient(120deg,
              transparent 0%,
              rgba(255,255,255,.36) 45%,
              rgba(255,255,255,.16) 55%,
              transparent 100%);
  transform: translateX(-120%);
  transition: transform .7s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}

/* soft outer ring (appears on hover/focus) */
.grc-cta::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(28,116,183,.22);
  opacity: 0;
  transition: opacity .28s cubic-bezier(.16,1,.3,1),
              box-shadow .28s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}

/* hover */
.grc-cta:hover{
  transform: translateY(-2px);
  border-color: rgba(28,116,183,.6);
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(90deg, var(--brand-700,#134a78), var(--brand-500,#1c74b7));
  box-shadow:
    0 14px 38px rgba(28,116,183,.34),
    inset 0 0 10px rgba(255,255,255,.22);
}
.grc-cta:hover::before{ transform: translateX(120%); }
.grc-cta:hover::after{
  opacity: 1;
  box-shadow: 0 0 0 8px rgba(28,116,183,.18);
}

/* active/pressed */
.grc-cta:active{
  transform: translateY(0) scale(.98);
  box-shadow:
    0 8px 20px rgba(19,74,120,.38),
    inset 0 0 14px rgba(0,0,0,.18);
}

/* keyboard focus */
.grc-cta:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 4px rgba(28,116,183,.22),
    0 14px 38px rgba(28,116,183,.34),
    inset 0 0 10px rgba(255,255,255,.22);
}

/* disabled (optional) */
.grc-cta[disabled],
.grc-cta.is-disabled{
  opacity: .6; cursor: not-allowed;
  transform: none; box-shadow: none;
}

/* subtle icon nudge when present (optional) */
.grc-cta > i, .grc-cta > svg{ transition: transform .28s cubic-bezier(.16,1,.3,1); }
.grc-cta:hover > i, .grc-cta:hover > svg{ transform: translateX(2px); }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .grc-cta, .grc-cta::before, .grc-cta::after{ transition: none !important; }
}

.grc-cta--full {
  display: block;
  text-align: center;
  width: 100%;
}

/* ===== Premium Hamburger ===== */
:root {
  --hamby-size: 44px;
  --hamby-line: 2px;
  --hamby-gap: 7px;
  --hamby-fg: var(--brand-500, #1c74b7);
  --hamby-bg: var(--neutral-0, #fff);
  --hamby-border: var(--border, rgba(15, 23, 42, 0.12));
  --hamby-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
  --hamby-shadow-hover: 0 10px 30px rgba(16, 24, 40, 0.18);
  --hamby-focus: 0 0 0 4px rgba(28, 116, 183, 0.18);
  --hamby-radius: 12px;
  --hamby-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --hamby-dur: 220ms;
}
.hamby {
  width: var(--hamby-size);
  height: var(--hamby-size);
  display: none;
  place-items: center;
  background: var(--hamby-bg);
  border: 1px solid var(--hamby-border);
  border-radius: var(--hamby-radius);
  box-shadow: var(--hamby-shadow);
  cursor: pointer;
}
.hamby:hover {
  transform: translateY(-1px);
  box-shadow: var(--hamby-shadow-hover);
}
.hamby:focus-visible {
  outline: 0;
  box-shadow: var(--hamby-shadow-hover), var(--hamby-focus);
}
.hamby__bar,
.hamby__bar::before,
.hamby__bar::after {
  content: "";
  display: block;
  width: 22px;
  height: var(--hamby-line);
  background: var(--hamby-fg);
  border-radius: 2px;
  transition: transform var(--hamby-dur) var(--hamby-ease),
    opacity var(--hamby-dur) var(--hamby-ease),
    width var(--hamby-dur) var(--hamby-ease);
  position: relative;
}
.hamby__bar::before {
  position: absolute;
  top: calc(var(--hamby-gap) * -1);
  left: 0;
  right: 0;
  width: 18px;
  margin-inline: auto;
}
.hamby__bar::after {
  position: absolute;
  top: var(--hamby-gap);
  left: 0;
  right: 0;
  width: 18px;
  margin-inline: auto;
}
.hamby.is-active .hamby__bar {
  background: transparent;
}
.hamby.is-active .hamby__bar::before {
  width: 22px;
  transform: translateY(var(--hamby-gap)) rotate(45deg);
  background: var(--danger-500, #e11d2e);
}
.hamby.is-active .hamby__bar::after {
  width: 22px;
  transform: translateY(calc(var(--hamby-gap) * -1)) rotate(-45deg);
  background: var(--danger-500, #e11d2e);
}

/* show burger on mobile only */
@media (max-width: 1100px) {
  .hamby {
    display: grid;
  }
  .grc-desktop {
    display: none;
  }
  .grc-cta {
    display: none;
  }
}

/* ===== Scrim & Mobile Menu (left full) ===== */
.grc-scrim {
  position: fixed;
  inset: 0;
  background: rgba(3, 10, 24, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.grc-mobile {
  position: fixed;
  inset: 0;
  background: var(--bg, #0b1020);
  color: #e8edf7;
  z-index: 1200;
  transform: translateX(-100%);
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.grc-mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--neutral-0, #0f1629);
}
.grc-mnav {
  list-style: none;
  margin: 0;
  padding: 14px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.grc-mnav > li > a,
.grc-mtrigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: #dbe7ff;
  font-weight: 700;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.grc-mnav > li > a:hover,
.grc-mtrigger:hover {
  background: rgba(255, 255, 255, 0.06);
}
.grc-mpanel {
  max-height: 0;
  overflow: hidden;
  opacity: 0.75;
  transition: max-height 0.44s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.44s;
}
.grc-mpanel a {
  display: block;
  padding: 10px 18px;
  border-radius: 8px;
  color: #bcd2fb;
  text-decoration: none;
}
.grc-mpanel a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

/* caret indicator on mobile submenu triggers */
.grc-mhas > .grc-mtrigger {
  position: relative;
  padding-right: 42px;
  color: var(--brand-500, #1c74b7);
}
.grc-mhas > .grc-mtrigger::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%) rotate(0deg);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat center/100%;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat center/100%;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.grc-mhas > .grc-mtrigger[aria-expanded="true"] {
  color: white;
}
.grc-mhas > .grc-mtrigger[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(180deg);
}

/* ===== Open states ===== */
body.menu-open .grc-scrim {
  opacity: 1;
  pointer-events: auto;
}
body.menu-open .grc-mobile {
  transform: translateX(0);
}
body.menu-open {
  overflow: hidden;
}

/* ===== Responsive tweaks ===== */
@media (max-width: 992px) {
  .grc-mega {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(760px, 94vw);
  }
}
@media (max-width: 640px) {
  .grc-mega {
    grid-template-columns: 1fr;
    width: min(500px, 94vw);
  }
}
@media (max-width: 560px) {
  .grc-brand-name {
    display: none;
  }
  .grc-container {
    height: 68px;
  }
}


/* ===== HERO + SWIPER (scoped so nothing else is affected) ===== */

/* Container */
.grc-hero { position: relative; z-index: 0; }
.grc-hero .hero-swiper{
  width:100%;
  height: clamp(360px, 68vh, 640px);
  border-radius: 14px;
  overflow:hidden;
  max-width:100%;
  margin: 16px auto;
  padding-inline: 16px; /* align with boxed header gutters */
}
@media (max-width: 640px){
  .grc-hero .hero-swiper{ height: clamp(360px, 60vh, 520px); padding-inline: 12px; }
}

/* Slide background + overlay */
.grc-hero .grc-slide{
  position:relative;
  display:grid; place-items:center;
  background-image:
    linear-gradient( to bottom right,
      rgba(15,22,41,.55) 0%,
      rgba(15,22,41,.35) 40%,
      rgba(15,22,41,.55) 100% ),
    var(--bg);
  background-size: cover; background-position: center;
}
.grc-hero .grc-slide__inner{
  width:min(1100px, 92%); margin-inline:auto; color:#fff;
  text-align:left;
  display:flex; flex-direction:column; gap:16px;
}

/* Typography */
.grc-hero .grc-hero__title{
  margin:0;
  font-family: var(--font-mono);
  font-weight:800;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.05;
  letter-spacing:.01em;
}
.grc-hero .grc-hero__title span{ color: var(--brand-300, #69a7de); }
.grc-hero .grc-hero__text{
  margin:6px 0 0;
  max-width: 60ch;
  font-size: clamp(14px, 2.2vw, 18px);
  line-height:1.6;
  color: rgba(255,255,255,.92);
}

/* Buttons */
.grc-hero .grc-hero__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px }
.grc-hero .grc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 800; text-decoration:none; white-space:nowrap;
  transition: transform .18s cubic-bezier(.16,1,.3,1), filter .18s;
}
.grc-hero .grc-btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.grc-hero .grc-btn--primary{
  background: var(--danger-500, #e11d2e); color:#fff;
  box-shadow: 0 14px 28px rgba(225,29,46,.25);
}
/* Premium primary CTA (brand blue, animated) */
.grc-hero .grc-btn--primary{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 12px;
  border: 1px solid rgba(28,116,183,0.35);                /* brand-500 */
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)) /* subtle top gloss */
      ,linear-gradient(90deg, var(--brand-600,#185f97), var(--brand-500,#1c74b7));
  box-shadow:
    0 14px 28px rgba(28,116,183,.28),                      /* brand glow */
    inset 0 0 0 0 rgba(255,255,255,.2);                    /* will animate on hover */
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  transition: transform .28s cubic-bezier(.16,1,.3,1),
              box-shadow .28s cubic-bezier(.16,1,.3,1),
              background .28s cubic-bezier(.16,1,.3,1),
              border-color .28s cubic-bezier(.16,1,.3,1);
  overflow: hidden;
}

/* sheen sweep */
.grc-hero .grc-btn--primary::before{
  content:"";
  position:absolute; inset:-1px;
  background: linear-gradient(120deg,
              transparent 0%,
              rgba(255,255,255,.35) 45%,
              rgba(255,255,255,.15) 55%,
              transparent 100%);
  transform: translateX(-120%);
  transition: transform .7s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}

/* subtle ambient ring */
.grc-hero .grc-btn--primary::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(28,116,183,.25);
  opacity: 0;
  transition: opacity .28s cubic-bezier(.16,1,.3,1),
              box-shadow .28s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}

/* Hover / focus styles */
.grc-hero .grc-btn--primary:hover{
  transform: translateY(-2px);
  border-color: rgba(28,116,183,.6);
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(90deg, var(--brand-700,#134a78), var(--brand-500,#1c74b7));
  box-shadow:
    0 18px 42px rgba(28,116,183,.36),
    inset 0 0 10px rgba(255,255,255,.22);
}
.grc-hero .grc-btn--primary:hover::before{
  transform: translateX(120%);
}
.grc-hero .grc-btn--primary:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 4px rgba(28,116,183,.22),
    0 18px 42px rgba(28,116,183,.36),
    inset 0 0 10px rgba(255,255,255,.22);
}
.grc-hero .grc-btn--primary:hover::after,
.grc-hero .grc-btn--primary:focus-visible::after{
  opacity: 1;
  box-shadow: 0 0 0 8px rgba(28,116,183,.18);
}

/* Active / pressed */
.grc-hero .grc-btn--primary:active{
  transform: translateY(0) scale(.98);
  box-shadow:
    0 10px 24px rgba(19,74,120,.38),
    inset 0 0 14px rgba(0,0,0,.18);
}

/* Disabled (optional) */
.grc-hero .grc-btn--primary[disabled],
.grc-hero .grc-btn--primary.is-disabled{
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .grc-hero .grc-btn--primary,
  .grc-hero .grc-btn--primary::before,
  .grc-hero .grc-btn--primary::after{
    transition: none !important;
  }
}


/* Premium ghost button */
.grc-hero .grc-btn--ghost {
  position: relative;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.25);
}

/* Animated gradient shine */
.grc-hero .grc-btn--ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0.08) 100%
  );
  transform: translateX(-100%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover animation */
.grc-hero .grc-btn--ghost:hover::before {
  transform: translateX(100%);
}

.grc-hero .grc-btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.25),
              inset 0 0 10px rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

/* Active / focus state */
.grc-hero .grc-btn--ghost:active {
  transform: scale(0.98);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.3);
}


/* Swiper theme: bullets + arrows (SCOPED) */
.grc-hero .hero-swiper .swiper-pagination{ bottom:18px !important; }
.grc-hero .hero-swiper .swiper-pagination-bullet{
  width: 9px; height: 9px; border-radius:999px;
  background: rgba(255,255,255,.55); opacity:1; margin:0 6px !important;
  transform: translateZ(0);
}
.grc-hero .hero-swiper .swiper-pagination-bullet-active{
  background: linear-gradient(90deg, var(--brand-500,#1c74b7), var(--brand-700,#134a78));
  box-shadow: 0 0 0 6px rgba(28,116,183,.20);
}

/* Arrows */
.grc-hero .hero-swiper .swiper-button-prev,
.grc-hero .hero-swiper .swiper-button-next{
  width:42px; height:42px; border-radius:12px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
  color:#fff;
  transition: transform .18s cubic-bezier(.16,1,.3,1), background .18s;
}
.grc-hero .hero-swiper .swiper-button-prev:hover,
.grc-hero .hero-swiper .swiper-button-next:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.2);
}
.grc-hero .hero-swiper .swiper-button-prev:after,
.grc-hero .hero-swiper .swiper-button-next:after{ font-size:16px; font-weight:800; }

/* Hide arrows on small screens */
@media (max-width:640px){
  .grc-hero .hero-swiper .swiper-button-prev,
  .grc-hero .hero-swiper .swiper-button-next{ display:none; }
}

/* Optional: align outer container edges with header box */
.grc-hero .swiper{ border-radius: 14px }

/* --- HEADER over hero (no pointer-events hack) --- */
.has-hero .grc-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  /* pointer-events: none;  <-- REMOVED to avoid blocking clicks */
}
.has-hero .grc-outer{ pointer-events:auto; margin-top:18px; }

/* Push content below if you use it */
.after-hero-spacer{ height: calc(74px + 18px + 18px); }

/* Full-bleed version (still scoped) */
.grc-hero{ margin:0; }
.grc-hero .hero-swiper{
  width: 100vw; max-width: none; margin:0; padding:0; border-radius:0;
  height: 100vh;
}
.grc-hero .grc-slide{
  background-image:
    linear-gradient( to bottom right,
      rgba(15,22,41,.62) 0%,
      rgba(15,22,41,.42) 45%,
      rgba(15,22,41,.62) 100% ),
    var(--bg);
  background-size: cover; background-position: center;
}
.grc-hero .grc-slide__inner{
  width: min(1200px, 92vw);
  margin: 0 auto;
  color: #fff;
  display: flex; flex-direction: column; gap: 16px;
}

/* Centered layout + overlay (scoped) */
.grc-hero--center .grc-slide__inner{
  position: relative; z-index: 1; min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 16px; padding: clamp(16px, 4vw, 48px);
}
.grc-hero--center .grc-slide::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,16,30,.65) 0%, rgba(10,16,30,0) 22%, rgba(10,16,30,0) 78%, rgba(10,16,30,.65) 100%),
    linear-gradient(180deg, rgba(10,16,30,0) 0%, rgba(10,16,30,.38) 46%, rgba(10,16,30,.72) 100%),
    radial-gradient(120% 90% at 50% 45%, rgba(10,16,30,.0) 0%, rgba(10,16,30,.28) 55%, rgba(10,16,30,.55) 100%);
}
.grc-hero--center .grc-hero__title{ color:#fff; text-shadow: 0 6px 28px rgba(0,0,0,.35); font-weight:800; }
.grc-hero--center .grc-hero__title span{ color: var(--brand-500); filter: drop-shadow(0 2px 8px rgba(0,0,0,.25)); }
.grc-hero--center .grc-hero__text{ color: rgba(255,255,255,.92); text-shadow: 0 4px 18px rgba(0,0,0,.35); max-width: 68ch; }
.grc-hero--center .grc-hero__actions{ justify-content: center; }

@media (max-width: 1100px){ .grc-hero .hero-swiper{ height: 86vh; } }
@media (max-width: 768px){  .grc-hero .hero-swiper{ height: 78vh; } }
@media (max-width: 560px){  .grc-hero .hero-swiper{ height: 72vh; } }

@media (max-width: 640px){
  .grc-hero--center .grc-slide::after{
    background:
      linear-gradient(90deg, rgba(10,16,30,.70) 0%, rgba(10,16,30,0) 24%, rgba(10,16,30,0) 76%, rgba(10,16,30,.70) 100%),
      linear-gradient(180deg, rgba(10,16,30,.10) 0%, rgba(10,16,30,.42) 40%, rgba(10,16,30,.78) 100%),
      radial-gradient(130% 95% at 50% 42%, rgba(10,16,30,.05) 0%, rgba(10,16,30,.34) 55%, rgba(10,16,30,.60) 100%);
  }
}


/* ============================
   GRC About — premium, responsive
   ============================ */
.grc-about{
  position: relative;
  padding-block: clamp(3rem, 6vw, 6rem);
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(28,116,183,.08), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(19,74,120,.08), transparent 60%),
    var(--bg);
  isolation: isolate;
}
.grc-about__wrap{ position: relative; }

/* Head */
.grc-about__head{
  max-width: var(--container-narrow);
  margin-inline: auto;
  text-align: center;
}
.grc-about__chip{
  display: inline-flex; align-items:center; gap:.5rem;
  background: rgba(28,116,183,.08);
  color: var(--brand-700);
  border: 1px solid rgba(28,116,183,.25);
  border-radius: var(--radius-pill);
  padding: .35rem .75rem;
  font-size: var(--fs-14);
  font-weight: 700;
}
.grc-about__chip i{
  width:8px; height:8px; border-radius:50%;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 0 0 6px rgba(28,116,183,.15);
}
@media(max-width:600px){
  .gg{
  font-size: 18px;
}
}
.grc-about__title{
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: clamp(22px, 4.2vw, 42px);
  line-height: 1.12;
  letter-spacing: .01em;
  margin: .85rem 0 .5rem;
  color: var(--text);
}
.grc-about__title span{
  background: linear-gradient(90deg, var(--brand-700), var(--brand-500));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.grc-about__subtitle{
  color: var(--text-weak);
  font-size: clamp(14px, 2vw, 18px);
  margin: 0 auto;
  max-width: 70ch;
}

/* Grid */
.grc-about__grid{
  margin-top: clamp(1.8rem, 4.2vw, 3rem);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.25rem, 3.6vw, 2.5rem);
}
@media (max-width: 1024px){
  .grc-about__grid{ grid-template-columns: 1fr; }
}

/* Story card */
.grc-about__card{
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
}
.grc-about__card--story{
  padding: clamp(1rem, 3.2vw, 1.75rem);
}
.grc-about__card--story h3{
  font-weight: 800; margin: 0 0 .5rem; color: var(--brand-800);
  letter-spacing: .005em;
}
.grc-about__card--story p{ color: var(--text-weak); margin: 0 0 1rem; }

/* Values list */
.grc-about__values{ display: grid; gap: .65rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.grc-about__values li{ display:flex; gap:.65rem; align-items:flex-start; }
.grc-about__values .dot{
  width:10px; height:10px; border-radius:50%; flex: none;
  background: var(--brand-400);
  box-shadow: 0 0 0 6px rgba(28,116,183,.14);
  margin-top: .35rem;
}
.grc-about__values strong{ display:block; color: var(--text); }
.grc-about__values small{ display:block; color: var(--text-muted); }

/* Actions */
.grc-about__actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.5rem; }

/* Stats ribbon */
.grc-about__stats{
  margin-top: 12px;
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  background: linear-gradient(180deg, rgba(28,116,183,.08), transparent);
  border: 1px solid rgba(28,116,183,.15);
  border-radius: var(--radius-lg);
  padding: .75rem .9rem;
}
.grc-about__stats .stat{
  text-align: center;
}
.grc-about__stats .num{
  display:block;
  font-weight: 800;
  font-size: clamp(20px, 4vw, 28px);
  color: var(--brand-700);
}
.grc-about__stats .label{
  color: var(--text-muted);
  font-size: var(--fs-14);
}
.grc-about__stats .divider{
  width:1px; height: 30px;
  background: linear-gradient(180deg, transparent, rgba(28,116,183,.45), transparent);
  border-radius: 1px;
}
@media (max-width:640px){
  .grc-about__stats{ grid-template-columns: 1fr; gap:.65rem; }
  .grc-about__stats .divider{ display:none; }
}

/* Media collage */
.grc-about__media{
  position: relative;
  display: grid;
  gap: .9rem;
  align-content: start;
}
.grc-about__figure{
  position: relative; margin: 0;
  border-radius: var(--radius-lg);
  overflow:hidden;
  outline: 1px solid rgba(28,116,183,.16);
  box-shadow: var(--shadow-2);
  background:
    radial-gradient(60% 80% at 30% 20%, rgba(28,116,183,.22), transparent 60%),
    rgba(0,0,0,.1);
}
.grc-about__figure img{
  display:block; width:100%; height:auto; object-fit:cover;
  transform: scale(1.02);
}

/* Floating stamp */
.grc-about__stamp{
  position: absolute; right: -8px; top: -10px; transform: translateY(-30%);
  display:flex; align-items:center; gap:.5rem; pointer-events:none;
}
.grc-about__stamp .ring{
  width: 64px; height: 64px; border-radius: 999px; flex:none;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0));
  box-shadow: inset 0 0 18px rgba(28,116,183,.35), 0 10px 30px rgba(0,0,0,.15);
  border: 1px solid rgba(28,116,183,.25);
  filter: saturate(120%);
}
.grc-about__stamp .badge{
  display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
  background: linear-gradient(90deg, var(--brand-700), var(--brand-500));
  color:#fff; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.22);
  padding: .35rem .6rem;
  box-shadow: 0 8px 22px rgba(28,116,183,.28);
  font-weight: 800; font-size: var(--fs-12);
}
.grc-about__stamp svg{ width:16px; height:16px; }

@media (max-width:1024px){
  .grc-about__stamp{ position: static; transform:none; margin-top:.25rem; }
}

/* Sticky note */
.grc-about__note{
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--radius-lg);
  padding: .9rem 1rem;
  color: var(--text);
  box-shadow: var(--shadow-1);
}
.grc-about__note strong{ display:block; margin-bottom:.2rem; }
.grc-about__note span{ color: var(--text-muted); font-size: var(--fs-14); }

/* Mini grid images */
.grc-about__grid-mini{
  display: grid; grid-template-columns: 1fr 1fr; gap:.9rem;
}
.grc-about__grid-mini img{
  width:100%; height: 160px; object-fit: cover;
  border-radius: var(--radius-lg);
  outline: 1px solid rgba(28,116,183,.16);
}

/* ===== Micro-interactions (premium, subtle) ===== */
@keyframes grcFadeUp {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.grc-about__card,
.grc-about__figure,
.grc-about__note,
.grc-about__grid-mini img,
.grc-about__stats{
  animation: grcFadeUp .6s var(--ease-out) both;
}
.grc-about__figure{ animation-delay: .05s; }
.grc-about__note{ animation-delay: .1s; }
.grc-about__grid-mini img:nth-child(1){ animation-delay: .12s; }
.grc-about__grid-mini img:nth-child(2){ animation-delay: .18s; }
.grc-about__stats{ animation-delay: .08s; }

@media (prefers-reduced-motion: reduce){
  .grc-about__card,
  .grc-about__figure,
  .grc-about__note,
  .grc-about__grid-mini img,
  .grc-about__stats{ animation: none !important; }
}

/* ===========================
   Common Buttons (site-wide)
   =========================== */

/* Base */
.btn, .grc-btn {
  --btn-h-pad: 18px;
  --btn-v-pad: 12px;
  --btn-radius: 12px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: var(--btn-v-pad) var(--btn-h-pad);
  border-radius: var(--btn-radius);
  font: 800 1rem/1 var(--font-mono, system-ui);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .28s cubic-bezier(.16,1,.3,1),
    box-shadow .28s cubic-bezier(.16,1,.3,1),
    background .28s cubic-bezier(.16,1,.3,1),
    border-color .28s cubic-bezier(.16,1,.3,1),
    color .28s cubic-bezier(.16,1,.3,1);
}

/* Primary (brand gradient, premium, animated) */
.btn--primary, .grc-btn--primary {
  color: #fff;
  border: 1px solid rgba(28,116,183,.38);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)),
    linear-gradient(90deg, var(--brand-700,#134a78), var(--brand-500,#1c74b7));
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  box-shadow:
    0 14px 28px rgba(28,116,183,.28),
    inset 0 0 0 0 rgba(255,255,255,.18);
  overflow: hidden;
}

/* Sheen sweep */
.btn--primary::before, .grc-btn--primary::before{
  content:"";
  position:absolute; inset:-1px;
  background: linear-gradient(120deg,
              transparent 0%,
              rgba(255,255,255,.36) 45%,
              rgba(255,255,255,.16) 55%,
              transparent 100%);
  transform: translateX(-120%);
  transition: transform .7s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}

/* Ambient ring */
.btn--primary::after, .grc-btn--primary::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(28,116,183,.22);
  opacity: 0;
  transition: opacity .28s cubic-bezier(.16,1,.3,1),
              box-shadow .28s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}

/* Interactions */
.btn--primary:hover, .grc-btn--primary:hover{
  transform: translateY(-2px);
  border-color: rgba(28,116,183,.6);
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(90deg, var(--brand-700,#134a78), var(--brand-500,#1c74b7));
  box-shadow:
    0 18px 42px rgba(28,116,183,.36),
    inset 0 0 10px rgba(255,255,255,.22);
}
.btn--primary:hover::before, .grc-btn--primary:hover::before{ transform: translateX(120%); }
.btn--primary:hover::after, .grc-btn--primary:focus-visible::after{ opacity: 1; box-shadow: 0 0 0 8px rgba(28,116,183,.18); }

.btn--primary:active, .grc-btn--primary:active{
  transform: translateY(0) scale(.98);
  box-shadow:
    0 10px 24px rgba(19,74,120,.38),
    inset 0 0 14px rgba(0,0,0,.18);
}
.btn--primary:focus-visible, .grc-btn--primary:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 4px rgba(28,116,183,.22),
    0 18px 42px rgba(28,116,183,.36),
    inset 0 0 10px rgba(255,255,255,.22);
}

/* Sizes */
.btn--sm   { --btn-h-pad: 14px; --btn-v-pad: 9px;  font-size: .92rem; border-radius: 10px; }
.btn--lg   { --btn-h-pad: 22px; --btn-v-pad: 14px; font-size: 1.065rem; border-radius: 14px; }
.btn--block{ display: inline-flex; width: 100%; }

/* With icon helpers */
.btn__icon { display:inline-grid; place-items:center; width:1.1em; height:1.1em; }
.btn > svg, .btn > i, .grc-btn > svg, .grc-btn > i{ transition: transform .28s cubic-bezier(.16,1,.3,1); }
.btn:hover > svg, .btn:hover > i, .grc-btn:hover > svg, .grc-btn:hover > i{ transform: translateX(2px); }

/* Disabled & loading */
.btn[disabled], .btn.is-disabled,
.grc-btn[disabled], .grc-btn.is-disabled{
  opacity: .6; cursor: not-allowed; transform: none; box-shadow: none;
}
.btn.is-loading, .grc-btn.is-loading{ pointer-events: none; }
.btn.is-loading::after, .grc-btn.is-loading::after{
  /* replaces ambient ring while loading */
  content:""; position:absolute; inset:auto auto auto 12px;
  width: 16px; height:16px; border-radius:50%;
  border: 2px solid rgba(255,255,255,.5); border-right-color: transparent;
  animation: grcSpin .8s linear infinite;
}
@keyframes grcSpin{ to{ transform: rotate(360deg); } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn, .btn::before, .btn::after,
  .grc-btn, .grc-btn::before, .grc-btn::after{
    transition: none !important;
  }
}


/* ============ GRC SERVICES — Spotlight + Mosaic (premium) ============ */
.grc-svcs{
  position: relative;
  padding-block: clamp(3rem, 6vw, 6rem);
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(28,116,183,.08), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(41,45,106,.08), transparent 60%),
    var(--neutral-0);
  overflow: hidden;
  isolation: isolate;
}
.grc-svcs__wrap{ position: relative; }

/* header */
.grc-svcs__head{ text-align:center; max-width: var(--container-narrow); margin: 0 auto clamp(1.6rem,4vw,2.4rem); }
.grc-svcs__chip{
  display:inline-flex; align-items:center; gap:.5rem;
  background: rgba(28,116,183,.08);
  border:1px solid rgba(28,116,183,.22);
  color: var(--brand-700);
  padding:.35rem .85rem; border-radius:999px; font-weight:800; font-size: var(--fs-14);
}
.grc-svcs__chip i{ width:8px; height:8px; border-radius:50%;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 0 0 6px rgba(28,116,183,.16);
}
.grc-svcs__title{
  margin:.85rem 0 .4rem; font-family: var(--font-mono); font-weight:800;
  font-size: clamp(28px,4.2vw,42px); letter-spacing:.01em; color: var(--brand-900);
}
.grc-svcs__title span{ background: var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color: transparent; }
.grc-svcs__sub{ color: var(--text-weak); max-width: 70ch; margin: 0 auto; }

/* stage layout */
.grc-svcs__stage{ display:grid; grid-template-columns: .97fr 1.03fr; gap: clamp(1rem, 3vw, 2rem); align-items: start; }
@media (max-width: 1024px){ .grc-svcs__stage{ grid-template-columns: 1fr; } }

/* spotlight */
.grc-svcs__spotlight{
  position: sticky; top: calc(var(--nav-height,72px) + 20px);
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
              linear-gradient(120deg, rgba(28,116,183,.10), rgba(19,74,120,.06));
  border:1px solid rgba(28,116,183,.22);
  border-radius: 20px;
  padding: clamp(1rem,3vw,1.6rem);
  box-shadow: 0 16px 48px rgba(16,24,40,.10);
  overflow:hidden;
}
.grc-svcs__spotlight-inner{ position: relative; z-index: 2; }
.grc-svcs__spotlight-icon{
  width:64px; height:64px; border-radius:16px;
  display:grid; place-items:center; color:#fff; font-size:1.35rem;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 12px 28px rgba(28,116,183,.28); margin-bottom:.8rem;
}
.grc-svcs__spotlight-title{ margin:.2rem 0 .2rem; font-weight:800; color: var(--brand-800); }
.grc-svcs__spotlight-desc{ color: var(--text-weak); margin: 0 0 .8rem; }
.grc-svcs__spotlight-cta{ display:flex; gap:.6rem; flex-wrap: wrap; }

/* decorative rings */
.grc-svcs__ring{
  position:absolute; border-radius:999px; pointer-events:none; z-index:1;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0));
  border:1px solid rgba(28,116,183,.22);
  box-shadow: inset 0 0 22px rgba(28,116,183,.25), 0 12px 36px rgba(0,0,0,.12);
  opacity:.75; filter: saturate(115%);
}
.grc-svcs__ring.r1{ width:120px; height:120px; right:-24px; top:-24px; }
.grc-svcs__ring.r2{ width:160px; height:160px; left:-28px; bottom:-28px; }

/* mosaic */
.grc-svcs__grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(.8rem, 2vw, 1.1rem);
}
.grc-svcs__tile{
  --bd: rgba(15,23,42,.08);
  position: relative; z-index:0;
  display:flex; align-items:center; gap:.65rem;
  width:100%; padding:14px 14px;
  background:#fff; color: var(--brand-800);
  border:1px solid var(--bd);
  border-radius: 14px; cursor: pointer; text-align:left;
  box-shadow: 0 8px 24px rgba(16,24,40,.06);
  transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s, border-color .28s;
}
.grc-svcs__tile:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(28,116,183,.22), 0 12px 32px rgba(28,116,183,.18); }
.grc-svcs__tile.is-active{ border-color: rgba(28,116,183,.55); box-shadow: 0 16px 36px rgba(28,116,183,.20); }
.grc-svcs__tile:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px rgba(16,24,40,.12); }

.grc-svcs__tile::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius: inherit;
  background: linear-gradient(90deg, rgba(28,116,183,.10), rgba(19,74,120,.12));
  opacity:0; transition: opacity .28s;
}
.grc-svcs__tile:hover::after, .grc-svcs__tile.is-active::after{ opacity: 1; }

.grc-svcs__tile-icon{
  width:42px; height:42px; border-radius:12px; flex:none; display:grid; place-items:center; color:#fff;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 8px 22px rgba(28,116,183,.25);
}
.grc-svcs__tile-text{ font-weight:800; }

/* micro-entrance */
@keyframes grcFadeUp { from{ opacity:0; transform: translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }
.grc-svcs__spotlight, .grc-svcs__tile{ animation: grcFadeUp .6s var(--ease-out, cubic-bezier(.16,1,.3,1)) both; }
.grc-svcs__tile:nth-child(3n+1){ animation-delay: .03s; }
.grc-svcs__tile:nth-child(3n+2){ animation-delay: .06s; }
.grc-svcs__tile:nth-child(3n+3){ animation-delay: .09s; }

@media (prefers-reduced-motion: reduce){
  .grc-svcs__spotlight, .grc-svcs__tile{ animation: none !important; }
  .grc-svcs__tile, .grc-svcs__spotlight{ transition: none !important; }
}

/* dark-mode harmony (optional, uses your dark tokens) */
@media (prefers-color-scheme: dark){
  .grc-svcs{ background: var(--bg); }
  .grc-svcs__spotlight{
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
                linear-gradient(120deg, rgba(28,116,183,.10), rgba(19,74,120,.08));
    border-color: rgba(255,255,255,.08);
  }
  .grc-svcs__tile{ background: var(--card-bg); border-color: rgba(255,255,255,.08); }
  .grc-svcs__tile::after{ background: linear-gradient(90deg, rgba(28,116,183,.10), rgba(19,74,120,.18)); }
}


/* ===========================
   WHY CHOOSE US (v2 – scoped)
   =========================== */

.grc-why2 {
  position: relative;
  padding-block: clamp(3rem, 6vw, 6rem);
  background:
    radial-gradient(1000px 600px at -10% -10%, rgba(28,116,183,.10), transparent 60%),
    radial-gradient(900px 600px at 110% 120%, rgba(41,45,106,.10), transparent 60%),
    var(--bg, #0b1020);
  overflow: hidden;
  isolation: isolate;
}

/* header */
.grc-why2__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.grc-why2__chip{
  --chip-b: rgba(28,116,183,.22);
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .7rem; border-radius:999px; font-weight:800;
  color: var(--brand-600, #185f97);
  background: rgba(28,116,183,.08); border:1px solid var(--chip-b);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.grc-why2__chip i{
  width:8px; height:8px; border-radius:50%;
  background: linear-gradient(135deg, var(--brand-500,#1c74b7), var(--brand-700,#134a78));
  box-shadow: 0 0 0 6px rgba(28,116,183,.15);
}
.grc-why2__title{
  margin:.75rem 0 .5rem;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--text, #e8edf7);
  letter-spacing:.005em;
}
.grc-why2__title span{
  background: linear-gradient(90deg, var(--brand-500), var(--brand-700));
  -webkit-background-clip: text; color: transparent;
}
.grc-why2__sub{
  max-width: 70ch; margin: 0 auto; color: var(--text-weak,#c7d1e2);
}

/* layout */
.grc-why2__wrap{
  display:grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: minmax(0,1fr) minmax(280px, 420px);
  align-items: start;
}
@media (max-width: 992px){
  .grc-why2__wrap{ grid-template-columns: 1fr; }
}

/* list */
.grc-why2__list{
  display:grid; gap: clamp(1rem, 2vw, 1.25rem);
  grid-template-columns: repeat(2, minmax(0,1fr));
  list-style: none; margin:0; padding:0;
}
@media (max-width: 680px){
  .grc-why2__list{ grid-template-columns: 1fr; }
}

/* card */
.wc{
  position: relative;
  display:flex; gap:12px; align-items:flex-start;
  padding:16px 16px 16px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
  overflow:hidden;
  transition: transform .35s cubic-bezier(.16,1,.3,1),
              box-shadow .35s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
.wc::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, rgba(28,116,183,.0), rgba(28,116,183,.35), rgba(41,45,106,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:0; transition:opacity .35s;
  pointer-events:none;
}
.wc:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(28,116,183,.28); }
.wc:hover::before{ opacity:1; }

.wc__icon{
  flex: none; width:50px; height:50px; border-radius:14px;
  display:grid; place-items:center; color:#fff; font-size:1.1rem;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 12px 26px rgba(28,116,183,.28);
}
.wc__txt h3{ margin:0 0 6px; font-weight:800; font-size:1.05rem; }
.wc__txt p{ margin:0; color: rgba(255,255,255,.9); }

/* side panel */
.grc-why2__panel{ position: relative; }
.panel__glass{
  position:relative; z-index:1;
  padding: 20px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  color:#fff;
  box-shadow: 0 16px 40px rgba(0,0,0,.24);
}
.grc-why2__panel::after{
  /* decorative gradient ring */
  content:""; position:absolute; inset:-2px; z-index:0; border-radius:24px;
  background: conic-gradient(from 140deg,
    rgba(28,116,183,.0), rgba(28,116,183,.3) 20%, rgba(41,45,106,.35) 55%, rgba(225,29,46,.25) 80%, rgba(28,116,183,.0));
  filter: blur(24px); opacity:.6; pointer-events:none;
}
.panel__glass h3{ margin:0 0 6px; font-weight:800; font-size:1.15rem }
.panel__glass p{ margin:0 0 14px; color: rgba(255,255,255,.9); }

.panel__stats{
  display:grid; grid-template-columns: repeat(3,1fr);
  gap:10px; margin-bottom:12px;
}
@media (max-width:480px){ .panel__stats{ grid-template-columns: 1fr 1fr; } }

.stat{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px; padding:12px; text-align:center;
}
.stat span{
  display:block; font-weight:800; font-size: clamp(18px, 3.4vw, 22px);
  color:#fff; line-height:1.1;
}
.stat small{ color: rgba(255,255,255,.82); }

.panel__cta{ display:flex; gap:10px; flex-wrap:wrap; }


/* ==========================
   SERVICES – Creative board
   Scoped: .grc-sv3
   ========================== */

.grc-sv3{
  position:relative;
  padding-block: clamp(3rem, 6vw, 6rem);
  background:
    radial-gradient(1200px 700px at 110% -10%, rgba(28,116,183,.10), transparent 60%),
    radial-gradient(900px 600px at -10% 120%, rgba(41,45,106,.12), transparent 60%),
    var(--bg, #0b1020);
  overflow:hidden;
  isolation:isolate;
}

/* Head */
.grc-sv3__head{ text-align:center; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.grc-sv3__chip{
  --b: rgba(28,116,183,.22);
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .7rem; border-radius:999px; font-weight:800;
  color: var(--brand-600, #185f97);
  background: rgba(28,116,183,.08); border:1px solid var(--b);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.grc-sv3__chip i{ width:8px; height:8px; border-radius:50%; background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); box-shadow:0 0 0 6px rgba(28,116,183,.15); }
.grc-sv3__title{
  margin:.75rem 0 .5rem;
  font-family: var(--font-mono);
  font-weight:800;
  color: var(--text,#e8edf7);
  font-size: clamp(28px, 4vw, 40px);
}
.grc-sv3__title span{
  background: linear-gradient(90deg, var(--brand-500), var(--brand-700));
  -webkit-background-clip: text; color: transparent;
}
.grc-sv3__sub{ max-width:70ch; margin:0 auto; color: var(--text-weak,#c7d1e2); }

/* Board grid */
.grc-sv3__board{
  --tileMin: 250px;
  margin-top: clamp(1.25rem, 3vw, 2rem);
  display:grid; gap: clamp(12px, 2vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(var(--tileMin), 1fr));
}

/* Card */
.sv3-card{
  position:relative;
  display:flex; flex-direction:column; gap:8px;
  padding:18px 16px 14px;
  border-radius:18px;
  color:#fff; text-decoration:none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  overflow:hidden;
  transition: transform .35s cubic-bezier(.16,1,.3,1),
              box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.sv3-card::before{
  /* animated gradient edge */
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg,
    rgba(28,116,183,.0), rgba(28,116,183,.35) 35%, rgba(41,45,106,.35) 70%, rgba(225,29,46,.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none; opacity:0; transition:opacity .35s, filter .35s;
  filter: blur(0px);
}
.sv3-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 22px 50px rgba(28,116,183,.28);
}
.sv3-card:hover::before{ opacity:1; filter: blur(0.2px); }

.sv3-card__ribbon{
  position:absolute; top:12px; right:12px;
  font-size:.7rem; letter-spacing:.03em; font-weight:800;
  padding:.25rem .5rem; border-radius:999px; color:#fff;
  background: linear-gradient(90deg, var(--brand-700), var(--brand-500));
  box-shadow: 0 8px 18px rgba(28,116,183,.35);
}
.sv3-card__icon{
  width:50px; height:50px; border-radius:14px;
  display:grid; place-items:center; color:#fff;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 12px 26px rgba(28,116,183,.28);
}
.sv3-card__icon i{ font-size:1.15rem; line-height:1 }

.sv3-card h3{ margin:8px 0 2px; font-size:1.05rem; font-weight:800; }
.sv3-card p{ margin:0; color: rgba(255,255,255,.9); min-height:40px; }

.sv3-card__chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px }
.sv3-card__chips span{
  font-size:.72rem; color:#b9cdf3;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.06);
  padding:.25rem .5rem; border-radius:999px;
}

/* CTA row */
.grc-sv3__cta{
  margin-top: clamp(1.25rem, 3.5vw, 2rem);
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}


/* =======================
   CONTACT — Atelier Split (ca-*)
   ======================= */
.ca-contact{
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 7rem);
  background:
    radial-gradient(900px 600px at 120% -20%, rgba(28,116,183,.16), transparent 60%),
    radial-gradient(800px 700px at -20% 120%, rgba(41,45,106,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)),
    var(--bg, #0b1020);
}

/* subtle diagonal accent band */
.ca-contact::before{
  content:"";
  position:absolute; inset:-20% -10% auto -10%;
  height: 40%;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  transform: skewY(-7deg);
  pointer-events:none;
}

/* layout */
.ca-wrap{
  display:grid;
  grid-template-columns: 1.1fr 1.2fr;
  align-items: stretch;
  gap: clamp(22px, 3vw, 36px);
}

/* aside */
.ca-aside{
  position:relative;
  border-radius: 20px;
  padding: clamp(18px, 2.4vw, 26px);
  background: rgba(16,24,40,.45);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 16px 38px rgba(0,0,0,.28);
}
.ca-aside::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  mask: linear-gradient(#000,transparent 35%);
  pointer-events: none;
}

.ca-kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size: .85rem; color:#cfe3ff;
  padding:6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.ca-kicker i{ color: var(--brand-400,#4b94d8); }

.ca-title{
  margin: 12px 0 6px;
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.08;
  color: #fff;
  letter-spacing: .01em;
  text-wrap: balance;
}
.ca-title span{ color: var(--brand-300,#7fb7e8); }

.ca-sub{
  color: rgba(225,235,255,.78);
  max-width: 60ch;
}

.ca-highlights{
  margin: 18px 0 14px; padding:0; list-style:none;
  display:grid; gap: 10px;
}
.ca-highlights li{
  display:flex; align-items:center; gap:.7rem;
  color:#eaf2ff;
}
.ca-highlights i{
  width:28px; height:28px; display:grid; place-items:center;
  border-radius: 10px; font-size:.9rem; color:#fff;
  background: linear-gradient(135deg, var(--brand-500,#1c74b7), var(--brand-700,#134a78));
  box-shadow: 0 10px 22px rgba(28,116,183,.25);
}

.ca-quick{
  display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 14px;
}
.ca-chip{
  display:inline-flex; align-items:center; gap:.55rem;
  color:#e8f0ff; text-decoration:none;
  padding:10px 12px; border-radius: 12px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  transition:.18s cubic-bezier(.16,1,.3,1);
}
.ca-chip:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); }
.ca-chip i{ color:#fff; }

.ca-stats{
  display:flex; gap:14px; flex-wrap:wrap; margin-top: 2px;
}
.ca-stat{
  display:flex; align-items:center; gap:.65rem;
  padding:10px 12px; border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color:#dae6ff;
}
.ca-stat i{
  width:28px; height:28px; display:grid; place-items:center;
  border-radius: 9px; color:#fff;
  background: linear-gradient(135deg, var(--brand-500,#1c74b7), var(--brand-700,#134a78));
}
.ca-stat b{ display:block; color:#fff; font-size:1rem; }
.ca-stat small{ display:block; opacity:.75; margin-top:-2px; }

/* form card */
.ca-card{
  position:relative;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 22px 54px rgba(0,0,0,.28);
  overflow:hidden;
}

/* window-like header */
.ca-card__head{
  display:flex; align-items:center; gap:8px;
  padding: 14px 16px; color:#cfe1ff;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}
.ca-card__head .ca-dot{
  width:10px; height:10px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #fff, #fce 40%, #f39);
  opacity:.7;
}
.ca-card__head .ca-dot:nth-child(2){ background: radial-gradient(circle at 30% 30%, #fff, #efe 40%, #2ecc71); }
.ca-card__head .ca-dot:nth-child(3){ background: radial-gradient(circle at 30% 30%, #fff, #eef 40%, #1c74b7); }

.ca-form{ padding: clamp(16px, 2.6vw, 24px); }
.ca-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.ca-col-2{ grid-column: span 2; }

/* fields */
.ca-field{
  position:relative; display:grid; align-items:center;
  grid-template-columns: 40px 1fr; gap: 10px;
  min-height: 60px; border-radius: 14px;
  padding: 10px 12px 10px 12px;
  background: rgba(17,24,39,.55);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  transition: box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.ca-field i{
  width:40px; height:40px; display:grid; place-items:center;
  color:#fff; opacity:.95;
}
.ca-field input, .ca-field textarea{
  width:100%; border:0; outline:0; background:transparent;
  color:#f8fdff; font: inherit; padding: 18px 10px 8px 0;
}
.ca-field textarea{ resize: vertical; min-height: 60px; }

/* floating label */
.ca-label{
  position:absolute; left: 52px; top: 50%;
  transform: translateY(-50%);
  font-size:.9rem; color: rgba(230,240,255,.68);
  pointer-events:none; transition: .18s ease;
}
.ca-field input:not(:placeholder-shown) + .ca-label,
.ca-field textarea:not(:placeholder-shown) + .ca-label{
  top: 8px; transform: none; font-size: .72rem; color: #b9c9ee;
}
.ca-field:has(input:focus),
.ca-field:has(textarea:focus){
  background: rgba(19,26,46,.62);
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 0 3px rgba(28,116,183,.20),
    0 0 0 6px rgba(28,116,183,.08);
}
.ca-field:has(input:focus) .ca-label,
.ca-field:has(textarea:focus) .ca-label{
  top: 8px; transform:none; font-size:.72rem; color: #cbe0ff;
}

/* submit – uses your grc button if present; otherwise styles it */
.grc-btn--primary.ca-submit{
  --g1: var(--brand-500,#1c74b7);
  --g2: var(--brand-700,#134a78);
  margin-top: 10px;
  padding: 14px 20px; border-radius: 14px; border:0;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color:#fff; font-weight:800; display:inline-flex; align-items:center; gap:.6rem;
  box-shadow: 0 16px 32px rgba(28,116,183,.30), 0 1px 0 rgba(255,255,255,.08) inset;
  transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s;
}
.grc-btn--primary.ca-submit:hover{ transform: translateY(-2px); box-shadow: 0 22px 40px rgba(28,116,183,.36), 0 1px 0 rgba(255,255,255,.10) inset; }
.grc-btn--primary.ca-submit i{ font-size: .95rem; }

/* responsive */
@media (max-width: 980px){
  .ca-wrap{ grid-template-columns: 1fr; }
  .ca-col-2{ grid-column: span 2; }
}
@media (max-width: 560px){
  .ca-grid{ grid-template-columns: 1fr; }
  .ca-col-2{ grid-column: auto; }
  .grc-btn--primary.ca-submit{ width: 100%; justify-content: center; }
}
/* ===== CONTACT: no focus border/glow ===== */
.ca-field input,
.ca-field textarea{
  outline: none !important;
  box-shadow: none !important;
}

/* Remove the blue multi-ring & border change on focus */
.ca-field:has(input:focus),
.ca-field:has(textarea:focus){
  background: rgba(17,24,39,.55);   /* keep same as idle */
  border-color: rgba(255,255,255,.10); /* unchanged */
  box-shadow: none !important;      /* kill the glow */
}

/* Keep just the label lift (no visual border changes) */
.ca-field input:not(:placeholder-shown) + .ca-label,
.ca-field textarea:not(:placeholder-shown) + .ca-label,
.ca-field:has(input:focus) .ca-label,
.ca-field:has(textarea:focus) .ca-label{
  top: 8px;
  transform: none;
  font-size: .72rem;
  color: #cfe1ff; /* subtle, not bright */
}

/* Optional: also neutralize WebKit’s autofill outline/background */
.ca-field input:-webkit-autofill,
.ca-field textarea:-webkit-autofill{
  -webkit-text-fill-color: #f8fdff;
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: none !important;
  transition: background-color 99999s ease-in-out 0s;
}

/* ===============================
   Common Section Heading (grc-section-head)
   =============================== */
.grc-section-head{
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(2rem, 4vw, 3.5rem);
  color: #fff;
  position: relative;
  z-index: 1;
}

/* Small animated accent line behind heading */
.grc-section-head::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 220px; height: 220px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(28,116,183,0.18), transparent 70%);
  filter: blur(60px);
  opacity: 0.6;
  z-index: -1;
}

/* Eyebrow text */
.grc-eyebrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--brand-400,#4b94d8);
  text-transform: uppercase;
  letter-spacing: .08em;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 6px 14px;
  box-shadow: 0 6px 16px rgba(28,116,183,.15);
}
.grc-eyebrow i{
  color: var(--brand-400,#4b94d8);
}

/* Heading */
.grc-heading{
  margin: 16px 0 8px;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.08;
  color: #fff;
}
.grc-heading span{
  color: var(--brand-300,#7fb7e8);
  background: linear-gradient(90deg, var(--brand-500,#1c74b7), var(--brand-300,#7fb7e8));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Description */
.grc-lead{
  font-size: clamp(14px, 2vw, 18px);
  color: rgba(231,239,255,.78);
  line-height: 1.6;
  margin-top: 6px;
}

/* Optional subtle underline animation */
.grc-heading::after{
  content: "";
  display: block;
  margin: 10px auto 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-500,#1c74b7), var(--brand-700,#134a78));
  border-radius: 999px;
  animation: growline 1.2s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes growline{
  to{ width: 80px; }
}

/* ===== Premium Process Section (uses your theme tokens when present) ===== */
.grc-process { background:#0b1020; padding:clamp(60px,4vw,120px) 0; position:relative; overflow:hidden; }
.grc-process .container{ max-width: 1120px; margin: 0 auto; padding-inline: 16px; }

.prc-head{ text-align:center; color:#fff; max-width:800px; margin:0 auto 3rem }
.prc-eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; font-weight:700;
  background:rgba(28,116,183,.10); color:var(--brand-300,#69a7de); border:1px solid rgba(28,116,183,.25) }
.prc-title{ font-size:clamp(1.8rem,4.2vw,2.6rem); font-weight:800; margin:14px 0 }
.prc-title span{ color:var(--brand-400,#58a1d9) }
.prc-lead{ color:#cbd5e1; line-height:1.6 }

/* track + vertical rail */
.prc-track{ position:relative; display:flex; flex-direction:column; align-items:center; gap:50px }
.prc-rail{ position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:3px; border-radius:3px;
  background:linear-gradient(180deg, rgba(28,116,183,.35), rgba(19,74,120,.35)) }
.prc-rail__progress{ position:absolute; left:0; top:0; width:100%; height:0%;
  background:linear-gradient(180deg, var(--brand-500,#1c74b7), var(--brand-700,#134a78)); border-radius:3px; transition:height .25s ease }

/* steps */
.prc-step{ width:100%; max-width:980px; display:flex; justify-content:flex-start; position:relative; opacity:.96;
  transform:translateY(8px); transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .35s ease }
.prc-step.right{ justify-content:flex-end }
.prc-step.is-visible{ transform:translateY(-2px); opacity:1 }

/* card */
.prc-card{ width:45%; background:#0f1629; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:24px;
  box-shadow:0 8px 32px rgba(0,0,0,.35); transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease }
.prc-card:hover{ transform:translateY(-6px); border-color:rgba(28,116,183,.40);
  box-shadow:0 18px 48px rgba(20,30,55,.5), inset 0 0 0 1px rgba(28,116,183,.08) }

/* icon + text */
.prc-icon{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; color:#b9cdf3;
  background:linear-gradient(135deg, rgba(28,116,183,.22), rgba(19,74,120,.18)); margin-bottom:12px;
  border:1px solid rgba(28,116,183,.28) }
.prc-card h3{ color:#fff; font-weight:800; margin:2px 0 8px }
.prc-card p{ color:#c7d1e2; font-size:.95rem; line-height:1.6; margin-bottom:14px }

/* chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:.85rem;
  color:#b9cdf3; border:1px solid rgba(28,116,183,.25); background:rgba(28,116,183,.10) }

/* CTA */
.prc-cta{ text-align:center; margin-top:60px }

/* ===== RESPONSIVE ===== */
@media (max-width: 1140px){
  .prc-card{ width:50% }
}
@media (max-width: 1024px){
  .prc-card{ width:54% }
}
@media (max-width: 900px){
  /* single column; rail moves to the left to prevent overflow */
  .prc-rail{ left:22px; transform:none }
  .prc-step{ justify-content:flex-start !important; padding-left:58px } /* 22 rail + 36 gutter */
  .prc-card{ width:calc(100% - 58px - 10px) } /* avoids horizontal scrollbar */
}
@media (max-width: 560px){
  .prc-card{ padding:18px; border-radius:14px }
  .chips .chip{ font-size:.8rem; padding:5px 9px }
}

/* ==== Mobile width + square-ish tile look ==== */
@media (max-width: 900px){
  .prc-rail{
    left: 20px;                 /* keep rail visible on the far left */
    transform: none;
  }
  .prc-step{
    padding-left: 60px;         /* space for the rail + a comfy gutter */
    justify-content: flex-start !important;
  }
  .prc-card{
    width: 100% !important;     /* use the full remaining line width */
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 18px;         /* rounded-square vibe */
  }
}

@media (max-width: 560px){
  .prc-card{
    padding: 20px;              /* keep content breathing */
    border-radius: 20px;
    /* Optional: if you want an even squarer feel on tiny screens,
       uncomment the next two lines. (Text will wrap and grow height.)
    */
    /* min-height: 280px; */
    /* display: flex; flex-direction: column; */
  }
}

.grc-footer {
  --grad: linear-gradient(90deg, var(--brand-500,#1c74b7), var(--brand-700,#134a78));
  color: #dfe8f5;
  background: linear-gradient(180deg, #0b1020, #0f1629);
  border-top: 1px solid rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
}

/* Inner layout */
.grc-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 60px) 16px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: clamp(20px, 3vw, 36px);
}

@media (max-width: 1100px) {
  .grc-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grc-footer__inner { grid-template-columns: 1fr; text-align: left; }
}

/* Logo & brand */
.f-logo img { height: 99px; width: auto; display: block; }
.f-copy { color: #bcd2fb; margin: 12px 0 16px; line-height: 1.7; }

.f-social {
  display: flex; gap: 10px;
}
.f-social a {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  color: #cfe3ff;
  transition: transform .18s, background .18s;
  text-decoration: none;
}
.f-social a:hover {
  transform: translateY(-2px);
  background: var(--grad);
  color: #fff;
}

/* Section titles */
.f-title {
  margin: 6px 0 12px;
  font-size: 14px;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 700;
  color: #ffffff;
}

/* Link lists */
.f-links,
.f-contacts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.f-links a {
  color: #cfe3ff;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}
.f-links a:hover {
  color: #fff;
  transform: translateX(2px);
}

/* Contact details */
.f-contacts li {
  color: #cfe3ff;
  line-height: 1.6;
}
.f-contacts i {
  color: var(--brand-400,#4b94d8);
  margin-right: 8px;
}
.f-contacts a {
  color: #cfe3ff;
  text-decoration: none;
}
.f-contacts a:hover { color: #fff; }

/* Hours */
.f-hours {
  margin-top: 10px;
  color: #bcd2fb;
  font-size: 14px;
}
.f-hours span {
  color: #9fb1cc;
  margin-right: 6px;
}

/* CTA button */
.f-cta {
  margin-top: 16px;
  display: inline-block;
  background: var(--grad);
  color: #fff;
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(28,116,183,.25);
  transition: transform .2s ease, filter .2s ease;
}
.f-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

/* Bottom bar */
.f-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: #a5b6d2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.f-bottom a {
  color: var(--brand-400,#4b94d8);
  text-decoration: none;
  font-weight: 600;
}
.f-bottom a:hover { color: #fff; }

/* container */
.grc-fab{
  position: fixed;
  right: clamp(14px, 2vw, 24px);
  bottom: clamp(14px, 2vw, 24px);
  display: flex;
  flex-direction: column-reverse; /* WA below, Call above by default */
  gap: var(--grc-fab-gap);
  z-index: var(--grc-fab-z);
}

/* button base */
.grc-fab__btn{
  width: var(--grc-fab-size);
  height: var(--grc-fab-size);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--grc-text-on-dark);
  text-decoration: none;
  box-shadow: var(--grc-fab-shadow);
  position: relative;
  transition: transform .18s cubic-bezier(.16,1,.3,1),
              filter .18s, box-shadow .18s;
  will-change: transform;
  isolation: isolate;
}

/* icons */
.grc-fab__btn i{ font-size: 1.2rem; line-height: 1; }

/* call button – brand gradient */
.grc-fab__call{
  background: var(--grc-call-grad);
  border: 1px solid rgba(255,255,255,.12);
}

/* whatsapp – official color with subtle ring */
.grc-fab__wa{
  background: #25D366;
  border: 1px solid rgba(255,255,255,.12);
  animation: grcPulse 2.8s ease-out infinite;
}
@keyframes grcPulse{
  0%   { box-shadow: var(--grc-fab-shadow), 0 0 0 0 rgba(37,211,102,.0); }
  40%  { box-shadow: var(--grc-fab-shadow), 0 0 0 10px rgba(37,211,102,.18); }
  100% { box-shadow: var(--grc-fab-shadow), 0 0 0 18px rgba(37,211,102,0); }
}

/* label tooltip (slides out on hover) */
.grc-fab__label{
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: rgba(11,16,32,.9);
  color: #e8edf7;
  border: 1px solid rgba(255,255,255,.08);
  padding: 8px 10px;
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s, transform .18s;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

/* hover/active states */
.grc-fab__btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
}
.grc-fab__btn:hover .grc-fab__label{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Touch-friendly sizing tweaks */
@media (max-width: 640px){
  :root{ --grc-fab-size: 54px; }
  /* optional: align horizontally on very narrow screens */
  .grc-fab{ flex-direction:column; }
}





/* new cssss  to be addedddd */

/* Premium Breadcrumb Banner */
.grc-breadcrumb {
  position: relative;
  background: var(--banner, none) center/cover no-repeat;
  min-height: clamp(280px, 40vw, 420px);
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}

/* Elegant Overlay */
.grc-breadcrumb__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      180deg,
      rgba(10, 15, 25, 0.6) 0%,
      rgba(10, 15, 25, 0.9) 100%
    ),
    linear-gradient(90deg, rgba(28, 116, 183, 0.3), rgba(19, 74, 120, 0.3));
  z-index: 0;
}

/* Center Content */
.grc-breadcrumb__content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1rem;
}

/* Eyebrow Tag */
.grc-breadcrumb__eyebrow {
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 1rem;
}

/* Title */
.grc-breadcrumb__title {
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 0.2em 0;
  text-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* Underline accent */
.grc-breadcrumb__underline {
  width: 110px;
  height: 4px;
  margin: 10px auto 20px;
  background: linear-gradient(
    90deg,
    var(--brand-500, #1c74b7),
    var(--brand-700, #134a78)
  );
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(28, 116, 183, 0.35);
}

/* Breadcrumb Navigation */
.grc-breadcrumb__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}

.grc-breadcrumb__list a,
.grc-breadcrumb__list .active {
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: all 0.25s ease;
}

.grc-breadcrumb__list a:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.grc-breadcrumb__list span {
  opacity: 0.6;
}

.grc-breadcrumb__list .active {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.05)
  );
  border-color: rgba(255, 255, 255, 0.25);
}

/* Responsive */
@media (max-width: 640px) {
  .grc-breadcrumb {
    min-height: 320px;
    padding: 2rem 1rem;
  }
  .grc-breadcrumb__title {
    font-size: 2rem;
  }
  .grc-breadcrumb__list {
    gap: 0.4rem;
  }
  .grc-breadcrumb__list a {
    padding: 8px 12px;
    font-size: 0.9rem;
  }
}

/* Set a default header height; JS below will overwrite it with the real value */
:root {
  --header-h: 84px;
}

/* Breadcrumb section gets dynamic top padding based on header height */
.grc-breadcrumb {
  /* existing styles… */
  padding-top: calc(var(--header-h) + 24px); /* space under header */
  /* nice breathing room */
}

/* Tighter on small screens so the title remains visible “above the fold” */
@media (max-width: 768px) {
  .grc-breadcrumb {
    padding-top: calc(var(--header-h) + 16px);
  }
}

/* Optional: nudge the eyebrow down a touch for extra clarity */
.grc-breadcrumb__eyebrow {
  margin-top: 4px;
}

/* ================= PESO Service Article (Dark) ================= */
.grc-peso-article {
  --gp-bg: #0b1220;
  --gp-surface: #0f1629;
  --gp-border: rgba(255, 255, 255, 0.08);
  --gp-text: #e8edf7;
  --gp-weak: #c7d1e2;
  --gp-muted: #9fb1cc;
  --gp-accent: #1c74b7; /* your brand blue */
  --gp-accent-2: #134a78; /* deep brand */
  --gp-danger: #e11d2e; /* your CTA red */
  background: var(--gp-bg);
  color: var(--gp-text);
  padding: clamp(32px, 4vw, 64px) 0;
}

.grc-peso-article .gp-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 28px);
}

.gp-eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--gp-muted);
  background: linear-gradient(
    90deg,
    rgba(28, 116, 183, 0.18),
    rgba(28, 116, 183, 0.05)
  );
  border: 1px solid rgba(28, 116, 183, 0.25);
  padding: 6px 12px;
  border-radius: 999px;
}

.gp-title {
  font-family: var(
    --font-mono,
    "Manrope",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial
  );
  font-weight: 800;
  letter-spacing: 0.01em;
  font-size: clamp(28px, 5.2vw, 41px);
  line-height: 1.08;
  margin: 14px 0 6px;
}

.gp-lead {
  color: var(--gp-weak);
  font-size: clamp(16px, 2.1vw, 18px);
  line-height: 1.7;
  margin: 0 0 18px;
}

.gp-h2 {
  font-size: clamp(20px, 3.6vw, 26px);
  font-weight: 800;
  margin: clamp(22px, 4vw, 34px) 0 10px;
  color: #fff;
}

.gp-card {
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
  border-radius: 14px;
  padding: clamp(14px, 2.8vw, 22px);
}

.gp-muted p {
  color: var(--gp-weak);
}
.gp-muted p + p {
  margin-top: 0.6em;
}

.gp-list {
  display: grid;
  gap: 10px;
  margin: 10px 0 4px;
}
.gp-li {
  position: relative;
  padding-left: 26px;
  color: var(--gp-weak);
  line-height: 1.65;
}

/* bullets */
.gp-bullets .gp-li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.7em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gp-accent), var(--gp-accent-2));
  box-shadow: 0 0 0 4px rgba(28, 116, 183, 0.16);
}

/* checks */
.gp-checks .gp-li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.5em;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(
    180deg,
    rgba(28, 116, 183, 0.3),
    rgba(28, 116, 183, 0.15)
  );
  border: 1px solid rgba(28, 116, 183, 0.45);
  box-shadow: inset 0 0 0 2px rgba(28, 116, 183, 0.25);
}
.gp-checks .gp-li::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 0.82em;
  width: 6px;
  height: 3px;
  border-left: 2px solid #a9cff0;
  border-bottom: 2px solid #a9cff0;
  transform: rotate(-45deg);
}

/* numbered steps */
.gp-steps {
  display: grid;
  gap: 12px;
}
.gp-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.01)
  );
  border: 1px solid var(--gp-border);
  border-radius: 12px;
  padding: 14px 16px;
}
.gp-step-no {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: radial-gradient(
    120% 120% at 30% 20%,
    rgba(28, 116, 183, 0.55),
    rgba(19, 74, 120, 0.55)
  );
  color: #fff;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(28, 116, 183, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.gp-step-body h3 {
  margin: 2px 0 4px;
  font-size: 1.02rem;
  color: #fff;
}
.gp-step-body p {
  color: var(--gp-weak);
  margin: 0;
}

/* tags list */
.gp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.gp-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(28, 116, 183, 0.12);
  color: #cfe6ff;
  border: 1px solid rgba(28, 116, 183, 0.25);
  font-size: 0.92rem;
  white-space: nowrap;
}

/* 2-column cards (auto stack) */
.gp-grid-2 {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .gp-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* CTA */
.gp-cta {
  margin: clamp(22px, 5vw, 36px) 0 8px;
  padding: clamp(16px, 3.6vw, 22px);
  border-radius: 16px;
  border: 1px solid var(--gp-border);
  background: radial-gradient(
      120% 120% at 0% 0%,
      rgba(28, 116, 183, 0.1),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.03),
      rgba(255, 255, 255, 0.02)
    );
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.gp-cta-title {
  margin: 0 0 4px;
  font-size: clamp(18px, 3vw, 22px);
}
.gp-cta-sub {
  margin: 0;
  color: var(--gp-weak);
}

.gp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(90deg, var(--gp-danger), #b21624);
  box-shadow: 0 14px 28px rgba(225, 29, 46, 0.25);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), filter 0.18s;
}
.gp-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.gp-footnote {
  margin-top: 10px;
  color: var(--gp-muted);
  font-size: 0.9rem;
  opacity: 0.8;
}

/* readable paragraphs */
.grc-peso-article p {
  line-height: 1.7;
}

/* ========= Contact area layout (unchanged container) ========= */
.ca-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch; /* makes both columns the same height */
}

/* ========= New left visual panel ========= */
.ca-visual {
  --img: var(--ca-visual);
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background:
    /* image */ var(--img) center / cover no-repeat, #0b1220; /* safe fallback */
  height: 100%; /* stretch to match the form’s height */
  min-height: 520px; /* graceful floor on shorter pages */
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}

/* On-top gradient & vignette to match brand */
.ca-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      120% 90% at 10% 15%,
      rgba(28, 116, 183, 0.18),
      transparent 55%
    ),
    linear-gradient(
      180deg,
      rgba(10, 16, 30, 0.15) 0%,
      rgba(10, 16, 30, 0.55) 60%,
      rgba(10, 16, 30, 0.78) 100%
    ),
    linear-gradient(
      90deg,
      rgba(10, 16, 30, 0.28) 0%,
      rgba(10, 16, 30, 0) 35%,
      rgba(10, 16, 30, 0) 75%,
      rgba(10, 16, 30, 0.28) 100%
    );
  pointer-events: none;
}

/* Subtle outer glow for depth */
.ca-visual::after {
  content: "";
  position: absolute;
  inset: -24px;
  border-radius: 20px;
  background: radial-gradient(
    50% 40% at 20% 10%,
    rgba(28, 116, 183, 0.22),
    transparent 65%
  );
  filter: blur(26px);
  z-index: 0;
  pointer-events: none;
}

/* ========= Form card stays as you had it – optional tiny polish ========= */
.ca-card {
  height: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: #0f1629;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}

/* Keep the macOS header dots in place */
.ca-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #c7d1e2;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.01)
  );
}
.ca-card__head .ca-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}
.ca-card__head .ca-dot:nth-child(1) {
  background: #ff6b6b;
}
.ca-card__head .ca-dot:nth-child(2) {
  background: #fbc531;
}
.ca-card__head .ca-dot:nth-child(3) {
  background: #2ecc71;
}

/* ========= Responsive ========= */
@media (max-width: 992px) {
  .ca-wrap {
    grid-template-columns: 1fr;
  }
  .ca-visual {
    min-height: 320px; /* shorter header image on mobile */
  }
  .ca-card {
    height: auto;
  }
}

@media (max-width: 992px) {
  .ca-visual {
    order: 1;
    min-height: 312px !important;
  }
  .ca-card {
    order: 2;
  }
}

.ca-visual {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  min-height: 450px;
  background-color: #0b1220;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}
.ca-visual__img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fit without cropping */
  object-position: center;
  display: block;
}


/* =========== About (Dark · Responsive) =========== */
.au-section{
  --au-bg:#0b1020;
  --au-surface:#0f1629;
  --au-border:rgba(255,255,255,.08);
  --au-text:#e8edf7;
  --au-weak:#c7d1e2;
  --au-muted:#9fb1cc;
  --au-blue:var(--brand-500,#1c74b7);
  --au-blue-deep:var(--brand-700,#134a78);
  --au-danger:var(--danger-500,#e11d2e);
  background:var(--au-bg);
  color:var(--au-text);
  padding:clamp(32px,5vw,72px) 0;
}

.au-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 clamp(16px,3.4vw,28px);
}

/* Head */
.au-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:999px;
  color:var(--au-muted);
  border:1px solid rgba(28,116,183,.25);
  background:linear-gradient(90deg,rgba(28,116,183,.18),rgba(28,116,183,.05));
  font-size:.85rem;letter-spacing:.06em;
}
.au-title{
  margin:12px 0 8px;font-weight:800;
  font-family:var(--font-mono,"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Arial);
  letter-spacing:.01em;font-size:clamp(28px,4.6vw,40px);line-height:1.08;
}
.au-title span{
  background:linear-gradient(90deg,var(--au-blue),var(--au-blue-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.au-lead{
  color:var(--au-weak);
  font-size:clamp(16px,2vw,18px);
  line-height:1.7;margin:0 0 12px;
}
.au-badges{display:flex;flex-wrap:wrap;gap:10px}
.au-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  border:1px solid var(--au-border);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
  color:#cfe6ff;white-space:nowrap;
}

/* Grid (cards) */
.au-grid{
  display:grid;
  grid-template-columns:1fr 1fr;     /* desktop 2 cols */
  gap:clamp(14px,2.2vw,22px);
  margin-top:clamp(18px,3.4vw,26px);
}
@media (max-width: 900px){
  .au-grid{grid-template-columns:1fr;} /* stack */
}

/* Cards */
.au-card{
  border:1px solid var(--au-border);
  background:var(--au-surface);
  border-radius:16px;
  box-shadow:0 16px 44px rgba(0,0,0,.35);
  padding:clamp(14px,2.4vw,20px);
}
.au-card__head{
  display:flex;align-items:center;gap:10px;
  margin-bottom:10px;color:#fff;
}
.au-card__head i{
  width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 20%,rgba(28,116,183,.55),rgba(19,74,120,.4));
  box-shadow:0 8px 22px rgba(28,116,183,.25), inset 0 0 0 1px rgba(255,255,255,.06);
}

.au-story p{color:var(--au-weak);}

/* Check list */
.au-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.au-list.au-check li{display:flex;align-items:center;gap:10px;color:var(--au-weak)}
.au-list.au-check i{
  width:18px;height:18px;border-radius:6px;display:grid;place-items:center;font-size:.7rem;
  background:linear-gradient(180deg,rgba(28,116,183,.30),rgba(28,116,183,.15));
  border:1px solid rgba(28,116,183,.45);color:#cfe6ff;
}

/* Timeline */
.au-timeline{list-style:none;margin:6px 0 12px;padding:0}
.au-timeline li{
  display:grid;grid-template-columns:18px 70px 1fr;gap:10px;
  align-items:start;padding:10px 0;border-top:1px dashed rgba(255,255,255,.06);
}
.au-timeline li:first-child{border-top:0;padding-top:4px}
.au-dot{
  width:10px;height:10px;border-radius:999px;margin-top:6px;
  background:linear-gradient(90deg,var(--au-blue),var(--au-blue-deep));
  box-shadow:0 0 0 6px rgba(28,116,183,.16);
}
.au-time{color:#cfe6ff;font-weight:700;font-size:.95rem}
.au-text{color:var(--au-weak)}

/* Mini stats */
.au-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
@media (max-width: 560px){ .au-stats{grid-template-columns:1fr 1fr} }
.au-stat{
  display:flex;gap:10px;align-items:center;
  border:1px solid var(--au-border);border-radius:12px;padding:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
}
.au-stat i{
  width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:rgba(28,116,183,.18);color:#cfe6ff;
}
.au-stat b{display:block;color:#fff}
.au-stat small{color:var(--au-muted);display:block}

/* CTAs */
.au-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.au-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 16px;border-radius:12px;font-weight:800;text-decoration:none;
  transition:transform .18s cubic-bezier(.16,1,.3,1), filter .18s;
}
.au-btn--primary{
  color:#fff;background:linear-gradient(90deg,var(--au-danger),#b21624);
  box-shadow:0 14px 28px rgba(225,29,46,.25);
}
.au-btn--ghost{
  color:#cfe6ff;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);backdrop-filter:blur(4px);
}
.au-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}

/* Values row */
.au-values{
  display:grid;gap:12px;margin-top:clamp(18px,3.4vw,28px);
  grid-template-columns:repeat(4,1fr);
}
@media (max-width: 980px){ .au-values{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 560px){ .au-values{grid-template-columns:1fr} }
.au-vcard{
  border:1px solid var(--au-border);border-radius:14px;padding:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
  display:grid;gap:6px;text-align:left
}
.au-vcard i{
  width:34px;height:34px;border-radius:12px;display:grid;place-items:center;color:#fff;
  background:radial-gradient(120% 120% at 30% 20%,rgba(28,116,183,.55),rgba(19,74,120,.45));
}
.au-vcard h4{margin:0;color:#fff;font-weight:800}
.au-vcard p{margin:0;color:var(--au-weak);line-height:1.65}

/* Fine-tune spacing between headings & paragraphs */
.au-card__head + p{margin-top:6px}
.au-card p + .au-list{margin-top:10px}


/* ===== About – More (Dark) ===== */
.am-section{
  --am-bg:#0b1020;
  --am-surface:#0f1629;
  --am-border:rgba(255,255,255,.08);
  --am-text:#e8edf7;
  --am-weak:#c7d1e2;
  --am-muted:#9fb1cc;
  --am-blue:var(--brand-500,#1c74b7);
  --am-blue-deep:var(--brand-700,#134a78);
  --am-danger:var(--danger-500,#e11d2e);
  background:var(--am-bg);
  color:var(--am-text);
  padding:clamp(32px,5vw,70px) 0;
}
.am-wrap{max-width:1200px;margin:0 auto;padding:0 clamp(16px,3.4vw,28px)}
.am-head{margin-bottom:clamp(18px,3.6vw,28px)}
.am-eyebrow{
  display:inline-flex;gap:8px;align-items:center;
  padding:6px 12px;border-radius:999px;font-size:.85rem;letter-spacing:.06em;
  color:var(--am-muted);
  border:1px solid rgba(28,116,183,.25);
  background:linear-gradient(90deg,rgba(28,116,183,.18),rgba(28,116,183,.05));
}
.am-title{
  margin:12px 0 6px;font-weight:800;
  font-family:var(--font-mono,"Manrope",system-ui);letter-spacing:.01em;
  font-size:clamp(28px,4.6vw,40px);line-height:1.08;
}
.am-title span{
  background:linear-gradient(90deg,var(--am-blue),var(--am-blue-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.am-lead{color:var(--am-weak);line-height:1.7;margin:0}

/* Grid */
.am-grid{
  display:grid;gap:clamp(14px,2.2vw,20px);
  grid-template-columns:1.2fr 1fr .9fr;    /* desktop 3 columns */
}
@media (max-width:1100px){ .am-grid{grid-template-columns:1fr 1fr} }
@media (max-width:720px){ .am-grid{grid-template-columns:1fr} }

/* Cards */
.am-card{
  border:1px solid var(--am-border);
  background:var(--am-surface);
  border-radius:16px;
  box-shadow:0 16px 44px rgba(0,0,0,.35);
  padding:clamp(14px,2.4vw,20px);
}
.am-card__head{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.am-card__head i{
  width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 20%,rgba(28,116,183,.55),rgba(19,74,120,.45));
  box-shadow:0 8px 22px rgba(28,116,183,.25), inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Cred badges */
.am-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.am-badge{
  display:inline-flex;gap:8px;align-items:center;
  padding:8px 12px;border-radius:999px;
  border:1px solid var(--am-border);color:#cfe6ff;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
  white-space:nowrap;
}

/* Check list */
.am-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.am-list.am-check li{display:flex;align-items:center;gap:10px;color:var(--am-weak)}
.am-list.am-check i{
  width:18px;height:18px;border-radius:6px;display:grid;place-items:center;font-size:.7rem;
  background:linear-gradient(180deg,rgba(28,116,183,.30),rgba(28,116,183,.15));
  border:1px solid rgba(28,116,183,.45);color:#cfe6ff;
}

/* Coverage chips & stats */
.am-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 10px}
.am-chip{
  padding:8px 12px;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(28,116,183,.25);color:#cfe6ff;
  background:rgba(28,116,183,.12);
}
.am-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:560px){ .am-strip{grid-template-columns:1fr 1fr} }
.am-stat{
  display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;
  border:1px solid var(--am-border);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
}
.am-stat i{
  width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:#fff;
  background:rgba(28,116,183,.18);
}
.am-stat b{color:#fff;display:block}
.am-stat small{color:var(--am-muted);display:block}

/* Proof / quote */
.am-proof{display:grid;gap:12px}
.am-quote{
  position:relative;border:1px solid var(--am-border);border-radius:14px;
  padding:14px;background:
    radial-gradient(120% 120% at 10% 10%, rgba(28,116,183,.12), transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
}
.am-quote i{color:#a9cff0;opacity:.8}
.am-quote p{color:var(--am-weak);line-height:1.7;margin:6px 0 8px}
.am-qmeta{display:flex;flex-direction:column;gap:2px}
.am-qmeta strong{color:#fff}
.am-qmeta span{color:var(--am-muted)}

.am-cta{display:flex;flex-wrap:wrap;gap:10px}
.am-btn{
  display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;
  font-weight:800;text-decoration:none;transition:transform .18s, filter .18s;
}
.am-btn--primary{color:#fff;background:linear-gradient(90deg,var(--am-danger),#b21624);box-shadow:0 14px 28px rgba(225,29,46,.25)}
.am-btn--ghost{color:#cfe6ff;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);backdrop-filter:blur(4px)}
.am-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}

/* ===== Contact (Dark) ===== */
.ct-section{
  --bg:#0b1020; --surface:#0f1629; --border:rgba(255,255,255,.08);
  --text:#e8edf7; --weak:#c7d1e2; --muted:#9fb1cc;
  --blue:var(--brand-500,#1c74b7); --blue-deep:var(--brand-700,#134a78);
  --danger:var(--danger-500,#e11d2e);
  background:var(--bg); color:var(--text);
  padding:clamp(36px,6vw,80px) 0;
}
.ct-wrap{max-width:1200px;margin:0 auto;padding:0 clamp(16px,3.4vw,28px)}
.ct-head{margin-bottom:clamp(18px,3.6vw,28px);text-align:center}
.ct-eyebrow{
  display:inline-flex;gap:8px;align-items:center;color:var(--muted);
  border:1px solid rgba(28,116,183,.25); border-radius:999px; padding:6px 12px;
  background:linear-gradient(90deg,rgba(28,116,183,.18),rgba(28,116,183,.05));
  font-size:.85rem; letter-spacing:.06em;
}
.ct-title{margin:.7rem 0 .2rem;font-weight:800;letter-spacing:.01em;
  font-family:var(--font-mono,"Manrope",system-ui);
  font-size:clamp(28px,4.6vw,40px)
}
.ct-lead{color:var(--weak);max-width:800px;margin:0 auto;line-height:1.7}

.ct-grid{
  display:grid;gap:clamp(14px,2.2vw,20px);
  grid-template-columns:repeat(3,1fr);
  margin-top:clamp(16px,3.4vw,26px);
}
@media (max-width:1000px){ .ct-grid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .ct-grid{grid-template-columns:1fr} }

.ct-card{
  position:relative; border:1px solid var(--border); border-radius:16px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(28,116,183,.10), transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
  box-shadow:0 18px 48px rgba(0,0,0,.35);
  overflow:hidden; display:flex; gap:12px; padding:16px;
}
.ct-card__icon{
  flex:none; width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;
  background:radial-gradient(120% 120% at 30% 20%,rgba(28,116,183,.55),rgba(19,74,120,.45));
  box-shadow:0 8px 22px rgba(28,116,183,.25),inset 0 0 0 1px rgba(255,255,255,.06);
}
.ct-card__body h3{margin:4px 0 6px;font-size:1.05rem}
.ct-address{font-style:normal;color:var(--weak);line-height:1.7;margin:0 0 8px}
.ct-line{color:var(--weak);margin:0 0 8px}
.ct-link{color:#cfe6ff;text-decoration:none;border-bottom:1px dotted rgba(207,230,255,.35)}
.ct-link:hover{color:#fff;border-bottom-color:transparent}
.ct-actions{display:flex;flex-wrap:wrap;gap:8px}

.ct-btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;
  font-weight:800;text-decoration:none;transition:transform .18s, filter .18s;
}
.ct-btn--primary{color:#fff;background:linear-gradient(90deg,var(--blue),var(--blue-deep))}
.ct-btn--ghost{color:#cfe6ff;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);backdrop-filter:blur(4px)}
.ct-btn--wa{color:#fff;background:linear-gradient(90deg,#25D366,#128C7E)}
.ct-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}

/* bottom strip */
.ct-strip{
  margin-top:clamp(18px,4vw,30px); padding:16px; border-radius:16px; gap:14px;
  border:1px solid var(--border);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(28,116,183,.12), transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.ct-strip__title{margin:0 0 2px;font-size:clamp(18px,3vw,22px)}
.ct-strip__sub{margin:0;color:var(--weak)}


/* ===== Premium FAQ (Dark) ===== */
.faq-section{
  --bg:#0b1020; --surface:#0f1629; --border:rgba(255,255,255,.08);
  --text:#e8edf7; --weak:#c7d1e2; --muted:#9fb1cc;
  --blue:var(--brand-500,#1c74b7); --blue-deep:var(--brand-700,#134a78);
  background:var(--bg); color:var(--text);
  padding:clamp(36px,6vw,80px) 0;
}
.faq-wrap{max-width:1200px;margin:0 auto;padding:0 clamp(16px,3.4vw,28px)}

.faq-head{text-align:center;margin-bottom:clamp(18px,3.6vw,28px)}
.faq-eyebrow{
  display:inline-flex;gap:8px;align-items:center;color:var(--muted);
  border:1px solid rgba(28,116,183,.25); border-radius:999px; padding:6px 12px;
  background:linear-gradient(90deg,rgba(28,116,183,.18),rgba(28,116,183,.05));
  font-size:.85rem; letter-spacing:.06em;
}
.faq-title{
  margin:.7rem 0 .2rem;font-weight:800;letter-spacing:.01em;
  font-family:var(--font-mono,"Manrope",system-ui);
  font-size:clamp(28px,4.6vw,40px)
}
.faq-lead{color:var(--weak);max-width:780px;margin:0 auto;line-height:1.7}

.faq-accordion{display:grid;gap:12px;margin-top:clamp(14px,2.6vw,22px)}
.faq-item{
  border:1px solid var(--border); border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(28,116,183,.10), transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
  box-shadow:0 18px 48px rgba(0,0,0,.35);
}

/* trigger */
.faq-trigger{
  width:100%; display:flex; align-items:center; gap:12px;
  padding:16px 16px; text-align:left;
  background:transparent; color:var(--text); border:0; cursor:pointer;
  font-weight:700; border-radius:14px;
}
.faq-trigger:focus-visible{outline:0; box-shadow:0 0 0 4px rgba(28,116,183,.18)}
.faq-icon{
  flex:none; width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;
  background:radial-gradient(120% 120% at 30% 20%,rgba(28,116,183,.55),rgba(19,74,120,.45));
  box-shadow:0 8px 22px rgba(28,116,183,.25),inset 0 0 0 1px rgba(255,255,255,.06);
}
.faq-caret{margin-left:auto; transition:transform .28s cubic-bezier(.16,1,.3,1), opacity .28s}
.faq-trigger[aria-expanded="true"] .faq-caret{transform:rotate(180deg)}

/* panel animation */
.faq-panel{
  --pad: 0 16px 16px 68px;       /* aligns text under the icon */
  max-height:0; opacity:0; overflow:hidden;
  padding:0 16px 0 68px;
  transition:
    max-height .36s cubic-bezier(.2,.9,.25,1),
    opacity .26s ease,
    padding .36s cubic-bezier(.2,.9,.25,1);
}
.faq-item.open .faq-panel{
  max-height:420px; opacity:1; padding:var(--pad);
}
.faq-panel p{color:var(--weak); margin:0; line-height:1.7}

/* hover polish */
.faq-item:hover{border-color:rgba(28,116,183,.25)}

/* =========================================
   Rock-solid alignment for FAQ items
   ========================================= */

/* 3-cell row: [icon][label][caret] */
.faq-trigger{
  display: grid !important;
  grid-template-columns: 48px 1fr 22px; /* fixed icon cell, flexible label, caret */
  column-gap: 14px;
  align-items: center;         /* centers all cells vertically */
  padding: 14px 16px;
  border-radius: 14px;
  width: 100%;
  text-align: left;
  line-height: 1.35;           /* stable line box for multi-line labels */
}

/* Icon tile (works whether you use <span class="faq-icon"><i>… */
.faq-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;               /* flex centers the glyph */
  align-items: center;
  justify-content: center;
  line-height: 1;              /* kill glyph line height “lift” */
  color: #fff;
  background: radial-gradient(120% 120% at 30% 20%,
              rgba(28,116,183,.55), rgba(19,74,120,.45));
  box-shadow: 0 8px 22px rgba(28,116,183,.25),
              inset 0 0 0 1px rgba(255,255,255,.06);
}

/* If your markup uses the <i> directly without .faq-icon wrapper,
   this makes it behave like the same fixed tile. */
.faq-trigger > i.fa-solid:first-child{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #fff;
  background: radial-gradient(120% 120% at 30% 20%,
              rgba(28,116,183,.55), rgba(19,74,120,.45));
  box-shadow: 0 8px 22px rgba(28,116,183,.25),
              inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Normalize all FA glyphs inside the tile (size + baseline) */
.faq-icon i,
.faq-trigger > i.fa-solid:first-child i{
  font-size: 18px;             /* consistent glyph size */
  line-height: 1;              /* zero baseline wobble */
  transform: translateY(0);    /* reset any theme overrides */
}

/* Caret column stays right & centered */
.faq-caret{
  justify-self: end;
  display: flex;
  align-items: center;
  line-height: 1;
}
.faq-caret .fa-solid{ font-size: 16px; }

/* Open state rotation */
.faq-trigger[aria-expanded="true"] .faq-caret{ transform: rotate(180deg); }

/* Panel body indents under the label column (not under the icon) */
.faq-panel{
  --pad-l: 78px; /* 48 icon + 14 gap + ~16 breathing */
  padding: 0 16px 0 var(--pad-l);
}
.faq-item.open .faq-panel{ padding: 0 16px 16px var(--pad-l); }

/* Responsive comfort tweaks */
@media (max-width: 560px){
  .faq-trigger{ grid-template-columns: 42px 1fr 18px; column-gap: 12px; }
  .faq-icon,
  .faq-trigger > i.fa-solid:first-child{ width: 40px; height: 40px; }
  .faq-panel{ --pad-l: 66px; }
}


/* =================== Premium Blog (Dark) — CSS =================== */
:root{
  
  --grc-gutter: clamp(20px, 4vw, 64px);

  --grc-bg: #0a0f15;
  --grc-panel: #0d141d;
  --grc-panel-2:#101926;
  --grc-stroke: rgba(255,255,255,.07);

  --grc-text:#eaf2ff;
  --grc-muted:#9fb1c7;

  --grc-cyan:#5dd6ff;
  --grc-violet:#7d64ff;
  --grc-mint:#10d6a5;

  --grc-r: 20px;
  --grc-shadow: 0 14px 42px rgba(0,0,0,.45);
}

.section-pad{ padding-block: clamp(44px, 7vw, 96px); }
.gp-wrap{
  width:min(100% - var(--grc-gutter)*2, var(--grc-max));
  margin-inline:auto;
  padding-inline: var(--grc-gutter); /* L-R spacing as requested */
}

.grc-blog{ position:relative; background: var(--grc-bg); color: var(--grc-text); overflow:hidden; }
.grc-blog__bg{
  position:absolute; inset:-20% -8% -30% -8%; pointer-events:none; filter: blur(36px); opacity:.28;
  background:
    radial-gradient(900px 480px at 12% -10%, color-mix(in oklab,var(--grc-cyan) 18%, transparent), transparent 60%),
    radial-gradient(900px 560px at 88% -5%, color-mix(in oklab,var(--grc-violet) 18%, transparent), transparent 65%),
    radial-gradient(900px 560px at 50% 120%, color-mix(in oklab,var(--grc-mint) 14%, transparent), transparent 65%);
}

/* Header */
.grc-blog__head{ text-align:center; margin-bottom: clamp(28px, 5vw, 60px); }
.grc-blog__eyebrow{
  display:inline-flex; gap:10px; align-items:center; color:var(--grc-muted);
  letter-spacing:.14em; text-transform:uppercase; font-size:.85rem;
  background: linear-gradient(90deg, var(--grc-cyan), var(--grc-violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.grc-blog__title{
  margin:10px 0 12px; line-height:1.1;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  background: linear-gradient(180deg, #fff, #cfe1ff 60%, #a9baff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.grc-blog__underline{
  width: clamp(140px, 12vw, 220px); height:3px; border-radius:999px;
  margin: 0 auto; background: linear-gradient(90deg, var(--grc-cyan), var(--grc-violet));
}
.grc-blog__lede{ max-width: 820px; margin:12px auto 0; color: var(--grc-muted); }

/* Grid */
.grc-blog__grid{
  display:grid; gap: clamp(18px, 2.4vw, 28px);
  grid-template-columns: repeat(12, 1fr);
}
.blog-card{ grid-column: span 12; }
@media (min-width: 720px){ .blog-card{ grid-column: span 6; } }
@media (min-width: 1024px){ .blog-card{ grid-column: span 4; } }

/* Card */
.blog-card{
  position:relative; isolation:isolate;
  background: linear-gradient(180deg, var(--grc-panel), var(--grc-panel-2));
  border:1px solid var(--grc-stroke);
  border-radius: var(--grc-r);
  overflow:hidden;
  box-shadow: var(--grc-shadow);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.blog-card::before{
  content:""; position:absolute; inset:-1px; border-radius: calc(var(--grc-r) + 1px); opacity:0; pointer-events:none;
  background: linear-gradient(135deg,
    color-mix(in oklab,var(--grc-cyan) 20%, transparent),
    transparent 30%,
    color-mix(in oklab,var(--grc-violet) 20%, transparent) 70%,
    transparent);
  transition: opacity .35s ease;
}
.blog-card:hover{
  transform: translateY(-8px);
  border-color: color-mix(in oklab,var(--grc-cyan) 18%, var(--grc-stroke));
  box-shadow: 0 22px 55px rgba(0,0,0,.55);
}
.blog-card:hover::before{ opacity:.9; }

/* Media */
.blog-card__media{ aspect-ratio: 16/9; background:#0c1219; margin:0; overflow:hidden; }
.blog-card__media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.03); transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.blog-card:hover .blog-card__media img{ transform:scale(1.08); }

/* Pills */
.blog-card__pillbar{ position:absolute; top:12px; left:12px; display:flex; gap:8px; z-index:2; }
.pill{
  display:inline-flex; align-items:center; gap:8px; font-size:.85rem;
  padding:6px 12px; border-radius:999px; color:#eaffff; backdrop-filter: blur(10px);
  border:1px solid color-mix(in oklab,var(--grc-cyan) 36%, transparent);
  background: linear-gradient(180deg, color-mix(in oklab,var(--grc-cyan) 24%, rgba(16,22,32,.55)), rgba(12,16,22,.55));
}
.pill--violet{
  border-color: color-mix(in oklab,var(--grc-violet) 36%, transparent);
  background: linear-gradient(180deg, color-mix(in oklab,var(--grc-violet) 24%, rgba(16,22,32,.55)), rgba(12,16,22,.55));
}
.pill--mint{
  border-color: color-mix(in oklab,var(--grc-mint) 36%, transparent);
  background: linear-gradient(180deg, color-mix(in oklab,var(--grc-mint) 24%, rgba(16,22,32,.55)), rgba(12,16,22,.55));
}

/* Body + Meta */
.blog-card__body{ padding: 18px 18px 0; }
.blog-card__title{ font-size: clamp(1.08rem, 1.45vw, 1.3rem); line-height:1.32; margin: 6px 0; }
.blog-card__title a{ color: var(--grc-text); text-decoration:none; }
.blog-card__title a:hover{ color: color-mix(in oklab,var(--grc-cyan) 65%, var(--grc-text)); }
.blog-card__meta{ color: var(--grc-muted); display:flex; gap:10px; align-items:center; font-size:.92rem; }
.blog-card__meta span{ opacity:.55; }
.blog-card__excerpt{ color: var(--grc-muted); margin-top: 12px; }

/* Footer */
.blog-card__foot{
  padding: 16px 18px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.byline{ display:flex; align-items:center; gap:10px; color:var(--grc-muted); font-size:.93rem; }
.byline i{ opacity:.45; }
.avatar{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:.8rem;
  color:#0a1220; background: linear-gradient(135deg, var(--grc-cyan), var(--grc-violet));
}
.blog-card__cta{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:600;
  padding:10px 14px; border-radius:12px; color:var(--grc-text);
  background: linear-gradient(180deg, #192130, #111a26);
  border:1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .2s ease, border-color .25s ease, box-shadow .25s ease;
}
.blog-card__cta:hover{
  border-color: color-mix(in oklab,var(--grc-cyan) 32%, transparent);
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 0 2px color-mix(in oklab,var(--grc-cyan) 28%, transparent);
  transform: translateY(-1px);
}

/* Actions */
.grc-blog__actions{ text-align:center; margin-top: clamp(12px, 3vw, 24px); }
.grc-blog__btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:600;
  padding:12px 18px; border-radius:14px; color:var(--grc-text);
  background: linear-gradient(180deg, #1a2333, #121b27);
  border:1px solid rgba(255,255,255,.1);
}
.grc-blog__btn:hover{ border-color: color-mix(in oklab,var(--grc-violet) 34%, transparent); }

/* A11y */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}


@media(max-width:600px){
     .panel__cta {
    display: flex
;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center !important;
}
    .grc-about__actions {
    display: flex
;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: .5rem;
    justify-content: center;
}
}


/* ===== Quick Contact (icon circle + pill) ===== */
.qc {
  display: inline-flex;                
  flex-direction: column;
  gap: clamp(10px, 2.5vw, 16px);

  position: fixed; right: 16px; bottom: 16px; z-index: 999;
}

.qc-item {
  --icon-size: clamp(44px, 7vw, 56px);
  --pill-px: clamp(14px, 3.2vw, 20px);
  --pill-py: clamp(8px, 1.8vw, 12px);

  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 2.6vw, 14px);
  text-decoration: none;
  user-select: none;
}

.qc-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  flex: 0 0 var(--icon-size);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

.qc-icon i {
  font-size: clamp(18px, 3.8vw, 22px);
  line-height: 1;
}

.qc-pill {
  padding: var(--pill-py) var(--pill-px);
  border-radius: 999px;
  font-weight: 700;
  font-size: clamp(14px, 3.6vw, 16px);
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

/* Brand variants */
.qc-wa .qc-icon { background: #25D366; }
.qc-wa .qc-pill { background: #25D366; color: #0b3a1f; }  /* dark text like screenshot */

.qc-call .qc-icon { background: #2F2F8F; }               /* deep indigo */
.qc-call .qc-pill { background: #2F2F8F; color: #fff; }

/* Hover / focus */
.qc-item:focus-visible .qc-pill,
.qc-item:hover .qc-pill { transform: translateY(-1px); }
.qc-item:focus-visible .qc-icon,
.qc-item:hover .qc-icon { transform: translateY(-1px); }
.qc-item .qc-pill,
.qc-item .qc-icon { transition: transform .18s ease; }

/* Accessibility: bigger targets on touch */
@media (hover: none) {
  .qc-pill { padding: calc(var(--pill-py) + 2px) calc(var(--pill-px) + 2px); }
}

/* Optional: align the pair horizontally on wide screens
.qc { flex-direction: row; }
@media (max-width: 640px){ .qc { flex-direction: column; } }
*/

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .qc-item .qc-pill, .qc-item .qc-icon { transition: none; }
}

/* ===== Pulse animation ===== */
.qc-item { position: relative; /* for stacking context */ }

/* Default pulse color; overridden per variant below */
.qc-item { --pulse: rgba(0,0,0,.28); }

.qc-icon {
  position: relative;
  overflow: visible;
  isolation: isolate; /* keep pulse below icon */
}

/* Ring that expands/fades out */
.qc-icon::after {
  content: "";
  position: absolute;
  inset: 0;                 /* start same size as icon */
  border-radius: 50%;
  border: 3px solid var(--pulse);
  transform: scale(1);
  opacity: .55;
  z-index: -1;              /* keep behind the icon */
  animation: qc-pulse 1.9s ease-out infinite;
}

/* Variant colors for the pulse */
.qc-wa { --pulse: rgba(37, 211, 102, .45); }   /* WhatsApp green */
.qc-call { --pulse: rgba(47, 47, 143, .45); }  /* Indigo */

/* Optional: a tiny lift + faster pulse on hover/focus */
.qc-item:hover .qc-icon::after,
.qc-item:focus-visible .qc-icon::after {
  animation-duration: 1.6s;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .qc-icon::after { animation: none; }
}

/* Keyframes */
@keyframes qc-pulse {
  0%   { transform: scale(1);   opacity: .55; }
  65%  { transform: scale(1.9); opacity: 0;   }
  100% { transform: scale(1.9); opacity: 0;   }
}