/* Migratia.co.uk — shared styles */
:root{
  --teal-dark:#151d46;
  --teal-mid:#25347d;
  --teal-light:#bf9855;
  --ink:#1a2730;
  --muted:#5a6b76;
  --line:#e2e8ec;
  --bg:#ffffff;
  --bg-soft:#f4f8fa;
  --radius:12px;
  --maxw:1160px;
  --shadow:0 10px 30px rgba(0,58,81,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
/* overflow-x only (never overflow-y) — a defensive guard against any
   horizontal overflow (e.g. the 540px desktop dropdown at ~900-1000px
   window widths), without disabling vertical position:sticky anywhere on
   the page (header.site, .sidebar, .sub-head all rely on it). overflow is
   not an inherited property, so this has no effect on the element-level
   overflow-x:auto scroll containers elsewhere (.prose table, .admin-table)
   — those keep scrolling exactly as before. */
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);line-height:1.65;background:var(--bg);
}
img{max-width:100%;display:block}
a{color:var(--teal-mid);text-decoration:none}
a:hover{color:var(--teal-dark)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.btn{
  display:inline-block;background:var(--teal-light);color:var(--teal-dark);
  padding:14px 28px;border-radius:50px;font-weight:600;
  transition:transform .15s ease,background .2s ease;border:none;cursor:pointer;
}
.btn:hover{background:var(--teal-mid);color:#fff;transform:translateY(-2px)}
.btn-ghost{background:transparent;border:2px solid #fff;color:#fff}
.btn-ghost:hover{background:#fff;color:var(--teal-dark)}
.btn-outline{background:transparent;border:2px solid var(--teal-mid);color:var(--teal-mid)}
.btn-outline:hover{background:var(--teal-mid);color:#fff}
/* Same red already used for .link-danger text-links, as a solid button —
   for destructive actions that warrant more visual weight than a plain
   text link (currently: the typed-confirmation site-page delete flow). */
.btn-danger{background:#b3261e;color:#fff}
.btn-danger:hover{background:#8a1c15;color:#fff}
.btn-danger:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}
.btn-danger:disabled:hover{background:var(--line);color:var(--muted);transform:none}

/* Header */
header.site{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{display:flex;align-items:center}
.logo-img-wrap{display:block;width:161px;height:38px;overflow:hidden;position:relative;flex-shrink:0}
.logo-img-wrap img{position:absolute;top:-72px;left:-11px;width:183px;height:183px;max-width:none}
.menu{display:flex;gap:30px;list-style:none;align-items:center}
.menu a{color:var(--ink);font-weight:500}
.menu a:hover{color:var(--teal-mid)}
.nav-cta{display:flex;align-items:center;gap:18px}
.menu-toggle{display:none;background:none;border:none;font-size:1.6rem;color:var(--teal-dark);cursor:pointer}
/* contact.html IS the booking flow, so the header button is redundant there
   at every width. Scoped via a body class rather than diverging the shared
   header markup — .nav-cta itself (and .menu-toggle within it) is untouched,
   so the hamburger toggle stays visible as normal. */
body.page-contact .nav-cta .btn{display:none}

/* Hero */
/* Background now comes from .hero-banner's rotating slides underneath;
   .hero itself no longer paints its own gradient. */
.hero{position:relative;overflow:hidden;color:#fff;padding:90px 0}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}

/* Homepage banner — placeholder slides, swap in real images here.
   Fills the hero edge-to-edge behind .wrap (see z-index above); a fade
   cross-transition was chosen over a slide, since these are flat gradients
   rather than photography — sliding a gradient sideways tends to read as
   an odd wipe, where a fade reads as a clean, deliberate transition, and
   it can't introduce any horizontal overflow/layout shift under the
   static foreground content. */
.hero-banner{position:absolute;inset:0;z-index:0}
.banner-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;
  display:flex;align-items:center;justify-content:center}
.banner-slide.is-active{opacity:1}
/* Sits on top of a slide's own background-image paint (which is always the
   bottommost layer of that box, regardless of DOM order) and beneath the
   real headline/subtitle/CTA, which live outside .banner-slide entirely in
   .hero .wrap's own higher stacking context — so no z-index juggling is
   needed here for the text ordering to hold. */
.banner-overlay{position:absolute;inset:0;pointer-events:none}
/* Four distinct navy-family treatments — angle/tone/shape vary, palette
   doesn't (post-rebalance: no gold in decorative fills, gold stays reserved
   for the interactive controls below). */
.banner-slide-0{background:linear-gradient(135deg,var(--teal-dark) 0%,var(--teal-mid) 100%)}
.banner-slide-1{background:linear-gradient(200deg,var(--teal-mid) 0%,var(--teal-dark) 100%)}
.banner-slide-2{background:linear-gradient(60deg,var(--teal-dark) 0%,var(--teal-mid) 55%,var(--teal-dark) 100%)}
.banner-slide-3{background:radial-gradient(circle at 30% 25%,var(--teal-mid) 0%,var(--teal-dark) 72%)}

.banner-placeholder{text-align:center;opacity:.4}
.banner-icon{display:block;font-size:4.5rem;line-height:1;margin-bottom:10px}
.banner-caption{display:block;font-size:.8rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#fff}

.banner-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.1);color:#fff;font-size:.95rem;cursor:pointer;
  display:grid;place-items:center;transition:background .2s ease,color .2s ease}
.banner-arrow:hover,.banner-arrow:focus-visible{background:var(--teal-light);
  border-color:var(--teal-light);color:var(--teal-dark)}
.banner-prev{left:20px}
.banner-next{right:20px}

.banner-dots{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;
  display:flex;gap:9px}
.banner-dot{width:9px;height:9px;border-radius:50%;border:1px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.25);padding:0;cursor:pointer}
.banner-dot.is-active{background:var(--teal-light);border-color:var(--teal-light)}
.banner-dot:focus-visible{outline:2px solid var(--teal-light);outline-offset:2px}

@media(max-width:560px){
  .banner-arrow{width:34px;height:34px}
  .banner-prev{left:10px}
  .banner-next{right:10px}
  .banner-icon{font-size:3.4rem}
}
/* min-height reserved in em (so it scales with each breakpoint's own
   font-size automatically): 2 lines for the headline, 3 for the subtitle.
   The 4 slides' copy varies in length/word-wrap, and .hero's height is
   otherwise just whatever its content needs — without this, a slide with
   a shorter headline/subtitle would render .hero shorter than one with a
   longer one, jumping the whole section's height on every transition. */
.hero h1{font-size:3rem;line-height:1.15;margin-bottom:20px;font-weight:800;min-height:2.3em}
.hero p{font-size:1.15rem;opacity:.92;margin-bottom:32px;max-width:520px;min-height:4.95em}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
/* Copy that swaps per-slide (headline, subtitle, primary CTA) — fades out,
   swaps text via hero-banner.js, fades back in, synced with the .9s
   background cross-fade above (each half is .45s, so text is invisible at
   the crossfade's busiest midpoint and fully in by the time the new
   background is fully in). The static ghost button and reg-badge below are
   NOT part of this — they're brand-level, unchanged across slides. */
.hero-copy{transition:opacity .45s ease}
.hero-copy.is-swapping{opacity:0}
.hero-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);padding:30px;backdrop-filter:blur(6px)}
.hero-card h3{font-size:1.2rem;margin-bottom:16px}
.hero-card ul{list-style:none}
.hero-card li{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.12);display:flex;gap:10px}
.hero-card li:last-child{border:none}
.hero-card li::before{content:"✓";color:#fff;font-weight:800}

/* Sections */
section{padding:78px 0}
.section-head{text-align:center;max-width:680px;margin:0 auto 50px}
.eyebrow{color:var(--teal-mid);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem}
.section-head h2{font-size:2.2rem;margin:12px 0 14px;color:var(--teal-dark)}
.section-head p{color:var(--muted);font-size:1.05rem}
.soft{background:var(--bg-soft)}

/* Cards grid */
.grid{display:grid;gap:26px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;
  transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .ic{width:52px;height:52px;border-radius:12px;background:var(--bg-soft);
  display:grid;place-items:center;font-size:1.5rem;margin-bottom:18px}
.card h3{color:var(--teal-dark);font-size:1.25rem;margin-bottom:10px}
.card p{color:var(--muted);margin-bottom:16px}
.card a{font-weight:600}

/* Stats — navy band (measured, not assumed: white on --teal-dark is
   16.2:1, comfortably clearing WCAG AA's 4.5:1 for the labels' regular-size
   text; the pale blue below is the exact color footer.site already uses
   for secondary text on the same navy, at 12.23:1, so this section and the
   footer read as one consistent "navy block" treatment rather than two.
   Gold (--teal-light) was considered for the numbers — it does pass AA
   against --teal-dark at 6.05:1 — but skipped deliberately: gold currently
   reads sitewide as a CTA/interactive accent only (buttons, active banner
   dot), and giving it a second, non-interactive role here would dilute
   that. White also matches .cta-band's own white-on-navy heading, the
   only other solid-navy block on the site. .stats/.stat are homepage-only
   (confirmed, not reused elsewhere), so these colors are set directly
   rather than needing to be scoped under a parent selector. */
.stats-band{background:var(--teal-dark)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;text-align:center}
.stat h3{font-size:2.6rem;color:#fff;font-weight:800}
.stat p{color:#cfe3ec;font-weight:500}

/* Steps */
.steps{counter-reset:s;display:grid;gap:22px;max-width:820px;margin:0 auto}
.step{display:flex;gap:22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.step::before{counter-increment:s;content:counter(s);flex:0 0 46px;height:46px;border-radius:50%;
  background:var(--teal-dark);color:#fff;font-weight:800;display:grid;place-items:center}
.step h3{color:var(--teal-dark);margin-bottom:6px}
.step p{color:var(--muted)}

/* CTA band */
.cta-band{background:linear-gradient(135deg,var(--teal-dark),var(--teal-mid));color:#fff;text-align:center}
.cta-band h2{font-size:2.1rem;margin-bottom:14px}
.cta-band p{opacity:.92;max-width:560px;margin:0 auto 28px}
/* band is navy again, so the ghost button uses the standard white treatment */

/* Footer */
footer.site{background:var(--teal-dark);color:#cfe3ec;padding:60px 0 26px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px}
footer.site h4{color:#fff;margin-bottom:16px;font-size:1.05rem}
footer.site ul{list-style:none}
footer.site li{padding:6px 0}
footer.site a{color:#cfe3ec}
footer.site a:hover{color:#fff}
.foot-logo{display:flex;align-items:center;margin-bottom:14px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:22px;text-align:center;font-size:.9rem;opacity:.8}
.placeholder{background:rgba(37,52,125,.12);padding:1px 6px;border-radius:4px}

/* Page hero (interior) */
.page-hero{background:linear-gradient(135deg,var(--teal-dark),var(--teal-mid));color:#fff;padding:64px 0}
.page-hero .crumbs{font-size:.9rem;opacity:.85;margin-bottom:14px}
.page-hero .crumbs a{color:#cfe3ec}
/* same pale-blue -> white pattern the footer links use on navy; gold shades
   fail AA against the lighter end of this gradient */
.page-hero .crumbs a:hover{color:#fff}
.page-hero h1{font-size:2.6rem;max-width:760px}
.page-hero p{margin-top:14px;opacity:.92;max-width:680px;font-size:1.1rem}
/* Category tags on an individual post — translucent-white pills, matching
   .hero-card's existing rgba(255,255,255,...) treatment for content sitting
   on this same navy gradient. */
.post-categories{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.post-categories a{display:inline-block;padding:4px 13px;border-radius:50px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);
  color:#fff;font-weight:600;font-size:.78rem}
.post-categories a:hover{background:rgba(255,255,255,.24)}

/* Article layout */
.layout{display:grid;grid-template-columns:1fr 320px;gap:48px;padding:64px 0}
.prose h2{color:var(--teal-dark);font-size:1.7rem;margin:34px 0 14px}
.prose h3{color:var(--teal-mid);font-size:1.25rem;margin:26px 0 10px}
.prose p{margin-bottom:16px;color:#37474f}
.prose ul,.prose ol{margin:0 0 18px 22px}
.prose li{margin-bottom:8px;color:#37474f}
.prose .callout{background:var(--bg-soft);border-left:4px solid var(--teal-mid);
  padding:18px 22px;border-radius:8px;margin:22px 0}
.prose table{width:100%;border-collapse:collapse;margin:22px 0}
.prose th,.prose td{border:1px solid var(--line);padding:12px 14px;text-align:left}
.prose th{background:var(--teal-dark);color:#fff}
.prose tr:nth-child(even){background:var(--bg-soft)}
/* Wide tables scroll horizontally on narrow screens instead of forcing the
   page wide. Desktop rendering is untouched. */
@media(max-width:700px){
  .prose table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .prose th,.prose td{white-space:nowrap}
}
.sidebar{position:sticky;top:100px;align-self:start}
.side-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin-bottom:24px;box-shadow:var(--shadow)}
.side-card.dark{background:var(--teal-dark);color:#fff;border:none}
/* plain links in dark cards are white, but buttons must keep their own
   colours — otherwise this rule outranks .btn-ghost:hover and the hover
   state renders white text on a white background */
.side-card.dark a:not(.btn){color:#fff}
.side-card h4{color:var(--teal-dark);margin-bottom:14px}
.side-card.dark h4{color:#fff}
.side-card ul{list-style:none}
.side-card li{padding:8px 0;border-bottom:1px solid var(--line)}
.side-card li:last-child{border:none}
.toc a{color:var(--muted);display:block;padding:6px 0}
.toc a:hover{color:var(--teal-mid)}

/* FAQ */
.faq{max-width:820px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:12px;padding:4px 22px}
.faq summary{cursor:pointer;font-weight:600;padding:16px 0;color:var(--teal-dark);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--teal-mid);font-size:1.4rem}
.faq details[open] summary::after{content:"−"}
.faq p{padding:0 0 16px;color:var(--muted)}

@media(max-width:900px){
  .hero .wrap,.layout,.foot-grid{grid-template-columns:1fr}
  .grid-3,.grid-2,.grid-4,.stats{grid-template-columns:1fr 1fr}
  .sidebar{position:static}
  .hero h1{font-size:2.3rem}
  /* .hero .wrap stacks to one column above, so .hero grows tall with
     content (h1, p, actions, reg-badge, hero-card all in a vertical run).
     The arrows are normally vertical-centered on the whole .hero box,
     which would land them mid-way through that stacked text instead of in
     clear space. Pin them to the empty top padding gutter instead — same
     idea as the dots, which already sit safely in the bottom gutter via a
     fixed `bottom` offset rather than centering. */
  .banner-arrow{top:24px;transform:none}
  .menu{display:none}
  /* Bounded to the viewport height below the sticky 76px header, so the open
     menu (nav links + the fully-expanded 17-item submenu, ~934px of content
     on a real device) scrolls internally instead of extending past the
     bottom of the screen with no way to reach the rest of it. */
  .menu.open{display:flex;position:absolute;top:76px;left:0;right:0;background:#fff;
    flex-direction:column;padding:20px;gap:16px;border-bottom:1px solid var(--line);
    max-height:calc(100vh - 76px);overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain}
  .menu-toggle{display:block}
  /* The chat widget (js/chat-widget.js) is appended directly to <body>, so
     it's a sibling of header.site rather than of .menu — no plain CSS
     combinator can reach it from here, and the two features share no JS
     state. :has() keeps this a pure-CSS, self-contained fix instead of
     wiring a class through main.js. Hides the whole .mg-chat root (bubble
     AND panel, if the visitor had it open) so neither can end up floating
     over the expanded menu at z-index:9000; both reappear the instant the
     menu closes, since this is just a display toggle tied to the menu's
     own .open class. */
  body:has(.menu.open) .mg-chat{display:none}
}
@media(max-width:560px){
  .grid-3,.grid-2,.grid-4,.stats,.foot-grid{grid-template-columns:1fr}
  .hero h1{font-size:2rem}.section-head h2{font-size:1.7rem}
  /* The per-slide primary CTA text length varies ("Book a Consultation" vs
     "Explore Business Immigration"), and at this width .hero-actions has
     little room before its flex-wrap kicks in — a longer label could wrap
     the ghost button onto a second row on some slides but not others,
     shifting .hero's height between slides. Reserve room for 2 rows always
     so that never happens, regardless of which slide is showing. */
  .hero-actions{min-height:118px}
  /* Sitewide: logo (fixed ~161px) + "Book a Consultation" pill (~230px) +
     hamburger toggle need roughly 430-440px of header content width; below
     560px that starts crowding/wrapping (a 560px viewport leaves only
     ~512px of content once .wrap's 24px side padding is subtracted). The
     hamburger toggle is untouched — it's the primary mobile nav regardless,
     and the hero button/sidebar CTA/CTA band/mobile "Contact" link all
     still reach booking without this one. */
  .nav-cta .btn{display:none}
}

/* Enquiry form */
.enquiry-form{display:flex;flex-direction:column;gap:14px}
.enquiry-form label{display:flex;flex-direction:column;gap:6px;font-weight:600;color:var(--teal-dark);font-size:.95rem}
.enquiry-form input,.enquiry-form select,.enquiry-form textarea{
  font:inherit;padding:11px 13px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--ink);font-weight:400;width:100%}
.enquiry-form input:focus,.enquiry-form select:focus,.enquiry-form textarea:focus{
  outline:none;border-color:var(--teal-mid);box-shadow:0 0 0 3px rgba(37,52,125,.20)}
.enquiry-form button{margin-top:6px;align-self:flex-start}
.form-note{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-weight:500}
.form-note.err{background:#fdecea;color:#b3261e;border:1px solid #f5c6c2}

/* Dropdown submenu — two-column mega menu.
   .sub is capped to the viewport height below the header (76px header +
   14px gap = 90px offset, minus 20px bottom breathing room = 110px) and
   clips via overflow:hidden; the actual scrolling happens one level in, on
   .sub-cols, so .sub-all and each .sub-head can stay pinned in view via
   position:sticky while the column lists scroll underneath them. */
.menu li.has-sub{position:relative}
/* The trigger is a real <button>, not an <a> — it toggles the dropdown
   rather than navigating (that's what "View All Services" inside it is
   for). Re-declares the color/weight/cursor the old <a> got for free from
   the generic .menu a rule below, since a <button> doesn't match that
   selector and would otherwise fall back to native browser chrome. */
.menu .has-sub-toggle{background:none;border:none;font:inherit;color:var(--ink);
  font-weight:500;cursor:pointer}
.menu .has-sub-toggle:hover{color:var(--teal-mid)}
.menu .sub{position:absolute;top:calc(100% + 14px);left:0;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow);width:540px;padding:14px;
  display:flex;flex-direction:column;max-height:calc(100vh - 110px);overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:all .18s ease;z-index:60}
/* Two independent ways to reveal it: :hover for desktop mouse users (kept
   exactly as before), and .open (toggled by main.js on click/Enter/Space
   via the button's aria-expanded state) for keyboard users and touchscreen
   laptops/tablets above the 900px breakpoint, neither of which have real
   hover. */
.menu li.has-sub:hover .sub,
.menu li.has-sub.open .sub{opacity:1;visibility:visible;transform:translateY(0)}
/* bridges the 14px gap so the menu doesn't close while moving the cursor into it */
.menu li.has-sub::after{content:"";position:absolute;top:100%;left:0;width:100%;height:16px}
.menu .sub-all{display:block;padding:9px 12px;margin-bottom:12px;border-radius:7px;text-align:center;
  background:var(--bg-soft);color:var(--teal-dark);font-weight:700;font-size:.9rem;flex-shrink:0}
.menu .sub-all:hover{background:var(--teal-mid);color:#fff}
.menu .sub-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-items:start;
  overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0;padding-right:4px}
.menu .sub-head{margin:0 0 6px;padding:0 12px 7px;border-bottom:1px solid var(--line);
  font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-mid);
  position:sticky;top:0;background:#fff;z-index:1}
.menu .sub-col ul{list-style:none;margin:0;padding:0}
.menu .sub-col li{display:block}
.menu .sub-col a{display:block;padding:7px 12px;border-radius:7px;color:var(--ink);font-weight:500;
  font-size:.92rem;line-height:1.35;white-space:normal}
.menu .sub-col a:hover{background:var(--bg-soft);color:var(--teal-mid)}
.menu .has-sub-toggle::after{content:" ▾";color:var(--teal-mid);font-size:.8em}
.reg-badge{background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:16px 20px;
  font-size:.9rem;color:var(--muted);margin-top:18px}
.reg-badge strong{color:var(--teal-dark)}
@media(max-width:900px){
  /* No hover on touch, so the submenu is collapsed by default here and
     only revealed by tapping the toggle button, which adds .open to the
     parent <li> (see main.js). Sits alongside — not instead of — the outer
     hamburger .menu.open toggle: tapping this button only ever affects its
     own <li>, never the whole nav. */
  .menu .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:none;padding:0 0 0 14px;width:auto;display:none;max-height:none;overflow:visible}
  .menu li.has-sub.open .sub{display:block}
  .menu li.has-sub::after{display:none}
  /* stack to a single column; the whole open menu scrolls as one list here
     (see .menu.open), so the desktop per-column scroll/sticky is turned off */
  .menu .sub-cols{grid-template-columns:1fr;gap:14px 0;overflow-y:visible;max-height:none;padding-right:0}
  .menu .sub-all{text-align:left;margin-bottom:10px}
  .menu .sub-head{padding-left:0;position:static}
  .menu .sub-col a{padding-left:0}
}

/* Blog */
/* Category filter bar — the same bordered-pill/hover-fill language as
   .btn-outline, and the same filled-active state as .blog-pagination
   a.active just below, composed into a horizontal chip row rather than a
   new visual system. */
.category-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.category-filter a{display:inline-block;padding:8px 18px;border-radius:50px;
  border:2px solid var(--teal-mid);color:var(--teal-mid);font-weight:600;font-size:.9rem}
.category-filter a:hover{background:var(--bg-soft)}
.category-filter a.active{background:var(--teal-mid);border-color:var(--teal-mid);color:#fff}
.blog-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;overflow:hidden;padding:0}
.blog-card-img{height:180px;background-size:cover;background-position:center;background-color:var(--bg-soft)}
.blog-card h3,.blog-card p,.blog-card .blog-card-date{padding-left:24px;padding-right:24px}
.blog-card h3{margin-top:20px;color:var(--teal-dark)}
.blog-card p{color:var(--muted)}
.blog-card .blog-card-date{color:var(--teal-mid);font-weight:600;font-size:.85rem;padding-bottom:22px}
.blog-card .ic{margin:20px 24px 0}
.blog-pagination{display:flex;justify-content:center;gap:8px;margin-top:44px}
.blog-pagination a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;color:var(--teal-dark);font-weight:600}
.blog-pagination a:hover{background:var(--bg-soft)}
.blog-pagination a.active{background:var(--teal-dark);color:#fff;border-color:var(--teal-dark)}

/* ---------------------------------------------------------------------------
   Live chat widget — injected by js/chat-widget.js, so every rule is
   namespaced under .mg-chat and cannot reach existing page markup.
   --------------------------------------------------------------------------- */
.mg-chat{position:fixed;right:20px;bottom:20px;z-index:9000;font-family:inherit}
.mg-chat-bubble{width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;
  background:var(--teal-dark);color:#fff;font-size:1.6rem;line-height:1;
  box-shadow:0 8px 24px rgba(0,0,0,.28);display:grid;place-items:center;margin-left:auto}
.mg-chat-bubble:hover{background:var(--teal-mid);color:#fff}
.mg-chat-panel{display:none;width:340px;max-width:calc(100vw - 40px);height:460px;max-height:calc(100vh - 120px);
  background:#fff;border-radius:14px;overflow:hidden;margin-bottom:12px;
  box-shadow:0 20px 50px rgba(0,0,0,.3);flex-direction:column}
.mg-chat.is-open .mg-chat-panel{display:flex}
.mg-chat-header{background:var(--teal-dark);color:#fff;padding:14px 16px;display:flex;
  align-items:center;justify-content:space-between;flex-shrink:0}
.mg-chat-title{font-weight:700;font-size:.98rem}
.mg-chat-close{background:none;border:none;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;padding:0 4px}
.mg-chat-body{flex:1;overflow-y:auto;padding:14px;background:var(--bg-soft)}
.mg-chat-log{display:flex;flex-direction:column;gap:10px}
.mg-chat-msg{max-width:88%;padding:9px 12px;border-radius:10px;font-size:.9rem;line-height:1.45}
.mg-chat-msg.is-visitor{background:#fff;border:1px solid var(--line);color:var(--ink);align-self:flex-start}
.mg-chat-msg.is-admin{background:var(--teal-dark);color:#fff;align-self:flex-end}
.mg-chat-who{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;opacity:.65;margin-bottom:3px}
.mg-chat-text{white-space:pre-wrap;word-wrap:break-word}
.mg-chat-notice{margin-top:12px;font-size:.82rem;color:var(--muted);background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.mg-chat-restart{display:block;margin-top:8px;background:var(--teal-dark);color:#fff;
  border:none;border-radius:50px;padding:7px 14px;font-weight:700;font-size:.82rem;cursor:pointer}
.mg-chat-form{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.mg-chat-intro{font-size:.85rem;color:var(--muted);margin:0 0 4px}
.mg-chat-form input,.mg-chat-form textarea,.mg-chat-composer input{
  font:inherit;font-size:.9rem;padding:9px 11px;border:1px solid var(--line);border-radius:8px;
  width:100%;background:#fff;color:var(--ink)}
.mg-chat-form input:focus,.mg-chat-form textarea:focus,.mg-chat-composer input:focus{
  outline:none;border-color:var(--teal-mid);box-shadow:0 0 0 3px rgba(37,52,125,.20)}
.mg-chat-btn{background:var(--teal-dark);color:#fff;border:none;border-radius:50px;
  padding:9px 18px;font-weight:700;font-size:.88rem;cursor:pointer;flex-shrink:0}
.mg-chat-btn:hover{background:var(--teal-mid);color:#fff}
.mg-chat-btn:disabled{opacity:.6;cursor:default}
.mg-chat-err{font-size:.82rem;color:#b3261e}
.mg-chat-composer{display:flex;gap:8px;padding:12px;background:#fff;border-top:1px solid var(--line);flex-shrink:0}
@media(max-width:560px){
  .mg-chat{right:14px;bottom:14px}
  .mg-chat-panel{width:calc(100vw - 28px);height:70vh}
}

/* AI assistant messages — gold-tinted, distinct from visitor (white) and
   adviser (navy) cards in the admin conversation view. */
.side-card.ai{background:rgba(37,52,125,.07);border:1px solid rgba(37,52,125,.35)}
.side-card.ai .admin-slug{color:var(--teal-mid)}
.ai-badge{display:inline-block;background:var(--teal-mid);color:#fff;
  border-radius:50px;padding:1px 9px;font-size:.68rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;margin-right:6px}
.mg-chat-msg.is-ai{background:rgba(37,52,125,.07);border:1px solid rgba(37,52,125,.35);color:var(--ink);align-self:flex-start}

/* "AI reply skipped" flag in the admin chat list — amber, deliberately not
   the brand gold, so it reads as a warning rather than an accent. */
.ai-skip-badge{display:inline-block;margin-top:5px;background:#fdf3e0;color:#a0670c;
  border:1px solid #f0d9ac;border-radius:6px;padding:2px 8px;font-size:.72rem;font-weight:700;cursor:help}