/*
Theme Name: Bismay Dash & Associates
Theme URI: https://bismaydash.com/
Author: Bismay Dash & Associates
Description: Emerald Ivory — Modern Legal Elegance. SEO-preserving WordPress theme for Bismay Dash & Associates. Lightweight, accessible, Rank Math-compatible, locally hosted Cormorant Garamond + Inter, no jQuery or framework dependencies. Preserves all content types, URLs and customizer data. — v4.8.0: CWV polish (LCP fetchpriority, emoji cleanup), WCAG upgrades (dialog semantics, focus trap, form validation), AEO (Person/speakable schema, llms.txt), CRO micro-interactions.
Version: 4.9.150
Reverted: v4.9.85 — the v4.9.82 / v4.9.83 / v4.9.84 button recolours
(pale blue, then royal blue) are DISCARDED. Buttons are exactly as in v4.9.81:
gold-outlined secondary buttons, white/gold header pills, neutral Menu toggle.
Requires at least: 5.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: bismay-dash
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, blog

This theme is a complete frontend rebuild of the Bismaya Dash theme.
*/

/* =========================================================
   TABLE OF CONTENTS
   01. Design tokens
   02. Reset & base
   03. Typography
   04. Layout utilities
   05. Buttons, links, labels
   06. Header & navigation
   07. Hero (front page)
   08. Page banner (interior pages)
   09. Sections & cards
   10. Team
   11. Article / long-form reading
   12. Legal content components
   13. Tables
   14. Forms
   15. Footer
   16. Archives, search, pagination
   17. Comments
   18. Misc (404, utilities, go-top)
   19. Motion & reveal
   20. Responsive rules
   ========================================================= */

/* ---------------------------------------------------------
   01. DESIGN TOKENS
   --------------------------------------------------------- */
:root {
    /* Emerald Ivory palette — pearl/cream grounds, emerald identity,
       soft gold used sparingly for premium detailing. */
    --paper:        #FAFAF7;   /* Pearl White */
    --ivory:        #F3EFE3;   /* Cream / Ivory */
    --warm-ivory:   #F3EFE3;
    --cream:        #EDE7D7;
    --champagne:    #E3DECE;

    --gold:         #145A43;   /* Emerald Green — the firm's identity colour */
    --gold-deep:    #104532;   /* Deep Emerald — text & dark surfaces */
    --gold-soft:    #C2A56B;   /* Soft Gold — fine accents, rules, borders only */
    --gold-line:    #96794A;   /* v4.9.109 - control outlines; 3.9:1 on paper */
    --gold-faint:   #EAF0EC;   /* faint emerald wash for hovers & chips */

    --charcoal:     #303532;
    --ink:          #303532;
    --body:         #3A403C;
    --muted:        #5C6660;
    --line:         #E5E1D5;
    --line-dark:    #D9D4C4;

    --accent:       #145A43;   /* Emerald Green */
    --accent-dark:  #104532;   /* Deep Emerald */

    /* Multi-tone emerald ramp for subtle gradients (primary CTAs only) */
    --emerald-light:  #58A889;
    --emerald-bright: #23845F;
    --emerald:        #145A43;
    --emerald-deep:   #104532;
    --emerald-shadow: #082D23;
    --pastel-blue:    #DCEAF2;
    --light-yellow:   #F8F1C9;

    --ok:            #2e6b3f;
    --error:         #9c2b2b;

    /* Fonts (locally hosted, variable) */
    --font-serif: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    /* Type scale */
    --fs-xs:   0.78rem;
    --fs-sm:   0.875rem;
    --fs-base: 1.0625rem;
    --fs-md:   1.1875rem;
    --fs-lg:   clamp(1.35rem, 1.1rem + 1vw, 1.6rem);
    --fs-xl:   clamp(1.8rem, 1.35rem + 1.8vw, 2.65rem);
    --fs-hero: clamp(2.4rem, 1.62rem + 3.7vw, 4.45rem);

    /* Rhythm */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.25rem;
    --space-5: 3.5rem;
    --space-6: 5rem;
    --space-7: clamp(4rem, 8vw, 7.5rem);

    --container: 1200px;
    --measure:  44rem;      /* ~72 chars reading measure */
    --radius:   5px;         /* buttons & inputs 5px, cards 6–8px */
    --shadow:   0 1px 2px rgba(32, 29, 23, 0.05), 0 10px 30px -18px rgba(32, 29, 23, 0.25);

    /* ---- Foundations (v4.9.100) --------------------------------------
       Added so that a later pass can change a value once, in one place.
       Radius:      exactly three — control, card, pill. Nothing else.
       Elevation:   exactly two — resting, raised.
       Breakpoints: four — 560 (phone), 768 (tablet portrait),
                    1024 (tablet landscape / small laptop), 1200 (container).
       Every value below matches what the stylesheet already used. */
    --radius-card: 8px;
    --radius-pill: 999px;

    --elev-rest:   var(--shadow);
    --elev-raised: 0 10px 22px -10px rgba(32, 29, 23, 0.45);

    --section-pad:       var(--space-7);
    --section-pad-tight: var(--space-6);

    --dur:  0.2s;
    --ease: ease;
}

/* ---------------------------------------------------------
   02. RESET & BASE
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.75;
    color: var(--body);
    background: var(--ivory);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

figure { margin: 0 0 var(--space-3); }

hr {
    border: 0;
    height: 1px;
    background: var(--line);
    margin: var(--space-5) 0;
}
hr.rule-gold { background: var(--gold-soft); height: 2px; width: 64px; }

ul, ol { padding-left: 1.35em; }
li + li { margin-top: 0.35em; }

input, button, textarea, select { font: inherit; color: inherit; }

/* Accessibility: skip link, focus */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--charcoal);
    color: var(--ivory);
    padding: 0.7em 1.2em;
    z-index: 2000;
    border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* Screen reader only */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}
.screen-reader-text:focus {
    background-color: var(--paper);
    clip: auto;
    clip-path: none;
    height: auto;
    width: auto;
    position: static;
}

/* ---------------------------------------------------------
   03. TYPOGRAPHY
   --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    color: var(--charcoal);
    line-height: 1.18;
    font-weight: 500;
    margin: 0 0 0.55em;
    letter-spacing: -0.005em;
}
h1 { font-size: var(--fs-hero); font-weight: 500; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
h5, h6 { font-size: var(--fs-base); }

p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--gold-deep); text-decoration-color: var(--gold-soft); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }

strong, b { color: var(--ink); }

.eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
    display: block;
    margin-bottom: var(--space-2);
}
.eyebrow::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 1px;
    background: var(--gold);
    vertical-align: middle;
    margin-right: 0.7em;
}

.section-head { max-width: 46rem; margin-bottom: var(--space-5); }
.section-head h2 { margin-bottom: 0.35em; }
.section-head p { color: var(--muted); font-size: var(--fs-md); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .eyebrow::before { display: none; }

blockquote {
    margin: var(--space-4) 0;
    padding: var(--space-3) 0 var(--space-3) var(--space-4);
    border-left: 2px solid var(--gold);
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    font-style: italic;
    color: var(--ink);
}
blockquote p:last-child { margin-bottom: 0; }
blockquote cite {
    display: block;
    margin-top: 0.6em;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-style: normal;
    color: var(--muted);
}

code, kbd, pre, samp { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.92em; }
:not(pre) > code { background: var(--warm-ivory); padding: 0.15em 0.4em; border-radius: 2px; color: var(--ink); }
pre { background: var(--warm-ivory); padding: var(--space-3); border: 1px solid var(--line); overflow: auto; border-radius: var(--radius); }

small, .text-sm { font-size: var(--fs-sm); }

/* ---------------------------------------------------------
   04. LAYOUT UTILITIES
   --------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(1.1rem, 4vw, 2rem);
}
.container--narrow { max-width: 52rem; }

.section { padding-block: var(--section-pad); }
.section--tight { padding-block: var(--section-pad-tight); }
.section--paper { background: var(--paper); }
.section--ivory { background: var(--ivory); }
.section--cream { background: var(--warm-ivory); }
.section--dark { background: var(--charcoal); color: #d8d2c4; }
.section--dark h2, .section--dark h3 { color: var(--ivory); }

.grid { display: grid; gap: var(--space-3); }
.card { min-width: 0; overflow-wrap: break-word; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.text-center { text-align: center; }

/* ---------------------------------------------------------
   05. BUTTONS, LINKS, LABELS
   --------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.9em 1.9em;
    border-radius: var(--radius);
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--primary { background: var(--charcoal); color: var(--ivory); }
.btn--primary:hover { background: var(--gold-deep); color: #fff; }
.btn--gold { background: var(--gold); color: #fff; }
.btn--gold:hover { background: var(--gold-deep); }
.btn--outline { border-color: var(--gold); color: var(--gold-deep); background: transparent; }
.btn--outline:hover { background: var(--gold); color: #fff; }
.btn--ghost-light { border-color: rgba(250, 248, 242, 0.55); color: var(--ivory); background: transparent; }
.btn--ghost-light:hover { border-color: var(--gold-soft); color: var(--gold-soft); }
.btn--sm { padding: 0.6em 1.2em; font-size: var(--fs-xs); }

.text-link {
    font-weight: 600;
    color: var(--gold-deep);
    text-decoration: none;
    border-bottom: 1px solid var(--gold-soft);
}
.text-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

.chips a, .chip {
    display: inline-block;
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--line-dark);
    padding: 0.28em 0.8em;
    border-radius: var(--radius-pill);
    text-decoration: none;
}
.chips a:hover, .chip:hover { border-color: var(--gold); color: var(--gold-deep); }
.chips a { font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-dark); padding: 0.25em 0.75em; border-radius: var(--radius-pill); text-decoration: none; }

/* v4.9.8: card topic chips never wrap into tall pills inside narrow grid columns */
.grid .chips a { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }

/* ---------------------------------------------------------
   06. HEADER & NAVIGATION
   --------------------------------------------------------- */
.site-header {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    position: relative;
    z-index: 900;
}

/* v4.9.57: the topbar AND the header stay fixed together while the page scrolls.
   Previously only .site-header was sticky, so the topbar scrolled away and the
   header block appeared to shift. The stack carries the stickiness now, and the
   offset clears the WordPress admin bar when an administrator is logged in. */
.site-header-stack {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 900;
}
body.admin-bar .site-header-stack { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .site-header-stack { top: 46px; }
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 84px;
}
.site-header--shaded { box-shadow: var(--shadow); }

.custom-logo-link { display: inline-flex; }
.custom-logo { max-height: 72px; width: auto; }

.site-branding__fallback { text-decoration: none; display: inline-block; }
.site-branding__fallback .site-name {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--charcoal);
    line-height: 1.15;
    display: block;
}
.site-branding__fallback .site-tagline {
    display: block;
    font-size: var(--fs-xs);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-top: 0.25em;
}

.nav-toggle {
    display: none;
    align-items: center;
    gap: 0.55em;
    background: none;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius);
    padding: 0.55em 0.9em;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--charcoal);
    cursor: pointer;
}
.nav-toggle__bars { display: inline-grid; gap: 4px; }
.nav-toggle__bars span { width: 20px; height: 2px; background: var(--charcoal); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.primary-menu { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.9rem); margin: 0; padding: 0; list-style: none; }
.primary-menu li { margin: 0; }
.primary-menu > li { position: relative; }
.primary-menu a {
    font-size: 0.94rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ink);
    text-decoration: none;
    padding: 0.35em 0;
    border-bottom: 2px solid transparent;
    display: inline-block;
}
.primary-menu a:hover,
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a,
.primary-menu .current-post-ancestor > a,
.primary-menu .current-page-ancestor > a { color: var(--gold-deep); border-bottom-color: var(--gold); }

.primary-menu .menu-item-has-children > a::after {
    content: "▾";
    font-size: 0.7em;
    margin-left: 0.35em;
    color: var(--gold);
}
.primary-menu .sub-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 2px solid var(--gold);
    min-width: 240px;
    padding: 0.6rem 0;
    margin: 0;
    list-style: none;
    box-shadow: var(--shadow);
    border-radius: 0 0 var(--radius) var(--radius);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.primary-menu .menu-item-has-children:hover > .sub-menu,
.primary-menu .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.primary-menu .sub-menu a { display: block; padding: 0.55em 1.3rem; border-bottom: 0; color: var(--body); }
.primary-menu .sub-menu a:hover { background: var(--ivory); color: var(--gold-deep); }

.header-cta { white-space: nowrap; }

/* ---------------------------------------------------------
   07. HERO (FRONT PAGE)
   --------------------------------------------------------- */
/* Hero — bright ivory, gold accents, photo right (v1 layout) */
.hero {
    position: relative;
    background: var(--paper); /* calm solid ground — no large-surface gradients */
    border-bottom: 1px solid var(--champagne);
    overflow: hidden;
}
.hero__eyebrow {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold-deep);
    display: flex;
    align-items: center;
    gap: 0.8em;
    margin-bottom: var(--space-3);
}
.hero__eyebrow::after { content: ""; height: 1px; width: 56px; background: var(--gold); }
.hero h1 {
    color: var(--charcoal);
    font-size: var(--fs-hero);
    text-wrap: balance;
    margin-bottom: 0.4em;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hero--no-photo .hero__inner { grid-template-columns: 1fr; max-width: 52rem; }

/* ---------------------------------------------------------
   08. PAGE BANNER (INTERIOR PAGES)
   --------------------------------------------------------- */
/* v4.9.47 — the page/archive banner now uses the SAME photo + title layout as
   the Knowledge Centre banner, so every banner on the site matches: title 60%
   on the left, hero portrait 40% on the right, 5% gap, fixed height so the
   crop never changes. Implemented in CSS only, so the 18 templates that emit
   .page-banner need no edits. */
.page-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40%;
    column-gap: 5%;
    align-items: stretch;
    min-height: clamp(300px, 25.5vw, 400px);
    background: linear-gradient(120deg, var(--warm-ivory) 0%, var(--ivory) 100%);
    color: var(--ink);
    border-bottom: 1px solid var(--champagne);
    box-shadow: inset 0 -4px 0 var(--gold-soft);
    overflow: hidden;
}
/* the .container inside a page banner becomes the title column */
.page-banner > .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    width: auto;
    margin: 0;
    min-width: 0;
    padding-block: clamp(1.6rem, 3.4vw, 2.8rem);
    padding-left: clamp(1.25rem, 3vw, 2.75rem);
    padding-right: 0;
}
/* the portrait panel, identical to .kc-banner__photo */
.page-banner::after {
    content: "";
    display: block;
    background-image: url("assets/img/kc-banner-portrait.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 0;
    min-height: clamp(240px, 24vw, 360px);
}
.page-banner h1 {
    color: var(--charcoal);
    font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.9rem);
    line-height: 1.16;
    letter-spacing: -0.01em;
    margin: 0 0 0.35em;
    text-wrap: balance;
}
.page-banner .page-banner__intro { max-width: 42rem; color: var(--muted); font-size: var(--fs-md); margin: 0; }

/* Breadcrumbs */
.breadcrumbs {
    font-size: var(--fs-sm);
    color: var(--muted);
    margin-bottom: var(--space-2);
    padding-top: var(--space-3);
}
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35em; padding: 0; margin: 0 0 0.4em; }
.breadcrumbs li { margin: 0; }
.breadcrumbs li + li::before { content: "›"; margin-right: 0.35em; color: var(--gold); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--gold-deep); }
.breadcrumbs [aria-current="page"] { color: var(--ink); }
.page-banner .breadcrumbs,
.page-banner .breadcrumbs a { color: var(--muted); }
.page-banner .breadcrumbs a:hover { color: var(--gold-deep); }
.page-banner .breadcrumbs [aria-current="page"] { color: var(--ink); }

/* ---------------------------------------------------------
   09. SECTIONS & CARDS
   --------------------------------------------------------- */
.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color var(--dur) var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
    text-decoration: none;
    color: inherit;
}
.card:hover { border-color: var(--gold-soft); box-shadow: var(--shadow); transform: translateY(-3px); }
.card__icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--gold-soft);
    color: var(--gold-deep);
    border-radius: 50%;
    margin-bottom: var(--space-3);
    flex: none;
}
.card__icon svg { width: 22px; height: 22px; }
.card h3 { margin-bottom: 0.4em; }
.card h3 a { text-decoration: none; color: inherit; }
.card h3 a:hover { color: var(--gold-deep); }
.card p { color: var(--muted); font-size: 0.98rem; flex-grow: 1; }
.card__foot {
    margin-top: var(--space-3);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-deep);
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.card__foot::after { content: "→"; transition: transform var(--dur) var(--ease); }
.card:hover .card__foot::after { transform: translateX(4px); }

/* Practice area card variant */
.card--practice { position: relative; border-top: 3px solid var(--gold-soft); }
.card--practice .card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card--practice:hover { border-top-color: var(--gold); }

/* Post / article card */
.card--post { position: relative; }
.card--post .card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card--post .card__thumb { margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-3); border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; aspect-ratio: 16 / 10; background: var(--cream); }
/* v4.9.64 — featured images are shown WHOLE on cards, never cropped.
   "cover" filled the box but cut the edges off any image that wasn't the
   box's exact shape. "contain" fits the entire image inside the box and
   letterboxes the remainder onto the card's own paper tone, so the grid
   stays uniform and nothing is lost. */
.card--post .card__thumb img { width: 100%; height: 100%; object-fit: contain; }
.card--post .card__meta { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.55em; }

/* Intro band (About strip on homepage) */
.intro-band { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-5); align-items: start; }
.intro-band__aside {
    border-left: 1px solid var(--gold-soft);
    padding-left: var(--space-4);
    font-family: var(--font-serif);
    font-size: 1.25rem;
    line-height: 1.55;
    color: var(--ink);
    font-style: italic;
}
.signature {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--gold-deep);
    font-style: italic;
}

/* Feature list with gold ticks */
.feature-list { list-style: none; padding: 0; margin: var(--space-3) 0 0; }
.feature-list li {
    position: relative;
    padding-left: 2em;
    margin-bottom: 0.7em;
}
.feature-list li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--gold);
}

/* Stat band */
.stat-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.stat { text-align: center; padding: var(--space-3) var(--space-2); }
.stat__value { font-family: var(--font-serif); font-size: clamp(2.2rem, 2rem + 1.6vw, 3.2rem); color: var(--gold); line-height: 1; }
.stat__label { font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 0.5em; }

/* CTA band */
.cta-band {
    background: linear-gradient(120deg, var(--champagne) 0%, var(--gold-soft) 100%);
    color: var(--charcoal);
    border-top: 3px solid var(--gold);
}
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cta-band p { margin: 0; color: var(--ink); max-width: 34rem; }
.cta-band h2 { margin: 0 0 0.3em; color: var(--charcoal); }

/* ---------------------------------------------------------
   10. TEAM
   --------------------------------------------------------- */
.team-card { text-align: center; }
.team-card__photo-link { display: block; text-decoration: none; }
.team-card__photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--cream);
    margin-bottom: var(--space-2);
}
.team-card__photo--fallback {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    margin-bottom: var(--space-2);
    color: var(--gold-soft);
    font-family: var(--font-serif);
    font-size: 3rem;
}
.team-card h3 { font-size: var(--fs-md); margin-bottom: 0.15em; }
.team-card h3 a { text-decoration: none; color: inherit; }
.team-card h3 a:hover { color: var(--gold-deep); }
.team-card__role {
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: var(--space-2);
}
.team-card__socials { display: flex; justify-content: center; gap: 0.6rem; }
.team-card__socials a {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line-dark);
    border-radius: 50%;
    color: var(--muted);
}
.team-card__socials a:hover { border-color: var(--gold); color: var(--gold-deep); }
.team-card__socials svg { width: 16px; height: 16px; }

/* Team single */
.profile { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: var(--space-5); align-items: start; }
.profile__photo { width: 100%; border-radius: var(--radius); background: var(--cream); }
.profile__details dt {
    font-size: var(--fs-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-top: var(--space-3);
    margin-bottom: 0.15em;
}
.profile__details dd { margin: 0; }

/* ---------------------------------------------------------
   11. ARTICLE / LONG-FORM READING
   --------------------------------------------------------- */
.article { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 3.25rem); }
.article__header { border-bottom: 1px solid var(--line); padding-bottom: var(--space-4); margin-bottom: var(--space-4); }
.article__header .entry-title { font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.7rem); }
.entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 1.4em;
    font-size: var(--fs-sm);
    color: var(--muted);
    margin-top: 0.8em;
}
.entry-meta a { color: var(--muted); text-decoration: none; }
.entry-meta a:hover { color: var(--gold-deep); }
.entry-meta .entry-meta__separator { color: var(--gold); }
.entry-thumbnail { margin: 0 0 var(--space-4); }
.entry-thumbnail img { width: 100%; border-radius: var(--radius); }

.entry-content { max-width: var(--measure); margin-inline: auto; font-size: 1.05rem; }

/* Embedded full-document articles (their own <style>/<script>):
   they carry their own full-width layouts, so the reading column
   steps aside entirely and the article frame goes minimal. */
.article--embedded { background: transparent; border: 0; border-radius: 0; padding: clamp(0.5rem, 1.5vw, 1rem); }
.article--embedded .entry-content { max-width: none; font-size: 1rem; }
.entry-content > * + * { margin-top: var(--space-3); }
.entry-content h2, .entry-content h3, .entry-content h4 { margin-top: var(--space-5); }
.entry-content img { border-radius: var(--radius); }
.alignwide { max-width: min(1100px, 92vw); margin-inline: auto; }
.alignfull { max-width: none; width: calc(100% + 2 * clamp(1.5rem, 4vw, 3.25rem)); margin-inline: calc(-1 * clamp(1.5rem, 4vw, 3.25rem)); }

