/* Xcelentra — design system
 * Brand tokens extracted from the live vamtam-consulting WordPress theme
 * (see migration/seed/design-tokens.json): gold #e8aa03, black/charcoal neutrals (no blue),
 * fonts Montserrat (all text) + Rufina (decorative serif display).
 */

:root {
  --primary:   #2b2a28;   /* charcoal — links, focus, dark surfaces (live site uses no blue) */
  --primary-2: #111111;
  --primary-3: #3a3a3a;
  --primary-4: #f7f6f3;   /* light neutral tint */
  --accent:    #e8aa03;   /* golden yellow (accent-color-1) — buttons, hovers */
  --accent-2:  #d99f03;   /* darker gold (accent-color-2) — hover states */
  --accent-3:  #ea8202;   /* logo orange */
  /* text-safe gold: dark enough for 4.5:1 on white (WCAG 1.4.3); the raw brand
     gold #e8aa03 is decorative-only on light backgrounds */
  --accent-text:   #8a6502;
  --accent-text-2: #6f5102;
  --navy:      #1a1a1a;   /* legacy alias — near-black */
  --charcoal:  #282525;   /* live footer background */
  --cream:     #fdf8ec;
  --heading:   #111111;
  --text:      #2c2c2c;
  --soft:      #f0efef;
  --border:    #c9c9c9;
  --muted:     #5f5f5f;
  --white:     #ffffff;
  --radius:    6px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow-md: 0 6px 24px rgba(0,0,0,.12);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.16);
  --t:         .2s ease;
}

