/* COVERAGE: geo-city-hub, gch-wrap, gch-hero, gch-kicker, gch-title, gch-lead, gch-actions, gch-btn, gch-btn--primary, gch-panel, gch-stats, gch-stat, gch-section, gch-head, gch-eyebrow, gch-grid, gch-country, gch-city, gch-service, gch-chips, gch-chip, gch-split, gch-list, gch-fact, gch-region-groups, gch-region, gch-faq */

/* =====================================================================
   askaide.com — Hub VILLES (/fr/villes, ?country=xx) — akmk 3D reskin (2026)
   Scope  : everything inside main.geo-city-hub (container .gch-wrap)
   Markup : frozen — this sheet only restyles the existing .gch-* hooks.
            It REPLACES the inline <style> block of geo-cities-hub.blade.php
            entirely (every class that block styled is covered here).
   Theme  : light tokens on .geo-city-hub, dark under html[data-theme="dark"]
            AND prefers-color-scheme guarded by html:not([data-theme="light"])
   !important policy : only where the old inline block proved the site-wide
            sheet fights us (main bg/color/font, heading colour + text-fill,
            link colour/background), where the markup carries an inline
            style attribute (.gch-panel > p), and on the focus ring.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@10..48,600;10..48,700;10..48,800&family=Figtree:wght@400;500;600;700&display=swap');

/* ── 1. TOKENS (akmk, verbatim) + page-only extras ── */
.geo-city-hub {
  --ground:#FAF7F2; --surface:#FFFFFF; --surface-2:#F4F0E8; --raise:#FBF9F5;
  --ink:#191C26; --ink-soft:#565B6B; --ink-faint:#8B8F9C; --line:#ECE6DC; --line-2:#DED7C9;
  --primary:#2B4CF0; --primary-ink:#FFFFFF; --primary-soft:#EAEEFF; --primary-line:#CFD8FF; --violet:#6A4BF2;
  --accent:#FF6A45; --accent-soft:#FFEDE7; --accent-ink:#B33A1E;
  --trust:#0FA968; --trust-soft:#E3F6ED; --trust-ink:#0A7A4B; --gold:#F5A623; --danger:#E5484D; --danger-soft:#FDECEC;
  --shadow:0 1px 1px rgba(25,28,38,.05),0 4px 8px -3px rgba(25,28,38,.10),0 16px 30px -12px rgba(25,28,38,.16);
  --lift:0 24px 44px -14px rgba(25,28,38,.24),0 46px 100px -30px rgba(43,76,240,.28);
  --lift-sm:0 14px 28px -12px rgba(25,28,38,.22),0 24px 48px -20px rgba(43,76,240,.22);
  --edge:inset 0 1.5px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(25,28,38,.03);
  --r:26px; --r-sm:15px; --r-pill:999px;
  --display:'Bricolage Grotesque','Figtree',system-ui,sans-serif;
  --body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --br:8px; /* focus-ring radius, see §13 */
  color-scheme:light;
  /* hero (deep navy in both themes so the white copy stays AA) */
  --hero-bg:linear-gradient(135deg,#182050 0%,#1B2A6E 55%,#1A1F48 100%);
  --hero-ink:#FFFFFF; --hero-soft:rgba(255,255,255,.82); --hero-line:rgba(255,255,255,.14);
  --hero-glass:rgba(255,255,255,.10); --hero-glass-line:rgba(255,255,255,.30);
  --panel-line:rgba(255,255,255,.78); --panel-shadow:rgba(8,12,40,.48);
  /* chevron glyphs — themed stroke colour */
  --ico-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B4CF0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  --ico-chev-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  /* white icon glyphs for the gradient tiles (same in both themes) */
  --ico-globe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
  --ico-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.2-6-10a6 6 0 0 1 12 0c0 4.8-6 10-6 10z'/%3E%3Ccircle cx='12' cy='11' r='2.2'/%3E%3C/svg%3E");
  --ico-spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.4L19.5 10l-5.6 1.7L12 17.5l-1.9-5.8L4.5 10l5.6-1.6z'/%3E%3C/svg%3E");
}

html[data-theme="dark"] .geo-city-hub {
  --ground:#0E1017; --surface:#171A22; --surface-2:#1E2230; --raise:#1B1F29;
  --ink:#F1EFEA; --ink-soft:#A7ABB8; --ink-faint:#767B8B; --line:#272B37; --line-2:#353B4B;
  --primary:#6B84FF; --primary-ink:#0C1024; --primary-soft:#1A2242; --primary-line:#2C3768; --violet:#8B78FF;
  --accent:#FF7E5C; --accent-soft:#39241D; --accent-ink:#FFB59F;
  --trust:#34D399; --trust-soft:#122A20; --trust-ink:#7EE9BE; --gold:#FBBF52; --danger:#F26B6F; --danger-soft:#3A1E20;
  --shadow:0 1px 1px rgba(0,0,0,.5),0 6px 14px -6px rgba(0,0,0,.6),0 20px 40px -16px rgba(0,0,0,.72);
  --lift:0 28px 54px -16px rgba(0,0,0,.8),0 56px 116px -34px rgba(107,132,255,.42);
  --lift-sm:0 16px 32px -12px rgba(0,0,0,.7),0 28px 56px -22px rgba(107,132,255,.3);
  --edge:inset 0 1.5px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.35);
  color-scheme:dark;
  --hero-bg:linear-gradient(135deg,#1B2044 0%,#1E2A62 55%,#161A2E 100%);
  --hero-ink:#FFFFFF; --hero-soft:rgba(255,255,255,.80); --hero-line:rgba(255,255,255,.10);
  --hero-glass:rgba(255,255,255,.08); --hero-glass-line:rgba(255,255,255,.26);
  --panel-line:#353B4B; --panel-shadow:rgba(0,0,0,.7);
  --ico-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B84FF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .geo-city-hub {
  --ground:#0E1017; --surface:#171A22; --surface-2:#1E2230; --raise:#1B1F29;
  --ink:#F1EFEA; --ink-soft:#A7ABB8; --ink-faint:#767B8B; --line:#272B37; --line-2:#353B4B;
  --primary:#6B84FF; --primary-ink:#0C1024; --primary-soft:#1A2242; --primary-line:#2C3768; --violet:#8B78FF;
  --accent:#FF7E5C; --accent-soft:#39241D; --accent-ink:#FFB59F;
  --trust:#34D399; --trust-soft:#122A20; --trust-ink:#7EE9BE; --gold:#FBBF52; --danger:#F26B6F; --danger-soft:#3A1E20;
  --shadow:0 1px 1px rgba(0,0,0,.5),0 6px 14px -6px rgba(0,0,0,.6),0 20px 40px -16px rgba(0,0,0,.72);
  --lift:0 28px 54px -16px rgba(0,0,0,.8),0 56px 116px -34px rgba(107,132,255,.42);
  --lift-sm:0 16px 32px -12px rgba(0,0,0,.7),0 28px 56px -22px rgba(107,132,255,.3);
  --edge:inset 0 1.5px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.35);
  color-scheme:dark;
  --hero-bg:linear-gradient(135deg,#1B2044 0%,#1E2A62 55%,#161A2E 100%);
  --hero-ink:#FFFFFF; --hero-soft:rgba(255,255,255,.80); --hero-line:rgba(255,255,255,.10);
  --hero-glass:rgba(255,255,255,.08); --hero-glass-line:rgba(255,255,255,.26);
  --panel-line:#353B4B; --panel-shadow:rgba(0,0,0,.7);
  --ico-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B84FF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
}
}

/* ── 2. PAGE GROUND — aurora + dot grid ── */
/* bg / color / font-family !important : the old inline block needed them, i.e. the
   site-wide sheet styles <main> (and its dark variant) with a competing rule */
.geo-city-hub {
  position:relative; isolation:isolate; overflow:hidden; min-width:0;
  padding:clamp(26px,4vw,52px) 0 104px; background:var(--ground) !important;
  color:var(--ink) !important; font-family:var(--body) !important; font-size:15.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-align:start; box-sizing:border-box;
}
.geo-city-hub *, .geo-city-hub *::before, .geo-city-hub *::after{ box-sizing:border-box; }
.geo-city-hub::before,
.geo-city-hub::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:-1; }
.geo-city-hub::before {
  background:
    radial-gradient(52% 44% at 8% 4%,color-mix(in srgb,var(--primary) 18%,transparent),transparent 70%),
    radial-gradient(40% 36% at 24% 14%,color-mix(in srgb,var(--violet) 12%,transparent),transparent 72%),
    radial-gradient(46% 40% at 94% 92%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),
    radial-gradient(34% 30% at 76% 80%,color-mix(in srgb,var(--gold) 12%,transparent),transparent 72%);
  filter:blur(6px);
}
.geo-city-hub::after {
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 18%,transparent) .6px,transparent .7px);
  background-size:22px 22px; opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 78%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 78%);
}
/* font enforcement (site-wide sheet sets Roboto Flex on text nodes) */
main.geo-city-hub :is(a, p, span, b, strong, small, em, li, div){ font-family:var(--body) !important; }
main.geo-city-hub :is(.gch-title, .gch-head h2, .gch-faq h3, .gch-stat b, .gch-btn){ font-family:var(--display) !important; }