.article__footer { border-top: 1px solid var(--line); margin-top: var(--space-5); padding-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; align-items: center; }

.author-box {
    display: flex;
    gap: var(--space-3);
    background: var(--ivory);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-3);
    margin-top: var(--space-4);
}
.author-box img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.author-box .author-box__name { font-family: var(--font-serif); font-size: var(--fs-md); color: var(--charcoal); margin-bottom: 0.2em; }
.author-box p { font-size: 0.95rem; color: var(--muted); }

/* Table of contents (namespaced .bd-toc so post content using
   a .toc class of its own is never affected) */
.bd-toc {
    background: var(--ivory);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-4) 0;
    display: none;
}
.bd-toc.is-visible { display: block; }
.bd-toc__title { font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 0.7em; font-family: var(--font-sans); font-weight: 600; }
.bd-toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 0; columns: 2; column-gap: var(--space-4); }
.bd-toc li { margin: 0 0 0.45em; counter-increment: toc; break-inside: avoid; }
.bd-toc li::before { content: counter(toc, decimal-leading-zero); color: var(--gold); font-size: 0.85em; margin-right: 0.6em; }
.bd-toc a { text-decoration: none; color: var(--body); font-size: 0.95rem; }
.bd-toc a:hover { color: var(--gold-deep); }
.bd-toc .bd-toc--level3 { margin-left: 1.4em; font-size: 0.9em; }
.bd-toc .bd-toc--level3::before { content: "–"; }

/* Related articles */
.related { margin-top: var(--space-6); }

/* Sharing */
.share {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}
.share__label { font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.share a {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line-dark);
    border-radius: 50%;
    color: var(--muted);
    text-decoration: none;
}
.share a:hover { border-color: var(--gold); color: var(--gold-deep); }
.share svg { width: 17px; height: 17px; }


/* ---------------------------------------------------------
   11b. HOMEPAGE SECTIONS (restored from v1)
   --------------------------------------------------------- */
/* Credentials band (v1 "Fun Facts") */
.cred-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}
.cred {
    text-align: center;
    padding: var(--space-3) var(--space-2);
    border-left: 1px solid var(--line);
}
.cred:first-child { border-left: 0; }
.cred__icon {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--gold-soft);
    border-radius: 50%;
    color: var(--gold-deep);
    margin-bottom: var(--space-2);
}
.cred__title {
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    color: var(--charcoal);
    margin: 0 0 0.15em;
}
.cred__subtitle {
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}

/* About section (v1 home_about_*) */
/* Two columns: photo | main text. The content wrapper uses
   display:contents so the feature cards can span the full width
   underneath both columns, eliminating dead space beside the photo. */
.about-home { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: var(--space-5); align-items: center; }
.about-home__main h2 { max-width: 30rem; }
.about-home__desc { max-width: 38rem; color: var(--body); font-size: var(--fs-md); }
.about-home__more { margin-top: var(--space-3); }
.about-home__cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.about-home__cards .card { padding: var(--space-3); }

/* v4.9.75 — "Our approach" checklist folded into About the Firm
   (carried over from the removed Why Choose Us section). */
.about-home__approach { grid-column: 1 / -1; margin-top: var(--space-4); }
/* v4.9.81 — columns adapt to the available width so a long label never
   wraps, rows are forced to equal heights, and a real row gap replaces the
   per-item margin: the space between every row is now identical. */
.about-home__approach .feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    grid-auto-rows: 1fr;
    align-items: start;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-2);
}
.about-home__approach .feature-list li { margin-bottom: 0; }

/* Why choose us (v1 home_choose_*) */
.choose { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-5); align-items: start; }
.choose__desc { max-width: 36rem; font-size: var(--fs-md); }
.choose__list-title {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: var(--space-2);
}
.choose__list { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); }
.feature-list--check li { padding-left: 2.2em; }
.feature-list--check li::before { content: "✓"; color: var(--gold-deep); font-weight: 600; }

/* Partner strip (v1 Partner Area) */
.partner-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    justify-content: center;
    align-items: center;
}
.partner-strip__item { display: flex; align-items: center; opacity: 0.85; }
.partner-strip__item:hover { opacity: 1; }

/* Generic section action row (replaces inline styles) */
.section-actions { margin-top: 2.5rem; margin-bottom: 0; }

/* Reviews wrapper */
.reviews-wrap { max-width: 52rem; margin-inline: auto; }

@media (max-width: 1024px) {
    .cred-band { grid-template-columns: repeat(2, 1fr); }
    .cred:nth-child(3) { border-left: 0; }
    .about-home, .choose { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .cred-band { grid-template-columns: 1fr; }
    .cred { border-left: 0; border-top: 1px solid var(--line); padding: var(--space-3) 0; }
    .cred:first-child { border-top: 0; }
}


/* Areas of Legal Focus (replaces v1 expertise progress bars) */
.focus-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-5);
}
.focus-list__item { border-bottom: 1px solid var(--line-dark); }
.focus-list__link {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: var(--space-3) 0;
    text-decoration: none;
    color: inherit;
    transition: background-color var(--dur) var(--ease);
}
.focus-list__icon { color: var(--gold-deep); flex: none; margin-top: 0.2em; }
.focus-list__name {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    color: var(--charcoal);
    line-height: 1.3;
}
.focus-list__desc { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: 0.15em; }
.focus-list__link:hover .focus-list__name { color: var(--gold-deep); }

@media (max-width: 780px) {
    .focus-list { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------
   11c. TOP UTILITY BAR (restored from v1) & homepage extras
   --------------------------------------------------------- */
.topbar {
    background: var(--gold-faint);
    color: var(--ink);
    font-size: 0.8rem;
    border-bottom: 1px solid var(--champagne);
}
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-block: 0.45rem;
}
.topbar a { color: var(--ink); text-decoration: none; }
.topbar a:hover { color: var(--gold-deep); }
.topbar__contact { display: flex; flex-wrap: wrap; gap: 1.4em; align-items: center; }
.topbar__contact span { display: inline-flex; align-items: center; gap: 0.5em; }
.topbar__contact svg { width: 13px; height: 13px; color: var(--gold-deep); }
.topbar__socials { display: flex; gap: 0.9em; align-items: center; }
.topbar__socials svg { width: 13px; height: 13px; }
@media (max-width: 680px) {
    /* Phone AND email stay visible; only the social icons are
       dropped here (the floating dock at the bottom already
       carries call + socials on mobile). */
    .topbar__inner { justify-content: center; }
    .topbar__socials { display: none; }
}

/* Homepage About section — team group photo (v1 choose image) */
.about-home__photo { margin: 0; }
.about-home__photo img {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--champagne);
    box-shadow: 0 20px 50px -30px rgba(138, 109, 51, 0.4);
}
.about-home__content { display: contents; }

/* Homepage team — one member per row (vertical list, v1 sequence) */
.team-rows { display: grid; gap: var(--space-3); max-width: 60rem; margin-inline: auto; }
.team-row {
    display: grid;
    grid-template-columns: 128px 1fr auto;
    gap: var(--space-3);
    align-items: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold-soft);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    transition: border-color var(--dur) var(--ease), box-shadow 0.25s var(--ease);
}
.team-row:hover { border-left-color: var(--gold); box-shadow: var(--shadow); }
.team-row h3 { font-size: var(--fs-md); margin: 0 0 0.1em; }
.team-row h3 a { text-decoration: none; color: inherit; }
.team-row h3 a:hover { color: var(--gold-deep); }
.team-row__photo {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--gold-soft);
    display: block;
}
.team-row__photo--fallback {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: var(--warm-ivory);
    border: 3px solid var(--gold-soft);
    display: grid;
    place-items: center;
    color: var(--gold-soft);
}
.team-row__role {
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.team-row__socials { display: flex; gap: 0.6rem; }
.team-row__socials a {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line-dark);
    border-radius: 50%;
    color: var(--muted);
}
.team-row__socials a:hover { border-color: var(--gold); color: var(--gold-deep); }
.team-row__socials svg { width: 15px; height: 15px; }
@media (max-width: 680px) {
    .team-row { grid-template-columns: 88px 1fr; }
    .team-row__photo, .team-row__photo--fallback { width: 88px; height: 88px; }
    .team-row__socials { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------------------------------------------------------
   12. LEGAL CONTENT COMPONENTS
   --------------------------------------------------------- */
.callout {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--ivory);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-4) 0;
    position: relative;
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout__title {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.6em;
    display: flex;
    gap: 0.6em;
    align-items: center;
    color: var(--gold-deep);
}
.callout--note .callout__title::before { content: "✦"; color: var(--gold); }
.callout--warning { background: #fbf4ee; border-color: #e7cfa8; }
.callout--warning .callout__title { color: #93601d; }
.callout--warning .callout__title::before { content: "⚠"; }
.callout--statute { background: var(--warm-ivory); border-color: var(--champagne); }
.callout--definition { border-style: dashed; }

/* FAQ accordion — native details/summary, no JS */
.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    margin-bottom: 0.75rem;
}
.faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--charcoal);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    font-family: var(--font-sans);
    font-size: 1.25em;
    color: var(--gold);
    transition: transform var(--dur) var(--ease);
}
.faq-item[open] summary::after { content: "–"; }
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq-item .faq-item__body { padding: var(--space-3) var(--space-4); color: var(--body); }
.faq-item .faq-item__body > :last-child { margin-bottom: 0; }

/* Testimonials — factual, client-neutral presentation */
.quote-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-4);
}
.quote-card blockquote { margin: 0 0 var(--space-3); border-left: 2px solid var(--gold); }

/* ---------------------------------------------------------
   13. TABLES
   --------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--space-3) 0; }
table {
    border-collapse: collapse;
    width: 100%;
    min-width: 34rem;
    font-size: 0.95rem;
    border: 1px solid var(--line);
}
th, td { padding: 0.75em 1em; text-align: left; border-bottom: 1px solid var(--line); }
thead th {
    background: var(--warm-ivory);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-deep);
    border-bottom: 2px solid var(--gold-soft);
}
tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------
   14. FORMS
   --------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.form-grid__full { grid-column: 1 / -1; }

.field label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); margin-bottom: 0.35em; }
.field .required { color: var(--accent); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="search"],
.field input[type="date"],
.field input[type="file"],
.field select,
.field textarea {
    width: 100%;
    padding: 0.75em 1em;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius);
    background: var(--paper);
    transition: border-color var(--dur) var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input[type="file"] { padding: 0.6em 0.8em; cursor: pointer; }
.field input[type="file"]::file-selector-button {
    margin-right: 0.8em;
    padding: 0.5em 1em;
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    background: var(--gold-faint);
    color: var(--gold-deep);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--gold); outline: none; }
.field .field__hint { font-size: var(--fs-xs); color: var(--muted); margin-top: 0.35em; }

.form-status {
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    font-size: var(--fs-sm);
    border: 1px solid;
}
.form-status--success { background: #f0f7f1; border-color: #bcd7c0; color: var(--ok); }
.form-status--error { background: #fbf1f1; border-color: #e3b6b6; color: var(--error); }

.honeypot-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Search form */
.search-form { display: flex; gap: 0.6rem; max-width: 520px; }
.search-form input[type="search"] {
    flex: 1;
    padding: 0.8em 1em;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius);
    background: var(--paper);
}
.search-form button { padding: 0.8em 1.5em; }

/* ---------------------------------------------------------
   15. FOOTER
   --------------------------------------------------------- */
.site-footer {
    background: var(--ivory);
    color: var(--body);
    font-size: 0.95rem;
    margin-top: var(--space-7);
    border-top: 3px solid var(--gold-soft);
}
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { color: var(--gold-deep); }

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    padding-block: var(--space-6);
}
.footer-brand .site-name {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    color: var(--charcoal);
    display: block;
    margin-bottom: 0.5em;
}
.footer-brand p { color: var(--muted); }
.footer-col h3 {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-soft);
    margin-bottom: var(--space-3);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin: 0 0 0.55em; }
.footer-col .footer-contact li { display: flex; gap: 0.7em; align-items: flex-start; }
.footer-col .footer-contact svg { width: 15px; height: 15px; color: var(--gold); flex: none; margin-top: 0.3em; }
.footer-contact a { word-break: break-word; }

/* v3.10.2: office addresses — three equal, top-aligned columns on desktop; stacked on phones */
.bd-offices { display: grid; grid-template-columns: 1fr; row-gap: 0.9em; }
.bd-office { min-width: 0; }
.bd-office strong { font-weight: 600; }
.footer-contact .footer-offices { min-width: 0; }
@media (min-width: 641px) {
	.bd-offices { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5em; row-gap: 0; align-items: start; }
}

/* v3.11.0: knowledge centre hub, legal news, acts & statutes, topics */
.kc-hub { padding-block: var(--space-4) var(--space-2); }
.kc-hub__card { position: relative; z-index: 5; }
.kc-hub__card .card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.kc-hub__card h3 { margin: 1rem 0 0.4rem; }
.kc-hub__card p { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 0.75rem; }
.kc-hub__count { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); margin-top: auto; }
/* ---------------------------------------------------------
 v3.12.8: featured images + homepage Knowledge Centre groups
 --------------------------------------------------------- */
.article__hero { margin: 0 0 var(--space-3); }
.article__hero img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); }

.news-item__thumb { display: block; max-width: 380px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: var(--space-2); }
.news-item__thumb img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: var(--ivory); }
/* v4.9.2: KC sub-page cards in the multi-column grid (news + tools archives) */
.grid .news-item__thumb { max-width: none; }

.card__thumb { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 0.9rem; }
.card__thumb img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: var(--ivory); }

.kc-home { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.kc-home__group { display: flex; flex-direction: column; gap: var(--space-2); }
.kc-home__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 2px solid var(--gold-soft); padding-bottom: 0.5rem; }
.kc-home__head h3 { font-size: var(--fs-md); margin: 0; }
.kc-home__head .text-link { white-space: nowrap; font-size: var(--fs-sm); }
.kc-home__card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-2); }
.kc-home__card h4 { font-size: var(--fs-base); line-height: 1.45; margin: 0.3rem 0 0; }
.kc-home__card h4 a { text-decoration: none; }
.kc-home__thumb { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 0.5rem; }
.kc-home__thumb img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: var(--ivory); }
.kc-home__meta { font-size: var(--fs-xs); color: var(--muted); margin: 0; }
.kc-home__empty { color: var(--muted); font-size: var(--fs-sm); background: var(--ivory); border: 1px dashed var(--line-dark); border-radius: var(--radius); padding: var(--space-2); }
@media (max-width: 960px) { .kc-home { grid-template-columns: 1fr; } }
/* ---------------------------------------------------------
 v3.12.9: practice-area page experience
 --------------------------------------------------------- */
.page-banner__actions { margin-top: 1.5rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.practice-aside { position: sticky; top: 1.75rem; display: flex; flex-direction: column; gap: var(--space-3); align-self: start; }
.practice-aside__title { font-size: var(--fs-md); margin: 0 0 0.75rem; }
.practice-cta p { font-size: var(--fs-sm); color: var(--muted); }
.practice-cta__contact { font-size: var(--fs-sm); color: var(--body); }
.practice-cta__contact a { word-break: break-word; }
.practice-nav ul { list-style: none; padding: 0; margin: 0; }
.practice-nav li + li { margin-top: 0.5rem; }
.practice-nav a { display: flex; gap: 0.6rem; align-items: center; text-decoration: none; color: var(--ink); font-size: var(--fs-sm); line-height: 1.4; }
.practice-nav a:hover { color: var(--gold-deep); }
.practice-nav__icon { color: var(--gold-deep); flex: 0 0 auto; display: inline-flex; }
.article__footer--split { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: var(--space-3); }
.article__footer__note { font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 960px) { .practice-aside { position: static; } }


.news-list { display: grid; gap: var(--space-2); }
.news-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); }
.news-item__meta { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.35rem; }
.news-item__meta a { color: var(--gold-deep); }
.news-item__title { font-size: var(--fs-md); margin: 0 0 0.4rem; }
.news-item__title a { text-decoration: none; color: var(--charcoal); }
.news-item__title a:hover { color: var(--accent); }
.news-item__excerpt { color: var(--body); font-size: var(--fs-sm); margin-bottom: 0; }
.bd-source-box { border: 1px solid var(--line); border-left: 3px solid var(--gold); background: var(--ivory); padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); margin-top: var(--space-3); }
.topic-section { margin-bottom: var(--space-4); }
.bd-back-link { margin-top: var(--space-3); }

/* v3.12.0: knowledge centre dropdowns + resources listing */
.footer-subnav { list-style: none; padding-left: 0.9rem; margin: 0.35em 0 0.55em; }
.footer-subnav li { margin: 0 0 0.3em; }
.footer-subnav a { font-size: var(--fs-sm); color: var(--muted); text-decoration: none; }
.footer-subnav a:hover { color: var(--gold-deep); }

/* v4.9.74 — footer navigation in two columns; Knowledge Centre children branch out */
.footer-nav-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-3); align-items: start; }
.footer-col .footer-nav-cols ul { margin: 0; }
/* v4.9.76 — footer navigation left-aligned; Knowledge Centre branches
   shown as a stemmed list with arrow markers. */
.footer-col .footer-subnav { border-left: 1px solid rgba(194, 165, 107, 0.55); margin: 0.35em 0 0.55em 0.15rem; padding-left: 1.15rem; }
.footer-col .footer-subnav li { position: relative; }
.footer-col .footer-subnav li::before {
    content: "\2192";
    position: absolute;
    left: -1.1rem;
    top: 0;
    color: var(--gold-soft);
    font-size: var(--fs-sm);
    line-height: 1.45;
}
.footer-col h3 { text-align: left; }

/* v4.9.77 — Contact column explicitly left-aligned: heading, the
   address/phone/email list and the "Get in touch" button all sit on the
   left edge, matching the Navigate column. (Higher specificity so the
   site-wide justified-copy rule cannot re-centre it.) */
.footer-col.footer-col--contact,
.footer-col.footer-col--contact p,
.footer-col.footer-col--contact .footer-contact,
.footer-col.footer-col--contact .footer-contact li,
.footer-col.footer-col--contact .bd-offices { text-align: left; }
.footer-col.footer-col--contact .footer-contact li { justify-content: flex-start; }
@media (max-width: 520px) { .footer-nav-cols { grid-template-columns: 1fr; } }
.kc-latest { margin-bottom: var(--space-4); }
.kc-latest .kc-view-all { margin-top: var(--space-2); }

.footer-disclaimer {
    border-top: 1px solid var(--line);
    padding-block: var(--space-4);
    font-size: 0.8rem;
    line-height: 1.8;
    color: var(--muted);
}
.footer-disclaimer strong { color: var(--ink); }
.footer-bottom {
    border-top: 1px solid var(--line);
    padding-block: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: space-between;
    font-size: var(--fs-xs);
    color: var(--muted);
}
.footer-bottom ul { list-style: none; display: flex; gap: var(--space-2); padding: 0; margin: 0; }
.footer-bottom li + li::before { content: "·"; margin-right: var(--space-2); color: var(--gold); }

/* ---------------------------------------------------------
   16. ARCHIVES, SEARCH, PAGINATION
   --------------------------------------------------------- */
.archive-head { padding-block: var(--space-5) var(--space-4); }
.archive-head h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); margin-bottom: 0.2em; }
.archive-head .archive-description { max-width: 44rem; color: var(--muted); font-size: var(--fs-md); margin: 0; }

.pagination { display: flex; gap: 0.5rem; justify-content: center; margin-top: var(--space-5); flex-wrap: wrap; }
.pagination .page-numbers {
    display: inline-grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding-inline: 0.8em;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius);
    color: var(--ink);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 500;
}
.pagination .page-numbers:hover { border-color: var(--gold); color: var(--gold-deep); }
.pagination .page-numbers.current { background: var(--charcoal); border-color: var(--charcoal); color: var(--ivory); }
.pagination .page-numbers.dots { border: 0; }

.search-result { border-bottom: 1px solid var(--line); padding-block: var(--space-3); }
.search-result .search-result__type { font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); display: block; margin-bottom: 0.3em; }
.search-result h2 { font-size: var(--fs-lg); margin-bottom: 0.3em; }
.search-result h2 a { text-decoration: none; color: inherit; }
.search-result h2 a:hover { color: var(--gold-deep); }
.search-result .search-result__meta { font-size: var(--fs-sm); color: var(--muted); }

/* ---------------------------------------------------------
   17. COMMENTS
   --------------------------------------------------------- */
.comments-area { margin-top: var(--space-5); }
.comment-list { list-style: none; padding: 0; }
.comment-list ol.children { list-style: none; padding-left: var(--space-4); }
.comment-body { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); background: var(--paper); margin-bottom: var(--space-2); }
.comment-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5em; font-size: var(--fs-sm); color: var(--muted); margin-bottom: 0.6em; }
.comment-author img { border-radius: 50%; margin-right: 0.5em; vertical-align: middle; }
.reply a { font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }

/* ---------------------------------------------------------
   18. MISC
   --------------------------------------------------------- */
