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;
  max-width: 100%;
  overflow-x: clip;
}

/* Reserve scrollbar space so centering doesn't jump */
html {
  scrollbar-gutter: stable;
  overscroll-behavior-x: none;
  scroll-behavior: smooth;
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}
/* Anchor jumps still work, they just land instantly. Previously smooth
   scrolling ran for everyone, including visitors who have asked the OS for
   reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* 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:var(--btn-ink-onbrand);
  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;
  /* Ink on a brand-coloured fill. Deep navy rather than white: white on the
     bright marine blue measured 2.36-2.77:1. */
  --btn-ink-onbrand:#06263f;

  /* 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));
  /* Explicit width, not just margin-inline:auto — several sections (e.g.
     landing_preview.html's #feedback, #about) are flex-column parents,
     and a block child with only auto margins doesn't get stretched by
     the parent's default align-items:stretch. Without this, those
     containers silently shrink-to-fit their own content instead of
     filling the same 1240px band as every other section, so their left
     edge drifts inward by a different, content-dependent amount. */
  width: 100%;
  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%;
  /* Matches .cme-section-container's band exactly (same max-width and
     horizontal gutter tokens) so the nav's edges line up with every
     section and the footer instead of hugging the viewport edge on
     wide screens while everything below it is centred and capped. */
  max-width: calc(var(--cme-section-maxw) + (var(--cme-section-gx) * 2));
  margin: 0 auto; padding: 0 var(--cme-section-gx);
  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); }
/* Same reasoning as .dark-mode .cme-nav .cme-link above: the fixed nav's
   translucent glass background lets whatever section is scrolled behind
   it show through, including light (.lp-light-section) backgrounds — the
   near-white --ink bars this used to use have almost no contrast there.
   Matching brand blue holds up on both dark and light sections. */