/* ── 3. CONTAINER ── */
.geo-city-hub .gch-wrap{ position:relative; width:min(1240px,calc(100% - 40px)); margin:0 auto; min-width:0; }

/* ── 4. HERO — deep navy slab, aurora halos, floating stats panel ── */
.geo-city-hub .gch-hero {
  position:relative; isolation:isolate; display:grid !important;
  grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr); gap:clamp(28px,5vw,64px);
  align-items:center; min-width:0; margin:0 !important; padding:clamp(34px,5vw,64px) !important;
  overflow:hidden; border:1px solid var(--hero-line); border-radius:calc(var(--r) + 8px);
  background:var(--hero-bg) !important; color:var(--hero-ink) !important;
  box-shadow:var(--lift),inset 0 1.5px 0 rgba(255,255,255,.16);
  animation:gchFadeUp .6s cubic-bezier(.2,.8,.2,1) both;
}
.geo-city-hub .gch-hero::before,
.geo-city-hub .gch-hero::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:-1; }
.geo-city-hub .gch-hero::before {
  background:
    radial-gradient(58% 70% at 100% 0%,color-mix(in srgb,var(--violet) 55%,transparent),transparent 70%),
    radial-gradient(48% 60% at 0% 100%,color-mix(in srgb,var(--primary) 50%,transparent),transparent 70%),
    radial-gradient(30% 40% at 84% 92%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 70%),
    radial-gradient(24% 30% at 62% 8%,color-mix(in srgb,var(--gold) 22%,transparent),transparent 72%);
  filter:blur(24px);
}
.geo-city-hub .gch-hero::after {
  background-image:radial-gradient(rgba(255,255,255,.22) .7px,transparent .8px); background-size:20px 20px;
  -webkit-mask-image:linear-gradient(115deg,rgba(0,0,0,.9),transparent 62%);
  mask-image:linear-gradient(115deg,rgba(0,0,0,.9),transparent 62%);
}
.geo-city-hub .gch-hero > div{ position:relative; z-index:1; min-width:0; }