.error-404 { text-align: center; padding-block: var(--space-7); }
.error-404 .error-404__code {
    font-family: var(--font-serif);
    font-size: clamp(5rem, 14vw, 9rem);
    color: var(--gold-soft);
    line-height: 1;
}
.error-404 .search-form { margin-inline: auto; }
.error-404__links { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; list-style: none; padding: 0; margin: var(--space-4) 0 0; }

.go-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--charcoal);
    color: var(--gold-soft);
    border-radius: 50%;
    border: 1px solid rgba(201, 179, 132, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
    z-index: 800;
    text-decoration: none;
}
.go-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.go-top:hover { background: var(--gold-deep); color: #fff; }

.page-content { padding-block: var(--space-5); }
.page-content .entry-content { max-width: none; }
.page-content .wp-block-image img { border-radius: var(--radius); }

/* WordPress core alignment for archives etc. */
.alignleft { float: left; margin: 0.4em 1.4em 0.8em 0; }
.alignright { float: right; margin: 0.4em 0 0.8em 1.4em; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text, figcaption { font-size: var(--fs-sm); color: var(--muted); text-align: center; margin-top: 0.5em; }
.sticky { border-left: 3px solid var(--gold); padding-left: var(--space-3); }

/* Entry content media defaults (Rank Math / embeds) */
.entry-content iframe, .entry-content video { max-width: 100%; border-radius: var(--radius); }


/* ---------------------------------------------------------
   Bar Council bottom notice (restored from v1, restyled)
   --------------------------------------------------------- */
.bci-popup {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    background: var(--paper);
    border-top: 3px solid var(--gold);
    box-shadow: 0 -10px 40px -18px rgba(32, 29, 23, 0.35);
    max-height: 65vh;
    overflow-y: auto;
    display: none;
}
.bci-popup.is-open { display: block; }
.bci-popup__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--space-3) clamp(1.1rem, 4vw, 2rem) var(--space-4);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}
.bci-popup__text { flex: 1 1 34rem; }
.bci-popup__title {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 0.7em;
}
.bci-popup__text p { font-size: 0.9rem; line-height: 1.7; color: var(--body); margin-bottom: 0.6em; }
.bci-popup__text ul { margin: 0 0 0.6em; padding-left: 1.2em; font-size: 0.9rem; color: var(--body); }
.bci-popup__text li + li { margin-top: 0.3em; }
.bci-popup__note { color: var(--muted); margin-bottom: 0; }
.bci-popup__actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 0.3rem;
}
.bci-popup__decline { border-color: var(--line-dark); color: var(--muted); }
.bci-popup__decline:hover { border-color: var(--accent); color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
    .bci-popup { transition: none; }
}

/* ---------------------------------------------------------
   19. MOTION & REVEAL
   --------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}


/* Submenu toggle buttons (injected by main.js on mobile) */
.primary-menu .sub-toggle { display: none; }

/* Layouts with side columns (practice single, contact) */
.practice-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; align-items: start; }
.contact-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3rem; align-items: start; }
.with-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.5rem; align-items: start; }

@media (max-width: 1024px) {
    .practice-layout, .contact-layout, .with-sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .primary-menu .sub-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-left: auto;
        flex: none;
        background: none;
        border: 0;
        color: var(--gold-deep);
        font-size: 1rem;
        cursor: pointer;
    }
    .primary-menu > .menu-item-has-children { display: block; position: relative; }
    .primary-menu > .menu-item-has-children > a { display: block; padding-right: 52px; }
    .primary-menu .sub-toggle { position: absolute; top: 2px; right: 0; }
    .primary-menu .sub-menu { width: 100%; max-width: 100%; }
}

/* ---------------------------------------------------------
   20. RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 1024px) {
    .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .intro-band { grid-template-columns: 1fr; }
    .intro-band__aside { border-left: 0; border-top: 1px solid var(--gold-soft); padding: var(--space-3) 0 0; }
}

@media (max-width: 860px) {
    .nav-toggle { display: inline-flex; }
    .primary-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        border-top: 2px solid var(--gold);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--space-2) clamp(1.1rem, 4vw, 2rem) var(--space-3);
        box-shadow: var(--shadow);
        display: none;
    }
    .primary-menu.is-open { display: flex; }
    .primary-menu a { display: block; padding: 0.75em 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
    .primary-menu li:last-child a { border-bottom: 0; }
    .primary-menu .menu-item-has-children .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: 0;
        border-left: 2px solid var(--gold-soft);
        box-shadow: none;
        border-radius: 0;
        min-width: 0;
        padding: 0 0 0 1rem;
        margin: 0.2em 0 0.4em;
        display: none;
    }
    .primary-menu .menu-item-has-children.is-open > .sub-menu { display: block; }
    .primary-menu .menu-item-has-children > a::after { content: ""; }
    .header-cta { display: none; }
    .site-header__inner { min-height: 72px; }
    .profile { grid-template-columns: 1fr; }
    .profile__photo { max-width: 380px; }
}

@media (max-width: 680px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .bd-toc ol { columns: 1; }
    .site-footer { margin-top: var(--space-6); }
}\n
/* ---------------------------------------------------------
   21. PREMIUM EDITORIAL REFINEMENTS (v2.4.0)
   --------------------------------------------------------- */
/* Elegant text selection */
::selection { background: var(--gold-soft); color: var(--charcoal); }

/* Button micro-interactions */
.btn { box-shadow: 0 1px 2px rgba(32, 29, 23, 0.08); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -8px rgba(32, 29, 23, 0.45); }
.btn--gold:hover   { transform: translateY(-1px); box-shadow: 0 6px 18px -8px rgba(138, 109, 51, 0.55); }

/* Editorial drop cap on article first paragraph */
.article .entry-content > p:first-of-type:not(.no-dropcap)::first-letter {
    font-family: var(--font-serif);
    font-size: 3.4em;
    line-height: 0.82;
    font-weight: 500;
    color: var(--gold-deep);
    float: left;
    padding: 0.06em 0.14em 0 0;
}

/* Hero portrait — single gold keyline surrounding the photo on all
   sides, photo fully inside the frame, natural aspect (no cropping). */

/* Section head titles — slightly larger, tightened */
.section-head h2 { letter-spacing: -0.012em; }

/* Cards: hover gold underline reveal */
.card { position: relative; overflow: hidden; }
.card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--gold-soft));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
}
.card:hover::after { transform: scaleX(1); }

/* Team row portraits: uniform, centred */
.team-row { justify-items: start; }
.team-row__photo, .team-row__photo--fallback {
    width: 132px;
    height: 132px;
    object-fit: cover;
    object-position: center top;
}

/* BCI popup: gentle slide-up when opened */
.bci-popup { transform: translateY(100%); transition: transform 0.35s var(--ease); }
.bci-popup.is-open { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .bci-popup { transform: none; transition: none; }
    .btn--primary:hover, .btn--gold:hover { transform: none; }
}

/* Refined blockquote + links */
a.text-link { border-bottom-width: 1.5px; }
.entry-content a { text-underline-offset: 4px; }

/* ---------------------------------------------------------
   22. FLOATING QUICK-CONTACT RAIL (call / WhatsApp / social)
   --------------------------------------------------------- */
