/* ==========================================================================
   Sterdil Micro-CMS — Theme stylesheet
   The V1.29 visual identity, moved out of the inline <style> block in
   index.php so it can be cached, edited, and swapped per client.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", system-ui, sans-serif;
  color: #0F172A; background: #FFF; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

:root {
  --navy: #0F172A; --green: #10B981; --green-dark: #059669;
  --white: #FFF; --slate-50: #F8FAFC; --slate-100: #F1F5F9;
  --slate-200: #E2E8F0; --slate-400: #94A3B8; --slate-500: #64748B;
  --slate-600: #475569; --slate-700: #334155;
  --radius-xl: 24px; --radius-lg: 18px; --radius-md: 12px; --radius-pill: 999px;
  --shadow-sm: 0 4px 16px rgba(15,23,42,.07);
  --shadow-md: 0 12px 36px rgba(15,23,42,.10);
  --shadow-lg: 0 24px 64px rgba(15,23,42,.13);
  --trans: 200ms ease; --max: 1200px;
}

.wrap { width: min(calc(100% - 2.5rem), var(--max)); margin-inline: auto; }
.wrap-narrow { max-width: 760px; }
.section { padding: 96px 0; }
.section-sm { padding: 72px 0; }
.bg-white { background: var(--white); }
.bg-slate { background: var(--slate-50); }
.bg-navy { background: var(--navy); color: var(--white); }

/* Accessibility floor: focus must always be visible. */
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* --- Typography ---------------------------------------------------------- */
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin-bottom: .85rem; }
.eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor; border-radius: 999px; }
h1 { font-size: clamp(2.2rem, 5vw, 4.2rem); font-weight: 900; letter-spacing: -.04em; line-height: 1.05; margin-bottom: 1.25rem; }
h2 { font-size: clamp(1.75rem, 3vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 1rem; }
h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .6rem; }
.lead { font-size: clamp(1rem, 1.8vw, 1.15rem); line-height: 1.7; color: var(--slate-700); }
.section-intro { max-width: 720px; margin-bottom: 3.5rem; }

/* --- Buttons ------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 52px; padding: 0 1.5rem; border-radius: var(--radius-pill); font-family: inherit; font-weight: 700; font-size: .95rem; border: 1.5px solid transparent; cursor: pointer; transition: transform var(--trans), box-shadow var(--trans), background var(--trans), color var(--trans); white-space: nowrap; }
.btn-compact { height: 44px; font-size: .88rem; }
.btn-green { background: var(--green); color: #fff; box-shadow: 0 10px 28px rgba(16,185,129,.30); }
.btn-green:hover { background: var(--green-dark); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.btn-ghost:hover { background: rgba(255,255,255,.10); transform: translateY(-2px); }
.btn-outline-green { background: transparent; color: var(--green); border-color: var(--green); }
.btn-outline-green:hover { background: var(--green); color: #fff; transform: translateY(-2px); }

/* --- Ghost mode bar ------------------------------------------------------ */
.ghost-bar { background: #9333ea; color: #fff; text-align: center; padding: .6rem 1rem; font-weight: 700; font-size: .85rem; letter-spacing: .3px; }
.ghost-bar a { text-decoration: underline; margin-left: .5rem; }

/* --- Header / nav -------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 900; background: rgba(15,23,42,.88); backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid rgba(255,255,255,.07); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }
.brand-logo { height: 52px; width: auto; object-fit: contain; }
.brand-text { color: #fff; font-weight: 900; font-size: 1.35rem; letter-spacing: -.03em; }
.nav-links { display: flex; align-items: center; gap: 1.75rem; }
.nav-links > a, .nav-drop-toggle { color: rgba(255,255,255,.78); font-size: .92rem; font-weight: 600; transition: color var(--trans); background: none; border: none; font-family: inherit; cursor: pointer; }
.nav-links > a:hover, .nav-drop-toggle:hover { color: #fff; }
.nav-links > a.is-active { color: var(--green); }
.nav-right { display: flex; align-items: center; gap: 1.25rem; }

/* Dropdowns — configured in V1.29's admin, never rendered until now. */
.nav-drop { position: relative; }
.nav-drop-toggle { display: inline-flex; align-items: center; gap: .35rem; padding: 0; }
.caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.nav-drop-menu { display: none; position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); min-width: 220px; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: .5rem; }
.nav-drop.open .nav-drop-menu { display: block; }
.nav-drop-menu a { display: block; padding: .65rem .85rem; border-radius: 8px; font-size: .92rem; font-weight: 600; color: var(--slate-700); }
.nav-drop-menu a:hover { background: var(--slate-100); color: var(--navy); }

.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { display: block; width: 100%; height: 2px; background: rgba(255,255,255,.8); border-radius: 999px; }
.mobile-menu { display: none; flex-direction: column; gap: .25rem; padding: 1rem 1.25rem 1.25rem; border-top: 1px solid rgba(255,255,255,.07); background: rgba(15,23,42,.97); }
.mobile-menu a { padding: .75rem .5rem; color: rgba(255,255,255,.82); font-weight: 600; font-size: .97rem; border-radius: var(--radius-md); }
.mobile-menu .mobile-sub { padding-left: 1.5rem; font-size: .9rem; color: rgba(255,255,255,.6); }
.mobile-menu .btn { margin-top: .5rem; width: 100%; }
.mobile-menu.open { display: flex; }

/* --- News ---------------------------------------------------------------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.75rem; }
.post-card { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius-xl); padding: 1.6rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .6rem; transition: transform var(--trans), box-shadow var(--trans); }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.post-thumb { display: block; margin: -1.6rem -1.6rem .4rem; border-radius: var(--radius-xl) var(--radius-xl) 0 0; overflow: hidden; }
.post-thumb img { width: 100%; height: 190px; object-fit: cover; }
.post-card time, .post-header time { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-dark); }
.post-card h2 { font-size: 1.3rem; margin: 0; letter-spacing: -.02em; }
.post-card p { color: var(--slate-600); font-size: .95rem; margin: 0; }
.post-more { margin-top: auto; padding-top: .5rem; color: var(--green-dark); font-weight: 700; font-size: .9rem; }
.crumbs { margin-bottom: 2rem; font-weight: 600; font-size: .9rem; color: var(--slate-500); }
.post-header { margin-bottom: 2rem; }
.post-hero { width: 100%; border-radius: var(--radius-xl); margin-bottom: 2.5rem; }

/* Long-form article body. */
.prose { font-size: 1.05rem; line-height: 1.8; color: var(--slate-700); }
.prose > * + * { margin-top: 1.25rem; }
.prose h2 { font-size: 1.9rem; margin-top: 2.5rem; color: var(--navy); }
.prose h3 { font-size: 1.3rem; margin-top: 2rem; color: var(--navy); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4rem; }
.prose a { color: var(--green-dark); text-decoration: underline; }
.prose img { border-radius: var(--radius-md); margin-block: 1.75rem; }
.prose blockquote { border-left: 3px solid var(--green); padding-left: 1.25rem; font-style: italic; color: var(--slate-600); }
.prose code { background: var(--slate-100); padding: .15rem .4rem; border-radius: 4px; font-size: .9em; }