/* kicker (hero) + eyebrow (sections) — shared pill base */
.geo-city-hub .gch-kicker,
.geo-city-hub .gch-eyebrow {
  display:inline-flex; align-items:center; gap:8px; width:max-content; max-width:100%; margin:0;
  padding:6px 14px; border-radius:var(--r-pill); font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; line-height:1.3; white-space:normal;
}
.geo-city-hub .gch-kicker::before,
.geo-city-hub .gch-eyebrow::before{ content:""; flex:0 0 auto; width:7px; height:7px; border-radius:50%; }
.geo-city-hub .gch-kicker {
  border:1px solid var(--hero-glass-line); background:var(--hero-glass); color:var(--hero-ink) !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.geo-city-hub .gch-kicker::before{ background:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 35%,transparent); }
.geo-city-hub .gch-eyebrow {
  border:1px solid var(--primary-line); background:var(--primary-soft); color:var(--primary) !important;
}
.geo-city-hub .gch-eyebrow::before{ background:var(--primary); box-shadow:0 0 0 3px var(--primary-line); }

/* title colour + text-fill !important : site-wide sheet paints h1/h2 with gradient text */
.geo-city-hub .gch-title {
  max-width:15ch; margin:20px 0 16px !important; color:var(--hero-ink) !important;
  -webkit-text-fill-color:var(--hero-ink) !important; font-family:var(--display) !important;
  font-size:clamp(2.5rem,5.2vw,4.3rem) !important; font-weight:800 !important; letter-spacing:-.035em !important;
  line-height:1 !important; text-wrap:balance; text-shadow:0 2px 24px rgba(0,0,0,.18);
}
.geo-city-hub .gch-lead {
  max-width:60ch; margin:0 0 26px !important; color:var(--hero-soft) !important;
  font-size:clamp(1rem,1.4vw,1.15rem) !important; line-height:1.6 !important;
}
.geo-city-hub .gch-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.geo-city-hub .gch-btn {
  --br:var(--r-pill); position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:50px; padding:12px 24px; border:1.5px solid var(--hero-glass-line); border-radius:var(--r-pill);
  background:var(--hero-glass); color:var(--hero-ink) !important; font-family:var(--display) !important;
  font-size:1rem; font-weight:700; letter-spacing:-.01em; line-height:1.2; text-decoration:none !important;
  overflow:hidden; isolation:isolate; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.16);
  transition:transform .25s cubic-bezier(.2,.8,.3,1.1),box-shadow .25s,background .2s,border-color .2s,filter .2s;
}
.geo-city-hub .gch-btn:hover{ transform:translateY(-2px); background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); }
.geo-city-hub .gch-btn:active{ transform:translateY(0) scale(.99); }
/* literal ink on a literal-bright gold/accent gradient: >= 6:1 in both themes */
.geo-city-hub .gch-btn--primary {
  border-color:transparent; background:linear-gradient(135deg,var(--gold),var(--accent)) !important; color:#241703 !important;
  box-shadow:var(--shadow),0 12px 26px -10px color-mix(in srgb,var(--accent) 75%,transparent),inset 0 1.5px 0 rgba(255,255,255,.38);
}
.geo-city-hub .gch-btn--primary::after {
  content:""; position:absolute; top:-20%; left:-70%; width:45%; height:140%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent); transform:skewX(-18deg);
  transition:left .6s cubic-bezier(.2,.8,.2,1); pointer-events:none;
}
.geo-city-hub .gch-btn--primary:hover{ filter:brightness(1.05); background:linear-gradient(135deg,var(--gold),var(--accent)) !important; color:#241703 !important; box-shadow:var(--lift),inset 0 1.5px 0 rgba(255,255,255,.38); }
.geo-city-hub .gch-btn--primary:hover::after{ left:130%; }

/* stats panel — white card lifted off the slab with an offset primary "stack" */
.geo-city-hub .gch-panel {
  position:relative; z-index:1; min-width:0; padding:22px; border:1px solid var(--panel-line);
  border-radius:var(--r); background:var(--surface) !important; color:var(--ink) !important;
  box-shadow:14px 16px 0 -3px color-mix(in srgb,var(--primary) 62%,transparent),
             0 32px 64px -22px var(--panel-shadow),var(--edge);
  animation:gchFadeUp .7s cubic-bezier(.2,.8,.2,1) .08s both;
}
.geo-city-hub .gch-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.geo-city-hub .gch-stat {
  min-width:0; padding:16px 14px; border:1px solid transparent; border-radius:18px;
  background:linear-gradient(var(--surface-2),var(--surface-2)) padding-box,
             linear-gradient(135deg,var(--primary-line),var(--line)) border-box;
  box-shadow:var(--edge); transition:transform .25s,box-shadow .25s;
}
.geo-city-hub .gch-stat:hover{ transform:translateY(-2px); box-shadow:var(--shadow),var(--edge); }
/* gradient number: text-fill transparent !important beats the site-wide heading fill rule */
.geo-city-hub .gch-stat b {
  display:block; margin:0; font-family:var(--display) !important; font-size:clamp(1.55rem,2.3vw,1.95rem) !important;
  font-weight:800; letter-spacing:-.03em; line-height:1 !important;
  background:linear-gradient(95deg,var(--primary),var(--violet)); -webkit-background-clip:text; background-clip:text;
  color:transparent !important; -webkit-text-fill-color:transparent !important;
}
.geo-city-hub .gch-stat span {
  display:block; margin-top:8px; color:var(--ink-soft) !important; font-size:.68rem !important; font-weight:700;
  letter-spacing:.06em; line-height:1.35; text-transform:uppercase;
}
/* the <p> carries an inline style="color:#4d5b72" → colour must be !important to theme it */
.geo-city-hub .gch-panel > p{ color:var(--ink-soft) !important; font-size:.92rem; line-height:1.6 !important; }

/* ── 5. SECTION CARDS + HEAD ── */
.geo-city-hub .gch-section {
  position:relative; margin:22px 0 0 !important; padding:clamp(22px,3vw,36px) !important;
  border:1px solid var(--line) !important; border-radius:var(--r) !important;
  background:color-mix(in srgb,var(--surface) 86%,transparent) !important; color:var(--ink) !important;
  box-shadow:var(--shadow),var(--edge); -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15); scroll-margin-top:96px;
  animation:gchFadeUp .55s cubic-bezier(.2,.8,.2,1) both;
}
.geo-city-hub .gch-section:nth-of-type(2){ animation-delay:.05s; }
.geo-city-hub .gch-section:nth-of-type(3){ animation-delay:.1s; }
.geo-city-hub .gch-section:nth-of-type(4){ animation-delay:.15s; }
.geo-city-hub .gch-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:0 0 22px; }
.geo-city-hub .gch-head > div{ min-width:0; }
.geo-city-hub .gch-head h2 {
  margin:12px 0 0 !important; color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important;
  font-family:var(--display) !important; font-size:clamp(1.55rem,2.8vw,2.15rem) !important; font-weight:800 !important;
  letter-spacing:-.025em; line-height:1.08 !important; text-wrap:balance;
}
.geo-city-hub .gch-head h2:first-child{ margin-top:0 !important; }
.geo-city-hub .gch-head p {
  flex:0 1 46ch; max-width:46ch; margin:0; color:var(--ink-soft) !important; font-size:.9rem; line-height:1.55;
  text-align:end;
}

