header#top { display:flex; align-items:center; gap:.75rem;}
  header#top .nav { display:flex; gap:16px; margin-left:auto; }
  header#top a { text-decoration:none; }




:root{
  /* Choose one: "Inter", "Public Sans", or "IBM Plex Sans" */
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-head: var(--font-body);   /* keep unified for a serious, trustworthy feel */
  /* Optional weight tokens */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  /* Base sizing rhythm */
  --fs-base: 16px;
  --lh-base: 1.55;
}

/* Page edge reset + font application */
html, body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x: hidden;
}

/* Reserve scrollbar space so centering doesn't jump */
html { scrollbar-gutter: stable both-edges; 
scroll-behavior: smooth;}

/* Headings: slightly tighter, weighty but not shouty */
h1,h2,h3{
  font-family:var(--font-head);
  font-weight:var(--w-semibold);
  line-height:1.1;
  letter-spacing:-0.01em;
}

h4,h5,h6{ font-weight:var(--w-medium); line-height:1.2; }

/* Buttons & UI labels */
.cme-btn{ font-weight:var(--w-semibold); letter-spacing:.01em; }

/* Numbers readouts (prices, timings) */
.cme-num, .cme-btn .count, .stat{
  font-variant-numeric:tabular-nums slashed-zero;
  font-feature-settings:"tnum" 1, "cv10" 1;
}

/* Optional: slight size bump on larger screens */
@media (min-width: 1024px){
  :root{ --fs-base:17px; }
}

/* Optional: make the hero truly edge-to-edge */
.cme-hero { width: 100%; }

.cme-cta-btn--pulse{
  position: relative;
  overflow: hidden;
  animation:
    cmePulse 2.6s ease-in-out infinite,
    cmePulseText 2.6s ease-in-out infinite;
}
@keyframes cmePulse{
  0%   { box-shadow: 0 0 0 0 rgba(14,165,233,0.32); }
  50%  { box-shadow: 0 0 0 10px rgba(14,165,233,0.0); }
  100% { box-shadow: 0 0 0 0 rgba(14,165,233,0.0); }
}
@keyframes cmePulseText{
  0%   { color: color-mix(in srgb, var(--ink) 90%, var(--brand) 10%); text-shadow: 0 0 0 rgba(14,165,233,0.35); transform: scale(1); }
  50%  { color: color-mix(in srgb, var(--brand) 70%, white 30%); text-shadow: 0 0 14px rgba(14,165,233,0.55); transform: scale(1.02); }
  100% { color: color-mix(in srgb, var(--ink) 90%, var(--brand) 10%); text-shadow: 0 0 0 rgba(14,165,233,0.35); transform: scale(1); }
}
/* Pill buttons */
.cme-btn,
.cme-cta-btn,
.hero-cta{
  border-radius: 999px !important;
}

/* Pill switches (used for terms/privacy toggles) */
.switch-group{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:.5rem;
  padding:.25rem 0;
}
.terms-text{
  font-size:.95rem;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}
.pill-switch{
  position: relative;
  width: 56px;
  height: 30px;
  flex-shrink: 0;
}
.pill-checkbox{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pill-slider{
  display: block;
  width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--muted) 20%, transparent);
  border-radius: 999px;
  border: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  transition: background .25s ease, border-color .25s ease;
}
.pill-slider::after{
  content: "";
  position: absolute;
  top: 2px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transition: left .25s ease, background .25s ease;
}
.pill-checkbox:checked + .pill-slider{
  background: color-mix(in srgb, var(--brand) 25%, transparent);
  border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
}
.pill-checkbox:checked + .pill-slider::after{
  left: calc(100% - 28px);
  background: var(--brand);
}