/* --- Footer -------------------------------------------------------------- */
.footer-top { background: #fff; border-top: 1px solid var(--slate-200); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: start; }
.footer-logo { height: 48px; width: auto; }
.footer-wordmark { font-weight: 900; font-size: 1.5rem; letter-spacing: -.03em; }
.footer-tagline { color: var(--slate-500); font-size: .95rem; max-width: 360px; margin-top: .75rem; }
.footer-cta { margin-top: 1.25rem; }
.footer-contact h4 { font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-400); margin-bottom: 1rem; }
.contact-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-radius: 16px; border: 1px solid var(--slate-200); background: var(--slate-50); margin-bottom: .75rem; }
.contact-row-info span { display: block; font-size: .78rem; color: var(--slate-500); margin-bottom: .15rem; }
.contact-row-info strong { font-size: .97rem; color: var(--navy); }
.social-row { display: flex; gap: 1rem; margin-top: 1.25rem; }
.social-row a { font-size: .88rem; font-weight: 600; color: var(--slate-500); }
.social-row a:hover { color: var(--green-dark); }
.footer-location { background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--radius-lg); padding: 1.25rem 1.35rem; margin-top: 1.5rem; display: flex; gap: .85rem; align-items: flex-start; }
.location-icon { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; background: rgba(16,185,129,.1); color: var(--green-dark); display: flex; align-items: center; justify-content: center; }
.location-text strong { display: block; font-size: .95rem; margin-bottom: .2rem; }
.location-text span { color: var(--slate-500); font-size: .88rem; }
.footer-bottom { background: var(--navy); color: rgba(255,255,255,.55); }
.footer-bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; min-height: 56px; font-size: .84rem; }
.footer-bottom a { color: rgba(255,255,255,.65); transition: color var(--trans); }
.footer-bottom a:hover { color: #fff; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .section, .section-sm { padding: 68px 0; }
  .nav-links, .nav-right .btn { display: none; }
  .nav-toggle { display: flex; }
  .contact-row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .wrap { width: calc(100% - 2rem); }
}
/* ==========================================================================
   VERITAS AUDIT & ADVISORY — COMPLETE THEME LAYER
   Generated 2026-08-14

   Paste this ENTIRE file at the very END of theme/assets/style.css.
   Do NOT replace style.css — this layer depends on the tokens and base
   styles defined above it.

   Contains, in order:
     1. Brand layer      — token overrides + components
     2. Patch 01         — centring, duplicate rule, hero alignment, hero image
     3. Patch 02         — hero without form, 5-card grid, split alignment
     4. Patch 03         — duplicate credentials removed, enquiry balance, mega menu
     5. Patch 04         — jurisdictions band

   Lives in theme/, so an engine upgrade never touches it.
   ========================================================================== */

/* ==========================================================================
   VERITAS AUDIT & ADVISORY — brand theme layer
   Append to the END of theme/assets/style.css.

   Part 1 re-points the base tokens at the Veritas palette, so the header,
   footer, buttons and news cards inherit the brand without being rewritten.
   Part 2 adds the components an audit firm's pages actually need.

   Lives in theme/, so an engine upgrade never touches it.
   ========================================================================== */

/* ==========================================================================
   PART 1 — TOKEN OVERRIDES
   ========================================================================== */

:root {
  /* Sampled from the Illustrator source, not eyeballed. */
  --navy:        #002252;
  --navy-deep:   #001838;
  --navy-soft:   rgba(0, 34, 82, .06);

  /* The logo's gold is a gradient; this is the solid working value. */
  --green:       #C9A24A;   /* the base theme's accent token, re-pointed to gold */
  --green-dark:  #A6822F;
  --gold:        #C9A24A;
  --gold-deep:   #A6822F;
  --gold-light:  #E9C157;
  --gold-soft:   rgba(201, 162, 74, .12);

  /* Warm neutrals. The base slates are blue-cast and fight the gold. */
  --slate-50:    #F8F7F4;
  --slate-100:   #F1EFEA;
  --slate-200:   #E3E0D8;
  --slate-400:   #9A958A;
  --slate-500:   #6E6A61;
  --slate-600:   #4A4740;
  --slate-700:   #2E2C28;

  /* Squared off. Pills read as consumer software; an audit firm needs edges. */
  --radius-xl:   6px;
  --radius-lg:   5px;
  --radius-md:   4px;
  --radius-pill: 3px;

  --shadow-sm:   0 2px 10px rgba(0, 34, 82, .06);
  --shadow-md:   0 8px 28px rgba(0, 34, 82, .09);
  --shadow-lg:   0 18px 48px rgba(0, 34, 82, .12);

  --serif:       "Source Serif 4", Georgia, "Times New Roman", serif;
  --rule:        1px solid var(--slate-200);
}

/* Headings go serif. Body stays Inter — serif body copy at 16px is a
   readability loss, and the contrast between the two is the point. */
h1, h2, h3, .prose h2, .prose h3 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.015em;
}
h1 { letter-spacing: -.02em; line-height: 1.12; }
h2 { line-height: 1.2; }

/* Eyebrows echo the letterspaced caps of "AUDIT & ADVISORY" in the logo. */
.eyebrow {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .74rem;
  color: var(--gold-deep);
}

/* --- Header: light ---------------------------------------------------------
   The wordmark is navy. On the base theme's navy header it is invisible.
   A white header is also simply the right register for this sector.          */