/* ── 6. LINK CARDS — country / city / service (grid: gradient tile · name+meta · chevron) ── */
.geo-city-hub .gch-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
/* country selector: denser auto-fill row (id is an existing hook of the markup) */
.geo-city-hub #countries .gch-grid{ grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
/* background/colour !important : the site-wide sheet (and its dark mode) recolours <a> */
.geo-city-hub .gch-country,
.geo-city-hub .gch-city,
.geo-city-hub .gch-service {
  --br:20px; position:relative; display:grid; grid-template-columns:44px minmax(0,1fr) 34px;
  grid-template-areas:"tile name chev" "tile meta chev"; column-gap:14px; row-gap:2px; align-content:center;
  align-items:center; min-width:0; min-height:84px; padding:15px 16px; border:1px solid var(--line);
  border-radius:20px; background:var(--surface) !important; color:var(--ink) !important;
  text-decoration:none !important; box-shadow:var(--edge),0 1px 2px rgba(25,28,38,.04); overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.8,.3,1.1),box-shadow .25s,border-color .2s,background .2s;
}
.geo-city-hub .gch-country::before,
.geo-city-hub .gch-city::before,
.geo-city-hub .gch-service::before {
  content:""; grid-area:tile; align-self:center; width:44px; height:44px; border-radius:14px;
  background:var(--ico-pin) center/22px no-repeat,linear-gradient(135deg,var(--primary),var(--violet));
  box-shadow:var(--edge),0 10px 20px -10px color-mix(in srgb,var(--primary) 65%,transparent);
  transition:transform .3s cubic-bezier(.2,.8,.3,1.3);
}
.geo-city-hub .gch-country::before{ background:var(--ico-globe) center/22px no-repeat,linear-gradient(135deg,var(--accent),var(--gold)); box-shadow:var(--edge),0 10px 20px -10px color-mix(in srgb,var(--accent) 65%,transparent); }
.geo-city-hub .gch-service::before{ background:var(--ico-spark) center/22px no-repeat,linear-gradient(135deg,var(--trust),color-mix(in srgb,var(--trust) 55%,var(--primary))); box-shadow:var(--edge),0 10px 20px -10px color-mix(in srgb,var(--trust) 65%,transparent); }
.geo-city-hub .gch-country::after,
.geo-city-hub .gch-city::after,
.geo-city-hub .gch-service::after {
  content:""; grid-area:chev; justify-self:end; align-self:center; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--primary-line); background:var(--ico-chev) center/16px no-repeat,var(--primary-soft);
  transition:transform .25s cubic-bezier(.2,.8,.3,1.2),background .2s,border-color .2s;
}
.geo-city-hub .gch-country b,
.geo-city-hub .gch-city b,
.geo-city-hub .gch-service b {
  grid-area:name; display:block; min-width:0; margin:0; padding:0; color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important; font-size:1.02rem !important; font-weight:700;
  letter-spacing:-.01em; line-height:1.25 !important; overflow-wrap:anywhere;
}
.geo-city-hub .gch-country span,
.geo-city-hub .gch-city span,
.geo-city-hub .gch-service span {
  grid-area:meta; display:block; min-width:0; margin:0; padding:0; color:var(--ink-soft) !important;
  font-size:.84rem !important; line-height:1.4 !important; overflow-wrap:anywhere;
}
.geo-city-hub .gch-country:hover,
.geo-city-hub .gch-city:hover,
.geo-city-hub .gch-service:hover,
.geo-city-hub .gch-country:focus-visible,
.geo-city-hub .gch-city:focus-visible,
.geo-city-hub .gch-service:focus-visible {
  transform:translateY(-3px); border-color:var(--primary-line); box-shadow:var(--lift-sm),var(--edge);
  background:radial-gradient(120% 90% at 100% 0%,var(--primary-soft),transparent 60%),var(--surface) !important;
}
.geo-city-hub :is(.gch-country,.gch-city,.gch-service):hover::before{ transform:scale(1.06) rotate(-3deg); }
.geo-city-hub :is(.gch-country,.gch-city,.gch-service):hover::after {
  border-color:transparent; transform:translateX(3px);
  background:var(--ico-chev-w) center/16px no-repeat,linear-gradient(135deg,var(--primary),var(--violet));
}
.geo-city-hub :is(.gch-country,.gch-city,.gch-service):hover span{ color:var(--primary) !important; }