/* Subtle “filled” feedback on inputs once typed */
input.is-filled,
textarea.is-filled,
select.is-filled{
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-600, #0ea5e9) 60%, transparent);
  border-color: color-mix(in srgb, var(--brand-600, #0ea5e9) 60%, var(--border, rgba(0,0,0,.1)));
}
.dark-mode input.is-filled,
.dark-mode textarea.is-filled,
.dark-mode select.is-filled{
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-400, #38bdf8) 55%, transparent);
  border-color: color-mix(in srgb, var(--brand-400, #38bdf8) 55%, var(--border, rgba(255,255,255,.16)));
}
.cme-file__selected{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .9rem;
  color: var(--muted, #6b7280);
  padding: .35rem .5rem;
  border-radius: 10px;
}
.dark-mode .cme-file__selected{
  color: color-mix(in srgb, #dbeafe 78%, transparent);
}
.cme-file__name{ display:inline-block; }
.cme-file--stacked{
  display:grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  grid-column-gap: .75rem;
  grid-row-gap: .35rem;
  align-items:center;
  padding:.65rem .75rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 98%, rgba(14,165,233,.04));
  border: 1px solid color-mix(in srgb, var(--brand-200, #bae6fd) 22%, var(--border));
}
.cme-file--stacked .cme-file__label{
  padding:.55rem .9rem;
  border-radius:12px;
  border: 1px solid color-mix(in srgb, var(--brand-300, #7dd3fc) 32%, var(--border));
  color: color-mix(in srgb, var(--ink) 88%, rgba(14,165,233,.12));
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(14, 165, 233, .1);
  transition: transform .12s ease, box-shadow .12s ease;
  grid-row: 1;
}
.cme-file--stacked .cme-file__label:hover{ transform: translateY(-1px); box-shadow: 0 10px 16px rgba(14,165,233,.14); }
.cme-file--stacked .cme-file__hint{
  color: var(--muted-ink);
  font-size:.9rem;
  grid-column: 1 / -1;
  grid-row: 2;
  text-align: center;
}
.cme-file--stacked .cme-file__selected.tagged{
  border: 1px solid color-mix(in srgb, var(--brand-300, #7dd3fc) 35%, var(--border));
  background: color-mix(in srgb, var(--bg) 96%, rgba(14,165,233,.08));
  color: color-mix(in srgb, var(--ink) 90%, rgba(14,165,233,.08));
  padding: .35rem .6rem;
  border-radius: 10px;
  grid-row: 1;
}
.cme-file--stacked .cme-file__reset{
  border: 1px solid color-mix(in srgb, var(--brand-500, #0ea5e9) 45%, transparent);
  background: color-mix(in srgb, var(--brand-100, #e0f2fe) 65%, var(--bg));
  color: #fff;
  box-shadow: 0 3px 8px rgba(14,165,233,.12);
  grid-row: 1;justify-content: center; font-size: 1.2rem;
}
.cme-file--stacked .cme-file__reset:hover{
  color: var(--brand-700, #00aaff);
  border-color: color-mix(in srgb, var(--brand-600, #0ea5e9) 65%, transparent);
  background: color-mix(in srgb, var(--brand-100, #e0f2fe) 78%, transparent);
}
.turnstile-wrap{
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, var(--bg) 96%, rgba(14,165,233,.06));
  display: flex;
  width: 100%;
  max-width: 100%;
  justify-content: center;
  margin: 0 0 1rem;
}
.turnstile-wrap.centered{
  margin-left:auto;
  margin-right:auto;
}
.cme-turnstile{
  margin: 0 0 1rem;
}
.cme-turnstile__label{
  display: block;
  margin: 0 0 .45rem;
  font-weight: 600;
  color: var(--ink);
}
.cme-turnstile .turnstile-wrap{
  max-width: 100%;
}
.cme-turnstile.is-invalid .turnstile-wrap{
  border-color: rgba(248,113,113,.7);
  box-shadow: 0 0 0 3px rgba(248,113,113,.12);
}
.cme-turnstile__error[hidden]{
  display: none;
}

/* ---- Utility animations (reuse across blocks) ---- */
@keyframes slide-in-left{
  from{ opacity:0; transform: translateX(-24px); }
  to{ opacity:1; transform: translateX(0); }
}
@keyframes slide-in-right{
  from{ opacity:0; transform: translateX(24px); }
  to{ opacity:1; transform: translateX(0); }
}
@keyframes slide-in-up{
  from{ opacity:0; transform: translateY(24px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes slide-in-down{
  from{ opacity:0; transform: translateY(-24px); }
  to{ opacity:1; transform: translateY(0); }
}
.anim-slide-in-left{ animation: slide-in-left 420ms ease forwards; }
.anim-slide-in-right{ animation: slide-in-right 420ms ease forwards; }
.anim-slide-in-up{ animation: slide-in-up 420ms ease forwards; }
.anim-slide-in-down{ animation: slide-in-down 420ms ease forwards; }












  /* ======================================================
   CME Home – Custom Classes Only (no Bootstrap)
   ====================================================== */
.cme-section{
  color: var(--ink);
}
.cme-bg-soft{ background: color-mix(in srgb, var(--bg) 92%, white 8%); }
.cme-bg-brand{ background: var(--brand); color: #fff; }
.cme-text-onbrand{ color:#fff; }
.cme-hide{ display:none !important; }

/* ----- Typography ----- */
.cme-title{
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
}
.cme-title--xl{ font-size: clamp(2.2rem, 6vw, 5rem); line-height: .95; }
.cme-title--lg{ font-size: clamp(1.6rem, 3vw, 2.25rem); }
.cme-subtitle{
  color: var(--muted);
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
}
.cme-gradient-text{
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ----- Buttons ----- */
.cme-btn{
  --h: 48px;
  display:inline-flex; align-items:center; justify-content:center;
  height: var(--h); padding: 0 1rem; gap:.5rem;
  font-weight:700; border-radius:12px; border:1px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  text-decoration:none;
}
.cme-btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-l); }
.cme-btn--lg{ --h:56px; font-size:1.05rem; }
.cme-btn--block{ width:100%; }

.cme-btn--primary{
  color:#fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 92%, white 8%), var(--brand-dark));
  border-color: var(--brand-dark);
}

.cme-btn--primary:hover{ background: linear-gradient(180deg, var(--brand), var(--brand-dark)); }

.cme-btn--outline{
  color: var(--brand-dark);
  background: transparent;
  border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
}
.cme-btn--outline:hover{
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border-color: var(--brand);
}

.cme-btn--secondary{
  color: var(--ink);
  background: color-mix(in srgb, var(--brand-dark) 18%, var(--bg));
  border-color: color-mix(in srgb, var(--brand-dark) 35%, var(--border));
}
.cme-btn--secondary:hover{
  background: color-mix(in srgb, var(--brand-dark) 30%, var(--bg));
  border-color: var(--brand-dark);
}

.cme-btn--light{
  color: var(--brand-dark);
  background:#fff;
  border-color: rgba(255,255,255,.6);
}
.cme-btn--light:hover{ background: color-mix(in srgb, white 92%, var(--brand) 8%); }

.cme-scroll{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:1rem; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  color: #fff;
  backdrop-filter: saturate(120%) blur(6px);
  box-shadow: var(--shadow-s);
  transition: transform .2s ease, background .2s ease;
  z-index: 1000; text-decoration: none;
}
.cme-scroll:hover{ transform: translate(-50%, -2px); background: color-mix(in srgb, var(--brand) 16%, var(--bg)); color: var(--brand); }

/* ----- Quick action strip ----- */
.cme-quickstrip{
  background: rgba(203, 213, 233, 0.8);
  padding: .7rem 0;
}

.dark-mode .cme-quickstrip{ background: color-mix(in srgb, var(--bg) 92%, white 8%);}


.cme-quickstrip__row{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
}

/* ----- Services (“What we do”) ----- */
.cme-lede{ color: var(--muted); max-width: 62ch; }



.cme-card{
  position:relative; border-radius:16px; overflow:hidden; isolation:isolate;
  background: color-mix(in srgb, var(--bg) 85%, black 15%);
  box-shadow: var(--shadow-s);
  transform: translateZ(0);
  display:block; text-decoration:none;
}
.cme-card video, .cme-card img{
  width:100%; height:260px; object-fit:cover; display:block; filter: saturate(1.05) contrast(1.02);
}
.cme-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
  z-index:1; pointer-events:none;
}
.cme-card__title{
  position:absolute; left:10px; bottom:10px; z-index:2;
  color:#fff; font-weight:800; letter-spacing:.2px;
  
  padding:.45rem .75rem; border-radius:10px;
}
.cme-cta-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1rem; }

/* ----- “Why choose” value tiles ----- */
.cme-tiles{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(14px, 2.5vw, 22px); }
@media (max-width: 992px){ .cme-tiles{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .cme-tiles{ grid-template-columns: 1fr; } }
.cme-tile{
  background:#fff; border:1px solid var(--border); border-radius:16px; padding:1.1rem;
  box-shadow: var(--shadow-s);
}
.dark-mode .cme-tile{ background: color-mix(in srgb, var(--bg) 94%, black 6%); }





/* =========================================
   TOKENS (light defaults)
   ========================================= */
:root{
  /* Color */
  --hero-ink:#0b2239;
  --hero-ink-muted:#5c6b7a;
  --brand-600:#0ea5e9;
  --brand-700:#0284c7;
  --brand-800:#0369a1;
  --btn-ink-onbrand:#ffffff;

  /* Surfaces (chips) */
  --chip-bg:rgba(255,255,255,0.7);
  --chip-border:rgba(11,21,33,0.28);

  /* Type & rhythm */
  --subtitle-size:clamp(1.6rem, 1vw + .8rem, 1.8rem);
  --subtitle-maxw:60ch;
  --muted-size: clamp(0.875rem, 1vw + .2rem, 1rem);
  --radius-lg:14px;
  --hero-gap:1.2rem;
  --actions-gap:.75rem;
  /* Misc */
  --ring:2px solid rgba(14,165,233,.45);
  --dot-gap:1ch; /* trust-dot spacing */
}





/* “Glass” chips/bars (same as hero trust chip) */
.cme-glass{
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  border-radius: 14px;
}

/* Gradient accents (match hero gradient) */
.cme-gradient-bg{
  background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
}
.dark-mode .cme-gradient-bg{
  background: linear-gradient(135deg, #60ccff 0%, #1e3a8a 100%);
}

/* Gradient stroke (used for outline buttons / cards / dividers) */
.cme-gradient-stroke{
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg, #1e3a8a, #0f172a) border-box;
}
.dark-mode .cme-gradient-stroke{
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg, #60ccff, #1e3a8a) border-box;
}

/* Section band that echoes hero background vibe */
.cme-band{
  background:
    radial-gradient(1200px 600px at 15% 10%, color-mix(in srgb, var(--brand-600) 12%, transparent), transparent 60%),
    radial-gradient(1200px 600px at 90% -10%, color-mix(in srgb, var(--brand-700) 10%, transparent), transparent 65%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, white 4%), var(--bg));
}
.dark-mode .cme-band{
  background:
    linear-gradient(90deg, rgba(6,17,34,.85) 0%, rgba(6,17,34,.48) 28%, rgba(6,17,34,.12) 56%, rgba(6,17,34,0) 72%),
    radial-gradient(1200px 600px at 20% 0%, color-mix(in srgb, var(--brand-700) 16%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 94%, black 6%), var(--bg));
}


.cme-section-title{
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--hero-ink);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
}
.cme-section-subtitle{ color: var(--muted); }

@keyframes title-drop-in{
  from{ opacity:0; transform: translateY(-18px); }
  to{ opacity:1; transform: translateY(0); }
}
.cme-section-title.cme-animate-in{
  animation: title-drop-in 650ms ease-out both;
}

/* Divider using the gradient stroke */
.cme-divider{
  height: 1px;
  border: 0;
  background: linear-gradient(135deg, transparent, var(--brand-700), transparent);
  opacity: .4;
}

/* Each button stays on a single line and doesn't shrink weirdly */
.cme-quickstrip__row.cme-quickstrip--nowrap .cme-btn{
  flex:0 0 auto;              /* ← no shrink */
  white-space:nowrap;         /* ← single line text */
  scroll-snap-align:start;
  z-index: 1000;
}

/* Optional: hide scrollbar (keeps scroll ability) */
.cme-quickstrip__row.cme-quickstrip--nowrap{
  scrollbar-width:none;       /* Firefox */
}
.cme-quickstrip__row.cme-quickstrip--nowrap::-webkit-scrollbar{
  display:none;               /* WebKit */
}

/* =========================================
   SECTION CONTAINER (non-hero)
   ========================================= */

/* Tokens (inherits your existing :root brand + spacing) */
:root{
  --cme-section-maxw: 1240px;                 /* match hero’s content width */
  --cme-section-gx: clamp(16px, 3vw, 20px);   /* horizontal gutters */
  --cme-section-gy: clamp(28px, 5vw, 56px);   /* vertical rhythm */
}

/* Base container – use INSIDE any .cme-section (except hero) */
.cme-section-container{
  max-width: calc(var(--cme-section-maxw) + (var(--cme-section-gx) * 2));
  margin-inline: auto;
  display: block;
  padding: calc(var(--cme-section-gy)) var(--cme-section-gx);
}

/* Tight / Wide spacing variants */
.cme-section-container--tight { padding-block: clamp(20px, 3.5vw, 40px); }
.cme-section-container--wide  { padding-block: clamp(48px, 7vw, 96px); }

/* Narrow / Full-width variants */
.cme-section-container--narrow{
  max-width: calc(960px + (var(--cme-section-gx) * 2));
}
.cme-section-container--full{
  max-width: none;            /* content can span viewport (keeps gutters) */
}

/* Optional full-bleed utility for media rows */
.cme-section-container .cme-bleed{
  margin-inline: calc(-1 * var(--cme-section-gx));
}
@media (min-width: 1280px){
  .cme-section-container .cme-bleed{
    margin-inline: calc((var(--cme-section-maxw) - 100vw)/2);
  }
}


.cme-section-title{
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.05;
  margin: 0 0 .6rem;
}
.cme-section-subtitle{
  color: var(--muted);
  font-size: clamp(1.02rem, 2.2vw, 1.18rem);
  margin: 0 0 1rem;
}

/* Dark-mode harmony with hero */
.dark-mode .cme-section-title{ color: var(--ink); }
.dark-mode .cme-section-subtitle{ color: var(--hero-ink-muted); }

.cme-glass{
  background: rgba(255,255,255,.6);
  border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border));
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  backdrop-filter: saturate(130%) blur(6px);
  -webkit-backdrop-filter: saturate(130%) blur(6px);
}
.dark-mode .cme-glass{
  background: rgba(13,23,38,.5);
  border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
  box-shadow: 0 8px 20px rgba(2,132,199,.18);
}


/* Section headings aligned to hero typography */
.cme-eyebrow{
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hero-ink-muted);
  font-size: .78rem;

}

@media (max-width: 640px){
  .cme-eyebrow{
   justify-content: center;
   text-align: center;
  }

}



/* ======================================================
   CME GLASS NAVBAR – Tokens + Full Responsive Sheet
   (organized, de-duplicated, and annotated)
   ====================================================== */
/* -----------------------------
   DESIGN TOKENS (global)
   ----------------------------- */
:root{
  /* Layout */
  --nav-h: 90px;
  --maxw: 1200px;

  /* Brand palette */
  --brand:       #0ea5e9;
  --brand-dark:  #062356;

  --bg:          #ecf2f3;
  
  /* Surfaces */
  --ink:         #0b1521;
  --muted:       #6b7a8c;
  --border:      rgba(8,47,73,0.12);

  /* Effects */
  --shadow-s:    0 6px 16px rgba(0,0,0,0.08);
  --shadow-l:    0 12px 32px rgba(0,0,0,0.16);

  /* Hamburger controls */
  --burger-size: 48px;     /* tap target (button) */
  --burger-thickness: 3px; /* line thickness */
  --burger-radius: 999px;  /* line rounding */
  --burger-inset-x: 10px;  /* left/right padding inside icon */
  --burger-gap: 8px;       /* vertical gap between lines */
}

/* Dark theme token overrides (scoped by a parent .dark-mode) */
.dark-mode{
  --bg:        #0d1b32;
  --ink:       #e2e8f0;
  --muted:     #9fb0c3;
  --border:    rgba(148,163,184,0.18);
  --brand:     #38bdf8;
  --brand-dark:#0ea5e9;
}

/* Slightly larger burger on small screens for accessibility */
@media (max-width: 991.98px){
  :root{
    --burger-size: 56px;
    --burger-thickness: 3px;
    --burger-inset-x: 10px;
    --burger-gap: 9px;
  }
}

/* ----------------------------------------------------
   NAVBAR BASE
   ---------------------------------------------------- */
.cme-nav{
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: var(--bg-glass);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-s);
  z-index: 1100;
  transition: background .3s ease, box-shadow .3s ease, opacity .12s ease;
}
body.scrolled .cme-nav{
  box-shadow: var(--shadow-l);
  background: color-mix(in srgb, var(--bg), var(--brand) 5%);
}
.cme-nav .nav-container{
  width: 100%;
  margin: 0 auto; padding: 0 1.2rem;
  display: flex; align-items: center; justify-content: space-between;
}

/* ----------------------------------------------------
   LOGO
   ---------------------------------------------------- */
.cme-nav .navbar-brand img{
  height: 78px; width: auto; display: block;
}

/* ----------------------------------------------------
   LINKS
   ---------------------------------------------------- */
.cme-nav .navbar-nav{
  display: flex; align-items: center; gap: 1.6rem;
  margin: 0; padding: 0; list-style: none;
}

.cme-nav .nav-link{
  position: relative; font-weight: 500;
  color: var(--hero-ink); text-decoration: none;
  padding: .5rem .75rem; border-radius: 8px;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.cme-nav .nav-link:hover {
  transform: scale(1.05);
}

.dark-mode .nav-link:hover {
  color: var(--ink);
}

.cme-nav .nav-link:hover,
.cme-nav .nav-link:focus-visible{
  color: var(--brand); outline: none;
}
.cme-nav .nav-link.active{ color: var(--brand); }
.cme-nav .nav-link.active::after{
  content: ""; display: block; height: 2px;
  background: var(--brand); border-radius: 999px; margin-top: 4px;
}

.nav-item p {
  margin: 0;
  padding: 0;
}

/* ----------------------------------------------------
   ICON BUTTONS (email / phone)
   ---------------------------------------------------- */
.cme-nav .button-container{ display: inline-flex; gap: .5rem; }
.cme-nav .btn-circle{
  --size: 48px;
  width: var(--size); height: var(--size);
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--border);
  color: var(--brand-dark);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  font-size: 1.4rem; font-weight: 600; text-align: center; text-decoration: none;
  justify-content: center;
}
.cme-nav .btn-circle:hover,
.cme-nav .btn-circle:focus-visible{
  transform: translateY(-1px);
  box-shadow: var(--shadow-l);
  border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
}

@media (max-width: 991.98px){
  .button-container { display: flex; gap: 1rem; margin-top: 1.5rem; }
  .cme-nav .btn-circle{ --size: 64px; font-size: 1.6rem; 
  }
}

/* ----------------------------------------------------
   DARK-MODE SWITCH
   ---------------------------------------------------- */
.navbar-pill-switch{ position: relative; width: 56px; height: 30px; }
.pill-checkbox{ position: absolute; opacity: 0; pointer-events: none; }
.pill-slider{
  display: block; width: 100%; height: 100%;
  background: color-mix(in srgb, var(--muted) 20%, transparent);
  border-radius: 999px; border: 1px solid var(--border);
  cursor: pointer; position: relative; transition: background .25s ease;
}
.pill-slider::after{
  content: ""; position: absolute; top: 2px; left: 4px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg); box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transition: left .25s ease, background .25s ease;
}
.pill-checkbox:checked + .pill-slider{
  background: color-mix(in srgb, var(--brand) 25%, transparent);
}
.pill-checkbox:checked + .pill-slider::after{
  left: calc(100% - 28px); background: var(--brand);
}

/* ----------------------------------------------------
   HAMBURGER (center-based; no conflicting rules)
   ---------------------------------------------------- */

/* Button (hidden on desktop; shown in responsive block) */
.cme-nav .navbar-toggler{
  width: var(--burger-size); height: var(--burger-size);
  border: none; background: transparent; position: relative;
  z-index: 2000; border-radius: 12px; touch-action: manipulation;
  display: none;                 /* default: hidden (desktop); see MQs */
}

/* Three bars positioned around vertical center */
.cme-nav .icon-bar{
  position: absolute;
  left: var(--burger-inset-x); right: var(--burger-inset-x);
  height: var(--burger-thickness);
  background: var(--ink); border-radius: var(--burger-radius);
  transition: transform .25s ease, opacity .2s ease, top .25s ease, background .2s ease;
}
.cme-nav .icon-bar.bar2{ top: calc(50% - var(--burger-thickness)/2); }
.cme-nav .icon-bar.bar1{ top: calc(50% - var(--burger-gap) - var(--burger-thickness)/2); }
.cme-nav .icon-bar.bar3{ top: calc(50% + var(--burger-gap) - var(--burger-thickness)/2); }
.dark-mode .cme-nav .icon-bar{ background: var(--ink); }

/* “X” (open) state toggled by adding `nav-open` to <html> */
html.nav-open .bar1{ transform: rotate(45deg); }
html.nav-open .bar2{ opacity: 0; }
html.nav-open .bar3{ transform: rotate(-45deg); }

/* ----------------------------------------------------
   OVERLAY (dim behind open sheet)
   ---------------------------------------------------- */
.navbar-overlay{
  position: fixed; inset: 0;
  background: var(--bg-glass);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 1200;
}
html.nav-open .navbar-overlay{ opacity: 1; pointer-events: auto; }



/* ----------------------------------------------------
   COLLAPSE CONTENT – DESKTOP DEFAULT
   ---------------------------------------------------- */
.cme-nav .collapse-content{
  display: flex; align-items: center; gap: 1rem;
  margin-left: auto;
}

/* ----------------------------------------------------
   RESPONSIVE – MOBILE & TABLET
   ---------------------------------------------------- */
@media (max-width:991.98px){
  /* Show burger and convert collapse to a full-screen sheet */
  .cme-nav .navbar-toggler{ display: inline-block; margin-left: auto; }

  .cme-nav .collapse-content{
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    max-height: 0; overflow: hidden; opacity: 0;
    visibility: hidden; pointer-events: none;
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
    padding: 0 1rem;
    transition: max-height .3s ease, opacity .3s ease, padding .2s ease;
    z-index: 1190; display: block;
  }

  html.nav-open .cme-nav .collapse-content{
    position: fixed; inset: 0; height: 100vh;
    max-height: none; opacity: 1; padding: 0;
    visibility: visible; pointer-events: auto;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    background: var(--bg);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    z-index: 1201;                 /* above overlay */
    animation: fadeIn .3s ease forwards;
  }

  .cme-nav .collapse-content .navbar-nav{
    display: flex; flex-direction: column; gap: 1.5rem; margin: 0; padding: 0;
  }
  .cme-nav .collapse-content .nav-link{
    font-size: 1.6rem; font-weight: 600; color: var(--ink); text-decoration: none;
  }
  .dark-mode .cme-nav .collapse-content .nav-link{ color: var(--muted); }
  .cme-nav .collapse-content .nav-link:hover{ color: var(--brand); }

  .cme-nav .nav-container{
    padding: 0 0.6rem;
  }
}

@keyframes fadeIn{
  from{ opacity: 0; transform: scale(.97) }
  to{   opacity: 1; transform: scale(1) }
}

/* ----------------------------------------------------
   DESKTOP ONLY
   ---------------------------------------------------- */
@media (min-width:992px){
  .cme-nav .collapse-content{
    position: static; height: auto; background: transparent; border: 0; display: flex;
  }
  .cme-nav .navbar-toggler{ display: none; } /* keep hidden on desktop */
}

/* ----------------------------------------------------
   ACCESSIBILITY
   ---------------------------------------------------- */
.cme-nav .nav-link:focus-visible,
.cme-nav .btn-circle:focus-visible{
  outline: 2px solid var(--brand); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){ *{ transition: none !important; } }


/* =====================================================
   HAMBURGER – tighter X alignment when nav is open
   ===================================================== */

/* Reposition bars 1 & 3 closer together for the "X" */
html.nav-open .cme-nav .icon-bar.bar1,
html.nav-open .cme-nav .icon-bar.bar3 {
  top: 50%;
  transform-origin: center;
}

/* Apply rotation after centering */
html.nav-open .cme-nav .icon-bar.bar1 {
  transform: translateY(-50%) rotate(45deg);
}

html.nav-open .cme-nav .icon-bar.bar2 {
  opacity: 0;
}

html.nav-open .cme-nav .icon-bar.bar3 {
  transform: translateY(-50%) rotate(-45deg);
}





  /* =======================================================
   COASTAL MARINE – HOME (Consolidated Styles)
   Structure:
   1) Tokens & Utilities
   2) Reusable Components (Buttons, Headings, Chips, Cards)
   3) Sections
      3.1 Hero
      3.2 What We Do / Services (incl. intent split)
      3.3 Trust / Brand Promise (Hero)
  3.4 Coverage / Response
  3.5 Reviews
  3.6 Enquiry / Quote Form
  4) Breakpoints
      A) ≤640px (mobile)
      B) 641–1024px (tablet)
      C) ≥992px (desktop grid bump)
      D) ≥1025px (desktop XL masks)
  ======================================================= */
  /* ---------- Hero Buttons: Hybrid System ---------- */
  .hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    margin-top: 2rem;
  }

  .hero-cta{
    /* base */
    --cta-bg: rgba(255,255,255,.08);
    --cta-border: rgba(255,255,255,.22);
    --cta-text: #fff;
    --cta-shadow: 0 14px 30px rgba(0,0,0,.22);
    --cta-shadow-hover: 0 18px 44px rgba(0,0,0,.28);
    --cta-ring: rgba(255,255,255,.18);

    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;

    padding:.95rem 1.25rem;
    border-radius:999px;
    border:1px solid var(--cta-border);
    background: var(--cta-bg);
    color: var(--cta-text);
    text-decoration:none;
    font-weight:700;
    letter-spacing:.01em;
    line-height:1;

    box-shadow: var(--cta-shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transform: translateZ(0);
    transition:
      transform .18s ease,
      box-shadow .18s ease,
      background .18s ease,
      border-color .18s ease,
      filter .18s ease;
    user-select:none;
    -webkit-tap-highlight-color: transparent;
  }

  .hero-cta:focus-visible{
    outline:none;
    box-shadow: var(--cta-shadow-hover), 0 0 0 4px var(--cta-ring);
  }

  .hero-cta:hover{
    transform: translateY(-1px);
    box-shadow: var(--cta-shadow-hover);
  }

  .hero-cta:active{
    transform: translateY(0);
    box-shadow: var(--cta-shadow);
    filter: saturate(1.05);
  }

  .hero-cta--lg{
    padding: 1.05rem 1.5rem;
    font-size: 1.05rem;
  }

  /* Variants */
  .hero-cta--accent{
    --cta-text: #081018;
    --cta-border: rgba(255,255,255,.18);
    --cta-ring: rgba(120,180,255,.28);
    background:
      radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,.55), rgba(255,255,255,0) 45%),
      linear-gradient(135deg, rgba(120,180,255,1), rgba(120,255,214,1));
  }
  .hero-cta--accent:hover{
    filter: brightness(1.03) saturate(1.05);
  }

  .hero-cta--ghost{
    --cta-text: #fff;
    --cta-bg: rgba(255,255,255,.06);
    --cta-border: rgba(255,255,255,.28);
    --cta-ring: rgba(255,255,255,.22);
    background:
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  }
  .hero-cta--ghost:hover{
    background:
      linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
    border-color: rgba(255,255,255,.35);
  }

  .hero-cta--signal{
    --cta-text: #0b0b0b;
    --cta-border: rgba(255,255,255,.12);
    --cta-ring: rgba(255,180,120,.28);
    background: radial-gradient(120% 120% at 20% 10%, rgba(255, 234, 234, 0.55), rgba(255,255,255,0) 42%), linear-gradient(135deg, rgb(120, 185, 255), rgb(57, 152, 174));
  }
  .hero-cta--signal:hover{
    filter: brightness(1.03) saturate(1.05);
  }

  /* Effects */
  .hero-cta--shine{
    overflow:hidden;
  }
  .hero-cta--shine::after{
    content:"";
    position:absolute;
    inset:-2px;
    background:
      linear-gradient(115deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.22) 35%,
        rgba(255,255,255,0) 55%);
    transform: translateX(-120%) skewX(-15deg);
    transition: transform .6s ease;
    pointer-events:none;
    mix-blend-mode: soft-light;
  }
  .hero-cta--shine:hover::after{
    transform: translateX(120%) skewX(-15deg);
  }

  .hero-cta--lift:hover{
    transform: translateY(-2px);
  }

  .hero-cta--pulse{
    box-shadow: var(--cta-shadow), 0 0 0 0 rgba(255,255,255,.0);
    animation: ctaPulse 2.2s ease-in-out infinite;
  }
  @keyframes ctaPulse{
    0%   { box-shadow: var(--cta-shadow), 0 0 0 0 rgba(255,255,255,.0); }
    55%  { box-shadow: var(--cta-shadow), 0 0 0 10px rgba(255,255,255,.06); }
    100% { box-shadow: var(--cta-shadow), 0 0 0 0 rgba(255,255,255,.0); }
  }

/* =======================================================
   1) TOKENS & UTILITIES
   ======================================================= */
:root{
  /* existing project tokens assumed:
     --brand, --brand-600, --brand-700, --bg, --ink, --muted, --border,
     --hero-ink, --hero-ink-muted, --shadow-s, --shadow-l, etc. */
  --wash-base: color-mix(in srgb, var(--bg) 84%, var(--ink) 16%);
}
.dark-mode{ --wash-base: color-mix(in srgb, var(--bg) 74%, var(--ink) 26%); }


/* Inline link with animated brand underline */
.cme-link{
  text-decoration: none;

  /* blue underline (same shade as before) */
  background:
    linear-gradient(135deg, var(--brand-700), var(--brand-800))
    0 100% / 0 2px no-repeat;

  transition: background-size .2s ease, color .15s ease;
  text-underline-offset: 2px;     /* keeps good spacing if UA adds underline */
}

.cme-link:hover{ background-size: 100% 2px; color:#020617; }



.dark-mode .cme-link{
  color: #fff;
}

/* Focus-visible: show the underline and a subtle ring for a11y */
.cme-link:focus-visible{
  outline: none;
  background-size: 100% 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-700) 25%, transparent);
}

/* Typography head group */
.cme-head{
  --gap-eyebrow-title: .35rem;
  --gap-title-sub:     .55rem;
  --gap-sub-content:   1.1rem;

  --eyebrow-ink: color-mix(in srgb, var(--ink) 72%, var(--bg));
  --title-ink:   var(--ink);
  --sub-ink:     color-mix(in srgb, var(--ink) 84%, var(--bg));

  margin: 0 0 var(--gap-sub-content);
}
.dark-mode .cme-head{
  --eyebrow-ink: color-mix(in srgb, var(--hero-ink) 82%, transparent);
  --title-ink:   var(--hero-ink);
  --sub-ink:     var(--hero-ink-muted);
}
.cme-head .cme-eyebrow{
  font-weight: 800; text-transform: uppercase; letter-spacing: .14em;
  font-size: .78rem; opacity: .95; color: var(--eyebrow-ink);
}
.cme-head .cme-section-title{
  margin: 0 0 var(--gap-title-sub);
  color: var(--title-ink);
  font-weight: 900; letter-spacing: -.01em;
  position: relative; /* required for underline */
}
.cme-head .cme-section-subtitle,
.cme-head .cme-lede{
  margin: 0;
  font-size: clamp(1.02rem, 2.1vw, 1.2rem);
  line-height: 1.58; color: var(--sub-ink);
}
.cme-head.cme-head--tight{
  --gap-eyebrow-title:.3rem; --gap-title-sub:.45rem; --gap-sub-content:.9rem;
}
.cme-head.cme-head--wide{
  --gap-eyebrow-title:.45rem; --gap-title-sub:.7rem; --gap-sub-content:1.25rem;
}
.cme-head.cme-head--center .cme-eyebrow,
.cme-head.cme-head--center .cme-section-title,
.cme-head.cme-head--center .cme-section-subtitle{ text-align:center; }

/* Global blue underline (Coverage style → everywhere) */
.cme-section .cme-section-title::after{
  content:""; position:absolute; left:0; bottom:-8px;
  width:72px; height:2px; border-radius:2px;
  background: linear-gradient(90deg, var(--brand-600, #0284c7), transparent);
  opacity:.95;
}

/* =======================================================
   2) REUSABLE COMPONENTS
   ======================================================= */

/* Buttons */
.cme-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:16px; font-weight:700; line-height:1; text-decoration:none;
  border:1px solid transparent; padding:.8rem 1rem;
  transition:transform .06s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.cme-btn--lg{ padding: .95rem 1.15rem; }
.cme-btn--primary{ background: var(--brand-700, #0369a1); color:#fff; box-shadow:0 6px 16px rgba(2,132,199,.24); }
.cme-btn--primary:hover{ background: color-mix(in srgb, var(--brand-700) 88%, black 12%); transform: translateY(-1px); }
.cme-btn--outline{ background: rgba(255, 255, 255, 0.12); border-color: var(--brand, #0ea5e9); color: var(--brand-dark, #0ea5e9); }
.cme-btn--outline:hover{ background: color-mix(in srgb, var(--brand) 10%, transparent); }
.cme-btn--light{ background:#fff; color: var(--brand-dark); border-color: var(--border); backdrop-filter: saturate(180%) blur(8px); -webkit-backdrop-filter: saturate(180%) blur(8px); box-shadow:0 6px 16px rgba(0,0,0,.12); }
.cme-btn[aria-busy="true"]{ position:relative; pointer-events:none; opacity:.85; }
.cme-btn[aria-busy="true"]::after{
  content:""; position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%;
  border:2px solid currentColor; border-right-color: transparent; animation:cmeSpin .7s linear infinite;
}
@keyframes cmeSpin{ to{ transform: translateY(-50%) rotate(360deg); } }

/* Cards (generic) */
.cme-card{ position:relative; overflow:hidden; border-radius:16px; display:block; text-decoration:none; box-shadow: var(--shadow-s); }
.cme-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-l); transition: transform .15s ease, box-shadow .2s ease; }
.cme-card video{ width:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.02); }
.cme-card__scrim{ position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none; }
.dark-mode .cme-card__scrim{ background: rgba(6,17,34,.2); }
.cme-card__title{
  position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; letter-spacing:.2px; text-align:center;
  padding:.8rem 1rem; text-shadow:0 2px 10px rgba(0,0,0,.35);
  font-size: clamp(1.15rem, 1.2vw + .8rem, 1.6rem);
}

/* Chips (generic) */
.cme-chip-row{ display:flex; flex-wrap:wrap; gap:.5rem .6rem; margin:.75rem 0 1rem; padding:0; list-style:none; }
.cme-chip-row li{
  padding:.45rem .7rem; border-radius:999px; font-weight:700; font-size:.9rem;
  background: color-mix(in srgb, var(--brand) 12%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  color: var(--ink);
}
.dark-mode .cme-chip-row li{ background: rgba(13,23,38,.55); border-color: rgba(14,165,233,.28); color: var(--hero-ink); }


/* =======================================================
   3) SECTIONS
   ======================================================= */

/* ---------- 3.1 HERO ---------- */
.cme-hero__subtitle{ white-space: normal; }

.cme-hero__overlay{ position:relative; z-index:1; width:100%; padding:2rem 0; }

/* ---------- 3.2 WHAT WE DO / SERVICES ---------- */
/* Section rhythm (scoped) */
#what-we-do .cme-section-container{
  --gap-eyebrow-title:.35rem; --gap-title-sub:.55rem; --gap-sub-grid:1.1rem;
  padding-top: 100px;
}
#what-we-do .cme-section-title{ margin:0 0 var(--gap-title-sub); }
#what-we-do .cme-section-subtitle{ margin:0 0 var(--gap-sub-grid); }

/* Grid */
.cme-services{
  display:grid; gap: clamp(.75rem, 2.5vw, 1.25rem);
  min-width:0;
}

/* Service card (glass) */
.cme-service{
  position:relative; display:flex; flex-direction:column;
  border-radius:16px; overflow:hidden;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  box-shadow: var(--shadow-s, 0 10px 30px rgba(0,0,0,.22));
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
  will-change: transform;
}
.cme-service > .cme-card{
  border:0;
  box-shadow:none;
  background:transparent;
  border-radius:0;
  overflow:hidden;
  position:relative;
  aspect-ratio: 16 / 9;
  min-height: clamp(200px, 28vw, 320px);
  background-color: color-mix(in srgb, #020617 70%, var(--bg) 30%);
}
.cme-service > .cme-card video,
.cme-service > .cme-card img{ width:100%; height: 100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.02); transition: transform .4s ease; }
.cme-service:hover > .cme-card :is(video,img){ transform: scale(1.03); }
.cme-service > .cme-card::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
}
.cme-service > .cme-card .cme-card__title{
  position:absolute; left:10px; bottom:10px; z-index:2;
  color:#fff; font-weight:800; letter-spacing:.2px; padding:.45rem .75rem; border-radius:10px;
}

/* Body */
.cme-service__info{
  border:0; padding:.9rem 1rem 1rem; color: var(--ink);
  display:flex; flex-direction:column; min-width:0; overflow:hidden;
}
.cme-service__info::before{
  content:""; display:block; height:1px; margin:-1px 0 .75rem 0;
  opacity:.7;
}
.cme-jobs{ margin:0; padding-left:1.1rem; color: var(--muted); }
.cme-jobs li{ margin:.2rem 0; }
.cme-service__cta{ margin-top:.75rem; display:flex; gap:.5rem; }
.cme-service__info .cme-service__cta{ margin-top:auto; }

/* Swipe track (mobile/tablet) */
.cme-services--snap{ -ms-overflow-style:none; scrollbar-width:none; }
.cme-services--snap::-webkit-scrollbar{ display:none; }

/* Helper tile */
.cme-service--helper{
  grid-column:auto; display:flex; flex-direction:column; justify-content:center;
  padding: clamp(1rem, 2.5vw, 1.5rem); border-radius: 16px;
}

/* Pagination dots */
.cme-snap-dots{ display:flex; gap:6px; justify-content:center; align-items:center; margin:.25rem 0 .5rem; min-height:12px; opacity:.9; }
.cme-snap-dots.is-hidden{ display:none; }
.cme-snap-dots .dot{
  width:12px; height:12px; border-radius:50%;
  background: color-mix(in srgb, var(--muted) 40%, transparent);
  transform: scale(.9);
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
  opacity:.7;
}
.cme-snap-dots .dot.is-active{ background: var(--brand-700); transform: scale(1.15); opacity:1; }
.dark-mode .cme-snap-dots .dot{ background: color-mix(in srgb, var(--hero-ink-muted) 45%, transparent); }
.dark-mode .cme-snap-dots .dot.is-active{ background: var(--brand-600); }

/* Intent split (simple) */
.cme-intent-cta--simple{
  display:grid; gap: clamp(14px, 2.2vw, 20px);
  grid-template-columns: repeat(2, minmax(0,1fr)); align-items:stretch; margin-top:.6rem;
}
.intent-box{
  display:flex; flex-direction:column; gap:.75rem;
  padding: clamp(14px, 2.4vw, 18px); border-radius:16px;
  background: color-mix(in srgb, var(--bg) 92%, white 8%);
  border:1px solid color-mix(in srgb, var(--brand) 20%, var(--border));
  box-shadow: var(--shadow-s);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.intent-box:hover{ transform: translateY(-2px); box-shadow: var(--shadow-l); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.dark-mode .intent-box{ background: color-mix(in srgb, var(--bg) 92%, black 8%); border-color: rgba(148,163,184,.22); }
.intent-title{ margin:0; font-weight:800; letter-spacing:-.01em; font-size: clamp(1.15rem, 1.2vw + .8rem, 1.4rem); color: var(--ink); }
.dark-mode .intent-title{ color: var(--hero-ink); }
.intent-sub{ margin:0; color: var(--muted); font-size:1rem; line-height:1.5; }
.intent-foot{ margin:.25rem 0 0; color: var(--muted); }
.intent-box .cme-btn{ align-self:flex-start; }


/* ---------- 3.5 REVIEWS ---------- */
.cme-reviews{ position:relative; }
.cme-review-grid{
  --cols: 3;
  margin-top:1.25rem; display:grid;
  grid-template-columns: repeat(var(--cols), minmax(0,1fr));
  gap: clamp(16px, 2.4vw, 24px); list-style:none; padding:0;
}
.cme-review-card{
  background: var(--bg); border:1px solid var(--border); border-radius:16px;
  box-shadow: var(--shadow-s);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease; overflow:hidden;
}
.dark-mode .cme-review-card{ background: color-mix(in srgb, var(--bg) 82%, #000 18%); border-color: rgba(148,163,184,.18); }
.cme-review-link{ display:flex; flex-direction:column; height:100%; padding: clamp(14px, 2vw, 18px); color:inherit; text-decoration:none; }
.cme-review-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-l); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.cme-review-head{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:start; position:relative; }
.cme-review-avatar{ width:56px; height:56px; border-radius:999px; object-fit:cover; border:1px solid rgba(0,0,0,.06); }
.dark-mode .cme-review-avatar{ border-color: rgba(255,255,255,.12); }
.cme-review-meta{ line-height:1.2; }
.cme-reviewer{ display:block; font-weight:700; }
.cme-review-date{ display:inline-block; font-size:.85rem; color: var(--muted); margin-top:2px; }
.cme-quote{ font-size:36px; line-height:1; color: color-mix(in srgb, var(--brand) 55%, var(--ink)); opacity:.16; transform: translateY(-6px); }
.cme-review-text{
  margin:10px 0 8px; font-size: clamp(1rem, 1.2vw, 1.05rem); line-height:1.55; color: var(--ink);
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
.dark-mode .cme-review-text{ color: var(--hero-ink); }
.cme-review-source{ display:inline-block; font-size:.9rem; color: var(--brand, #0ea5e9); border-bottom:1px dashed currentColor; opacity:.9; }
@keyframes cmeReviewIn{ from{opacity:0; transform: translateY(6px);} to{opacity:1; transform: translateY(0);} }
@media (prefers-reduced-motion: no-preference){
  .cme-review-card{ animation: cmeReviewIn .5s ease both; }
  .cme-review-card:nth-child(2){ animation-delay:.06s; }
  .cme-review-card:nth-child(3){ animation-delay:.12s; }
  .cme-review-card:nth-child(4){ animation-delay:.18s; }
}

/* ---------- 3.6 ENQUIRY / QUOTE FORM ---------- */
.cme-enquiry{
  background:
    radial-gradient(1200px 600px at 15% 10%, color-mix(in srgb, var(--brand-600) 12%, transparent), transparent 60%),
    radial-gradient(1200px 600px at 90% -10%, color-mix(in srgb, var(--brand-700) 10%, transparent), transparent 65%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, white 4%), var(--bg));
  color: var(--ink);
}
.dark-mode .cme-enquiry{
  background:
    linear-gradient(90deg, rgba(6,17,34,.85) 0%, rgba(6,17,34,.48) 28%, rgba(6,17,34,.12) 56%, rgba(6,17,34,0) 72%),
    radial-gradient(1200px 600px at 20% 0%, color-mix(in srgb, var(--brand-700) 16%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 94%, black 6%), var(--bg));
  color: var(--hero-ink);
}


/* Left align by default, even if the block carries --center */
#quote .cme-head.cme-head--center :is(.cme-eyebrow, .cme-section-title, .cme-section-subtitle){
  text-align: left;
}

/* On mobile (≤640px), re-center to match the rest of the site */
@media (max-width: 640px){
  #quote .cme-head.cme-head--center :is(.cme-eyebrow, .cme-section-title, .cme-section-subtitle){
    text-align: center;
  }
}

.cme-form-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(12px, 2.4vw, 16px);
}
.cme-field{ position:relative; }
.cme-field label{ display:block; font-weight:700; margin-bottom:.4rem; color:#0c2440; }
.dark-mode .cme-field label{ color: var(--ink); }
.cme-field :is(input, select, textarea){
  width:100%; border:1px solid var(--border); border-radius:12px; padding:.78rem .9rem;
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.cme-field textarea{ min-height:140px; resize:vertical; }
.cme-field :is(input,select,textarea):focus{
  outline:none; border-color: color-mix(in srgb, var(--brand) 55%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);
}
.cme-field ::placeholder{ color: color-mix(in srgb, var(--muted) 70%, var(--bg)); }
.cme-help{ margin-top:.35rem; font-size:.9rem; color: var(--muted); }
.cme-error{ margin-top:.35rem; font-size:.9rem; color:#b91c1c; font-weight:600; }
.cme-field.is-invalid :is(input,select,textarea){ border-color:#ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.12); }
.cme-file{
  position: relative; 
  border-radius:12px;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
.cme-file input[type="file"]{ width:1px; height:1px; opacity:0; position:absolute; left:-9999px; }
.cme-file__label{ display:flex; align-items:center; gap:.6rem; cursor:pointer; color: var(--ink); font-weight:700; }
.cme-file__hint{ font-size:.9rem; color: var(--muted); }
.cme-file__selected{ font-size:.9rem; color: var(--muted); }
.cme-file__selected.tagged{
  border: 1px solid color-mix(in srgb, var(--brand-500, #0ea5e9) 35%, var(--border));
  background: color-mix(in srgb, var(--bg) 96%, rgba(14,165,233,.08));
  padding: .35rem .6rem;
  border-radius: 10px;
  color: var(--ink);
}
.cme-file__reset{
  border: 1px solid rgba(239, 68, 68, .35);
  background: color-mix(in srgb, #fef2f2 85%, transparent);
  color: #b91c1c;
  cursor: pointer;
  font-weight: 800;
  padding: .35rem .55rem;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
  display: none;
}
.cme-file__reset:hover{
  color: #ef4444;
  border-color: rgba(239, 68, 68, .5);
  background: color-mix(in srgb, #fee2e2 90%, transparent);
}
.cme-submit{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.cme-alert{
  margin-top:.85rem; border:1px solid var(--border); border-radius:12px; padding:.75rem .9rem;
  background: color-mix(in srgb, #fff 94%, var(--brand) 6%); color: var(--ink);
}
.cme-alert--error{ border-color: rgba(239,68,68,.35); background: color-mix(in srgb, #fff 90%, #ef4444 10%); }
.cme-alert--success{ border-color: rgba(34,197,94,.35); background: color-mix(in srgb, #fff 90%, #22c55e 10%); }
.switch-group.is-invalid .pill-slider{
  border-color:#ef4444;
  box-shadow: 0 0 0 4px rgba(239,68,68,.12);
}
.switch-group.is-invalid .terms-text{
  color:#ffd2d2;
}

.cme-submit-modal{
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 28px);
}
.cme-submit-modal[hidden]{
  display: none;
}
.cme-submit-modal__scrim{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 32%, rgba(96, 204, 255, .18), transparent 34%),
    linear-gradient(180deg, rgba(2, 12, 27, .5), rgba(2, 8, 23, .84));
  backdrop-filter: blur(16px);
}
.cme-submit-modal__dialog{
  position: relative;
  width: min(100%, 540px);
  padding: clamp(1.65rem, 4vw, 2.3rem);
  border-radius: 32px;
  border: 1px solid rgba(154, 225, 255, .22);
  background:
    linear-gradient(180deg, rgba(4, 20, 45, .96), rgba(2, 11, 28, .95)),
    radial-gradient(circle at top, rgba(96, 204, 255, .12), transparent 48%);
  box-shadow:
    0 40px 80px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255,255,255,.06);
  color: #e9f6ff;
  text-align: center;
  overflow: hidden;
}
.cme-submit-modal__dialog::before{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  pointer-events: none;
}
.cme-submit-modal__close{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(154, 225, 255, .22);
  border-radius: 999px;
  background: rgba(3, 15, 35, .78);
  color: #dff7ff;
  display: grid;
  place-items: center;
}
.cme-submit-modal__eyebrow{
  position: relative;
  z-index: 1;
  margin: .4rem 0 0;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .78rem;
  color: rgba(191, 226, 244, .86);
}
.cme-submit-modal__title{
  position: relative;
  z-index: 1;
  margin: .7rem 0 .45rem;
  font-size: clamp(1.65rem, 2.8vw, 2.25rem);
  line-height: 1.04;
  color: #f5fbff;
}
.cme-submit-modal__text{
  position: relative;
  z-index: 1;
  max-width: 32ch;
  margin: 0 auto;
  color: rgba(207, 228, 239, .86);
}
.cme-submit-modal__actions{
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: 1.35rem;
}
.cme-submit-brand{
  position: relative;
  z-index: 1;
  width: 156px;
  height: 156px;
  margin: 0 auto;
  display: grid;
  place-items: center;
}
.cme-submit-brand__core{
  position: relative;
  z-index: 3;
  width: 94px;
  height: 94px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.2), transparent 32%),
    linear-gradient(180deg, rgba(10, 44, 88, .95), rgba(3, 18, 42, .95));
  border: 1px solid rgba(154, 225, 255, .28);
  box-shadow:
    0 16px 36px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.cme-submit-brand__logo{
  width: 78px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.24));
}
.cme-submit-brand__wave,
.cme-submit-brand__sweep,
.cme-submit-brand__check{
  position: absolute;
}
.cme-submit-brand__wave{
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(154, 225, 255, .18);
}
.cme-submit-brand__wave--outer{
  animation: cme-submit-wave 2.35s ease-out infinite;
}
.cme-submit-brand__wave--inner{
  inset: 14px;
  border-color: rgba(154, 225, 255, .28);
  animation: cme-submit-wave 2.35s ease-out infinite .32s;
}
.cme-submit-brand__sweep{
  inset: -10px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, transparent 0deg 288deg, rgba(165, 227, 255, .94) 332deg, rgba(96, 204, 255, .18) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 61%, #000 66%);
  mask: radial-gradient(circle, transparent 0 61%, #000 66%);
  opacity: .92;
  animation: cme-submit-spin 1.65s linear infinite;
}
.cme-submit-brand__check{
  width: 42px;
  height: 42px;
  top: 10px;
  right: 50%;
  z-index: 4;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #a5e3ff, #38bdf8);
  color: #05263a;
  box-shadow: 0 14px 24px rgba(14, 165, 233, .34);
  opacity: 0;
  transform: translateX(50%) scale(.86);
  transition: opacity .2s ease, transform .2s ease;
}
.cme-submit-modal[data-state="success"] .cme-submit-brand__check{
  opacity: 1;
  transform: translateX(50%) scale(1);
}
.cme-submit-modal[data-state="success"] .cme-submit-brand__sweep{
  animation-duration: 3.4s;
  opacity: .5;
}
.cme-submit-modal[data-state="error"] .cme-submit-brand__sweep{
  background: conic-gradient(from 180deg, transparent 0deg 288deg, rgba(255, 153, 153, .9) 332deg, rgba(239, 68, 68, .18) 360deg);
}
html.submit-modal-open,
body.submit-modal-open{
  overflow: hidden;
}

@keyframes cme-submit-spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

@keyframes cme-submit-wave{
  0%{
    opacity: .85;
    transform: scale(.82);
  }
  70%{
    opacity: .18;
    transform: scale(1.08);
  }
  100%{
    opacity: 0;
    transform: scale(1.18);
  }
}

@media (prefers-reduced-motion: reduce){
  .cme-submit-brand__wave,
  .cme-submit-brand__sweep{
    animation: none !important;
  }
}

/* ---------- A) ≤640px (mobile) ---------- */
@media (max-width: 640px){
  /* Services: snap track for mobile */
  .cme-services.cme-services--snap{
    display:flex; flex-wrap:nowrap; align-items:stretch;
    gap: clamp(.75rem, 3vw, 1rem);
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; scroll-padding-inline: clamp(.75rem, 4vw, 1.25rem);
    cursor:grab; scrollbar-width:none; padding-bottom:.5rem;
    mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    overscroll-behavior-inline: contain; touch-action: pan-x pinch-zoom;
  }
  .cme-services.cme-services--snap > :is(.cme-service, .cme-service--helper){
    flex: 0 0 clamp(260px, 82vw, 320px); min-width: clamp(260px, 82vw, 320px);
  }
  .cme-services.cme-services--snap .cme-service{ scroll-snap-align:start; }

  .cme-review-grid{ --cols: 1; }

  .cme-form-grid{ grid-template-columns: 1fr; }
  .cme-submit-brand{
    width: 132px;
    height: 132px;
  }
  .cme-submit-brand__core{
    width: 82px;
    height: 82px;
  }
  .cme-submit-brand__logo{
    width: 68px;
    height: 68px;
  }
}

/* ---------- B) 641–1024px (tablet) ---------- */
@media (min-width: 641px) and (max-width: 1024px){
  /* Services: narrower centered cards */
  .cme-services.cme-services--snap{
    display:flex; flex-wrap:nowrap; align-items:stretch;
    gap: clamp(.5rem, 2vw, .9rem);
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; scroll-padding-inline:50vw;
    cursor:grab; scrollbar-width:none;
    mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  }
  .cme-services.cme-services--snap > :is(.cme-service, .cme-service--helper){
    flex: 0 0 clamp(300px, 60vw, 360px); min-width: clamp(300px, 60vw, 360px);
  }

  .cme-services.cme-services--snap .cme-service{ scroll-snap-align:center; }
  .cme-review-grid{ --cols:2; }
  .cme-form-grid{ grid-template-columns: 1fr; }
}

.cme-review-grid{
  grid-auto-rows: 1fr;           /* rows take the height of the tallest card in each row */
  align-items: stretch;
}

.cme-review-card{
  height: 100%;
  display: flex;                 /* allow inner link to stretch */
}

.cme-review-link{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.cme-review-source{
  margin-top: auto;
  align-self: flex-start;
}

/* ===============================
   HERO
   =============================== */
.cme-hero__bg{
  background-image: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* ===============================
   TRUST / BRAND PROMISE
   =============================== */
.cme-trust{
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}
.cme-trust__band{
  position: relative;
  height: clamp(240px, 40svh, 360px);
  overflow: hidden;
  isolation: isolate;
}
.cme-trust__img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter: saturate(1.02) contrast(1.02);
  /* vertical fade top/bottom */
  --fade-top: 18%;
  --fade-bottom: 22%;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.25) calc(var(--fade-top) * .6),
    rgba(0,0,0,1)   var(--fade-top),
    rgba(0,0,0,1)   calc(100% - var(--fade-bottom)),
    rgba(0,0,0,.25) calc(100% - var(--fade-bottom) * .6),
    rgba(0,0,0,0) 100%
  );
          mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.25) calc(var(--fade-top) * .6),
    rgba(0,0,0,1)   var(--fade-top),
    rgba(0,0,0,1)   calc(100% - var(--fade-bottom)),
    rgba(0,0,0,.25) calc(100% - var(--fade-bottom) * .6),
    rgba(0,0,0,0) 100%
  );
}
/* Fallback if masks aren’t supported */
@supports not (mask-image: linear-gradient(black, white)){
  .cme-trust__band::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,.35) 0%,
      rgba(0,0,0,0) 18%,
      rgba(0,0,0,0) 82%,
      rgba(0,0,0,.35) 100%
    );
    z-index:1;
  }
}

/* Content below the band */
.cme-trust .cme-section-container{
  position: relative;
  padding-block: clamp(28px, 6vw, 64px);
}
.cme-trust__text{
  font-size: clamp(1.02rem, 2.1vw, 1.18rem);
  line-height: 1.55;
  color: var(--muted);
}
.dark-mode .cme-trust__text{ color: var(--hero-ink-muted); }
.cme-trust__cta{ gap:.6rem; flex-wrap:wrap; margin-top:.2rem; }

/* Floating inline logo (centered, half-overhang) */
.cme-trust__logoInline{
  position: absolute;
  left:50%; top:0;
  transform: translate(-50%, -50%);
  z-index:3; pointer-events:none;
  display:flex; justify-content:center; align-items:center;
}
.cme-trust__logoInline-img{
  width: clamp(96px, 18vw, 180px);
  height:auto; object-fit:contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.14));
}
.cme-trust__copy{
  padding-top: clamp(56px, 5vw, 112px);
  text-align:left;
  display:grid; gap:.8rem;
  padding-bottom: clamp(16px, 5vw, 32px);
}
@media (max-width: 640px){
  .cme-trust__band{ height: clamp(120px, 28svh, 200px); }
  .cme-trust__logo{ display:none; } /* legacy logo-in-band off */
  .cme-trust__logoInline-img{ width: clamp(84px, 24vw, 140px); }
  .cme-trust__copy{ padding-top: clamp(44px, 12vw, 88px); }
}

/* ===============================
   QUOTE BAND
   =============================== */
.quote-band{
  position: relative; isolation:isolate;
}

/* Head on media (two variants) */
.quote-band .cme-head--onvideo,
.quote-band .cme-head--onimage{
  text-align:left; max-width:900px;
}
.quote-band .cme-head--onvideo .cme-eyebrow,
.quote-band .cme-head--onimage .cme-eyebrow{
  letter-spacing:.12em; text-transform:uppercase;
}



/* Glassy form card (shared) */
.quote-card{
  background: linear-gradient(180deg, var(--surface, rgba(255,255,255,.72)), var(--surface-2, rgba(255,255,255,.58)));
  border: 1px solid var(--card-border, rgba(148,163,184,.25));
  border-radius: var(--radius-lg, 18px);
  box-shadow: 0 12px 34px rgba(14,165,233,.22), inset 0 1px 0 rgba(255,255,255,.12);
  padding: clamp(1rem, 3vw, 1.5rem);
  backdrop-filter: blur(8px) saturate(1.02);
  max-width: 880px; margin: 0 auto;
}
.dark-mode .quote-card{
  background: linear-gradient(180deg, var(--surface-dark, rgba(20,20,25,.58)), var(--surface-2-dark, rgba(20,20,25,.72)));
  border: 1px solid var(--card-border-dark, rgba(0,0,0,.25));
}

/* Reduced motion: hide video variant */
@media (prefers-reduced-motion: reduce){
  .quote-video{ display:none; }
}





/* Full-width still keeps side gutters */
.cme-section-container--full{
  max-width: none;
  padding-inline: var(--cme-section-gx);   /* ← keep gutters even when full width */
}

/* Bleed utility expects gutters to exist */
.cme-section-container .cme-bleed{
  margin-inline: calc(-1 * var(--cme-section-gx));
}
@media (min-width: 1280px){
  .cme-section-container .cme-bleed{
    margin-inline: calc((var(--cme-section-maxw) - 100vw)/2);
  }
}





  /* ===============================
   Services page → match homepage
   ================================ */

/* Hero image + same left→right overlay wash as home */
.services-hero .cme-hero__bg{
  background-image:
    var(--services-hero-img),
    radial-gradient(1200px 600px at 15% 10%, color-mix(in srgb, var(--brand-600) 24%, transparent), transparent 60%),
    radial-gradient(1200px 600px at 90% -10%, color-mix(in srgb, var(--brand-700) 18%, transparent), transparent 65%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, white 4%), var(--bg));
  background-size: cover, auto, auto, cover;
  background-repeat: no-repeat;
  background-position: center right 8%, center, center, center;
}
.services-hero .cme-hero__overlay::before{
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image: linear-gradient(90deg,
    rgba(0,0,0,.45) 45%,
    rgba(0,0,0,.28) 65%,
    rgba(0,0,0,.12) 85%,
    rgba(0,0,0,0) 100%
  );
}

/* Use the homepage grid/content sizing */
.services-hero .cme-hero__grid{ grid-template-columns:1.2fr .8fr; }
.services-hero .cme-hero__grid--content-left{ grid-template-columns:1.2fr .8fr; }
.services-hero .cme-hero__grid.cme-hero__grid--content-left .cme-hero__content{ max-width:760px; }

/* Quickstrip: same behavior as home */
.services-quickstrip .cme-quickstrip__row{ gap:.6rem; }
.services-quickstrip .cme-quickstrip__row.cme-quickstrip--nowrap .cme-btn{ flex:0 0 auto; white-space:nowrap; }

/* Cards: apply home card visuals */
.services-grid .cme-card{
  position:relative; overflow:hidden; border-radius:16px; display:block; text-decoration:none;
  background: color-mix(in srgb, var(--bg) 85%, black 15%);
  box-shadow: var(--shadow-s); transform: translateZ(0);
}
.services-grid .cme-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-l); }
.services-grid .cme-card img{ width:100%; height:260px; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.02); }
.services-grid .cme-card::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
}
.services-grid .cme-card__title{
  position:absolute; left:10px; bottom:10px; z-index:2;
  color:#fff; font-weight:800; letter-spacing:.2px; padding:.45rem .75rem; border-radius:10px;
}

/* Grid columns to match home */
.services-grid{
  display:grid; gap: clamp(.75rem, 2.5vw, 1.25rem);
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width:640px){  .services-grid{ grid-template-columns: 1fr; } }




  /* ===== Coverage badges / chips ticker ===== */
.cme-ticker{
  width: 100%;
  display: flex;
  justify-content: center;
}
.cme-ticker{
  width: 100%;
  display: flex;
  justify-content: center;
}

.cme-ticker--badges{ margin-bottom: clamp(.6rem, 1.6vw, .9rem); }
.cme-ticker--chips{ margin-top: clamp(.35rem, 1.4vw, .65rem); }
.cme-ticker__track{
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: max-content;
}
.cme-ticker__track.is-rolling{
  animation: cmeTicker var(--ticker-duration, 24s) linear infinite;
}
.cme-ticker__track:hover{
  animation-play-state: paused;
}
@keyframes cmeTicker{
  from{ transform: translateX(0); }
  to{ transform: translateX(calc(-1 * var(--ticker-distance, 50%ti))); }
}

:root {
  /* Pill theme (shared by contact + services) */
  --pill-track-bg: rgba(255, 255, 255, 0.06);
  --pill-thumb-bg: rgba(255, 255, 255, 0.14);
  --pill-text-color: #ffffff;
  --pill-text-muted: rgba(255, 255, 255, 0.6);
}

.cme-hero__trust {
  display: flex;
  justify-content: flex-end; /* center in hero */
  align-items: center;
  margin-top: clamp(.5rem, 1.5vw, .875rem);
  color: var(--muted-ink, color-mix(in srgb, currentColor 72%, transparent));
  font-weight: 500;
  letter-spacing: .01em;
  width: 100%;
}

.cme-hero__trust .cme-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;      /* keep each phrase intact */
  padding-inline: .5rem;    /* space around items */
  position: relative;
}

.cme-hero__trust .cme-item + .cme-item {
  margin-left: .25rem;
}

.cme-hero__trust .cme-item + .cme-item::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.85em;
  margin-right: .75rem;
  background: currentColor;
  opacity: .35;
  transform: translateY(1px);
}

.dark-mode .cme-hero__trust {
  color: var(--muted-ink-dark, color-mix(in srgb, #fff 72%, transparent));
  opacity: .95;
}

@media (max-width: 420px) {
  .cme-hero__trust { width: 100%; }
  .cme-hero__trust .cme-item { padding-inline: .375rem; }
  .cme-hero__trust .cme-item + .cme-item::before { margin-right: .5rem; }
}

@media (min-width: 840px) {
  .cme-hero__trust--left { justify-content: flex-start; }
}

@media (hover:hover) and (prefers-reduced-motion: no-preference) {
  .cme-hero__trust .cme-item {
    transition: opacity .2s ease;
  }
  .cme-hero__trust .cme-item:hover {
    opacity: 1;
  }
}

/* ====================================
   SNAP DOTS (SCROLLER INDICATOR)
   ==================================== */
.cme-snap-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: .25rem 0 .75rem;
  min-height: 14px;
  opacity: .9;
}
.cme-snap-dots.is-hidden {
  display: none;
}
.cme-snap-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted, #94a3b8) 45%, transparent);
  opacity: .5;
  transform: scale(.9);
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
}
.cme-snap-dots .dot.is-active {
  background: var(--brand-600, #0ea5e9);
  opacity: 1;
  transform: scale(1.15);
}
.dark-mode .cme-snap-dots .dot {
  background: color-mix(in srgb, var(--hero-ink-muted, #cbd5f5) 45%, transparent);
}
.dark-mode .cme-snap-dots .dot.is-active {
  background: var(--brand-400, #38bdf8);
}

/* ====================================
   SHARED PILL SWITCH THEME
   (CONTACT + SERVICES)
   ==================================== */

/* Track container styling (shared) */
.cme-pill-switch,
.cme-service-switch {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: stretch;
  position: relative;
  padding: 0.25rem;
  border-radius: 999px;
background: rgba(84, 65, 65, 0.06);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}


/* Pill buttons (shared) */
.cme-pill,
.cme-service-pill {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
  color: #000;
}

.dark-mode .cme-pill,
.dark-mode .cme-service-pill {
  color: #fff;
}

/* Selected pill text becomes bright */
.cme-pill[aria-selected="true"],
.cme-service-pill[aria-selected="true"] {
  color: #000;
  background-color: var(--brand);
  font-weight: 700;
  
}

.dark-mode .cme-pill[aria-selected="true"],
.dark-mode .cme-service-pill[aria-selected="true"] {
  color: #fff;
}

/* Thumb (highlight background, shared) */
.cme-pill__thumb,
.cme-service-pill__thumb {
  position: absolute;
  top: 2px;
  left: 0;
  height: calc(100% - 4px);
  border-radius: 999px;
  background: var(--pill-thumb-bg);
  pointer-events: none;
  transition: width 200ms ease, transform 200ms ease;
}

/* If you need slightly different sizing per system later,
   you can add overrides, e.g.:

   .cme-service-switch { margin-top: .75rem; }
*/

/* ====================================
   ANCHOR OFFSET & HEAD TRANSITIONS
   ==================================== */

/* Anchor offset for sticky */
.cme-anchor {
  position: relative;
  scroll-margin-top: var(--scroll-offset, 96px);
}

/* Smooth head text transitions */
[data-head] > * {
  transition: opacity .22s ease, transform .22s ease;
  will-change: opacity, transform;
}
[data-head].is-swapping > * {
  opacity: 0;
  transform: translateY(4px);
}

/* ====================================
   SWITCH PANELS (TAB CONTENT)
   ==================================== */
.cme-switch-panels {
  margin-top: clamp(.5rem, 1.5vw, .75rem);
}
.cme-switch-panel[hidden] {
  display: none !important;
}
.cme-switch-panel.is-active {
  display: block;
}

/* ====================================
   SECTION-SPECIFIC TWEAKS
   ==================================== */
#reviews {
  padding-top: 6rem;
  min-height: 100vh;
}

/* Intent CTA layout */
.intent-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  justify-content: left;
  text-align: center;
}



  /* ============================
   WHAT WE DO – service layout
   ============================ */

/* Base: mobile – stacked */
.cme-services.cme-services--with-info .cme-service {
  display: flex;
  flex-direction: column;
}

/* Video/card and info take full width on small screens */
.cme-services.cme-services--with-info .cme-service > .cme-card,
.cme-services.cme-services--with-info .cme-service > .cme-service__info {
  width: 100%;
}

/* Medium+ screens: side-by-side row */
@media (min-width: 900px) {
  .cme-services.cme-services--with-info .cme-service {
    flex-direction: row;
    align-items: stretch;
  }

  /* Give the video/card slightly more space than the text */
  .cme-services.cme-services--with-info .cme-service > .cme-card {
    flex: 3 1 0;
  }

  .cme-services.cme-services--with-info .cme-service > .cme-service__info {
    flex: 2 1 260px;
  }
}

/* Optional: bullet box styling */
.cme-services.cme-services--with-info .cme-service__info {
  padding: 1.25rem 1.5rem;
  border-radius: 1rem;
}

.cme-services.cme-services--with-info .cme-jobs {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cme-services.cme-services--with-info .cme-jobs li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
  line-height: 1.5;
}


/* ============================
   WHAT WE DO – hover behaviour
   ============================ */

/* Base card in "What we do" */
#what-we-do .cme-services.cme-services--with-info .cme-card {
  position: relative;
  display: block;
  border-radius: 1rem;
  overflow: hidden;
  cursor: pointer;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}



 .cme-service-pill span:hover { background-size: 100% 2px; }

  .cme-service-pill span {
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%; /* bottom underline */
  background-size: 0% 2px;     /* hidden underline */
  transition: background-size .25s ease;
  font-weight: 700;
}

.cme-service-pill span:hover {
  background-size: 100% 2px;   /* full underline on hover */
}

/* WHAT WE DO — video + info layout */
.cme-services.cme-services--with-info .cme-service {
  display: flex;
  flex-direction: column;
}

.cme-services.cme-services--with-info .cme-service > .cme-card,
.cme-services.cme-services--with-info .cme-service > .cme-service__info {
  width: 100%;
}

/* Side-by-side on wider screens */
@media (min-width: 900px) {
  .cme-services.cme-services--with-info .cme-service {
    flex-direction: row;
    align-items: stretch;
  }

  .cme-services.cme-services--with-info .cme-service > .cme-card {
    flex: 3 1 0;
  }

  .cme-services.cme-services--with-info .cme-service > .cme-service__info {
    flex: 2 1 0;
  }
}

#what-we-do .cme-services.cme-services--with-info .cme-jobs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem 0;
}

#what-we-do .cme-services.cme-services--with-info .cme-jobs li {
  display: flex;
align-items: center;
  font-size: 1.2rem;
  line-height: 1.55;
}

#what-we-do .cme-services.cme-services--with-info .cme-jobs li i {
  font-size: 1rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(56, 189, 248, 0.12);
  border-radius: 999px;
  color: var(--brand-400, #38bdf8);
  flex-shrink: 0;
  backdrop-filter: blur(3px);
}


#what-we-do .cme-services.cme-services--with-info .cme-jobs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem 0;
}

#what-we-do .cme-services.cme-services--with-info .cme-jobs li {
  display: flex;
align-items: center;  gap: 0.75rem;
  font-size: 1.2rem;
  line-height: 1.55;
}

#what-we-do .cme-services.cme-services--with-info .cme-jobs li i {
  font-size: 1.4rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(56, 189, 248, 0.12);
  border-radius: 999px;
  color: var(--brand-400, #38bdf8);
  flex-shrink: 0;
  backdrop-filter: blur(3px);
}





/* ============================
   WHAT WE DO – service layout
   ============================ */

/* Base: mobile – stacked */
#what-we-do .cme-services.cme-services--with-info .cme-service {
  display: flex;
  flex-direction: column;
}

/* Card + info full width on small screens */
#what-we-do .cme-services.cme-services--with-info .cme-service > .cme-card,
#what-we-do .cme-services.cme-services--with-info .cme-service > .cme-service__info {
  width: 100%;
}

/* Break to side-by-side on smaller screens (e.g. 600px) */
@media (min-width: 600px) {
  #what-we-do .cme-services.cme-services--with-info .cme-service {
    flex-direction: row;
    align-items: stretch;

  }

  /* Give the video/card slightly more space than the text */
  #what-we-do .cme-services.cme-services--with-info .cme-service > .cme-card {
    flex: 3 1 0;
  }

  #what-we-do .cme-services.cme-services--with-info .cme-service > .cme-service__info {
    flex: 2 1 260px;
  }
}


.cme-card:hover .cme-link {
  background-size: 100% 2px;
}


.cme-gradient-text{
  --c1:#0044ff; --c2:#0f172a;
  background:linear-gradient(180deg,var(--c1) 0%,var(--c2) 100%);
  color: currentColor;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .cme-gradient-text{
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color: transparent;
    color:transparent;
  }
}
.cme-hero__subtitle{
  color:var(--brand-800);
  font-size:var(--subtitle-size);
  line-height:1.45;
  max-width:var(--subtitle-maxw);
  text-shadow:0 1px 4px rgba(0,0,0,.15);
  white-space:nowrap;
   flex-wrap:wrap; display:inline-flex; font-weight:600; font-size:1.6rem; line-height:1.4;
     margin-top:1rem;
}


.cme-hero__trust {
  position: absolute;
  bottom: 4.2rem;
  left: 50%;
  transform: translateX(-50%);
}

.cme-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:var(--radius-lg); font-weight:600; line-height:1; border:1px solid transparent; text-decoration:none; transition:transform .06s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; }
.cme-btn--primary{ background:var(--brand-700); color:var(--btn-ink-onbrand); box-shadow:0 6px 16px rgba(2,132,199,.24); }
.cme-btn--primary:hover{ background:var(--brand-800); transform:translateY(-1px); }
.cme-btn--primary:active{ transform:translateY(0); }
.cme-btn--primary:focus-visible{ outline:var(--ring); outline-offset:2px; }
.cme-btn--outline{ background:transparent; color:var(--brand-dark); border-color:rgba(11,21,33,.18); }
.cme-btn--outline:hover{ border-color:var(--brand-700); color: #40bcf5; transform:translateY(-1px); }

.cme-muted{
  display:inline-flex; align-items:flex-end; flex-wrap:wrap; gap:0;
  padding:.55rem .8rem; border-radius:14px; font-weight:700; letter-spacing:.2px;
  color:#fff; font-size:var(--muted-size);
  border:1px solid var(--chip-border);
  box-shadow:0 2px 10px rgba(0,0,0,.06); backdrop-filter:saturate(120%) blur(6px);
  margin:0; backdrop-filter: saturate(120%) blur(6px);
}

.dark-mode .cme-muted{
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  color: var(--hero-ink-muted);
}

.cme-muted .cme-dot{ margin:0 var(--dot-gap); color:#fff; opacity:.7; }

.cme-hero__trust{
  position:absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 2;
  left: auto;
  transform: none;
}

.cme-hero__trustchip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.5rem .75rem;
  border-radius:14px;
  background: rgba(6,14,28,0.45);
  border:1px solid rgba(226,238,246,0.24);
  font-size: .92rem;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

.cme-hero__trustchip i{
  color:#00b7ff;;
  font-size: 1.05rem;
}

@media (max-width: 650px){
  .cme-hero__trust{
    display: none !important;
  }
}

.dark-mode{
  --hero-ink:#e6eef6; --hero-ink-muted:#9fb2c6;
  --chip-bg:rgba(13,23,38,0.82); --chip-border:rgba(226,238,246,0.28);
  --brand-600:#38bdf8; --brand-700:#0ea5e9; --brand-800:#0284c7;
}

.dark-mode .cme-hero__overlay::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;         
  pointer-events:none;
  background-color: rgba(0,0,0,.5);
  background-image: linear-gradient(
    90deg,
    rgba(6,17,34,.85) 0%,
    rgba(6,17,34,.48) 28%,
    rgba(6,17,34,.12) 56%,
    rgba(6,17,34,0)   72%
  );
}
.dark-mode .cme-gradient-text{ --c1:#a5e3ff; --c2:#60ccff; text-shadow:0 2px 22px rgba(0,0,0,.45); }
.dark-mode .cme-btn--outline{ color:var(--hero-ink); border-color:rgba(230,240,252,.18); }
.dark-mode .cme-btn--outline:hover{ border-color:var(--brand-700); color:var(--brand-700); }

  
/* Quick globals: rounded CTAs on this page */
.cme-btn,
.cme-cta-btn,
.hero-cta{
  border-radius: 999px !important;
}

/* =========================================
   BASE (shared across all sizes)
   ========================================= */
.cme-hero{
  position:relative; min-height: 92vh;
  display:grid; place-items:stretch;
  overflow:clip;
}

.cme-hero__bg{
  position:absolute; inset:0; z-index:0;
  background: var(--bg, #0b1224);
  background-size:cover; background-repeat:no-repeat;
  background-position:center right 10%;
  overflow: hidden;
}
.cme-hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
  z-index:0;
  filter: saturate(1.02) contrast(1.04);
  opacity:0;
  transition: opacity .2s ease;
}
.cme-hero__video.is-active{
  opacity:1;
}
.cme-hero__video.has-error{
  opacity:0 !important;
}

/* Entrance animations */
.anim-slide-in-left{ opacity:0; animation: slide-in-left 600ms ease-out forwards; }
.anim-slide-in-right{ opacity:0; animation: slide-in-right 600ms ease-out forwards; }
.anim-slide-in-up{ opacity:0; animation: slide-in-up 600ms ease-out forwards; }
.anim-slide-in-down{ opacity:0; animation: slide-in-down 600ms ease-out forwards; }
.anim-fade-in{ opacity:0; animation: fade-in 520ms ease-out forwards; }
.anim-click-in{ opacity:0; animation: click-in 520ms ease-out forwards; }
@keyframes slide-in-left{ from{opacity:0; transform: translateX(-18px);} to{opacity:1; transform: translateX(0);} }
@keyframes slide-in-right{ from{opacity:0; transform: translateX(18px);} to{opacity:1; transform: translateX(0);} }
@keyframes slide-in-up{ from{opacity:0; transform: translateY(18px);} to{opacity:1; transform: translateY(0);} }
@keyframes slide-in-down{ from{opacity:0; transform: translateY(-18px);} to{opacity:1; transform: translateY(0);} }
@keyframes fade-in{ from{opacity:0;} to{opacity:1;} }
@keyframes click-in{
  from{ opacity:0; transform: scale(.94) translateY(8px); }
  60%{ opacity:1; transform: scale(1.02) translateY(0); }
  to{ opacity:1; transform: scale(1) translateY(0); }
}

.hero-word{
  display:inline-block;
  color: var(--hero-ink, #e6eef6);
  opacity:1;
  transform: translateY(0);
  line-height: 1.05em;
}
.js .hero-word{
  transition: opacity 420ms ease, transform 420ms ease;
}
.js .hero-word.hero-word--pending{
  opacity:0;
  transform: translateY(12px);
}
.js .hero-word.is-visible{
  opacity:1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .js .hero-word,
  .js .hero-word.hero-word--pending,
  .js .hero-word.is-visible{
    transition: none;
    opacity: 1;
    transform: none;
  }
}

.cme-hero__overlay{
  position:relative; z-index:1; width:100%; height:100vh;
  display:grid; place-content:center start; isolation:isolate;
  padding: clamp(1rem, 3vw, 1.5rem);
  padding-left: calc(clamp(1rem, 3vw, 1.5rem) + env(safe-area-inset-left));
  padding-right: calc(clamp(1rem, 3vw, 1.5rem) + env(safe-area-inset-right));
}

.cme-hero__text{
  color:#000000;
  font-size: 1.6rem;
  line-height:1.5;
  max-width:var(--subtitle-maxw);
  margin-top:1.2rem;
}

.dark-mode .cme-hero__text{
  color: var(--hero-ink);
}



.cme-hero__overlay::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
}
.cme-hero{
  position: relative;
}
.cme-hero__grid{
  display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(20px, 4vw, 40px);
}
@media (max-width: 992px){ .cme-hero__grid{ grid-template-columns:1fr; } }

.cme-hero__grid--content-only{ display:flex; justify-content:flex-start; max-width:1200px; margin:0 auto; }
.cme-hero__content{ align-self:center; translate:0; margin-block:auto; }
.cme-hero__title{
  margin:0 0 .75rem;
  font-weight:800;
  line-height:.92;
  letter-spacing:-.02em;
  font-size:clamp(2rem, 5.8vw, 5rem);
  text-shadow: 0 10px 32px rgba(0,0,0,.30);
}


@media (max-width: 480px){
  .cme-hero__content{
    max-width:100vw;
    margin-left: 1.2rem;
    margin-right: 1.2rem;
  }
  .cme-hero__title{ font-size:clamp(4.4rem, 7vw, 7.2rem); font-weight:900; }
  .cme-hero__subtitle{ white-space:normal; text-align:left; margin-inline:auto; }
  .cme-hero__actions{ justify-content:center; }
  .cme-hero__bg{ background-position:center right 6%; }


  .cme-quickstrip__row{
   gap:.4rem;
}
}

/* =========================================
   iPAD (481px – 1024px)
   ========================================= */
@media (min-width: 481px) and (max-width: 1025px){
  .cme-hero__grid--content-only{ justify-content:left; }
  .cme-hero__content{
   text-align:left;
    margin-left: 1.2rem;
    margin-right: 1.2rem;
  }
  .cme-hero__title{ text-align:left; font-size:clamp(4.6rem, 6vw, 7.4rem); }
  .cme-hero__subtitle{ white-space:normal; }
  .cme-hero__bg{ background-position:center right 6%; }


  .cme-hero__text{
  color:#000000;
}

.dark-mode .cme-hero__text{
  color: var(--hero-ink);
}

}

@media (min-width: 1025px){
  .cme-hero__grid--content-only{ max-width:1240px; padding-inline:24px; }
  .cme-hero__content{
    margin-left:clamp(24px, 5vw, 72px);
    margin-top: 4rem;
    max-width: 48rem;
  }

  .cme-hero__title{ text-align:left; font-size: clamp(4.45rem, 4.75vw, 5.05rem); }
  .cme-hero__subtitle{ margin-left:0; margin-right:0; }
  .cme-hero__bg{ background-position:center right 10%; }
  .cme-hero__text{
    max-width: 46ch;
    font-size: clamp(1.32rem, 1.25vw, 1.46rem);
  }
}

/* Optional: very large desktops (keeps line length tidy) */
@media (min-width: 1536px){
  .cme-hero__grid--content-only{
    max-width: 1320px;
    padding-inline: clamp(28px, 3vw, 40px);
  }
  .cme-hero__content{
    max-width: 42rem;
    margin-left: clamp(24px, 4vw, 64px);
  }
  .cme-hero__title{
    font-size: 5.05rem;
  }
  .cme-hero__text{
    max-width: 46ch;
    font-size: 1.46rem;
  }
  .cme-hero__actions.hero-actions{
    gap: .85rem;
  }
}

@media (min-width: 1800px){
  .cme-hero__content{
    max-width: 40rem;
  }
  .cme-hero__title{
    font-size: 5.05rem;
  }
  .cme-hero__text{
    max-width: 46ch;
    font-size: 1.46rem;
  }
}
@media (max-width: 580px){
  /* Tighten title hierarchy for small screens */
  .cme-hero__title{
    margin: 0;
    line-height: 1;
    font-size: clamp(3.6rem, 7vw, 3rem);
    letter-spacing: -0.02em;
  }

  .cme-hero__text{
    font-size: 1.28rem;
    margin-top: 0;
  margin-bottom: 0;
  }

  /* Buttons spacing */
  .cme-hero__actions.hero-actions{
    margin-top: 6px;        /* separates copy from CTAs */
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  /* Trust row separation */
  .cme-hero__trust{
    margin-top: 14px;
    text-align: center;
  }

  /* Improve mobile hero framing */
  .cme-hero{
    min-height: 100vh;
  }
  .cme-hero__overlay{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.2rem 1rem;
    padding-top: calc(var(--nav-height, 64px) + 0.5rem);
    padding-bottom: clamp(1.4rem, 6vw, 2.2rem);
    place-content: initial;
  }
  .cme-hero__overlay::before{
    background:
      linear-gradient(180deg, rgba(210,224,231,0.25) 0%, rgba(232,240,244,0.00) 60%),
      radial-gradient(140% 80% at 50% 20%, rgba(210,224,231,.20), transparent 62%);
  }
  .cme-hero__grid--content-only{
    padding-inline: 0;
    width: 100%;
    flex: 1;
  }
  .cme-hero__content{
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 3vw, 1rem);
  }
  .cme-hero__actions.hero-actions{
    display: flex;
    flex-direction: column;
    margin-top: 1.2rem;
    width: 100%;
  }
  .cme-hero__trust{ margin-top: clamp(1rem, 3vw, 1.4rem); }

  /* Safari touch tweak: tighter horizontal gutters */
  @supports (-webkit-touch-callout: none){
    .cme-hero__overlay{
      padding-inline: clamp(1rem, 6vw, 1.6rem);
    }
    .cme-hero__content{
      margin-inline: 0;
    }
  }
}
.cme-card__title p.cme-link {
  color: var(--brand);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0;
}

/* Soft overlay on What we do videos; fades on hover/focus */
.cme-service__list-heading {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  margin-left: auto;
  margin-right: auto;
}

  /* Soft overlay on What we do videos; fades on hover/focus */
.cme-services .cme-card{
  position: relative;
  overflow: hidden;
}

.cme-services .cme-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.22), transparent 36%),
    rgba(5, 12, 24, 0.35);
  opacity: 1;
  transition: opacity .6s ease;
  pointer-events:none;
}

/* DESKTOP/LAPTOP: real hover devices */
@media (hover: hover) and (pointer: fine){
  .cme-services .cme-card:hover::after{
    opacity: 0;
  }
}

/* KEYBOARD: if the card (or something inside) gets focus */
.cme-services .cme-card:focus-within::after{
  opacity: 0;
}

/* MOBILE/TABLET: no hover — fade while pressing/tapping */
@media (hover: none), (pointer: coarse){
  /* Option A: reduce the overlay by default (often best for readability) */
  .cme-services .cme-card::after{
    opacity: .55;
  }

  /* Option B: when user presses/taps, drop it fully */
  .cme-services .cme-card:active::after{
    opacity: 0;
    transition-duration: .15s; /* feels snappier on touch */
  }
}

@media (max-width: 580px){
  .cme-hero__actions a {
    width: 100%;
  }
}











.cme-cookie-banner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(12, 22, 58, 0.92);
  color: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.25);
  z-index: 3000;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cme-cookie-banner:not([hidden]){
  display: flex;
}
.cme-cookie-text{
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}
.cme-cookie-link{
  color: #9ae1ff;
  font-weight: 700;
  text-decoration: none;
}
.cme-cookie-link:hover{ text-decoration: underline; }
.cme-cookie-actions{
  display: flex;
  gap: 8px;
}
.cme-cookie-btn{
  border: 0;
  background: linear-gradient(135deg, #0ea5e9, #0b172a);
  color: #fff;
  font-weight: 750;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,0.2);
  transition: transform .12s ease, box-shadow .16s ease;
}
.cme-cookie-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.24);
}
.cme-cookie-btn:active{ transform: translateY(0); }
.cme-cookie-btn--ghost{
  background: rgba(255,255,255,0.1);
  color: #e5f6ff;
  border: 1px solid rgba(154,225,255,0.5);
  box-shadow: none;
}
.cme-cookie-btn--ghost:hover{
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}
@media (max-width: 540px){
  .cme-cookie-banner{
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    left: 0;
    right: 0;
    transform: none;
    bottom: 0;
    border-radius: 0;
    padding: 14px 20px;
  }
  .cme-cookie-text{ font-size: 15px; }
  .cme-cookie-actions{
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }
  .cme-cookie-btn,
  .cme-cookie-btn--ghost{
    width: 100%;
    text-align: center;
    padding: 12px 14px;
  }
}



        /* Hide dark mode switch across the public navbar */
        .navbar-pill-switch{ display:none !important; }
        .brand-lockup{
          display:flex;
          align-items:center;
          gap:.5rem;
        }
        .brand-suffix {
          font-size: 1em;
          margin-left: 2px;
          color: var(--ink-light);
          opacity: .6;
        }
        .brand-wordmark{
          display:flex;
          flex-direction:column;
          line-height:1.05;
          font-weight:800;
          letter-spacing:-0.02em;
          font-size: clamp(1.4rem, 2.4vw, 1.55rem);
          text-transform: uppercase;
          margin-top: 4px;
          text-shadow: 0 10px 24px rgba(0,0,0,.18);
        }
        .brand-wordmark .brand-line{
          background: linear-gradient(135deg,
            color-mix(in srgb, var(--brand) 45%, #38bdf8),
            color-mix(in srgb, #bbd2ff 35%, var(--brand) 25%));
          -webkit-background-clip:text;
          background-clip:text;
          color: transparent;
        }
        .dark-mode .brand-wordmark .brand-line{
          background: linear-gradient(135deg,
            color-mix(in srgb, var(--brand) 65%, #7dd3fc),
            color-mix(in srgb, #d9e5ff 30%, #728fd9));
          -webkit-background-clip:text;
          background-clip:text;
          color: transparent;
        }
        @media (max-width: 640px){
          .brand-wordmark{ display:none; }
        }
      


/* =========================================
   CME FOOTER
   ========================================= */
.cme-footer{
  position: relative;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 12% -10%, color-mix(in srgb, var(--brand-600) 10%, transparent), transparent 60%),
    radial-gradient(1200px 600px at 90% 120%, color-mix(in srgb, var(--brand-700) 8%, transparent), transparent 65%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, white 4%), var(--bg));
  border-top: 1px solid var(--border);
}
.dark-mode .cme-footer{
  background:
    linear-gradient(90deg, rgba(6,17,34,.85) 0%, rgba(6,17,34,.48) 28%, rgba(6,17,34,.12) 56%, rgba(6,17,34,0) 72%),
    radial-gradient(1200px 600px at 20% 0%, color-mix(in srgb, var(--brand-700) 14%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, black 8%), var(--bg));
}

/* Top CTA band (optional) */
.cme-footer__cta{
  display: grid; gap: 14px;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  padding: clamp(16px, 3.2vw, 24px);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--chip-bg);
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
}
.cme-footer__cta h3{
  margin: 0; font-weight: 900; letter-spacing: -.01em;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
}
.cme-footer__cta p{
  margin: .25rem 0 0; color: var(--muted);
}
.cme-footer__cta .cme-footer__cta-actions{
  justify-self: end; display: flex; flex-wrap: wrap; gap: .6rem;
}
@media (max-width: 860px){
  .cme-footer__cta{ grid-template-columns: 1fr; text-align: center; }
  .cme-footer__cta .cme-footer__cta-actions{ justify-content: center; justify-self: center; }
}

/* Main grid */
.cme-footer__grid{
  display: grid;
  gap: clamp(18px, 3vw, 28px);
  grid-template-columns: 1.1fr .9fr .9fr 1fr;  /* brand | nav1 | nav2 | contact */
  margin-top: clamp(22px, 4vw, 32px);
}
@media (max-width: 1024px){
  .cme-footer__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .cme-footer__grid{ grid-template-columns: 1fr; text-align: center; }
  .cme-footer__logo{ margin-left:auto; margin-right:auto;}
}

/* Brand block */
.cme-footer__brand{
  display: grid; gap: .6rem;
}
.cme-footer__logo{
  width: clamp(120px, 16vw, 160px); height: auto; display: block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.18));
  margin-bottom: .25rem;
}
.cme-footer__tag{ color: var(--muted); max-width: 40ch; }

/* Column headings + lists */
.cme-footer__heading{
  font-size: .9rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--hero-ink-muted); font-weight: 800; margin: .2rem 0 .6rem;
}
.cme-footer__list{ list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.cme-footer__link{
  color: #6da7e2; text-decoration: none; border-bottom: 2px solid transparent;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-800)) 0 100%/0 2px no-repeat;
  transition: background-size .2s ease;
}
.cme-footer__link:hover{ background-size: 100% 2px; }

/* Contact card */
.cme-footer__contact{
  padding: clamp(12px, 2vw, 16px);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 94%, var(--brand) 6%);
  box-shadow: var(--shadow-s);
  min-width: 272px;
}