.site-header {
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--slate-200);
}
.nav { min-height: 88px; }
.brand-logo { height: 46px; }
.brand-text { color: var(--navy); font-family: var(--serif); font-weight: 600; letter-spacing: .02em; }
.nav-links > a, .nav-drop-toggle { color: var(--slate-600); font-weight: 500; font-size: .93rem; }
.nav-links > a:hover, .nav-drop-toggle:hover { color: var(--navy); }
.nav-links > a.is-active { color: var(--navy); font-weight: 600; position: relative; }
.nav-links > a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--gold);
}
.nav-toggle span { background: var(--navy); }
.mobile-menu { background: #fff; border-top: 1px solid var(--slate-200); }
.mobile-menu a { color: var(--slate-700); }
.mobile-menu .mobile-sub { color: var(--slate-500); }

/* --- Buttons --------------------------------------------------------------- */
.btn { height: 50px; font-weight: 600; letter-spacing: .01em; }
.btn-green { background: var(--navy); color: #fff; box-shadow: none; }
.btn-green:hover { background: var(--navy-deep); transform: translateY(-1px); }
.btn-gold { background: var(--gold); color: var(--navy); border-color: var(--gold); font-weight: 700; }
.btn-gold:hover { background: var(--gold-light); transform: translateY(-1px); }
.btn-outline-green { color: var(--navy); border-color: var(--slate-200); }
.btn-outline-green:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-ghost { border-color: rgba(255, 255, 255, .35); }

/* --- Base-theme leftovers that hardcoded the old green ---------------------- */
.location-icon { background: var(--gold-soft); color: var(--gold-deep); }
.post-card time, .post-header time, .post-more { color: var(--gold-deep); }
.prose blockquote { border-left-color: var(--gold); }
.prose a { color: var(--navy); text-decoration-color: var(--gold); }
:focus-visible { outline-color: var(--gold-deep); }

/* ==========================================================================
   PART 2 — COMPONENTS
   ========================================================================== */

/* --- Signature: the gold rule ----------------------------------------------
   Lifted from the logo, where a tapered gold line flanks "AUDIT & ADVISORY".
   Used as a section divider and under headings. Nothing else is gold-lined.  */
.rule-gold {
  width: 64px; height: 2px; margin-bottom: 1.5rem;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold-deep));
}
.rule-gold--center { margin-inline: auto; }
.rule-gold--flanked {
  display: flex; align-items: center; gap: 1rem; width: 100%;
  background: none; height: auto; margin-bottom: 1.25rem;
}
.rule-gold--flanked::before, .rule-gold--flanked::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.bg-navy .rule-gold, .hero-dark .rule-gold { background: linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold-deep)); }

/* --- Hero ------------------------------------------------------------------ */
.hero {
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
  padding: 96px 0 84px;
  position: relative; overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items: center; }
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); color: var(--navy); }
.hero .lead { color: var(--slate-600); max-width: 54ch; font-size: 1.08rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.25rem; }

/* Dark variant for the homepage, if the client wants more gravitas. */
.hero-dark { background: var(--navy); border-bottom: none; }
.hero-dark h1, .hero-dark .brand-text { color: #fff; }
.hero-dark .lead { color: rgba(255, 255, 255, .74); }
.hero-dark .eyebrow { color: var(--gold-light); }

/* Compact hero for inner pages. */
.hero--inner { padding: 64px 0 56px; }
.hero--inner h1 { font-size: clamp(2rem, 3.4vw, 2.8rem); }

/* --- Credential strip -------------------------------------------------------
   For a UAE audit firm, registration numbers are the strongest trust signal
   on the page. Give them real estate, not a footer footnote.                  */
.credbar { background: #fff; border-bottom: 1px solid var(--slate-200); padding: 22px 0; }
.credbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem 2.5rem; }
.cred {
  display: flex; align-items: center; gap: .6rem;
  font-size: .84rem; color: var(--slate-600); font-weight: 500;
}
.cred svg { color: var(--gold-deep); flex-shrink: 0; }
.cred strong { color: var(--navy); font-weight: 700; }
.cred + .cred { position: relative; }
.cred + .cred::before {
  content: ""; position: absolute; left: -1.25rem; top: 50%; transform: translateY(-50%);
  width: 1px; height: 18px; background: var(--slate-200);
}

/* --- Pillar cards (the five business units) --------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.pillar {
  display: flex; flex-direction: column; gap: .85rem;
  background: #fff; border: var(--rule); border-radius: var(--radius-lg);
  padding: 2rem 1.75rem; position: relative;
  transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}
.pillar::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gold); opacity: 0; transition: opacity var(--trans);
}
.pillar:hover { border-color: var(--slate-200); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.pillar:hover::before { opacity: 1; }
.pillar-icon {
  width: 46px; height: 46px; border-radius: var(--radius-md);
  background: var(--navy-soft); color: var(--navy);
  display: flex; align-items: center; justify-content: center; margin-bottom: .35rem;
}
.pillar h3 { font-size: 1.22rem; color: var(--navy); margin: 0; }
.pillar p { color: var(--slate-600); font-size: .94rem; margin: 0; }
.pillar-lines { margin-top: .5rem; padding-top: .9rem; border-top: var(--rule); }
.pillar-lines li {
  font-size: .88rem; color: var(--slate-600);
  padding: .3rem 0 .3rem 1.1rem; position: relative;
}
.pillar-lines li::before {
  content: ""; position: absolute; left: 0; top: .95em;
  width: 5px; height: 1px; background: var(--gold-deep);
}
.pillar-more { margin-top: auto; padding-top: 1.1rem; font-weight: 600; font-size: .88rem; color: var(--navy); }
.pillar-more::after { content: " \2192"; color: var(--gold-deep); }

/* --- Service line list (within a pillar page) -------------------------------- */
.servicelist { border-top: var(--rule); }
.serviceline {
  display: grid; grid-template-columns: 280px 1fr; gap: 2.5rem;
  padding: 2rem 0; border-bottom: var(--rule);
}
.serviceline h3 { font-size: 1.24rem; color: var(--navy); margin: 0 0 .5rem; }
.serviceline .eyebrow { display: block; margin-bottom: .5rem; }
.serviceline p { color: var(--slate-600); font-size: .97rem; margin: 0; }
.serviceline-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }

.tag {
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  padding: .3rem .65rem; border-radius: var(--radius-md);
  background: var(--slate-100); color: var(--slate-600);
}
.tag--gold { background: var(--gold-soft); color: var(--gold-deep); }
.tag--navy { background: var(--navy-soft); color: var(--navy); }

/* --- Authority band --------------------------------------------------------- */
.authband { background: var(--navy); color: #fff; }
.authgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2.5rem; }
.authgrid > div { text-align: center; }
.authgrid strong {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1; color: #fff;
}
.authgrid span { display: block; margin-top: .65rem; font-size: .84rem; color: rgba(255, 255, 255, .58); letter-spacing: .02em; }

/* --- Engagement steps ------------------------------------------------------- */
.steps { counter-reset: step; }
.step { display: grid; grid-template-columns: 52px 1fr; gap: 1.5rem; padding: 1.6rem 0; border-bottom: var(--rule); }
.step:last-child { border-bottom: none; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--gold-deep);
  width: 44px; height: 44px; border: 1px solid var(--gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.step h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.step p { color: var(--slate-600); font-size: .95rem; margin: 0; }

/* --- People ----------------------------------------------------------------- */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; }
.person { text-align: left; }
.person-photo {
  aspect-ratio: 3 / 4; width: 100%; border-radius: var(--radius-lg);
  background: var(--slate-100); overflow: hidden; margin-bottom: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--slate-400); font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person h3 { font-size: 1.12rem; margin: 0 0 .15rem; color: var(--navy); }
.person-role { font-size: .84rem; color: var(--gold-deep); font-weight: 600; letter-spacing: .04em; }
.person p { font-size: .92rem; color: var(--slate-600); margin-top: .7rem; }