/* ── 7. SIGNAL CHIPS + WHY-LIST (split) ── */
.geo-city-hub .gch-split{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.geo-city-hub .gch-split > div{ min-width:0; }
.geo-city-hub .gch-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.geo-city-hub .gch-chip {
  --br:var(--r-pill); display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 18px;
  border:1.5px solid var(--line-2); border-radius:var(--r-pill); background:var(--surface) !important;
  color:var(--ink) !important; font-size:.9rem; font-weight:600; text-decoration:none !important;
  box-shadow:var(--edge); transition:transform .2s,box-shadow .2s,background .2s,border-color .2s,color .2s;
}
.geo-city-hub .gch-chip::before{ content:""; flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--violet)); box-shadow:0 0 0 3px var(--primary-soft); }
.geo-city-hub .gch-chip:hover{ transform:translateY(-2px); border-color:var(--primary); background:var(--primary-soft) !important; color:var(--primary) !important; box-shadow:var(--shadow); }
.geo-city-hub .gch-list{ display:grid; gap:10px; }
.geo-city-hub .gch-fact {
  display:flex; align-items:flex-start; gap:12px; min-width:0; margin:0; padding:12px 14px !important;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2) !important;
  color:var(--ink) !important; font-size:.94rem; line-height:1.5; box-shadow:var(--edge);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.geo-city-hub .gch-fact:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--trust) 45%,transparent); box-shadow:var(--shadow),var(--edge); }
/* the check tile: literal "✓" from the markup, white on a trust gradient */
.geo-city-hub .gch-fact b {
  display:grid; place-items:center; flex:0 0 26px; width:26px; height:26px; margin:-1px 0 0 !important; border-radius:9px;
  background:linear-gradient(135deg,var(--trust),color-mix(in srgb,var(--trust) 60%,var(--primary)));
  color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; font-size:.78rem; font-weight:800; line-height:1;
  box-shadow:var(--edge),0 6px 14px -6px color-mix(in srgb,var(--trust) 70%,transparent);
}