.cme-footer__kv{ margin: 0 0 .4rem; }
.cme-footer__kv a{ text-decoration: none; color: var(--ink); }
.cme-footer__social{ display: flex; gap: .5rem; margin-top: .4rem; justify-content: center;}
.cme-footer__social a{
  --size: 40px;
  width: var(--size); height: var(--size); display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 30%, transparent);
  color: var(--brand-dark); text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.cme-footer__social a:hover{ transform: translateY(-1px); box-shadow: var(--shadow-l); border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }

/* Legal bar */
.cme-footer__legal{
  margin-top: clamp(22px, 4vw, 32px);
  padding-top: clamp(14px, 2.4vw, 18px);
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center;
  color: var(--muted); font-size: .95rem;
}
.cme-footer__legal a{ color: inherit; text-decoration: none; border-bottom: 1px dashed currentColor; }
.cme-footer__contact a{
  color: inherit;
  transition: color .15s ease;
}
.cme-footer__contact a:hover{
  color: var(--brand-600);
}
@media (max-width: 640px){
  .cme-footer__legal{ justify-content: center; text-align: center; gap: .6rem 1rem; }
  .cme-footer__brand {
    justify-content: center;
  }
}

/* Little badge */
.cme-madeby{
  display: inline-flex; gap: .4rem; align-items: center;
  padding: .35rem .55rem; border-radius: 999px;
  background: var(--chip-bg); border: 1px solid var(--chip-border);
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  color: var(--hero-ink);
  font-weight: 700; font-size: .85rem;
}
.dark-mode .cme-madeby{
  color: var(--hero-ink-light);
}

 