/* --- Deadline / notice ------------------------------------------------------- */
.notice {
  border-left: 3px solid var(--gold);
  background: var(--gold-soft);
  padding: 1.15rem 1.4rem;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: .95rem; color: var(--slate-700);
}
.notice strong { color: var(--navy); }
.notice--navy { border-left-color: var(--navy); background: var(--navy-soft); }

/* --- FAQ --------------------------------------------------------------------- */
.faq { border-top: var(--rule); }
.faq details { border-bottom: var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 1.4rem 2.5rem 1.4rem 0;
  font-family: var(--serif); font-weight: 600; font-size: 1.06rem; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--gold-deep); border-bottom: 1.5px solid var(--gold-deep);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--trans);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 2.5rem 1.4rem 0; color: var(--slate-600); font-size: .96rem; margin: 0; }

/* --- Enquiry form ------------------------------------------------------------
   Field names must stay name / email / phone / message to match
   process_form.php. Anything extra is folded into the message body.           */
.enquiry {
  background: #fff; border: var(--rule); border-radius: var(--radius-lg);
  padding: 2.25rem; box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--slate-600); margin-bottom: .45rem; }
.field input, .field textarea, .field select {
  width: 100%; font-family: inherit; font-size: .97rem; color: var(--navy);
  padding: .8rem 1rem; border: 1px solid var(--slate-200); border-radius: var(--radius-md);
  background: #fff; transition: border-color var(--trans), box-shadow var(--trans);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .82rem; color: var(--slate-500); margin-top: .9rem; }
.form-alert { padding: .9rem 1.1rem; border-radius: var(--radius-md); font-size: .92rem; font-weight: 600; margin-bottom: 1.25rem; }
.form-alert--ok  { background: var(--gold-soft); color: var(--gold-deep); }
.form-alert--bad { background: rgba(190, 40, 40, .08); color: #9B1C1C; }

/* --- Contact rows ------------------------------------------------------------ */
.contact-list { display: grid; gap: .85rem; }
.contact-item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.15rem 1.25rem; border: var(--rule); border-radius: var(--radius-md); background: #fff;
}
.contact-item svg { color: var(--gold-deep); flex-shrink: 0; margin-top: 2px; }
.contact-item span { display: block; font-size: .78rem; color: var(--slate-500); letter-spacing: .04em; }
.contact-item strong { display: block; font-size: .98rem; color: var(--navy); margin-top: .15rem; }

/* --- CTA band ---------------------------------------------------------------- */
.ctaband { background: var(--navy); color: #fff; text-align: center; }
.ctaband h2 { color: #fff; font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.ctaband p { color: rgba(255, 255, 255, .7); max-width: 56ch; margin: 0 auto; }
.ctaband .hero-actions { justify-content: center; margin-top: 2rem; }

/* --- Split ------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.split--reverse .split-media { order: 2; }
.split-media img { width: 100%; border-radius: var(--radius-lg); }
.split-media--empty {
  aspect-ratio: 4 / 3; border-radius: var(--radius-lg);
  background: var(--slate-100); border: 1px dashed var(--slate-200);
  display: flex; align-items: center; justify-content: center;
  color: var(--slate-400); font-size: .76rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}

/* --- Utilities ---------------------------------------------------------------- */
.stack-sm > * + * { margin-top: .75rem; }
.stack    > * + * { margin-top: 1.25rem; }
.center { text-align: center; }
.center .section-intro { margin-inline: auto; }
.center .rule-gold { margin-inline: auto; }

/* --- Responsive ---------------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero-grid, .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .split--reverse .split-media { order: 0; }
  .serviceline { grid-template-columns: 1fr; gap: .75rem; }
}
@media (max-width: 768px) {
  .hero { padding: 64px 0 56px; }
  .field-row { grid-template-columns: 1fr; }
  .enquiry { padding: 1.5rem; }
  .step { grid-template-columns: 42px 1fr; gap: 1rem; }
  .credbar-inner { gap: 1rem 1.5rem; }
  .cred + .cred::before { display: none; }
  .brand-logo { height: 38px; }
  .nav { min-height: 72px; }
}


/* ==========================================================================
   VERITAS — PATCH 01
   Append to the END of theme/assets/style.css, after the Veritas layer.
   Fixes centering, the duplicated gold mark, and hero alignment.
   Adds hero background image support.
   ========================================================================== */

/* --- Fix 1: centred section intros --------------------------------------
   Base sets .section-intro { max-width: 720px } with no auto margin, so the
   box stays pinned left even when its text is centred. Both selector forms
   are covered: .center on the intro itself, or on an ancestor.            */
.section-intro.center,
.center .section-intro { margin-inline: auto; }
.section-intro.center .rule-gold,
.center .rule-gold { margin-inline: auto; }

/* --- Fix 2: one gold mark, not two ---------------------------------------
   Base .eyebrow::before draws a 24px dash. Where a .rule-gold already sits
   directly above, suppress the dash so only one mark shows.               */
.rule-gold + .eyebrow::before { display: none; }

/* Standard order everywhere: rule, then eyebrow, then heading. */
.rule-gold + .eyebrow { margin-top: -.35rem; }

/* --- Fix 3: hero vertical alignment --------------------------------------
   The callback card is much taller than the left column, so centring pushed
   the headline down. Align to the top and let the card run long.          */
.hero-grid { align-items: start; }
.hero-grid > .enquiry { margin-top: -.5rem; }

@media (max-width: 1080px) {
  .hero-grid > .enquiry { margin-top: 0; }
}

/* ==========================================================================
   HERO BACKGROUND IMAGE
   Add class "hero--image" alongside "hero" and set the URL inline:
   <section class="hero hero--image" style="--hero-img:url('/uploads/hero.webp')">
   ========================================================================== */

.hero--image {
  background-color: var(--navy);
  border-bottom: none;
  isolation: isolate;
}
.hero--image::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center 40%;
}
/* Navy wash: keeps white text legible over any photograph, and pulls the
   image into the brand palette rather than fighting it. */
.hero--image::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(0,24,56,.94) 0%, rgba(0,34,82,.86) 42%, rgba(0,34,82,.55) 72%, rgba(0,34,82,.35) 100%);
}
.hero--image > * { position: relative; z-index: 1; }