/* ── 8. REGION INDEX — readable list, one row per region ── */
.geo-city-hub .gch-region-groups{ columns:auto; column-count:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.geo-city-hub .gch-region {
  --br:14px; position:relative; display:flex; align-items:center; gap:10px; min-width:0; min-height:52px;
  margin:0 !important; padding:10px 14px !important; break-inside:avoid; border:1px solid var(--line);
  border-radius:14px; background:var(--surface-2) !important; color:var(--ink) !important;
  text-decoration:none !important; box-shadow:var(--edge);
  transition:transform .2s,box-shadow .2s,border-color .2s,background .2s;
}
.geo-city-hub .gch-region::before{ content:""; flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--violet)); box-shadow:0 0 0 3px var(--primary-soft); }
.geo-city-hub .gch-region b{ flex:1 1 auto; min-width:0; margin:0; padding:0; color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important; font-size:.94rem; font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
.geo-city-hub .gch-region span{ flex:0 0 auto; display:block; margin:0; padding:0; color:var(--primary) !important; font-size:.74rem !important; font-weight:700; letter-spacing:.02em; line-height:1.3 !important; white-space:nowrap; }
.geo-city-hub .gch-region::after{ content:""; flex:0 0 auto; width:14px; height:14px; background:var(--ico-chev) center/14px no-repeat; opacity:.75; transition:transform .2s,opacity .2s; }
.geo-city-hub .gch-region:hover{ transform:translateY(-2px); border-color:var(--primary-line); background:var(--surface) !important; box-shadow:var(--shadow),var(--edge); }
.geo-city-hub .gch-region:hover::after{ transform:translateX(3px); opacity:1; }

/* ── 9. FAQ ── */
.geo-city-hub .gch-faq{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.geo-city-hub .gch-faq article {
  position:relative; min-width:0; padding:22px 22px 20px; border:1px solid var(--line); border-radius:20px;
  background:var(--surface-2); color:var(--ink); box-shadow:var(--edge); overflow:hidden;
  transition:transform .25s,box-shadow .25s;
}
.geo-city-hub .gch-faq article::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--primary),var(--violet)); }
.geo-city-hub .gch-faq article:hover{ transform:translateY(-3px); box-shadow:var(--shadow),var(--edge); }
.geo-city-hub .gch-faq h3 {
  margin:0 0 10px; color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important;
  font-family:var(--display) !important; font-size:1.08rem !important; font-weight:700; letter-spacing:-.015em;
  line-height:1.3 !important; text-wrap:balance;
}
.geo-city-hub .gch-faq p{ margin:0; color:var(--ink-soft) !important; font-size:.92rem; line-height:1.6; }