/* =========================================================
   CME Alerts — Consolidated, Dedupe'd, and Defensive
   Scope: #message (container) with .flash bubbles
   Supports: skins (default/tile), progress bar, dark mode, mobile toast
   ========================================================= */

/* ---------- 0) Root tokens & sane defaults ---------- */
:root{
  --cme-navy: #03153d;
  --cme-ice:  #9ae1ff;
  --cme-autoclose: 9000ms;
}

/* Containment + tokens that can be overridden per instance */
#message{
  margin: 96px auto 0 auto;
  --navy: var(--cme-navy);
  --ice:  var(--cme-ice);
  --autoclose: var(--cme-autoclose);
  position: absolute;
  left: 0; right: 0;
  z-index: 1080;

}

/* Defensive box-sizing and img/svg behavior inside bubble */
#message, #message *{ box-sizing: border-box; }
#message img, #message svg{ max-width: 100%; height: auto; }

/* ---------- 1) Bubble base ---------- */
#message .flash{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem .9rem;

  position: relative;
  overflow: hidden;

  border-radius: 18px;
  padding: .95rem 1.05rem;
  max-width: 620px;
  width: min(80vw, 100%);
  margin: 0 auto 12px;

  /* Polymorphic glass */
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    0 16px 32px rgba(3,21,61,.18),
    0 2px 10px rgba(3,21,61,.12),
    inset 0 0 0 1px rgba(154,225,255,.18);

  /* Type color */
  color: var(--navy);

  /* Subtle entrance */
  animation: cme-bubbleIn .18s ease-out both;
}
@keyframes cme-bubbleIn{
  from{ transform: translateY(4px); opacity: 0; }
  to  { transform: translateY(0);   opacity: 1; }
}