.float-rail {
    position: fixed;
    right: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.float-rail__btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #ffffff;
    border: 1px solid var(--line);
    color: var(--charcoal);
    box-shadow: 0 6px 16px -8px rgba(32, 29, 23, 0.35);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.float-rail__btn:hover { transform: scale(1.1); box-shadow: 0 10px 22px -10px rgba(32, 29, 23, 0.45); }
.float-rail__btn--call      { background: #1877f2; border-color: #1877f2; color: #ffffff; }
.float-rail__btn--whatsapp  { color: #1faf54; border-color: #d3eedd; }
.float-rail__btn--linkedin  { color: #0a66c2; border-color: #d4e2f3; }
.float-rail__btn--instagram { color: #c13584; border-color: #f0d5e7; }
.float-rail__btn--email     { color: var(--gold-deep); border-color: #d6e7e0; } /* v4.9.86 — email button */
@media (max-width: 720px) {
    /* Bottom dock instead of a side rail: never covers body text. */
    .float-rail {
        top: auto;
        bottom: 0.75rem;
        right: 50%;
        transform: translateX(50%);
        flex-direction: row;
        gap: 0.5rem;
    }
    .float-rail__btn { width: 42px; height: 42px; }
}
@media print { .float-rail { display: none; } }

/* ---------------------------------------------------------
   23. BLOG POST BANNER — v1 photograph restored
   The previous theme showed the firm's banner photograph behind
   the post title with a dark overlay; carried over here.
   --------------------------------------------------------- */
/* Bright treatment: the photograph shows through a light ivory veil,
   charcoal title at reading size on a single line. */
/* Natural photograph — no overlay of any kind (owner preference).
   Text sits directly on the photo: white with a soft shadow behind the
   letters only, so the photograph remains fully visible. */
.page-banner--photo {
    background-image: url("assets/img/page-banner-bg.webp");
    background-size: cover;
    background-position: center;
    color: #ffffff;
}
.page-banner--photo h1 {
    color: #ffffff;
    font-size: 36px;
    line-height: 1.25;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 14px rgba(15, 18, 24, 0.55), 0 1px 3px rgba(15, 18, 24, 0.45);
}
.page-banner--photo .hero__eyebrow { color: #ffffff; text-shadow: 0 1px 8px rgba(15, 18, 24, 0.5); }
.page-banner--photo .hero__eyebrow a { color: inherit; }
.page-banner--photo .breadcrumbs { color: rgba(255, 255, 255, 0.86); text-shadow: 0 1px 6px rgba(15, 18, 24, 0.5); }
.page-banner--photo .breadcrumbs a { color: #ffffff; text-shadow: 0 1px 6px rgba(15, 18, 24, 0.5); }
.page-banner--photo .entry-meta { color: rgba(255, 255, 255, 0.84); text-shadow: 0 1px 6px rgba(15, 18, 24, 0.5); }
.page-banner--photo .entry-meta a { color: #ffffff; }
.page-banner--photo .entry-meta a:hover { color: var(--gold); }

/* ---------------------------------------------------------
   24. THIRD-PARTY READING-PROGRESS BAR — HIDDEN
   A site plugin injects <div class="progress-bar"> (a 3px gold
   line at the top that fills as the page is read). The theme
   itself defines no such element, so hiding this class is
   guaranteed safe. Remove this rule to bring the bar back.
   --------------------------------------------------------- */
/* The plugin's reading-progress line is now removed by JavaScript
   (see main.js) — only thin fixed-position bars are targeted — so
   custom HTML inside posts that uses these common class names
   (e.g. Bootstrap-style progress meters) renders normally. */

/* ---------------------------------------------------------
   25. MOBILE REFINEMENTS
   --------------------------------------------------------- */
/* Feature cards: one per row on phones and small tablets. */
@media (max-width: 900px) {
    .about-home__cards { grid-template-columns: 1fr; }
}

/* Topbar on phones: phone + email centred on their own lines.
   Social icons are hidden here because the floating dock at the
   bottom of the screen already carries them. */
@media (max-width: 680px) {
    .topbar__inner {
        flex-direction: column;
        gap: 0.25rem;
        padding-block: 0.5rem;
    }
    .topbar__contact { justify-content: center; gap: 0.9em; }
    .topbar__socials { display: none; }
}

/* Team rows: photo above the text on narrow phones. */
@media (max-width: 560px) {
    .team-row { grid-template-columns: 1fr; }
    .team-row__photo,
    .team-row__photo--fallback { width: 104px; height: 104px; }
}

/* Blog banner title: smaller on phones so it stays readable. */
@media (max-width: 680px) {
    .page-banner--photo h1 { font-size: 27px; }
}

/* ---------------------------------------------------------
   26. OFFICE LOCATION MAP (contact page)
   --------------------------------------------------------- */
.map-embed {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 18px 44px -28px rgba(32, 29, 23, 0.4);
    background: var(--warm-ivory);
}
.map-embed iframe { display: block; width: 100%; height: 420px; border: 0; }
@media (max-width: 680px) {
    .map-embed iframe { height: 300px; }
}

/* ---------------------------------------------------------
   28. DESIGN ELEVATION PASS (v3.0.0) — consistency layer
   One place that enforces the site-wide rules: letterhead rule,
   unified section headings, eyebrow treatment, card behaviour,
   button proportions, and focus states. Placed BEFORE the post
   content immunity section so custom article HTML stays untouched.
   --------------------------------------------------------- */

/* Letterhead rule — a thin gold rule across the very top of every
   page, the classic law-firm letterhead signature. */
body::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--gold-deep) 15%, var(--gold) 50%, var(--gold-deep) 85%, transparent 100%);
}

/* Section headings — one size, one voice, everywhere. */
.section-head h2 {
    font-size: clamp(1.85rem, 1.42rem + 1.5vw, 2.55rem);
    line-height: 1.12;
    letter-spacing: -0.012em;
}
.section-head p {
    font-size: var(--fs-md);
    color: var(--muted);
    max-width: 40rem;
}
.section-head { margin-bottom: var(--space-5); }

/* Eyebrows — identical treatment in every section. */
.eyebrow {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold-deep);
    display: inline-flex;
    align-items: center;
    gap: 0.8em;
    margin-bottom: var(--space-2);
}
.eyebrow::after { content: ""; height: 1px; width: 44px; background: var(--gold-soft); }

/* Hero — a single commanding statement. */
.hero h1 { letter-spacing: -0.018em; line-height: 1.05; }

/* Navigation — quieter, more formal. */
.primary-menu a { font-size: 0.92rem; letter-spacing: 0.035em; }

/* Buttons — formal proportions, more air. */
.btn { padding: 1em 2.1em; letter-spacing: 0.09em; }

/* Cards — one hover language across every card type. */
.card:hover {
    transform: translateY(-3px);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color var(--dur) var(--ease);
}

/* Focus states — visible, on-brand. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* ---------------------------------------------------------
   27. POST CONTENT IMMUNITY
   The firm's long-form articles (Custom HTML blocks) carry their
   own complete stylesheet with class names that overlap the theme's
   generic ones (card, faq-item, callout). Inside post content the
   theme's versions of those classes are switched off, so the
   article's own embedded CSS is the only styling that applies.
   :where() keeps specificity at zero — the article's rules always win.
   --------------------------------------------------------- */
:where(.entry-content) .card {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    display: block;
    height: auto;
    transition: none;
    position: static;
    overflow: visible;
    box-shadow: none;
}
:where(.entry-content) .card:hover { box-shadow: none; transform: none; border-color: transparent; }
:where(.entry-content) .card::after,
:where(.entry-content) .card:hover::after { content: none; }
:where(.entry-content) .card p { color: inherit; font-size: inherit; }
:where(.entry-content) .card { display: block; height: auto; }

:where(.entry-content) .callout {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

:where(.entry-content) .faq-item {
    border: 0;
    border-radius: 0;
    background: none;
    margin-bottom: 0;
}
:where(.entry-content) .faq-item summary {
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    display: block;
    gap: normal;
}
:where(.entry-content) .faq-item summary::after { content: none; }
:where(.entry-content) .faq-item[open] summary { border-bottom: 0; }

/* ---------------------------------------------------------
   v4.0.0 — EMERALD IVORY DESIGN SYSTEM
   Modern Legal Elegance refinement of the v3 theme.
   --------------------------------------------------------- */

/* 1) TEXT ALIGNMENT — left-aligned body copy sitewide.
      Justification is reserved for long-form legal articles
      only, where it aids measured reading. */
.site-main p,
.site-main li,
section p,
section li {
	text-align: left;
	hyphens: manual;
	-webkit-hyphens: manual;
}
.single .entry-content p,
.single .entry-content li,
.single-bd_news .entry-content p,
.single-bd_news .entry-content li,
.single-bd_statute .entry-content p,
.single-bd_statute .entry-content li {
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
	-webkit-hyphens: auto;
}.hero h1 {font-weight: 600;}
.hero__tagline {
	font-family: var(--font-sans);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 var(--space-3);
}
.hero--no-photo .hero__inner { max-width: 52rem; }

/* 3) BUTTONS — subtle multi-tone emerald gradient on primary
      CTAs only. Calm solids everywhere else. */
.btn { border-radius: var(--radius); }
.btn--primary {
	background: linear-gradient(180deg, var(--emerald-bright) 0%, var(--emerald) 52%, var(--emerald-deep) 100%);
	color: #FAFAF7;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1px 2px rgba(8, 45, 35, 0.18);
}
.btn--primary:hover {
	background: linear-gradient(180deg, #2A9468 0%, #176549 52%, #124A37 100%);
	color: #FAFAF7;
	box-shadow: 0 6px 18px -8px rgba(8, 45, 35, 0.5);
}
.btn--gold {
	background: linear-gradient(180deg, var(--emerald-bright) 0%, var(--emerald) 52%, var(--emerald-deep) 100%);
	color: #FAFAF7;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1px 2px rgba(8, 45, 35, 0.18);
}
.btn--gold:hover {
	background: linear-gradient(180deg, #2A9468 0%, #176549 52%, #124A37 100%);
	color: #FAFAF7;
	box-shadow: 0 6px 18px -8px rgba(8, 45, 35, 0.5);
}

/* 4) HEADER — pearl surface, emerald navigation & contact bar. */
.topbar { background: var(--ivory); border-bottom: 1px solid var(--line); }
.topbar a { color: var(--gold-deep); }
.topbar a:hover { color: var(--gold); }
.topbar__contact svg, .topbar__socials svg { color: var(--gold); }
.site-header { background: var(--paper); }
.site-navigation a { color: var(--gold); }
.header-cta .btn--primary { white-space: nowrap; }

/* 5) PRACTICE AREAS — equal cards, even two-column grid. */
.home-practice .card--practice { border-radius: var(--radius-card); }
.card__icon { background: var(--pastel-blue); color: var(--gold); border-radius: var(--radius-card); }

/* 6) TEAM — round photographs, equal cards, brief-bio space. */
.team-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
	max-width: 880px;
	margin-inline: auto;
}
.team-card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	padding: var(--space-3) var(--space-2);
	text-align: center;
}
.team-card__photo-link { display: block; }
.team-card__photo,
.team-card__photo-link img {
	width: 150px;
	height: 150px;
	max-width: 100%;
	border-radius: 50%;
	object-fit: cover;
	margin-inline: auto;
	display: block;
}
.team-card__photo--fallback {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: var(--pastel-blue);
	color: var(--gold);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.team-card__bio {
	font-size: var(--fs-sm);
	color: var(--muted);
	line-height: 1.6;
	margin: 0.5em 0 0;
}

/* 7) KNOWLEDGE CENTRE — publication-style stacked groups,
      two recent cards per group beside the Explore more link. */
.kc-home {
	display: block;
	max-width: 880px;
	margin-inline: auto;
}
.kc-home__group {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
}
.kc-home__group + .kc-home__group { margin-top: var(--space-5); }
.kc-home__head {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	border-bottom: 1px solid rgba(20, 90, 67, 0.22);
	padding-bottom: 0.6rem;
}
.kc-home__head h3 { color: var(--gold-deep); }
.kc-home__card { border-radius: var(--radius-card); }
.kc-home__empty { grid-column: 1 / -1; }

/* v4.9.87 — Knowledge Centre is the homepage's flagship section:
   a soft emerald wash + gold rule frame it, the three group titles are
   larger and bold, and each group closes with a full-width
   "Explore All" button (the old top text link was removed). */
.section--kc {
	background: var(--gold-faint);
	border-top: 2px solid var(--gold-soft);
}
.kc-home__title { color: inherit; text-decoration: none; }
.kc-home__title:hover,
.kc-home__title:focus-visible { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 0.12em; }
.kc-home__head { border-bottom: 2px solid var(--gold-soft); padding-bottom: 0.7rem; }
.kc-home__head h3 {
	font-size: clamp(1.45rem, 1.25rem + 0.7vw, 1.8rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.15;
}
.kc-home__foot { grid-column: 1 / -1; margin-top: 0.35rem; display: flex; }
.kc-home__more { flex: 1 1 auto; justify-content: center; }

/* 8) FOOTER — Deep Emerald ground, pearl text, soft-gold
      detailing, round social buttons and the head-office map
      filling the space beside the contact column. */
.site-footer {
	background: #104532;
	color: #D7E0D9;
	border-top: 3px solid var(--gold-soft);
}
.site-footer a { color: #DCE6DE; }
.site-footer a:hover { color: #FAFAF7; }
.footer-brand .site-name { color: #FAFAF7; }
.footer-brand .site-name::after { background: var(--gold-soft); }
.footer-brand p { color: #B9C7BD; }
.footer-col h3 { color: #FAFAF7; }
.footer-col .footer-contact svg { color: var(--gold-soft); }
.footer-subnav a { color: #B9C7BD; }
.footer-subnav a:hover { color: #FAFAF7; }
.footer-disclaimer { color: #A8B8AC; border-top: 1px solid rgba(194, 165, 107, 0.35); }
.footer-disclaimer strong { color: #FAFAF7; }
.footer-bottom { color: #9FB1A3; border-top: 1px solid rgba(194, 165, 107, 0.25); }
.footer-bottom li + li::before { color: var(--gold-soft); }
/* v4.9.94 - FOOTER GRID FIX: the contact column was locked to a row
   (grid-row: 1 / span 2) with its column left automatic, so CSS Grid placed
   it first, in column 1 - giving contact | brand | nav above 1020px. Every
   footer cell now has an explicit place, with the brand and the map each
   across the full width. */
.footer-grid {
	grid-template-columns: 1fr 1fr;
}
.footer-grid > .footer-brand { grid-column: 1 / -1; }
.footer-col--contact { grid-row: auto; }
.footer-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: var(--space-3);
}
.footer-socials a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(250, 250, 247, 0.08);
	border: 1px solid var(--gold-soft);
	color: #FAFAF7;
	transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}
.footer-socials a:hover {
	background: linear-gradient(180deg, var(--emerald-bright), var(--emerald-deep));
	color: #FAFAF7;
	transform: translateY(-2px);
}
.footer-socials a svg { width: 16px; height: 16px; }
.footer-map {
	grid-column: 1 / -1;
	align-self: stretch;
	display: flex;
	min-height: 220px;
	border-radius: var(--radius-card);
	overflow: hidden;
	border: 1px solid rgba(194, 165, 107, 0.45);
	margin-top: 0;
}
.footer-map iframe {
	flex: 1;
	width: 100%;
	height: 100%;
	min-height: 220px;
	border: 0;
	display: block;
}

/* 9) FLOATING RAIL + GO-TOP — emerald with soft-gold ring. */
.float-rail__btn {
	background: var(--emerald);
	color: #FAFAF7;
	border: 1px solid var(--gold-soft);
}
.float-rail__btn:hover,
.go-top:hover {
	background: linear-gradient(180deg, var(--emerald-bright), var(--emerald-deep));
	color: #FAFAF7;
}
.go-top {
	background: var(--emerald);
	color: #FAFAF7;
	border: 1px solid var(--gold-soft);
}

/* 10) ACCESSIBILITY — visible keyboard focus everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.nav-toggle:focus-visible,
.float-rail__btn:focus-visible,
.go-top:focus-visible {
	outline: 2px solid var(--emerald-bright);
	outline-offset: 2px;
}

/* 11) CREDENTIAL BAND + CTA BAND — restrained emerald accents. */
.cred__icon { background: var(--pastel-blue); color: var(--gold); border-radius: var(--radius-card); }
.cta-band { background: var(--ivory); border-block: 1px solid var(--line); }
.feature-list--check li::before { color: var(--gold); }

/* 12) RESPONSIVE — tablet & phone refinements. */
@media (min-width: 1021px) {
	.footer-map,
	.footer-map iframe { min-height: 300px; }
}
@media (max-width: 1020px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.footer-grid > .footer-brand { grid-column: 1 / -1; }
	.footer-col--contact { grid-row: auto; }
	.footer-map { grid-column: 1 / -1; min-height: 200px; }
	.footer-map iframe { min-height: 200px; }
}
@media (max-width: 640px) {
	.hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
	.home-practice { grid-template-columns: 1fr; }
	.team-grid { grid-template-columns: 1fr; }
	.kc-home__group { grid-template-columns: 1fr; }
	.kc-home__head { justify-content: center; text-align: center; }
	.footer-grid { grid-template-columns: 1fr; }
	.footer-grid > .footer-brand { grid-column: auto; }
	.footer-map { min-height: 180px; }
	.footer-map iframe { min-height: 180px; }
}

/* ---------------------------------------------------------
   v4.1.0 — HAMBURGER MENU EVERYWHERE + HERO COPY ALIGNMENT
   --------------------------------------------------------- */

/* 1) NAVIGATION — the three-bar menu opens the primary menu
      on every device, desktop included. The inline desktop
      menu bar is retired; the items live in a full-width
      dropdown panel beneath the header. */
.nav-toggle { display: inline-flex; }
.primary-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 60;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	border-top: 2px solid var(--gold);
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: var(--space-2) clamp(1.1rem, 4vw, 2rem) var(--space-3);
	box-shadow: var(--shadow);
	display: none;
}
.primary-menu.is-open { display: flex; }
.primary-menu a { display: block; padding: 0.75em 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
.primary-menu li:last-child a { border-bottom: 0; }
.primary-menu .sub-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: auto;
	flex: none;
	background: none;
	border: 0;
	color: var(--gold-deep);
	font-size: 1rem;
	cursor: pointer;
}
/* v4.9.57 — mobile submenu layout. The parent used display:flex with the link
   at flex:1, which crushed the submenu so its items were squeezed to a sliver
   (only the last letter of the last item showed). Block layout instead, with the
   toggle positioned absolutely: nothing can be squeezed or clipped. */
.primary-menu > .menu-item-has-children { display: block; position: relative; }
.primary-menu > .menu-item-has-children > a { display: block; padding-right: 52px; }
.primary-menu .sub-toggle { position: absolute; top: 2px; right: 0; }
.primary-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    border-left: 2px solid var(--gold-soft);
    box-shadow: none;
    border-radius: 0;
    min-width: 0;
    width: 100%;
    max-height: none;
    overflow: visible;
    padding: 0 0 0 1rem;
    margin: 0.2em 0 0.4em;
    display: none;
}
.primary-menu .menu-item-has-children.is-open > .sub-menu { display: block; }
.primary-menu .sub-menu li { display: block; width: 100%; }
.primary-menu .sub-menu a { display: block; width: 100%; white-space: normal; }
.primary-menu .menu-item-has-children > a::after { content: ""; }

/* ---------------------------------------------------------
   v4.1.2 — FOOTER OFFICE LABELS + MENU BUTTON POSITION
   --------------------------------------------------------- */

/* 1) FOOTER — the office labels (<strong>) were caught by the
      base theme's global ink rule for bold text, which
      out-ranks the footer's light inherited colour and made
      the three office names near-invisible on the deep
      emerald ground. Pearl white now, matching the rest of
      the footer's bold text. */
.site-footer strong { color: #FAFAF7; }

/* 2) HEADER — the hamburger menu sits on the right, beside
      the consultation button, instead of centred between the
      brand and the button. */
.site-navigation { margin-left: auto; }

/* ---------------------------------------------------------
   v4.2.0 — JUSTIFIED BODY COPY + KC HUB SINGLE ROW
   --------------------------------------------------------- */

/* 1) TEXT ALIGNMENT — running text is justified evenly
      between both margins throughout the site (owner-approved
      direction). Headings, buttons, labels and the centred
      hero tagline are unaffected. */
.site-main p,
.site-main li,
section p,
section li,
.card p,
.footer-col p {
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}

/* 2) KNOWLEDGE CENTRE HUB — the three hub cards (Legal
      Resources, Legal News, Acts & Statutes) share one row
      across desktop and tablet widths; they stack only on
      phones. */
@media (max-width: 1024px) {
	.kc-hub .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
	.kc-hub .grid--3 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   26. EMBEDDED KC ARTICLES — MOBILE FIXES (v4.5.3)
   Knowledge-centre articles (land & property laws, apartment
   rules) carry their own CSS, but theme globals still apply to
   them: the 34rem table min-width drags the whole page
   sideways on phones, and the articles' small controls need
   phone-sized touch targets. Scoped to article--embedded only —
   never touches theme pages.
   --------------------------------------------------------- */
.article--embedded .entry-content table:not(#law-index-table):not(.matrix-table) { min-width: 0; }

/* Embedded tables that carry only a max-height need the scroll
   as well, in case a future import uses this wrapper. */
.article--embedded .law-table-wrap { overflow: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 768px) {
	/* Calculator action buttons: full width so they are easy to hit. */
	.article--embedded .calc-box .btn-primary,
	.article--embedded .calc-box .btn-secondary { width: 100%; margin-top: 0.35rem; }

	/* Hero action buttons: one per row, centred. */
	.article--embedded .hero-actions .btn-primary,
	.article--embedded .hero-actions .btn-secondary { width: 100%; max-width: 320px; margin-inline: auto; }

	/* Bigger touch targets for the small tool / checklist buttons. */
	.article--embedded .tool-btn { font-size: 0.75rem; padding: 0.35rem 0.6rem; }
	.article--embedded .dd-na-btn { font-size: 0.72rem; padding: 0.3rem 0.65rem; }

	/* iOS zooms the whole page when a field is smaller than 16px. */
	.article--embedded .entry-content input,
	.article--embedded .entry-content select,
	.article--embedded .entry-content textarea { font-size: 16px; }

	/* Long words must never push the layout out sideways. */
	.article--embedded .entry-content { overflow-wrap: break-word; }
}

/* ---------------------------------------------------------
   23. FLOATING SHARE BUTTON (Knowledge Centre articles,
   v4.7.3) - rides inside the quick-contact rail as its last
   button. One round button; native share sheet where the
   browser provides one, otherwise a small popover with the
   share targets opens beside the button. Hidden in print.
   --------------------------------------------------------- */
.bd-share-wrap { position: relative; }
.bd-share-toggle { color: #FAFAF7; }
.bd-share-pop {
    position: absolute;
    display: none;
    flex-direction: column;
    gap: 0.6rem;
}
.bd-share-pop.is-open { display: flex; }
.bd-share-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding: 0;
    background: #ffffff;
    border: 1px solid var(--line);
    color: var(--charcoal);
    box-shadow: 0 6px 16px -8px rgba(32, 29, 23, 0.35);
    cursor: pointer;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.bd-share-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 22px -10px rgba(32, 29, 23, 0.45);
    border-color: var(--gold);
}
.bd-share-btn--whatsapp { color: #1faf54; }
.bd-share-btn--telegram { color: #229ed9; }
.bd-share-btn--facebook { color: #1877f2; }
.bd-share-btn--x        { color: #14171a; }
.bd-share-btn--linkedin { color: #0a66c2; }
.bd-share-btn--email    { color: var(--gold-deep); }
.bd-share-btn--copy     { color: var(--gold-deep); }
.bd-share-tip {
    position: absolute;
    left: -3.4rem;
    bottom: 8px;
    white-space: nowrap;
    background: var(--charcoal);
    color: #fffdf7;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-pill);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
}
.bd-share-tip.is-visible { opacity: 1; }
/* Desktop: the contact rail sits on the right edge, so the
   popover opens to its left. */
@media (min-width: 721px) {
    .bd-share-pop {
        right: 3.4rem;
        top: 50%;
        transform: translateY(-50%);
    }
}
/* Mobile: the contact rail is a bottom dock, so the popover
   opens above it. */
@media (max-width: 720px) {
    .bd-share-pop { bottom: 3.2rem; right: 0; }
    .bd-share-btn { width: 42px; height: 42px; }
    .bd-share-tip { left: -3rem; bottom: 6px; }
}
@media print { .bd-share-wrap { display: none; } }

/* ---------------------------------------------------------
   29. v4.8.0 — forms & micro-interactions
   ---------------------------------------------------------
   Error colour #A63D2F verified against the Emerald Ivory grounds:
   6.03:1 on --paper (#FAFAF7) and 5.49:1 on --ivory (#F3EFE3),
   both above the WCAG AA 4.5:1 threshold for body text, so the
   value is used unchanged everywhere. Motion additions are wrapped
   in prefers-reduced-motion: no-preference so reduced-motion
   visitors are entirely unaffected. */

/* Live error-summary container on the contact form. Collapsed and
   invisible while empty so it introduces no layout shift; expands
   when main.js writes the plain-language problem list into it. */
.form-status {
    min-height: 1.4em;
    color: var(--muted);
    font-size: 0.9rem;
}
.form-status:empty {
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.form-status ul {
    margin: 0;
    padding-left: 1.2em;
}
.form-status .is-error {
    color: #A63D2F;
}

/* Inline invalid state for contact-form fields. */
input.is-invalid,
textarea.is-invalid {
    border-color: #A63D2F;
    box-shadow: 0 0 0 1px rgba(166, 61, 47, 0.18);
}

/* Busy state on the submit button. */
.btn.is-submitting {
    opacity: 0.7;
    pointer-events: none;
}

/* Gentle button & card micro-interactions (reduced-motion safe). */
@media (prefers-reduced-motion: no-preference) {
    .btn {
        transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
            border-color 0.2s ease, transform 0.18s ease, box-shadow 0.18s ease;
    }
    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px -10px rgba(32, 29, 23, 0.42);
    }
    .btn:active {
        transform: translateY(0);
        box-shadow: 0 1px 2px rgba(32, 29, 23, 0.08);
    }

    .card {
        transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
    }
    .card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow);
    }
}

/* ------------------------------------------------------------------
   v4.9.0 — Knowledge Centre cards: four sections in a 2×2 grid
   (Resources / News / Statutes / Tools), rendered dynamically with
   live counts. Falls back to a single column on small screens.
   ------------------------------------------------------------------ */
.kc-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}
.kc-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold-soft);
    border-radius: var(--radius-card);
    padding: var(--space-3);
    text-decoration: none;
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}
.kc-card:hover {
    border-color: var(--gold-soft);
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}
.kc-card__title {
    font-size: var(--fs-md, 1.25rem);
    margin: 0;
    color: var(--ink, #22301F);
}
.kc-card__desc {
    color: var(--muted);
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
}
.kc-card__count {
    margin: 0.4rem 0 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--gold-deep);
}
@media (max-width: 720px) {
    .kc-cards { grid-template-columns: 1fr; }
}

/* ===================== v4.9.4: Tool pages — collapsible sections + 3D calculator ===================== */
.bd-sec{border:1px solid rgba(200,160,73,.28);border-radius:12px;background:#fff;margin:1.1rem 0;box-shadow:0 1px 3px rgba(43,36,32,.05);overflow:hidden}
.bd-sec>summary{cursor:pointer;padding:.95rem 1.3rem;list-style:none;display:flex;align-items:center;gap:.6rem;background:linear-gradient(180deg,#fdf6e3,#fbf8f1);transition:background .2s var(--ease)}
.bd-sec>summary::-webkit-details-marker{display:none}
.bd-sec>summary::after{content:"";width:9px;height:9px;border-right:2.5px solid #a67c00;border-bottom:2.5px solid #a67c00;transform:rotate(-45deg);flex:0 0 9px;margin-left:auto;transition:transform .2s var(--ease)}
.bd-sec[open]>summary::after{transform:rotate(45deg)}
.bd-sec>summary h2{margin:0;font-size:1.2rem !important;line-height:1.35}
.bd-sec>summary:hover{background:#fdf6e3}
.bd-sec[open]>summary{border-bottom:1px solid rgba(200,160,73,.25)}
.bd-sec>*:not(summary){margin-left:1.3rem;margin-right:1.3rem}
.bd-sec>*:last-child{margin-bottom:1.2rem}

body.single-bd_tool .bd-tool .calc-box{position:relative;border-radius:18px;padding:1.9rem 1.7rem 1.7rem;background:linear-gradient(165deg,#fffdf8 0%,#fbf8f1 55%,#f6efdd 100%);border:1px solid #d9c28a;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -2px 6px rgba(200,160,73,.14),0 34px 70px -30px rgba(43,36,32,.55),0 18px 40px -20px rgba(166,124,0,.42);transform:perspective(1600px) rotateX(1.4deg);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s var(--ease);animation:bdCalcGlow 3.2s ease-out .4s 2}
body.single-bd_tool .bd-tool .calc-box:hover{transform:perspective(1600px) rotateX(0deg)}
@keyframes bdCalcGlow{0%{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 34px 70px -30px rgba(43,36,32,.55),0 0 0 0 rgba(200,160,73,.55)}60%{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 34px 70px -30px rgba(43,36,32,.55),0 0 0 16px rgba(200,160,73,0)}100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 34px 70px -30px rgba(43,36,32,.55),0 0 0 0 rgba(200,160,73,0)}}
body.single-bd_tool .bd-tool .calc-box>h3{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:700;letter-spacing:.05em;border-bottom:2px solid rgba(200,160,73,.35);padding-bottom:.55rem;margin-bottom:1.1rem}
body.single-bd_tool .bd-tool .calc-box .calc-input input,body.single-bd_tool .bd-tool .calc-box .calc-input select{background:#fff;border:1px solid rgba(200,160,73,.45);border-radius:var(--radius-card);box-shadow:inset 0 2px 5px rgba(43,36,32,.12),0 1px 0 #fff}
body.single-bd_tool .bd-tool .calc-box .calc-input input:focus,body.single-bd_tool .bd-tool .calc-box .calc-input select:focus{outline:none;border-color:#a67c00;box-shadow:0 0 0 3px rgba(200,160,73,.22),inset 0 2px 5px rgba(43,36,32,.12)}
body.single-bd_tool .bd-tool .calc-box .btn-primary{background:linear-gradient(180deg,#d4af37 0%,#c8a049 60%,#b8922f 100%);border:1px solid #a67c00;border-bottom-width:4px;border-radius:11px;box-shadow:0 8px 16px -6px rgba(166,124,0,.55),inset 0 1px 0 rgba(255,255,255,.55);text-shadow:0 1px 1px rgba(122,90,10,.45);letter-spacing:.04em;transition:transform .08s var(--ease),border-bottom-width .08s var(--ease),box-shadow .08s var(--ease),filter .15s var(--ease)}
body.single-bd_tool .bd-tool .calc-box .btn-primary:hover{filter:brightness(1.04);transform:translateY(-1px)}
body.single-bd_tool .bd-tool .calc-box .btn-primary:active{transform:translateY(2px);border-bottom-width:1px;box-shadow:0 2px 6px -3px rgba(166,124,0,.5),inset 0 2px 6px rgba(43,36,32,.25)}
@media (max-width:768px){body.single-bd_tool .bd-tool .calc-box{transform:none;border-radius:14px;box-shadow:0 18px 40px -22px rgba(43,36,32,.45);animation:none;padding:1.4rem 1.1rem 1.2rem}}
@media (prefers-reduced-motion:reduce){body.single-bd_tool .bd-tool .calc-box{animation:none;transition:none}}

/* ==========================================================================
   v4.9.12 — Google Translate control (site header, beside the menu button)
   Theme-styled button + menu; Google's own widget stays hidden.
   ========================================================================== */
.bd-translate { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.bd-translate__btn {
    display: inline-flex; align-items: center; gap: 0.45em;
    padding: 0.38em 0.95em;
    font: inherit; font-weight: 600; line-height: 1.2; font-size: 0.85rem;
    color: var(--gold-deep);
    background: var(--paper);
    border: 1px solid var(--gold-line, #96794A);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.bd-translate__btn:hover { background: #fff; border-color: var(--gold-deep); }
.bd-translate__btn:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.bd-translate__btn svg { width: 14px; height: 14px; color: var(--gold-deep); }

.bd-translate__menu {
    position: absolute; top: calc(100% + 0.55rem); right: 0; z-index: 99990;
    min-width: 220px; max-width: min(280px, 86vw);
    padding: 0.65rem 0.75rem;
    background: var(--paper);
    border: 1px solid var(--line-dark);
    border-radius: 10px;
    box-shadow: 0 18px 45px rgba(48, 53, 50, 0.18);
}
.bd-translate__note {
    margin: 0 0 0.5rem; padding: 0 0.25rem 0.5rem;
    font-size: 0.72rem; line-height: 1.4; color: var(--muted);
    border-bottom: 1px solid var(--line);
}
.bd-translate__langs { list-style: none; margin: 0; padding: 0; }
.bd-translate__langs button {
    display: block; width: 100%;
    padding: 0.42rem 0.55rem;
    font: inherit; font-size: 0.85rem; text-align: left;
    color: var(--ink); background: none; border: 0; border-radius: 7px;
    cursor: pointer;
}
.bd-translate__langs button:hover { background: var(--gold-faint); color: var(--gold-deep); }
.bd-translate__langs button:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: -2px; }

/* v4.9.16: keep the "Translate" label visible on phones too (user request);
   slightly tighter pill so the header row still fits beside the hamburger. */
@media (max-width: 680px) {
    .bd-translate__btn { padding: 0.34em 0.75em; font-size: 0.76rem; }
    .bd-translate__btn svg { width: 12px; height: 12px; }
    .bd-translate__menu { right: 0; left: auto; }
    .site-header__inner { gap: var(--space-2); }
}

/* Hide Google's own banner clutter (the top iframe bar); keep translation working. */
.goog-te-banner-frame.skiptranslate { display: none !important; }
body { top: 0 !important; }
#bd_google_translate_element { display: none; }

/* ==========================================================================
   v4.9.13 — Translate control LEFT of the Menu button.
   The .bd-translate control now lives inside .site-navigation (first
   child, before the hamburger). Make the nav a flex row so it reads
   [Translate] [Menu] on phones and [Translate] [links...] on desktop.
   ========================================================================== */
.site-navigation { display: flex; align-items: center; gap: 0.85rem; }
.bd-translate { margin-right: 0.15rem; }

/* ==========================================================================
   v4.9.14 — Full Google Translate language list (curated India-first, then all)
   ========================================================================== */
.bd-translate__heading {
    margin: 0.6rem 0.25rem 0.35rem;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--muted);
}
.bd-translate__heading:first-of-type { margin-top: 0; }
.bd-translate__langs--all { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
.bd-translate__langs--all::-webkit-scrollbar { width: 6px; }
.bd-translate__langs--all::-webkit-scrollbar-thumb { background: var(--line-dark); border-radius: 3px; }
.bd-translate__menu { min-width: 250px; }

/* ==========================================================================
   v4.9.15 — One continuous language menu, ordered by distance from India.
   ========================================================================== */
.bd-translate__langs--scroll { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.bd-translate__langs--scroll::-webkit-scrollbar { width: 6px; }
.bd-translate__langs--scroll::-webkit-scrollbar-thumb { background: var(--line-dark); border-radius: 3px; }


/* ---------------------------------------------------------
   25. HERO — 50/50 SPLIT (v4.9.22)
   Text left (justified), cut-out portrait right on a very soft
   warm ground, subtle radial light behind the figure, a soft
   shadow beneath the chair. No frames, no borders, no visible
   image boundary.
   --------------------------------------------------------- */
.hero {
    border-bottom: 0;
    background:
        radial-gradient(130% 108% at 76% 42%, rgba(201,171,105,0.17) 0%, rgba(201,171,105,0.075) 36%, rgba(201,171,105,0.00) 66%),
        linear-gradient(180deg, var(--warm-ivory) 0%, var(--paper) 58%);
}
@media (max-width: 860px) {
}


/* ---------------------------------------------------------
   26. TRANSLATE MENU — LANGUAGE SEARCH (v4.9.24)
   --------------------------------------------------------- */
.bd-translate__search { margin: 0 0 0.5rem; }
.bd-translate__input {
    width: 100%;
    padding: 0.45rem 0.6rem;
    font-family: var(--font-sans);
    font-size: 0.86rem;
    line-height: 1.3;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line-dark);
    border-radius: 6px;
    -webkit-appearance: none;
    appearance: none;
}
.bd-translate__input::placeholder { color: #8a8478; }
.bd-translate__input:focus {
    outline: 2px solid var(--gold-deep);
    outline-offset: 1px;
    border-color: var(--gold-deep);
}
.bd-translate__langs li.is-hidden { display: none; }
.bd-translate__empty {
    padding: 0.55rem 0.2rem;
    font-size: 0.82rem;
    color: #6b6559;
}

/* ==========================================================================
   v4.9.34 — LOCKED THEME PALETTE (content can no longer hijack it).
   Imported Knowledge Centre articles, tools, news and statutes were authored
   against old palettes and declare their OWN values for these names — some of
   them the theme's own token names (--cream, --muted, --gold-soft, --ivory,
   --gold, --white, --charcoal). Because their <style> comes after this
   stylesheet it used to win. Declaring the palette here with !important makes
   the theme authoritative: every article then follows the live Emerald Ivory
   palette, and dark mode flows through automatically.
   This block is the single source of truth for the palette values.
   ========================================================================== */
:root {
    --paper:#FAFAF7 !important; --ivory:#F3EFE3 !important; --warm-ivory:#F3EFE3 !important;
    --cream:#EDE7D7 !important; --champagne:#E3DECE !important;
    --gold:#145A43 !important; --gold-deep:#104532 !important; --gold-soft:#C2A56B !important; --gold-faint:#EAF0EC !important; --gold-line:#96794A !important;
    --charcoal:#303532 !important; --ink:#303532 !important; --body:#3A403C !important; --muted:#5C6660 !important;
    --line:#E5E1D5 !important; --line-dark:#D9D4C4 !important;
    --accent:#145A43 !important; --accent-dark:#104532 !important;
    --emerald-light:#58A889 !important; --emerald-bright:#23845F !important; --emerald:#145A43 !important;
    --emerald-deep:#104532 !important; --emerald-shadow:#082D23 !important;
    --pastel-blue:#DCEAF2 !important; --light-yellow:#F8F1C9 !important;
    --ok:#2e6b3f !important; --error:#9c2b2b !important;
    /* legacy-only names used by imported content */
    --white:#ffffff !important; --text-muted:#5C6660 !important;
    --border-gold:#E5E1D5 !important; --border-soft:#E5E1D5 !important;
    --champagne-light:#FDF6E3 !important; --warm-yellow:#EAF0EC !important; --gold-bright:#145A43 !important;
    --charcoal-soft:#3A403C !important; --navy:#303532 !important; --bright:#EAF0EC !important; --border:#E5E1D5 !important;
}
html[data-bd-theme="dark"] {
    --paper:#14171A !important; --ivory:#191D20 !important; --warm-ivory:#191D20 !important;
    --cream:#1E2327 !important; --champagne:#232A2E !important;
    --gold:#3FA57E !important; --gold-deep:#6FD3AC !important; --gold-soft:#8FBFA6 !important; --gold-faint:#1B2A25 !important; --gold-line:#8FBFA6 !important;
    --charcoal:#EDF1EF !important; --ink:#EDF1EF !important; --body:#DCE3DF !important; --muted:#A9B4AE !important;
    --line:#2C3438 !important; --line-dark:#39434A !important;
    --accent:#3FA57E !important; --accent-dark:#6FD3AC !important;
    --emerald-light:#7FD8B4 !important; --emerald-bright:#3FA57E !important; --emerald:#3FA57E !important;
    --emerald-deep:#6FD3AC !important; --emerald-shadow:#0A1F18 !important;
    --pastel-blue:#1B2A33 !important; --light-yellow:#2A2A1E !important;
    --ok:#6FCF97 !important; --error:#F08A8A !important;
    --white:#14171A !important; --text-muted:#A9B4AE !important;
    --border-gold:#3A4A43 !important; --border-soft:#2C3438 !important;
    --champagne-light:#1B2320 !important; --warm-yellow:#1B2A25 !important; --gold-bright:#3FA57E !important;
    --charcoal-soft:#DCE3DF !important; --navy:#EDF1EF !important; --bright:#1B2A25 !important; --border:#2C3438 !important;
}
/* Labels painted with legacy "white" text on a coloured ground: --white is now a
   surface token, so pin these so they stay legible in both modes. */
.btn-primary, .chip.active, .flow-node.start, .flow-node.end,
.entry-content .btn-primary, .bd-tool .btn-primary { color:#fff !important; }
html[data-bd-theme="dark"] .btn-primary, html[data-bd-theme="dark"] .chip.active,
html[data-bd-theme="dark"] .flow-node.start, html[data-bd-theme="dark"] .flow-node.end,
html[data-bd-theme="dark"] .entry-content .btn-primary,
html[data-bd-theme="dark"] .bd-tool .btn-primary { background:var(--accent) !important; color:#08110D !important; }
.btn-secondary, .entry-content .btn-secondary, .bd-tool .btn-secondary {
    background:transparent !important; color:var(--accent-dark) !important; border-color:var(--accent) !important;
}
/* Hard-coded (non-variable) light surfaces inside article CSS: darken in dark mode. */
html[data-bd-theme="dark"] .entry-content, html[data-bd-theme="dark"] .bd-tool,
html[data-bd-theme="dark"] .bd-kc-article { color-scheme:dark; }
html[data-bd-theme="dark"] .entry-content table, html[data-bd-theme="dark"] .bd-tool table { background:#1B2320 !important; }
html[data-bd-theme="dark"] .entry-content th, html[data-bd-theme="dark"] .bd-tool th { background:#232A2E !important; color:var(--ink) !important; }
html[data-bd-theme="dark"] .entry-content td, html[data-bd-theme="dark"] .entry-content th,
html[data-bd-theme="dark"] .bd-tool td, html[data-bd-theme="dark"] .bd-tool th { border-color:#2C3438 !important; }
html[data-bd-theme="dark"] .entry-content [style*="#fef2f2"], html[data-bd-theme="dark"] .entry-content [style*="#dcfce7"],
html[data-bd-theme="dark"] .entry-content [style*="#fef3c7"], html[data-bd-theme="dark"] .entry-content [style*="#dbeafe"],
html[data-bd-theme="dark"] .entry-content [style*="#f1f5f9"], html[data-bd-theme="dark"] .entry-content [style*="#faf3e0"],
html[data-bd-theme="dark"] .entry-content [style*="#f4faee"], html[data-bd-theme="dark"] .entry-content [style*="#fdf2f0"],
html[data-bd-theme="dark"] .entry-content [style*="#fff8e7"], html[data-bd-theme="dark"] .entry-content [style*="#fff7da"],
html[data-bd-theme="dark"] .entry-content [style*="#fbf8f1"], html[data-bd-theme="dark"] .entry-content [style*="#f6efdd"],
html[data-bd-theme="dark"] .bd-tool [style*="#fef2f2"], html[data-bd-theme="dark"] .bd-tool [style*="#dcfce7"],
html[data-bd-theme="dark"] .bd-tool [style*="#fef3c7"], html[data-bd-theme="dark"] .bd-tool [style*="#dbeafe"],
html[data-bd-theme="dark"] .bd-tool [style*="#f4faee"], html[data-bd-theme="dark"] .bd-tool [style*="#fbf8f1"] {
    background:#1E2622 !important;
}
html[data-bd-theme="dark"] .entry-content [style*="background:#ffffff"], html[data-bd-theme="dark"] .entry-content [style*="background: #ffffff"],
html[data-bd-theme="dark"] .entry-content [style*="background:#fff"], html[data-bd-theme="dark"] .entry-content [style*="background: #fff"],
html[data-bd-theme="dark"] .bd-tool [style*="background:#ffffff"], html[data-bd-theme="dark"] .bd-tool [style*="background:#fff"] {
    background:#1B2320 !important;
}
/* Dark text hard-coded inside article CSS -> lift it in dark mode. */
html[data-bd-theme="dark"] .entry-content [style*="color:#2b2620"], html[data-bd-theme="dark"] .entry-content [style*="color:#2a2420"],
html[data-bd-theme="dark"] .entry-content [style*="color:#26313f"], html[data-bd-theme="dark"] .entry-content [style*="color:#1a232f"],
html[data-bd-theme="dark"] .entry-content [style*="color:#333"], html[data-bd-theme="dark"] .entry-content [style*="color: #333"],
html[data-bd-theme="dark"] .bd-tool [style*="color:#2b2620"], html[data-bd-theme="dark"] .bd-tool [style*="color:#26313f"] {
    color:var(--ink) !important;
}

/* v4.9.36 — dark-mode equivalents for the hard-coded (non-variable) colours
   used by imported Knowledge Centre articles: pastel callouts, status/risk
   chips, matrix cells and layer panels. Hue is preserved, so a green "permit"
   chip stays green and a red "danger" chip stays red — only the lightness
   flips so they read on a dark page. Generated from the article sources. */
html[data-bd-theme="dark"] body{background:var(--paper) !important;color:var(--body) !important}
html[data-bd-theme="dark"] #law-index-table .law-group-header td{background:#372b15 !important}
html[data-bd-theme="dark"] #law-index-table tbody tr:nth-child(even){background:#372e15 !important}
html[data-bd-theme="dark"] #law-index-table tbody tr:nth-child(even) td:first-child{background:#372e15 !important}
html[data-bd-theme="dark"] #law-index-table tbody tr:nth-child(even) td:nth-child(2){background:#372b15 !important}
html[data-bd-theme="dark"] #law-index-table td:nth-child(2){background:#262626 !important}
html[data-bd-theme="dark"] #law-index-table th:first-child{background:#372b15 !important}
/* v4.9.45 FIX: the second selector here was NOT scoped to dark mode, so it painted
   every first cell of the laws table #262626 in LIGHT mode too — dark row numbers
   on a dark fill. Both selectors are now scoped. */
html[data-bd-theme="dark"] #law-index-table th:first-child,
html[data-bd-theme="dark"] #law-index-table td:first-child{background:#262626 !important}
html[data-bd-theme="dark"] #law-index-table th:nth-child(2){background:#372b15 !important}
/* v4.9.45: the dark rules above set only backgrounds; without a light text colour the
   row numbers/names inherited the article's dark ink and vanished on the dark fills. */
html[data-bd-theme="dark"] #law-index-table td,
html[data-bd-theme="dark"] #law-index-table th{color:#f2ead6 !important}
html[data-bd-theme="dark"] .callout-advocate{background:#152337 !important}
html[data-bd-theme="dark"] .callout-buyer{background:#153615 !important}
html[data-bd-theme="dark"] .callout-draft{background:#261537 !important}
html[data-bd-theme="dark"] .callout-historical{background:#372e15 !important}
html[data-bd-theme="dark"] .callout-legal{background:#152337 !important}
html[data-bd-theme="dark"] .callout-mistake{background:#371515 !important}
html[data-bd-theme="dark"] .callout-practical{background:#153615 !important}
html[data-bd-theme="dark"] .callout-professional{background:#372915 !important}
html[data-bd-theme="dark"] .callout-redflag{background:#371515 !important}
html[data-bd-theme="dark"] .callout-warning{background:#372815 !important}
html[data-bd-theme="dark"] .danger{background:#371a15 !important}
html[data-bd-theme="dark"] .dd-cond-flag{background:#372f15 !important}
html[data-bd-theme="dark"] .dd-item.cond .dd-na-btn{background:#372f15 !important}
html[data-bd-theme="dark"] .dd-na-btn.active{background:#312a1a !important}
html[data-bd-theme="dark"] .fab-label{background:#262626 !important}
html[data-bd-theme="dark"] .form-chk-done{background:#263715 !important}
html[data-bd-theme="dark"] .layer-legal{background:#152637 !important}
html[data-bd-theme="dark"] .layer-practical{background:#372f15 !important}
html[data-bd-theme="dark"] .layer-professional{background:#2d271e !important}
html[data-bd-theme="dark"] .layer-redflags{background:#371515 !important}
html[data-bd-theme="dark"] .layer-simple{background:#153722 !important}
html[data-bd-theme="dark"] .matrix-depends{background:#162635 !important}
html[data-bd-theme="dark"] .matrix-no{background:#371515 !important}
html[data-bd-theme="dark"] .matrix-permit{background:#152337 !important}
html[data-bd-theme="dark"] .matrix-restricted{background:#373015 !important}
html[data-bd-theme="dark"] .matrix-table tbody tr:nth-child(even) td:first-child{background:#372a15 !important}
html[data-bd-theme="dark"] .matrix-yes{background:#153720 !important}
html[data-bd-theme="dark"] .risk-critical{background:#371515 !important}
html[data-bd-theme="dark"] .risk-high{background:#372715 !important}
html[data-bd-theme="dark"] .risk-low{background:#153720 !important}
html[data-bd-theme="dark"] .risk-moderate{background:#373015 !important}
html[data-bd-theme="dark"] .risk-unknown{background:#162635 !important}
html[data-bd-theme="dark"] .status-C{background:#153720 !important}
html[data-bd-theme="dark"] .status-CONST{background:#152337 !important}
html[data-bd-theme="dark"] .status-D{background:#251537 !important}
html[data-bd-theme="dark"] .status-DOC{background:#282824 !important}
html[data-bd-theme="dark"] .status-H{background:#373015 !important}
html[data-bd-theme="dark"] .status-J{background:#371528 !important}
html[data-bd-theme="dark"] .status-M{background:#162635 !important}
html[data-bd-theme="dark"] .status-N{background:#372815 !important}
html[data-bd-theme="dark"] .status-P{background:#15371f !important}
html[data-bd-theme="dark"] .status-PORTAL{background:#152937 !important}
html[data-bd-theme="dark"] .status-R{background:#152337 !important}
html[data-bd-theme="dark"] .status-S{background:#152337 !important}
html[data-bd-theme="dark"] .tip{background:#263715 !important}
html[data-bd-theme="dark"] .verify-box{background:#352b17 !important}
html[data-bd-theme="dark"] /* Callouts */ .warn{background:#372d15 !important}
html[data-bd-theme="dark"] .danger b{color:#eaa099 !important}
html[data-bd-theme="dark"] .dd-na-btn.active{color:#d3c9b0 !important}
html[data-bd-theme="dark"] .fab-label{color:#c1c1c1 !important}
html[data-bd-theme="dark"] .form-chk-done b{color:#c9e49f !important}
html[data-bd-theme="dark"] .layer-legal .layer-title{color:#96abec !important}
html[data-bd-theme="dark"] .layer-practical .layer-title{color:#ecb796 !important}
html[data-bd-theme="dark"] .layer-professional .layer-title{color:#bebec5 !important}
html[data-bd-theme="dark"] .layer-redflags .layer-title{color:#ec9696 !important}
html[data-bd-theme="dark"] .layer-simple .layer-title{color:#9ae9b8 !important}
html[data-bd-theme="dark"] .matrix-no{color:#ec9696 !important}
html[data-bd-theme="dark"] .matrix-permit{color:#96abec !important}
html[data-bd-theme="dark"] .matrix-restricted{color:#ecb796 !important}
html[data-bd-theme="dark"] .matrix-yes{color:#9ae9b8 !important}
html[data-bd-theme="dark"] .risk-critical{color:#ec9696 !important}
html[data-bd-theme="dark"] .risk-high{color:#ecac96 !important}
html[data-bd-theme="dark"] .risk-low{color:#9ae9b8 !important}
html[data-bd-theme="dark"] .risk-moderate{color:#ecb796 !important}
html[data-bd-theme="dark"] .status-C{color:#9ae9b8 !important}
html[data-bd-theme="dark"] .status-CONST{color:#a1bde1 !important}
html[data-bd-theme="dark"] .status-D{color:#c598ea !important}
html[data-bd-theme="dark"] .status-DOC{color:#c5c2be !important}
html[data-bd-theme="dark"] .status-H{color:#ecb796 !important}
html[data-bd-theme="dark"] .status-J{color:#ec96ae !important}
html[data-bd-theme="dark"] .status-M{color:#b5bfcd !important}
html[data-bd-theme="dark"] .status-N{color:#ecac96 !important}
html[data-bd-theme="dark"] .status-P{color:#9ae9b8 !important}
html[data-bd-theme="dark"] .status-PORTAL{color:#96ceec !important}
html[data-bd-theme="dark"] .status-R{color:#96abec !important}
html[data-bd-theme="dark"] .status-S{color:#96abec !important}
html[data-bd-theme="dark"] .tip b{color:#c9e49f !important}
html[data-bd-theme="dark"] a[href]:after{color:#c1c1c1 !important}

/* ==========================================================================
   v4.9.37 — dark mode: tables and a general content safety net.
   The ORERA projects table (2,141 rows) gets its colours from its own
   stylesheet, so alternate rows ended up dark with dark text — invisible.
   These rules make every table inside content legible in dark mode, and
   [data-bd-fix] lets the script below correct anything else it finds.
   ========================================================================== */
html[data-bd-theme="dark"] .entry-content table,
html[data-bd-theme="dark"] .bd-tool table { background:#1B2320 !important; }
html[data-bd-theme="dark"] .entry-content table tr,
html[data-bd-theme="dark"] .bd-tool table tr { background:#1B2320 !important; }
html[data-bd-theme="dark"] .entry-content table td,
html[data-bd-theme="dark"] .entry-content table th,
html[data-bd-theme="dark"] .bd-tool table td,
html[data-bd-theme="dark"] .bd-tool table th {
    background:#1B2320 !important; color:var(--ink) !important;
}
/* keep the zebra so long tables stay scannable */
html[data-bd-theme="dark"] .entry-content table tr:nth-child(even) td,
html[data-bd-theme="dark"] .entry-content table tr:nth-child(even) th,
html[data-bd-theme="dark"] .bd-tool table tr:nth-child(even) td,
html[data-bd-theme="dark"] .bd-tool table tr:nth-child(even) th { background:#222C27 !important; }
html[data-bd-theme="dark"] .entry-content table thead th,
html[data-bd-theme="dark"] .bd-tool table thead th { background:#232A2E !important; color:var(--ink) !important; }
/* badges/pills inside cells keep their own colour, which our generated rules set */
html[data-bd-theme="dark"] .entry-content table td > span,
html[data-bd-theme="dark"] .entry-content table td > a,
html[data-bd-theme="dark"] .bd-tool table td > span,
html[data-bd-theme="dark"] .bd-tool table td > a { color:inherit; }

/* script-applied corrections (see fixContent in accessibility.js) */
html[data-bd-theme="dark"] [data-bd-fix="bg"] { background-color:#1E2622 !important; }
html[data-bd-theme="dark"] [data-bd-fix="bgi"] { background-image:none !important; background-color:#1E2622 !important; }
html[data-bd-theme="dark"] [data-bd-fix="fg"] { color:#E4EAE6 !important; }
html[data-bd-theme="dark"] [data-bd-fix="fg-light"] { color:#E4EAE6 !important; }
html[data-bd-theme="dark"] [data-bd-fix="fg-dark"] { color:#16211C !important; }
html[data-bd-theme="dark"] [data-bd-fix="both"] { background-color:#1E2622 !important; color:#E4EAE6 !important; }

/* ==========================================================================
   v4.9.42/43 — Knowledge Centre banner: 60% title (left) + 40% hero portrait (right).
   Replaces the old full-bleed .page-banner--photo (white text over a photo,
   which risked contrast). The portrait is cropped to fill its column and
   positioned to keep the head in frame; all text sits on the theme surface.
   ========================================================================== */
.kc-banner {
    display: grid;
    /* title 60% on the LEFT, hero portrait 40% on the RIGHT */
    grid-template-columns: minmax(0, 1fr) 40%;
    column-gap: 5%;
    align-items: stretch;
    /* v4.9.44 — FIXED height so the portrait panel is the same on every post.
       Without this the panel stretched to the title's height, so a short title
       gave a shorter panel and a visibly different crop of the cut-out. */
    min-height: clamp(300px, 25.5vw, 400px);
    background: linear-gradient(120deg, var(--warm-ivory) 0%, var(--ivory) 100%);
    border-bottom: 1px solid var(--champagne);
    box-shadow: inset 0 -4px 0 var(--gold-soft);
    overflow: hidden;
}
.kc-banner__photo {
    /* v4.9.44 — a padded copy of the hero portrait (6% transparent headroom
       baked in above the crown) so the head and hair are never clipped.
       Anchored to the top, so that padding becomes visible space above the head. */
    background-image: url("assets/img/kc-banner-portrait.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 0;
    min-height: clamp(240px, 24vw, 360px);
}
.kc-banner__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(1.6rem, 3.4vw, 2.8rem);
    padding-left: clamp(1.25rem, 3vw, 2.75rem);
    padding-right: 0;   /* the gap is the grid column-gap now */
    min-width: 0;
}
.kc-banner__body h1 {
    color: var(--charcoal);
    font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.9rem);
    line-height: 1.16;
    letter-spacing: -0.01em;
    margin: 0 0 0.35em;
    text-wrap: balance;
}
.kc-banner__body .hero__eyebrow { margin: 0 0 0.7rem; font-size: var(--fs-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.kc-banner__body .hero__eyebrow a { color: inherit; text-decoration: none; }
.kc-banner__body .hero__eyebrow a:hover { color: var(--gold-deep); }
.kc-banner__body .breadcrumbs { margin: 0 0 0.6rem; }
.kc-banner__body .entry-meta { margin-top: 0.2rem; }

@media (max-width: 860px) {
    .kc-banner { grid-template-columns: 1fr; }
    /* v4.9.47 — same stacking for the unified page banner */
    .page-banner { grid-template-columns: 1fr; }
    .page-banner > .container { order: -1; padding-right: clamp(1.25rem, 3vw, 2.75rem); }
    .page-banner::after { min-height: 210px; }
    .kc-banner__photo { min-height: 210px; background-position: 50% 0; }
    .kc-banner__body { order: -1; padding-right: clamp(1.25rem, 3vw, 2.75rem); }   /* title above the portrait on phones */
}


/* =====================================================================
   v4.9.57c — MOBILE SUBMENU, FINAL OVERRIDE.
   The Knowledge Centre submenu was rendering as the desktop absolutely
   positioned panel on phones: centred on its parent, min-width 240px, so
   on a narrow screen it overflowed both edges and only fragments of the
   items showed. This block is last in the file and uses !important, so it
   wins over every earlier rule regardless of order or specificity.
   ===================================================================== */
@media (max-width: 1020px) {
    .primary-menu .menu-item-has-children > .sub-menu {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        max-height: none !important;
        flex-basis: auto !important;
        box-shadow: none !important;
        border: 0 !important;
        border-left: 2px solid var(--gold-soft) !important;
        border-radius: 0 !important;
        padding: 0 0 0 1rem !important;
        margin: 0.2em 0 0.4em !important;
        display: none;
    }
    .primary-menu .menu-item-has-children.is-open > .sub-menu { display: block !important; }
    .primary-menu .sub-menu li { display: block !important; width: 100% !important; }
    .primary-menu .sub-menu a {
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }
}

/* =====================================================================
   v4.9.59 — CAREERS & OPPORTUNITIES
   The hub page, the four opportunity cards, and the apply page form.
   ===================================================================== */
.careers .page-banner__lede,
.careers-apply .page-banner__lede { max-width: 60ch; }

.career-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin: var(--space-5) 0;
}

.career-card {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius);
    padding: var(--space-4);
    box-shadow: var(--shadow);
}

.career-card__title {
    margin: 0 0 0.25rem;
    font-size: 1.22rem;
    line-height: 1.25;
}

.career-card__strap {
    margin: 0 0 0.85rem;
    font-size: var(--fs-sm);
    color: var(--gold-deep);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.career-card__summary {
    margin: 0 0 1rem;
    color: var(--body);
}

.career-card__meta,
.career-meta {
    font-size: var(--fs-sm);
    color: var(--muted);
    margin: 0 0 1.1rem;
}

.career-card__label {
    text-transform: uppercase;
    letter-spacing: 0.13em;
    font-size: var(--fs-xs);
    color: var(--gold-deep);
    font-weight: 700;
    margin-right: 0.4em;
}

.career-card__cta { margin: auto 0 0; }
.career-card__cta .btn { display: block; width: 100%; text-align: center; }
.bd-file-list { display: flex; flex-direction: column; gap: 0.5rem; }
.bd-add-file { margin-top: 0.6rem; }
.field__note { font-size: var(--fs-xs); font-weight: 600; color: var(--accent); margin: 0.35em 0 0; }
.field__count { font-size: var(--fs-xs); color: var(--muted); margin: 0.35em 0 0; }
.field__count.is-met { color: var(--ok); }
.careers h2, .careers-apply h2 { font-weight: 700; }
.career-role { margin-top: 0; text-align: center; }
.entry-content .career-role__strap { color: var(--muted); margin: 0 0 var(--space-3); text-align: center; }

.career-list { margin: 0 0 var(--space-4); padding-left: 1.15rem; }
.career-list li { margin: 0 0 0.5rem; }

.apply-intro p { margin-top: 0; }

.careers-apply .callout { margin: var(--space-4) 0; }

.careers-apply form {
    background: var(--warm-ivory);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin: var(--space-4) 0 var(--space-3);
}

.careers-apply .field__check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: var(--fs-sm);
    line-height: 1.6;
}

.careers-apply .field__check input { margin-top: 0.3rem; flex: none; }

.careers-apply .required { color: #b3261e; font-weight: 700; }

.careers-apply .form-status {
    border-radius: var(--radius);
    padding: var(--space-3);
    margin: var(--space-3) 0;
    border: 1px solid var(--line);
    font-size: var(--fs-sm);
}

.careers-apply .form-status--ok { background: #f0f7ee; border-color: #bfd8b5; }
.careers-apply .form-status--err { background: #fdf3f2; border-color: #e5bcb8; }

.career-back { margin-top: var(--space-4); font-size: var(--fs-sm); }

@media (max-width: 680px) {
    .career-grid { grid-template-columns: 1fr; }
    .careers-apply form { padding: var(--space-3); }
}

/* ---------------------------------------------------------
   v4.9.78 — CORE WEB VITALS: defer rendering of heavy
   below-the-fold blocks until they approach the viewport.
   content-visibility skips their layout/paint during initial
   load (faster first paint / lower main-thread cost); the
   "auto" intrinsic size makes the browser reuse the real
   measured height after first render, so nothing shifts.
   --------------------------------------------------------- */
.team-grid,
.kc-home,
.reviews-wrap,
.partner-strip {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}
.team-grid { contain-intrinsic-size: auto 1200px; }

/* v4.9.89 — Embedded full-document articles (Knowledge Centre posts whose
   content ships its own <style> with a :root block and bare element rules)
   leak those rules out of the article and into the theme's own chrome:
   the site header took the article's 54px/45px padding, the primary menu,
   breadcrumbs and the theme's table of contents were dragged into the
   article's sticky bar, and the article's palette variables replaced the
   theme's. Re-assert the theme's own chrome below; the article's own
   content keeps its intended look. */
html body {
    background: #F3EFE3;
    color: var(--body);
    font-size: var(--fs-base);
    line-height: 1.75;
}
.site-header { padding: 0; text-align: left; }

/* Palette: restore the theme's tokens on its own chrome only, so the
   article's :root overrides never reach the header, footer or contact rail. */
.site-header-stack,
.site-footer,
.float-rail,
.bd-toc {
    --paper: #FAFAF7;
    --ivory: #F3EFE3;
    --gold: #145A43;
    --gold-deep: #104532;
    --gold-soft: #C2A56B;
    --gold-faint: #EAF0EC;
    --charcoal: #303532;
    --ink: #303532;
    --body: #3A403C;
    --muted: #5C6660;
    --line: #E5E1D5;
    --line-dark: #D9D4C4;
    --accent: #145A43;
    --radius: 5px;
    --font-serif: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Never let the article's bare `nav { position: sticky }` turn the theme's
   navigation landmarks (or the article's own quick-nav) into a floating bar. */
.site-navigation,
.breadcrumbs,
.bd-toc,
.entry-content nav {
    position: static;
    top: auto;
}
.site-navigation,
.breadcrumbs {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
}
.site-navigation a,
.breadcrumbs a {
    padding: 0;
    border-radius: 0;
}

/* v4.9.90 — the embedded article's leaked CSS was squeezing the theme's
   "Further reading" block (the related-articles section rendered by
   single.php) into a few character-wide columns. Re-assert the theme's own
   layout for that block, independent of whatever the article defines for
   the generic .grid / .related / .card names it reuses. */
.container > .related {
    width: 100%;
    max-width: none;
    flex: 1 0 100%;
    grid-column: 1 / -1;
}
.related { display: block; }
.related .grid { display: grid; gap: var(--space-3); }
.related .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.related .card { min-width: 0; max-width: none; }
@media (max-width: 1024px) { .related .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .related .grid--3 { grid-template-columns: 1fr; } }

/* v4.9.91 — On embedded-article pages the article's leaked CSS can narrow
   the theme's content column, which squeezed the "In this article" table of
   contents into two overlapping columns. Re-assert the theme's own widths
   (higher specificity than the article's generic .container / article / ol
   rules) and make the TOC's multi-column layout fit the space it has
   instead of forcing two columns. */
body .container { width: 100%; max-width: var(--container); }
.article--embedded { max-width: none; }
.bd-toc, .bd-toc ol { width: 100%; max-width: none; }
.bd-toc ol { columns: 16rem; column-gap: var(--space-4); }
@media (max-width: 680px) { .bd-toc ol { columns: 1; } }

/* v4.9.92 — REAL cause of the overlapping "In this article" contents list.
   The embedded article's bare `nav a { white-space: nowrap; padding: 8px 14px;
   border-radius: var(--radius-pill); font-weight: 600 }` leaks onto the theme's navigation
   links. On the contents list the nowrap made every entry a single long line,
   which ran across into the neighbouring column and printed over it. Re-assert
   the theme's own link behaviour for the contents list (and the contact rail). */
.bd-toc a,
.bd-toc li {
    white-space: normal;
    overflow-wrap: break-word;
}
.bd-toc a {
    padding: 0;
    border-radius: 0;
    font-weight: inherit;
}
.float-rail a {
    padding: 0;
    white-space: normal;
}

/* =====================================================================
   v4.9.96 - DARK MODE: COVERAGE FOR THE THEME'S OWN CHROME.

   1) The v4.9.89 shield re-declares the LIGHT palette on the header,
      footer, contact rail and table of contents, so an embedded
      article's leaked :root block cannot repaint them. Because that block
      sits later in the file it ALSO overrode the dark palette inside
      those four elements, so in dark mode the header and its menu stayed
      light (--paper #FAFAF7) while the page around them went dark.
      Re-assert the dark palette on the same four elements in dark mode.
   2) The dark-mode button rules only covered the legacy .btn-primary
      name, not the theme's own .btn--primary / .btn--gold, so the header
      button kept near-white text on a gradient that turns light in dark
      mode - close to invisible.
   3) The pagination's current page used --charcoal/--ivory, which invert
      in dark mode and produced a white chip with dark numbers.
   ===================================================================== */
html[data-bd-theme="dark"] .site-header-stack,
html[data-bd-theme="dark"] .site-footer,
html[data-bd-theme="dark"] .float-rail,
html[data-bd-theme="dark"] .bd-toc {
    --paper:#14171A; --ivory:#191D20; --warm-ivory:#191D20;
    --cream:#1E2327; --champagne:#232A2E;
    --gold:#3FA57E; --gold-deep:#6FD3AC; --gold-soft:#8FBFA6; --gold-faint:#1B2A25;
    --charcoal:#EDF1EF; --ink:#EDF1EF; --body:#DCE3DF; --muted:#A9B4AE;
    --line:#2C3438; --line-dark:#39434A;
    --accent:#3FA57E; --accent-dark:#6FD3AC;
    --emerald-light:#7FD8B4; --emerald-bright:#3FA57E; --emerald:#3FA57E;
    --emerald-deep:#6FD3AC; --emerald-shadow:#0A1F18;
    --pastel-blue:#1B2A33; --light-yellow:#2A2A1E;
    --ok:#6FCF97; --error:#F08A8A;
    --white:#14171A; --text-muted:#A9B4AE;
    --border-gold:#3A4A43; --border-soft:#2C3438;
    --champagne-light:#1B2320; --warm-yellow:#1B2A25; --gold-bright:#3FA57E;
    --charcoal-soft:#DCE3DF; --navy:#EDF1EF; --bright:#1B2A25; --border:#2C3438;
}

/* Buttons: the theme's own BEM names, which the dark rules missed. */
html[data-bd-theme="dark"] .btn--primary,
html[data-bd-theme="dark"] .btn--gold {
    background: var(--accent) !important;
    background-image: none !important;
    color: #08110D !important;
    border-color: var(--accent) !important;
}
html[data-bd-theme="dark"] .btn--outline {
    background: transparent !important;
    color: var(--gold-deep) !important;
    border-color: var(--gold-soft) !important;
}

/* Pagination: a white chip with dark numbers reads as a glitch on a dark page. */
html[data-bd-theme="dark"] .pagination .page-numbers.current {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #08110D !important;
}

/* v4.9.96 (cont.) - two consequences of the dark palette re-assertion above. */

/* The footer's "Get in touch" is .btn--ghost-light, which is coloured with
   --ivory because it is designed to sit on the dark emerald footer. In dark
   mode --ivory becomes a near-black surface token, so inside the footer it
   turned into dark text on a dark ground. Pin it to the light value it is
   meant to have; in light mode it was already ivory, so this changes nothing. */
html[data-bd-theme="dark"] .btn--ghost-light {
    color: #F3EFE3 !important;
    border-color: rgba(250, 248, 242, 0.55) !important;
    background: transparent !important;
}
html[data-bd-theme="dark"] .btn--ghost-light:hover {
    color: var(--gold-soft) !important;
    border-color: var(--gold-soft) !important;
}

/* Safety net: the theme's own fields set background: var(--paper), but any
   input that is NOT inside .field (a plugin form, the core comment form, a
   bare search box) would otherwise keep the browser's white field with text
   inherited as light. Give every text field the dark surface and light ink. */
html[data-bd-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
html[data-bd-theme="dark"] textarea,
html[data-bd-theme="dark"] select {
    background-color: var(--paper) !important;
    color: var(--ink) !important;
    border-color: var(--line-dark) !important;
}

/* =====================================================================
   v4.9.97 - DARK MODE: the Knowledge Centre articles' OWN components.

   Some KC posts ship a full stylesheet of their own (a :root block plus
   bare element rules). The theme's dark tokens reach the parts that use
   shared variables, but two of the article's own components do not flip:

   (a) its quick-navigation bar - `nav { background: rgba(251,248,241,.92) }`
       is a hard-coded light bar, and its links are coloured with
       --charcoal-soft, which DOES flip to a light value. Light text on a
       light bar: measured contrast 1.23:1, effectively invisible.
   (b) its `.btn.dark` - `background: var(--charcoal)` flips to a light
       surface, while `color: var(--text-dark)` is the article's own
       hard-coded light value. Light on light: measured 1.00:1.

   Both are scoped to .article--embedded, which only wraps the embedded
   KC articles, so the theme's own .bd-toc (a sibling, not a child) and
   every other page are untouched.
   ===================================================================== */
html[data-bd-theme="dark"] .article--embedded nav {
    background: var(--paper) !important;
    border-bottom-color: var(--line) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html[data-bd-theme="dark"] .article--embedded nav a {
    color: var(--body) !important;
}
html[data-bd-theme="dark"] .article--embedded nav a:hover {
    background: var(--ivory) !important;
    color: var(--gold-deep) !important;
}
html[data-bd-theme="dark"] .article--embedded .btn.dark,
html[data-bd-theme="dark"] .article--embedded .btn.gold {
    background: var(--accent) !important;
    background-image: none !important;
    color: #08110D !important;
    border-color: var(--accent) !important;
}

/* =====================================================================
   v4.9.98 - THE EMBEDDED ARTICLE'S BARE RULES REACHING THE THEME'S CHROME.

   The KC article stylesheet is scoped to :root and bare element names, so
   any theme component sharing a name is restyled by it. The v4.9.89 shield
   re-asserted the palette and the navigation landmarks, but two names were
   missed. This is the complete leak surface - everything the article's
   selectors can reach that the theme had not already covered:

   (a) `.float-rail` is a <nav>. The article sets
       `nav{background:rgba(251,248,241,.92); backdrop-filter:blur(12px)}`
       and the rail declares no background of its own, so on those pages the
       floating contact buttons sat inside a light translucent panel - the
       "white box" - in BOTH modes.
   (b) The article defines `.btn{background:var(--white);
       color:var(--gold-deep); border:1px solid var(--gold)}`. That is the
       same class name as the theme's own button and it comes later in the
       cascade at equal specificity, so it overrode .btn--primary/.btn--gold/
       .btn--outline/.btn--ghost-light on every embedded-article page - in
       LIGHT mode too. Re-asserted with doubled specificity (.btn.btn--primary),
       which outranks the article's single class without affecting any other
       page.
   ===================================================================== */
.float-rail {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
}
.btn.btn--primary,
.btn.btn--gold {
    background: linear-gradient(180deg, var(--emerald-bright) 0%, var(--emerald) 52%, var(--emerald-deep) 100%);
    color: #FAFAF7;
}
.btn.btn--primary:hover,
.btn.btn--gold:hover {
    background: linear-gradient(180deg, #2A9468 0%, #176549 52%, #124A37 100%);
    color: #FAFAF7;
}
.btn.btn--outline { border-color: var(--gold); color: var(--gold-deep); background: transparent; }
.btn.btn--outline:hover { background: var(--gold); color: #fff; }
.btn.btn--ghost-light { border-color: rgba(250, 248, 242, 0.55); color: var(--ivory); background: transparent; }
.btn.btn--ghost-light:hover { border-color: var(--gold-soft); color: var(--gold-soft); }

/* v4.9.98 (cont.) - the article also hard-codes two dark ink colours inline
   (its own --charcoal-soft #4a4038 and --text-muted #6b5d50). The dark block
   above lists the other hard-coded values but not these two, so any element
   carrying them inline stayed dark on a dark page. */
html[data-bd-theme="dark"] .entry-content [style*="color:#4a4038"],
html[data-bd-theme="dark"] .entry-content [style*="color: #4a4038"],
html[data-bd-theme="dark"] .entry-content [style*="color:#6b5d50"],
html[data-bd-theme="dark"] .entry-content [style*="color: #6b5d50"],
html[data-bd-theme="dark"] .bd-tool [style*="color:#4a4038"],
html[data-bd-theme="dark"] .bd-tool [style*="color: #4a4038"],
html[data-bd-theme="dark"] .bd-tool [style*="color:#6b5d50"],
html[data-bd-theme="dark"] .bd-tool [style*="color: #6b5d50"] {
    color: var(--ink) !important;
}


/* ---------------------------------------------------------
   v4.9.103 — contact form: country-code selector beside the
   phone number, and a visible mark on every mandatory label.
   The row decides for itself: side by side when there is room,
   stacked when there is not, so the number is never squeezed.
   --------------------------------------------------------- */
.phone-row { display: flex; gap: 0.5rem; align-items: stretch; flex-wrap: wrap; }
.phone-row select { flex: 0 0 auto; width: auto; min-width: 8.5rem; max-width: 13rem; }
.phone-row input[type="tel"] { flex: 1 1 11rem; min-width: 0; }
.field .required { color: var(--error); margin-left: 0.15em; }


/* ---------------------------------------------------------
   v4.9.105 — the header's Translate and Accessibility controls
   are symbols only. The words moved into aria-labels, so nothing
   is lost to a screen reader; the glyph itself is aria-hidden.
   --------------------------------------------------------- */
/* Scoped to both classes so accessibility.css's mobile padding rule
   (equal specificity, loaded later) cannot undo the square shape. */
.bd-translate__btn.bd-icononly,
.bd-a11y__btn-main.bd-icononly {
    width: 2.15rem; height: 2.15rem; padding: 0; gap: 0; justify-content: center;
}
.bd-translate__btn.bd-icononly .bd-ui-icon,
.bd-a11y__btn-main.bd-icononly .bd-ui-icon { width: 18px; height: 18px; display: block; }

/* ============================================================
   v4.9.116 - HERO LAYOUT, CONSOLIDATED.

   The single source of truth for the hero's structure. The hero had
   been defined four separate times and patched across six media
   blocks - about twenty rules overriding one another in turn. This
   block is placed LAST so it decides the layout on its own; the
   superseded rules remain above it and can be pruned in a later,
   lower-risk cleanup pass.

   Desktop (>=861px): the copy sits beside the portrait, lifted a
   little so the h1 begins at face level; the portrait is centred in
   its column and shifted slightly toward the edge.
   Phone/tablet (<=860px): the copy comes FIRST and the whole
   portrait follows beneath it - never cropped, never ahead of the
   words.
   ============================================================ */
.hero__inner {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
    padding-block: clamp(3rem, 7vw, 5.5rem);
}
.hero .hero__copy { text-align: left; }
.hero h1 { max-width: none; margin-inline: 0; text-align: left; }
.hero .hero__tagline { text-align: left; }
.hero__lede {
    font-size: 1.26rem;
    line-height: 1.7;
    color: var(--body);
    max-width: 34rem;
    margin-inline: 0;
    margin-bottom: var(--space-4);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.hero .hero__actions { justify-content: flex-start; }

/* the portrait: whole, never cropped */
.hero .hero__photo {
    position: relative;
    order: 0;
    align-self: center;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    aspect-ratio: auto;
    transform: none;
}
.hero .hero__photo img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 18px 26px rgba(58, 48, 34, 0.10));
}
/* the halo behind him */
.hero .hero__photo::before {
    content: "";
    display: block;
    position: absolute;
    inset: -5% -13% -3% -13%;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(214, 186, 126, 0.36) 0%, rgba(214, 186, 126, 0.15) 50%, rgba(214, 186, 126, 0.00) 78%);
}
/* and the shadow on the floor */
.hero .hero__photo::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 1.5%;
    width: 58%;
    height: 30px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(58, 48, 34, 0.30) 0%, rgba(58, 48, 34, 0.12) 58%, rgba(58, 48, 34, 0.00) 80%);
    filter: blur(6px);
}

@media (min-width: 861px) {
    .hero__inner { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
    .hero .hero__copy { margin-top: clamp(0.25rem, 1.5vh, 1rem); }
    .hero .hero__photo {
        width: min(100%, 460px);
        margin-left: auto;
        margin-right: 0;
        transform: translateX(5%);
    }
}

@media (max-width: 860px) {
    /* The hero fills the OPENING FRAME on a phone: the words, then the whole
       cut-out beneath them, so the portrait is visible the moment the site
       opens without any scrolling. The photograph takes whatever height is
       left after the copy, and is scaled to fit it - whole, never cropped. */
    .hero__inner {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        min-height: calc(100vh - 100px);     /* fallback for older browsers */
        min-height: calc(100svh - 100px);    /* the sticky header, plus a hair */
        padding-block: 0.9rem 1.25rem;
    }
    .hero__copy { flex: 0 0 auto; }

    /* a phone type scale, so the words do not eat the frame */
    .hero h1 { font-size: clamp(1.5rem, 6.4vw, 1.95rem); line-height: 1.1; }
    .hero__tagline { font-size: 0.66rem; letter-spacing: 0.13em; margin-bottom: 0.55rem; }
    .hero__lede {
        font-size: 0.98rem;
        line-height: 1.5;
        max-width: none;
        margin-bottom: 0.8rem;
    }
    .hero__actions { gap: 0.45rem; }
    .hero__actions .btn { padding: 0.58rem 0.85rem; font-size: 0.76rem; }

    /* the words first, then the whole portrait beneath them */
    .hero .hero__photo {
        order: 0;
        flex: 1 1 0;            /* basis 0, so it takes only what is left */
        min-height: 140px;
        width: 100%;
        margin: 0;
        transform: none;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }
    .hero .hero__photo img {
        width: auto;
        height: 100%;
        max-width: 100%;
        object-fit: contain;
    }
}

/* ---------------------------------------------------------
   v4.9.121 - TEAM PROFILE LAYOUT
   The banner carries only the label "Team Member". The person's
   name, qualifications and designation sit under their photograph,
   in that order; the panel beside the photograph carries the
   profile description. Nothing is labelled on the front end - each
   line simply appears when the field has been filled in.
   --------------------------------------------------------- */
.page-banner__label {
    color: var(--charcoal);
    font-family: var(--font-serif);
    font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.9rem);
    line-height: 1.16;
    letter-spacing: -0.01em;
    margin: 0;
    text-wrap: balance;
}
.page-banner--photo .page-banner__label { color: #ffffff; text-shadow: 0 2px 14px rgba(15, 18, 24, 0.55); }
.profile__name {
    font-family: var(--font-serif);
    font-size: clamp(1.35rem, 1rem + 1.1vw, 1.9rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--charcoal);
    margin: 0.9rem 0 0.1em;
}
.profile__quals {
    font-size: var(--fs-sm);
    letter-spacing: 0.03em;
    color: var(--gold-deep);
    margin: 0 0 0.35em;
}
.profile__role {
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}
.profile__about { margin: 0 0 var(--space-4); }
.profile__about p { margin-bottom: 0.8em; }
.profile__about p:last-child { margin-bottom: 0; }
.team-row__bio {
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: 1.6;
    margin: 0.45em 0 0;
    max-width: 60ch;
}

/* ---------------------------------------------------------
   v4.9.123 - TEAM PROFILE, THIRD PASS
   The profile now reads from the top down: the photograph, the
   name, the qualifications and the designation, each centred,
   and beneath them the member's description in the main content
   box, set justified. The content box is the single source of
   the description, which is what lets Rank Math score the page.
   --------------------------------------------------------- */
.profile-page { max-width: 46rem; margin-left: auto; margin-right: auto; }
.profile-page__card { text-align: center; }
.profile-page__photo { width: min(100%, 300px); margin: 0 auto 1.15rem; }
.profile-page__photo img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--radius);
    background: var(--cream);
}
.profile-page__card .profile__name { margin: 0 0 .45rem; text-align: center; }
.profile-page__card .profile__quals { margin: 0 0 .3rem; text-align: center; }
.profile-page__card .profile__role { margin: 0; text-align: center; }
.profile-page__card .team-card__socials { justify-content: center; margin-top: 1.2rem; }
.profile-page__bio {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line-dark);
    text-align: justify;
}
.profile-page__bio > p,
.profile-page__bio > .wp-block-paragraph { text-align: justify; }
.profile-page__bio > p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------
   v4.9.124 - QUALIFICATIONS ON THE TEAM CARD AND ROW
   The qualifications field was never read by bismay_dash_team_card()
   or bismay_dash_team_row(), so it showed on the profile page only.
   Both now print it, between the name and the designation, so the
   homepage cards and the Our Team page carry it too.
   --------------------------------------------------------- */
.team-card__quals {
    font-size: var(--fs-xs);
    color: var(--muted);
    letter-spacing: 0.02em;
    line-height: 1.5;
    margin: -0.15em 0 0.45em;
}
.team-row__quals {
    font-size: var(--fs-xs);
    color: var(--muted);
    letter-spacing: 0.02em;
    line-height: 1.5;
    margin: 0.15em 0 0.25em;
}

/* ---------------------------------------------------------
   v4.9.125/126 - KNOWLEDGE CENTRE "EXPLORE MORE": SMALL, CENTRED
   `.kc-home__more` carried `flex: 1 1 auto` inside the flex foot,
   so each button stretched to the full width of its column. They
   now size to their own label, at the theme's small button size
   (the same values as `.btn--sm`), and sit in the centre of the
   column. v4.9.126 moved them from the left edge to the centre.
   --------------------------------------------------------- */
.kc-home__foot { justify-content: center; }
.kc-home__more {
    flex: 0 0 auto;
    align-self: center;
    justify-content: center;
    padding: 0.6em 1.2em;
    font-size: var(--fs-xs);
    letter-spacing: 0.07em;
}

/* ---------------------------------------------------------
   v4.9.130 - HOMEPAGE ABOUT: photograph full width, text beneath
   The section was a two-column grid with the team photograph in the
   left column and the copy in the right, and the copy was capped
   (`h2` at 30rem, the paragraph at 38rem) so it stopped around half
   the page. The owner asked for the text full width, with the
   photograph full width above it. One column now, in DOM order:
   photograph, then the copy, then the cards, then Our approach.
   --------------------------------------------------------- */
.about-home { grid-template-columns: minmax(0, 1fr); align-items: start; }
.about-home__photo { grid-column: 1 / -1; }
.about-home__photo img { width: 100%; height: auto; }
.about-home__main { grid-column: 1 / -1; }
.about-home__main h2 { max-width: none; }
.about-home__desc { max-width: none; }

/* =====================================================================
   v4.9.131 - THE MOTION LAYER
   ---------------------------------------------------------------------
   Twenty effects. Written for speed first:

   * CSS ONLY wherever the effect can be expressed in CSS - hover states,
     the sheen, the card edge, the underline, the shimmer, the field glow,
     the dark crossfade and the bar fill all cost zero JavaScript.
   * ONLY transform, opacity and background-color are animated. Those run
     on the compositor and never trigger layout or paint. The one exception
     is the reading-progress bar, whose width is written once per frame and
     is a single element.
   * NO library, no second stylesheet, no second script: everything lives
     in the theme's existing style.css and main.js, so there is no extra
     request and nothing new to download.
   * ONE IntersectionObserver, the one the theme already runs for .reveal.
     Nothing here adds a second.
   * Anything that runs on a timer stops when it is off screen.
   * Every start-state is released under prefers-reduced-motion, and the
     theme's existing global reduced-motion rule already collapses every
     transition to 0.01ms.
   ===================================================================== */

/* ---------------------------------------------------------------
   01. RISE & SETTLE - the scroll reveal, given a longer, softer curve
   and a slightly shorter lift. Supersedes the .reveal rule above.
   --------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .72s cubic-bezier(.22,.61,.36,1), transform .72s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-revealed { opacity: 1; transform: none; }

/* 02. STAGGERED LINE-UP - the delay per element is set by main.js from its
   index among its revealed siblings, so no markup has to change. */
.reveal[data-stagger] { transition-delay: var(--stagger, 0ms); }

/* 03. GOLD RULE DRAW - a hairline under a section head, drawn from the left
   when the head arrives. scaleX only, so it stays on the compositor. */
.section-head { position: relative; }
.section-head::after {
    content: ""; position: absolute; left: 0; bottom: -0.9rem;
    width: min(340px, 100%); height: 2px; background: var(--gold-soft);
    transform: scaleX(0); transform-origin: left;
    transition: transform 1.05s cubic-bezier(.65,.05,.36,1) .12s;
}
.section-head.is-revealed::after { transform: scaleX(1); }
.section-head { padding-bottom: 1.2rem; }

/* 04. BUTTON SHEEN - one light sweep on hover. Pure CSS, no JS. */
.btn { position: relative; overflow: hidden; }
.btn::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
    transform: skewX(-18deg); transition: left .72s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
.btn:hover::after, .btn:focus-visible::after { left: 118%; }

/* 05. CARD LIFT WITH A GOLD EDGE - the theme already lifts cards 3px; this
   adds the edge that grows down the left side. */
.card--practice, .card--post, .kc-home__card { position: relative; }
.card--practice::before, .card--post::before, .kc-home__card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--gold-soft); transform: scaleY(0); transform-origin: top;
    transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.card--practice:hover::before, .card--post:hover::before, .kc-home__card:hover::before { transform: scaleY(1); }

/* 06. ICON SETTLE - the theme's icons are filled paths, so a stroke trace is
   not possible without redrawing the icon set. This is the honest substitute:
   the icon eases up and grows very slightly when its card is hovered. */
.card__icon { transition: transform .38s cubic-bezier(.22,.61,.36,1), color .38s ease; }
.card--practice:hover .card__icon, .card--post:hover .card__icon { transform: translateY(-3px) scale(1.08); color: var(--gold); }

/* 07. COUNT-UP FIGURES - the mechanism, ready for the day there is a figure to
   count. Nothing on the site uses it yet; the theme's credentials strip was
   removed in v4.9.75. main.js animates any [data-count-to]. */
[data-count-to] { font-variant-numeric: tabular-nums; }

/* 08. PORTRAIT SETTLE - images inside a revealed block ease up from 1.04.
   transform only, so no reflow. */
.reveal img { transform: scale(1.04); transition: transform 1.5s cubic-bezier(.22,.61,.36,1); }
.reveal.is-revealed img { transform: scale(1); }

/* 09. TAB CROSSFADE - the About and Mission panels fade and lift instead of
   snapping. main.js swaps .hidden for .is-fading so this can transition. */
.ab-tabs__panel { opacity: 0; transform: translateY(10px);
    transition: opacity .42s ease, transform .42s cubic-bezier(.22,.61,.36,1); }
.ab-tabs__panel[hidden] { display: none; }
.ab-tabs__panel.is-shown { opacity: 1; transform: none; }
.ab-tabs__panel:not([hidden]) { opacity: 1; transform: none; }

/* 10. HEADER CONDENSE - the sticky stack tightens and takes a shadow once the
   page has scrolled. The class is set by main.js. */
.site-header-stack { transition: box-shadow .35s ease; }
.site-header-stack.is-condensed { box-shadow: 0 10px 26px -20px rgba(0,0,0,.45); }
.site-header { transition: padding .3s ease; }
.site-header-stack.is-condensed .site-header { padding-top: .35rem; padding-bottom: .35rem; }

/* 11. LINK UNDERLINE DRAW - the theme's text links carry a static underline;
   this one withdraws and returns, so the link reads as pressed. */
.text-link { position: relative; }
.text-link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
    background: var(--gold-soft); transform: scaleX(1); transform-origin: left;
    transition: transform .34s cubic-bezier(.22,.61,.36,1);
}
.text-link:hover::after { transform: scaleX(0); transform-origin: right; }

/* 12. READING PROGRESS - a hairline across the top of a single article. The
   element is added by main.js only on single posts, so no other page pays. */
.bd-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 940;
    background: linear-gradient(90deg, var(--emerald-bright), var(--emerald-deep));
    transform: scaleX(0); transform-origin: left; will-change: transform;
}

/* 13. ON-THIS-PAGE HIGHLIGHT - the outline entry marks itself as the reader
   passes its section. */
.bd-toc li, .bd-toc a { transition: color .35s ease, padding-left .35s cubic-bezier(.22,.61,.36,1); }
.bd-toc .is-current > a, .bd-toc a.is-current { color: var(--gold-deep); font-weight: 600; }

/* 14. ACCORDION EASE - the collapsible tool sections. */
.bd-tool details, .bd-tool .collapsible, .tool-focus details { }
.bd-tool details > summary { transition: color .3s ease; }
.bd-tool details[open] > summary { color: var(--gold-deep); }
.bd-tool details > *:not(summary) { animation: bdAccordion .42s cubic-bezier(.22,.61,.36,1); }
@keyframes bdAccordion { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* 15. BAR FILL - any proportion bar grows to its value when revealed. */
.bd-bar__fill, .calc-box .bar > span { transform: scaleX(0); transform-origin: left;
    transition: transform 1.4s cubic-bezier(.22,.61,.36,1); }
.is-revealed .bd-bar__fill, .calc-box.is-revealed .bar > span { transform: scaleX(1); }

/* 16. SKELETON SHIMMER - a placeholder that breathes while something loads.
   Applied to any element carrying .is-loading, and to the ORERA panel while
   its live data is being fetched. */
.is-loading { position: relative; overflow: hidden; color: transparent !important; }
.is-loading::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--ivory) 0%, var(--cream) 40%, var(--ivory) 80%);
    background-size: 220% 100%; animation: bdShimmer 1.5s linear infinite;
}
@keyframes bdShimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

/* 17. FIELD FOCUS, AND A TICK ON SUCCESS - the enquiry form. */
.field input, .field textarea, .field select {
    transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
    border-color: var(--emerald); box-shadow: 0 0 0 4px rgba(20,90,67,.14);
}
.bd-tick { display: flex; align-items: center; gap: .5rem; color: var(--gold-deep); font-weight: 600; }
/* display:flex, NOT inline-flex - the tick sits on a full-width status bar, and
   inline-flex shrank that bar to its text (measured: 649px in a 1200px column). */
.bd-tick svg { width: 20px; height: 20px; }
.bd-tick svg path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;
    stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30;
    transition: stroke-dashoffset .55s cubic-bezier(.5,.1,.3,1) .1s; }
.is-revealed .bd-tick svg path, .bd-tick.is-drawn svg path { stroke-dashoffset: 0; }

/* 18. DARK-MODE CROSSFADE - REMOVED in v4.9.137 at the owner's request
   ("remove flip the theme animation"); the theme switches instantly again.
   Removing it also cures a fault it caused: `body .card` outranks the theme's
   own `.card`, so its transition list REPLACED the card's and the hover lift
   and shadow had been snapping rather than easing since v4.9.131. */

/* v4.9.136 - card text in dark mode, pinned. Reported twice from a phone that
   the practice cards went dark and the writing vanished; the card surface is
   correct but the text must be pinned light so no other rule can leave it
   dark-on-dark. Scoped to cards only, so nothing else moves. */
html[data-bd-theme="dark"] .card,
html[data-bd-theme="dark"] .card h3,
html[data-bd-theme="dark"] .card h3 a,
html[data-bd-theme="dark"] .card p,
html[data-bd-theme="dark"] .card .card__link { color: var(--ink) !important; }
html[data-bd-theme="dark"] .card p { color: var(--body) !important; }
html[data-bd-theme="dark"] .card .card__foot { color: var(--gold-deep) !important; }
html[data-bd-theme="dark"] .card--practice { background: var(--paper) !important; }

/* 19. BACK TO TOP - eased in once the reader is past the first screen. */
.bd-top {
    position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 930;
    width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    background: linear-gradient(180deg, var(--emerald-bright) 0%, var(--emerald) 52%, var(--emerald-deep) 100%);
    color: #FAFAF7; box-shadow: 0 8px 22px -12px rgba(8,45,35,.5);
    opacity: 0; transform: translateY(14px) scale(.94); pointer-events: none;
    transition: opacity .4s ease, transform .4s cubic-bezier(.22,.61,.36,1);
}
.bd-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 640px) { .bd-top { right: .9rem; bottom: .9rem; } }

/* ---------------------------------------------------------------
   THE +1: THE LOOPING CARD CAROUSEL (Knowledge Centre, and the
   practice-area cards on the homepage). The track is transform-only and the
   timer is stopped whenever the section is off screen, so it costs nothing
   while nobody is looking at it.
   --------------------------------------------------------------- */
.bd-carousel { overflow: hidden; grid-column: 1 / -1; }
.bd-carousel__track {
    display: flex; gap: var(--space-3);
    transition: transform .62s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}
.bd-carousel__track > * { flex: 0 0 calc((100% - var(--space-3)) / 2); min-width: 0; }
/* Cards inside a track are CLIPPED by the track's overflow:hidden, so
   IntersectionObserver never sees the ones off to the right - they would sit
   at opacity 0 for ever and the carousel would slide invisible cards into
   view. (This is exactly what the owner saw on the practice-area cards: it
   looked like a dark-mode fault, but it happens in both themes.) A card in a
   track is always opaque; the track does the moving, not the reveal. */
.bd-carousel__track > .reveal,
.bd-carousel__track > .reveal.is-revealed { opacity: 1; transform: none; }
.bd-carousel__track > .reveal img { transform: none; }
.bd-carousel__dots { grid-column: 1 / -1; display: flex; justify-content: center; gap: .45rem; margin-top: .1rem; }
.bd-carousel__dot {
    width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
    background: var(--line-dark); opacity: .5; cursor: pointer;
    transition: opacity .3s ease, background-color .3s ease, transform .3s ease;
}
.bd-carousel__dot.is-on { background: var(--gold); opacity: 1; transform: scale(1.3); }
@media (max-width: 640px) { .bd-carousel__track > * { flex: 0 0 100%; } }

/* ---------------------------------------------------------------
   REDUCED MOTION - every start-state released. The theme's existing global
   rule already collapses transition and animation durations; this releases
   the properties that begin hidden.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; }
    .bd-carousel__track > .reveal { opacity: 1 !important; transform: none !important; }
    .reveal img { transform: none !important; }
    .section-head::after { transform: scaleX(1) !important; }
    .card--practice::before, .card--post::before, .kc-home__card::before { transform: scaleY(1) !important; }
    .ab-tabs__panel { opacity: 1 !important; transform: none !important; }
    .text-link::after { transform: scaleX(1) !important; }
    .bd-progress { transform: scaleX(1) !important; }
    .bd-bar__fill, .calc-box .bar > span { transform: scaleX(1) !important; }
    .is-loading::after { animation: none; }
    .bd-tick svg path { stroke-dashoffset: 0 !important; }
    .bd-top { opacity: 1 !important; transform: none !important; pointer-events: auto; }
    .bd-carousel__track { transition: none !important; }
    .btn::after { display: none; }
}

/* =====================================================================
   v4.9.138 - DARK-MODE GAPS CLOSED
   ---------------------------------------------------------------------
   Found by a full stylesheet audit. The dark theme works by redefining the
   palette tokens behind html[data-bd-theme="dark"], so anything coloured with
   a LITERAL #hex or rgb() instead of a var() never follows it and stays light
   on a dark page. Each rule below fixes one of those. All are additive and
   scoped to dark mode, so the light theme is untouched.
   ===================================================================== */
html[data-bd-theme="dark"] .bd-sec { background: #1B2320; border-color: #2C3438; }
html[data-bd-theme="dark"] .bd-sec > summary { background: linear-gradient(180deg, #202925, #1B2320); }
html[data-bd-theme="dark"] .bd-sec > summary:hover { background: linear-gradient(180deg, #25302B, #202925); }

html[data-bd-theme="dark"] .bd-share-btn { background: #1B2320; border-color: #2C3438; color: var(--ink); }
html[data-bd-theme="dark"] .bd-share-btn:hover { background: var(--gold-faint); }
/* the tooltip sits on a near-white ground once --charcoal flips, so its own
   near-white text vanished; give it a ground that stays dark in both themes */
html[data-bd-theme="dark"] .bd-share-tip { background: #0E1512; color: #EDF1EF; }

html[data-bd-theme="dark"] .bd-translate__btn:hover { background: #1B2320; border-color: var(--gold-line); color: var(--ink); }

html[data-bd-theme="dark"] .form-status--success { background: #16241B; border-color: #2C523A; color: #9FE0B4; }
html[data-bd-theme="dark"] .form-status--error { background: #2A1717; border-color: #5C2E2E; color: #F0A9A9; }
html[data-bd-theme="dark"] .careers-apply .form-status--ok { background: #16241B; border-color: #2C523A; }
html[data-bd-theme="dark"] .careers-apply .form-status--err { background: #2A1717; border-color: #5C2E2E; }

/* the rail buttons carry brand icon colours on a surface that flips light */
html[data-bd-theme="dark"] .float-rail__btn--whatsapp { border-color: #2C523A; }
html[data-bd-theme="dark"] .float-rail__btn--linkedin,
html[data-bd-theme="dark"] .float-rail__btn--instagram,
html[data-bd-theme="dark"] .float-rail__btn--email { border-color: #33403B; }
html[data-bd-theme="dark"] .go-top:hover { color: #0E1512; }

/* the dark .btn--outline rule used !important on the BASE state, which beat the
   non-important hover rules and left the outline button with no hover response
   at all. The hover state is restated here so it wins. */
html[data-bd-theme="dark"] .btn--outline:hover,
html[data-bd-theme="dark"] .btn.btn--outline:hover {
    background: var(--emerald) !important; color: #FAFAF7 !important; border-color: var(--emerald) !important;
}

/* =====================================================================
   v4.9.144 - THE ROBUST ANSWER: DO NOT LET THE CONTROL DEPEND ON ITS CONTAINER.
   ---------------------------------------------------------------------
   The token table, read straight out of this stylesheet:
     --paper  light #FAFAF7  ->  dark #14171A   (flips)
     --ink    light #303532  ->  dark #EDF1EF   (flips)
     --ivory  light #F3EFE3  ->  dark #191D20   (flips - it is a SURFACE, not ink)
     --charcoal light #303532 -> dark #EDF1EF   (flips)
   Three attempts failed because the control's ground and its ink were being decided
   in different places:
     .140/.141  ink = var(--ivory)  -> dark ink on a dark ground in dark mode.
     .142       ink = literal cream -> pale ink on a LIGHT ground in light mode, because
                                       the popup's button row flips with the theme.
     .143       ink = var(--ink)    -> correct only if the container also flips.
   The fix that cannot break: give the control its OWN ground and its own ink, both
   from flipping tokens, so it is legible on any container in either theme. That is
   what the theme already does for its own secondary buttons.
   The one exception is the compare bar's chips: the bar is dark in BOTH themes, so
   they keep a literal cream ink that must not flip.
   ===================================================================== */
/* =====================================================================
   v4.9.143 - THERE ARE TWO KINDS OF GROUND HERE, AND THEY NEED OPPOSITE FIXES.
   ---------------------------------------------------------------------
   v4.9.140/141 used a surface token (--ivory) as ink -> dark on dark in dark mode.
   v4.9.142 over-corrected to a LITERAL cream -> pale on pale in LIGHT mode, because
   the popup's button row is on a ground that FLIPS with the theme (light in light
   mode, dark in dark mode).
   The correct rule is not "literal" or "token" - it is: MATCH THE INK TO THE GROUND.
     A. A ground that FLIPS  -> the ink must flip too  -> use an ink token (--ink).
        This is the popup's button row and the report's own panels.
     B. A ground that is FIXED dark in both themes -> the ink must be a LITERAL.
        This is the compare bar (#cmpbar), which is dark in light AND dark mode.
   The bar's rules below keep the literal; everything else now uses var(--ink).
   ===================================================================== */
/* =====================================================================
   v4.9.142 - THE LESSON: NEVER USE A SURFACE TOKEN AS AN INK COLOUR.
   ---------------------------------------------------------------------
   v4.9.140/141 wrote these rules with `color: var(--ivory) !important`. That
   looked right and MEASURED right - but only because the specimen was rendered
   in LIGHT mode. --ivory is a SURFACE token: the theme's locked palette flips it
   to #191D20 in dark mode. The owner browses in dark mode, so the chips and the
   outline button were painted DARK on grounds that are permanently dark - still
   invisible, exactly as reported. The theme's own stylesheet already carries this
   warning for --white ("--white is now a surface token, so pin these").
   These grounds (the compare bar, the popup header) are dark in BOTH modes, so
   the ink is now a LITERAL cream that can never flip, and the border a literal
   gold. TEST BOTH MODES, ALWAYS.
   ===================================================================== */
/* =====================================================================
   v4.9.140 - TOOL VISIBILITY, FROM THE OWNER'S CROPS
   ---------------------------------------------------------------------
   The ORERA tool carries its own stylesheet inside the post content. It sets a
   near-black ink on controls, then places some of them on dark grounds - so the
   writing disappears. The tool's own rules:

     #orera-root #cmpbar   { background: var(--charcoal); color: var(--ivory) }
     #orera-root .chip     { background: rgba(255,255,255,.14) }
     #orera-root .btn-line { background: transparent; color: #1c1917 }
     #orera-root input, #orera-root select, #orera-root button { color: var(--text) }

   ...and the tool defines --text as #000000. The bar and the panel it sits on
   are dark, so black ink vanishes. Both places the owner photographed are below.
   Scoped to #orera-root so nothing outside the tool is touched.
   ===================================================================== */

/* 1. THE COMPARE BAR. The project chips and Clear were black on the dark bar.
      Scoped to those two controls only: a bare `#cmpbar button` would outrank the
      .btn-gold rule below (an id + a type beats an id + a class) and repaint the
      gold Compare button with light ink, dropping it to 2.8:1. */
#orera-root #cmpbar .chip { color: #F3EFE3 !important; }
#orera-root #cmpbar .chip { border: 1px solid rgba(255,255,255,.30); }
#orera-root #cmpbar .chip:hover { background: rgba(255,255,255,.28); }

/* 2. THE OUTLINE BUTTON ("Add to compare"). background:transparent, so it takes
      the ground of whatever panel it sits on - and its own ink is #1c1917. On the
      dark panel that is black on dark green. Both places this button appears are
      dark grounds, so light ink is safe here. */
#orera-root .btn-line { background: var(--paper) !important; color: var(--ink) !important; border-color: var(--gold-line) !important; }
#orera-root .btn-line:hover { background: rgba(255,255,255,.12) !important; }

/* 3. The same button inside the compare dialog, which is also a dark panel. */
#orera-root #cmpdlg .btn-line,
#orera-root #dlg .btn-line { background: var(--paper) !important; color: var(--ink) !important; border-color: var(--gold-line) !important; }

/* the two that paint their own light ground keep their own dark ink */
#orera-root .btn-gold { color: #1c1917 !important; }

/* =====================================================================
   v4.9.141 - THE THIRD INVISIBLE BUTTON: "Edit in popup"
   ---------------------------------------------------------------------
   The report popup's header is a dark ground. It carries three controls:
     .btn-gold   "Print project report" - own gold ground, dark ink  -> fine
     #dlgClose   "Close"               - own white ground, dark ink  -> fine
     #dlgCmp     "Edit in popup"       - background:transparent + the tool's
                                          near-black ink -> invisible on the dark
                                          header. Its gold border is the only
                                          thing that shows.
   Targeted by id as well as by class, because an id rule in the tool's own
   stylesheet (id + id = 2,0,0) outranks anything the theme can say about
   .btn-line (id + class = 1,1,0). The two legible buttons are excluded.
   ===================================================================== */
#orera-root #dlgCmp,
#orera-root #cmpdlgCmp,
#orera-root #dlg .modal-head button:not(.btn-gold):not(#dlgClose):not(#cmpdlgClose),
#orera-root #cmpdlg .modal-head button:not(.btn-gold):not(#dlgClose):not(#cmpdlgClose) {
    background: var(--paper) !important;
    color: var(--ink) !important;
    border-color: var(--gold-line) !important;
}
#orera-root #dlgCmp:hover,
#orera-root #cmpdlgCmp:hover { background: rgba(255,255,255,.12) !important; }

/* =====================================================================
   v4.9.145 - THE FEATURED IMAGE ON TOOL PAGES
   ---------------------------------------------------------------------
   single-bd_tool.php now renders the featured image like its sibling templates.
   But the tool's own stylesheet (inside the post content) begins with
     #orera-root { margin-top: calc(-1 * clamp(1.5rem,4vw,3.25rem) - 1px) }
   - a negative pull that assumes the tool is the FIRST thing in the section, so it
   can sit flush under the banner. With an image above it, that pull drags the tool
   up over the image. Neutralise it only when the hero is actually present.
   The theme's stylesheet is loaded BEFORE the tool's inline styles, so !important
   is needed to win; the tool's rule carries none.
   ===================================================================== */
body.single-bd_tool .entry-content #orera-root { margin-top: 0 !important; }

/* =====================================================================
   v4.9.146 - THE TOOL'S OWN BANNER IMAGE, AND THE FADING TITLE BEHIND IT
   ---------------------------------------------------------------------
   The owner: "apart from the featured image there is another image embedded to
   it". He is right. The featured image is the wide banner at the top of a Legal
   Tool page; directly beneath it the ORERA tool prints its OWN banner graphic -
   a cream panel reading "ORERA Projects Information Tool / Real Estate
   Regulatory Authority - Odisha / BISMAY DASH & ASSOCIATES - LEGAL TOOL".
   The same title therefore appears twice, once as a photograph and once as an
   embedded picture. Its class, read from the tool's own stylesheet:
       #orera-root .heroimg { display:block; width:100%; max-width:760px;
                               margin:0 auto 2rem; border-radius:14px; ... }
   Hidden below, on every Legal Tool page.
   v4.9.148 - THE OTHER THREE TOOLS WERE MISSED AT FIRST because their banner is
   not an <img> at all: each wraps an INLINE <svg viewBox="0 0 1200 320"
   role="img"> in <div class="bd-tool-banner" style="max-width:940px;margin:1.75rem
   auto 0">. A class-based rule for .heroimg therefore matched none of them. Both
   classes are covered now. The tool markup was read from the BD content batch
   batch-2026-10-07-tools-slidergreen.txt on Dropbox, which is where the three
   calculators live - the theme never contains it.
   The other three tools are calculators and carry no such image - if a duplicate
   still shows on one of them it is a different element and needs another look.

   SECOND PART: the fading title. The tool's stylesheet opens with
       #orera-root { margin-top: calc(-1 * clamp(1.5rem,4vw,3.25rem) - 1px) }
   a negative pull that assumes the tool is the first thing in the section. It
   drags the tool up over the theme's page banner, which is why the banner's own
   heading shows through as a faint watermark behind the tool's title. On a tool
   page there is now a featured image and a banner above it, so the pull is simply
   removed. (v4.9.145 cancelled it only when the hero image was present; this
   applies always on a tool page.)
   ===================================================================== */
/* the three calculator tools wrap their banner in <div class="bd-tool-banner">
   (found by reading the content batch on Dropbox, since the tool markup lives in
   the post content, not the theme). The ORERA tool uses .heroimg instead. */
body.single-bd_tool .bd-tool-banner,
body.single-bd_tool .bd-tool .bd-tool-banner,
body.single-bd_tool .heroimg,
body.single-bd_tool #orera-root .heroimg,
body.single-bd_tool .bd-tool .heroimg { display: none !important; }

/* =====================================================================
   v4.9.147 - THE FAINT TITLE INSIDE THE TOOL'S IVORY BOX
   ---------------------------------------------------------------------
   The owner: "now there is legibility issue inside that ivory box". The box is
   the tool's own hero header. Its ground is built from the TOOL's own fixed light
   values, not the theme's:
       #orera-root { --bg:#faf8f2; --surface2:#f5f1e6; }
       #orera-root header.hero { background:linear-gradient(115deg,#ffffff,
                                  var(--bg) 52%, var(--surface2)) }
   So the box is LIGHT in light mode AND in dark mode. Its text, though, can be
   caught by the theme's palette lock, which flips --charcoal/--ink/--white to
   near-white in dark mode. The heading then comes out pale on pale - the faint
   "ORERA Projects Information Tool" the owner photographed.
   The rule: text on a ground that never changes must itself never change. Pinned
   to the tool's own ink (#201d17), which is what the tool's stylesheet asks for
   in the first place. Scoped to the tool's hero header only, so nothing else on
   the page is touched.
   ===================================================================== */
/* v4.9.149 - THE BOX MUST FOLLOW THE THEME, NOT BE PINNED LIGHT.
   v4.9.147 pinned the ink dark because the box was light in both themes. The owner
   then asked for the box itself to follow dark mode - which is the better answer.
   The box is now built from the THEME's tokens instead of the tool's fixed ones, so
   ground and ink flip together:
     light -> paper/ivory/cream ground with --ink text
     dark  -> the same tokens darkened, with --ink flipped to near-white
   Because both come from the same palette there is no combination that can clash. */
body.single-bd_tool #orera-root header.hero {
    background: linear-gradient(115deg, var(--paper) 0%, var(--ivory) 52%, var(--cream) 100%) !important;
    border-bottom-color: var(--line) !important;
    box-shadow: inset 0 -4px 0 var(--gold-soft) !important;
}
body.single-bd_tool #orera-root header.hero,
body.single-bd_tool #orera-root header.hero h1,
body.single-bd_tool #orera-root header.hero h2,
body.single-bd_tool #orera-root header.hero h3,
body.single-bd_tool #orera-root header.hero p,
body.single-bd_tool #orera-root header.hero span,
body.single-bd_tool #orera-root header.hero .brandline,
body.single-bd_tool #orera-root header.hero .kicker,
body.single-bd_tool #orera-root header.hero .sub { color: var(--ink) !important; }

/* =====================================================================
   v4.9.149 - THE SPEAKER BUTTON INSIDE A TOOL CAME OUT AS AN EMPTY BOX
   ---------------------------------------------------------------------
   The owner: "the speaker button is just a box and a speaker symbol in the orera
   projects information tool". The icon had vanished.
   WHY: the tool styles EVERY control inside it -
       #orera-root input, #orera-root select, #orera-root button {
           font-size:.92rem; padding:.6em .8em; background:var(--surface);
           color:var(--text); border:1px solid var(--line-dark) }
       #orera-root, #orera-root * { box-sizing:border-box; margin:0; padding:0 }
   - and `#orera-root button` (1,0,1) outranks the theme's `.bd-a11y-sect-btn`
   (0,1,0). With box-sizing:border-box, the theme's width:1.5em minus the tool's
   .6em/.8em padding leaves a NEGATIVE content box, so the inline SVG collapses to
   nothing: a grey rectangle with no speaker. The tool also repainted it with its
   own white surface, which is the box the owner photographed.
   FIX: restate the button's own shape at a specificity that beats the tool, and
   give the icon an explicit size. Scoped to tool pages only.
   ===================================================================== */
body.single-bd_tool #orera-root .bd-a11y-sect-btn,
body.single-bd_tool .bd-tool .bd-a11y-sect-btn {
    width: 1.5em !important; height: 1.5em !important;
    padding: 0 !important; margin-right: .35em !important;
    font-size: 1.05rem !important; line-height: 1 !important;
    background: transparent !important;
    color: var(--gold-deep, #104532) !important;
    border: 1px solid var(--line-dark, #D9D4C4) !important;
    border-radius: 6px !important;
    opacity: .55;
}
body.single-bd_tool #orera-root .bd-a11y-sect-btn:hover,
body.single-bd_tool #orera-root .bd-a11y-sect-btn:focus-visible,
body.single-bd_tool .bd-tool .bd-a11y-sect-btn:hover,
body.single-bd_tool .bd-tool .bd-a11y-sect-btn:focus-visible {
    opacity: 1; background: var(--gold-faint, #EAF0EC) !important;
}
body.single-bd_tool #orera-root .bd-a11y-sect-btn svg,
body.single-bd_tool .bd-tool .bd-a11y-sect-btn svg {
    width: 1em !important; height: 1em !important; display: block !important;
    fill: currentColor !important;
}
/* the playing state, which the tool would otherwise repaint too */
body.single-bd_tool #orera-root .bd-a11y-sect-btn.is-playing,
body.single-bd_tool .bd-tool .bd-a11y-sect-btn.is-playing {
    opacity: 1;
    background: var(--gold, #145A43) !important;
    border-color: var(--gold, #145A43) !important;
    color: #FAFAF7 !important;
}
html[data-bd-theme="dark"] body.single-bd_tool #orera-root .bd-a11y-sect-btn.is-playing,
html[data-bd-theme="dark"] body.single-bd_tool .bd-tool .bd-a11y-sect-btn.is-playing {
    background: var(--emerald, #3FA57E) !important;
    border-color: var(--emerald, #3FA57E) !important;
    color: #14171A !important;
}

/* =====================================================================
   v4.9.150 - THREE FIXES ON THE LEGAL TOOL PAGES
   =====================================================================
   (1) THE SLIDERS. The owner: "there is a slider in every calculator except the
       stamp duty calculator, remove those sliders" - and he chose to keep the
       number box. Read from the content batch: each calculator has
           <div class="calc-slider-row">
             <div class="slider-input"><input type="number" ...></div>
             <div class="slider-range"><input type="range" class="calc-slider" ...></div>
           </div>
       The row is a flex line with the number box at flex:0 0 120px and the range at
       flex:1. Hiding the range alone would leave a 120px stub, so the number box is
       allowed to fill the row instead.
       The stamp-duty calculator carries no range input at all (an earlier fix
       removed it), so this rule is simply a no-op there.

   (2) THE STAMP-DUTY CALCULATE BUTTON, WHICH CAME OUT NEARLY INVISIBLE.
       The theme's palette lock carries:
           .entry-content .btn-primary, .bd-tool .btn-primary { color:#fff !important }
       and the button's own rule paints it a GOLD gradient
           (#d4af37 -> #c8a049 -> #b8922f). White on gold measures about 2.3:1 -
       the washed-out button the owner photographed. Its intended ink is the tool's
       own dark #241f19 (about 8.5:1 on the same gradient), so that is restored.
       Specificity (0,4,1) beats the lock's (0,2,0) and its dark-mode (0,2,1).

   (3) THE ORERA TOOL'S FAQ, WHICH DID NOT FOLLOW DARK MODE.
       The tool builds its whole body from its OWN fixed light tokens
       (--bg:#faf8f2, --surface:#ffffff, --border:#e4ded0, --champagne:#e6dcc3,
       --gold-faint:#efe7d6) and hard-codes its text (#201d17, #3d372f). In dark
       mode the FAQ cards therefore stayed white panels with dark text while the
       page around them went dark.
       Because the tool's stylesheet uses those tokens everywhere, overriding the
       TOKENS in dark mode flips its surfaces in one place; the few hard-coded text
       colours are then remapped. Scoped to tool pages and to dark mode only, so
       light mode keeps exactly the tool's intended look.
   ===================================================================== */

/* (1) sliders */
body.single-bd_tool .bd-tool .slider-range,
body.single-bd_tool #orera-root .slider-range,
body.single-bd_tool .calc-slider-row .slider-range { display: none !important; }
body.single-bd_tool .bd-tool .calc-slider-row .slider-input,
body.single-bd_tool #orera-root .calc-slider-row .slider-input { flex: 1 1 auto !important; }

/* (2) the stamp-duty calculate button */
body.single-bd_tool .bd-tool .calc-box .btn-primary,
body.single-bd_tool .bd-tool .btn-primary,
body.single-bd_tool .entry-content .bd-tool .btn-primary { color: #241f19 !important; }

/* (3) the ORERA tool in dark mode: remap its own tokens, then its hard-coded ink */
html[data-bd-theme="dark"] body.single-bd_tool #orera-root {
    --bg: #14171A;
    --surface: #1B1F23;
    --surface2: #1E2327;
    --cream: #1E2327;
    --champagne: #2C3438;
    --gold-faint: #232A2E;
    --border: #2C3438;
    --line-dark: #39434A;
    --text: #EDF1EF;
    --text-dim: #A9B4AE;
}
html[data-bd-theme="dark"] body.single-bd_tool #orera-root,
html[data-bd-theme="dark"] body.single-bd_tool #orera-root .guide h2,
html[data-bd-theme="dark"] body.single-bd_tool #orera-root .guide h3,
html[data-bd-theme="dark"] body.single-bd_tool #orera-root .guide summary,
html[data-bd-theme="dark"] body.single-bd_tool #orera-root .brandline,
html[data-bd-theme="dark"] body.single-bd_tool #orera-root h1,
html[data-bd-theme="dark"] body.single-bd_tool #orera-root h2,
html[data-bd-theme="dark"] body.single-bd_tool #orera-root h3,
html[data-bd-theme="dark"] body.single-bd_tool #orera-root .stat b,
html[data-bd-theme="dark"] body.single-bd_tool #orera-root .metabar b { color: var(--ink) !important; }
html[data-bd-theme="dark"] body.single-bd_tool #orera-root .guide p,
html[data-bd-theme="dark"] body.single-bd_tool #orera-root .guide ul,
html[data-bd-theme="dark"] body.single-bd_tool #orera-root .guide li,
html[data-bd-theme="dark"] body.single-bd_tool #orera-root .guide .faq-body p,
html[data-bd-theme="dark"] body.single-bd_tool #orera-root .cta p,
html[data-bd-theme="dark"] body.single-bd_tool #orera-root .related li,
html[data-bd-theme="dark"] body.single-bd_tool #orera-root .sub { color: var(--body) !important; }
html[data-bd-theme="dark"] body.single-bd_tool #orera-root .guide { border-top-color: var(--line) !important; }
html[data-bd-theme="dark"] body.single-bd_tool #orera-root .guide details { background: var(--paper) !important; border-color: var(--line) !important; }
html[data-bd-theme="dark"] body.single-bd_tool #orera-root .guide details[open] { border-color: var(--gold-soft) !important; }
html[data-bd-theme="dark"] body.single-bd_tool #orera-root .guide summary:hover { background: var(--ivory) !important; }
html[data-bd-theme="dark"] body.single-bd_tool #orera-root .guide summary::before { color: var(--gold) !important; }
html[data-bd-theme="dark"] body.single-bd_tool #orera-root .cta,
html[data-bd-theme="dark"] body.single-bd_tool #orera-root .related { background: var(--paper) !important; }
html[data-bd-theme="dark"] body.single-bd_tool #orera-root .related-title { color: var(--emerald, #3FA57E) !important; }