/* ─── Reset ─── */
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth }
/* horizontal-overflow guard: nothing may widen the page beyond the viewport */
html, body { overflow-x:clip }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto } }
body { margin:0; font-family:'Montserrat',Helvetica,Arial,sans-serif; font-size:16px; line-height:1.6; color:var(--text); background:#fff; font-weight:400 }
img { max-width:100%; height:auto; display:block }
a { color:var(--primary); text-decoration:none; transition:color var(--t) }
a:hover { color:var(--accent-text) }
h1,h2,h3,h4,h5 { font-family:'Montserrat',Helvetica,Arial,sans-serif; color:var(--heading); line-height:1.25; margin:0 0 .5em; font-weight:600 }
h1 { font-size:clamp(2.2rem,5.5vw,4.4rem); font-weight:600; line-height:1.14 }
/* live theme: h2 = 44px/1.18 w500 desktop, 30px mobile */
h2 { font-size:clamp(1.875rem,3.1vw,2.75rem); font-weight:500; line-height:1.18 }
h3 { font-size:clamp(1.2rem,2.6vw,1.75rem); font-weight:400; line-height:1.36 }
h4 { font-size:1.05rem }
p { margin:0 0 1em }

/* ─── Utilities ─── */
.container   { max-width:1320px; margin:0 auto; padding:0 20px } /* live .fl-row-content: 1280px content + 20px margins (probed: row content x80..1360 at 1440) */
.accent      { color:var(--accent-text) }
.text-center { text-align:center }
.skip-link { position:absolute; left:-9999px; top:0; z-index:2100; background:var(--primary); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 8px 0; font-weight:600 }
.skip-link:focus { left:0 }
:focus-visible { outline:3px solid var(--primary); outline-offset:2px }
/* links inside prose must not rely on color alone (WCAG 1.4.1) */
p a:not(.btn), address a, .faq-body a { text-decoration:underline }
.btn:focus-visible, .topbar-cta:focus-visible, .float-book:focus-visible, .float-wa:focus-visible,
.site-footer :focus-visible, .why-card:focus-visible, .dialog-close:focus-visible { outline-color:#fff; outline-offset:3px }
.sr-only     { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
.mt-2 { margin-top:1rem } .mt-3 { margin-top:1.5rem } .mt-4 { margin-top:2rem } .mb-0 { margin-bottom:0 }

/* ─── Buttons ─── */
/* live .vamtam-button: 14px w400, padding 16px 32px, radius 100px, no border
   (probed "Testimonials" 152x48 / "Send" pad 16px 30px on the homepage);
   text = near-black instead of live white-on-gold for WCAG (accepted deviation) */
.btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:14px 30px; border-radius:100px;
  background:var(--accent); color:#1a1a1a; font-weight:400; font-size:.875rem;
  border:2px solid var(--accent); cursor:pointer; white-space:nowrap;
  font-family:inherit; text-decoration:none; line-height:1.2;
  transition:background var(--t),transform var(--t),box-shadow var(--t);
}
.btn:hover { background:var(--accent-2); border-color:var(--accent-2); color:#1a1a1a; transform:translateY(-2px); box-shadow:0 6px 16px rgba(232,170,3,.35) }
.btn:active { transform:translateY(0) }
.btn-outline { background:transparent; color:#fff; border-color:rgba(255,255,255,.8) }
.btn-outline:hover { background:#fff; color:var(--primary); border-color:#fff }
.btn-teal { background:var(--primary); border-color:var(--primary) }
.btn-teal:hover { background:var(--primary-2); border-color:var(--primary-2) }
.btn-ghost { background:transparent; color:var(--primary); border-color:var(--primary) }
.btn-ghost:hover { background:var(--primary); color:#fff }
.btn-sm { padding:.45rem 1rem; font-size:.85rem }
.btn-lg { padding:1rem 2.2rem; font-size:1.05rem }

/* ─── Social strip (live-site top bar: white circles, teal glyphs on brand orange) ─── */
.social-strip { background:var(--accent); padding:.35rem 0 }
.social-strip-inner { display:flex; justify-content:flex-end; gap:.5rem }
.social-strip a { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#fff; transition:transform var(--t) }
.social-strip a:hover { transform:translateY(-1px) }
.social-strip svg { width:15px; height:15px; fill:var(--primary) }

/* ─── Brand row: branch logos (live-site row 2) ─── */
.brand-row { display:none } /* legacy nioeyes two-row pattern — unused */

/* ─── Header (live-site parity: one white bar, logo left, nav + gold Login right) ─── */
.site-header {
  background:#fff; border-bottom:1px solid var(--soft);
  position:sticky; top:0; z-index:1000; box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; padding-top:15px; padding-bottom:15px; gap:.75rem } /* live header: 80px tall, logo y15..65 */
.brand { display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; flex-shrink:0 }
.brand img { height:50px; width:auto } /* live logo: 159x50 (probed header img rect) */
@media (max-width:1023px) { .brand img { height:42px } }
.site-header .nav-toggle { display:inline-flex }
@media (min-width:1024px) { .site-header .nav-toggle { display:none } }

/* Desktop nav — live parity: centered between logo and Login, 16px w400, no chevrons */
.main-nav { display:none }
.main-nav ul { list-style:none; margin:0; padding:0 }
.main-nav > ul { display:flex; align-items:center; gap:5px } /* top level only — the .dropdown ul stacks; live li gap ~4-5px */
.main-nav > ul > li { position:relative }
.main-nav > ul > li > a, .main-nav > ul > li > button {
  position:relative;
  display:inline-flex; align-items:center; gap:.28rem;
  padding:12px 10px; line-height:26px; /* live #mega-menu-menu-header a: 50px tall item, padding 0 10px */
  color:#2d3035; font-weight:400; font-size:1rem;
  white-space:nowrap; background:none; border:none; cursor:pointer; font-family:inherit;
  transition:color var(--t);
}
/* live dropdowns open on hover with no visible chevron */
.main-nav .nav-chev { display:none }
/* hover/active: gold text + short gold underline */
.main-nav > ul > li > a::after, .main-nav > ul > li > button::after {
  content:""; position:absolute; left:10px; bottom:.35rem; width:26px; height:2px;
  background:var(--accent); opacity:0; transition:opacity var(--t);
}
.main-nav > ul > li > a:hover, .main-nav > ul > li > button:hover,
.main-nav > ul > li:focus-within > button, .main-nav > ul > li.open > button,
.main-nav > ul > li.active > a, .main-nav > ul > li > a[aria-current="page"] { color:var(--accent-text) }
.main-nav > ul > li > a:hover::after, .main-nav > ul > li > button:hover::after,
.main-nav > ul > li:focus-within > button::after, .main-nav > ul > li.open > button::after,
.main-nav > ul > li.active > a::after, .main-nav > ul > li > a[aria-current="page"]::after { opacity:1 }
/* on the homepage the "Home" item shows as active (live behaviour) */
body.home .main-nav > ul > li:first-child > button { color:var(--accent-text) }
body.home .main-nav > ul > li:first-child > button::after { opacity:1 }

/* Dropdown — live Max-Mega-Menu parity (probed 2026-07): white panel 220px, no border/radius,
   shadow 0 4px 30px rgba(0,0,0,.06), items 16px w400 #45545e pad 5px 25px lh 30px, hover = gold text.
   top:100% (no gap) — a hover gap between button and panel makes the menu close mid-travel.
   Close is delayed (~.25s) so the pointer can cut corners without the panel flickering shut. */
.dropdown {
  display:block; /* .main-nav ul is flex — the panel must stack vertically */
  position:absolute; top:100%; left:0;
  background:#fff; box-shadow:0 4px 30px rgba(0,0,0,.06);
  min-width:220px; padding:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease .25s, visibility 0s .43s; z-index:300;
}
.main-nav > ul > li:hover .dropdown,
.main-nav > ul > li.open .dropdown,
.main-nav > ul > li:focus-within .dropdown {
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .18s ease .05s, visibility 0s .05s; /* tiny open delay stops pass-over flicker */
}
.dropdown li { display:block; width:100% }
.dropdown a { display:block; padding:5px 25px; line-height:30px; color:#45545e; font-size:1rem; font-weight:400; white-space:nowrap }
.dropdown a:hover, .dropdown a:focus-visible, .dropdown a[aria-current="page"] { color:var(--accent); background:#fff; text-decoration:none }
.drop-head { padding:.45rem 1.1rem .3rem; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted) }

/* Mega menu */
.mega-menu {
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); width:680px; padding:1.4rem 1.5rem;
  opacity:0; pointer-events:none;
  transition:opacity var(--t),transform var(--t); z-index:300;
}
.main-nav > ul > li:hover .mega-menu,
.main-nav > ul > li.open .mega-menu,
.main-nav > ul > li:focus-within .mega-menu { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0) }
.mega-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.2rem }
.mega-head { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); padding:0 .5rem; margin-bottom:.5rem }
.mega-menu a { display:flex; align-items:center; gap:.65rem; padding:.55rem .65rem; border-radius:8px; color:var(--heading); font-size:.86rem }
.mega-menu a:hover { background:var(--primary-4); color:var(--primary) }
.mega-menu a small { font-size:.73rem; color:var(--muted); margin-top:.1rem; font-weight:300 }
.mega-menu .svc-ico { width:20px; height:20px; color:var(--primary); flex-shrink:0 }
.mega-menu .mega-label { display:flex; flex-direction:column }
.svc-ico-card { width:34px; height:34px; color:var(--primary); background:var(--primary-4); border-radius:10px; padding:6px; box-sizing:content-box; margin-bottom:.75rem }

.nav-book { margin-left:.5rem }
.main-nav > ul > li.nav-search > a { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border-radius:50%; color:var(--heading) }
.main-nav > ul > li.nav-search > a:hover, .main-nav > ul > li.nav-search > a:focus-visible { background:var(--primary); color:#fff }
.main-nav > ul > li.nav-book > a { background:var(--primary); color:#fff; padding:.55rem 1.35rem; border-radius:999px; font-weight:600; border:2px solid var(--primary) }
.main-nav > ul > li.nav-book > a:hover { background:var(--primary-2); border-color:var(--primary-2); color:#fff }

/* Mobile toggle */
.nav-toggle { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; background:none; border:none; cursor:pointer; padding:.45rem; border-radius:6px; width:44px; height:44px; flex-shrink:0; margin-left:auto }
.nav-toggle span { width:24px }
.nav-toggle span { display:block; height:2px; background:var(--primary); border-radius:2px; transition:transform .25s,opacity .25s }
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.nav-toggle.open span:nth-child(2) { opacity:0 }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

/* Mobile drawer — the .mobile-nav element IS the sliding white panel (matches markup + site.js) */
.mobile-nav { position:fixed; top:0; right:0; bottom:0; z-index:1100; width:min(340px,92vw); background:#fff;
  overflow-y:auto; box-shadow:-4px 0 24px rgba(0,0,0,.2); transform:translateX(102%); visibility:hidden;
  transition:transform .28s ease, visibility 0s .28s }
.mobile-nav.open { transform:translateX(0); visibility:visible; transition:transform .28s ease }
@media (prefers-reduced-motion:reduce) { .mobile-nav { transition:none } }
.mobile-nav-head { display:flex; justify-content:space-between; align-items:center; padding:.9rem 1.1rem; border-bottom:1px solid var(--border); font-weight:600 }
.mobile-close { background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--muted); min-width:44px; min-height:44px; border-radius:6px; line-height:1; display:flex; align-items:center; justify-content:center }
.mobile-close:hover { background:var(--soft) }
.mobile-nav-list { list-style:none; margin:0; padding:.5rem 0 2rem }
.mobile-nav-list li { border-bottom:1px solid var(--border) }
.mobile-nav-list > li > a, .mobile-nav-list > li > button { display:flex; justify-content:space-between; align-items:center; padding:.85rem 1.1rem; color:var(--heading); font-weight:500; font-size:.92rem; background:none; border:none; cursor:pointer; width:100%; font-family:inherit; text-align:left; text-decoration:none }
.mobile-nav-list > li > a:hover, .mobile-nav-list > li > button:hover { background:var(--soft); color:var(--primary) }
.mobile-sub { display:none; background:var(--soft); list-style:none; padding:.25rem 0; margin:0 }
.mobile-sub.open { display:block }
.mobile-sub a { display:block; padding:.6rem 1.7rem; font-size:.86rem; color:var(--muted); text-decoration:none }
.mobile-sub a:hover { color:var(--primary) }
.mobile-nav-cta { padding:.9rem 1.1rem }
.mobile-nav-cta .btn { width:100%; justify-content:center }

@media (min-width:1024px) {
  /* live nav: ul text-align:right — items sit flush against the pipe + Login pill */
  .main-nav { display:flex; align-items:center; justify-content:flex-end; flex:1; min-width:0 }
  .main-nav > ul { flex-wrap:nowrap }
  .nav-toggle { display:none }
}
/* 1024–1279px: live compresses item spacing/type so the nav always fits between logo and Login */
@media (min-width:1024px) and (max-width:1279px) {
  .main-nav > ul { gap:0 }
  .main-nav > ul > li > a, .main-nav > ul > li > button { font-size:.85rem; padding:15px 7px }
  .main-nav > ul > li > a::after, .main-nav > ul > li > button::after { left:7px }
  .header-inner { gap:.5rem }
  .header-cta.btn-login { padding:.5rem 1.05rem; font-size:.9rem }
}
/* mobile header: logo + search + hamburger only (live hides Login and the pipe) */
@media (max-width:1023px) {
  .nav-sep, .header-cta.btn-login { display:none }
  .header-search { margin-left:auto }
  .header-search svg { width:24px; height:24px }
  .nav-toggle { margin-left:0 }
}

/* ─── Floating CTA ─── */
/* hidden until the visitor scrolls past the hero (site.js toggles .show) */
.float-cta { position:fixed; bottom:1.4rem; right:1.4rem; z-index:900; display:flex; flex-direction:column; gap:.45rem; align-items:flex-end; opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .3s, transform .3s }
body.home .float-cta { display:none } /* live homepage has no floating CTA */
.float-cta.show { opacity:1; pointer-events:auto; transform:none }
@media (prefers-reduced-motion:reduce) { .float-cta { transition:none } }
.float-book { background:var(--accent-text); color:#fff; padding:.7rem 1.2rem; border-radius:999px; font-weight:600; font-size:.875rem; box-shadow:0 4px 20px rgba(192,85,21,.4); display:flex; align-items:center; gap:.45rem; white-space:nowrap; transition:background var(--t),transform var(--t); text-decoration:none }
.float-book:hover { background:var(--accent-text-2); transform:translateY(-2px); color:#fff }
.float-wa { background:#128C45; color:#fff; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(18,140,69,.4); transition:background var(--t),transform var(--t); text-decoration:none }
.float-wa:hover { background:#0E7A3B; transform:translateY(-2px); color:#fff }
.float-wa svg { width:24px; height:24px; fill:#fff }
@media (max-width:600px) { .float-cta { bottom:.9rem; right:.9rem } }

/* ─── Popup / Dialog (matches .dialog-lightbox-widget-content) ─── */
/* visibility:hidden removes descendants from the tab order while keeping the fade-out */
.dialog-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:2000; display:flex; align-items:center; justify-content:center; padding:1rem; opacity:0; pointer-events:none; visibility:hidden; transition:opacity .25s, visibility 0s .25s }
.dialog-overlay.open { opacity:1; pointer-events:auto; visibility:visible; transition:opacity .25s }
.dialog-box { background:#fff; border-radius:20px; max-width:520px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.25); overflow:hidden; transform:scale(.95) translateY(12px); transition:transform .25s,opacity .25s; opacity:0 }
.dialog-banner { max-width:680px }
.dialog-banner > img { width:100%; height:auto; display:block }
.dialog-overlay.open .dialog-box { transform:scale(1) translateY(0); opacity:1 }

/* Search overlay (opens from the header/menu search links) */
.search-overlay { position:fixed; inset:0; z-index:2100; background:rgba(8,28,48,.55); backdrop-filter:blur(3px); padding:8vh 1rem 1rem; opacity:0; pointer-events:none; visibility:hidden; transition:opacity .2s, visibility 0s .2s }
.search-overlay.open { opacity:1; pointer-events:auto; visibility:visible; transition:opacity .2s }
.search-overlay-panel { background:#fff; border-radius:18px; max-width:640px; margin:0 auto; box-shadow:0 24px 60px rgba(0,0,0,.3); overflow:hidden; transform:translateY(-14px); transition:transform .2s }
.search-overlay.open .search-overlay-panel { transform:translateY(0) }
.search-overlay-head { display:flex; align-items:center; gap:.7rem; padding:.9rem 1.1rem; border-bottom:1px solid var(--border) }
.search-overlay-icon { color:var(--primary); flex-shrink:0 }
#ov-search { flex:1; border:0; outline:0; font-family:inherit; font-size:1.05rem; padding:.4rem 0; background:transparent; color:var(--heading) }
.search-overlay-close { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:0; background:transparent; color:var(--muted); border-radius:50%; cursor:pointer; flex-shrink:0 }
.search-overlay-close:hover, .search-overlay-close:focus-visible { background:var(--soft); color:var(--heading) }
.search-overlay-status { margin:0; padding:.7rem 1.2rem 0; font-size:.82rem; color:var(--muted) }
.search-overlay-results { max-height:min(56vh,460px); overflow-y:auto; padding:.8rem 1.2rem 1.2rem }
.search-overlay-results a { display:block; padding:.8rem .95rem; border:1px solid var(--border); border-radius:12px; margin-bottom:.55rem; text-decoration:none }
.search-overlay-results a:hover, .search-overlay-results a:focus-visible { border-color:var(--primary); background:var(--soft) }
.search-overlay-results .sr-sec { display:block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-text) }
.search-overlay-results .sr-title { display:block; font-weight:600; color:var(--primary); margin:.15rem 0 }
.search-overlay-results .sr-desc { display:block; font-size:.85rem; color:var(--muted) }
.dialog-header { background:var(--primary); color:#fff; padding:1.5rem 2rem; display:flex; justify-content:space-between; align-items:center }
.dialog-header h3 { color:#fff; margin:0; font-size:1.15rem }
.dialog-close { background:rgba(255,255,255,.15); border:none; color:#fff; width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:1.2rem; display:flex; align-items:center; justify-content:center; transition:background var(--t) }
.dialog-close:hover { background:rgba(255,255,255,.25) }
.dialog-body { padding:2rem }
.dialog-body p { color:var(--muted); font-size:.9rem; margin-bottom:1.25rem }
.dialog-actions { display:flex; flex-wrap:wrap; gap:.75rem; padding:0 2rem 2rem }
.dialog-actions .btn { flex:1; justify-content:center }

/* Book appointment popup */
.book-popup .dialog-branch { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.25rem }
.branch-option { display:flex; align-items:center; gap:1rem; padding:1rem 1.1rem; border:1.5px solid var(--border); border-radius:12px; cursor:pointer; text-decoration:none; color:var(--heading); transition:border-color var(--t),background var(--t) }
.branch-option:hover { border-color:var(--primary); background:var(--primary-4); color:var(--heading) }
.branch-option img { height:32px; width:auto; object-fit:contain; flex-shrink:0 }
.branch-option .branch-info { flex:1 }
.branch-option .branch-name { font-weight:600; font-size:.9rem; display:block }
.branch-option .branch-sub { font-size:.78rem; color:var(--muted); display:block; margin-top:.1rem }
.branch-option .branch-arrow { color:var(--muted); font-size:.75rem }

/* ─── Hero ─── */
.hero {
  position:relative; min-height:80vh; display:flex; align-items:center;
  background:var(--navy) url('/assets/img/2025/12/home-page-1-banner.webp') center/cover no-repeat;
  color:#fff; padding:5rem 0 6rem; overflow:hidden;
}
/* light overlay like live — the image stays bright; text legibility comes from the shadow */
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(8,28,48,.55) 0%,rgba(8,28,48,.28) 45%,transparent 70%); pointer-events:none }
.hero .container { position:relative; z-index:1 }
.hero-inner { max-width:620px }
.hero-eyebrow { display:inline-flex; align-items:center; gap:.45rem; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:.3rem .85rem .3rem .55rem; font-size:.78rem; font-weight:500; color:#fff; margin-bottom:1.25rem; backdrop-filter:blur(8px) }
.hero-eyebrow .dot { width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0 }
.hero h1 { color:#fff; font-size:clamp(2rem,5vw,3.2rem); line-height:1.12; font-weight:700; letter-spacing:-.02em; margin-bottom:.4em; text-shadow:0 2px 14px rgba(0,0,0,.45) }
.hero h1 .accent { color:var(--accent) }
.hero-why { color:var(--accent) }
.hero .hero-marathi { font-family:'Montserrat',Helvetica,Arial,sans-serif; font-size:clamp(1.5rem,4vw,2.3rem); line-height:1.3; margin-bottom:1rem; font-weight:600; max-width:none; text-shadow:0 2px 12px rgba(0,0,0,.45) }
.hero p { font-size:.95rem; max-width:520px; line-height:1.75; margin-bottom:2rem; text-shadow:0 1px 8px rgba(0,0,0,.5) }
.hero-actions { display:flex; flex-wrap:wrap; gap:.75rem }

/* Rotator */
.hero-rotator { position:relative; min-height:2.8em; display:block }
.hero-rotator .rot { display:block; position:absolute; left:0; right:0; top:0; opacity:0; animation:rotateHero 9s infinite }
.hero-rotator .rot-1 { animation-delay:0s }
.hero-rotator .rot-2 { animation-delay:3s }
.hero-rotator .rot-3 { animation-delay:6s; font-family:'Montserrat',sans-serif }
@keyframes rotateHero {
  0%,2%    { opacity:0; transform:translateY(10px) }
  4%,30%   { opacity:1; transform:translateY(0) }
  33%,100% { opacity:0; transform:translateY(-10px) }
}
@media (prefers-reduced-motion:reduce) {
  .hero-rotator { position:static; min-height:auto }
  .hero-rotator .rot { position:static; opacity:1; animation:none; display:block; margin-bottom:.25em }
}
@media (max-width:700px) {
  .hero { min-height:0; padding:3.2rem 0 3.6rem; background-position:center right 30% }
  .hero::before { background:linear-gradient(180deg,rgba(10,35,60,.72) 0%,rgba(10,35,60,.58) 100%) }
  /* live mobile hero is fully centre-aligned */
  .hero-inner { text-align:center; margin:0 auto }
  .hero h1 { font-size:2.1rem }
  .hero .hero-marathi { font-size:1.7rem }
  .hero p { margin-left:auto; margin-right:auto }
  .hero-actions { justify-content:center }
}

/* Quick-book widget */
.quick-book-strip {
  position:relative; z-index:2; margin-top:-3rem;
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:1.2rem 1.5rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center;
  border:1px solid var(--border);
}
.qb-label { font-weight:700; color:var(--heading); font-size:.9rem; white-space:nowrap }
.qb-fields { display:flex; flex:1; flex-wrap:wrap; gap:.65rem; align-items:center }
.qb-select { flex:1; min-width:150px; padding:.58rem 1rem; border-radius:8px; border:1.5px solid var(--border); color:var(--heading); font-size:.86rem; font-family:inherit; background:#fff; cursor:pointer; transition:border-color var(--t) }
.qb-select:focus { outline:3px solid var(--primary); outline-offset:1px; border-color:var(--primary) }
@media (max-width:700px) {
  .quick-book-strip { border-radius:12px; margin-top:-1.5rem }
  .qb-select { min-width:100% }
}

/* ─── Stats ─── */
/* live-parity: light-blue rounded cards on white, teal number + orange suffix, label below */
.stats-band { background:#fff; padding:2.6rem 0 }
.stats { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem }
@media (min-width:580px) { .stats { grid-template-columns:repeat(3,1fr) } }
@media (min-width:900px) { .stats { grid-template-columns:repeat(5,1fr) } }
.stat-pill { background:#f3f1ec; /* theme pale (no-blue rule) */ border-radius:16px; padding:1.5rem .9rem 1.4rem; text-align:center }
.stat-pill .num { display:block; font-size:clamp(1.9rem,3.2vw,2.4rem); font-weight:700; color:var(--primary); line-height:1.15; letter-spacing:-.01em }
.stat-pill .num .suffix { color:#C7541A } /* darker brand orange: >=3:1 on the card for large text */
.stat-pill .label { display:block; margin-top:.55rem; font-size:1rem; color:var(--charcoal); line-height:1.45 }

/* ─── Sections ─── */
.section { padding:clamp(4rem,8vw,6.5rem) 0 }
.section-sm { padding:2.5rem 0 }
.bg-soft    { background:var(--soft) }
.bg-cream   { background:var(--cream) }
.section-title { text-align:center; margin-bottom:2.5rem }
.section-title h2 { margin-bottom:.4rem }
.section-title p { color:var(--muted); max-width:680px; margin:0 auto }

/* ─── Grid / Cards ─── */
.grid { display:grid; gap:1.25rem; grid-template-columns:1fr }
@media (min-width:560px) { .grid-2,.grid-3,.grid-4 { grid-template-columns:repeat(2,1fr) } }
@media (min-width:820px) { .grid-3 { grid-template-columns:repeat(3,1fr) } }
@media (min-width:1000px) { .grid-4 { grid-template-columns:repeat(4,1fr) } }
@media (min-width:1100px) { .grid-6 { grid-template-columns:repeat(6,1fr) } }

.card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow-sm); transition:transform var(--t),box-shadow var(--t),border-color var(--t) }
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--accent) }
.card img { border-radius:10px; margin-bottom:1rem }
.card h3 { margin:.2rem 0 }

/* ─── Legacy ─── */
/* bg jpg is 1920x1199 with the team baked in — lock the section to its aspect ratio so it renders uncropped and text never reaches the team */
.legacy { position:relative; aspect-ratio:1920/1199; background:var(--maroon) url('/assets/img/2026/02/100-Years-Legacy-in-Vision-Innovation-bg.webp') center bottom/cover no-repeat; color:#fff; padding:clamp(3rem,7vw,7rem) 0 0; overflow:hidden; display:flex; align-items:flex-start }
.legacy::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(127,38,41,.72) 0%,rgba(127,38,41,.2) 50%,transparent 80%); pointer-events:none }
.legacy .container { position:relative; z-index:1 }
.legacy-row { display:grid; grid-template-columns:1fr; gap:2rem; align-items:start }
@media (min-width:820px) { .legacy-row { grid-template-columns:1.4fr 1fr; gap:3rem } }
.legacy h2 { color:#fff; font-size:clamp(1.8rem,4vw,2.7rem) }
.legacy h2 .accent { color:var(--accent) }
.legacy p { color:rgba(255,255,255,.92); max-width:520px }
.legacy-emblem { text-align:center }
.legacy-emblem img { max-width:clamp(210px,20vw,290px); margin:0 auto; filter:drop-shadow(0 4px 24px rgba(0,0,0,.3)) }
.legacy-team-m { display:none }
@media (max-width:819px) {
  .legacy-emblem { display:none }
  /* narrow screens: baked-in team from the bg would sit under the text — use plain maroon + arc and show the team image in flow instead */
  .legacy { background-image:radial-gradient(circle at 50% 115%, #a83434 0%, rgba(168,52,52,0) 62%); aspect-ratio:auto; padding:3.5rem 0 0 }
  .legacy::before { display:none }
  .legacy-team-m { display:block; width:100%; height:auto; margin-top:2.2rem }
}
@media (max-width:700px) { .legacy { min-height:auto; padding:3rem 0 2rem } }

/* Branch logos row */
.branch-logos { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2.5rem; padding:1.75rem 0 }
.branch-logo-link { display:flex; flex-direction:column; align-items:center; gap:.45rem; text-decoration:none; opacity:.85; transition:opacity var(--t),transform var(--t) }
.branch-logo-link:hover { opacity:1; transform:translateY(-2px) }
.branch-logo-link img { height:50px; width:auto; object-fit:contain }
.branch-logo-link span { font-size:.72rem; color:var(--muted); font-weight:500; text-align:center }

/* ─── Presence / Branch cards ─── */
/* Branch cards (Our Locations): white card, full-bleed photo, stretched-link on the h3
   so the whole card is clickable while phone/directions links stay independent (no nested <a>) */
.branch { position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:0 1px 3px rgba(15,40,60,.06); transition:box-shadow var(--t),transform var(--t) }
.branch:hover { box-shadow:0 12px 28px rgba(15,40,60,.14); transform:translateY(-3px) }
.branch > img { aspect-ratio:16/10; object-fit:cover; width:100% }
.branch-body { display:flex; flex-direction:column; flex:1; padding:1.05rem 1.15rem 1.2rem }
.branch-head { display:flex; align-items:center; gap:.7rem; min-height:40px }
.branch-head img { height:32px; width:auto; object-fit:contain; flex-shrink:0 }
.branch h3 { margin:0; font-size:1.1rem; line-height:1.25; letter-spacing:-.01em }
.branch h3 a { text-decoration:none; color:var(--heading); transition:color var(--t) }
.branch h3 a::after { content:""; position:absolute; inset:0 } /* stretched link */
.branch:hover h3 a { color:var(--primary) }
.branch-tag { margin:.15rem 0 0; font-size:.76rem; font-weight:500; color:var(--muted); text-transform:uppercase; letter-spacing:.04em }
.branch address { font-style:normal; color:var(--text); font-size:.9rem; line-height:1.6; margin:.7rem 0 .95rem; flex:1 }
.branch-links { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:auto }
.branch-links a { position:relative; z-index:1; display:inline-flex; align-items:center; gap:.45rem; font-size:.85rem; font-weight:600; color:var(--primary); text-decoration:none; border:1.5px solid rgba(0,112,120,.35); border-radius:999px; padding:.45rem 1rem; transition:background var(--t),color var(--t),border-color var(--t) }
.branch-links a:hover, .branch-links a:focus-visible { background:var(--primary); color:#fff; border-color:var(--primary) }
.branch-photo-new { aspect-ratio:16/10; background:linear-gradient(135deg,#e8f4f5,#d2e9eb); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem }
.branch-new-badge { background:var(--accent-text); color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.08em; padding:.25rem .8rem; border-radius:999px }

/* ─── Why Choose Us ─── */
.why-grid { display:grid; grid-template-columns:1fr; gap:1rem; max-width:1040px; margin:0 auto }
@media (min-width:620px) { .why-grid { grid-template-columns:repeat(2,1fr) } }
@media (min-width:940px) { .why-grid { grid-template-columns:repeat(3,1fr) } }
.why-card { background:var(--maroon); color:#fff; border-radius:var(--radius); padding:1.4rem 1.65rem; display:flex; align-items:center; gap:1.1rem; transition:transform var(--t),background var(--t); text-decoration:none }
.why-card:hover { transform:translateY(-3px); background:#952d31; text-decoration:none; color:#fff }
/* icon PNGs are white line-art on a maroon tile — show as-is, a flattening filter turns them into blank silhouettes */
.why-card img { width:52px; height:52px; flex-shrink:0; object-fit:contain; border-radius:10px }
.why-card h3 { color:#fff; margin:0; font-size:.97rem; line-height:1.3; font-weight:600 }
.why-card p { color:rgba(255,255,255,.7); margin:.2rem 0 0; font-size:.8rem }

/* ─── Specialty cards ─── */
.specialty-row { display:grid; grid-template-columns:1fr; gap:1.5rem }
@media (min-width:560px) { .specialty-row { grid-template-columns:repeat(2,1fr) } }
@media (min-width:820px) { .specialty-row { grid-template-columns:repeat(3,1fr) } }
.specialty-card { text-align:center; background:#fff; border:1px solid var(--border); border-radius:18px; padding:1.65rem 1.1rem 1.4rem; display:block; text-decoration:none; transition:transform var(--t),box-shadow var(--t),border-color var(--t) }
.specialty-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--accent); text-decoration:none }
/* Live-site service PNGs are self-contained badges (photo circle + caption baked in) — show whole, never crop */
.specialty-card .img-circle { width:185px; height:185px; margin:0 auto .9rem }
.specialty-card .img-circle img { width:100%; height:100%; object-fit:contain }
.specialty-card h3 { color:var(--primary); font-size:1.02rem; margin:0 0 .3rem; font-weight:600 }
.specialty-card p { color:var(--muted); font-size:.8rem; margin:0 }

/* ─── Doctor cards ─── */
.doctor-card { text-align:center }
.doctor-card .doc-photo { width:145px; height:145px; border-radius:50%; margin:0 auto .8rem; overflow:hidden; border:4px solid var(--primary-4); background:var(--soft) }
.doctor-card .doc-photo img { width:100%; height:100%; object-fit:cover }
.doctor-card h3 { font-size:.97rem; margin-bottom:.2rem }
.doctor-card .qual { font-size:.78rem; color:var(--muted); line-height:1.4; margin-bottom:.35rem }
.doctor-card .specialty-tag { font-size:.74rem; color:var(--primary); font-weight:600; background:var(--primary-4); display:inline-block; padding:.18rem .65rem; border-radius:999px }

/* Filter chips */
.filter-row { display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.75rem; justify-content:center }
.chip { padding:.6rem 1.1rem; min-height:44px; border-radius:999px; border:1.5px solid var(--border); background:#fff; color:var(--muted); font-size:.8rem; font-weight:500; cursor:pointer; transition:background var(--t),border-color var(--t),color var(--t); font-family:inherit }
.chip:hover,.chip.active { background:var(--primary); border-color:var(--primary); color:#fff }

/* ─── Testimonials ─── */
.testimonial-section { position:relative; background:var(--charcoal) url('/assets/img/2024/09/49-quote-1.webp') center/cover no-repeat; color:#fff; padding:4.5rem 0; overflow:hidden; min-height:320px }
.testimonial-section::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,.62); pointer-events:none }
.testimonial-section .container { position:relative; z-index:1 }
.testimonial-section .section-title h2 { color:#fff }
.testimonial-card { background:var(--accent); color:#fff; border-radius:var(--radius); padding:2rem 2.4rem; max-width:740px; margin:0 auto; box-shadow:0 10px 30px rgba(0,0,0,.25) }
.testimonial-card p { color:#fff; font-style:italic; font-size:1.02rem; margin:0 0 .85rem }
.testimonial-card cite { color:#fff; font-weight:600; font-style:normal; font-size:.88rem }
.testimonial { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem }
.testimonial p { font-style:italic; color:var(--text) }
.testimonial cite { display:block; margin-top:.7rem; font-style:normal; font-weight:600; color:var(--primary); font-size:.86rem }
.testimonial-grid { display:grid; gap:1.3rem; grid-template-columns:1fr }
@media (min-width:760px) { .testimonial-grid { grid-template-columns:repeat(3,1fr) } }
.testimonial-grid .testimonial { padding:1.7rem 1.5rem; box-shadow:0 10px 30px rgba(0,0,0,.25); border:0 }
.testimonial-grid .testimonial p { font-family:'Montserrat',Helvetica,Arial,sans-serif; font-style:normal; line-height:1.9; font-size:.92rem }
.testimonial-grid .testimonial cite { font-family:'Montserrat',Helvetica,Arial,sans-serif }

/* ─── Testimonials page (tm-*) — live parity (probed https://xcelentra.com/about/testimonials/):
   comment form 900px centred (textarea r16 h100, name/email 435px pills side by side, 12px consent
   line, centred gold "Add message"), "N People wrote to us:" 10px uppercase ls1px centred,
   3-col masonry wall (item 400px, 30px gaps), cards pad 40 r6 shadow rgba(0,0,0,.04) 0 1px 20px,
   centred 38px quote glyph (live #314450 → charcoal per no-blue rule), 28px w300 centred author,
   16px/21.28 left-aligned body text ─── */
.tm-respond { max-width:900px; margin:0 auto; padding-top:40px }
.tm-respond .form-row { margin-bottom:15px }
.tm-respond textarea { min-height:100px }
.tm-respond-2up { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 30px } /* live keeps the 2-up on mobile too */
.tm-respond-2up input { min-width:0 }
.tm-respond .tm-consent { display:flex; align-items:flex-start; gap:.45rem; font-size:.75rem; font-weight:400; color:var(--muted); margin:5px 0 20px }
.tm-consent input { margin-top:.1rem }
.tm-respond .tm-submit-row { text-align:center; margin:10px 0 20px }
.tm-count-head { text-align:center; font-size:.625rem; font-weight:400; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin:30px 0 }
.tm-wall { columns:1; column-gap:30px }
@media (min-width:720px)  { .tm-wall { columns:2 } }
@media (min-width:1024px) { .tm-wall { columns:3 } }
.tm-card { break-inside:avoid; margin:0 0 30px; background:#fff; border-radius:6px; padding:40px; box-shadow:0 1px 20px rgba(0,0,0,.04); text-align:center }
.tm-card .tm-quote { font-size:38px; color:var(--charcoal); margin-bottom:16px }
.tm-card h3 { font-size:1.75rem; font-weight:300; line-height:1.36; margin:16px 0 13px; color:var(--heading) }
.tm-card div { text-align:left }
.tm-card p { margin:0 0 16px; font-size:1rem; line-height:1.33; color:var(--text); font-style:normal }
.tm-card p:last-child { margin-bottom:0 }

/* Media coverage: year filter tabs + masonry gallery of newspaper clippings */
.media-years { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:2rem }
.media-year-tab { border:1.5px solid var(--border); background:#fff; color:var(--heading); font-family:inherit; font-weight:700; font-size:.95rem; padding:.5rem 1.4rem; border-radius:999px; cursor:pointer; transition:background var(--t),color var(--t),border-color var(--t) }
.media-year-tab:hover { border-color:var(--primary); color:var(--primary) }
.media-year-tab.active { background:var(--primary); border-color:var(--primary); color:#fff }
.media-month { margin:1.8rem 0 1rem; font-size:1.05rem; color:var(--charcoal); border-bottom:1px solid var(--border); padding-bottom:.4rem }
.media-clip-grid { columns:2; column-gap:1rem }
@media (min-width:640px)  { .media-clip-grid { columns:3 } }
@media (min-width:1000px) { .media-clip-grid { columns:4 } }
.media-clip { break-inside:avoid; margin:0 0 1.1rem; text-align:center }
.media-clip a { display:block; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:#fff; transition:box-shadow var(--t),transform var(--t) }
.media-clip a:hover, .media-clip a:focus-visible { box-shadow:0 8px 22px rgba(15,40,60,.15); transform:translateY(-2px) }
.media-clip img { width:100%; height:auto; display:block }
.media-clip figcaption { font-size:.78rem; color:var(--muted); margin-top:.4rem; line-height:1.4 }
.media-clip figcaption span { color:var(--primary) }
.media-clip-text { text-align:left }
.media-clip-text figcaption { font-size:.9rem; color:var(--text) }

/* Eye bank: emergency block (time-of-death path) + pledge form card */
.eb-urgent { background:#FDF3EC; border:1px solid #F3D9C4; border-left:5px solid var(--accent-text); border-radius:16px; padding:1.7rem 1.8rem }
.eb-urgent h2 { margin-top:0; margin-bottom:.35rem }
.eb-urgent-sub { font-size:.98rem; margin-bottom:1.1rem }
.eb-urgent-actions { display:flex; flex-wrap:wrap; gap:.7rem }
.eb-urgent-actions .btn { display:inline-flex; align-items:center }
.eb-steps { margin:.2rem 0 1rem; padding-left:1.3rem }
.eb-steps li { margin-bottom:.35rem; line-height:1.6 }
.eb-pledge { background:var(--soft); border:1px solid var(--border); border-radius:16px; padding:1.7rem 1.8rem }
.eb-pledge h2 { margin-top:0 }

/* ─── Insurance / partner logo strip ─── */
.logo-strip { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem }
@media (min-width:580px) { .logo-strip { grid-template-columns:repeat(4,1fr) } }
@media (min-width:900px) { .logo-strip { grid-template-columns:repeat(6,1fr) } }
.logo-cell { background:#fff; border:1px solid var(--border); border-radius:10px; height:86px; padding:.7rem 1rem; display:flex; align-items:center; justify-content:center; transition:box-shadow var(--t),transform var(--t) }
.logo-cell:hover { box-shadow:var(--shadow-sm); transform:translateY(-2px) }
.logo-cell img { max-width:100%; max-height:100%; object-fit:contain }

/* ─── FAQ ─── */
/* live .fl-accordion: transparent rows split by 1px #c9c9c9 rules, button padding 20px,
   label 20.8px w400 (live navy rgb(6,22,58) → our charcoal per no-blue rule), plus icon 20.8px
   right-aligned #2c2c2c (probed on /knowledge-hub-faqs/ and /services/personal-taxation/) */
.faq { border:0; border-bottom:1px solid #c9c9c9; border-radius:0; background:transparent; margin:0 }
.faq:first-of-type { border-top:1px solid #c9c9c9 }
.faq summary { cursor:pointer; padding:20px; font-size:1.3rem; font-weight:400; line-height:1.2; color:var(--heading); list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center }
.faq summary::-webkit-details-marker { display:none }
.faq summary::after { content:"+"; font-size:1.75rem; line-height:.8; color:#2c2c2c; flex-shrink:0; font-weight:200 }
.faq[open] summary::after { content:"−" }
.faq summary:hover { color:var(--accent-text) }
.faq-body { padding:0 20px 20px; color:var(--text); line-height:1.6 }
/* pale FAQ band around service-page accordions (live fl-node-xmvock9ezn6j: bg rgb(243,241,236),
   wrap padding 60px 0 20px, 80px gap above; head = 160px w600 "?" glyph in a 269px column beside a
   left-aligned 44px "FAQs" + 16px intro — all probed on /services/personal-taxation/) */
.faq-panel { background:#f3f1ec; padding:60px 10px 20px; margin-top:80px }
.faq-head { display:grid; grid-template-columns:269px 1fr; align-items:start; margin:0 0 58px }
.faq-qmark { font-size:160px; font-weight:600; line-height:.8; color:#000; text-align:center; padding-top:10px }
.faq-head-text h2 { text-align:left; margin:0 }
.faq-panel .faq-intro { text-align:left; margin:10px 0 0 }
/* live mobile (probed PT 390px): band pad 20/10, ? stays 160px left-aligned,
   summary rows keep 20.8px text and 20px padding */
@media (max-width:700px) {
  .faq-panel { padding:20px 20px 10px; margin-top:48px }
  .faq-head { grid-template-columns:1fr; gap:12px; margin-bottom:28px }
  .faq-qmark { text-align:left; padding-top:0 }
}

/* ─── News ─── */
.news-row { display:grid; grid-template-columns:1fr; gap:1.5rem }
@media (min-width:620px) { .news-row { grid-template-columns:repeat(2,1fr) } }
@media (min-width:940px) { .news-row { grid-template-columns:repeat(3,1fr) } }
.news-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform var(--t),box-shadow var(--t) }
.news-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); text-decoration:none }
.news-card .news-img { aspect-ratio:16/10; overflow:hidden }
.news-card .news-img img { width:100%; height:100%; object-fit:cover; transition:transform .35s }
.news-card:hover .news-img img { transform:scale(1.04) }
.news-card .news-body { padding:1.2rem 1.35rem 1.4rem; flex:1; display:flex; flex-direction:column }
.news-card .news-cat { font-size:.7rem; font-weight:700; text-transform:uppercase; color:var(--primary); letter-spacing:.05em; margin-bottom:.35rem }
.news-card h3 { color:var(--heading); font-size:.97rem; margin-bottom:.35rem; flex:1 }
.news-card p { color:var(--muted); font-size:.84rem; margin-bottom:.65rem }

/* ─── Breadcrumbs ─── */
.breadcrumbs { font-size:.8rem; color:var(--muted); padding:.85rem 0 }
.breadcrumbs a { color:var(--primary); text-decoration:underline }
.breadcrumbs a:hover { color:var(--accent-text) }
.breadcrumbs span+span::before { content:"›"; margin:0 .45rem; color:#bbb }

/* ─── Page header ─── */
.page-header { background:linear-gradient(135deg,#2b2a28 0%,#111 100%); color:#fff; padding:2.6rem 0; text-align:center }
.page-header h1 { color:#fff; margin-bottom:.4rem }
.page-header p { opacity:.9; margin:0 auto; max-width:640px }

/* ─── Quick links ─── */
.quick-row { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:-2.5rem; position:relative; z-index:10 }
@media (min-width:580px) { .quick-row { grid-template-columns:repeat(4,1fr) } }
.quick { background:#fff; border-radius:var(--radius); padding:1.2rem .9rem; text-align:center; box-shadow:var(--shadow-md); color:var(--primary); font-weight:600; font-size:.83rem; border:1px solid var(--border); text-decoration:none; transition:color var(--t),border-color var(--t),transform var(--t) }
.quick:hover { color:var(--accent); border-color:var(--accent); transform:translateY(-2px); text-decoration:none }
.quick img { width:42px; height:42px; margin:0 auto .55rem; object-fit:contain }

/* ─── Article body ─── */
/* live service/article column: 876px wide, p/li 16px lh 21.28px mb 16px, h2 44px w500 no rules,
   h4 22px w400 (probed /services/personal-taxation/) */
.article-body { max-width:876px; margin:0 auto }
.article-body h2 { margin-top:2.6rem; color:var(--heading); text-align:left }
.article-body h2:first-child { margin-top:0 }
.article-body h3 { margin-top:1.4rem; color:var(--heading) }
.article-body h4 { font-size:1.375rem; font-weight:400; color:var(--heading); margin:2rem 0 .7rem }
/* service pages only: live panel subheads (Bookkeeping, PAYE…) render gold; live gaps: last
   text → next h4 ≈ 28px, h4 → its copy 10px (probed module rects on /services/personal-taxation/) */
.svc-body h4 { color:var(--accent-text); margin:28px 0 10px }
/* live .fl-rich-text ul: margin 0 24px 8px, padding 0, li margin 0 */
.svc-body ul { margin:0 0 8px 24px; padding:0 }
.svc-body li { margin:0 }
/* live nests sub-lists in an unmarked li (list-style-type:none inline on live) — circle markers */
.svc-body li > ul { list-style:circle; margin:8px 0 8px 24px }
.svc-body li:has(> ul:first-child) { list-style:none }
/* live: ~64px between the intro bullet list and the following paragraph (separate fl modules) */
.svc-body > ul + p { margin-top:66px }
.article-body p, .article-body li { line-height:1.33 }
.article-body p { margin:0 0 16px }
.article-body img { margin:1.5rem 0; border-radius:10px; box-shadow:var(--shadow-sm) }
.article-body a:not(.btn) { color:var(--primary); text-decoration:underline }
/* icon-card grids (site.js wraps runs of h4 + short p following the live 3-up card rows;
   live row (fl-row vamtam-add-shadow): white, shadow 0 5px 30px rgba(0,0,0,.05), wrap padding
   30px 0, cols 299px w/ 10px inner gutters, 80px icon images, titles 22px w400 black, desc 16px;
   6-card runs stack two per column on live → 41px row gap between the two visual rows) */
.svc-cards { display:grid; grid-template-columns:1fr; gap:40px 0; background:#fff; box-shadow:0 5px 30px rgba(0,0,0,.05); padding:30px 10px; margin:29px -10px 0 }
@media (min-width:640px) { .svc-cards { grid-template-columns:repeat(3,1fr); gap:56px 0; padding:30px 0 55px } }
/* live /services/accountancy/: intro paragraph → card grid gap is 91px (separate fl-rows on live) */
.svc-page-accountancy .svc-cards { margin-top:91px }
/* live mobile stacks the 6 cards in the original column-major DOM order (e.g. accountancy:
   Bookkeeping, Corporate Tax, Payroll, Outsourcing, VAT, Personal Tax) — invert the
   desktop row-major reorder site.js applies */
@media (max-width:639px) {
  .svc-cards .svc-card:nth-child(1) { order:1 }
  .svc-cards .svc-card:nth-child(2) { order:3 }
  .svc-cards .svc-card:nth-child(3) { order:5 }
  .svc-cards .svc-card:nth-child(4) { order:2 }
  .svc-cards .svc-card:nth-child(5) { order:4 }
  .svc-cards .svc-card:nth-child(6) { order:6 }
}
.svc-card { padding:0 10px }
.svc-card i { font-size:2.75rem; color:var(--accent); line-height:1 }
.svc-card img { margin:0; border-radius:0; box-shadow:none; display:block }
.svc-card img.svc-ico { width:80px; height:80px }
.svc-card img.svc-photo { width:222px; max-width:100%; height:auto }
.svc-card h4 { color:#000; font-size:1.375rem; font-weight:400; margin:20px 0 15px }
.svc-card p { margin:0; font-size:1rem; line-height:1.33; color:var(--text) }
.svc-card h4 a:not(.btn) { color:inherit; text-decoration:none }
.svc-card h4 a:not(.btn):hover { color:var(--accent-text); text-decoration:underline }
/* live section headings that wrap a link (e.g. "Why Xcelentra" → Google reviews) render plain */
.svc-body h2 a:not(.btn), .svc-body h3 a:not(.btn) { color:inherit; text-decoration:none }
.svc-body h2 a:not(.btn):hover, .svc-body h3 a:not(.btn):hover { color:var(--accent-text); text-decoration:underline }
/* pale panel behind the h4 service sections (live: very pale blue rgb(245,249,253) full-column
   band, text inset 30px, ~50px vertical padding → theme beige per the no-blue rule) */
.svc-mid { background:#f3f1ec; margin:60px -10px 0; padding:45px 30px 50px; position:relative }
.svc-mid > :first-child { margin-top:0 }
/* live: 1px #f0efef rule 63px below the pale band (fl-row bottom edge) — only when another
   section row follows (personal-taxation); accountancy flows straight into "Why Xcelentra" */
.svc-mid::after { content:""; position:absolute; left:0; right:0; bottom:-63px; height:1px; background:#f0efef }
.svc-mid:not(:last-child)::after { content:none }
/* live accountancy: 110px between the pale band and the following h2 */
.svc-mid + h2 { margin-top:110px }
/* live "How we can help" (fl-node-vxkrhmn7sdq0): photo 538px col (img 478px, radius 6px) beside
   a 358px text col (44px heading, copy 268px wide), bullets full width below, then gold CTA */
.hh { display:grid; grid-template-columns:538px 1fr; margin:140px 0 0 }
.hh-media { padding:53px 50px 0 10px }
.hh-media img { width:100%; height:auto; border-radius:6px; display:block }
.hh-text { padding:70px 70px 0 20px }
.hh-text h2 { margin:0 0 40px; text-align:left }
.hh-text p { font-size:1rem; line-height:1.33; margin:0 0 16px }
.hh-bullets { margin-top:70px }
.svc-body p.hh-cta { margin:45px 0 0 }
.svc-after { margin-top:111px }
.svc-after > h2:first-child { margin-top:0 }
@media (max-width:900px) {
  .svc-mid { margin:40px -10px 0; padding:30px 20px }
  .svc-mid::after { display:none }
  .hh { grid-template-columns:1fr; margin:48px 0 0; gap:20px }
  .hh-media, .hh-text { padding:0 }
  .hh-text h2 { margin:0 0 16px }
  .hh-bullets { margin-top:24px }
  .svc-after { margin-top:48px }
}

/* ─── Doctor profile ─── */
.doc-profile { display:grid; gap:2.5rem; align-items:start }
@media (min-width:720px) { .doc-profile { grid-template-columns:260px 1fr } }
.doc-sidebar { text-align:center }
.doc-avatar { width:210px; height:210px; border-radius:50%; overflow:hidden; border:5px solid var(--primary-4); margin:0 auto 1.2rem; background:var(--soft) }
.doc-avatar img { width:100%; height:100%; object-fit:cover }
.doc-badge { display:inline-block; background:var(--primary); color:#fff; padding:.28rem .95rem; border-radius:999px; font-size:.78rem; font-weight:600; margin-bottom:.9rem }

/* ─── Blog ─── */
.blog-grid { display:grid; gap:1.5rem; grid-template-columns:1fr }
@media (min-width:560px) { .blog-grid { grid-template-columns:repeat(2,1fr) } }
@media (min-width:900px) { .blog-grid { grid-template-columns:repeat(3,1fr) } }
.blog-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform var(--t),box-shadow var(--t) }
.blog-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); text-decoration:none }
.blog-card .blog-img { aspect-ratio:16/9; overflow:hidden; background:var(--soft) }
.blog-card .blog-img img { width:100%; height:100%; object-fit:cover; transition:transform .35s }
.blog-card:hover .blog-img img { transform:scale(1.05) }
.blog-card .blog-body { padding:1.2rem 1.35rem 1.4rem; flex:1; display:flex; flex-direction:column }
.blog-card .blog-cat { font-size:.7rem; font-weight:700; text-transform:uppercase; color:var(--primary); letter-spacing:.05em; margin-bottom:.3rem }
.blog-card h3 { color:var(--heading); font-size:.95rem; margin-bottom:.35rem; flex:1 }
.blog-card p { color:var(--muted); font-size:.83rem; margin-bottom:.55rem }
.blog-card .blog-meta { font-size:.73rem; color:var(--muted) }

/* ─── Tables ─── */
table { width:100%; border-collapse:collapse; margin:1rem 0; font-size:.88rem }
th,td { padding:.62rem .82rem; text-align:left; border-bottom:1px solid var(--border) }
th { background:var(--primary-4); color:var(--primary); font-weight:600 }
tr:last-child td { border-bottom:0 }
@media (max-width:580px) { table { display:block; overflow-x:auto } }

/* ─── Footer ─── */
.site-footer { background:#282525; color:#c9c9c9; padding:3.2rem 0 1.2rem; font-size:1rem }
.site-footer a { color:rgba(255,255,255,.92) }
.site-footer a:hover { color:#fff; text-decoration:none }
.footer-grid { display:grid; gap:2.2rem; grid-template-columns:1fr }
@media (min-width:620px) { .footer-grid { grid-template-columns:repeat(2,1fr) } }
@media (min-width:960px) { .footer-grid { grid-template-columns:1.15fr 1fr 1.1fr 1.1fr; gap:2.5rem } }
.footer-col .footer-heading { color:#fff; font-size:.92rem; margin-bottom:.9rem; font-weight:600 }
.footer-col p { line-height:1.65 }
.footer-col ul { list-style:none; padding:0; margin:0 }
.footer-col li { margin-bottom:.45rem }
.footer-col address { font-style:normal; line-height:1.7 }
/* Footer quick links (live-site layout) */
.footer-quicklinks { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.6rem; padding-bottom:1.6rem; margin-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.15); font-size:.85rem }
.footer-quicklinks .ql-head { font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#fff; font-size:.8rem }
.footer-quicklinks a { color:rgba(255,255,255,.92) }
.footer-quicklinks a:hover { color:#fff }
.footer-branch-logo { display:inline-block; margin-bottom:.9rem; background:#fff; border-radius:10px; padding:.5rem .8rem }
.footer-branch-logo img { height:52px; width:auto; object-fit:contain }
.footer-social-col { display:flex; flex-direction:column; align-items:flex-start; gap:1.2rem }
.footer-badge { height:90px; width:auto; object-fit:contain; background:#fff; border-radius:10px; padding:.4rem }
.social { display:flex; gap:.55rem; margin-top:.9rem }
.social a { width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:#fff; transition:background var(--t) }
.social a:hover { background:var(--accent-text); color:#fff; text-decoration:none }
.social svg { width:20px; height:20px; fill:#fff }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:2.5rem; padding-top:1rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-size:.78rem; color:rgba(255,255,255,.85) }
.footer-bottom a { color:rgba(255,255,255,.9); text-decoration:underline }
.footer-bottom a:hover { color:#fff }

/* ─── Scroll reveal ─── */
/* fade uses filter:opacity() (visually identical to opacity) — axe-core blends the `opacity`
   property into the text colour when it scrolls elements into view mid-transition, which made
   every below-fold .reveal a false color-contrast failure */
.reveal { filter:opacity(0); transform:translateY(42px) scale(.985); transition:filter .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1) }
.reveal.visible { filter:opacity(1); transform:translateY(0) scale(1) }
@media (prefers-reduced-motion:reduce) { .reveal { filter:none; transform:none; transition:none } }

/* ─── Mobile density (live-site parity: compact sections, 2-up cards) ─── */
@media (max-width:640px) {
  .section { padding:3rem 0 }
  .section-title { margin-bottom:1.5rem }
  .hero { min-height:0; padding:2.6rem 0 3rem }
  .hero-eyebrow { font-size:.68rem; padding:.26rem .7rem .26rem .5rem; margin-bottom:1rem }
  .hero p { font-size:.95rem; margin-bottom:1.5rem }
  .hero-actions { gap:.6rem }
  .hero-actions .btn-lg { padding:.85rem 1.7rem; font-size:.95rem }
  .stats { gap:.6rem }
  .stat-pill { padding:1rem .6rem }
  .stat-pill .label { font-size:.85rem }
  /* branch cards: drop the inline logo (name space wins; logos live in the footer) */
  .branch-head img { display:none }
  .branch-head { min-height:0 }
  .branch h3 { font-size:1rem }
  .branch-tag { font-size:.66rem }
  .branch-body { padding:.85rem .85rem 1rem }
  .branch address { font-size:.83rem; margin:.55rem 0 .8rem }
  .branch-links a { font-size:.78rem; padding:.4rem .75rem }
  .grid { gap:.9rem }
  .grid-4 { grid-template-columns:repeat(2,1fr) }
  .card { padding:1.05rem .95rem }
  .doctor-card .doc-photo { width:96px; height:96px }
  .doctor-card h3 { font-size:.88rem }
  .doctor-card .qual { font-size:.72rem }
  .specialty-card .img-circle { width:150px; height:150px }
  .why-card { padding:1rem 1.05rem }
  .why-grid { gap:.7rem }
  .legacy-team-m { margin-top:1.4rem }
  .blog-grid { gap:1rem }
  .testimonial-grid { gap:1rem }
  .logo-strip { gap:.7rem }
  .logo-cell { height:72px }
  .site-footer { padding:1.8rem 0 .9rem; font-size:.82rem }
  .footer-quicklinks { gap:.4rem 1.1rem; padding-bottom:1.1rem; margin-bottom:1.5rem }
  .footer-grid { gap:1.6rem }
  .footer-badge { height:70px }
  .footer-branch-logo img { height:44px }
}

/* ─── Print ─── */
@media print {
  .social-strip,.brand-row,.site-header,.site-footer,.nav-toggle,.hero-actions,.float-cta,.mobile-nav,.quick-book-strip,.dialog-overlay,.search-overlay { display:none }
  body { color:#000; background:#fff }
  a { color:#000; text-decoration:underline }
}

/* ─── Live doctor availability (PWA slot-picker styling) ─── */
.doc-availability {
  margin-top: 1.2rem; padding: 1rem; border-radius: 16px;
  background: linear-gradient(180deg, var(--primary-4) 0%, #fff 70%);
  border: 1px solid #d7e7e8;
}
.doc-availability > h2 {
  font-size: .95rem !important; margin: 0 0 .75rem !important;
  color: var(--heading); display: flex; align-items: center; gap: .45rem;
}
.doc-availability-list { display: flex; flex-direction: column; gap: .7rem; }
.avail-group { display: flex; flex-direction: column; gap: .4rem; }
.avail-group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
}
.avail-group-head .avail-date { font-weight: 700; font-size: .82rem; color: var(--heading); }
.avail-group-head .avail-centre { font-size: .72rem; color: var(--muted); text-align: right; }
.avail-times { display: flex; flex-wrap: wrap; gap: .4rem; }
.avail-chip {
  font-weight: 700; font-size: .8rem; line-height: 1; color: var(--primary);
  border: 2px solid #cfe2e3; border-radius: 10px; padding: .45rem .6rem;
  background: #fff; text-decoration: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.avail-chip:hover, .avail-chip:focus-visible {
  border-color: var(--primary); background: var(--primary-4);
  box-shadow: 0 3px 10px rgba(0,112,120,.14);
}
.avail-chip.is-priority { color: var(--amber); border-color: #f4d58a; }
.avail-chip.is-priority:hover { border-color: var(--amber); background: #fff8ec; }
.avail-note {
  display: flex; align-items: center; gap: .35rem;
  font-size: .72rem; color: var(--muted); margin: .3rem 0 0;
}
.avail-note a { color: var(--primary); }
.avail-live {
  width: 7px; height: 7px; border-radius: 50%; background: #16a34a; flex: none;
  box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: availPulse 1.8s infinite;
}
@keyframes availPulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.45); }
  70%  { box-shadow: 0 0 0 6px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}


/* ─── Xcelentra additions ─── */
.display-serif { font-family:'Rufina',Georgia,serif; font-weight:700 }
.top-contact { display:flex; gap:1.25rem; flex-wrap:wrap; font-size:.85rem }
.top-contact a { color:var(--navy); font-weight:500 }
.header-search { background:none; border:0; cursor:pointer; padding:.5rem; display:flex; align-items:center }
/* live desktop header has no search icon (search lives in the mobile header only) */
@media (min-width:1024px) { .header-search { display:none } }
.header-search svg { fill:var(--navy) }
.header-search:hover svg { fill:var(--accent-text) }
.article-meta { color:var(--muted); font-size:.85rem }
.faq-toc ul { display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0 }
.faq-toc a { display:inline-block; padding:.4rem .9rem; border:1px solid var(--border); border-radius:999px; font-size:.85rem }
.faq-toc a:hover { border-color:var(--accent-text); color:var(--accent-text) }
.enquiry-form .form-row { margin-bottom:1rem; display:flex; flex-direction:column; gap:.3rem }
.enquiry-form label { font-weight:600; font-size:.9rem; color:var(--heading) }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea {
  font:inherit; padding:.6rem .8rem; border:1px solid var(--border); border-radius:var(--radius); background:#fff; color:var(--text);
}
.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus { border-color:var(--primary) }
.cta-band { margin:2.5rem 0; padding:1.5rem; background:var(--primary-4); border-radius:var(--radius); display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.cta-band p { margin:0; font-weight:600; color:var(--heading) }
.permit-list { columns:2; column-gap:2rem }
@media (max-width:560px) { .permit-list { columns:1 } }
.pagination { display:flex; align-items:center; gap:1rem; justify-content:center; margin-top:2rem }
.search-overlay { position:fixed; inset:0; z-index:2000; background:rgba(6,22,58,.55); backdrop-filter:blur(4px); opacity:0; transition:opacity .2s ease; display:flex; align-items:flex-start; justify-content:center; padding:8vh 1rem 1rem }
.search-overlay.open { opacity:1 }
.search-panel { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg); width:min(680px,100%); max-height:80vh; overflow:auto; padding:1.25rem }
.search-head { display:flex; gap:.75rem }
.search-head input { flex:1; font:inherit; padding:.6rem .8rem; border:1px solid var(--border); border-radius:var(--radius) }
.search-results a { display:block; padding:.7rem .5rem; border-bottom:1px solid var(--soft) }
.search-results .sr-sec { display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted) }
.search-results .sr-title { display:block; font-weight:600; color:var(--heading) }
.search-results .sr-desc { display:block; font-size:.85rem; color:var(--text) }

/* ─── Homepage additions ─── */
.hero { min-height:72vh; display:flex; align-items:center; color:#fff; padding:4rem 0 }
.hero h1 { color:#fff; font-size:clamp(2.2rem,6vw,4.2rem); font-weight:600 }
.hero-kicker { font-family:'Rufina',Georgia,serif; font-size:1.15rem; color:var(--accent); margin-bottom:.5rem }
.hero-sub { max-width:640px; font-size:1.1rem; color:#f0f0f0 }
.hero-ctas { display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.5rem }
.stats-row { text-align:center }
.stat-pill .count { font-size:clamp(2.4rem,6vw,4rem); font-weight:600; color:var(--heading); font-family:'Montserrat',sans-serif }
.stat-unit { font-size:1.4rem; font-weight:600; color:var(--accent-text); margin-left:.15rem }
.stat-pill p { margin-top:.25rem; color:var(--muted) }
.country-links { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.6rem }
.country-links a { display:inline-block; padding:.5rem 1.1rem; border:1px solid var(--border); border-radius:999px; color:var(--heading); font-weight:500 }
.country-links a:hover { border-color:var(--accent); background:var(--cream); color:var(--heading) }
.card-link { color:var(--accent-text); font-weight:600; font-size:.9rem }
blockquote.testimonial { margin:0; font-style:normal }
blockquote.testimonial footer { margin-top:.75rem; color:var(--muted); font-size:.9rem }

/* ─── Live-parity header extras ─── */
/* live Login pill: 40px tall, radius 25px, 16px text (we keep dark text on gold for WCAG) */
.header-cta.btn-login { padding:.55rem 1.3rem; font-size:1rem; font-weight:500; border-radius:25px }
.nav-sep { color:var(--accent); margin:0 .2rem }

/* footer social icons — live: bare gold glyphs, no circles */
.footer-social { display:flex; gap:1.1rem; margin-top:1.4rem }
.footer-social a { display:inline-flex; align-items:center; justify-content:center; padding:4px }
.footer-social svg { width:20px; height:20px; fill:var(--accent) }
.footer-social a:hover svg { fill:#fff }
/* live footer: gold 22px w400 headings AND links, grey body text, charcoal bg */
.site-footer h2 { color:var(--accent); font-size:clamp(1.15rem,1.55vw,1.375rem); font-weight:400; margin:0 0 1.1rem }
.site-footer nav ul { list-style:none; margin:0; padding:0 }
.site-footer nav li { margin-bottom:1rem }
.site-footer nav a { color:var(--accent); font-size:clamp(1.15rem,1.55vw,1.375rem); font-weight:400 }
.site-footer nav a:hover { color:#fff }
.site-footer a { color:#c9c9c9 } .site-footer a:hover { color:var(--accent) }
.site-footer address { font-style:normal; margin:0 0 .8rem; line-height:1.6; font-size:1rem; color:#c9c9c9 }
.site-footer address strong { color:#fff }
.site-footer p { margin:0 0 .9rem; font-size:1rem; line-height:1.55 }
.footer-logo { width:220px; height:auto; margin-bottom:1.4rem }
.footer-hours { margin-top:1.3rem }
.footer-legal { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; border-top:1px solid rgba(255,255,255,.12); margin-top:1.6rem; padding-top:.9rem; font-size:.8rem }
.footer-legal p { font-size:.8rem }
.footer-legal ul { list-style:none; display:flex; gap:1rem; margin:0; padding:0 }
/* wide immigration dropdown: two 220px columns, right-aligned so it never runs past the viewport
   (the trigger sits near the right edge of the centred nav) */
.dropdown-cols { columns:2; column-gap:0; min-width:440px; left:auto; right:0 }
.dropdown-cols li { break-inside:avoid }

/* hero slideshow (live site runs a multi-slide RevSlider) */
.hero-slider { position:relative; min-height:min(700px,88vh); overflow:hidden; display:flex; align-items:center; background:#111 }
.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity .8s ease; background-size:cover; background-position:center }
.hero-slide.active { opacity:1 }
.hero-slide::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.4) }
.hero-slider .container { position:relative; z-index:2; color:#fff; width:100% }
/* live headline: 80px/90px w700 multi-line uppercase block, left-aligned */
.hero-slider h1 { color:#fff; font-size:clamp(2.5rem,5.55vw,5rem); line-height:1.125; font-weight:700; text-transform:uppercase; letter-spacing:.01em; max-width:720px }
.hero-slide-sub { max-width:620px; font-size:1.05rem; color:#eee }
/* round prev/next arrows bottom-center, like the live RevSlider */
.hero-arrows { position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:.9rem }
.hero-arrow { width:44px; height:44px; border-radius:50%; border:0; background:rgba(0,0,0,.5); color:#fff; font-size:1.6rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0 0 4px; transition:background var(--t) }
.hero-arrow:hover, .hero-arrow:focus-visible { background:var(--accent); color:#1a1a1a }
@media (prefers-reduced-motion:reduce) { .hero-slide { transition:none } }
/* audience feature cards — live probed: icon 40px gold at col edge, title 20px w400 #2c2c2c
   at +45px, desc 14px/18.62 full-width starting 45px below icon top */
.feature-card { border:0; box-shadow:none; background:transparent; padding:0; display:grid; grid-template-columns:50px 1fr; column-gap:10px; align-items:center }
.feature-ico { color:var(--accent); font-size:2.5rem; line-height:1; grid-row:1 }
.feature-card h3 { grid-column:2; font-size:1.25rem; font-weight:400; color:var(--text); margin:0; line-height:1.33 }
.feature-card p { grid-column:1 / -1; margin:.5rem 0 .9rem; font-size:.875rem; line-height:1.33 } /* live: p mb 14px, blocks 117px apart */

/* photo page banner (live internal pages: image + centred 70px title; probed live banner block =
   530px tall at 1440 on /services/personal-taxation/, /contact/; h1 = 70px w600 lh 79.8px white centred) */
.page-header.has-photo { position:relative; background-size:cover; background-position:50% 0%; min-height:530px; display:flex; align-items:center; justify-content:center }
/* live .meta-header overlay: black, opacity .34–.44 depending on page (probed .text-shadow child) */
.page-header.has-photo::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,.44) }
.page-header.has-photo .container { position:relative; z-index:1 }
.page-header h1 { color:#fff; margin:0; font-size:clamp(2.4rem,4.9vw,4.375rem); font-weight:600; line-height:1.14 }
.page-header .page-summary { color:#eee }
/* live mobile banner: ~290px tall, h1 ~31px single line (390x844 screenshot parity) */
@media (max-width:700px) { .page-header.has-photo { min-height:290px } .page-header h1 { font-size:clamp(1.9375rem,4.9vw,4.375rem) } }

/* two-column internal layout: services sidebar + article
   (live: sidebar widget 310px at x=90, content column 876px at x=474 → 74px gap) */
.layout-sidebar { display:grid; gap:2.5rem; grid-template-columns:1fr }
@media (min-width:900px) { .layout-sidebar { grid-template-columns:320px 1fr; gap:64px } .layout-sidebar > aside { padding-left:10px } }
/* live .widgettitle: 28px w400 rgb(49,68,80), padding-bottom 10px */
.side-nav h2 { font-size:1.75rem; font-weight:400; color:#314450; padding-bottom:10px; margin-bottom:0 }
.side-nav ul { list-style:none; margin:0; padding:0 }
/* live .widget_nav_menu a: 16px w400, padding 10px 10px 10px 0, border-bottom 1px solid rgb(240,239,239),
   current item = #e8aa03 (we use the darker text-safe gold for 16px text) */
.side-nav a { display:block; padding:10px 10px 10px 0; color:var(--text); font-size:1rem; line-height:1.33; border-bottom:1px solid #f0efef }
.side-nav a:hover, .side-nav a[aria-current="page"] { color:var(--accent-text) }
.article-lead { margin-top:10px }

/* sidebar cards below the services list (live /services/* sidebar) */
/* live testimonials teaser: 310px card, padding 40px, h3 28px w300 (+19px below), copy 16px with
   36px before the gold pill; live bg #ecf4fe (pale blue) — swapped for the theme's own pale beige
   #f3f1ec (live FAQ band bg) per the site-wide no-blue rule */
.side-teaser { background:#f3f1ec; padding:40px; margin-top:40px }
.side-teaser h3 { font-size:1.75rem; font-weight:300; margin:0 0 19px }
.side-teaser p { font-size:1rem; line-height:1.33; margin:0 0 36px }
/* live expert card (fl-node-594831da3215a): photo background (Contact-us-2-scaled.jpg, cover),
   padding 30px, 60px above; 100px white fa-phone-volume glyph (no roundel), h5 30px w400 white,
   plain 18px contact lines, centred "Or fill our form", ninja-forms pill inputs (padding 15px 25px,
   radius 480px, border 1px #c9c9c9, rows ~29px apart, Name/E-mail half-width) — all probed live */
.side-expert { background:#1c1b19 url('/assets/img/2017/05/Contact-us-2-scaled.jpg') center/cover no-repeat; color:#fff; padding:30px; margin-top:60px }
.side-expert .se-ico { font-size:100px; line-height:1; color:#fff; text-align:center; margin:80px 0 95px }
.side-expert h3 { color:#fff; font-size:1.875rem; font-weight:400; line-height:1.2; margin:0 0 20px }
.side-expert p { color:#ddd; font-size:1rem; margin:0 0 .4rem; overflow-wrap:anywhere }
.side-expert .se-contact { color:#fff; font-size:1.125rem; line-height:1.33; margin:0 }
.side-expert a, .side-expert p a:not(.btn) { color:#fff; text-decoration:none }
.side-expert a:hover, .side-expert p a:not(.btn):hover { color:var(--accent); text-decoration:underline }
.side-expert .se-or { margin:50px 0 0; color:#fff; font-size:1rem; text-align:center }
.side-expert .enquiry-form { margin:133px 10px 0 }
.side-expert .enquiry-form input, .side-expert .enquiry-form textarea { width:100%; background:#fff; border:1px solid #c9c9c9; border-radius:480px; padding:15px 25px; font-size:1rem }
.side-expert .enquiry-form textarea { border-radius:16px }
.side-expert .enquiry-form .form-row { margin-bottom:29px }
.side-expert .enquiry-form .form-row-split { display:flex; flex-direction:row; gap:6px }
.side-expert .enquiry-form .form-row-split > span { flex:1; min-width:0 }

/* newsletter strip (live-site parity) */
.newsletter-strip { background:var(--accent); padding:1.1rem 0 }
.newsletter-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.newsletter-inner p { margin:0; font-weight:600; color:#111 }
.newsletter-inner form { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap }
.newsletter-inner input { font:inherit; padding:.55rem .9rem; border:0; border-radius:999px; min-width:240px }
.newsletter-inner .btn { background:#111; border-color:#111; color:#fff }
.newsletter-inner .btn:hover { background:#2b2a28; border-color:#2b2a28; color:#fff }

/* interactive Europe map (amCharts) — live map block: 1280x717 at 1440 (probed) */
.europe-map { width:100%; aspect-ratio:16/9; max-height:720px; margin-bottom:1.5rem }
.europe-map:empty { min-height:200px }
@media (max-width:700px) { .europe-map { aspect-ratio:4/5; max-height:none } }
.map-logo { width:90px; height:auto; margin:.4rem 0 1rem }

/* white card overlapping the hero (live-site signature) — live: 512px wide, 44px light heading, hangs ~110px deep */
.hero-slider { overflow:visible }
.hero-card { position:absolute; right:4%; bottom:-110px; z-index:5; background:#fff; box-shadow:var(--shadow-lg);
  padding:2.6rem 2.6rem 2.2rem; width:min(512px, 92vw); border-radius:2px }
.hero-card h2 { font-size:clamp(1.875rem,3.1vw,2.75rem); font-weight:500; line-height:1.18; color:#2c2c2c; margin-bottom:1.1rem }
.hero-card ul { list-style:none; margin:0 0 1.4rem; padding:0 }
.hero-card a { display:block; padding:.55rem 0; color:var(--primary); font-weight:400; font-size:1.125rem }
.hero-card a:hover { color:var(--accent-text) }
/* live "Read more": 14px gold, 2px gold border-bottom, padding-bottom 2px (probed) */
.hero-card a.hero-card-more { display:inline-block; width:max-content; color:var(--accent-text) !important; font-weight:400; font-size:.875rem !important;
  border-bottom:2px solid var(--accent); padding:0 0 2px !important }
@media (max-width:900px) {
  /* mobile: the slideshow occupies a fixed 430px band; the card stacks BELOW it in flow */
  .hero-slider { display:block; min-height:0; padding:0; background:#fff }
  .hero-slide { inset:auto; top:0; left:0; right:0; height:430px }
  .hero-slider .container { min-height:430px; display:flex; flex-direction:column; justify-content:center; padding-top:.5rem; padding-bottom:1rem }
  .hero-arrows { display:none }
  .hero-card { position:static; width:100%; margin:0; box-shadow:none; padding:2.4rem 24px 1.6rem }
}

/* ─── Homepage live-parity layout ─── */
.v-center { align-items:center }
.rounded-img { border-radius:var(--radius); width:100%; height:auto; object-fit:cover }
.container.narrow { max-width:880px }
/* big pale section numbers ("01.") — live: Rufina 70px w400 #d8d8d8 at BOTH widths */
.num-label { font-family:'Rufina',Georgia,serif; font-size:4.375rem; font-weight:400; color:#949494; /* lightest grey >=3:1 on white (large text); live #d8d8d8 fails WCAG */ margin:0 0 .3rem; line-height:1.14 }
/* audience grid leaves room for the hero card hanging on the right */
@media (min-width:901px) { .audience-wrap { padding-right:455px } }
/* live: feature blocks ~117px apart (icon rows probed at y710/827/943), 15px column gap */
.audience-grid { row-gap:1rem; column-gap:15px }
/* watermark blocks ("Talk to an expert", "Xcelentra's Services") — live: grey blob + X logo, no card chrome */
.watermark-card { position:relative; text-align:center; padding:13rem 10px 7rem } /* live h2 spans 470px of the 490px col */
.watermark-card::before { /* organic grey blob */
  content:""; position:absolute; inset:2% 0; z-index:0;
  background:
    radial-gradient(ellipse 42% 34% at 38% 32%, #f2f2f2 99%, transparent),
    radial-gradient(ellipse 40% 36% at 62% 58%, #f2f2f2 99%, transparent),
    radial-gradient(ellipse 34% 26% at 30% 68%, #f2f2f2 99%, transparent),
    radial-gradient(circle 26px at 6% 24%, #f2f2f2 99%, transparent),
    radial-gradient(circle 20px at 92% 78%, #f2f2f2 99%, transparent);
}
.watermark-card::after { /* X logo above the heading */
  content:""; position:absolute; top:4.2rem; left:50%; transform:translateX(-50%); z-index:1;
  width:130px; height:130px;
  background:url('/assets/img/2023/07/Xcelentra_X_Logo-e1690145882444.png') center/contain no-repeat;
}
.watermark-card > * { position:relative; z-index:2 }
.watermark-card h2 { font-size:clamp(1.875rem,3.1vw,2.75rem); font-weight:500 }
/* split layout: floating card left, content right with a full-height divider (live rows) */
.split-layout { display:grid; grid-template-columns:1fr; gap:1rem }
@media (min-width:901px) {
  /* live: card col 490px (x100..590), divider at x610, right content from x691 */
  .split-layout { grid-template-columns:510px 1fr; gap:0 }
  .split-layout .watermark-card { align-self:start; position:sticky; top:calc(50vh - 280px); margin:0 10px }
  .split-layout .split-right { border-left:1px solid #ececec; padding-left:80px; margin-left:20px }
}
.split-rule { border:0; border-top:1px solid #ececec; margin:3.2rem 0 }
/* outline gold pill (live watermark-card buttons) */
.btn-gold-outline { background:#fff; color:var(--accent-text); border:1px solid var(--accent); padding:1rem 2rem; font-size:.875rem; font-weight:400 }
.btn-gold-outline:hover { background:var(--accent); border-color:var(--accent); color:#1a1a1a; box-shadow:none }
/* stats beside the expert card — live: gold 44px number+unit, 22px label with bold lead word */
.stats-grid { gap:2rem 1.5rem }
.stat-item { display:flex; gap:1.1rem; align-items:flex-start }
.stat-item > i { color:var(--accent); font-size:45px; margin-top:.3rem } /* live stat icons: 45px (probed) */
.stat-item .count { font-size:clamp(1.875rem,3.1vw,2.75rem); font-weight:500; color:#b58402; /* same gold hue, >=3:1 on white for large text (raw #e8aa03 = 2.06:1) */ line-height:1.18 }
.stat-unit { font-size:clamp(1.875rem,3.1vw,2.75rem); font-weight:500; color:#b58402; margin-left:.3rem }
.stat-item p { margin:.1rem 0 0; color:#000; font-size:clamp(1.1rem,1.55vw,1.375rem); line-height:1.27 }
/* testimonial slider — live quote: Rufina 28px w300 */
.testimonial-slider { position:relative; min-height:180px; max-width:820px }
.testimonial-slide { display:none; margin:0 }
.testimonial-slide.active { display:block }
.testimonial-slide .quote-text { font-family:'Rufina',Georgia,serif; font-weight:400; font-size:clamp(1.5rem,1.95vw,1.75rem); line-height:1.36; color:#000 }
.testimonial-slide footer { color:var(--muted); font-size:.85rem; margin-top:1rem; display:flex; align-items:center; gap:.5rem }
.testimonial-slide footer .stars { color:#000; font-size:1rem; letter-spacing:3px }
.testi-dots { display:flex; gap:.55rem; margin-top:1.1rem }
.testi-dots button { width:14px; height:14px; border-radius:50%; border:1px solid #c9c9c9; background:transparent; cursor:pointer; padding:0 }
.testi-dots button[aria-current="true"] { background:var(--accent); border-color:var(--accent) }
/* why-xcelentra: bare gold line-art icons (live: 70x70 PNGs, 20px w400 black labels,
   label 41px right of icon, rows 90px apart — probed) */
.why-list { list-style:none; margin:1.8rem 0 0; padding:0 }
.why-list li { display:flex; align-items:center; gap:41px; padding:.6rem 0; font-weight:400; font-size:1.25rem; color:#000 }
.why-ico { width:70px; height:70px; flex:none; object-fit:contain }
@media (max-width:640px) { .why-list li { flex-direction:column; align-items:flex-start; gap:.6rem } }
/* services numbered stack — live: 44px w500 headings (30px mobile), no icons, thin separators */
.services-layout { grid-template-columns:1fr }
@media (min-width:901px) { .services-layout { grid-template-columns:380px 1fr; gap:4rem } }
/* live row rhythm: 85px above the number and 85px under the description, hr between rows;
   heading top sits 55px below the number top (25px into the 79.8px line) */
.service-row { padding:85px 0; border-bottom:1px solid #e3e3e3 }
.service-row:last-child { border-bottom:0 }
.service-row .num-label { margin:0 }
.service-row h3 { font-size:clamp(1.875rem,3.1vw,2.75rem); font-weight:500; line-height:1.18; color:var(--heading); margin-top:-25px; position:relative }
.service-row h3 a { color:inherit }
.service-row h3 a:hover { color:var(--accent-text) }
.service-row p { max-width:660px; margin-bottom:0 }
/* map legend */
.map-legend { color:var(--muted); font-size:.85rem }
.map-legend .dot { display:inline-block; width:11px; height:11px; border-radius:50% }
.dot-gold { background:var(--accent) } .dot-grey { background:#c9c9c9 }
/* callback band — live: light parallax photo (header-1-1.jpg), overlay rgba(10,0,0,.1),
   20px white frame, padding 130px/80px, WHITE 80px w600 heading (ghost text, aria-hidden
   for axe; real heading is sr-only), cols 61.72%/38.28% (probed live node 1m6dy3fni2j0) */
.dark-callback {
  position:relative; color:#fff;
  background:url('/assets/img/2016/12/header-1-1.jpg') center center/cover fixed;
  border:20px solid #fff; padding:130px 0 80px;
}
.dark-callback::before { content:""; position:absolute; inset:0; background:rgba(10,0,0,.1); pointer-events:none }
/* live knowledge-hub variant: same band without the 20px white frame (row wrap pad 130/60/80) */
.dark-callback.flush { border:0 }
.dark-callback .container { position:relative; z-index:1 }
.dark-callback .cb-ghost { color:#fff; font-size:clamp(3rem,5.55vw,5rem); font-weight:600; line-height:1.1; margin:0; font-family:'Montserrat',Helvetica,Arial,sans-serif }
.dark-callback h3 { color:#fff; font-size:clamp(1.5rem,1.95vw,1.75rem); font-weight:300; margin-bottom:1.4rem }
@media (min-width:901px) { .dark-callback .container.grid { grid-template-columns:1.61fr 1fr; gap:20px } }
.enquiry-form.dark label { color:#eee }
.enquiry-form.dark input, .enquiry-form.dark textarea { background:#fff; border:1px solid #c9c9c9; border-radius:480px; padding:15px 25px; font-size:1rem }
.enquiry-form.dark textarea { border-radius:16px }
.enquiry-form.dark .form-row { margin-bottom:10px }
.enquiry-form.dark input::placeholder, .enquiry-form.dark textarea::placeholder { color:#5f5f5f }
@media (prefers-reduced-motion:reduce), (max-width:900px) { .dark-callback { background-attachment:scroll } }
/* newsletter: light variant (live: white strip w/ 1px #ededed top rule, gold newspaper icon,
   borderless pill input w/ soft shadow 0 2px 40px rgba(0,0,0,.07), gold pill button +10px) */
.newsletter-strip.light { background:#fff; padding:1.6rem 0; border-top:1px solid #ededed }
.newsletter-strip.light p { color:var(--heading); font-weight:400; display:flex; align-items:center; gap:1rem; font-size:1rem }
.newsletter-strip.light .nl-ico { color:var(--accent); font-size:2.4rem }
.newsletter-strip.light input { border:1px solid transparent; box-shadow:0 2px 40px rgba(0,0,0,.07); padding:15px 25px; font-size:1rem; min-width:min(470px,60vw) }
.newsletter-strip.light .btn { background:var(--accent); border-color:var(--accent); color:#1a1a1a; margin-left:10px }


/* ─── Live-theme motion ─── */
/* hero slide text: re-animates on every slide change (class toggled in page JS) */
@keyframes heroTextIn { from { opacity:0; transform:translateY(34px) } to { opacity:1; transform:translateY(0) } }
.hero-anim > * { animation:heroTextIn .7s cubic-bezier(.22,.61,.36,1) both }
.hero-anim > *:nth-child(2) { animation-delay:.15s }
.hero-anim > *:nth-child(3) { animation-delay:.3s }
@media (prefers-reduced-motion:reduce) { .hero-anim > * { animation:none } }

/* ─── Internal pages: live-parity components (values probed from xcelentra.com computed styles) ─── */

/* country pages — centred statement (live h3: 28px w300 lh 38.08px centred, max-width 876px;
   live navy rgb(6,22,58) → charcoal per no-blue rule) */
.country-statement { font-size:1.75rem; font-weight:300; line-height:1.36; text-align:center; max-width:876px; margin:0 auto; color:var(--heading) }
/* teaser columns (live: 640px cols, padding 50px, centred h3 28px w300, blob bg Columns-BG-Shape.png
   contain/center, gold underline button 14px + 2px #e8aa03 border-bottom) */
.country-teasers { display:grid; grid-template-columns:1fr; gap:1rem; margin-top:2.5rem }
@media (min-width:760px) { .country-teasers { grid-template-columns:repeat(2,1fr) } .country-teasers.cols-3 { grid-template-columns:repeat(3,1fr) } }
.country-teaser { padding:50px; text-align:center; background:url('/assets/img/2023/07/Columns-BG-Shape.png') center/contain no-repeat }
.country-teaser h3 { font-size:1.75rem; font-weight:300; margin:0 0 .6rem }
.country-teaser p { line-height:1.33 }
.link-gold { display:inline-block; font-size:.875rem; font-weight:400; color:var(--accent-text); border-bottom:2px solid var(--accent); padding:1px 0; text-decoration:none }
.link-gold:hover { color:var(--accent-text-2); border-color:var(--accent-text) }
/* numbered split content (live: left watermark card ~500px, right column ~780px, section h2 44px w500,
   number labels reuse the homepage .num-label treatment) */
.country-split { display:grid; grid-template-columns:1fr; gap:1rem }
@media (min-width:901px) {
  .country-split { grid-template-columns:460px 1fr; gap:0 }
  .country-split .watermark-card { align-self:start; position:sticky; top:calc(50vh - 260px) }
  .country-split .country-right { border-left:1px solid #ececec; padding-left:5rem; margin-left:2.4rem }
}
.country-right h2 { text-align:left; margin:0 0 1rem }
.country-right > .article-body { max-width:none; margin:0 }
/* live split rhythm (probed /ireland/): item h2 44/500 sits straight under the number (0 gap),
   items separated by a 1px #ededed rule with 50px above/below */
.article-body h3.num-label { color:#949494; margin:0 } /* .article-body h3 colour override; live #d8d8d8 fails contrast */
.country-right .article-body h2 { margin-top:0 }
.country-right .article-body h3.num-label { margin-top:34px; padding-top:50px; border-top:1px solid #ededed } /* 34px + 16px p-margin = live 50px */
.country-right .article-body h3.num-label:first-child { margin-top:0; padding-top:0; border-top:0 }
/* differentiators grid (live "Why Xcelentra?" band: centred 44px w500 h2, 3 equal cols forming a
   WHITE card on the pale band, 70x70 gold icons, cell titles 22px w400, desc 16px lh 21.28px,
   1px #e3e3e3 hairlines between rows; live pale-blue #ecf4fe band → #f3f1ec per no-blue rule) */
.why-band { background:#f3f1ec }
.diff-grid { display:grid; grid-template-columns:1fr; gap:0; margin-top:2.4rem; background:#fff }
@media (min-width:820px) {
  .diff-grid { grid-template-columns:repeat(3,1fr) }
  .diff-grid .diff-cell:nth-child(n+4) { border-top:1px solid #e3e3e3 }
}
@media (max-width:819px) { .diff-grid .diff-cell + .diff-cell { border-top:1px solid #e3e3e3 } }
.diff-cell { padding:20px 30px } /* live cell padding 20px 30px (probed) */
.diff-cell .d-ico { width:70px; height:70px; object-fit:contain; margin:10px 10px 20px } /* live 70x70, 10px frame, 20px to title */
.diff-cell h3 { font-size:1.375rem; font-weight:400; margin:0 0 20px }
.diff-cell p { margin:0; font-size:1rem; line-height:1.33 }
/* teaser column icons (live: 90x90 image 10px above the 28px heading) */
.country-teaser .ct-ico { display:block; width:90px; height:90px; object-fit:contain; margin:0 auto 10px }
/* photo banners on country/footprint pages: live has NO scrim (photos are pre-darkened; probed
   /ireland/ — no overlay layer inside #sub-header), a 60x1 #c9c9c9 line 15px under the h1,
   and an 18px w300 white subtitle */
.page-header.no-scrim::before { background:none }
.ph-line { width:60px; height:1px; background:#c9c9c9; border:0; margin:15px auto }
.page-header.has-photo .page-summary { font-size:1.125rem; font-weight:300; line-height:1.1; color:#fff; opacity:1; max-width:none } /* live desc runs a single 815px line */
/* full-width "Types of visas" band (live: 708x472 r6 photo left, 44px h2 + 16px intro right,
   70px gap, heading offset 97px below the photo top; permits list continues full-width) */
.country-visa { padding:80px 0 40px }
.country-visa .cv-top { display:grid; gap:2rem; align-items:start }
@media (min-width:960px) {
  .country-visa .cv-top { grid-template-columns:708px 1fr; gap:70px }
  .country-visa .cv-top > div { padding-top:97px }
}
.country-visa .cv-top img { width:100%; max-width:708px; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:6px; margin:0; display:block }
.country-visa h2 { text-align:left; margin:0 0 40px }
.country-visa .cv-rest { margin:40px 0 0; max-width:none } /* live: permits list runs the full 1260px container */
.country-visa .cv-cta { margin:40px 0 0 }
/* country why-band lead + closing promise line (live: 16px, left-aligned, full width) */
.why-band .why-lead { margin:1rem 0 0 }
.why-band .why-promise { margin:2.2rem 0 0 }
/* footprint main column (live: 22px w400 message, form 452px + offices 334px ≈ 90px gap) */
.fp-msg { font-size:1.375rem; font-weight:400; color:#000; line-height:1.27; margin:300px 0 1.4rem } /* live keeps ~480px air between the map legend and the message (empty 430px row) */
@media (max-width:959px) { .fp-msg { margin-top:4rem } }
.fp-offices .fo-head a[href^="tel"] { color:inherit } /* live: toll-free number is plain black, only the email is gold */
.fp-grid { display:grid; grid-template-columns:1fr; gap:3rem; margin-top:1.4rem }
@media (min-width:960px) { .fp-grid { grid-template-columns:1.35fr 1fr; gap:5.6rem } }
.fp-offices .fo-head { display:flex; align-items:center; gap:20px; padding-bottom:1.2rem; border-bottom:1px solid #ececec; margin-bottom:1.2rem }
.fp-offices .fo-ico { font-size:70px; line-height:1; color:var(--accent) }
.fp-offices .fo-head p { margin:0; font-size:1.375rem; font-weight:400; line-height:1.27 }
.fp-offices .fo-head a { color:var(--accent-text); text-decoration:none } /* live: phone + email run without underline */
.fp-offices .fo-head a:hover { text-decoration:underline }
.fp-offices .fo-cols { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem }
/* live mobile stacks the offices full-width with a hairline between, icon above the contact lines */
@media (max-width:700px) {
  .fp-offices .fo-head { display:block }
  .fp-offices .fo-ico { display:block; margin-bottom:.8rem }
  .fp-offices .fo-cols { grid-template-columns:1fr }
  .fp-offices .fo-cols > div + div { border-top:1px solid #ececec; padding-top:1.2rem }
}
.fp-offices h3 { font-size:1.375rem; font-weight:400; margin:0 0 .5rem }
.fp-offices address { font-style:normal; line-height:1.33; margin:0 0 .9rem }
.fp-split { margin-top:90px }

/* blog post (live single post: white header band pad 40px 0, centred black 70px h1,
   centred .post-meta 16px margin 40px/10px, featured image 1120px centred,
   body column 840px, p 18px lh 28.73px mb 18px — probed live post) */
.post-header { padding:40px 0 0; text-align:center }
.post-header h1 { color:var(--heading); font-size:clamp(2.2rem,4.9vw,4.375rem); font-weight:600; line-height:1.14; max-width:1260px; margin:0 auto }
.post-meta { text-align:center; color:var(--text); font-size:1rem; margin:40px 0 10px }
.post-meta a { color:var(--accent-text); text-decoration:underline }
.post-feature { max-width:1120px; margin:0 auto }
.post-feature img { width:100%; height:auto }
.post-body { max-width:840px; margin:0 auto; font-size:1.125rem }
.post-body p { line-height:1.6; margin:0 0 18px }
.post-body li { line-height:1.6 }

/* ─── Knowledge hub (live /knowledge-hub-faqs/ — all values probed) ─── */
/* hero: 500px rev-slider band, Slide-1.jpg cover top, title 70px/80 w700 bottom-233, strapline
   20px/28 w300 bottom-154, white pill button (16px w500, pad 15/30, radius 30) bottom-70;
   live bg #ccdeec + navy text → theme beige + near-black per the no-blue rule */
.kc-hero { height:500px; background:#f3f1ec url('/assets/img/2017/09/Slide-1.jpg') no-repeat 50% 0/cover }
.kc-hero-inner { position:relative; height:100% }
.kc-hero h1 { position:absolute; left:30px; bottom:233px; margin:0; font-size:70px; line-height:80px; font-weight:700; color:var(--heading) }
.kc-sub { position:absolute; left:30px; bottom:182px; margin:0; font-size:20px; line-height:28px; font-weight:300; color:var(--heading) }
.kc-cta { position:absolute; left:30px; bottom:70px }
.kc-btn { display:inline-block; background:#fff; color:#1a1a1a; font-size:16px; font-weight:500; line-height:20px; padding:15px 30px; border-radius:30px; box-shadow:0 15px 20px -5px rgba(0,0,0,.15); text-decoration:none; transition:transform var(--t),box-shadow var(--t) }
.kc-btn:hover { text-decoration:none; transform:translateY(-2px); box-shadow:0 18px 24px -5px rgba(0,0,0,.2); color:#1a1a1a }
/* live mobile hero (probed 390px rev-slider): row 431px tall, title 42px w800 lh44 at x24
   ending 155px above the row bottom, sub hidden, pill 13px w500 pad 13/24 ending 90px up,
   News h2 20px below the hero */
@media (max-width:700px) {
  .kc-hero { height:431px }
  .kc-hero h1 { font-size:42px; line-height:44px; font-weight:800; left:24px; bottom:155px }
  .kc-sub { display:none }
  .kc-cta { left:24px; bottom:90px }
  .kc-btn { font-size:13px; line-height:21px; padding:13px 24px }
}
/* news loop: wrap pad 100/20, centred 44px heading, 4 cols (297px incl. 10px pad + 30px meta
   inset), category 18px, title 22px w400 black, date 11px w300 uppercase, Read More 14px #314450
   with 2px underline-border */
.kc-news { padding:100px 0 20px }
@media (max-width:700px) { .kc-news { padding-top:20px } } /* live mobile: News h2 sits 20px below hero */
.kc-news h2 { text-align:center; margin:0 0 50px }
.kc-news-grid { display:grid; grid-template-columns:1fr; gap:30px }
@media (min-width:640px) { .kc-news-grid { grid-template-columns:repeat(2,1fr) } }
@media (min-width:1000px) { .kc-news-grid { grid-template-columns:repeat(4,1fr) } }
.kc-news-item { padding:10px 10px 10px 40px }
.kc-news-cat { font-size:1.125rem; margin:0 0 5px }
p.kc-news-cat a:not(.btn) { color:var(--heading); text-decoration:none }
p.kc-news-cat a:not(.btn):hover { color:var(--accent-text); text-decoration:underline }
.kc-news-item h3 { font-size:1.375rem; font-weight:400; line-height:1.27; margin:0 0 10px }
.kc-news-item h3 a { color:#000; text-decoration:none }
.kc-news-item h3 a:hover { color:var(--accent-text); text-decoration:underline }
.kc-news-date { font-size:.6875rem; font-weight:300; text-transform:uppercase; margin:5px 0 32px }
p.kc-news-date a:not(.btn) { color:#000; text-decoration:none }
.kc-news-more { margin:0 }
p.kc-news-more a:not(.btn) { font-size:.875rem; color:#314450; text-decoration:none; border-bottom:2px solid #314450; padding-bottom:2px }
p.kc-news-more a:not(.btn):hover { color:var(--accent-text); border-color:var(--accent-text); text-decoration:none }
/* centred intro copy above the FAQ band */
.kc-intro { padding:88px 0 }
.kc-intro p { max-width:850px; margin:0 auto 16px; text-align:center; font-size:1.75rem; line-height:1.4; font-weight:300; color:var(--heading) }
.kc-intro a { color:var(--primary); text-decoration:underline }
@media (max-width:700px) { .kc-intro { padding:48px 0 } .kc-intro p { font-size:1.25rem } }
/* continuous #f3f1ec band; per category: 160px w600 number in a 270px column beside the 44px w500
   title + 16px description (630px), 880px accordion beneath — all centred as a 900px block */
.kc-band { background:#f3f1ec }
.kc-band .faq-block { padding:60px 0 20px }
.faq-cat-head { display:grid; grid-template-columns:270px 630px; justify-content:center; margin:0 }
.faq-cat-num { font-size:160px; font-weight:600; line-height:.8; color:#314450; text-align:center; padding-top:10px }
.faq-cat-text { padding:10px }
.faq-cat-text h2, .faq-cat-head h2 { margin:0 }
.faq-cat-text p { margin:10px 0 0 }
.faq-cat-list { max-width:880px; margin:10px auto 0 }
@media (max-width:900px) {
  .faq-cat-head { grid-template-columns:1fr; gap:8px }
  /* live mobile keeps the 160px number, left-aligned (probed 390px: x20, lh128) */
  .faq-cat-num { text-align:left; padding-top:0 }
  .faq-cat-text { padding:0 }
}

/* ─── Services index (live /services/: full-width lead, six 220px photo cards 3-up, pale band
   with gold h4 summaries, blog digest, Europe map — lifted from live raw/screens) ─── */
.svcx-lead { max-width:none; margin:0 }
.svcx-lead h2 { margin:0 0 24px }
.svcx-grid { display:grid; grid-template-columns:1fr; gap:48px 30px; margin-top:70px }
@media (min-width:640px) { .svcx-grid { grid-template-columns:repeat(3,1fr) } }
.svcx-card img { width:220px; max-width:100%; height:auto; display:block; margin:0; border-radius:0; box-shadow:none }
.svcx-card h3 { font-size:1.375rem; font-weight:400; margin:32px 0 12px }
.svcx-card h3 a { color:var(--heading); text-decoration:none }
.svcx-card h3 a:hover { color:var(--accent-text); text-decoration:underline }
.svcx-card p { margin:0; color:var(--heading); font-size:1rem; line-height:1.33 }
.svcx-panel { background:#f3f1ec; padding:50px 30px 40px; margin-top:70px }
.svcx-panel p { line-height:1.33 } /* live panel copy runs at 21.28px like all body text (probed) */
.svcx-panel h4 { font-size:clamp(1.21rem,1.53vw,1.375rem); font-weight:400 } /* live 22px desktop / 19.36px mobile, w400 */
.svcx-panel h4 a { color:inherit; text-decoration:none }
.svcx-panel h4 a:hover { text-decoration:underline }
.svcx-panel > :first-child { margin-top:0 }
/* live mobile (probed 390px): cards stack in live's column-major DOM order
   (PT, BA, CA, IS, PM, EP) 25px apart with a 33px image→title gap; the pale panel
   sits 20px below the last blurb, near-flush (10px insets), padding 30/10 */
@media (max-width:639px) {
  .svcx-grid { gap:25px }
  .svcx-card h3 { margin:33px 0 15px }
  .svcx-card:nth-child(1) { order:1 }
  .svcx-card:nth-child(2) { order:3 }
  .svcx-card:nth-child(3) { order:5 }
  .svcx-card:nth-child(4) { order:2 }
  .svcx-card:nth-child(5) { order:4 }
  .svcx-card:nth-child(6) { order:6 }
  .svcx-panel { margin:20px -10px 0; padding:30px 10px 10px }
}
/* live news loop (probed live /services/ .loop-wrapper.news): items 10px padded, 30px apart;
   featured image 1260 wide ABOVE the text with a 20px gap; text indented a further 30px
   (theme icon gutter puts live text at x120); cat 18px (live navy rgb(6,22,58) → charcoal per
   accepted deviations), title 22px w400 lh27.94 mb10, date 11px w300 caps, excerpt 16px/21.28
   rgb(44,44,44), Read More 14px #314450 2px underline mb30. Live also renders an 11px tags row
   (35px tall) and 1/2 pagination — dev has no tag data or archive paging, so the Read More
   margin-top absorbs the tags row height and .svcx-map absorbs the pagination band. */
.svcx-news { margin-top:104px }
.svcx-news-item { padding:10px }
.svcx-news-item + .svcx-news-item { margin-top:30px }
.svcx-news-media { display:block; margin:0 0 20px }
.svcx-news-img { width:100%; height:auto; display:block; margin:0; border-radius:0; box-shadow:none }
.svcx-news-body { padding-left:30px }
.svcx-news-item > .svcx-news-body:first-child { padding-top:20px }
.svcx-news-body .kc-news-cat { font-size:1.125rem; line-height:1.33; margin:0 0 9px }
.svcx-news-item h3 { font-size:1.375rem; font-weight:400; line-height:1.27; margin:0 0 10px }
.svcx-news-item h3 a { color:#000; text-decoration:none }
.svcx-news-item h3 a:hover { color:var(--accent-text); text-decoration:underline }
.svcx-news-body .kc-news-date { margin:5px 0 17px }
.svcx-excerpt { color:#2c2c2c; margin:0 0 10px }
.svcx-news-body .kc-news-more { margin:45px 0 30px } /* collapses with excerpt mb10 → 45 (live excerpt→ReadMore incl. tags row) */
/* live: last item ends y5384, pagination band (60px margin + 48px pills), map h2 at y5642 → 258px */
.svcx-map { margin-top:258px }
.svcx-map h2 { text-align:left }

/* ─── Tax webinar (live /taxwebinar/: services-sidebar layout, lead 22px w400, contact block,
   home-style 01/02 split with a narrower watermark column, Europe map in the content column) ─── */
.tw-lead { font-size:1.375rem; font-weight:400; color:var(--heading); line-height:1.4; margin:10px 0 40px; text-align:left }
.tw-register { max-width:560px; margin:0 0 70px }
.tw-register .btn { margin-top:10px }
.tw-contact .tw-person { font-size:80px; line-height:1; color:var(--accent); margin:0 0 36px }
.tw-contact .tw-mail { font-size:1.375rem; margin:0 0 46px }
.tw-contact .tw-mail a { color:var(--accent-text); text-decoration:none }
.tw-contact .tw-mail a:hover { text-decoration:underline }
.tw-contact .tw-phone { font-size:1.375rem; margin:0 0 24px }
.tw-contact .tw-phone a { color:var(--heading); text-decoration:none }
.tw-contact .tw-phone a:hover { color:var(--accent-text); text-decoration:underline }
.tw-social { list-style:none; display:flex; gap:16px; margin:0 0 40px; padding:0 }
.tw-social a { color:var(--accent-text); font-size:1.25rem }
.tw-social a:hover { color:var(--accent-text-2) }
.tw-contact h3 { font-size:1.375rem; font-weight:400; margin:36px 0 14px }
.tw-contact address { font-style:normal; line-height:1.33; margin:0 0 18px }
.tw-split { margin-top:90px }
@media (min-width:901px) {
  .split-layout.split-narrow { grid-template-columns:362px 1fr }
  .split-layout.split-narrow .watermark-card { position:relative; top:auto; padding:10rem 10px 5rem }
}
.tw-all-testimonials { margin-top:56px }
.tw-map { margin-top:90px }
.tw-map h2 { text-align:left }

/* contact page (probed live /contact/ at 1440: form column 746px LEFT + offices right, gap 80;
   intro h4 22px/27.94 w400 black, row pt40 pb30; ninja pill inputs 15px 25px, radius 480px,
   border 1px #c9c9c9, row pitch 79px (=29px gap); textarea radius 16px h120; name/email 2-up
   363px each, gap 20; right col: person icon 120px #e8aa03, toll-free/email 22px/22,
   office cols 222px w/ border-top 1px #d8d8d8 + pad-top 30, h4 22px w400 (+10 below),
   address 16px/21.28 #2c2c2c, "Get directions" 14px/16 gold + 2px gold rule pb1,
   socials 20px gold pitch 34 (gap 14); stats row sits ~610px below form content) */
.contact-grid { display:grid; grid-template-columns:1fr; gap:3rem }
@media (min-width:900px) { .contact-grid { grid-template-columns:minmax(0,746px) 1fr; gap:80px; padding:0 10px } }
.contact-top { padding-top:1.5rem }
.contact-intro { font-size:1.375rem; font-weight:400; line-height:1.27; color:#000; max-width:700px; margin:0 0 30px }
@media (min-width:900px) { .contact-intro { margin-left:10px } }
.enquiry-form.pill input, .enquiry-form.pill select { border:1px solid #c9c9c9; border-radius:480px; padding:15px 25px; background:#fff; font-size:1rem }
.enquiry-form.pill textarea { border:1px solid #c9c9c9; border-radius:16px; padding:15px 25px; background:#fff; font-size:1rem }
.enquiry-form.pill .form-row { margin-bottom:10px }
.contact-grid .enquiry-form.pill .form-row { margin-bottom:29px }
.contact-grid .enquiry-form.pill textarea { height:120px }
.contact-grid .form-2up { gap:0 20px }
.form-2up { display:grid; grid-template-columns:1fr; gap:0 10px }
@media (min-width:640px) { .form-2up { grid-template-columns:1fr 1fr } }
.contact-expert { display:flex; align-items:center; flex-wrap:wrap; padding:30px 0 15px }
.contact-expert-ico { color:var(--accent); font-size:120px; line-height:1; width:120px; text-align:center }
.contact-expert-info p { margin:0 }
.contact-tollfree { font-size:1.375rem; line-height:1; color:#000 }
.contact-expert-info p.contact-email { font-size:1.375rem; line-height:1; margin-top:10px }
.contact-email a, .contact-expert-info p a:not(.btn) { color:var(--accent-text); text-decoration:none } /* live: gold, no underline (#e8aa03 fails 4.5:1 — accessible gold token) */
.contact-offices { display:grid; grid-template-columns:1fr }
@media (min-width:640px) { .contact-offices { grid-template-columns:1fr 1fr } }
.contact-offices .contact-office { border-top:1px solid #d8d8d8; padding:30px 10px 0 }
.contact-office h3 { font-size:1.375rem; font-weight:400; margin:0 0 10px } /* live office h4: 22px w400 */
.contact-office address { line-height:1.33 }
.contact-dir { display:inline-block; font-size:.875rem; line-height:16px; color:var(--accent-text); border-bottom:2px solid var(--accent); padding-bottom:1px }
.contact-dir:hover { color:var(--heading) }
.contact-social { display:flex; gap:14px; padding:20px 10px 0 }
.contact-social a { display:inline-flex }
.contact-social svg { width:20px; height:20px; fill:var(--accent) }
@media (min-width:900px) { .contact-stats { padding-top:500px } } /* live spacer row above "01." */
.contact-all { margin:85px 0 0 } /* live: dots → All Testimonials pill ~85px */

/* footer col 1 blob (live: bg /2017/08/Columns-BG-Shape_282525.png contain 50% 50% no-repeat) */
.footer-grid > div:first-child { background:url('/assets/img/2017/08/Columns-BG-Shape_282525.png') 50% 50%/contain no-repeat }
/* country watermark card uses the real live blob asset (homepage applies the same image via a
   scoped style in Index.cshtml — this rule is scoped to country pages only) */
.country-split .watermark-card::before { background:url('/assets/img/2023/07/Columns-BG-Shape.png') center/contain no-repeat }
.country-split .watermark-card { padding:11rem 2rem 5rem }
.contact-office address { font-style:normal; margin:0 0 1rem }

/* team & careers (live probed: leadership photos 300x300, member photos 221x221 with 25px text gap,
   names 44px w500, "EXECUTIVE DIRECTOR" label 16px w400 uppercase, grey full-width intro band) */
/* live /team-and-careers/ (probed): Leadership sits on a #f7f7f7 band (pad 50/80 → intro band
   #f2f2f2 pad 60/50 follows flush); feature = 448px photo col (300x300 img centred) + text col
   (name h2 44/500, label h5 18px uppercase, 16px/21.28 bio), features separated by a 1px #c9c9c9
   rule; live heading/label navy #06163a → charcoal per no-blue rule */
.team-lead-band { background:#f7f7f7; padding:50px 0 }
.team-intro-band { background:#f2f2f2; padding:60px 0 50px }
.team-lead-rule { border:0; border-top:1px solid #c9c9c9; margin:50px 0 }
.team-feature { display:grid; grid-template-columns:448px 1fr; gap:10px; align-items:start; margin-top:2.6rem }
.team-feature.flip { grid-template-columns:1fr 448px }
.team-feature img { width:300px; height:300px; object-fit:cover; margin:10px auto 0 }
.team-feature > div { padding-top:50px }
.team-feature h3, .team-row h3:not(.sr-only) { font-size:clamp(1.875rem,3.1vw,2.75rem); font-weight:500; line-height:1.18; margin:0 0 .3rem; color:var(--heading) }
.team-label { text-transform:uppercase; font-size:1.125rem; font-weight:400; color:var(--heading); margin:0 0 1.25rem } /* live h5 18px w400 uppercase */
.team-feature p, .team-row p, .team-narrative p, .team-intro p { line-height:1.33 }
/* member rows (live: 70px "0X." number, 44/500 name, then photo floated left 221x221 (row 01)
   or right 253x253 (rows 02/03) with the 16px bio beside it; rules 1px #ededed) */
.team-name { font-size:clamp(1.875rem,3.1vw,2.75rem); font-weight:500; line-height:1.18; margin:0 0 29px; color:var(--heading) }
.team-row { display:flex; gap:25px; align-items:flex-start; margin:0 0 2.4rem }
.team-row.flip { gap:35px }
.team-row img { width:221px; height:221px; object-fit:cover; flex:none }
.team-row.flip img { width:253px; height:253px }
.team-row > div { min-width:0 }
.team-narrative { margin:0 0 2.4rem }
/* split geometry (live: left rail 284px w/ 1px #ededed right border, right col starts +80px) */
@media (min-width:901px) {
  .team-split { grid-template-columns:284px 1fr }
  .team-split .team-wm-rail { border-right:1px solid #ededed }
  .team-split .watermark-card { position:sticky; top:calc(50vh - 260px); padding:11rem .5rem 5rem }
  .team-split .country-right { border-left:0; margin-left:0; padding-left:80px }
}
/* Join Us (live: 708x472 r6 photo left, 44px h2 centred beside it, row border-top #f0efef) */
.team-join-sec { border-top:1px solid #f0efef; padding:80px 0 40px; margin-bottom:20px }
.team-join-top { display:grid; grid-template-columns:1fr; gap:20px; align-items:center; margin-bottom:50px }
.team-join-top img { border-radius:6px; width:100%; max-width:708px; height:auto }
.team-join-top h2 { margin:0 }
@media (min-width:960px) {
  .team-join-top { grid-template-columns:708px 1fr; gap:0 }
  .team-join-top h2 { padding-left:80px }
}
@media (max-width:900px) {
  .team-feature, .team-feature.flip { grid-template-columns:1fr; gap:1.4rem }
  .team-feature > div { padding-top:0 }
  .team-feature img { margin:0 }
  .team-row { flex-direction:column }
  .team-row.flip { flex-direction:column-reverse } /* live mobile stacks the photo above the bio */
}
/* mobile: article first, services sidebar + cards stack BELOW the content */
@media (max-width:899px) {
  .layout-sidebar > aside { order:2 }
}

/* local-language switcher on country pages */
.lang-switch { font-size:.88rem; margin:.4rem 0 0 }
.lang-switch a { color:#8a6502; font-weight:600; text-decoration:underline }

/* country/footprint mobile parity — values probed from live at 390px:
   h1 35px/32.718, hero desc 12.8px/14.08, statement + teaser h3 24.08px/28.164,
   teaser col padding 50px 0 + 10px inner text margins */
@media (max-width:700px) {
  .page-header.no-scrim h1 { font-size:2.1875rem; line-height:.935 }
  .page-header.no-scrim .page-summary { font-size:.8rem; line-height:1.1 }
  .country-statement { font-size:1.505rem; line-height:1.17 }
  .country-teaser { padding:50px 10px }
  .country-teaser h3 { font-size:1.505rem; line-height:1.17 }
}

/* ═══ /about/ live parity (all values probed from https://xcelentra.com/about/ at 1440) ═══ */
/* banner: live .text-shadow overlay = black @ .30 (About / People / Testimonials banners) */
.page-header.scrim-30::before { background:rgba(0,0,0,.3) }
/* Company Overview: row pad 80/200, copy is 22px/27.94 w400 h4s in a 1004px centred column */
.about-overview-sec { padding:80px 0 200px }
.about-overview { max-width:1004px; margin:0 auto }
.about-overview h2 { margin:0 0 27px }
.about-overview h4 { font-size:1.375rem; font-weight:400; line-height:1.27; color:#000; margin:6.6px 0 }
/* mosaic: left 640px col (live bg photo about-1-1.jpg is blue-toned → charcoal per no-blue rule,
   white 44/500 h2 + 22px copy, pad 320/60, content bottom); right 640px pale panel (live #ecf4fe →
   #f3f1ec) pulled up -100px, 96px gold icon, then a 640x395 photo (about-2.jpg) below */
.about-mosaic { display:grid; grid-template-columns:1fr; align-items:start }
.about-teamcard { background:var(--charcoal); padding:320px 60px 60px }
.about-teamcard h2, .about-teamcard h4 { color:#fff }
.about-teamcard h2 { margin:0 0 16px }
.about-teamcard h4, .about-mission h4 { font-size:1.375rem; font-weight:400; line-height:1.27; margin:6.6px 0 }
.about-mission { background:#f3f1ec; padding:105px 60px 97px }
.about-mission .am-ico { font-size:96px; color:var(--accent); display:block; margin:0 0 35px }
.about-mission h2 { margin:0 0 27px }
.about-mission-col img { width:100%; height:395px; object-fit:cover; display:block }
@media (min-width:960px) {
  .about-mosaic { grid-template-columns:1fr 1fr }
  .about-mission { margin-top:-100px }
}
@media (max-width:959px) {
  .about-teamcard { padding:60px 24px }
  .about-mission { padding:50px 24px }
}
/* Clientele row: border-top #f0efef, pad 80/40 + 20 margin, 708x378 r6 photo + 44/500 h2 (70 gap) */
.about-client-sec { border-top:1px solid #f0efef; padding:80px 0 40px; margin-bottom:20px }
.about-client-top { display:grid; grid-template-columns:1fr; gap:24px; align-items:center; margin-bottom:86px }
.about-client-top img { width:100%; max-width:708px; height:auto; border-radius:6px }
.about-client-top h2 { margin:0 }
@media (min-width:960px) { .about-client-top { grid-template-columns:708px 1fr; gap:70px } }
.about-client-sec .btn { margin-top:20px }
/* Why Xcelentra?: pale band pad 60/100, centred 44/500 h2 (+40 top offset), 16px intro,
   then the shared .diff-grid white card (70x70 icons, 22px titles) */
.about-why { background:#f3f1ec; padding:60px 0 100px }
.about-why h2 { text-align:center; margin:40px 0 27px }
.about-why .aw-intro { margin:0 0 46px }
.about-why .diff-cell h3 a { color:#000 }
/* Let us help you: dark photo band (live bg navy #0d3885 + Slider1.jpg → charcoal per no-blue rule),
   50px/500 white h2, pill form 774px (name/phone 377), right rail: 200px white icon, 18px links */
.about-help { position:relative; background:var(--charcoal) url('/assets/img/2017/08/Slider1.jpg') top center/cover no-repeat; padding:50px 0; color:#fff }
.about-help::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,.45) }
.about-help .container { position:relative; z-index:1 }
.about-help h2 { color:#fff; font-size:clamp(2rem,3.5vw,3.125rem); font-weight:500; line-height:1; margin:0 0 40px }
.about-help-grid { display:grid; grid-template-columns:1fr; gap:40px }
@media (min-width:960px) { .about-help-grid { grid-template-columns:774px 1fr; gap:100px } }
.about-help .form-2up { gap:0 20px }
.about-help-side { text-align:center; align-self:start }
.about-help-side .ah-ico { font-size:170px; line-height:200px; color:#fff; display:block; margin:20px 0 30px }
.about-help-side a { color:#fff }
.about-help-side .ah-contact { font-size:1.125rem; line-height:1.33; font-weight:400; margin:0 0 20px }
.about-help-side .ah-talk { font-size:1rem; margin:0 0 16px }
.about-help-side .ah-address { display:inline-block; font-size:.875rem; color:#fff; border-bottom:2px solid #fff; padding:1px 0 }
.about-help-side .ah-address:hover { color:var(--accent) ; border-color:var(--accent) }

/* ═══ /about/people/ live-parity layout (probed; live shows theme-demo people — we keep the
   real team but mirror the grid: left 310px sidebar + 896px main, pale Leadership band,
   #f9f9f9 Experts/Join bands, cards w/ 650:720 photo, 14px position label, 28/300 name) ═══ */
.people-layout { display:grid; grid-template-columns:1fr; gap:40px; margin-top:40px }
@media (min-width:1000px) { .people-layout { grid-template-columns:310px 1fr; gap:74px } }
@media (max-width:999px)  {
  .people-side { order:2 }
  /* live mobile: the tinted bands run full-bleed with ~20px content inset */
  .people-band { margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding-left:20px; padding-right:20px }
}
.people-side-title { font-size:1.75rem; font-weight:400; margin:0 0 10px; color:var(--heading) }
.people-side-nav { list-style:none; margin:0 0 40px; padding:0 }
.people-side-nav a { display:block; padding:10px 10px 10px 0; border-bottom:1px solid #f0efef; color:var(--heading); font-size:1rem }
.people-side-nav a:hover { color:var(--accent-text) }
.people-promo { background:#f3f1ec; padding:40px; margin-bottom:40px } /* live pale-blue promo → #f3f1ec */
.people-promo h2 { font-size:1.75rem; font-weight:300; line-height:1.27; margin:0 0 20px }
.people-promo p { font-size:1rem; line-height:1.33; margin:0 0 30px }
/* dark expert card (live bg 2017/05/Contact-us-2-scaled.jpg, white 30px heading, pill mini-form) */
.people-expert { position:relative; background:var(--charcoal) url('/assets/img/2017/05/Contact-us-2-scaled.jpg') center/cover no-repeat; padding:40px; color:#fff }
.people-expert::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,.55) }
.people-expert > * { position:relative; z-index:1 }
.people-expert .pe-ico { font-size:90px; color:#fff; display:block; text-align:center; margin:30px 0 40px }
.people-expert h2 { color:#fff; font-size:1.875rem; font-weight:400; line-height:1.2; margin:0 0 20px }
.people-expert .pe-contact { font-size:1.125rem; line-height:1.33; margin:0 0 40px }
.people-expert .pe-contact a { color:#fff }
.people-expert .pe-fill { text-align:center; font-size:1rem; margin:0 0 30px }
.people-expert .form-row { margin-bottom:10px }
.people-expert input, .people-expert textarea { width:100%; border:1px solid #c9c9c9; border-radius:480px; padding:15px 25px; background:#fff; font-size:1rem; font-family:inherit }
.people-expert textarea { border-radius:16px }
.people-expert .pe-2up { display:grid; grid-template-columns:1fr 1fr; gap:6px }
/* main column bands */
.people-band { padding:50px 40px 80px }
.people-band h2 { margin:0 0 60px }
.people-band-lead { background:#f3f1ec } /* live pale-blue #ecf4fe → #f3f1ec */
.people-band-experts, .people-band-join { background:#f9f9f9 }
.people-band-join { padding-bottom:90px }
.people-join-lede { font-size:1.75rem; font-weight:300; line-height:1.36; color:var(--heading); margin:0 0 35px; max-width:676px }
.people-grid { display:grid; grid-template-columns:1fr; gap:40px 0 }
.people-grid > * { padding:0 30px }
@media (max-width:699px) { .people-grid > *, .people-narrative { padding:0 } } /* live mobile cards run edge-to-edge in the band */
@media (min-width:700px) {
  .people-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .people-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)) }
  .people-grid > * { border-left:1px solid #ededed }
  .people-grid-3 > *:nth-child(3n+1), .people-grid-4 > *:nth-child(4n+1) { border-left:0 }
}
/* team narratives (real content with no live-grid analog) run full width under the experts grid */
.people-narrative { margin-top:60px; padding:0 30px }
.people-narrative h3 { font-size:1.75rem; font-weight:300; line-height:1.36; margin:0 0 20px; color:var(--heading) }
.people-narrative p { font-size:1rem; line-height:1.33 }
.people-card .pc-thumb { width:100%; aspect-ratio:650/720; object-fit:cover; border-radius:6px; display:block }
.people-card .pc-pos { font-size:.875rem; font-weight:400; text-transform:uppercase; color:var(--heading); margin:20px 0 0 }
.people-card h3 { font-size:1.75rem; font-weight:300; line-height:1.36; margin:0; padding:5px 0; color:var(--heading) }
.people-card h3:first-child { margin-top:20px }
.people-card p { font-size:1rem; line-height:1.33; margin:0 0 16px }
/* about-help form field widths (live: Name/Phone 377px, Email/textarea 774px) + status colours */
.about-help .form-row.half input { max-width:377px }
.about-help .ah-status { color:#fff }
.tm-respond .tm-status { text-align:center }