/* Remove any legacy accent slice */
#message .flash::after{ content: none; }

/* Soft sheen */
#message .flash::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(120% 140% at 0 0, rgba(154,225,255,.22), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 52%, rgba(0,0,0,.08) 100%),
    linear-gradient(135deg, rgba(14,165,233,.12), rgba(3,21,61,.06));
  opacity:.6; pointer-events:none;
}

/* Hover lift */
#message .flash:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(3,21,61,.20), 0 4px 10px rgba(3,21,61,.18);
}

#message .flash{
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ---------- 2) Skins ---------- */

/* 2a) Default glossy-blue */
#message:not([data-skin="tile"]) .flash{
  background:
    linear-gradient(135deg, rgba(255,255,255,.36), rgba(255,255,255,.16)),
    linear-gradient(180deg, rgba(154,225,255,.20), rgba(3,21,61,.05));
}
/* Progressive enhancement for color-mix (keeps same look if unsupported) */
@supports (background: color-mix(in srgb, white, black)){
  #message:not([data-skin="tile"]) .flash{
    background:
      linear-gradient(
        135deg,
        color-mix(in srgb, #ffffff 70%, var(--ice) 30%),
        color-mix(in srgb, #ffffff 55%, var(--ice) 45%)
      ),
      linear-gradient(
        180deg,
        color-mix(in srgb, #ffffff 82%, var(--ice) 18%),
        color-mix(in srgb, #ffffff 65%, var(--ice) 35%)
      );
    border-color: color-mix(in srgb, #ffffff 55%, var(--ice) 45%);
  }
}

/* 2b) Tile "glass" skin (opt-in: data-skin="tile") */
#message[data-skin="tile"] .flash{
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(154,225,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.40));
  border: 1px solid rgba(3,21,61,.12);
  box-shadow: 0 6px 24px rgba(3,21,61,.08), 0 1px 3px rgba(3,21,61,.08);
  color: #03004c;
}

/* ---------- 3) Icon, text, close ---------- */
#message .flash-icon{
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(154,225,255,.45), rgba(3,21,61,.08)),
    linear-gradient(135deg, rgba(3,21,61,.18), rgba(154,225,255,.24));
  border: 1px solid rgba(3,21,61,.16);
  color: var(--navy);
  font-size: 1.05rem;
}
#message[data-skin="tile"] .flash-icon{
  background: conic-gradient(from 180deg, rgba(154,225,255,.20), rgba(154,225,255,.05));
  box-shadow: inset 0 0 0 1px rgba(3,21,61,.15);
  color: #03004c;
}