.hero--image h1 { color: #fff; }
.hero--image .lead { color: rgba(255,255,255,.78); }
.hero--image .eyebrow { color: var(--gold-light); }
.hero--image .rule-gold { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.hero--image .btn-outline-green { color: #fff; border-color: rgba(255,255,255,.4); }
.hero--image .btn-outline-green:hover { background: #fff; color: var(--navy); border-color: #fff; }

/* The callback card stays white and opaque — a glass card over a photo hurts
   form legibility, and this is the page's main conversion point. */
.hero--image .enquiry { box-shadow: var(--shadow-lg); }

/* On narrow screens the gradient goes vertical so the headline keeps its
   dark backing regardless of where the photo's subject sits. */
@media (max-width: 1080px) {
  .hero--image::after {
    background: linear-gradient(180deg, rgba(0,24,56,.92) 0%, rgba(0,34,82,.88) 60%, rgba(0,34,82,.92) 100%);
  }
  .hero--image::before { background-position: center 35%; }
}

/* Optional: very slow drift. Disabled for reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
  .hero--image::before { animation: heroDrift 28s ease-in-out infinite alternate; }
}
@keyframes heroDrift {
  from { transform: scale(1.04) translate3d(0,0,0); }
  to   { transform: scale(1.10) translate3d(-1.2%,-1%,0); }
}


/* ==========================================================================
   VERITAS — PATCH 02
   Append after PATCH 01.
   - Hero without the callback form
   - Five-card pillar grid (3 + 2, no orphan)
   - Split section alignment
   - Standalone enquiry section for lower down the page
   ========================================================================== */

/* --- Hero: single column ---------------------------------------------------
   Use class "hero-solo" in place of the two-column grid. The text block is
   capped so the skyline stays visible on the right at desktop widths.       */
.hero-solo {
  display: block;
  max-width: 660px;
  padding: 2rem 0 1rem;
}
.hero--image .hero-solo h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
.hero--image .hero-solo .lead { max-width: 52ch; font-size: 1.12rem; }

/* Taller hero so the photograph has room to read as an image, not a strip. */
.hero--image { padding: 128px 0 112px; }

/* Trust points sit under the buttons — the credential bar's headline facts,
   surfaced before the fold without a form. */
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 1.25rem 2.25rem;
  margin-top: 3rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.16);
}
.hero-trust div { display: flex; flex-direction: column; gap: .2rem; }
.hero-trust strong {
  font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: #fff;
}
.hero-trust span {
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

@media (max-width: 768px) {
  .hero--image { padding: 88px 0 72px; }
  .hero-trust { gap: 1rem 1.75rem; margin-top: 2rem; }
}

/* --- Pillar grid: five cards, no orphan ------------------------------------
   auto-fit leaves a lone card stranded on row two. A six-column track with
   spans gives 3 on top and 2 below, both rows full width.                   */
@media (min-width: 1081px) {
  .pillars--five {
    grid-template-columns: repeat(6, 1fr);
  }
  .pillars--five > .pillar { grid-column: span 2; }
  .pillars--five > .pillar:nth-child(4),
  .pillars--five > .pillar:nth-child(5) { grid-column: span 3; }

  /* The two wider cards get their lists in two columns so they don't run tall
     and empty next to the three above. */
  .pillars--five > .pillar:nth-child(4) .pillar-lines,
  .pillars--five > .pillar:nth-child(5) .pillar-lines {
    columns: 2; column-gap: 1.75rem;
  }
  .pillars--five > .pillar:nth-child(4) .pillar-lines li,
  .pillars--five > .pillar:nth-child(5) .pillar-lines li {
    break-inside: avoid;
  }
}

/* Two-across at tablet, one at phone. */
@media (min-width: 641px) and (max-width: 1080px) {
  .pillars--five { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pillars--five { grid-template-columns: 1fr; }
}

/* --- Split: align to the top ------------------------------------------------
   Centring floated the media box against a tall steps column. Top alignment
   keeps the heading and the image starting on the same line.                */
.split { align-items: start; }
.split-media { position: sticky; top: 110px; }

@media (max-width: 1080px) {
  .split-media { position: static; }
}

/* --- Standalone enquiry section ---------------------------------------------
   The form's new home, lower down the page where intent is higher.          */
.enquiry-section { background: var(--slate-50); }
.enquiry-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 4rem; align-items: start; }
.enquiry-grid .enquiry { padding: 2.5rem; }

@media (max-width: 1080px) {
  .enquiry-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}


/* ==========================================================================
   VERITAS — PATCH 03
   Append after PATCH 02.
   - Retires the hero trust points (duplicated by the credential bar)
   - Rebalances the enquiry section so the left column isn't hollow
   ========================================================================== */

/* --- Fix 1: no duplicate credentials ---------------------------------------
   The credential bar directly below the hero already carries these numbers.
   Repeating them 200px apart weakens both. Kept in the stylesheet rather
   than deleted, in case the bar is ever removed.                            */
.hero-trust { display: none; }

/* --- Fix 2: enquiry section balance ----------------------------------------
   The form column ran far taller than the FAQ column, leaving dead space to
   its left. Contact details move into the left column, and the form sticks
   as you scroll past.                                                       */
.enquiry-grid { grid-template-columns: 1fr .95fr; gap: 4rem; }
.enquiry-grid > div:last-child { position: sticky; top: 110px; }

.enquiry-contact { margin-top: 2.5rem; padding-top: 2rem; border-top: var(--rule); }
.enquiry-contact .contact-list { margin-top: 1.25rem; }

@media (max-width: 1080px) {
  .enquiry-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .enquiry-grid > div:last-child { position: static; }
}

/* --- Compact contact rows ---------------------------------------------------
   Full-width cards for three short lines wasted vertical space.             */
.contact-list { grid-template-columns: 1fr; gap: .6rem; }
.contact-item { padding: .9rem 1.1rem; align-items: center; }
.contact-item strong { font-size: .93rem; line-height: 1.45; }

/* ==========================================================================
   MEGA MENU
   Renders inside the existing .nav-drop markup, so nav_tree() is untouched.
   Add class "nav-drop--mega" to the Services dropdown in header.php.
   ========================================================================== */

.nav-drop--mega .nav-drop-menu {
  left: 50%; transform: translateX(-50%);
  min-width: min(1100px, calc(100vw - 4rem));
  padding: 2rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.mega-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.75rem; }
.mega-col { min-width: 0; }
.mega-col > a.mega-head {
  display: block; padding: 0 0 .6rem;
  font-family: var(--serif); font-size: .98rem; font-weight: 600; color: var(--navy);
  border-bottom: 2px solid var(--gold); margin-bottom: .65rem;
}
.mega-col > a.mega-head:hover { background: none; color: var(--gold-deep); }
.mega-col ul li a {
  display: block; padding: .4rem .5rem .4rem 0;
  font-size: .85rem; font-weight: 500; color: var(--slate-600); border-radius: 3px;
}
.mega-col ul li a:hover { color: var(--navy); background: var(--slate-50); padding-left: .4rem; }

.mega-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: var(--rule);
}
.mega-foot p { font-size: .86rem; color: var(--slate-500); margin: 0; }

@media (max-width: 1080px) {
  .mega-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ==========================================================================
   VERITAS — PATCH 04
   Append after PATCH 03. Replaces the stat band with a jurisdictions band.
   ========================================================================== */

.jurisband { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.jurisband::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(680px 320px at 88% 0%, rgba(201,162,74,.13), transparent 62%);
}
.jurisband > * { position: relative; z-index: 1; }

.juris-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3.5rem; align-items: center; }
.jurisband h2 { color: #fff; font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.jurisband .eyebrow { color: var(--gold-light); }
.jurisband .lead { color: rgba(255,255,255,.68); font-size: 1rem; }
.jurisband .rule-gold { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }

.juris-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; }
.juris {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-md);
  padding: 1rem .9rem;
  background: rgba(255,255,255,.03);
  transition: border-color var(--trans), background var(--trans), transform var(--trans);
}
.juris:hover {
  border-color: rgba(201,162,74,.55);
  background: rgba(201,162,74,.07);
  transform: translateY(-2px);
}
.juris strong {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: 1.02rem; color: #fff; letter-spacing: .01em;
}
.juris span {
  display: block; margin-top: .3rem;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.juris--mainland span { color: var(--gold-light); }

.juris-note {
  margin-top: 1.5rem; font-size: .87rem; color: rgba(255,255,255,.55);
}
.juris-note a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1080px) {
  .juris-layout { grid-template-columns: 1fr; gap: 2.25rem; }
  .juris-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .juris-grid { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
  .juris { padding: .85rem .8rem; }
  .juris strong { font-size: .95rem; }
}

/* ==========================================================================
   VERITAS — PATCH 05
   Append after PATCH 04. Adds nothing visual; fixes anchor landing position.

   The mega menu links to service-line anchors, e.g.
   /services/taxation-compliance#corporate-tax

   .site-header is sticky at min-height 88px, and html has scroll-behavior:
   smooth. Without a scroll margin the browser scrolls the target to y=0,
   which parks the heading *behind* the header — the link looks broken even
   though it worked. scroll-margin-top offsets the landing point only; it has
   no effect on layout or on normal scrolling.

   Purely additive: no existing rule is modified.
   ========================================================================== */

.serviceline[id],
.servicelist[id],
section[id] {
  scroll-margin-top: 110px;
}

@media (max-width: 768px) {
  /* .nav drops to min-height 72px at this breakpoint. */
  .serviceline[id],
  .servicelist[id],
  section[id] {
    scroll-margin-top: 92px;
  }
}

/* ==========================================================================
   VERITAS — PATCH 06
   Append after PATCH 05. Styles the named image placeholders.

   .split-media--empty and .person-photo already centre their contents with
   flex. The placeholders now carry two lines — the exact filename to upload
   and the aspect ratio the CSS enforces — so the box needs a column axis.

   These rules only ever apply to a box that is still empty. Replace the
   placeholder with a real <img> and none of this matters.
   ========================================================================== */

.split-media--empty,
.person-photo:not(:has(img)) {
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem;
  text-align: center;
}

.ph-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--slate-500, #64748b);
  word-break: break-all;
  line-height: 1.35;
}

.ph-hint {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-400, #94a3b8);
}

/* :has() is unsupported on older browsers; the fallback simply leaves the
   photo boxes centred as before, which is harmless. */
@supports not (selector(:has(img))) {
  .person-photo { flex-direction: column; gap: 0.35rem; text-align: center; }
}


/* ==========================================================================
   VERITAS — PATCH 07
   Append to the END of theme/assets/style.css, after PATCH 06.

   Contains, in order:
     1. Vertical rhythm        — fluid section padding, tighter intros
     2. Prose split            — fixes the half-empty text sections
     3. Enquiry sticky fix     — repairs the no-op sticky from PATCH 03
     4. Jurisdictions scoping  — fixes white-on-cream chips on /about
     5. Mega menu              — container alignment + head baselines
     6. Map embed              — building pin with own-brand label card
     7. Footer                 — four-column structure + regs block
     8. Mobile corrections     — contact rows, hero motion

   Purely additive except where noted; no earlier rule is edited in place.
   ========================================================================== */


/* ==========================================================================
   1. VERTICAL RHYTHM
   96px fixed padding was set for pages with more copy than these have. Fluid
   padding keeps the airiness at 1440 and removes the drift at 1200 and below.
   Note: this deliberately overrides the base 768px rule (padding: 68px 0).
   It wins on source order, not specificity — keep it after that block.
   ========================================================================== */

:root {
  --section-y:    clamp(3.75rem, 6.5vw, 6rem);
  --section-y-sm: clamp(3rem, 5vw, 4.5rem);
  --stick-top:    110px;          /* .nav min-height 88 + breathing room */
}

.section    { padding: var(--section-y) 0; }
.section-sm { padding: var(--section-y-sm) 0; }

/* Inner-page heroes carry one heading and one paragraph. 64/56 was generous. */
.hero--inner { padding: clamp(2.75rem, 5vw, 3.5rem) 0 clamp(2.25rem, 4vw, 3rem); }

/* 3.5rem between an intro and its content reads as a gap, not a pause. */
.section-intro { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }

@media (max-width: 768px) {
  :root { --stick-top: 92px; }    /* .nav drops to 72px here */
}


/* ==========================================================================
   2. PROSE SPLIT
   For sections that are heading + body copy and nothing else. Previously
   these used .section-intro (max-width 720) above a .stack (max-width 760),
   both pinned left inside a 1200px wrap — so the right 40% sat empty.

   This borrows the .serviceline rhythm: label column left, content right.

   HTML change required (see notes file):
     <div class="wrap">            ->  <div class="wrap prose-split">
     <div class="stack" style="max-width:760px">  ->  <div class="stack">
   ========================================================================== */

.prose-split {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* The heading block tracks the copy on long sections. */
.prose-split > .section-intro {
  margin-bottom: 0;
  position: sticky;
  top: var(--stick-top);
}

.prose-split > .stack { max-width: 68ch; }

@media (max-width: 900px) {
  .prose-split { grid-template-columns: 1fr; gap: 1.5rem; }
  .prose-split > .section-intro { position: static; }
}


/* ==========================================================================
   3. ENQUIRY STICKY FIX
   PATCH 03 made the last grid column sticky, but PATCH 02 had already set
   align-items:start on .enquiry-grid — which sizes each item to its content,
   leaving a sticky element with no travel inside its own containing block.
   The rule never fired, and the form column stranded ~600px of dead space.

   Correct arrangement: let the column stretch to the grid's full height,
   then stick the form *within* it.
   ========================================================================== */

.enquiry-grid { align-items: stretch; }

.enquiry-grid > div:last-child { position: static; }

.enquiry-grid > div:last-child > .enquiry {
  position: sticky;
  top: var(--stick-top);
}

@media (max-width: 1080px) {
  .enquiry-grid { align-items: start; }
  .enquiry-grid > div:last-child > .enquiry { position: static; }
}


/* ==========================================================================
   4. JURISDICTIONS — SCOPING
   .juris carried white text and rgba(255,255,255) borders at the top level,
   while only .jurisband supplied the navy behind it. Dropped into any light
   section (as on /about) the chips rendered white-on-cream — invisible.

   Ownership inverted: light is the default, .jurisband re-darkens.
   ========================================================================== */

.juris {
  border: 1px solid var(--slate-200);
  background: #fff;
}
.juris strong { color: var(--navy); }
.juris span   { color: var(--slate-500); }
.juris--mainland span { color: var(--gold-deep); }
.juris:hover {
  border-color: var(--gold);
  background: var(--gold-soft);
  transform: translateY(-2px);
}

/* Dark context wins on specificity (0,2,0 over 0,1,0). */
.jurisband .juris {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .03);
}
.jurisband .juris strong { color: #fff; }
.jurisband .juris span   { color: rgba(255, 255, 255, .45); }
.jurisband .juris--mainland span { color: var(--gold-light); }
.jurisband .juris:hover {
  border-color: rgba(201, 162, 74, .55);
  background: rgba(201, 162, 74, .07);
}


/* ==========================================================================
   5. MEGA MENU
   Was centred on the Services toggle, which sits left of the container
   centre — so a 1100px panel hung past the right edge of .wrap. Anchoring
   to the nav bar itself aligns it to the same gutters as the page.
   ========================================================================== */

.wrap.nav { position: relative; }
.nav-drop--mega { position: static; }

.nav-drop--mega .nav-drop-menu {
  left: 0;
  right: 0;
  width: 100%;
  min-width: 0;
  transform: none;
  padding: 1.75rem 2rem 1.5rem;
}

/* "Accounting & Operations" wraps to two lines; without a floor its gold rule
   and first link drop below the other four columns. */
.mega-grid { align-items: start; }
.mega-col > a.mega-head {
  display: flex;
  align-items: flex-end;
  min-height: 2.85em;
}

/* Keyboard parity: the dropdown opens on click via theme.js, but tabbing into
   it should reveal it too. */
.nav-drop:focus-within .nav-drop-menu { display: block; }


/* ==========================================================================
   6. MAP EMBED
   Titanium Tower (SBK) Burjuman — 25.2496896, 55.3021104.
   No Google Business Profile exists yet, so the pin carries the building's
   name, not the firm's. The label card supplies the firm's own detail over
   the top. Replace with a place-based embed once the listing is verified.
   ========================================================================== */

.map-embed {
  position: relative;
  border: var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--slate-100);
}
.map-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  filter: saturate(.92);
}