/* ── 10. KEYFRAMES ── */
@keyframes gchFadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* ── 11. RESPONSIVE (mobile-first checked at 360 / 768 / 1024 / 1440) ── */
@media (max-width: 1024px) {
  .geo-city-hub .gch-hero{ grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr); }
}
@media (max-width: 960px) {
  .geo-city-hub .gch-hero{ grid-template-columns:1fr; padding:clamp(28px,5vw,40px) !important; }
  .geo-city-hub .gch-panel{ max-width:none; box-shadow:10px 12px 0 -3px color-mix(in srgb,var(--primary) 62%,transparent),0 24px 48px -20px var(--panel-shadow),var(--edge); }
  .geo-city-hub .gch-grid, .geo-city-hub .gch-faq{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .geo-city-hub .gch-split{ grid-template-columns:1fr; gap:24px; }
  .geo-city-hub .gch-head{ flex-direction:column; align-items:flex-start; gap:12px; }
  .geo-city-hub .gch-head p{ flex:0 1 auto; max-width:60ch; text-align:start; }
}
@media (max-width: 640px) {
  .geo-city-hub{ padding:16px 0 64px; font-size:15px; }
  .geo-city-hub .gch-wrap{ width:min(100% - 24px,1240px); }
  .geo-city-hub .gch-hero{ gap:24px; padding:26px 18px !important; border-radius:var(--r); }
  .geo-city-hub .gch-title{ font-size:clamp(2.2rem,10.5vw,3rem) !important; }
  .geo-city-hub .gch-lead{ font-size:.98rem !important; }
  .geo-city-hub .gch-actions{ width:100%; }
  .geo-city-hub .gch-btn{ width:100%; }
  .geo-city-hub .gch-panel{ padding:16px; border-radius:22px; }
  .geo-city-hub .gch-stats{ grid-template-columns:1fr 1fr; }
  .geo-city-hub .gch-stat:last-child{ grid-column:1 / -1; }
  .geo-city-hub .gch-grid, .geo-city-hub .gch-faq{ grid-template-columns:1fr; gap:10px; }
  .geo-city-hub #countries .gch-grid{ grid-template-columns:1fr; }
  .geo-city-hub .gch-section{ padding:20px 16px !important; border-radius:22px !important; margin-top:16px !important; }
  .geo-city-hub .gch-head{ margin-bottom:16px; }
  .geo-city-hub .gch-region-groups{ grid-template-columns:1fr; gap:8px; }
  .geo-city-hub .gch-kicker, .geo-city-hub .gch-eyebrow{ font-size:.66rem; }
  .geo-city-hub .gch-country, .geo-city-hub .gch-city, .geo-city-hub .gch-service{ grid-template-columns:40px minmax(0,1fr) 32px; column-gap:12px; min-height:76px; padding:13px 14px; border-radius:18px; }
  .geo-city-hub :is(.gch-country,.gch-city,.gch-service)::before{ width:40px; height:40px; border-radius:12px; }
  .geo-city-hub :is(.gch-country,.gch-city,.gch-service)::after{ width:32px; height:32px; }
  .geo-city-hub .gch-faq article{ padding:18px 16px; }
}
@media (max-width: 380px) {
  .geo-city-hub .gch-wrap{ width:min(100% - 20px,1240px); }
  .geo-city-hub .gch-hero{ padding:22px 14px !important; }
  .geo-city-hub .gch-stat{ padding:14px 12px; }
  .geo-city-hub .gch-country, .geo-city-hub .gch-city, .geo-city-hub .gch-service{ grid-template-columns:38px minmax(0,1fr) 30px; column-gap:10px; }
  .geo-city-hub :is(.gch-country,.gch-city,.gch-service)::before{ width:38px; height:38px; }
  .geo-city-hub :is(.gch-country,.gch-city,.gch-service)::after{ width:30px; height:30px; }
}

/* ── 12. RTL — layout is logical everywhere; only glyph direction + shine need mirroring ── */
html[dir="rtl"] .geo-city-hub{ text-align:start; }
html[dir="rtl"] .geo-city-hub :is(.gch-country,.gch-city,.gch-service)::after,
html[dir="rtl"] .geo-city-hub .gch-region::after{ transform:scaleX(-1); }
html[dir="rtl"] .geo-city-hub :is(.gch-country,.gch-city,.gch-service):hover::after,
html[dir="rtl"] .geo-city-hub .gch-region:hover::after{ transform:scaleX(-1) translateX(3px); }
html[dir="rtl"] .geo-city-hub :is(.gch-country,.gch-city,.gch-service):hover::before{ transform:scale(1.06) rotate(3deg); }
html[dir="rtl"] .geo-city-hub .gch-btn--primary::after{ transform:skewX(18deg); }
html[dir="rtl"] .geo-city-hub .gch-hero::after{ -webkit-mask-image:linear-gradient(-115deg,rgba(0,0,0,.9),transparent 62%); mask-image:linear-gradient(-115deg,rgba(0,0,0,.9),transparent 62%); }
html[dir="rtl"] .geo-city-hub .gch-panel{ box-shadow:-14px 16px 0 -3px color-mix(in srgb,var(--primary) 62%,transparent),0 32px 64px -22px var(--panel-shadow),var(--edge); }
@media (max-width: 960px) {
  html[dir="rtl"] .geo-city-hub .gch-panel{ box-shadow:-10px 12px 0 -3px color-mix(in srgb,var(--primary) 62%,transparent),0 24px 48px -20px var(--panel-shadow),var(--edge); }
}

/* ── 13. MOTION + FOCUS (scoped to .geo-city-hub only) ── */
@media (prefers-reduced-motion: reduce) {
  .geo-city-hub *, .geo-city-hub *::before, .geo-city-hub *::after {
    animation-duration:.01ms !important; animation-delay:0s !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .geo-city-hub .gch-hero, .geo-city-hub .gch-panel, .geo-city-hub .gch-section{ animation:none; opacity:1; transform:none; }
}
/* solid --primary ring (>= 3:1 on --ground in both themes); gold ring on the navy hero slab */
html body .geo-city-hub :is(a, button):focus-visible {
  outline:3px solid var(--primary) !important; outline-offset:3px !important; border-radius:var(--br,8px) !important;
}
html body .geo-city-hub .gch-hero :is(a, button):focus-visible{ outline-color:var(--gold) !important; }

/* ── 14. GUARD — beat the two competing family sheets that load AFTER us with !important ──
   Enemies (verified in-tree):
   (a) the inline <style> block of geo-cities-hub.blade.php — `.geo-city-hub .gch-*` at (0,2,0)/(0,2,1)
       !important, painting LIGHT tokens (--gch-paper #f6f1e7, --gch-card #fffdfa, --gch-ink #0d342f…)
       that never switch → white cards + dark-green text on the dark akmk ground in dark mode;
   (b) public-pages-unified-2026.min.css — `:is(…geo-city-hub…) :is(.gch-hero,.gch-title,.gch-lead,
       .gch-eyebrow,.gch-btn--primary,.gch-btn:not(.gch-btn--primary))` + `.geo-city-hub .gch-section`
       at (0,2,0) !important, forcing --pp-* light paper/forest that also never switch in dark.
   Both TIE our §2-§9 rules on specificity and win by source order. Every selector below is
   `html body main.geo-city-hub …` = (0,2,3) — it outranks (0,2,0)/(0,2,1) !important in BOTH themes,
   and its values are akmk tokens that DO flip dark. Note: the `.gch-country-card/.gch-city-card/
   .gch-service-card/.gch-country-icon/.gch-city-icon` hooks forced by the unified sheet are ABSENT
   from this markup (cards are `.gch-country/.gch-city/.gch-service`), so those unified rules are inert.
   public-deep-pages-2026.min.css is scoped to .hub-*/.mk-page/.lg-*/.cd-* only → never touches us. */

/* page ground (inline forces --gch-paper + Roboto Flex on the root at (0,1,0)!important) */
html body main.geo-city-hub {
  background:var(--ground) !important; color:var(--ink) !important; font-family:var(--body) !important;
}
/* hero slab (inline → --gch-deep green + #fff; unified → --pp-forest + border:0 + @720 padding:48px) */
html body main.geo-city-hub .gch-hero {
  background:var(--hero-bg) !important; color:var(--hero-ink) !important;
  border:1px solid var(--hero-line) !important; border-radius:calc(var(--r) + 8px) !important;
  padding:clamp(34px,5vw,64px) !important;
}
/* unified defines .gch-hero::after as a 360px coral ring (0,2,1) — reset it, keep our dot-grid veil */
html body main.geo-city-hub .gch-hero::after {
  inset:0 !important; width:auto !important; height:auto !important; right:auto !important; bottom:auto !important;
  border:0 !important; border-radius:0 !important;
  background-image:radial-gradient(rgba(255,255,255,.22) .7px,transparent .8px) !important; background-size:20px 20px !important;
}
/* hero copy (inline+unified force Fraunces serif + light fills) */
html body main.geo-city-hub .gch-title {
  color:var(--hero-ink) !important; -webkit-text-fill-color:var(--hero-ink) !important;
  font-family:var(--display) !important; font-size:clamp(2.5rem,5.2vw,4.3rem) !important;
  font-weight:800 !important; letter-spacing:-.035em !important; line-height:1 !important;
}
html body main.geo-city-hub .gch-lead {
  color:var(--hero-soft) !important; font-size:clamp(1rem,1.4vw,1.15rem) !important; line-height:1.6 !important;
}
/* section eyebrow (inline → #187667 on #edf5f2; unified → --pp-yellow) */
html body main.geo-city-hub .gch-eyebrow {
  background:var(--primary-soft) !important; color:var(--primary) !important; border-color:var(--primary-line) !important;
  font-weight:700 !important; letter-spacing:.08em !important; text-transform:uppercase !important;
}
/* hero buttons (unified → white-glass / coral pill, both !important) */
html body main.geo-city-hub .gch-btn {
  background:var(--hero-glass) !important; border-color:var(--hero-glass-line) !important; color:var(--hero-ink) !important;
  border-radius:var(--r-pill) !important; font-family:var(--display) !important;
}
html body main.geo-city-hub .gch-btn:hover{ background:rgba(255,255,255,.18) !important; border-color:rgba(255,255,255,.5) !important; }
html body main.geo-city-hub .gch-btn--primary {
  background:linear-gradient(135deg,var(--gold),var(--accent)) !important; border-color:transparent !important; color:#241703 !important;
}
/* stats panel + numbers (inline forces --gch-card white + --gch-ink solid number) */
html body main.geo-city-hub .gch-panel{ background:var(--surface) !important; color:var(--ink) !important; }
html body main.geo-city-hub .gch-panel > p{ color:var(--ink-soft) !important; }
html body main.geo-city-hub .gch-stat b{ color:transparent !important; -webkit-text-fill-color:transparent !important; }
html body main.geo-city-hub .gch-stat span{ color:var(--ink-soft) !important; }
/* section cards (inline → --gch-card white; unified → --pp-paper) — restore the theming akmk surface */
html body main.geo-city-hub .gch-section {
  background:color-mix(in srgb,var(--surface) 86%,transparent) !important; color:var(--ink) !important;
  border-color:var(--line) !important; border-radius:var(--r) !important;
  padding:clamp(22px,3vw,36px) !important; margin:22px 0 0 !important;
}
html body main.geo-city-hub .gch-head h2 {
  color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important;
  font-family:var(--display) !important; font-size:clamp(1.55rem,2.8vw,2.15rem) !important;
}
/* link-card + region + faq text (inline sets these at (0,2,1)!important with --gch-ink/--gch-muted) */
html body main.geo-city-hub :is(.gch-country,.gch-city,.gch-service) b {
  color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important;
}
html body main.geo-city-hub :is(.gch-country,.gch-city,.gch-service) span{ color:var(--ink-soft) !important; }
html body main.geo-city-hub .gch-region span{ color:var(--primary) !important; }
html body main.geo-city-hub .gch-faq h3 {
  color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important; font-family:var(--display) !important;
}
/* responsive re-asserts — our own §11 rules sit at (0,2,0) and lose to the (0,2,3) guards above,
   so the mobile paddings/sizes must be mirrored here (matches reference §17 pattern) */
@media (max-width: 960px) {
  html body main.geo-city-hub .gch-hero{ padding:clamp(28px,5vw,40px) !important; }
}
@media (max-width: 640px) {
  html body main.geo-city-hub .gch-hero{ padding:26px 18px !important; border-radius:var(--r) !important; }
  html body main.geo-city-hub .gch-title{ font-size:clamp(2.2rem,10.5vw,3rem) !important; }
  html body main.geo-city-hub .gch-lead{ font-size:.98rem !important; }
  html body main.geo-city-hub .gch-section{ padding:20px 16px !important; border-radius:22px !important; margin-top:16px !important; }
}
@media (max-width: 380px) {
  html body main.geo-city-hub .gch-hero{ padding:22px 14px !important; }
}