#message .flash-body{
  color: var(--navy);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: .01em;
  word-break: break-word;
}

/* Close button: uses mask for a crisp × with any theme */
#message .flash .btn-close{
  inline-size: 1.75rem; block-size: 1.75rem;
  border-radius: 12px;
  opacity: .7;
  background: none;
  -webkit-mask: 
    radial-gradient(closest-side, #000 98%, transparent) center/0 0 no-repeat,
    url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.1 3.1L10.9 10.9M10.9 3.1L3.1 10.9' stroke='%2303153d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/1.1rem 1.1rem no-repeat;
  background-color: currentColor;
  color: var(--navy);
  transition: transform .12s ease, opacity .12s ease, box-shadow .18s ease;
  cursor: pointer;
  border: 0;
}
#message .flash .btn-close:hover{ opacity: 1; transform: scale(1.08); }
#message .flash .btn-close:focus-visible{
  outline: 0;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--ice) 55%, transparent),
    0 0 0 6px color-mix(in srgb, var(--ice) 25%, transparent);
}

/* ---------- 4) Progress bar (opt-in: .has-progress) ---------- */
#message .flash.has-progress::after{
  content:"";
  position:absolute; left:0; top:0;
  height:4px; width:100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #03153d, #9ae1ff);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.55) inset,
    0 1px 6px rgba(3,21,61,.25);
  opacity: .95;
  transform-origin: left;
  animation: cme-flashProgress var(--autoclose) linear forwards;
}
#message .flash.paused::after{ animation-play-state: paused; }
@keyframes cme-flashProgress{ from{transform:scaleX(1)} to{transform:scaleX(0)} }