.map-card {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  max-width: min(340px, calc(100% - 2rem));
  padding: .95rem 1.1rem;
  background: rgba(255, 255, 255, .97);
  border: var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.map-card strong {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1rem;
  color: var(--navy);
}
.map-card span {
  display: block;
  margin-top: .3rem;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--slate-600);
}
.map-card a {
  display: inline-block;
  margin-top: .6rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}

/* Overlaying a card on a small map hides the map. Below it instead. */
@media (max-width: 640px) {
  .map-embed iframe { aspect-ratio: 4 / 3; }
  .map-card {
    position: static;
    max-width: none;
    border: 0;
    border-top: var(--rule);
    border-left: 3px solid var(--gold);
    border-radius: 0;
    box-shadow: none;
    background: #fff;
  }
}

/* Full-bleed map at the foot of the contact section. */
.map-section { padding-top: 0; }


/* ==========================================================================
   7. FOOTER
   Two columns carrying six facts and no navigation. Four columns: firm,
   services, company, contact — with the registration numbers given a home.
   ========================================================================== */

.footer-top { background: var(--slate-50); border-top: 1px solid var(--slate-200); }

.footer-grid {
  grid-template-columns: 1.5fr .9fr .9fr 1.3fr;
  gap: 2.5rem 3rem;
}