.dark-mode .cme-nav .icon-bar{ background: var(--brand-800, #0284c7); }

/* “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;
}

/* Nav links specifically: the fixed nav's translucent glass background lets
   whatever section is scrolled behind it show through, including light
   (.lp-light-section) backgrounds on the newer pages — plain white text
   there has almost no contrast. A mid-tone brand blue holds up on both the
   dark hero/navy sections and light ones, unlike white. */
.dark-mode .cme-nav .cme-link{
  color: var(--brand-800, #0284c7);
}
.dark-mode .cme-nav .nav-link:hover .cme-link,
.dark-mode .cme-nav .nav-link:focus-visible .cme-link{
  color: var(--brand, #38bdf8);
}

/* 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:var(--btn-ink-onbrand); 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; }
/* On the navy form cards that dark red measured 2.4:1 — error text was at
   its least readable exactly when it mattered. Light enough to read, not so
   bright the field becomes an alarm panel. 8.2:1 on #17243a. Scoped to dark
   surfaces so the darker red stays where it already works. */
:is(.lp-dark-section, .lp-quote-band, .lp-svc-form-card) .cme-error{ color:#fca5a5; }
.cme-field.is-invalid :is(input,select,textarea){ border-color:#ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.12); }

/* Country-code + local-number pair (phone_field.html include). Selectors
   need to out-specify .cme-field :is(input,select,textarea){width:100%}
   above, hence the doubled-up class. */
.cme-phone{ display:flex; gap:8px; max-width:100%; }
.cme-phone .cme-phone__code{
  flex:0 0 auto; width:118px; padding-right:.4rem;
  text-overflow:ellipsis; overflow:hidden; white-space:nowrap; cursor:pointer;
}
.cme-phone .cme-phone__number{ flex:1 1 auto; min-width:0; width:auto; }
@media (max-width:380px){
  .cme-phone .cme-phone__code{ width:96px; }
}
.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__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); }
/* Hover now lightens rather than darkens. With a dark label, darkening to
   --brand-800 dropped the pair to 3.78:1 — the button became least readable
   under the pointer. Lightening to --brand gives 7.23:1. */
.cme-btn--primary:hover{ background:var(--brand); 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);
  text-decoration: none;
}

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

.cme-hero__trustchip--bitcoin{
  --bitcoin-orange: #f7931a;
  --bitcoin-chip-bg: rgba(6, 14, 28, 0.54);
  --bitcoin-chip-border: rgba(226, 238, 246, 0.28);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-items: center;
  gap: .5rem;
  padding: .3rem .85rem .3rem .35rem;
  border-radius: 999px !important;
  background: var(--bitcoin-chip-bg);
  border-color: var(--bitcoin-chip-border);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  translate: 10px 0;
  /* One branded sequence, in three beats, finished by ~1.35s: the chip
     appears (400-820ms), takes a single warm accent (700-1340ms) and a
     single gleam passes over it (820-1440ms). Then it is done — nothing
     here repeats.

     It begins after the hero proposition has landed (~840ms) on purpose.
     This is a detail to be noticed second, not an advertisement competing
     with the headline. It is also the only element in the hero with its own
     entrance; everything else belongs to the composed group in
     landing-preview.css, and giving the chip that as well made it enter
     twice. */
  animation:
    bitcoin-chip-slide-in 420ms cubic-bezier(.22, 1, .36, 1) 400ms forwards,
    bitcoin-chip-warm 640ms ease-out 700ms;
  transition:
    transform .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.cme-hero__trustchip--bitcoin::after{
  content: "";
  position: absolute;
  inset: -55% -35%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-125%) rotate(8deg);
  background: linear-gradient(
    105deg,
    transparent 34%,
    rgba(247, 147, 26, 0.08) 43%,
    rgba(247, 147, 26, 0.5) 50%,
    rgba(255, 211, 138, 0.32) 56%,
    transparent 68%
  );
  animation: bitcoin-chip-gleam 620ms ease-out 820ms both;
}

.cme-hero__trustchip--bitcoin > *{
  position: relative;
  z-index: 1;
}

.cme-hero__trustchip--bitcoin:hover,
.cme-hero__trustchip--bitcoin:focus-visible{
  color: #fff;
  text-decoration: none;
  background: rgba(7, 24, 43, 0.7);
  border-color: rgba(125, 211, 252, 0.44);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.24),
    0 0 0 3px rgba(247, 147, 26, 0.12);
  transform: translateY(-2px);
}

.cme-hero__trustchip--bitcoin:focus-visible{
  outline: 2px solid rgba(247, 147, 26, 0.95);
  outline-offset: 3px;
}

.cme-hero__bitcoin-mark{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.cme-hero__trustchip--bitcoin .fa-bitcoin{
  color: var(--bitcoin-orange) !important;
  font-size: 1.34rem;
  line-height: 1;
  transition: transform .18s ease;
}

.cme-hero__trustchip--bitcoin:hover .fa-bitcoin,
.cme-hero__trustchip--bitcoin:focus-visible .fa-bitcoin{
  transform: scale(1.1) rotate(-8deg);
}

@keyframes bitcoin-chip-slide-in{
  from{
    opacity: 0;
    translate: 10px 0;
  }
  to{
    opacity: 1;
    translate: 0 0;
  }
}

/* Renamed from bitcoin-chip-orange-flash, and no longer a flash: the peak is
   softer, it is over in 640ms rather than 1120ms, and it no longer animates
   box-shadow. Animating a shadow means a full repaint of the blurred region
   every frame for an effect nobody consciously registers; the chip keeps its
   static shadow from the base rule and only the fill and edge warm up. */
@keyframes bitcoin-chip-warm{
  0%{
    background-color: var(--bitcoin-chip-bg);
    border-color: var(--bitcoin-chip-border);
  }
  38%{
    background-color: rgba(247, 147, 26, 0.16);
    border-color: rgba(247, 147, 26, 0.58);
  }
  100%{
    background-color: var(--bitcoin-chip-bg);
    border-color: var(--bitcoin-chip-border);
  }
}

@keyframes bitcoin-chip-gleam{
  0%{
    opacity: 0;
    transform: translateX(-125%) rotate(8deg);
  }
  18%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    transform: translateX(125%) rotate(8deg);
  }
}

@media (prefers-reduced-motion: reduce){
  .cme-hero__trustchip--bitcoin{
    opacity: 1;
    translate: 0 0;
    transform: none;
    animation: none;
    transition: none;
  }

  .cme-hero__trustchip--bitcoin::after{
    display: none;
  }

  .cme-hero__trustchip--bitcoin .fa-bitcoin{
    transition: none;
  }
}

@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.is-active:not(.is-ready){
  opacity:0;
}
.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: 50%;
  right: auto;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  width: min(calc(100vw - 32px), 760px);
  transform: translateX(-50%);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(244, 247, 251, 0.96), rgba(232, 238, 246, 0.94));
  color: #0b1521;
  border: 1px solid rgba(11, 21, 33, 0.12);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(3, 21, 61, 0.22);
  z-index: 3000;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.cme-cookie-banner:not([hidden]){
  display: flex;
}
.cme-cookie-text{
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.5;
  color: rgba(11, 21, 33, 0.76);
}
.cme-cookie-link{
  color: #0b1521;
  font-weight: 600;
  text-decoration: none;
}
.cme-cookie-link:hover{ text-decoration: underline; }
.cme-cookie-actions{
  display: flex;
  gap: 12px;
}
.cme-cookie-btn{
  border: 1px solid #0b1521;
  background: #0b1521;
  color: #fff;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: none;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.cme-cookie-btn:hover{
  transform: translateY(-1px);
  background: #102235;
  border-color: #102235;
}
.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: calc(100vw - 24px);
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    gap: 12px;
    padding: 12px;
  }
  .cme-cookie-title { margin-bottom: 2px; }
  .cme-cookie-text{
    font-size: 0.87rem;
    line-height: 1.42;
  }
  .cme-cookie-actions{
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
  }
  .cme-cookie-btn,
  .cme-cookie-btn--ghost{
    width: auto;
    text-align: center;
    padding: 12px 14px;
  }
}
@media (max-width: 340px){
  .cme-cookie-banner{
    gap: 10px;
    padding: 10px;
  }
  .cme-cookie-title{ font-size: 0.72rem; }
  .cme-cookie-text{
    font-size: 0.84rem;
    line-height: 1.36;
  }
  .cme-cookie-actions{ gap: 8px; }
  .cme-cookie-btn,
  .cme-cookie-btn--ghost{
    padding: 11px 13px;
  }
}



        /* 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;
  /* Pinned so the heading level can change for document-outline reasons
     without altering how the footer looks. */
  line-height: 1.2;
}
.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;
  }
}


 