/* ---------- 5) Dark mode (class and media support) ---------- */
.dark-mode #message .flash{
  background: #0f1b38;
  border-color: #1f2a44;
  color: #e6eef3;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.dark-mode #message .flash-icon{
  background: rgba(154,225,255,.12);
  border-color: rgba(154,225,255,.25);
  color: #9ae1ff;
}
.dark-mode #message .flash .btn-close{
  color: #9ae1ff;
}
.dark-mode #message .flash-body{ color: #e6eef3; }
.dark-mode #message .flash.has-progress::after{
  background: linear-gradient(90deg, #9ae1ff, #66bde5);
  box-shadow: 0 0 0 1px rgba(3,21,61,.55) inset, 0 1px 6px rgba(0,0,0,.35);
  opacity: 1;
}

/* Auto-dark for users who prefer it (works without adding .dark-mode) */
@media (prefers-color-scheme: dark){
  :root:not(.light-mode) #message:not([data-skin="tile"]) .flash{
    background: #0f1b38;
    border-color: #1f2a44;
    color: #e6eef3;
  }
}

/* Tile skin adjustments in dark mode */
.dark-mode #message[data-skin="tile"] .flash{
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(154,225,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  border-color: color-mix(in srgb, #9ae1ff 22%, #03153d 78%);
  color: #e6eef3;
}

/* ---------- 6) Mobile polish ---------- */
@media (max-width: 520px){
  #message .flash{
    grid-template-columns: 28px 1fr 32px;
    gap: .6rem .7rem;
    padding: .8rem .9rem;
    border-radius: 16px;
    max-width: 100%;
    box-shadow: 0 6px 16px rgba(3,21,61,.14);
  }
  #message .flash-icon{
    width: 28px; height: 28px; font-size: .95rem;
  }
  #message .flash .btn-close{
    inline-size: 32px; block-size: 32px; border-radius: 10px;
    -webkit-mask-size: 14px 14px;
  }
  #message .flash-body{ font-size: .95rem; line-height: 1.25; }
  /* Snackbar/toast mode (opt-in) */
  #message[data-mobile-toast="true"]{
    position: fixed;
    left: 0; right: 0; bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 1080;
    padding: 0 12px;
    margin: 0;
    pointer-events: none;
  }
  #message[data-mobile-toast="true"] .flash{
    pointer-events: auto;
    margin: 0 auto 10px;
    width: min(720px, 100%);
    animation: cme-toastIn .18s ease-out both;
  }
  @keyframes cme-toastIn{
    from{ transform: translateY(8px); opacity: 0; }
    to  { transform: translateY(0);   opacity: 1; }
  }
}