.footer-brand-col { min-width: 0; }
.footer-tagline { max-width: 34ch; }

/* Column headings — matches .footer-contact h4, applied to the nav columns. */
.footer-nav h4,
.footer-contact h4 {
  font-family: "Inter", sans-serif;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1.1rem;
}

.footer-nav ul { display: grid; gap: .1rem; }
.footer-nav ul li a {
  display: block;
  padding: .38rem 0;
  font-size: .89rem;
  color: var(--slate-600);
  transition: color var(--trans);
}
.footer-nav ul li a:hover { color: var(--navy); }

/* The office block sits in the brand column; white on the new slate ground. */
.footer-location { background: #fff; }
.location-text span { line-height: 1.55; }

.contact-row { background: #fff; }

/* Registration numbers. For a licensed audit firm these are load-bearing
   trust signals, not fine print — but they belong at the foot, once. */
.footer-regs {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2rem;
  margin-top: .5rem;
  padding-top: 1.5rem;
  border-top: var(--rule);
  font-size: .8rem;
  color: var(--slate-500);
}
.footer-regs strong { color: var(--slate-700); font-weight: 600; }

.footer-bottom-inner { gap: 1rem 1.75rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }

@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-brand-col { grid-column: auto; }
  /* Nav columns compress to a two-across list so the footer doesn't become
     a 1,400px scroll on a phone. */
  .footer-nav ul { grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .footer-regs { gap: .4rem 1.25rem; }
}


/* ==========================================================================
   8. MOBILE CORRECTIONS
   ========================================================================== */

@media (max-width: 768px) {
  /* The base theme stacks these, which turned each row into a ~150px block
     and made the footer a long scroll. Keep them as rows. */
  .contact-row { flex-direction: row; align-items: center; }
  .contact-row-info strong { white-space: nowrap; }

  /* iOS linkifies bare numbers and addresses with its own styling. Suppress
     via <meta name="format-detection" content="telephone=no"> in header.php,
     and keep our own tel: links looking like ours. */
  .contact-row-info a { color: inherit; text-decoration: none; }
}

/* A 28s scaling background image is a continuous repaint. Cheap on desktop,
   not on a mid-range phone. */
@media (max-width: 768px) {
  .hero--image::before { animation: none; }
}


/* ==========================================================================
   9. FOOTER — office block additions (Patch 07a)
   Hours and the directions link are supplied by theme/nav-data.php, not by
   Settings — V1.29's settings form has no field for either.
   ========================================================================== */

.footer-directions {
  display: inline-block;
  margin-top: .5rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}
.footer-directions:hover { color: var(--gold-deep); }

.footer-hours {
  margin-top: .9rem;
  font-size: .85rem;
  color: var(--slate-500);
}

/* ==========================================================================
   VERITAS — PATCH 08
   Append to the END of theme/assets/style.css, after PATCH 07.

   Fixes three things found on the live implementation:

   A. The CMS page editor strips <svg> elements and style attributes when a
      page body is saved. That removed the hero background image, the credential
      bar check marks and all five pillar card icons. This patch moves all of
      them into CSS so page content never carries them again.

   B. PATCH 07's section padding clamp had an upper bound of 6rem — exactly the
      96px it was replacing. At desktop widths it changed nothing. Corrected.

   C. Footer proportions and CTA colour.

   Nothing here needs a page edit. The icon rules key off :empty, so if the
   SVGs are ever restored in the markup they take precedence automatically.
   ========================================================================== */


/* ==========================================================================
   A1. HERO IMAGE — no longer dependent on an inline style attribute
   The section still accepts style="--hero-img:url(...)" if the editor allows
   it; this is the fallback for when it does not.
   ========================================================================== */

.hero--image { --hero-img: url('/uploads/hero-skyline-2400.webp'); }

/* Guard: if the file is missing, the navy + gradient still reads correctly,
   so a 404 degrades to the current appearance rather than a broken box. */


/* ==========================================================================
   A2. CREDENTIAL BAR — check marks in CSS
   .cred contained <svg> + <span>. With the svg stripped, only the span remains.
   ========================================================================== */

.cred > span::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: .6rem;
  vertical-align: -2px;
  background: var(--gold-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* If the inline SVG is ever restored, stand down — no double icon. */
.cred > svg ~ span::before { display: none; }

/* Six credentials wrapped 5 + 1, orphaning "ICV Submission Support" on its own
   centred line. A three-column grid gives two even rows. */
@media (min-width: 900px) {
  .credbar-inner {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: center;
    gap: .85rem 2.75rem;
  }
  /* .cred + .cred::before draws the divider; suppress it at each row start. */
  .cred:nth-child(3n+1)::before { display: none; }
}


/* ==========================================================================
   A3. PILLAR ICONS — in CSS, keyed to card order
   .pillar-icon is now an empty div. :empty matches only the stripped case, so
   restoring the SVGs later disables these rules with no edit.
   ========================================================================== */

.pillar-icon:empty::before {
  content: "";
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}

/* 1 — Audit & Assurance: shield with check */
.pillars--five > .pillar:nth-child(1) .pillar-icon:empty {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 3.5v6c0 5-3.4 8.6-8 10.5-4.6-1.9-8-5.5-8-10.5v-6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}
/* 2 — Taxation & Compliance: filed document */
.pillars--five > .pillar:nth-child(2) .pillar-icon:empty {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6v20h12V6z'/%3E%3Cpath d='M14 2v4h4M9 13h6M9 17h6'/%3E%3C/svg%3E");
}
/* 3 — Corporate Finance: bar chart */
.pillars--five > .pillar:nth-child(3) .pillar-icon:empty {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M7 21V10M12 21V4M17 21v-7'/%3E%3C/svg%3E");
}
/* 4 — Accounting & Operations: ledger */
.pillars--five > .pillar:nth-child(4) .pillar-icon:empty {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3h16v18H4z'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E");
}
/* 5 — Corporate Services: building */
.pillars--five > .pillar:nth-child(5) .pillar-icon:empty {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V8l7-5 7 5v13'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E");
}


/* ==========================================================================
   B. VERTICAL RHYTHM — corrected
   PATCH 07 capped at 6rem, which is the 96px it replaced, so desktop was
   unchanged. Real ceiling now 4.75rem / 76px.
   ========================================================================== */

:root {
  --section-y:    clamp(2.75rem, 4.4vw, 4.75rem);
  --section-y-sm: clamp(2.25rem, 3.6vw, 3.75rem);
}

/* The hero carried 128/112px for a text block that lost .hero-trust and had
   nothing put back in its place. This is the single largest gap on the page. */
.hero--image { padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(3rem, 5vw, 4.5rem); }
.hero-solo   { padding: 0; }

/* .split gap of 4rem plus a sticky 4:3 media box left a tall empty right
   column under the image on the engagement sections. */
.split { gap: clamp(2rem, 3.5vw, 3.25rem); }

@media (max-width: 768px) {
  .hero--image { padding: clamp(3rem, 8vw, 4rem) 0 clamp(2.5rem, 6vw, 3.5rem); }
}


/* ==========================================================================
   C. FOOTER CORRECTIONS
   ========================================================================== */

/* The gold CTA competes with the header's Contact Us button and the gold
   column headings. Navy is the correct weight here — it was btn-green
   (which the brand layer renders navy) before Patch 07 changed it. */
.footer-cta.btn-gold {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.footer-cta.btn-gold:hover { background: var(--navy-deep); }

/* Column 1 was too narrow for the full address, which wrapped to four lines
   inside a cramped card while the nav columns floated in space. */
.footer-grid { grid-template-columns: 1.75fr .8fr .8fr 1.35fr; gap: 2.25rem 2.5rem; }
.footer-location { padding: 1.1rem 1.2rem; }
.location-text span { max-width: 30ch; }

/* Ensure the gold column headings win over the base theme's slate-400. */
.footer-top .footer-nav h4,
.footer-top .footer-contact h4 { color: var(--gold-deep); }

@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   VERITAS — PATCH 09
   Append to the END of theme/assets/style.css, after PATCH 08.

   Fixes the pillar icons still not appearing after PATCH 08.

   PATCH 08 keyed the icon rule off .pillar-icon:empty. CSS :empty fails if
   the element contains ANY child node — including a stray whitespace or
   newline text node. The page editor re-serialises HTML on save and, in
   stripping the <svg>, appears to leave <div class="pillar-icon">\n</div>
   rather than a truly empty tag. That whitespace alone is enough to make
   :empty never match, so the rule silently never fired.

   :not(:has(svg)) checks for the absence of an <svg> child specifically —
   whitespace around it doesn't matter. This is the same pattern PATCH 06
   already used for .person-photo; PATCH 08 should have matched it and didn't.

   Requires :has() support: Chrome 105+, Safari 15.4+, Firefox 121+ — all
   from 2022–2023, safe as a baseline in 2026.
   ========================================================================== */

.pillar-icon:not(:has(svg))::before {
  content: "";
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}

.pillars--five > .pillar:nth-child(1) .pillar-icon:not(:has(svg)) {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 3.5v6c0 5-3.4 8.6-8 10.5-4.6-1.9-8-5.5-8-10.5v-6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}
.pillars--five > .pillar:nth-child(2) .pillar-icon:not(:has(svg)) {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6v20h12V6z'/%3E%3Cpath d='M14 2v4h4M9 13h6M9 17h6'/%3E%3C/svg%3E");
}
.pillars--five > .pillar:nth-child(3) .pillar-icon:not(:has(svg)) {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M7 21V10M12 21V4M17 21v-7'/%3E%3C/svg%3E");
}
.pillars--five > .pillar:nth-child(4) .pillar-icon:not(:has(svg)) {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3h16v18H4z'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E");
}
.pillars--five > .pillar:nth-child(5) .pillar-icon:not(:has(svg)) {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V8l7-5 7 5v13'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E");
}

.hero--image { --hero-img: url('/uploads/hero-skyline-2400.webp') !important; }