/* =========================================================
   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));
}

/* -----------------------------------------------------------------------
   Touch target sizes (coarse pointers only)
   -----------------------------------------------------------------------
   Several shared controls are sized for reading rather than tapping: the
   footer links resolved to 21x58px and the cookie-policy link to 17x81px,
   both well under the 44px that a fingertip needs.

   Scoped to (pointer: coarse) so the desktop composition is untouched —
   nothing here changes what a mouse user sees. Type sizes are deliberately
   not altered; the targets grow, the text does not.

   Two techniques, chosen per case:

     Where the element owns its row, it simply becomes a 44px flex box.
     Where the element sits inline inside a sentence, growing the box would
     reflow the surrounding text, so an absolutely-positioned ::after
     extends the clickable area over the existing line box instead. The
     overlay is invisible and covers only non-interactive neighbours.
   ----------------------------------------------------------------------- */
@media (pointer: coarse) {
  /* Footer navigation. gap goes to zero because the rows are now contiguous
     44px targets — keeping the old 0.4rem gap on top of them would push the
     list out for no benefit and read as sparse rather than comfortable. */
  .cme-footer__list { gap: 0; }

  .cme-footer__link {
    display: flex;
    align-items: center;
    min-height: 44px;
    /* The sliding gradient underline is a hover affordance, and hover does
       not exist on a touch device. Dropping it here avoids stretching a
       bottom-anchored 2px background across the taller box, where it would
       detach from the text it belongs to. */
    background: none;
  }

  .cme-footer__social a { --size: 44px; }

  /* Inline in the banner's sentence — see the note above about reflow. */
  .cme-cookie-link { position: relative; }
  .cme-cookie-link::after {
    content: "";
    position: absolute;
    inset: -14px -8px;
  }
}

/* -----------------------------------------------------------------------
   Skip link (WCAG 2.4.1 Bypass Blocks, Level A)
   -----------------------------------------------------------------------
   Off-screen until it takes focus, then pinned to the top-left above the
   fixed navbar. Positioned rather than display:none / visibility:hidden,
   both of which would remove it from the tab order and defeat the point.
   ----------------------------------------------------------------------- */
.cme-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 4000;
  padding: 12px 20px;
  background: var(--bg, #0d1b32);
  color: var(--ink, #e2e8f0);
  border: 1px solid var(--brand, #38bdf8);
  border-radius: 0 0 6px 0;
  font-weight: 600;
  text-decoration: none;
}
.cme-skip-link:focus {
  left: 0;
  outline: 2px solid var(--brand, #38bdf8);
  outline-offset: 2px;
}
/* The skip target is focusable only programmatically, so it must not draw a
   focus ring when it receives focus from the link. */
#main-content:focus { outline: none; }

/* -----------------------------------------------------------------------
   Cookie notice
   -----------------------------------------------------------------------
   Formerly a two-choice consent banner; now an informational notice with a
   single dismissal and an ordinary link to the policy. See the comment in
   core/templates/core/base.html for why the choice was removed.
   ----------------------------------------------------------------------- */
.cme-cookie-title {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(11, 21, 33, 0.92);
}

/* The policy link now sits in the actions row beside the button, so it needs
   to read and behave as an action rather than as inline prose. */
.cme-cookie-actions .cme-cookie-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 0;
  color: rgba(11, 21, 33, 0.74);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Both controls need a focus ring that is visible against the notice panel;
   the browser default is easy to lose here. */
.cme-cookie-btn:focus,
.cme-cookie-link:focus,
.cme-cookie-btn:focus-visible,
.cme-cookie-link:focus-visible {
  outline: 2px solid #0b1521;
  outline-offset: 3px;
  border-radius: 6px;
}

@media (pointer: coarse) {
  /* Replaces the ::after overlay used when this was inline in a sentence —
     as a real action it can simply be a real 44px target. */
  .cme-cookie-actions .cme-cookie-link {
    min-height: 44px;
    padding-inline: 10px;
  }
  .cme-cookie-actions .cme-cookie-link::after { content: none; }
  .cme-cookie-btn { min-height: 44px; }
}

/* The notice is a flex row: one copy block, one actions block. Without the
   wrapper the title and body became separate flex children and sat side by
   side. */
.cme-cookie-copy { min-width: 0; }
.cme-cookie-actions { flex: 0 0 auto; align-items: center; }
.cme-cookie-btn,
.cme-cookie-actions .cme-cookie-link { white-space: nowrap; }