/* ---------- 7) Accessibility ---------- */
@media (prefers-reduced-motion: reduce){
  #message .flash,
  #message .flash.has-progress::after{
    animation: none !important;
  }
}

/* =========================================================
   8) Defensive override layer
   Use specificity + late order to beat legacy/static/CDN rules.
   Toggle [data-force] to escalate, or rely on !important where essential.
   ========================================================= */

/* Neutralize any legacy pseudo-elements that draw stripes/slices */
#message .flash::after,
#message .flash::before{
  background-blend-mode: normal !important;
}

/* Force readable layout if some old CSS flips display/flow */
#message .flash,
#message[data-mobile-toast="true"] .flash{
  display: grid !important;
}

/* If third-party CSS sets weird fonts/colors, reassert ours */
#message .flash-body{
  color: inherit !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}

/* Kill unwanted text transforms or letterspacing from resets */
#message .flash, 
#message .flash *{
  text-transform: none !important;
  letter-spacing: normal;
}

/* Ensure close button is clickable and visible */
#message .flash .btn-close{
  pointer-events: auto !important;
  opacity: .85 !important;
}

/* Progress bar must stay on top if other ::after styles leak in */
#message .flash.has-progress{ overflow: hidden !important; }

/* Escalation hook: add data-force to #message to hard-override */
#message[data-force] .flash{
  border-width: 2px !important;
  border-style: solid !important;
  border-color: rgba(3,21,61,.2) !important;
  box-shadow: 0 10px 24px rgba(3,21,61,.18), 0 2px 6px rgba(3,21,61,.16) !important;
  background-clip: padding-box !important;
}

.brand-logo{
  height: 82px;
}

.footer-contact-heading{
  margin-top: 0;
}

.cme-simple-page{
  min-height: 100vh;
  padding-top: 160px;
  padding-bottom: 64px;
}

.cme-simple-page__inner{
  max-width: 760px;
}

.cme-simple-page__list{
  display: grid;
  gap: 1rem;
  margin: 2rem 0;
}

.cme-simple-page__item{
  display: grid;
  gap: .25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg) 92%, rgba(14,165,233,.08));
}