/*
Theme Name: FIN & LAW
Theme URI: https://finandlaw.co.tz
Description: Bespoke WordPress theme for FIN & LAW — a Tanzanian law firm (LAW | TAX | COMPLIANCE | NOTARY | ADVISORY). Custom, brand-tuned, Elementor-compatible. Built from the approved design system.
Author: TECHUP (T) LTD
Author URI: https://techup.co.tz
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: Proprietary — © FIN & LAW / TECHUP (T) LTD
Text Domain: finlaw
Tags: custom-theme, law-firm, elementor, woocommerce
*/

/* =============================================================================
   FIN & LAW DESIGN SYSTEM
   Tokens + component library, ported from the approved design-system.html.
   Single source of truth for brand styling. See docs/00-BRAND-KIT.md.
   Order: tokens → reset/base → layout → typography → buttons → forms →
          cards → badges/alerts → patterns → utilities.
   ============================================================================= */

/* ---------- 1. TOKENS (brand kit §2/§4) ---------- */
:root{
	/* Brand & core */
	--blue:#26408d; --blue-dark:#1b2f6b; --blue-deep:#1b2f6b; --blue-ink:#15224d; --blue-pale:#eef1f8;
	--red:#d81f26; --red-dark:#c8141b; --red-deep:#c8141b; --red-maroon:#15224d; --red-pale:#fdeaea;
	--amp:#ed1c24; /* exact logo red — used ONLY by the ampersand .amp (brand kit §6). --red is darkened to #d81f26 so white-on-red + small red text clear WCAG AA 4.5:1 (07-03). */
	--gold:#c9a24b;
	/* Footer */
	--foot:#15224d; --foot-bottom:#0d1529;
	/* Neutrals */
	--white:#ffffff; --ink:#1a1a2e; --grey-50:#f5f6fa; --grey-100:#eef0f6; --grey-200:#e2e5ee;
	--mid:#5d6470; --hair:#e5e7eb;
	/* Status */
	--green:#1f8a5b; --green-bg:#f0faf6; --amber:#d97706; --amber-bg:#fef3e2;
	/* Radius */
	--r-sm:6px; --r:10px; --r-lg:16px; --r-pill:999px;
	/* Shadow */
	--sh-1:0 1px 2px rgba(21,34,77,.06),0 1px 3px rgba(21,34,77,.08);
	--sh-2:0 12px 30px rgba(21,34,77,.10);
	--sh-3:0 24px 60px rgba(21,34,77,.16);
	/* Motion & layout */
	--ease:cubic-bezier(.4,0,.2,1);
	--maxw:1560px;

	/* ---- P1.4 token layers (audit 2026-08-05) ---- */

	/* Type families. Canonical stacks — style.css still carries 81 literal
	   font-family declarations across 4 divergent Playfair fallbacks; migrate them
	   to these two tokens incrementally, never in one sweep. */
	--font-display:'Playfair Display',Georgia,'Times New Roman',serif;
	--font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

	/* Spacing scale. No scale existed, so section padding was authored per-section
	   in Elementor — the cause of the 150-250px dead-space findings (FL-029). */
	--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
	--sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
	--section-pad-y:96px;

	/* Header overlay. DECISION D-1 (2026-08-05): Option B — the homepage .hero
	   overlay becomes the single branded treatment for every page header; red is
	   demoted to accents (eyebrow rules, CTAs, badges, the header hairline).
	   Defined here in P1 so P2 can adopt it without a token change. Nothing
	   consumes this yet — .hero:374 and .banner:554 are migrated in P2. */
	--header-overlay:linear-gradient(105deg,rgba(21,34,77,.95) 0%,rgba(27,47,107,.85) 45%,rgba(38,64,141,.55) 100%);
}

@media(max-width:900px){:root{--section-pad-y:64px}}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
	font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
	color:var(--ink);background:var(--white);
	font-size:16.5px;line-height:1.6;
	-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{font-family:'Playfair Display',Georgia,'Times New Roman',serif;color:var(--ink);font-weight:700;line-height:1.13;letter-spacing:-.01em}
a{color:inherit;text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--red)}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
ul,ol{list-style:none}
code{font-family:'SFMono-Regular',ui-monospace,Menlo,monospace;font-size:.86em;background:var(--blue-pale);color:var(--blue);padding:2px 7px;border-radius:5px}
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(38,64,141,.35);border-radius:4px}

/* The ampersand is ALWAYS the exact logo red (brand kit §6). */
.amp{color:inherit;display:inline-block}
.amp-svg{height:1.12em;width:auto;vertical-align:-.22em;margin:0 .01em;fill:currentColor}

/* a11y helpers */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* FL-030: the skip link never actually appeared. .screen-reader-text above sets
   position:absolute!important, which beat this rule's position:fixed, and the
   1px box, negative margin and clip were never undone — so it stayed a 1x1px
   sliver on focus and was unusable for keyboard users. Every visually-hidden
   property is reversed here, and !important is required to win against the
   !important it is overriding. */
a.skip-link:focus,a.skip-link:focus-visible{position:fixed!important;top:8px!important;left:8px!important;z-index:100000!important;background:#fff!important;color:var(--blue-ink)!important;padding:10px 16px!important;border-radius:6px!important;width:auto!important;height:auto!important;margin:0!important;overflow:visible!important;clip:auto!important;clip-path:none!important;white-space:normal!important;box-shadow:0 0 0 3px rgba(38,64,141,.35)!important}

/* ---------- 3. LAYOUT ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
/* P1.1 (FL-006): Elementor's content region must mirror .wrap exactly — same
   max-width AND the same 32px gutters — or its content sits flush to the viewport
   edge below 1560px while theme bands keep their gutter. The kit's Content Width
   is set to --maxw (1560); these gutters make the inner measure 1496px, matching
   .wrap's content box at every breakpoint.
   Two container generations coexist here: legacy .elementor-container (sections)
   and flexbox .e-con-inner. The latter needs `.e-con >` specificity and the logical
   property, because Elementor's own `.e-con>.e-con-inner` rule matches at equal
   specificity and is enqueued after the theme. */
.finlaw-canvas .elementor-container{padding-left:32px;padding-right:32px}
.finlaw-canvas .e-con>.e-con-inner{padding-inline:32px}
.section{padding:72px 0} /* was 108px — client 2026-09-07 "space issue whole website" (site-wide tighten) */
.section.tight{padding:56px 0}
.section.alt{background:var(--grey-50)}
.section-head{max-width:720px}
.section-head.center{margin:0 auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head h2{font-size:clamp(32px,4.2vw,50px);margin-top:16px}
.section-head h2::after{content:"";display:block;width:48px;height:3px;background:var(--red);margin-top:14px;border-radius:2px}
.section-head.center h2::after{margin:14px auto 0}
.section-head h1{font-size:clamp(32px,4.2vw,50px);margin-top:16px}
.section-head h1::after{content:"";display:block;width:48px;height:3px;background:var(--red);margin-top:14px;border-radius:2px}
.section-head.center h1::after{margin:14px auto 0}
.section-head p{color:var(--mid);font-size:19px;margin-top:16px;text-wrap:pretty}
/* FL-009: .eyebrow is also applied to Elementor heading widgets, whose own CSS
   wins on `display` and `gap` — the 28px rule then butts straight against the
   label ("——THE FIRM"). Spacing and alignment are therefore carried by the
   pseudo-element itself (margin + align-self + flex-basis), which survives any
   parent override, instead of by the flex `gap` on .eyebrow. */
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--red);display:inline-flex;align-items:center}
.eyebrow::before{content:"";flex:0 0 28px;width:28px;height:2px;background:var(--red);margin-right:11px;align-self:center}
@media(max-width:768px){.wrap{padding:0 20px}.section{padding:44px 0}} /* was 64px — client 2026-09-07 whitespace tighten */
/* Clickable address → Google Maps (client 2026-09-07). Inherits surrounding text colour; underline on hover. */
.addr-link{color:inherit;text-decoration:none;cursor:pointer;transition:opacity .15s}
.addr-link:hover,.addr-link:focus-visible{text-decoration:underline;text-underline-offset:2px}

/* ---------- 4. TYPOGRAPHY UTILITIES (brand kit §3) ---------- */
.t-display{font-family:'Playfair Display';font-weight:700;font-size:clamp(38px,6vw,56px);line-height:1.05}
.t-h1{font-family:'Playfair Display';font-weight:700;font-size:clamp(32px,4.4vw,42px)}
.t-h2{font-family:'Playfair Display';font-weight:700;font-size:clamp(28px,3.4vw,32px)}
.t-h3{font-family:'Playfair Display';font-weight:600;font-size:25px}
.t-h4{font-family:'Playfair Display';font-weight:600;font-size:20px}
.t-lead{font-size:20px;color:#3a3a4a;font-weight:400;line-height:1.5}
.t-body{font-size:16.5px;color:#3a3a4a}
.t-small{font-size:13px;color:var(--mid)}
.t-link{font-size:16px;color:var(--red);font-weight:600;position:relative;display:inline-flex;align-items:center;gap:7px}
.t-link::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;background:var(--red);transition:right .3s var(--ease)}
.t-link:hover::after{right:0}
blockquote.spec,.pullquote{font-family:'Playfair Display';font-style:italic;color:var(--blue-ink);line-height:1.4;border-left:3px solid var(--red);padding:6px 0 6px 22px}
/* Two-column text/media (FIN & LAW widget 10). DOM order = visual order (PHP
   swaps for media-left); tracks reflow to one column at the brand ~880px bp. */
.finlaw-twocol{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.finlaw-twocol.ratio-2-3{grid-template-columns:3fr 2fr}
.finlaw-twocol.ratio-2-3.media-left{grid-template-columns:2fr 3fr}
.finlaw-twocol .tc-media img{width:100%;height:auto;border-radius:var(--r);display:block}
@media(max-width:880px){.finlaw-twocol,.finlaw-twocol.ratio-2-3,.finlaw-twocol.ratio-2-3.media-left{grid-template-columns:1fr;gap:36px}}
.pullquote{font-size:clamp(22px,3vw,30px);border-left-width:4px;padding-left:26px;max-width:760px}
.pullquote cite{display:block;font-family:'Inter';font-style:normal;font-size:14px;color:var(--mid);font-weight:500;margin-top:16px}

/* ---------- 5. BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Inter';font-weight:600;font-size:15px;padding:13px 26px;border-radius:var(--r-sm);cursor:pointer;border:1.5px solid transparent;transition:all .25s var(--ease);white-space:nowrap}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn-red{background:var(--red);color:#fff;border-color:var(--red)}
.btn-red:hover{background:var(--red-dark);border-color:var(--red-dark);transform:translateY(-2px);box-shadow:0 10px 22px rgba(237,28,36,.30);color:#fff}
.btn-blue{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-blue:hover{background:var(--blue-dark);border-color:var(--blue-dark);transform:translateY(-2px);box-shadow:0 10px 22px rgba(38,64,141,.28);color:#fff}
.btn-outline{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn-outline:hover{background:var(--blue);color:#fff}
.btn-ghost{background:#fff;color:var(--blue);border-color:var(--grey-200)}
.btn-ghost:hover{border-color:var(--blue);background:var(--blue-pale);transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn:disabled,.btn.is-disabled{background:var(--hair);color:#9aa0ac;border-color:var(--hair);cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- 6. FORMS ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 34px}
.fld label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:8px}
.fld label .req{color:var(--red)}
.inp{width:100%;padding:12px 14px;border:1.5px solid var(--hair);border-radius:var(--r-sm);font-family:inherit;font-size:15px;color:var(--ink);background:#fff;transition:all .2s}
.inp::placeholder{color:#9aa0ac}
.inp:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(38,64,141,.14)}
textarea.inp{resize:vertical;min-height:96px}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:40px}
.fld.err .inp{border-color:var(--red);box-shadow:0 0 0 3px rgba(237,28,36,.12)}
.fld .hint{font-size:12.5px;color:var(--mid);margin-top:7px}
.fld .hint.err{color:var(--red);font-weight:500;display:flex;align-items:center;gap:6px}
.fld .hint.err svg{width:14px;height:14px}
.choice{display:flex;align-items:center;gap:11px;font-size:14.5px;cursor:pointer;margin-bottom:12px}
.choice input{appearance:none;width:20px;height:20px;border:1.5px solid #c2c7d2;background:#fff;cursor:pointer;transition:all .2s;flex-shrink:0;position:relative}
.choice input[type=checkbox]{border-radius:5px}
.choice input[type=radio]{border-radius:50%}
.choice input:checked{background:var(--blue);border-color:var(--blue)}
.choice input[type=checkbox]:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.choice input[type=radio]:checked::after{content:"";position:absolute;left:5px;top:5px;width:8px;height:8px;border-radius:50%;background:#fff}
.upload{border:1.5px dashed #c2c7d2;border-radius:var(--r);padding:26px;text-align:center;color:var(--mid);transition:all .2s;cursor:pointer}
.upload:hover{border-color:var(--blue);background:var(--blue-pale);color:var(--blue)}
.upload svg{width:26px;height:26px;margin:0 auto 8px;display:block}
.upload b{color:var(--ink);font-size:14.5px;display:block}
.upload span{font-size:12.5px}
@media(max-width:680px){.form-grid{grid-template-columns:1fr}}

/* ---------- 7. CARDS ---------- */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:22px}
/* practice area */
.c-pa{background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);padding:26px;transition:all .3s var(--ease);position:relative;overflow:hidden}
.c-pa::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform .3s}
.c-pa:hover{box-shadow:var(--sh-3);transform:translateY(-4px)}
.c-pa:hover::before{transform:scaleY(1)}
.c-pa .ic{width:50px;height:50px;border-radius:11px;background:var(--red-pale);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.c-pa .ic svg{width:24px;height:24px;color:var(--red)}
.c-pa h4{font-size:18px;margin-bottom:7px}
.c-pa p{font-size:14.5px;color:var(--mid);margin-bottom:14px}
/* FL-110: .c-lawyer, .c-insight and .c-event removed here (2026-08-05) — 25 rules
   with zero references in any template, plugin or _elementor_data record, and no
   occurrence in any rendered page. .c-pa above is DELIBERATELY KEPT: it is still
   used by one template and two Elementor records, so the "dead .c-* library"
   could not be dropped wholesale as the audit proposed. */
/* industry tile */
.ind-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.ind{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:5/3;display:block}
.ind img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ind:hover img{transform:scale(1.07)}
.ind .ov{position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(21,34,77,.86));display:flex;align-items:flex-end;padding:16px}
.ind .ov span{color:#fff;font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px}
.ind .ov svg{width:17px;height:17px;color:var(--gold)}

/* ---------- 8. BADGES / PILLS / TAGS / ALERTS ---------- */
.pill-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pill{font-size:13px;font-weight:500;padding:6px 14px;border-radius:var(--r-pill);background:var(--blue-pale);color:var(--blue)}
.tag{font-size:12px;font-weight:600;letter-spacing:.04em;padding:5px 12px;border-radius:5px;background:var(--grey-50);border:1px solid var(--hair);color:var(--ink)}
.badge{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:6px}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.badge.ok{background:var(--green-bg);color:var(--green)}
.badge.warn{background:var(--amber-bg);color:var(--amber)}
.badge.new{background:var(--red-pale);color:var(--red-dark)}
.badge.info{background:var(--blue-pale);color:var(--blue)}
.alert{display:flex;gap:13px;padding:16px 18px;border-radius:var(--r);border:1px solid;margin-bottom:14px}
.alert svg{width:20px;height:20px;flex-shrink:0;margin-top:1px}
.alert b{display:block;margin-bottom:2px}
.alert p{font-size:13.5px;line-height:1.5}
.alert.info{background:var(--blue-pale);border-color:#cdd8f0;color:var(--blue-dark)}
.alert.success{background:var(--green-bg);border-color:#bfe6cf;color:#1f7a45}
.alert.danger{background:#fdeaeb;border-color:#f6c6c9;color:var(--red-dark)}

/* ---------- 9. PATTERNS ---------- */
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);background:var(--red-deep);border-radius:var(--r-lg);overflow:hidden}
.stat-band .it{padding:30px 22px;text-align:center;border-right:1px solid rgba(255,255,255,.12)}
.stat-band .it:last-child{border-right:none}
.stat-band .n{font-family:'Playfair Display';font-size:40px;font-weight:700;color:#fff;line-height:1}
.stat-band .n span{color:var(--gold)}
.stat-band .l{font-size:13px;color:rgba(255,255,255,.7);margin-top:8px}
@media(max-width:680px){.stat-band{grid-template-columns:1fr 1fr}}
.bc{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--mid);flex-wrap:wrap}
.bc a:hover{color:var(--blue)}
.bc svg{width:13px;height:13px;opacity:.6}
.bc .here{color:var(--red);font-weight:600}

/* pagination (finlaw_pagination) */
.finlaw-pagination{margin-top:40px}
.finlaw-pagination .page-numbers{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center}
.finlaw-pagination .page-numbers li{display:inline-flex}
.finlaw-pagination .page-numbers a,.finlaw-pagination .page-numbers span{display:inline-flex;align-items:center;gap:5px;min-width:40px;height:40px;padding:0 12px;justify-content:center;border:1px solid var(--hair);border-radius:var(--r-sm);font-weight:600;font-size:14px;color:var(--ink);background:#fff;transition:all .2s}
.finlaw-pagination .page-numbers a:hover{border-color:var(--blue);color:var(--blue)}
.finlaw-pagination .page-numbers .current{background:var(--red);border-color:var(--red);color:#fff}
.finlaw-pagination .page-numbers svg{width:16px;height:16px}
.finlaw-pagination .page-numbers .flip{transform:rotate(180deg)}

/* ---------- 10. LOGO / UTILITIES ---------- */
.logo-img{height:58px;width:auto;max-width:230px;display:block;object-fit:contain;transition:height .3s}
header.scrolled .logo-img{height:46px}
.logo-footer{height:72px;width:auto;max-width:160px;object-fit:contain;display:block}
@media(max-width:768px){.logo-img{height:46px}}
.finlaw-icon{display:inline-block;vertical-align:middle}
.text-center{text-align:center}
.mt-0{margin-top:0}

/* =============================================================================
   11. HEADER (ported from homepage.html)
   ============================================================================= */
.arrow-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--blue);transition:gap .25s}
.arrow-link svg{width:16px;height:16px;transition:transform .25s}
.arrow-link:hover{color:var(--red)}
.arrow-link:hover svg{transform:translateX(4px)}

header.site{position:sticky;top:0;z-index:80;background:#fff;border-bottom:1px solid var(--hair)}
header.site.scrolled{box-shadow:0 6px 24px rgba(21,34,77,.10)}
.topbar{background:var(--red-maroon);color:rgba(255,255,255,.82);font-size:13px;max-height:42px;overflow:hidden;transition:max-height .35s var(--ease),opacity .25s}
header.scrolled .topbar{max-height:0;opacity:0}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:42px}
.topbar a{transition:color .2s}.topbar a:hover{color:#fff}
.topbar .l{display:flex;gap:24px;align-items:center}
.topbar .l a,.topbar .l span{display:inline-flex;align-items:center;gap:8px}
.topbar .l svg{width:13px;height:13px;opacity:.8}
.topbar .r{display:flex;gap:7px;align-items:center}
.topbar .r .cl{display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:500;margin-right:6px}
.topbar .r .cl svg{width:13px;height:13px}.topbar .r .cl:hover{color:var(--gold)}
.topbar .r .tb-div{width:1px;height:15px;background:rgba(255,255,255,.22);margin:0 9px}
.soc{width:29px;height:29px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.2)}
.soc:hover{background:var(--red);border-color:var(--red)}.soc svg{width:13px;height:13px}
@media(max-width:880px){.topbar .l a:not(.ph),.topbar .l span{display:none}.topbar .r .cl span{display:none}}

.headbar{height:84px;transition:height .35s var(--ease)}
header.scrolled .headbar{height:64px}
.nav-wrap{position:relative;display:flex;align-items:center;justify-content:space-between;height:100%}
.brand{display:flex;align-items:center;gap:14px;line-height:1}
.menu{display:flex;align-items:center;gap:1px}
.menu a,.menu .navitem{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:500;color:var(--ink);padding:9px 11px;border-radius:6px;background:none;border:none;position:relative;transition:color .2s;cursor:pointer;font-family:inherit}
.menu a svg,.menu .navitem svg{width:11px;height:11px;transition:transform .25s}
.menu a::after,.menu .navitem::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.menu a:hover,.menu .navitem:hover,.menu a.on,.menu .navitem.act,.menu a[aria-current],.menu .navitem[aria-expanded="true"]{color:var(--blue)}
.menu a:hover::after,.menu .navitem:hover::after,.menu a.on::after,.menu .navitem.act::after,.menu a[aria-current]::after,.menu .navitem[aria-expanded="true"]::after{transform:scaleX(1)}
.menu .navitem[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-actions{display:flex;align-items:center;gap:10px}
/* WCAG 2.5.5 (44px): 42px was just under. */
.icon-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--hair);background:#fff;transition:all .2s}
/* Utility-bar controls are visually small by design (29px social discs, and the
   Client Login label collapses to a 13px lock icon on mobile). Rather than resize
   them and change the bar's proportions, the hit area is expanded with a centred
   pseudo-element — the target passes 44px while the visual stays identical. */
.soc,.topbar .cl,.topbar .ph{position:relative}
.soc::after,.topbar .cl::after,.topbar .ph::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;min-width:44px;height:44px}
.icon-btn:hover{border-color:var(--blue);color:var(--blue)}.icon-btn svg{width:18px;height:18px}
.hamburger{display:none}
@media(max-width:1180px){.menu{display:none}.hamburger{display:inline-flex}}

/* header panels (mega + dropdown) */
.panel{position:absolute;top:calc(100% + 1px);background:#fff;border:1px solid var(--hair);border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:var(--sh-3);padding:28px 30px;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .25s var(--ease);z-index:90}
.panel.open{opacity:1;visibility:visible;transform:translateY(0)}
.mega-panel{left:0;right:0}
.mtitle{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:18px}
.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 22px}
.mega-grid a{display:flex;gap:11px;padding:11px 12px;border-radius:9px;transition:background .2s}
.mega-grid a:hover{background:var(--grey-50)}
.mega-grid a .mi{width:34px;height:34px;border-radius:8px;background:var(--red-pale);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mega-grid a .mi svg{width:17px;height:17px;color:var(--red)}
.mega-grid a b{display:block;font-size:13.5px;color:var(--blue-ink);font-weight:600;line-height:1.3}
.mega-grid a span{font-size:11.5px;color:var(--mid);line-height:1.35}
.mega-foot{margin-top:20px;padding-top:18px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.mega-empty{font-size:13px;color:var(--mid);padding:6px 12px}
.drop-panel{min-width:248px;border-radius:0 0 var(--r-lg) var(--r-lg)}
.drop-panel a{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink);transition:all .2s}
.drop-panel a:hover{background:var(--grey-50);color:var(--blue);padding-left:17px}
.drop-panel a svg{width:16px;height:16px;color:var(--blue);flex-shrink:0}
@media(max-width:1180px){.panel{display:none!important}.portal-shell .panel{display:block!important}}

/* search overlay */
.search-ov{position:fixed;inset:0;z-index:200;background:rgba(21,34,77,.55);backdrop-filter:blur(6px);display:flex;align-items:flex-start;justify-content:center;padding-top:17vh;opacity:0;visibility:hidden;transition:opacity .3s}
.search-ov.open{opacity:1;visibility:visible}
.search-box{width:min(680px,90vw);background:#fff;border-radius:16px;padding:30px;box-shadow:var(--sh-3);transform:translateY(-16px);transition:transform .3s}
.search-ov.open .search-box{transform:translateY(0)}
.search-box label{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.search-field{display:flex;align-items:center;gap:12px;border:2px solid var(--hair);border-radius:10px;padding:14px 16px;margin-top:12px}
.search-field:focus-within{border-color:var(--blue)}
.search-field input{border:none;outline:none;font-size:18px;flex:1;font-family:inherit}
.search-field svg{width:20px;height:20px;color:var(--mid)}
.search-hint{font-size:13px;color:var(--mid);margin-top:18px}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:210;background:var(--blue-ink);color:#fff;padding:26px 26px 40px;transform:translateX(100%);transition:transform .35s var(--ease);overflow-y:auto}
.drawer.open{transform:none}
.drawer .dtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}
.drawer .dtop .m{font-family:'Playfair Display';font-weight:800;font-size:24px}
.drawer .dtop svg{width:26px;height:26px}
.drawer nav a{display:flex;align-items:center;justify-content:space-between;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:17px;font-weight:500;color:#fff}
.drawer nav a:hover{color:var(--gold)}
.drawer nav a svg{width:16px;height:16px;opacity:.5}
.drawer .dcta{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.drawer .dcta .btn{justify-content:center}
body.drawer-open{overflow:hidden}

/* =============================================================================
   12. FOOTER (ported from homepage.html)
   ============================================================================= */
footer.site{border-top:4px solid var(--red);background:var(--foot);color:rgba(255,255,255,.7);font-size:14.5px}
.fnews{border-bottom:1px solid rgba(255,255,255,.1)}
.fnews .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:36px 32px;flex-wrap:wrap}
.fnews h3{color:#fff;font-size:22px}.fnews p{color:rgba(255,255,255,.6);font-size:14px;margin-top:4px}
.fnews form{display:flex;gap:10px;flex-wrap:wrap}
.fnews input{padding:13px 18px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-family:inherit;font-size:15px;min-width:260px}
.fnews input::placeholder{color:rgba(255,255,255,.5)}.fnews input:focus{outline:none;border-color:var(--gold)}
.fmain .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:34px;padding:66px 32px 52px}
.fcol .m{font-family:'Playfair Display';font-weight:800;font-size:26px;color:#fff;margin-bottom:14px}
.fcol p.d{font-size:14px;line-height:1.7;margin-bottom:20px;max-width:340px}
.fcol h4{color:#fff;font-size:15px;font-family:'Inter';font-weight:600;margin-bottom:20px}
.fcol ul{list-style:none;display:grid;gap:12px}
.fcol ul a{font-size:14px;transition:color .2s,transform .2s}.fcol ul a:hover{color:#fff;transform:translateX(4px)}
.fcol.ct li{display:flex;gap:12px;font-size:14px;line-height:1.6;margin-bottom:14px}
.fcol.ct svg{width:17px;height:17px;color:var(--gold);flex-shrink:0;margin-top:2px}
.fcol.ct a{transition:color .2s,transform .2s}.fcol.ct a:hover{color:#fff;transform:translateX(4px)}
.fsoc{display:flex;gap:10px;margin-top:18px}
.fsoc a{width:38px;height:38px;border-radius:8px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background .2s}
.fsoc a:hover{background:var(--red)}.fsoc svg{width:16px;height:16px;color:#fff}
.fbot{border-top:1px solid rgba(255,255,255,.1);background:var(--foot-bottom)}
.fbot .wrap{display:flex;justify-content:space-between;align-items:center;padding:22px 32px;flex-wrap:wrap;gap:12px;font-size:13px;color:rgba(255,255,255,.5)}
.fbot a{transition:color .2s,transform .2s}.fbot a:hover{color:#fff;transform:translateX(4px)}
.fbot .legal{display:flex;gap:18px;flex-wrap:wrap}
.fbot .credit{margin-left:14px;padding-left:14px;border-left:1px solid rgba(255,255,255,.18)}
.fbot .credit a{color:rgba(255,255,255,.72);font-weight:600}
.fbot .credit a:hover{color:var(--gold)}
@media(max-width:560px){.fbot .credit{margin-left:0;padding-left:0;border-left:none;display:block;margin-top:4px}}
@media(max-width:880px){.fmain .wrap{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fmain .wrap{grid-template-columns:1fr}}

/* =============================================================================
   13. HOMEPAGE (front-page.php) — ported from homepage.html
   ============================================================================= */
/* HERO — with the 3 brand tweaks: name large + LEFT, tagline SMALLER, & RED */
.hero{position:relative;min-height:660px;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .ov{position:absolute;inset:0;background:var(--header-overlay)}
.hero .ov2{position:absolute;top:-140px;right:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,75,.26),transparent 70%)}
.hero .wrap{position:relative;padding:96px 32px}
.hero-copy{max-width:760px;text-align:left}
.hero .eyebrow{color:#fff}
.hero .eyebrow::before{background:var(--gold)}
.hero-firmname{font-family:'Playfair Display',serif;font-weight:800;font-size:clamp(46px,7vw,84px);color:#fff;letter-spacing:.01em;line-height:1.02;margin:16px 0 10px;display:block;text-align:left}
.hero-firmname .amp{color:inherit;display:inline-block}
.amp-svg{height:1.12em;width:auto;vertical-align:-.22em;margin:0 .01em;fill:currentColor}
.hero-tagline{font-family:'Inter',sans-serif;font-weight:600;font-size:clamp(14px,1.6vw,19px);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.9);margin:0 0 22px;display:block}
.hero p.lead{font-size:20px;color:rgba(255,255,255,.85);max-width:620px;margin-bottom:36px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.hero .btn-outline:hover{background:#fff;color:var(--blue);border-color:#fff;transform:translateY(-2px)}
.hero-scroll{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.6);font-size:11px;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.hero-scroll span{width:1px;height:34px;background:rgba(255,255,255,.4)}
@media(max-width:600px){.hero{min-height:560px}.hero-scroll{display:none}}

/* STAT BAND */
.stats{background:linear-gradient(120deg,var(--red-dark) 0%,var(--red) 60%,#f03040 100%);color:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.stats .it{padding:38px 24px;text-align:center;border-right:1px solid rgba(255,255,255,.1)}
.stats .it:last-child{border-right:none}
.stats .n{font-family:'Playfair Display';font-size:46px;font-weight:700;line-height:1}
.stats .n span{color:var(--gold)}
.stats .l{font-size:13.5px;color:rgba(255,255,255,.7);margin-top:10px;letter-spacing:.02em}
.stats[data-count="2"] .wrap{grid-template-columns:repeat(2,1fr)}
.stats[data-count="3"] .wrap{grid-template-columns:repeat(3,1fr)}
.stats.full-bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
@media(max-width:760px){.stats .wrap{grid-template-columns:1fr 1fr}.stats .it:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.1)}.stats .it:nth-child(2){border-right:none}}

/* shared section top row (head + link) */
.ex-top,.ins-top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:50px;flex-wrap:wrap}

/* EXPERTISE cards */
.pa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pa-card{background:#fff;border:1px solid var(--hair);border-radius:14px;padding:28px 26px;transition:all .3s var(--ease);position:relative;overflow:hidden;display:flex;flex-direction:column}
.pa-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform .3s}
.pa-card:hover{box-shadow:var(--sh-3);transform:translateY(-5px);border-color:transparent}
.pa-card:hover::before{transform:scaleY(1)}
.pa-ic{width:52px;height:52px;border-radius:12px;background:var(--red-pale);display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:all .3s}
.pa-card:hover .pa-ic{background:var(--red)}
.pa-ic svg{width:25px;height:25px;color:var(--red);transition:color .3s}
.pa-card:hover .pa-ic svg{color:#fff}
.pa-card h3{font-size:18.5px;margin-bottom:8px}
.pa-card p{font-size:14px;color:var(--mid);margin-bottom:16px;flex:1}
/* FL-014 / FL-084: one card CTA. .ex, .explore and .oc-link were three
   byte-identical rule sets under different names, and only some of them had a
   hover or an svg rule. Consolidated here; markup keeps its existing class
   names, so there is no template churn and no visual change beyond the two
   card types that were missing hover feedback. margin-top:auto bottom-aligns
   the action in the flex-column cards so rows line up when copy lengths differ. */
.pa-card .ex,.ind-body .explore,.office-card .oc-link{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--blue);margin-top:auto}
.pa-card .ex svg,.ind-body .explore svg,.office-card .oc-link svg{width:14px;height:14px;transition:transform .25s}
.pa-card:hover .ex,.ind-card:hover .explore,.office-card:hover .oc-link{color:var(--red)}
.pa-card:hover .ex svg,.ind-card:hover .explore svg,.office-card:hover .oc-link svg{transform:translateX(4px)}
@media(max-width:1080px){.pa-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pa-grid{grid-template-columns:1fr}}

/* FEATURED INSIGHT */
.feat{background:var(--grey-50)}
.feat .mod{display:grid;grid-template-columns:1.15fr .85fr;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1)}
.feat .mod .im{position:relative;min-height:420px}
.feat .mod .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feat .mod .im .cat{position:absolute;top:20px;left:20px;background:var(--red);color:#fff;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border-radius:var(--r-pill)}
.feat .mod .tx{padding:50px 48px;display:flex;flex-direction:column;justify-content:center}
.feat .mod .tx .meta{font-size:13px;color:var(--mid);letter-spacing:.04em;margin-bottom:14px;display:flex;align-items:center;gap:10px;margin-top:14px}
.feat .mod .tx .meta .dot{width:4px;height:4px;border-radius:50%;background:var(--mid)}
.feat .mod .tx h3{font-size:clamp(26px,3vw,36px);line-height:1.2;margin-bottom:18px}
.feat .mod .tx p{color:var(--mid);font-size:16px;margin-bottom:28px}
@media(max-width:880px){.feat .mod{grid-template-columns:1fr}.feat .mod .im{min-height:280px}.feat .mod .tx{padding:36px 30px}}

/* ABOUT */
.about .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about-im{position:relative}
.about-im img{border-radius:var(--r-lg);box-shadow:var(--sh-2);width:100%;aspect-ratio:10/8;object-fit:cover}
.about-badge{position:absolute;bottom:-26px;right:-22px;background:var(--red);color:#fff;padding:24px 28px;border-radius:14px;box-shadow:var(--sh-3);text-align:center}
.about-badge .b{font-family:'Playfair Display';font-size:36px;font-weight:700;line-height:1}
.about-badge .b span{color:var(--gold)}
.about-badge .s{font-size:12.5px;color:rgba(255,255,255,.82);margin-top:5px}
.about h2{font-size:clamp(30px,3.8vw,44px);margin:16px 0 20px}
.about p{color:var(--mid);font-size:16.5px;margin-bottom:24px}
.strengths{list-style:none;display:grid;gap:15px;margin-bottom:32px}
.strengths li{display:flex;gap:13px;font-size:15.5px;font-weight:500;align-items:flex-start}
.strengths svg{width:22px;height:22px;color:var(--red);flex-shrink:0;margin-top:1px}
@media(max-width:880px){.about .wrap{grid-template-columns:1fr;gap:50px}.about-badge{right:24px}}

/* INDUSTRIES */
/* Sector Expertise (home): tiles are marked-up as `.t` but the tile styling was
   written for `.ind-tile`, so the tiles never got position:relative/overflow:hidden.
   The first tile (.t, static) couldn't contain its absolutely-positioned image,
   which rendered at its full 448px and overflowed ~132px below the grid — the big
   empty navy band. Contain the image to the tile so the section fits the cards. */
.ind-grid .t{position:relative;overflow:hidden;border-radius:var(--r)}
.ind-grid .t>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* ROOT CAUSE of the huge empty navy band: line ~220 `.ind{aspect-ratio:5/3}` was
   meant for small industry image TILES, but it also matches THIS section
   (.section.ind), forcing its height to width×3/5 (e.g. 1425→855px) far taller
   than its content — the surplus rendered as empty navy. Cancel it on the section. */
.section.ind{aspect-ratio:auto;padding-top:36px;padding-bottom:48px} /* client 2026-09-07: reduce space above "Sector Expertise" (was inheriting .section 72px top) */
@media(max-width:768px){.section.ind{padding-top:28px}}
.ind{background:var(--red-maroon);color:#fff;position:relative;overflow:hidden}
.ind::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 15%,rgba(27,47,107,.5),transparent 55%)}
.ind .wrap{position:relative}
.ind .section-head h2{color:#fff}.ind .section-head p{color:rgba(255,255,255,.72)}
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:50px}
.ind-grid .t:first-child{grid-column:span 2;grid-row:span 2}
.ind-tile{position:relative;border-radius:var(--r);overflow:hidden;min-height:150px;display:block;height:100%}
.ind-tile img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .6s var(--ease)}
.ind-tile:hover img{transform:scale(1.08)}
.ind-tile .ov{position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(21,34,77,.88));display:flex;align-items:flex-end;padding:18px;transition:background .3s}
.ind-tile:hover .ov{background:linear-gradient(transparent 20%,rgba(38,64,141,.9))}
.ind-tile .ov span{color:#fff;font-weight:600;font-size:15.5px;display:flex;align-items:center;gap:9px}
.ind-tile .ov svg{width:18px;height:18px;color:var(--gold)}
@media(max-width:860px){.ind-grid{grid-template-columns:repeat(2,1fr)}.ind-grid .t:first-child{grid-column:span 2;grid-row:auto}}

/* PEOPLE */
.ppl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
/* Portrait cards: the 3px red top accent used to sit flush on the photo's top
   edge, reading as a red line slicing across the person's head ("line cut"). The
   image is the first child, so on image-topped cards the accent must move off the
   photo. Border returned to a plain hairline; the red brand accent is carried by
   the .role text below instead. */
.ppl{background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;transition:all .3s var(--ease)}
.ppl:hover{box-shadow:var(--sh-3);transform:translateY(-5px)}
.ppl .ph{display:block;position:relative;aspect-ratio:1/1.08;overflow:hidden;background:var(--blue-pale)}
/* object-position biased to the top: these are headshots and 50% 50% cropped
   foreheads. 50% 22% keeps the head and shoulders framed. */
.ppl .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;transition:transform .5s}
.ppl:hover .ph img{transform:scale(1.05)}
.ppl .info{padding:20px 22px 22px}
.ppl .role{font-size:12.5px;font-weight:600;color:var(--red);letter-spacing:.02em}
.ppl .info h3{font-size:18.5px;margin:3px 0 6px}
.ppl .cred{font-size:13.5px;color:var(--mid)}
@media(max-width:980px){.ppl-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.ppl-grid{grid-template-columns:1fr}}

/* WHY */
.why{background:var(--grey-50)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:50px}
.why-it .wic{width:58px;height:58px;border-radius:14px;background:var(--red-pale);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.why-it .wic svg{width:28px;height:28px;color:var(--red)}
.why-it h3{font-size:19px;margin-bottom:10px}
.why-it p{font-size:14.5px;color:var(--mid)}
@media(max-width:860px){.why-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:480px){.why-grid{grid-template-columns:1fr}}
/* Column-count utilities for FIN & LAW widget grids (feature/card grids).
   Desktop-only so they never override the responsive stacking above. */
@media(min-width:861px){.finlaw-cols-2{grid-template-columns:repeat(2,1fr)}.finlaw-cols-3{grid-template-columns:repeat(3,1fr)}.finlaw-cols-4{grid-template-columns:repeat(4,1fr)}}

/* RECOGNITION */
.rec .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.rec-badges{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.rec-badge{border:1px solid var(--hair);border-top:3px solid var(--red);border-radius:var(--r);padding:24px 20px;text-align:center;transition:all .3s}
.rec-badge:hover{box-shadow:var(--sh-2);transform:translateY(-3px)}
.rec-badge .laurel{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--gold);margin-bottom:8px}
.rec-badge .laurel svg{width:22px;height:22px}
.rec-badge .big{font-family:'Playfair Display';font-size:21px;font-weight:700;color:var(--blue-ink);line-height:1.2}
.rec-badge .sm{font-size:12px;color:var(--mid);margin-top:5px;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.rec-quote .eyebrow{margin-bottom:18px}
.rec-quote blockquote{font-family:'Playfair Display';font-size:clamp(22px,2.6vw,30px);line-height:1.42;color:var(--blue-ink);font-style:italic;border-left:4px solid var(--red);padding-left:26px}
.rec-quote .by{margin-top:22px;display:flex;align-items:center;gap:14px}
.rec-quote .by b{display:block;color:var(--blue-ink)}.rec-quote .by span{font-size:13.5px;color:var(--mid)}
@media(max-width:880px){.rec .wrap{grid-template-columns:1fr;gap:44px}}

/* INSIGHTS cards */
.ins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
/* FL-009-family guard: grid items default to min-width:auto, so a long unbroken
   string (a title, a URL, a wide table) forces the track wider than its share and
   blows the row out. One guard for every card grid. */
.pa-grid>*,.ind-grid>*,.ins-grid>*,.ev-grid>*,.loc-grid>*{min-width:0}
.art{background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;transition:all .3s var(--ease)}
.art:hover{box-shadow:var(--sh-3);transform:translateY(-5px)}
/* display:block is load-bearing — .th is an <a>, and aspect-ratio is ignored on
   non-replaced inline elements, which collapsed the ratio and let the thumb fill
   the card, clipping .b away under .art{overflow:hidden}. */
.art .th{display:block;aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--grey-100)}
.art .th img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.art:hover .th img{transform:scale(1.06)}
/* FL-012: the category pill wrapped to 2-3 lines and rendered as a red blob
   ("WEEKLY LEGAL DIGESTS"). nowrap keeps it a pill; the max-width + ellipsis stop
   it overflowing the thumbnail when the grid is narrow. */
.art .tag{position:absolute;top:14px;left:14px;background:var(--red);color:#fff;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pill);white-space:nowrap;max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis}
.art .b{padding:24px}
.art .dt{font-size:13px;color:var(--mid);display:flex;align-items:center;gap:7px;margin-bottom:10px}
.art .dt svg{width:14px;height:14px}
.art h3{font-size:19px;line-height:1.3;margin-bottom:10px}
.art:hover h3{color:var(--blue)}
.art p{font-size:14px;color:var(--mid);margin-bottom:16px}
@media(max-width:900px){.ins-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}}

/* EVENTS */
.events{background:var(--grey-50)}
/* FL-033: only 1 of 10 published events is upcoming, so a fixed 2-column grid
   rendered one card beside two-thirds of empty white. Same short-row treatment as
   .loc-grid — the single card keeps a sane measure and centres. */
.ev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,736px));gap:24px;margin-top:46px;justify-content:center}
.ev{background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);padding:28px;display:flex;gap:22px;transition:all .3s}
.ev:hover{box-shadow:var(--sh-2);transform:translateY(-3px)}
.ev .date{flex-shrink:0;width:80px;text-align:center;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;align-self:flex-start}
.ev .date .mo{background:var(--red);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 0}
.ev .date .dy{font-family:'Playfair Display';font-size:34px;font-weight:700;color:var(--blue-ink);padding:10px 0;line-height:1}
.ev .ec span.badge{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);background:var(--blue-pale);padding:5px 11px;border-radius:var(--r-pill)}
.ev .ec h3{font-size:20px;margin:12px 0 8px;line-height:1.25}
.ev .ec p{font-size:13.5px;color:var(--mid);display:flex;align-items:center;gap:7px}
.ev .ec p svg{width:14px;height:14px;color:var(--blue)}
@media(max-width:760px){.ev-grid{grid-template-columns:1fr}}

/* CTA band */
.ctaband{background:linear-gradient(120deg,var(--red) 0%,var(--red-dark) 100%);color:#fff;position:relative;overflow:hidden}
.ctaband.full-bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.ctaband::after{content:"";position:absolute;bottom:-140px;left:-80px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%)}
.ctaband .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;gap:40px;padding:72px 32px;flex-wrap:wrap}
.ctaband h2{color:#fff;font-size:clamp(28px,3.6vw,44px);max-width:680px}
.ctaband p{color:rgba(255,255,255,.82);margin-top:12px;font-size:17px}
.finlaw-empty{color:var(--mid);font-size:15px;padding:20px 0}
.ind .finlaw-empty{color:rgba(255,255,255,.7)}

/* =============================================================================
   14. INNER PAGE PATTERNS — banner + About (page-about.php), reused by inner pages
   ============================================================================= */
/* P2.1 (FL-010, decision D-1 = Option B): the interior header used
   navy -> hard red at 55% -> blue, which destroyed the underlying photograph and
   made inner pages read as a different site from the homepage. All four dark
   headers now share --header-overlay; red survives only as the bottom hairline
   and in eyebrows, CTAs and badges. */
.banner{position:relative;background:var(--header-overlay);color:#fff;overflow:hidden}
.banner,.ev-hero,.role-head{border-bottom:4px solid var(--red)}
.banner::after{content:"";position:absolute;top:-120px;right:-100px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,75,.22),transparent 70%);z-index:1}
/* Faint photo behind the gradient (mockup banner treatment); set via --banner-bg. */
.banner::before,.ev-hero::before,.role-head::before{content:"";position:absolute;inset:0;background-image:var(--banner-bg);background-size:cover;background-position:center;opacity:.16;mix-blend-mode:luminosity;pointer-events:none;z-index:0}
.banner .wrap{position:relative;z-index:2;padding:64px 32px 60px}
.banner .eyebrow{color:#fff}.banner .eyebrow::before{background:var(--gold)}
.banner h1{color:#fff;font-size:clamp(38px,5.5vw,62px);margin-top:14px}
.banner .blead{color:rgba(255,255,255,.82);font-size:18px;max-width:640px;margin-top:16px}
.banner .bc{color:rgba(255,255,255,.7);margin-bottom:18px}
.banner .bc a:hover{color:#fff}.banner .bc .here{color:var(--gold)}

/* STORY / profile */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.story-im{position:relative}
.story-im img{border-radius:var(--r-lg);box-shadow:var(--sh-3);width:100%;aspect-ratio:10/9;object-fit:cover}
.story-badge{position:absolute;top:-22px;right:-22px;background:var(--red-dark);border:3px solid #fff;color:#fff;padding:20px 24px;border-radius:var(--r);box-shadow:var(--sh-2);text-align:center}
.story-badge .n{font-family:'Playfair Display';font-size:30px;font-weight:700;line-height:1}
.story-badge .n span{color:var(--gold)}
.story-badge .l{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-top:5px}
.story-copy h2{font-size:clamp(28px,3.6vw,42px);margin:16px 0 22px}
.story-copy h2::after{content:"";display:block;width:48px;height:3px;background:var(--red);border-radius:2px;margin-top:14px}
.story-copy p{color:var(--mid);font-size:16.5px;margin-bottom:20px;text-wrap:pretty}
.story-copy blockquote,.story-copy .entry-content blockquote{border-left:3px solid var(--red);padding:6px 0 6px 22px;margin:6px 0 22px;font-family:'Playfair Display';font-style:italic;font-size:19px;color:var(--blue-ink);line-height:1.5}
@media(max-width:900px){.story-grid{grid-template-columns:1fr;gap:48px}.story-badge{right:20px}}

/* VISION / MISSION */
.vm{background:var(--grey-50)}
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:44px}
.vm-card{border-radius:var(--r-lg);padding:44px 40px;position:relative;overflow:hidden}
.vm-card.vision{background:linear-gradient(135deg,var(--red-dark) 0%,var(--red) 100%);color:#fff}
.vm-card.mission{background:#fff;border:1px solid var(--hair)}
.vm-card .vc-label{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;display:block}
.vm-card.vision .vc-label{color:var(--gold)}
.vm-card.mission .vc-label{color:var(--red)}
.vm-card h3{font-size:clamp(22px,2.8vw,30px);line-height:1.2;margin-bottom:18px}
.vm-card.vision h3{color:#fff}
.vm-card p{font-size:16px;line-height:1.7}
.vm-card.vision p{color:rgba(255,255,255,.8)}
.vm-card.mission p{color:var(--mid)}
@media(max-width:760px){.vm-grid{grid-template-columns:1fr}}

/* VALUES */
.val-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:46px}
.val-card{background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);padding:34px 28px;transition:all .3s var(--ease);position:relative;overflow:hidden}
.val-card::after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--red));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.val-card:hover{box-shadow:var(--sh-3);transform:translateY(-5px)}.val-card:hover::after{transform:scaleX(1)}
.val-ic{width:58px;height:58px;border-radius:14px;background:var(--red-pale);display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.val-ic svg{width:28px;height:28px;color:var(--red)}
.val-card h3{font-size:21px;margin-bottom:10px}
.val-card p{font-size:14.5px;color:var(--mid);line-height:1.65}
@media(max-width:900px){.val-grid{grid-template-columns:1fr 1fr;gap:20px}}
@media(max-width:520px){.val-grid{grid-template-columns:1fr}}

/* TIMELINE */
.tl{background:var(--grey-50)}
.tl-inner{max-width:860px;margin:60px auto 0;position:relative}
.tl-inner::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--blue) 0%,var(--gold) 100%);transform:translateX(-50%)}
.tl-row{display:grid;grid-template-columns:1fr 56px 1fr;align-items:center;margin-bottom:52px}
.tl-side{padding:0 36px}
.tl-left{text-align:right}
.tl-right{text-align:left}
.tl-dot-col{display:flex;align-items:center;justify-content:center}
.tl-dot{width:48px;height:48px;border-radius:50%;background:var(--blue);border:4px solid #fff;box-shadow:0 0 0 3px var(--blue);display:flex;align-items:center;justify-content:center}
.tl-dot svg{width:20px;height:20px;color:#fff}
.tl-row.milestone .tl-dot{background:var(--red);box-shadow:0 0 0 3px var(--red)}
.tl-row.now .tl-dot{background:var(--gold);box-shadow:0 0 0 3px var(--gold)}
.tl-year{font-family:'Playfair Display';font-size:14px;font-weight:700;color:var(--blue);letter-spacing:.04em;margin-bottom:6px}
.tl-row.milestone .tl-year{color:var(--red)}
.tl-row.now .tl-year{color:var(--gold)}
.tl-txt h4{font-size:18px;margin-bottom:6px}
.tl-txt p{font-size:14px;color:var(--mid)}
@media(max-width:680px){
	.tl-inner::before{left:22px;transform:none}
	.tl-row{grid-template-columns:44px 1fr;gap:0}
	.tl-row .tl-left,.tl-row .r-empty{display:none}
	.tl-side{padding:0 0 0 20px;text-align:left}
}

/* LEADERSHIP grid (reuses .ppl) */
.lead-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:46px}
@media(max-width:980px){.lead-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.lead-grid{grid-template-columns:1fr}}

/* HOW WE WORK */
.hww{background:var(--red-maroon);color:#fff;position:relative;overflow:hidden}
.hww::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 80%,rgba(38,64,141,.30),transparent 50%)}
.hww .wrap{position:relative}
.hww .section-head h2{color:#fff}
.hww .section-head p{color:rgba(255,255,255,.72)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:50px;position:relative}
.steps::before{content:"";position:absolute;top:35px;left:16.5%;right:16.5%;height:1px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0,rgba(255,255,255,.2) 10px,transparent 10px,transparent 20px)}
.step{padding:0 32px;text-align:center}
.step .sn{width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;margin:0 auto 26px;position:relative;transition:all .4s}
.step:hover .sn{background:var(--red);border-color:var(--red)}
.step .sn svg{width:30px;height:30px;color:var(--gold);transition:color .4s}
.step:hover .sn svg{color:#fff}
.step h3{color:#fff;font-size:22px;margin-bottom:12px}
.step p{color:rgba(255,255,255,.72);font-size:15px;line-height:1.65}
.step-num{position:absolute;top:-10px;right:-10px;width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
@media(max-width:760px){.steps{grid-template-columns:1fr;gap:40px}.steps::before{display:none}.step{padding:0}}

/* MEMBERSHIPS */
.memb{background:var(--grey-50)}
.memb-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:44px}
.mem{background:#fff;border:1px solid var(--hair);border-top:3px solid transparent;border-radius:var(--r);padding:26px 20px;text-align:center;transition:all .3s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px}
.mem:hover{box-shadow:var(--sh-2);transform:translateY(-3px);border-top-color:var(--red)}
.mem .mem-ic{color:var(--mid);transition:color .3s}
.mem:hover .mem-ic{color:var(--red)}
.mem span{font-size:12px;font-weight:600;color:var(--mid);letter-spacing:.02em}
@media(max-width:860px){.memb-strip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.memb-strip{grid-template-columns:1fr 1fr}}

/* =============================================================================
   15. PEOPLE — archive-lawyer.php + single-lawyer.php
   ============================================================================= */
/* archive filter bar */
.filterbar{position:sticky;top:84px;z-index:60;background:#fff;border-bottom:1px solid var(--hair);box-shadow:var(--sh-1)}
.filterbar .wrap{display:flex;align-items:center;gap:14px;padding:14px 32px;flex-wrap:wrap}
.fb-search{display:flex;align-items:center;gap:10px;border:1.5px solid var(--hair);border-radius:var(--r-sm);padding:10px 14px;min-width:220px;flex:1;transition:border-color .2s}
.fb-search:focus-within{border-color:var(--blue)}
.fb-search svg{width:17px;height:17px;color:var(--mid);flex-shrink:0}
.fb-search input{border:none;outline:none;font-family:inherit;font-size:14.5px;flex:1}
.fb-sel{border:1.5px solid var(--hair);border-radius:var(--r-sm);padding:10px 14px;font-size:14px;font-weight:500;color:var(--ink);background:#fff;cursor:pointer;transition:border-color .2s}
.fb-sel:hover,.fb-sel:focus{border-color:var(--blue);color:var(--blue);outline:none}
.fb-count{font-size:13.5px;color:var(--mid);white-space:nowrap;margin-left:auto}
@media(max-width:640px){.filterbar .wrap{gap:10px}.fb-search{min-width:100%;order:-1}.fb-count{margin-left:0}}
.people-section{padding:64px 0 96px;background:var(--grey-50)}
.people-section .ppl-grid{margin-top:0}
.ppl.is-hidden{display:none}

/* single profile header */
.profile-hdr{padding:64px 0 72px;border-bottom:1px solid var(--hair)}
.profile-hdr .wrap{display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:start}
.portrait-col{position:sticky;top:106px}
.portrait-col img{width:100%;border-radius:var(--r-lg);box-shadow:var(--sh-2);aspect-ratio:1/1.12;object-fit:cover;background:var(--blue-pale)}
.profile-meta{padding-top:8px}
.profile-meta .role-badge{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.profile-meta .role-badge::before{content:"";width:30px;height:2px;background:var(--red)}
.profile-meta h1{font-size:clamp(32px,4vw,50px);margin-bottom:8px;line-height:1.1}
.profile-meta .office-line{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--mid);margin-bottom:30px}
.profile-meta .office-line svg{width:16px;height:16px;color:var(--blue)}
.profile-meta .standfirst{font-size:19px;color:var(--blue-ink);line-height:1.55;border-left:3px solid var(--red);padding-left:22px;margin-bottom:32px;font-family:'Playfair Display';font-style:italic}
.contact-btns{display:flex;flex-wrap:wrap;gap:10px}
.cbtn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:var(--r-sm);font-size:14px;font-weight:600;border:1.5px solid var(--hair);background:#fff;color:var(--ink);transition:all .2s;cursor:pointer}
.cbtn svg{width:16px;height:16px;color:var(--blue)}
.cbtn:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px);box-shadow:var(--sh-1)}
.cbtn.primary{background:var(--red);color:#fff;border-color:var(--red)}
.cbtn.primary svg{color:#fff}
.cbtn.primary:hover{background:var(--red-dark);color:#fff}
@media(max-width:960px){.profile-hdr .wrap{grid-template-columns:240px 1fr;gap:36px}}
@media(max-width:720px){.profile-hdr .wrap{grid-template-columns:1fr}.portrait-col{position:static;max-width:320px}}

/* single main layout + sidebar */
.main-layout{display:grid;grid-template-columns:1fr 360px;gap:56px;padding:64px 0 96px;align-items:start}
.main-content h2{font-size:28px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--hair)}
.bio p{color:#3a3a4a;font-size:16.5px;margin-bottom:20px;text-wrap:pretty;line-height:1.75}
.bio h2{margin-top:44px}
.sidebar{display:flex;flex-direction:column;gap:26px;position:sticky;top:106px}
.side-card{background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1)}
.side-card .sc-head{padding:18px 22px;background:var(--grey-50);border-bottom:1px solid var(--hair);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-ink)}
.side-card .sc-body{padding:20px 22px}
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px}
.tag-cloud a{font-size:13px;font-weight:500;color:var(--blue);background:var(--blue-pale);padding:6px 13px;border-radius:999px;transition:all .2s}
.tag-cloud a:hover{background:var(--blue);color:#fff}
.detail-list{list-style:none;display:grid;gap:14px}
.detail-list li{display:flex;flex-direction:column;gap:2px;font-size:14px}
.detail-list .dl{font-weight:600;color:var(--blue-ink);font-size:13.5px}
.detail-list .dv{color:var(--mid)}
.contact-mini{display:flex;flex-direction:column;gap:10px}
.contact-mini a{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);padding:10px 12px;border-radius:8px;border:1px solid var(--hair);transition:all .2s;word-break:break-word}
.contact-mini a:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-pale)}
.contact-mini a svg{width:17px;height:17px;color:var(--blue);flex-shrink:0}
@media(max-width:960px){.main-layout{grid-template-columns:1fr}.sidebar{position:static}}

/* single related */
.related-section{padding:72px 0;background:var(--grey-50);border-top:1px solid var(--hair)}
.related-section .ins-grid{margin-top:36px}
.related-ppl{padding:72px 0;border-top:1px solid var(--hair)}
.rp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.rp{background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;transition:all .3s var(--ease);display:flex;flex-direction:column}
.rp:hover{box-shadow:var(--sh-3);transform:translateY(-4px)}
.rp .ph{aspect-ratio:1/1;overflow:hidden;background:var(--blue-pale)}
.rp .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;transition:transform .5s}
.rp:hover .ph img{transform:scale(1.05)}
.rp .info{padding:18px 20px}
.rp .role{font-size:12px;font-weight:700;color:var(--red);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.rp .info h3{font-size:17.5px;margin-bottom:5px}
.rp .spec{font-size:13px;color:var(--mid)}
@media(max-width:760px){.rp-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.rp-grid{grid-template-columns:1fr}}

/* =============================================================================
   16. EXPERTISE — archive-practice_area.php + single-practice_area.php
   ============================================================================= */
.intro{padding:80px 0 30px}
.intro .wrap{max-width:880px;text-align:center}
.intro h2{font-size:clamp(28px,3.6vw,40px);margin:14px 0 18px}
.intro h2::after{content:"";display:block;width:48px;height:3px;background:var(--red);border-radius:2px;margin:14px auto 0}
.intro p{color:var(--mid);font-size:18px;text-wrap:pretty}
.exp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.exp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.exp-grid{grid-template-columns:1fr}}
/* banner icon chip (reused by single CPT banners) */
/* Unified page-header partial (template-parts/page-header.php).
   FL-018: .banner declared no min-height, so band depth drifted 240-315px between
   pages and long CPT titles crowded the subtitle against the bottom edge. Interior
   and CPT headers now share one floor with vertically centred content; the stub
   variant (breadcrumbs + eyebrow only) keeps its natural height.
   Scoped to .banner itself, NOT the --inner/--cpt modifiers: on live CPT and
   archive routes the header is an Elementor section that merely wears .banner,
   so modifier-scoped rules would never reach it. Verified in-browser that the
   grid model leaves Elementor's own container geometry untouched. */
.banner{min-height:420px;display:grid;align-content:center}
/* P5 regression fix: the grid above was introduced in P2 for vertical centring, but
   at 375px it made .elementor-container a grid item with min-width:auto, sized to
   its content (427px) and then silently clipped by .banner{overflow:hidden} — 52px
   of header cut off with no scrollbar. Below the tablet breakpoint the banner is
   always taller than its 420px floor anyway, so centring buys nothing there. */
@media(max-width:767px){.banner{display:block}}
.banner--stub{min-height:0;display:block}
.banner--stub .wrap{padding-bottom:34px}
.banner .b-meta{margin-top:18px;display:flex;gap:22px;flex-wrap:wrap;color:rgba(255,255,255,.85);font-size:15px}
.banner .b-meta svg{width:17px;height:17px;color:var(--gold)}
.banner .b-cta{margin-top:26px}
.banner .b-ic{width:64px;height:64px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.banner .b-ic svg{width:32px;height:32px;color:var(--gold)}

/* single two-col layout */
.layout{padding:80px 0 96px}
/* FL-003 root cause: this was a descendant selector (.layout .wrap), so it also
   matched the nested .wrap that inc/cpt-single-industry.php:143 emits for the
   "Related insights" band rendered inside .layout. That band's .section-head and
   .ins-grid became the two tracks — heading 217px, cards squeezed into the 360px
   sidebar track — which is the collapsed 3x~102px sliver grid on every sector
   single. Direct-child only: the page-level main/side split still works, nested
   sections are left alone. */
.layout>.wrap{display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:start}
/* FL-035: on the Elementor-rendered CPT singles these columns carry
   .elementor-col-66/.elementor-col-34, but Elementor's own column-width CSS is not
   reaching these pages — computed width is `auto` with no matching rule, so the
   columns size to their content and the 34% sidebar rendered WIDER (842px) than
   the 66% main column (718px). Declaring the intended split here restores 2:1 and
   widens the related-insights grid from 634px to 956px.
   NOTE: the underlying "Elementor column CSS missing" issue is site-wide and needs
   its own investigation — this rule only repairs the .layout templates. */
.layout>.elementor-container>.main{width:66.666%;min-width:0}
.layout>.elementor-container>.side{width:33.333%;min-width:0}
@media(max-width:920px){.layout>.elementor-container>.main,.layout>.elementor-container>.side{width:100%}}
.main h2{font-size:clamp(26px,3.2vw,36px);margin:0 0 18px}
.main h2::after{content:"";display:block;width:48px;height:3px;background:var(--red);border-radius:2px;margin-top:14px}
.main h3{font-size:23px;margin:42px 0 16px}
.main p{color:#3a3a4a;font-size:16.5px;margin-bottom:18px;text-wrap:pretty;line-height:1.75}
.main .lede{font-size:19px;color:var(--ink);font-weight:400}
.svc-list{display:grid;gap:22px;margin-top:8px}
.svc-item{border-left:3px solid var(--red);padding:4px 0 4px 20px}
.svc-item h3{font-size:19px;margin:0 0 6px}
.svc-item p{margin:0;font-size:15px;color:var(--mid)}
.rel{margin-top:46px;padding-top:34px;border-top:1px solid var(--hair)}
.rel h3{margin:0 0 16px;font-size:20px}
.rel-tags{display:flex;flex-wrap:wrap;gap:10px}
.rel-tags a{font-size:14px;font-weight:500;color:var(--blue);background:var(--grey-50);border:1px solid var(--hair);padding:9px 16px;border-radius:30px;transition:all .2s}
.rel-tags a:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
/* single sidebar */
.side{position:sticky;top:106px;display:grid;gap:24px}
.side-list{display:flex;flex-direction:column;padding:8px}
.side-list a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:8px;font-size:14.5px;font-weight:500;color:var(--ink);transition:all .2s}
.side-list a svg{width:17px;height:17px;color:var(--red);flex-shrink:0}
.side-list a:hover{background:var(--grey-50);color:var(--blue)}
.contact-card{background:linear-gradient(135deg,var(--red-deep) 0%,var(--red) 100%);color:#fff;border-radius:14px;padding:28px 24px;box-shadow:var(--sh-2)}
.contact-card h3{color:#fff;font-size:21px;margin-bottom:6px}
.contact-card p{color:rgba(255,255,255,.8);font-size:14px;margin-bottom:20px}
.contact-card .btn{width:100%;justify-content:center}
@media(max-width:920px){.layout>.wrap{grid-template-columns:1fr;gap:48px}.side{position:static}}

/* =============================================================================
   17. INDUSTRIES — archive-industry.php + single-industry.php
   ============================================================================= */
/* archive rich cards */
.ind-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ind-card{background:#fff;border:1px solid var(--hair);border-top:3px solid transparent;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:all .3s var(--ease);position:relative}
.ind-card:hover{border-color:transparent;border-top-color:var(--red);box-shadow:var(--sh-3);transform:translateY(-5px)}
.ind-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--grey-100)}
.ind-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.ind-card:hover .ind-media img{transform:scale(1.06)}
.ind-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,34,77,0) 40%,rgba(21,34,77,.55) 100%)}
.ind-badge{position:absolute;left:16px;bottom:16px;z-index:2;width:46px;height:46px;border-radius:11px;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-1);transition:all .3s}
.ind-card:hover .ind-badge{background:var(--red)}
.ind-badge svg{width:24px;height:24px;color:var(--red);transition:color .3s}
.ind-card:hover .ind-badge svg{color:#fff}
.ind-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.ind-body h3{font-size:21px;margin-bottom:9px}
.ind-body p{font-size:14.5px;color:var(--mid);margin-bottom:18px;flex:1;text-wrap:pretty}
/* .explore, .ex and .oc-link share one rule — see FL-014 consolidation above. */
@media(max-width:980px){.ind-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.ind-cards{grid-template-columns:1fr}}

/* cross-link band */
.xlink{background:var(--grey-50);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.xlink .head{text-align:center;max-width:760px;margin:0 auto 44px}
.xlink .head h2{font-size:clamp(26px,3.4vw,38px);margin:14px 0 14px}
.xlink .head p{color:var(--mid);font-size:17px}

/* single sticky on-page nav */
.onpage{position:sticky;top:84px;z-index:40;background:#fff;border-bottom:1px solid var(--hair);box-shadow:0 4px 14px rgba(21,34,77,.05)}
.onpage .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.onpage .wrap::-webkit-scrollbar{display:none}
.onpage a{padding:18px 16px;font-size:14px;font-weight:600;color:var(--mid);white-space:nowrap;border-bottom:3px solid transparent;transition:all .2s}
.onpage a:hover,.onpage a.active{color:var(--blue);border-bottom-color:var(--red)}

/* FAQ (native details) */
.faq{margin-top:8px;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:17px;font-weight:600;color:var(--blue-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex-shrink:0;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--hair);display:flex;align-items:center;justify-content:center;transition:all .25s}
.faq summary .pm svg{width:15px;height:15px;color:var(--red);transition:transform .3s}
.faq details[open] summary .pm{background:var(--red);border-color:var(--red)}
.faq details[open] summary .pm svg{color:#fff;transform:rotate(45deg)}
.faq .faq-a{color:var(--mid);font-size:15.5px;padding-bottom:22px;line-height:1.7}

/* Accordion / FAQ (FIN & LAW widget 14) — button-based disclosure, brand-tokened,
   matching the native .faq look but adding single-open / ESC / aria-expanded via JS. */
.finlaw-acc{margin-top:8px;border-top:1px solid var(--hair)}
.finlaw-acc__item{border-bottom:1px solid var(--hair)}
.finlaw-acc__h{margin:0;font-size:inherit}
.finlaw-acc__q{width:100%;background:none;border:0;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:inherit;font-size:17px;font-weight:600;color:var(--blue-ink);text-align:left}
.finlaw-acc__q:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(38,64,141,.14);border-radius:6px}
.finlaw-acc__q .chev{flex-shrink:0;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--hair);display:flex;align-items:center;justify-content:center;transition:all .25s}
.finlaw-acc__q .chev svg{width:15px;height:15px;color:var(--red);transition:transform .3s}
.finlaw-acc__q[aria-expanded="true"] .chev{background:var(--red);border-color:var(--red)}
.finlaw-acc__q[aria-expanded="true"] .chev svg{color:#fff;transform:rotate(180deg)}
.finlaw-acc__a{color:var(--mid);font-size:15.5px;padding-bottom:22px;line-height:1.7}
.finlaw-acc__a[hidden]{display:none}

/* how-we-help / representative experience lists */
.help-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;margin:6px 0 8px}
.help-list li{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;color:var(--ink);font-weight:500}
.help-list svg{width:20px;height:20px;color:var(--red);flex-shrink:0;margin-top:2px}
.exp-list{list-style:none;display:grid;gap:11px;margin-top:8px}
.exp-list li{font-size:15.5px;color:#3a3a4a;padding-left:18px;position:relative;line-height:1.6}
.exp-list li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--red)}
@media(max-width:560px){.help-list{grid-template-columns:1fr}}

/* =============================================================================
   18. INSIGHTS — archive-insight.php + taxonomy + single-insight.php
   ============================================================================= */
.featured{padding:72px 0 10px}
.feat-card{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:#fff;border:1px solid var(--hair);border-radius:18px;overflow:hidden;box-shadow:var(--sh-2)}
.feat-media{position:relative;min-height:420px;overflow:hidden;background:var(--grey-100)}
.feat-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .7s var(--ease)}
.feat-card:hover .feat-media img{transform:scale(1.04)}
.feat-flag{position:absolute;left:22px;top:22px;z-index:2;background:var(--red);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:30px}
.feat-body{padding:46px 44px;display:flex;flex-direction:column;justify-content:center}
.feat-meta{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--mid);margin-bottom:16px;flex-wrap:wrap}
.feat-meta .cat{font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.feat-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--hair)}
.feat-body h2{font-size:clamp(26px,2.7vw,36px);line-height:1.12;margin-bottom:16px}
.feat-body p{color:var(--mid);font-size:16.5px;margin-bottom:24px;text-wrap:pretty}
@media(max-width:880px){.feat-card{grid-template-columns:1fr}.feat-media{min-height:260px}.feat-body{padding:34px 28px}}

/* filter pills (scoped so they don't clash with the brand .pill) */
.filterbar .pills{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.filterbar .pills .pill{font-size:13.5px;font-weight:600;padding:8px 16px;border-radius:30px;background:var(--grey-50);border:1px solid var(--hair);color:var(--mid);transition:all .2s;white-space:nowrap}
.filterbar .pills .pill:hover{border-color:var(--blue);color:var(--blue)}
.filterbar .pills .pill.active{background:var(--red);border-color:var(--red);color:#fff}

.grid-sec{padding:56px 0 20px}
.grid-sec .ins-grid{margin-top:0}
/* Insights archive: breathe out the featured card / pills / grid (client 2026-09-07 "put some space between those section area") */
.post-type-archive-insight .featured{padding-bottom:34px}
.post-type-archive-insight .filterbar{margin-bottom:34px}

/* newsletter band */
.newsband{background:var(--blue-ink);color:#fff;padding:64px 0}
.newsband .wrap{max-width:760px;text-align:center}
.newsband h2{color:#fff;font-size:clamp(26px,3vw,34px);margin-bottom:12px}
.newsband p{color:rgba(255,255,255,.72);margin-bottom:26px}
.newsband .btn{margin:0 auto}

/* ARTICLE single */
.art-head{background:var(--grey-50);border-bottom:1px solid var(--hair);padding:54px 0 44px}
.art-head .wrap{max-width:820px}
.cat-tag{display:inline-block;background:var(--red);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:30px;margin-bottom:20px}
.art-head h1{font-size:clamp(30px,4.2vw,46px);line-height:1.1;margin-bottom:22px}
.byline{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.byline .who{display:flex;align-items:center;gap:12px}
.byline img{width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:var(--sh-1)}
.byline .who b{font-family:'Playfair Display';font-size:16px;color:var(--blue-ink);display:block}
.byline .who span{font-size:13px;color:var(--mid)}
.byline .meta{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--mid);padding-left:18px;border-left:1px solid var(--hair)}
.byline .meta .dot{width:4px;height:4px;border-radius:50%;background:var(--hair)}
.share{display:flex;gap:8px;margin-left:auto}
.share a{width:38px;height:38px;border-radius:50%;border:1px solid var(--hair);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--mid);transition:all .2s}
.share a:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.share a svg{width:16px;height:16px}
@media(max-width:620px){.byline .meta{padding-left:0;border-left:none}.share{margin-left:0;width:100%}}
.hero-img{max-width:1080px;margin:0 auto;padding:0 28px;transform:translateY(-30px)}
.hero-img figure{border-radius:16px;overflow:hidden;box-shadow:var(--sh-2)}
.hero-img img{width:100%;aspect-ratio:2/1;object-fit:cover}
.art-layout{padding:18px 0 90px}
.art-layout .wrap{max-width:1080px;display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:60px;align-items:start}
.article{max-width:720px}
.article p{font-size:17.5px;color:#2e2e3c;margin-bottom:22px;text-wrap:pretty;line-height:1.8}
.article h2{font-size:26px;margin:42px 0 16px;scroll-margin-top:120px}
.article h2::after{content:"";display:block;width:48px;height:3px;background:var(--red);border-radius:2px;margin-top:14px}
.article h3{font-size:20px;margin:30px 0 12px}
/* FL-024: this used display:grid for the 10px item gap, but grid containers
   suppress list markers, so every bullet and number vanished and items read as
   indented plain lines. list-style is restored explicitly (ul,ol are reset to
   list-style:none globally) and the gap is done with margins. */
.article ul,.article ol{margin:8px 0 26px;padding-left:22px;color:#2e2e3c}
.article ul{list-style:disc}
.article ol{list-style:decimal}
.article li{margin-bottom:10px}
.article li::marker{color:var(--red)}
.article blockquote{margin:36px 0;padding:8px 0 8px 30px;border-left:4px solid var(--red);font-family:'Playfair Display';font-size:23px;line-height:1.34;color:var(--blue-ink);font-style:italic}
.art-disclaimer{font-size:13px;color:var(--mid);font-style:italic;margin-top:36px;padding-top:20px;border-top:1px solid var(--hair)}
/* TOC */
.toc{position:sticky;top:106px}
.toc-inner{border-left:2px solid var(--hair);padding-left:20px}
.toc-inner .lbl{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mid);margin-bottom:16px}
.toc-inner a{display:block;font-size:14px;color:var(--mid);padding:7px 0;line-height:1.35;transition:color .2s;border-left:2px solid transparent;margin-left:-22px;padding-left:20px}
.toc-inner a:hover{color:var(--blue)}
.toc-share{margin-top:26px;padding-top:22px;border-top:1px solid var(--hair)}
.toc-share .lbl{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mid);margin-bottom:12px}
.toc-share .row{display:flex;gap:8px}
.toc-share a{width:36px;height:36px;border-radius:8px;border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;color:var(--mid);transition:all .2s}
.toc-share a:hover{border-color:var(--blue);color:var(--blue)}.toc-share a svg{width:15px;height:15px}
@media(max-width:920px){.art-layout .wrap{grid-template-columns:1fr;gap:0}.toc{display:none}.article{max-width:720px;margin:0 auto}}
/* author box + inline cta + tags */
.art-tags{max-width:720px;display:flex;flex-wrap:wrap;gap:9px;margin-top:36px}
.art-tags a{font-size:13px;font-weight:500;color:var(--blue);background:var(--blue-pale);padding:6px 13px;border-radius:999px}
.author-box{max-width:720px;margin:48px 0 0;background:#fff;border:1px solid var(--hair);border-radius:16px;padding:28px 30px;display:flex;gap:22px;align-items:center;box-shadow:var(--sh-1)}
.author-box img{width:84px;height:84px;border-radius:50%;object-fit:cover;flex-shrink:0;border:3px solid var(--grey-100)}
.author-box .ab-name{font-family:'Playfair Display';font-size:20px;color:var(--blue-ink)}
.author-box .ab-role{font-size:13.5px;color:var(--red);font-weight:600;margin:2px 0 10px}
.author-box p{font-size:14.5px;color:var(--mid);margin-bottom:12px;text-wrap:pretty}
.author-box .ab-link{font-size:14px;font-weight:600;color:var(--blue);display:inline-flex;align-items:center;gap:7px}
.author-box .ab-link svg{width:15px;height:15px}
@media(max-width:560px){.author-box{flex-direction:column;text-align:center}}
.inline-cta{max-width:720px;margin:44px 0 0;background:linear-gradient(135deg,var(--red-dark) 0%,var(--red) 100%);color:#fff;border-radius:16px;padding:38px 40px}
.inline-cta h3{color:#fff;font-size:24px;margin-bottom:8px}
.inline-cta p{color:rgba(255,255,255,.85);margin-bottom:20px}

/* =============================================================================
   19. EVENTS — archive-event.php + single-event.php
   ============================================================================= */
.sec-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:36px;flex-wrap:wrap}
.sec-title h2{font-size:clamp(26px,3vw,36px)}
.sec-title h2::after{content:"";display:block;width:48px;height:3px;background:var(--red);border-radius:2px;margin-top:14px}
.sec-title .count{font-size:14px;color:var(--mid)}
.past{background:var(--grey-50);border-top:1px solid var(--hair)}
.ev.is-hidden{display:none}
/* event hero */
.ev-hero{position:relative;color:#fff;overflow:hidden;background:var(--red-maroon)}
.ev-hero::after{content:"";position:absolute;inset:0;background:var(--header-overlay)}
.ev-hero .wrap{position:relative;z-index:2;padding:54px 32px 58px}
.ev-hero .bc{color:rgba(255,255,255,.72);margin-bottom:22px}
.ev-hero .bc a:hover{color:#fff}.ev-hero .bc .here{color:var(--gold)}
.ev-hero .tags{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.ev-hero .type{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--red);color:#fff;padding:7px 14px;border-radius:30px}
.ev-hero .past-flag{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.14);color:#fff;padding:6px 13px;border-radius:30px}
.ev-hero h1{color:#fff;font-size:clamp(30px,4.2vw,48px);max-width:840px;line-height:1.08;margin-bottom:20px}
.ev-hero .ev-meta{display:flex;gap:22px;flex-wrap:wrap;color:rgba(255,255,255,.85);font-size:15px}
.ev-hero .ev-meta span{display:inline-flex;align-items:center;gap:8px}
.ev-hero .ev-meta svg{width:17px;height:17px;color:var(--gold)}
/* event detail sidebar */
.ev-detail{list-style:none;display:grid;gap:16px}
.ev-detail li{display:flex;gap:12px;font-size:14.5px;color:var(--ink)}
.ev-detail li svg{width:18px;height:18px;color:var(--red);flex-shrink:0;margin-top:2px}
.ev-detail .dl{font-weight:600;color:var(--blue-ink);display:block;font-size:13px}
.ev-detail .dv{color:var(--mid)}
.ev-actions{display:grid;gap:10px;margin-top:6px}
.ev-actions .btn{width:100%;justify-content:center}
/* agenda */
.agenda{list-style:none;display:grid;margin-top:6px;border-left:2px solid var(--hair)}
.agenda li{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:18px 0 18px 26px;position:relative;border-bottom:1px solid var(--grey-100)}
.agenda li:last-child{border-bottom:none}
.agenda li::before{content:"";position:absolute;left:-7px;top:24px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--red)}
.agenda .t{font-size:14px;font-weight:700;color:var(--red)}
.agenda .desc b{display:block;font-family:'Playfair Display';font-size:17px;color:var(--blue-ink);margin-bottom:3px}
.agenda .desc span{font-size:14px;color:var(--mid)}
@media(max-width:560px){.agenda li{grid-template-columns:1fr;gap:4px}}

/* =============================================================================
   20. CAREERS — archive-vacancy.php + single-vacancy.php
   ============================================================================= */
/* why cards */
.why-card{background:#fff;border:1px solid var(--hair);border-radius:16px;padding:32px 28px;transition:all .3s var(--ease)}
.why-card:hover{border-color:transparent;box-shadow:var(--sh-3);transform:translateY(-4px)}
.why-card .why-ic{width:56px;height:56px;border-radius:14px;background:var(--red-pale);display:flex;align-items:center;justify-content:center;margin-bottom:22px;transition:all .3s}
.why-card:hover .why-ic{background:var(--red)}
.why-card .why-ic svg{width:27px;height:27px;color:var(--red);transition:color .3s}
.why-card:hover .why-ic svg{color:#fff}
.why-card h3{font-size:21px;margin-bottom:10px}
.why-card p{font-size:14.5px;color:var(--mid);text-wrap:pretty}
/* careers stat strip (gold numbers) */
.stat-strip{background:linear-gradient(120deg,var(--red-deep) 0%,var(--red) 60%,#f03040 100%);color:#fff}
.stat-strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:54px 28px}
.stat-strip .s{text-align:center}
.stat-strip .s .n{font-family:'Playfair Display';font-size:clamp(32px,3.6vw,44px);font-weight:700;color:var(--gold);line-height:1}
.stat-strip .s .l{font-size:13.5px;color:rgba(255,255,255,.7);margin-top:8px}
@media(max-width:680px){.stat-strip .wrap{grid-template-columns:1fr 1fr}}
/* vacancy cards */
.vac-list{display:grid;gap:18px}
.vac-card{display:block;background:#fff;border:1px solid var(--hair);border-top:3px solid var(--red);border-radius:16px;padding:26px 30px;transition:all .3s var(--ease)}
.vac-card:hover{box-shadow:var(--sh-3);transform:translateY(-3px)}
.vac-card .vac-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.vac-card .jt{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red);background:var(--red-pale);padding:5px 12px;border-radius:30px}
.vac-card .deadline{font-size:13px;color:var(--mid)}
.vac-card h3{font-size:21px;margin-bottom:8px}
.vac-card .vac-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--mid)}
.vac-card .vac-meta span{display:inline-flex;align-items:center;gap:7px}
.vac-card .vac-meta svg{width:15px;height:15px;color:var(--blue)}
.vac-card.is-hidden{display:none}
/* graduates block + life gallery */
.grad{background:var(--blue-ink);color:#fff;position:relative;overflow:hidden}
.grad .wrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.grad h2{color:#fff;font-size:clamp(26px,3vw,38px);margin-bottom:16px}
.grad p{color:rgba(255,255,255,.78);margin-bottom:18px}
.grad .glist{list-style:none;display:grid;gap:12px;margin-bottom:24px}
.grad .glist li{display:flex;gap:11px;align-items:flex-start;font-size:15px}
.grad .glist svg{width:20px;height:20px;color:var(--gold);flex-shrink:0;margin-top:2px}
@media(max-width:860px){.grad .wrap{grid-template-columns:1fr;gap:32px}}
.life-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.life-gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r)}
@media(max-width:680px){.life-gallery{grid-template-columns:1fr 1fr}}
/* role header (single) */
.role-head{position:relative;background:var(--header-overlay);color:#fff;overflow:hidden}
.role-head::after{content:"";position:absolute;top:-120px;right:-100px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,75,.28),transparent 70%)}
.role-head .wrap{position:relative;z-index:2;padding:54px 32px 56px}
.role-head .bc{color:rgba(255,255,255,.72);margin-bottom:22px}
.role-head .bc a:hover{color:#fff}.role-head .bc .here{color:var(--gold)}
.role-head .type{display:inline-block;background:var(--red);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:30px;margin-bottom:18px}
.role-head h1{color:#fff;font-size:clamp(30px,4.4vw,50px);max-width:780px;line-height:1.08;margin-bottom:22px}
.role-facts{display:flex;gap:30px;flex-wrap:wrap}
.role-fact{display:flex;gap:11px;align-items:center}
.role-fact svg{width:20px;height:20px;color:var(--gold);flex-shrink:0}
.role-fact .v{font-size:15px;font-weight:600;color:#fff}
/* .role-list draws its own tick (li::before box + li::after checkmark). On event
   singles it renders inside an .article/Elementor context whose `.article ul{
   list-style:disc}` re-added a stray disc bullet ON TOP of the tick — two markers.
   Force list-style:none so only the designed tick shows. */
.role-list,.role-list li{list-style:none!important}
.role-list{display:grid;gap:13px;margin:6px 0 8px}
.role-list li{position:relative;padding-left:32px;font-size:16px;color:#3a3a4a}
.role-list li::before{content:"";position:absolute;left:0;top:7px;width:18px;height:18px;border-radius:5px;background:var(--grey-50);border:1px solid var(--hair)}
.role-list li::after{content:"";position:absolute;left:5px;top:11px;width:8px;height:5px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
/* application form */
.apply-sec{background:var(--grey-50);border-top:1px solid var(--hair)}
.apply-wrap{max-width:820px;margin:0 auto}
.apply-head{text-align:center;margin-bottom:40px}
.apply-form{background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);padding:40px;box-shadow:var(--sh-1)}
.form-sec-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin:8px 0 18px}
.apply-form .full{grid-column:1/-1}
.applied-msg,.closed-msg{max-width:820px;margin:0 auto;border-radius:var(--r-lg);padding:32px 34px;text-align:center}
.applied-msg{background:var(--green-bg);border:1px solid #bfe6cf;color:#1f7a45}
.closed-msg{background:#fff;border:1px solid var(--hair);color:var(--mid)}

/* =============================================================================
   21. CONTENT PAGES — responsibility / knowledge / awards
   ============================================================================= */
/* testimonials */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
.testi{background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);padding:30px 28px;box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:16px}
.testi .quote{font-size:15.5px;color:#3a3a4a;line-height:1.65;text-wrap:pretty;position:relative;padding-top:14px}
.testi .quote::before{content:"\201C";position:absolute;top:-10px;left:-2px;font-family:'Playfair Display';font-size:46px;color:var(--red);line-height:1}
.testi .by{display:flex;align-items:center;gap:12px;margin-top:auto}
.testi .by b{font-family:'Playfair Display';font-size:15px;color:var(--blue-ink);display:block}
.testi .by span{font-size:13px;color:var(--mid)}
@media(max-width:900px){.testi-grid{grid-template-columns:1fr}}
/* rankings / alliance */
.rank-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
@media(max-width:760px){.rank-grid{grid-template-columns:1fr 1fr}}

/* Photo band / secondary hero (FIN & LAW widget) — full-bleed photo with overlaid
   text. Moved verbatim (tokenised) from the deploy build script so it is now a
   real, editable widget. Unique .fl-shero wrapper never collides with .hero. */
.fl-shero{position:relative;height:520px;overflow:hidden;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.fl-shero .hbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fl-shero .hov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,34,77,.86) 0%,rgba(21,34,77,.5) 52%,transparent 100%)}
.fl-shero .hinner{position:relative;height:100%;display:flex;align-items:center}
.fl-shero .hinner .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;max-width:1280px;margin:0 auto;padding:0 32px;width:100%}
.fl-shero.single .hinner .wrap{grid-template-columns:1fr}.fl-shero.single .hero-txt{max-width:780px}
.fl-shero .hero-txt{color:#fff}
.fl-shero .hero-txt .eyebrow{color:#fff}.fl-shero .hero-txt .eyebrow::before{background:var(--gold)}
.fl-shero .hero-txt h2{color:#fff;font-family:'Playfair Display',serif;font-weight:800;font-size:clamp(30px,4.5vw,54px);margin-top:20px;line-height:1.1}
.fl-shero .hero-txt h2 em{font-style:italic;color:var(--gold)}
@media(max-width:840px){.fl-shero{height:auto}.fl-shero .hinner .wrap{grid-template-columns:1fr;padding:64px 32px}}

/* Process steps (FIN & LAW widget) — numbered step cards. Moved (tokenised) from
   the deploy script's inline .fl-steps CSS so it is now a real, editable widget. */
.fl-steps .head{max-width:720px;margin:0 auto 40px;text-align:center}
.fl-steps .head .eyebrow{justify-content:center}
.fl-steps .head h2{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(28px,3.4vw,40px);color:var(--blue-ink);margin-top:14px}
.fl-steps .head p{color:var(--mid);font-size:16px;margin-top:12px}
.fl-steps .steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative}
.fl-steps .step-card{background:#fff;border:1px solid var(--hair);border-radius:16px;padding:32px 28px;position:relative;transition:all .3s var(--ease)}
.fl-steps .step-card:hover{border-color:transparent;box-shadow:0 12px 30px rgba(21,34,77,.10);transform:translateY(-4px)}
.fl-steps .step-card .sn{position:absolute;top:24px;right:26px;font-family:'Playfair Display',serif;font-size:46px;font-weight:700;color:#eef0f6;line-height:1}
.fl-steps .step-ic{width:56px;height:56px;border-radius:14px;background:var(--red-pale);display:flex;align-items:center;justify-content:center;margin-bottom:22px;transition:all .3s}
.fl-steps .step-card:hover .step-ic{background:var(--red)}
.fl-steps .step-ic svg{width:27px;height:27px;color:var(--red);transition:color .3s}
.fl-steps .step-card:hover .step-ic svg{color:#fff}
.fl-steps .step-card h3{font-family:'Playfair Display',serif;font-size:20px;color:var(--blue-ink);margin-bottom:10px}
.fl-steps .step-card p{font-size:14.5px;color:var(--mid);line-height:1.6}
@media(max-width:880px){.fl-steps .steps-grid{grid-template-columns:1fr}}
/* glossary */
.glossary{display:grid;grid-template-columns:1fr 1fr;gap:14px 32px;margin-top:24px}
.gloss-item{border-left:3px solid var(--red);padding:6px 0 6px 18px}
.gloss-item dt{font-family:'Playfair Display';font-weight:700;font-size:17px;color:var(--blue-ink);margin-bottom:4px}
.gloss-item dd{margin:0;font-size:14.5px;color:var(--mid);line-height:1.6}
@media(max-width:680px){.glossary{grid-template-columns:1fr}}
/* knowledge hero search */
.kb-search{max-width:520px;margin-top:24px}
.kb-search .search-field{background:#fff}
/* banner sets color:#fff, so the search input inherited white text on a white
   field — typed text was invisible. Force dark ink for the query + caret. */
.kb-search .search-field input{color:var(--ink);-webkit-text-fill-color:var(--ink);caret-color:var(--blue)}
.kb-search .search-field input::placeholder{color:var(--mid);-webkit-text-fill-color:var(--mid);opacity:1}
.pullsec{background:var(--grey-50);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.pullsec .wrap{max-width:900px}

/* =============================================================================
   22. LOCATIONS & MAP — archive-office.php + single-office.php
   ============================================================================= */
.region-strip{background:var(--grey-50);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.region-strip .wrap{display:flex;gap:30px;flex-wrap:wrap;justify-content:center;padding:26px 32px}
.region-strip .r{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--blue-ink)}
.region-strip .r svg{width:18px;height:18px;color:var(--red)}
/* FL-027: two published offices in a fixed 3-column grid left an empty third
   column and a left-weighted row filling ~35% of the container. auto-fit collapses
   the empty track and the max track size stops two cards stretching to half the
   page each; justify-content centres the short row instead of hanging it left. */
.loc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,440px));gap:24px;justify-content:center}
.office-card{background:#fff;border:1px solid var(--hair);border-top:3px solid var(--red);border-radius:var(--r-lg);padding:28px 26px;transition:all .3s var(--ease);position:relative}
.office-card:hover{box-shadow:var(--sh-3);transform:translateY(-4px)}
.office-card .hq-badge{position:absolute;top:18px;right:18px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--red);padding:4px 10px;border-radius:30px}
.office-card h3{font-size:21px;margin-bottom:12px;padding-right:60px}
.office-card .oc-row{display:flex;gap:11px;font-size:14px;color:var(--mid);margin-bottom:10px;line-height:1.5}
.office-card .oc-row svg{width:17px;height:17px;color:var(--blue);flex-shrink:0;margin-top:2px}
.office-card .oc-row a:hover{color:var(--blue)}
/* FL-027: the two office cards' CTAs sat at different heights because one address
   wraps. Flex column + the shared margin-top:auto above bottom-aligns them. */
.office-card{display:flex;flex-direction:column}
.office-card .oc-link svg{width:14px;height:14px}
@media(max-width:980px){.loc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.loc-grid{grid-template-columns:1fr}}
/* Leaflet map */
.finlaw-map{width:100%;height:460px;border-radius:var(--r-lg);border:1px solid var(--hair);background:var(--grey-100);z-index:1}
.map-sec .finlaw-map{height:380px}
.finlaw-map .leaflet-popup-content{font-family:'Inter',sans-serif;font-size:14px}
.finlaw-map .leaflet-popup-content a{color:var(--red);font-weight:600}
/* brand red map pin (divIcon — no external marker image) */
.finlaw-pin{background:none;border:none}
.finlaw-pin .finlaw-pin-dot{display:block;width:18px;height:18px;border-radius:50% 50% 50% 0;background:var(--red);transform:rotate(-45deg);box-shadow:0 2px 6px rgba(21,34,77,.35);border:2px solid #fff}
.finlaw-map.leaflet-container:focus,.finlaw-map.leaflet-container:focus-visible{outline:3px solid var(--blue-pale)}
.map-fallback{margin-top:14px;font-size:13.5px;color:var(--mid)}
/* single office layout reuses .layout/.side */
.office-hours{list-style:none;display:grid;gap:8px;margin-top:6px}
.office-hours li{display:flex;justify-content:space-between;gap:16px;font-size:14.5px;color:var(--ink);padding:6px 0;border-bottom:1px solid var(--grey-100)}
.office-hours li span:last-child{color:var(--mid)}

/* =============================================================================
   23. CONTACT — page-contact.php
   ============================================================================= */
.contact-main .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:start}
.contact-forms{display:grid;gap:40px}
.cform{background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);padding:36px;box-shadow:var(--sh-1);scroll-margin-top:120px}
.cform h2{font-size:24px;margin-bottom:6px}
.cform .sub{color:var(--mid);font-size:14.5px;margin-bottom:24px}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.info-card{background:var(--blue-ink);color:#fff;border-radius:var(--r-lg);padding:34px 32px;position:sticky;top:106px}
.info-card h3{color:#fff;font-size:22px;margin-bottom:22px}
.info-row{display:flex;gap:14px;margin-bottom:22px;align-items:flex-start}
.info-row svg{width:20px;height:20px;color:var(--gold);flex-shrink:0;margin-top:2px}
.info-row .lbl{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:6px}
.info-row .val{font-size:15px;color:#fff;line-height:1.6}
.info-row .val a{color:#fff;display:block}
.info-row .val a:hover{color:var(--gold)}
@media(max-width:900px){.contact-main .wrap{grid-template-columns:1fr;gap:36px}.info-card{position:static}}
.urgent{background:linear-gradient(120deg,var(--red) 0%,var(--red-dark) 100%);color:#fff}
.urgent .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding:36px 32px}
.urgent h3{color:#fff;font-size:22px}
.urgent p{color:rgba(255,255,255,.85);margin-top:4px}
.faq-sec .faq{max-width:820px;margin:0 auto}

/* =============================================================================
   24. SEARCH & 404
   ============================================================================= */
.finlaw-searchform .search-field{display:flex;align-items:center;gap:12px;border:2px solid var(--hair);border-radius:10px;padding:8px 8px 8px 16px;background:#fff}
.finlaw-searchform .search-field:focus-within{border-color:var(--blue)}
/* FL-026: the knowledge search had no accessible name and no submit control —
   keyboard and screen-reader users could not submit it except by a blind Enter. */
.kb-search-go{flex-shrink:0;background:var(--red);color:#fff;border:none;border-radius:var(--r-pill);padding:9px 18px;font-size:13.5px;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:background .2s var(--ease);min-height:44px}
.kb-search-go:hover{background:var(--red-dark)}
.finlaw-searchform input[type=search]{border:none;outline:none;font-size:17px;flex:1;font-family:inherit;background:transparent}
.finlaw-searchform .search-field svg{width:20px;height:20px;color:var(--mid);flex-shrink:0}
.finlaw-searchform .btn{flex-shrink:0}
/* Search results go straight from the hero into the list with no section-head,
   so the global 108px .section top padding left a large empty band under the
   banner. Tighten it on search pages only. */
.search main.site-main > .section{padding-top:48px}
/* Full-width responsive card grid. MUST be scoped `.site-main .search-results`,
   NOT bare `.search-results`: WordPress adds `search-results` as a <body> class
   on search pages, so a bare selector turns the whole <body> into a 2-col grid
   and shoves all content into the right half. Keep the `.site-main` prefix. */
.site-main .search-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:10px}
.sr-item{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hair);border-radius:12px;padding:26px 28px;transition:box-shadow .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease)}
.sr-item:hover{border-color:var(--blue-pale);box-shadow:0 12px 30px rgba(21,34,77,.09);transform:translateY(-2px)}
.sr-item .sr-type{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin-bottom:8px;display:inline-block}
.sr-item h2{font-size:21px;margin-bottom:10px;line-height:1.25}
.sr-item h2 a{color:var(--blue-ink)}
.sr-item h2 a:hover{color:var(--blue)}
.sr-item p{color:var(--mid);font-size:15px;line-height:1.6}
@media(max-width:768px){.site-main .search-results{grid-template-columns:1fr;gap:16px}}
.search-tools{max-width:860px;margin-top:24px}
.popular-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.popular-links a{font-size:14px;font-weight:600;color:var(--blue);background:var(--blue-pale);padding:9px 16px;border-radius:30px;transition:all .2s}
.popular-links a:hover{background:var(--blue);color:#fff}
/* 404 */
.e404{text-align:center;padding:90px 0}
.e404 .code{font-family:'Playfair Display';font-size:clamp(80px,16vw,160px);font-weight:800;line-height:1;color:var(--blue-ink)}
.e404 .code span{color:var(--red)}
.e404 h1{font-size:clamp(26px,3.4vw,38px);margin:10px 0 14px}
.e404 p{color:var(--mid);font-size:18px;max-width:560px;margin:0 auto 30px}
.e404 .finlaw-searchform{max-width:560px;margin:0 auto 26px}
.e404 .e404-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ============================================================
   COMMERCE — Make a Payment + Confirmation (group 03 / prompt 04)
   Ports 14-payment.html + 14-payment-confirmation.html. Reuses brand
   tokens, .banner, .eyebrow, .field, .btn-*, .side-card. No per-page <style>.
   ============================================================ */
.pay-grid{display:grid;grid-template-columns:1fr 380px;gap:52px;align-items:start}
@media(max-width:980px){.pay-grid{grid-template-columns:1fr}}

.form-card{background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden}
.form-card-head{padding:32px 36px 28px;border-bottom:1px solid var(--grey-50)}
.form-card-head h2{font-size:clamp(22px,2.6vw,30px);margin:10px 0 6px}
.form-card-head h2::after{content:"";display:block;width:48px;height:3px;background:var(--red);border-radius:2px;margin-top:14px}
.form-card-head p{color:var(--mid);font-size:15px}
.form-card-body{padding:32px 36px 36px}
@media(max-width:600px){.form-card-head,.form-card-body{padding-left:22px;padding-right:22px}}

.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
.fgrid .full{grid-column:1/-1}
.amount-wrap{position:relative}
.amount-prefix{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-weight:700;color:var(--blue);font-size:14px;pointer-events:none}
.amount-wrap input{padding-left:58px}

/* method tiles (accepted channels — gateway-driven, not placehold.co) */
.method-section{margin-top:26px}
.method-label{font-size:12.5px;font-weight:600;color:var(--blue-ink);margin-bottom:14px}
.method-label .req{color:var(--red);margin-left:2px}
.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:480px){.method-grid{grid-template-columns:1fr 1fr}}
.method-opt{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 10px 14px;border:1.5px solid var(--hair);border-radius:14px;background:#fff;transition:all .22s var(--ease);text-align:center}
.method-opt:hover{border-color:var(--red);box-shadow:var(--sh-1)}
.method-badge{height:30px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;border-radius:6px;padding:5px 10px;color:#fff;width:100%}
.method-name{font-size:12px;font-weight:600;color:var(--blue-ink);line-height:1.3}

.form-divider{border:none;border-top:1px solid var(--grey-50);margin:26px 0}
.secure-note{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:var(--mid);margin-top:14px;text-align:center}
.secure-note svg{width:14px;height:14px;color:var(--green);flex-shrink:0}
.submit-btn{width:100%;justify-content:center;padding:16px;font-size:16px}

/* trust row */
.trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px;padding-top:26px;border-top:1px solid var(--grey-50)}
@media(max-width:400px){.trust-row{grid-template-columns:1fr}}
.trust-item{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.trust-icon{width:44px;height:44px;border-radius:12px;background:var(--red-pale);display:flex;align-items:center;justify-content:center}
.trust-icon svg{width:22px;height:22px;color:var(--red)}
.trust-item b{font-size:13px;color:var(--blue-ink)}
.trust-item span{font-size:12px;color:var(--mid)}

/* sidebar steps + help */
.pay-sidebar{display:flex;flex-direction:column;gap:22px}
.side-head{margin:0;padding:17px 22px;background:var(--grey-50);border-bottom:1px solid var(--hair);font-family:'Playfair Display',Georgia,serif;font-size:17px;font-weight:700;color:var(--blue-ink)}
.steps-list{padding:20px 22px 22px;display:flex;flex-direction:column}
.step-item{display:flex;gap:16px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--grey-50)}
.step-item:last-child{border-bottom:none;padding-bottom:2px}
.step-num{width:32px;height:32px;min-width:32px;border-radius:50%;background:var(--red);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}
.step-item h4{font-family:'Playfair Display',Georgia,serif;font-size:15px;color:var(--blue-ink);margin-bottom:3px;font-weight:700}
.step-item p{font-size:13.5px;color:var(--mid);line-height:1.5}
.help-card{background:var(--grey-50);border:1px solid var(--hair);border-radius:var(--r-lg);padding:24px 22px}
.help-card h3{font-size:19px;margin-bottom:8px}
.help-card>p{font-size:14px;color:var(--mid);margin-bottom:18px}
.help-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.help-list li{display:flex;gap:11px;align-items:flex-start;font-size:14px}
.help-list svg{width:17px;height:17px;color:var(--blue);flex-shrink:0;margin-top:2px}
.help-list a:hover{color:var(--red)}

/* lookup notice */
.pay-notice{padding:13px 16px;border-radius:9px;font-size:14px;margin-bottom:20px;display:none}
.pay-notice.show{display:block}
.pay-notice.error{background:var(--red-pale);color:var(--red-dark);border:1px solid #f5c2c4}
.pay-notice.ok{background:var(--green-bg);color:var(--green);border:1px solid #c8eedd}

/* ── CONFIRMATION ── */
.confirm-grid{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:start}
@media(max-width:960px){.confirm-grid{grid-template-columns:1fr}}
.success-card{background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden}
.success-top{background:var(--green-bg);border-bottom:1px solid #c8eedd;padding:40px 36px 36px;text-align:center}
.success-top.pending{background:var(--amber-bg);border-bottom-color:#f6dca8}
.check-ring{width:80px;height:80px;border-radius:50%;background:#fff;border:3px solid var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;box-shadow:0 0 0 8px rgba(31,138,91,.1),var(--sh-2)}
.success-top.pending .check-ring{border-color:var(--amber);box-shadow:0 0 0 8px rgba(217,119,6,.1),var(--sh-2)}
.check-ring svg{width:38px;height:38px;color:var(--green)}
.success-top.pending .check-ring svg{color:var(--amber)}
.success-top h2{font-size:clamp(24px,3vw,34px);color:var(--green);margin-bottom:8px}
.success-top.pending h2{color:var(--amber)}
.success-top p{color:var(--mid);font-size:15px;max-width:480px;margin:0 auto}
.ref-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #c8eedd;border-radius:var(--r-pill);padding:9px 18px;margin-top:18px;font-size:14px;font-weight:600;color:var(--green)}
.success-top.pending .ref-badge{border-color:#f6dca8;color:var(--amber)}
.ref-badge svg{width:15px;height:15px}
.receipt-body{padding:32px 36px 36px}
@media(max-width:580px){.receipt-body,.success-top{padding-left:22px;padding-right:22px}}
.receipt-title{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mid);margin-bottom:20px}
.receipt-rows{border:1px solid var(--grey-50);border-radius:12px;overflow:hidden;margin-bottom:28px}
.receipt-row{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid var(--grey-50);gap:16px}
.receipt-row:last-child{border-bottom:none}
.receipt-row.total{background:var(--blue-pale);border-top:1px solid var(--hair)}
.rr-label{font-size:14px;color:var(--mid);flex-shrink:0}
.rr-value{font-size:14px;font-weight:600;color:var(--blue-ink);text-align:right}
.receipt-row.total .rr-label{font-weight:700;color:var(--blue-ink);font-size:15px}
.receipt-row.total .rr-value{font-family:'Playfair Display',Georgia,serif;font-size:20px;color:var(--blue);font-weight:700}
.receipt-actions{display:flex;gap:14px;flex-wrap:wrap}
.receipt-actions .btn{flex:1;min-width:160px;justify-content:center}
@media(max-width:480px){.receipt-actions{flex-direction:column}}
.btn-green{background:var(--green);color:#fff;border-color:var(--green)}
.btn-green:hover{background:#176c47;border-color:#176c47;transform:translateY(-2px);box-shadow:0 10px 28px rgba(31,138,91,.28)}
.disclaimer{margin-top:24px;background:var(--grey-50);border:1px solid var(--hair);border-radius:10px;padding:14px 18px;display:flex;gap:12px;align-items:flex-start}
.disclaimer svg{width:17px;height:17px;color:var(--mid);flex-shrink:0;margin-top:2px}
.disclaimer p{font-size:13px;color:var(--mid);line-height:1.55}
.conf-sidebar{display:flex;flex-direction:column;gap:22px}
.conf-sidebar .side-head{border-top:3px solid var(--red)}
.side-body{padding:20px 22px}
.next-steps{list-style:none;display:flex;flex-direction:column;gap:14px}
.next-step{display:flex;gap:13px;align-items:flex-start}
.ns-icon{width:36px;height:36px;min-width:36px;border-radius:10px;background:var(--red-pale);display:flex;align-items:center;justify-content:center}
.ns-icon svg{width:17px;height:17px;color:var(--red)}
.ns-text b{font-size:14px;color:var(--blue-ink);display:block;margin-bottom:2px}
.ns-text span{font-size:13px;color:var(--mid);line-height:1.5}

/* order-pay (form-pay.php) brand framing */
.pay-order-summary{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid var(--grey-50);margin-bottom:8px}
.pay-order-summary .pos-amount{font-family:'Playfair Display',Georgia,serif;font-size:28px;font-weight:700;color:var(--blue)}
.pay-order-summary .pos-ref{font-size:13px;color:var(--mid)}

/* ============================================================
   CLIENT PORTAL — Login (group 04 / prompt 02). Ports 15-portal-login.html.
   Standalone chrome-less split screen; all rules scoped under .portal-wrap.
   ============================================================ */
.portal-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;font-family:'Inter',system-ui,sans-serif}
@media(max-width:860px){.portal-wrap{grid-template-columns:1fr}}

/* left brand panel */
.portal-wrap .brand-panel{background:linear-gradient(160deg,var(--red-dark) 0%,var(--red) 52%,var(--blue-dark) 100%);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:48px 52px;position:relative;overflow:hidden}
.portal-wrap .brand-panel::before{content:"";position:absolute;bottom:-120px;left:-80px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,75,.12),transparent 65%);pointer-events:none}
.portal-wrap .brand-panel::after{content:"";position:absolute;top:-80px;right:-100px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,75,.16),transparent 65%);pointer-events:none}
@media(max-width:860px){.portal-wrap .brand-panel{display:none}}
.portal-wrap .bp-top,.portal-wrap .bp-mid,.portal-wrap .bp-bottom{position:relative;z-index:1}
.portal-wrap .bp-sub{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:600;margin-top:9px}
.portal-wrap .bp-mid{flex:1;display:flex;flex-direction:column;justify-content:center;padding:48px 0}
.portal-wrap .bp-rule{width:36px;height:3px;background:var(--gold);border-radius:2px;margin-bottom:28px}
.portal-wrap .bp-headline{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(28px,3vw,40px);color:#fff;margin-bottom:16px;line-height:1.15}
.portal-wrap .bp-headline em{color:var(--gold);font-style:italic}
.portal-wrap .bp-body{color:rgba(255,255,255,.72);font-size:16px;line-height:1.7;max-width:380px}
.portal-wrap .bp-features{margin-top:36px;display:flex;flex-direction:column;gap:16px}
.portal-wrap .bp-feat{display:flex;align-items:flex-start;gap:14px}
.portal-wrap .bp-feat-icon{width:36px;height:36px;min-width:36px;border-radius:9px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;margin-top:1px}
.portal-wrap .bp-feat-icon svg{width:18px;height:18px;color:var(--gold)}
.portal-wrap .bp-feat-text b{display:block;font-size:14px;color:#fff;margin-bottom:2px}
.portal-wrap .bp-feat-text span{font-size:13px;color:rgba(255,255,255,.6)}
.portal-wrap .bp-trust{display:flex;align-items:center;gap:10px;font-size:12px;color:rgba(255,255,255,.5)}
.portal-wrap .bp-trust svg{width:15px;height:15px;color:var(--gold);flex-shrink:0}

/* right login panel */
.portal-wrap .login-panel{display:flex;flex-direction:column;justify-content:space-between;min-height:100vh;background:#fff}
@media(max-width:860px){.portal-wrap .login-panel{background:var(--grey-50)}}
.portal-wrap .login-inner{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:52px 40px}
@media(max-width:480px){.portal-wrap .login-inner{padding:40px 24px}}
.portal-wrap .mob-wordmark{display:none;font-family:'Playfair Display',Georgia,serif;font-weight:800;font-size:26px;color:var(--blue);margin-bottom:32px;text-align:center}
.portal-wrap .mob-wordmark b{color:var(--red)}.portal-wrap .mob-wordmark .amp{color:inherit}
@media(max-width:860px){.portal-wrap .mob-wordmark{display:block}}
.portal-wrap .login-card{width:100%;max-width:420px}
.portal-wrap .login-card-eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:9px;margin-bottom:14px}
.portal-wrap .login-card-eyebrow::before{content:"";width:22px;height:2px;background:var(--red)}
.portal-wrap .login-card h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(24px,3vw,32px);color:var(--ink);margin-bottom:8px}
.portal-wrap .login-card .sub{color:var(--mid);font-size:15px;margin-bottom:32px}
.portal-wrap .login-card .field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.portal-wrap .login-card .field label{font-size:12.5px;font-weight:600;color:var(--blue-ink)}
.portal-wrap .field-wrap{position:relative}
.portal-wrap .field-wrap input{width:100%;padding:13px 42px 13px 14px;border:1.5px solid var(--hair);border-radius:9px;font-family:inherit;font-size:15px;color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s}
.portal-wrap .field-wrap input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(237,28,36,.08)}
.portal-wrap .field-wrap input::placeholder{color:var(--mid);opacity:.65}
.portal-wrap .field-icon{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--mid);background:none;border:none;padding:0;display:flex}
.portal-wrap .field-icon svg{width:17px;height:17px}
.portal-wrap button.toggle-pw{pointer-events:all;cursor:pointer}
.portal-wrap button.toggle-pw:hover{color:var(--blue)}
.portal-wrap .form-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:10px}
.portal-wrap .remember{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--mid);cursor:pointer}
.portal-wrap .remember input{width:16px;height:16px;accent-color:var(--blue);cursor:pointer}
.portal-wrap .forgot{font-size:14px;font-weight:600;color:var(--blue)}
.portal-wrap .forgot:hover{color:var(--red)}
.portal-wrap .btn-signin{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:15px;background:var(--red);color:#fff;border:none;border-radius:9px;font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:all .25s var(--ease)}
.portal-wrap .btn-signin:hover{background:var(--red-dark);transform:translateY(-2px);box-shadow:0 10px 28px rgba(237,28,36,.32)}
.portal-wrap .btn-signin svg{width:17px;height:17px}
.portal-wrap .security-note{display:flex;align-items:center;gap:10px;margin-top:20px;padding:13px 16px;background:var(--grey-50);border:1px solid var(--hair);border-radius:9px}
.portal-wrap .security-note svg{width:18px;height:18px;color:var(--blue);flex-shrink:0}
.portal-wrap .security-note p{font-size:13px;color:var(--mid);line-height:1.4}
.portal-wrap .login-alert{display:flex;align-items:center;gap:10px;margin-bottom:22px;padding:12px 15px;border-radius:9px;font-size:14px}
.portal-wrap .login-alert.error{background:var(--red-pale);color:var(--red-dark);border:1px solid #f5c2c4}
.portal-wrap .login-alert.ok{background:var(--green-bg);color:var(--green);border:1px solid #c8eedd}
.portal-wrap .login-links{margin-top:24px;text-align:center;font-size:14px;color:var(--mid)}
.portal-wrap .login-links a{color:var(--blue);font-weight:600}
.portal-wrap .login-links a:hover{color:var(--red)}
.portal-wrap .login-links .dot{margin:0 10px;opacity:.4}
.portal-wrap .login-foot{padding:20px 40px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:12.5px;color:var(--mid)}
@media(max-width:480px){.portal-wrap .login-foot{padding:16px 24px}}
.portal-wrap .login-foot a:hover{color:var(--blue)}
.portal-wrap .lf-links{display:flex;gap:18px}

/* ============================================================
   CLIENT PORTAL — Dashboard shell (group 04 / prompt 03). Ports
   15-portal-dashboard.html. ALL rules scoped under .portal-shell so the
   reused names (.topbar, .panel, .badge) never clash with the public site.
   Shared by views in prompts 04–09.
   ============================================================ */
.portal-shell{--sidebar:260px}
.portal-shell .portal{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}
@media(max-width:900px){.portal-shell .portal{grid-template-columns:1fr}}

/* sidebar */
.portal-shell .sidebar{background:var(--blue-ink);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
@media(max-width:900px){.portal-shell .sidebar{display:none}}
.portal-shell .sb-logo{padding:28px 24px 22px;border-bottom:1px solid rgba(255,255,255,.08)}
.portal-shell .sb-sub{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:600;margin-top:6px}
.portal-shell .sb-section{padding:18px 14px 8px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.35)}
.portal-shell .sb-nav{list-style:none;padding:0 10px;flex:1;margin:0}
.portal-shell .sb-nav li a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:9px;font-size:14px;font-weight:500;color:rgba(255,255,255,.75);transition:background .18s,color .18s;position:relative}
.portal-shell .sb-nav li a svg{width:18px;height:18px;flex-shrink:0}
.portal-shell .sb-nav li a:hover{background:rgba(255,255,255,.07);color:#fff}
.portal-shell .sb-nav li a.active{background:rgba(237,28,36,.22);color:#fff;font-weight:600}
.portal-shell .sb-nav li a.active::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:20px;background:var(--red);border-radius:0 2px 2px 0}
.portal-shell .sb-badge{margin-left:auto;background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:30px;min-width:22px;text-align:center}
.portal-shell .sb-bottom{padding:16px 10px 24px;border-top:1px solid rgba(255,255,255,.08);margin-top:auto}
.portal-shell .sb-user{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:9px}
.portal-shell .sb-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.2);flex-shrink:0}
.portal-shell .sb-user-info .name{font-size:14px;font-weight:600;color:#fff}
.portal-shell .sb-user-info .role{font-size:12px;color:rgba(255,255,255,.5)}

/* main + topbar */
.portal-shell .main{display:flex;flex-direction:column;min-height:100vh;overflow:hidden}
.portal-shell .topbar{background:#fff;border-bottom:1px solid var(--hair);padding:0 32px;display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px;position:sticky;top:0;z-index:40;box-shadow:var(--sh-1)}
.portal-shell .topbar-greeting{font-family:'Playfair Display',Georgia,serif;font-size:18px;font-weight:700;color:var(--blue-ink)}
.portal-shell .topbar-date{font-size:12px;color:var(--mid)}
.portal-shell .topbar-right{display:flex;align-items:center;gap:10px}
.portal-shell .tb-search{display:flex;align-items:center;gap:8px;background:var(--grey-50);border:1px solid var(--hair);border-radius:8px;padding:8px 14px;font-size:14px;color:var(--mid);min-width:180px}
.portal-shell .tb-search:focus-within{border-color:var(--blue);background:#fff}
.portal-shell .tb-search input{border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;color:var(--ink);width:120px}
.portal-shell .tb-search svg{width:15px;height:15px;flex-shrink:0}
.portal-shell .tb-icon{width:40px;height:40px;border-radius:9px;border:1px solid var(--hair);background:#fff;display:flex;align-items:center;justify-content:center;position:relative;transition:border-color .2s}
.portal-shell .tb-icon:hover{border-color:var(--blue)}
.portal-shell .tb-icon svg{width:18px;height:18px;color:var(--mid)}
.portal-shell .notif-dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid #fff}
.portal-shell .tb-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--hair)}
.portal-shell .mob-menu-btn{display:none;width:40px;height:40px;border-radius:9px;border:1px solid var(--hair);background:#fff;align-items:center;justify-content:center}
.portal-shell .mob-menu-btn svg{width:20px;height:20px}
@media(max-width:900px){.portal-shell .mob-menu-btn{display:flex}}
@media(max-width:520px){.portal-shell .tb-search{display:none}}

/* content */
.portal-shell .content{flex:1;padding:32px}
@media(max-width:640px){.portal-shell .content{padding:20px 16px}}
.portal-shell .section-eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:9px;margin-bottom:8px}
.portal-shell .section-eyebrow::before{content:"";width:20px;height:2px;background:var(--red)}
.portal-shell .section-title{font-family:'Playfair Display',Georgia,serif;font-size:clamp(20px,2.4vw,28px);color:var(--blue-ink);margin-bottom:24px}

/* stat cards */
.portal-shell .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:32px}
@media(max-width:1100px){.portal-shell .stat-grid{grid-template-columns:repeat(2,1fr)}}
.portal-shell .stat-card{background:#fff;border:1px solid var(--hair);border-radius:14px;padding:22px;box-shadow:var(--sh-1);position:relative;overflow:hidden;transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.portal-shell .stat-card:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.portal-shell .stat-card::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent,var(--red))}
.portal-shell .stat-card[data-accent="red"]{--accent:var(--red)}
.portal-shell .stat-card[data-accent="green"]{--accent:var(--green)}
.portal-shell .stat-card[data-accent="amber"]{--accent:var(--amber)}
.portal-shell .stat-card[data-accent="blue"]{--accent:var(--blue)}
.portal-shell .stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;background:var(--red-pale)}
.portal-shell .stat-card[data-accent="green"] .stat-icon{background:var(--green-bg)}
.portal-shell .stat-card[data-accent="amber"] .stat-icon{background:var(--amber-bg)}
.portal-shell .stat-card[data-accent="blue"] .stat-icon{background:var(--blue-pale)}
.portal-shell .stat-icon svg{width:19px;height:19px;color:var(--red)}
.portal-shell .stat-card[data-accent="green"] .stat-icon svg{color:var(--green)}
.portal-shell .stat-card[data-accent="amber"] .stat-icon svg{color:var(--amber)}
.portal-shell .stat-card[data-accent="blue"] .stat-icon svg{color:var(--blue)}
.portal-shell .stat-num{font-family:'Playfair Display',Georgia,serif;font-size:38px;font-weight:700;color:var(--blue-ink);line-height:1;margin-bottom:6px}
.portal-shell .stat-label{font-size:13px;font-weight:600;color:var(--mid)}
.portal-shell .stat-sub{font-size:12px;color:var(--mid);margin-top:4px}

/* panels + tables */
.portal-shell .dash-grid{display:grid;grid-template-columns:1fr 340px;gap:20px}
@media(max-width:960px){.portal-shell .dash-grid{grid-template-columns:1fr}}
.portal-shell .panel{position:static;top:auto;opacity:1;visibility:visible;transform:none;transition:none;z-index:auto;background:#fff;border:1px solid var(--hair);border-radius:14px;box-shadow:var(--sh-1);overflow:hidden;margin-bottom:24px}
.portal-shell .panel-head{padding:18px 22px;border-bottom:1px solid var(--grey-50);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.portal-shell .panel-head h3{font-family:'Playfair Display',Georgia,serif;font-size:17px;font-weight:700;color:var(--blue-ink)}
.portal-shell .panel-head .view-all{font-size:13px;font-weight:600;color:var(--blue);display:flex;align-items:center;gap:5px}
.portal-shell .panel-head .view-all:hover{color:var(--red)}
.portal-shell .panel-head .view-all svg{width:13px;height:13px}
.portal-shell .data-table{width:100%;border-collapse:collapse}
.portal-shell .data-table th{padding:11px 18px;text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);background:var(--grey-50);border-bottom:1px solid var(--hair)}
.portal-shell .data-table td{padding:14px 18px;font-size:14px;border-bottom:1px solid var(--grey-50);color:var(--ink);vertical-align:middle}
.portal-shell .data-table tr:last-child td{border-bottom:none}
.portal-shell .data-table tr:hover td{background:var(--grey-50)}
@media(max-width:760px){.portal-shell .data-table,.portal-shell .data-table tbody,.portal-shell .data-table tr,.portal-shell .data-table td{display:block;width:100%}.portal-shell .data-table thead{display:none}.portal-shell .data-table td{padding:8px 16px;display:flex;justify-content:space-between;align-items:center}.portal-shell .data-table td::before{content:attr(data-label);font-size:11.5px;font-weight:600;color:var(--mid);text-transform:uppercase;letter-spacing:.06em}.portal-shell .data-table tr{border-bottom:1px solid var(--hair);padding:6px 0}}

/* status badges (portal-specific) */
.portal-shell .badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600}
.portal-shell .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.portal-shell .badge-active{background:#e8f5e9;color:var(--green)}
.portal-shell .badge-pending{background:var(--amber-bg);color:var(--amber)}
.portal-shell .badge-review{background:var(--blue-pale);color:var(--blue)}
.portal-shell .badge-closed{background:var(--grey-50);color:var(--mid)}
.portal-shell .badge-paid{background:var(--green-bg);color:var(--green)}
.portal-shell .badge-due{background:#fef2f2;color:var(--red)}
.portal-shell .badge-overdue{background:#fde8e8;color:var(--red-dark)}

/* doc / appt / msg lists */
.portal-shell .doc-list,.portal-shell .appt-list,.portal-shell .msg-list{list-style:none;margin:0}
.portal-shell .doc-item{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--grey-50)}
.portal-shell .doc-item:last-child{border-bottom:none}
.portal-shell .doc-item:hover{background:var(--grey-50)}
.portal-shell .doc-icon{width:38px;height:38px;border-radius:9px;background:var(--blue-pale);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.portal-shell .doc-icon svg{width:18px;height:18px;color:var(--blue)}
.portal-shell .doc-info{flex:1;min-width:0}
.portal-shell .doc-name{font-size:14px;font-weight:600;color:var(--blue-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.portal-shell .doc-meta{font-size:12px;color:var(--mid);margin-top:2px}
.portal-shell .doc-dl{width:34px;height:34px;border-radius:8px;border:1px solid var(--hair);background:#fff;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.portal-shell .doc-dl:hover{border-color:var(--blue);background:var(--blue-pale)}
.portal-shell .doc-dl svg{width:15px;height:15px;color:var(--blue)}
.portal-shell .btn-pay{display:inline-flex;align-items:center;gap:6px;background:var(--red);color:#fff;border:none;border-radius:7px;padding:7px 14px;font-size:13px;font-weight:600;transition:all .2s var(--ease)}
.portal-shell .btn-pay:hover{background:var(--red-dark);transform:translateY(-1px);box-shadow:0 6px 16px rgba(237,28,36,.28)}
.portal-shell .btn-pay svg{width:13px;height:13px}
.portal-shell .btn-view{display:inline-flex;align-items:center;gap:6px;background:transparent;color:var(--blue);border:1px solid var(--hair);border-radius:7px;padding:7px 14px;font-size:13px;font-weight:600;transition:all .2s}
.portal-shell .btn-view:hover{border-color:var(--blue);background:var(--blue-pale)}
.portal-shell .appt-item{display:flex;gap:16px;padding:16px 20px;border-bottom:1px solid var(--grey-50);align-items:flex-start}
.portal-shell .appt-item:last-child{border-bottom:none}
.portal-shell .appt-date{min-width:48px;height:52px;border-radius:10px;background:var(--blue-pale);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0}
.portal-shell .appt-date .day{font-family:'Playfair Display',Georgia,serif;font-size:20px;font-weight:700;color:var(--blue);line-height:1}
.portal-shell .appt-date .mon{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.portal-shell .appt-info .title{font-size:14px;font-weight:600;color:var(--blue-ink)}
.portal-shell .appt-info .sub{font-size:12.5px;color:var(--mid);margin-top:3px}
.portal-shell .appt-info .sub svg{width:12px;height:12px;vertical-align:middle;margin-right:3px}
.portal-shell .msg-item{display:flex;gap:13px;padding:14px 20px;border-bottom:1px solid var(--grey-50);align-items:flex-start;transition:background .18s}
.portal-shell .msg-item:hover{background:var(--grey-50)}
.portal-shell .msg-item:last-child{border-bottom:none}
.portal-shell .msg-item.unread .msg-name{font-weight:700}
.portal-shell .msg-av{width:36px;height:36px;border-radius:50%;background:var(--blue-pale);display:flex;align-items:center;justify-content:center;color:var(--blue);flex-shrink:0}
.portal-shell .msg-av svg{width:18px;height:18px}
.portal-shell .msg-body{flex:1;min-width:0}
.portal-shell .msg-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.portal-shell .msg-name{font-size:14px;color:var(--blue-ink)}
.portal-shell .msg-time{font-size:12px;color:var(--mid);flex-shrink:0}
.portal-shell .msg-preview{font-size:13px;color:var(--mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.portal-shell .unread-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0;margin-top:5px}

/* empty states */
.portal-shell .portal-empty{padding:40px 24px;text-align:center;color:var(--mid)}
.portal-shell .portal-empty svg{width:34px;height:34px;color:var(--hair);margin-bottom:10px}
.portal-shell .portal-empty p{font-size:14px}

/* mobile sidebar overlay */
.portal-shell .mob-sidebar-ov{position:fixed;inset:0;z-index:200;background:rgba(21,34,77,.5);opacity:0;visibility:hidden;transition:opacity .3s}
.portal-shell .mob-sidebar-ov.open{opacity:1;visibility:visible}
.portal-shell .mob-sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;background:var(--blue-ink);transform:translateX(-100%);transition:transform .35s var(--ease);overflow-y:auto;z-index:201}
.portal-shell .mob-sidebar-ov.open .mob-sidebar{transform:translateX(0)}
.portal-shell .mob-sb-close{position:absolute;top:20px;right:16px;width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.1);border:none;display:flex;align-items:center;justify-content:center}
.portal-shell .mob-sb-close svg{width:18px;height:18px;color:#fff}
.portal-shell .sb-avatar-fallback{width:38px;height:38px;border-radius:50%;background:var(--blue-pale);color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0;border:2px solid rgba(255,255,255,.2)}
.portal-shell .tb-avatar-fallback{width:40px;height:40px;border-radius:50%;background:var(--blue-pale);color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}

/* messages — thread list link + conversation bubbles + compose (prompt 07) */
.portal-shell a.msg-item{color:inherit}
.portal-shell .msg-thread{display:flex;flex-direction:column;gap:14px;padding:22px;max-height:520px;overflow-y:auto}
.portal-shell .bubble{max-width:75%;padding:11px 15px;border-radius:14px;font-size:14px;line-height:1.5;word-wrap:break-word}
.portal-shell .bubble.firm{align-self:flex-start;background:var(--grey-50);border:1px solid var(--hair);border-top-left-radius:4px;color:var(--ink)}
.portal-shell .bubble.client{align-self:flex-end;background:var(--blue);color:#fff;border-top-right-radius:4px}
.portal-shell .bubble .bmeta{font-size:11px;margin-top:6px;color:var(--mid)}
.portal-shell .bubble.client .bmeta{color:rgba(255,255,255,.75)}
.portal-shell .msg-compose{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;padding:16px 22px;border-top:1px solid var(--hair)}
.portal-shell .msg-matter-label{flex:0 0 100%;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);font-weight:700;margin-bottom:-4px}
.portal-shell .msg-matter-select{flex:0 0 auto;max-width:100%;padding:10px 12px;border:1.5px solid var(--hair);border-radius:9px;font-family:inherit;font-size:13.5px;color:var(--ink);background:#fff}
.portal-shell .msg-matter-select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(237,28,36,.08)}
.portal-shell .msg-compose textarea{flex:1;min-height:46px;max-height:140px;padding:12px 14px;border:1.5px solid var(--hair);border-radius:9px;font-family:inherit;font-size:14px;resize:vertical;color:var(--ink)}
.portal-shell .msg-compose textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(237,28,36,.08)}
.portal-shell .msg-compose button{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;background:var(--red);color:#fff;border:none;border-radius:9px;padding:13px 20px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s var(--ease)}
.portal-shell .msg-compose button:hover{background:var(--red-dark)}
.portal-shell .msg-compose button:disabled{background:var(--hair);color:var(--mid);cursor:default}
.portal-shell .thread-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--blue)}
.portal-shell .thread-back:hover{color:var(--red)}

/* ============================================================================
   FIRM DASHBOARD (group 05) — additions on top of the shared .portal-shell.
   KPI cards are links; "+ New" topbar menu; unified activity feed.
   ========================================================================= */
.portal-shell a.stat-card{display:block;text-decoration:none;color:inherit}

/* "+ New" menu in the topbar */
.portal-shell .tb-new-wrap{position:relative}
.portal-shell .tb-new{display:inline-flex;align-items:center;gap:6px;background:var(--red);color:#fff;border:none;border-radius:9px;padding:9px 16px;font-size:13.5px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .2s var(--ease)}
.portal-shell .tb-new:hover{background:var(--red-dark)}
.portal-shell .tb-new-plus{font-size:16px;line-height:1;font-weight:700}
.portal-shell .tb-new-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:#fff;border:1px solid var(--hair);border-radius:11px;box-shadow:var(--sh-3);padding:7px;list-style:none;margin:0;z-index:60}
.portal-shell .tb-new-menu[hidden]{display:none}
.portal-shell .tb-new-menu li a{display:block;padding:10px 14px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink)}
.portal-shell .tb-new-menu li a:hover{background:var(--grey-50);color:var(--red)}
@media(max-width:520px){.portal-shell .tb-new span:not(.tb-new-plus){display:none}.portal-shell .tb-new{padding:9px 12px}}

/* activity feed */
.portal-shell .activity-feed{list-style:none;margin:0;padding:0}
.portal-shell .act-item{display:flex;gap:13px;padding:14px 20px;border-bottom:1px solid var(--grey-50);align-items:flex-start}
.portal-shell .act-item:last-child{border-bottom:none}
.portal-shell .act-ic{width:34px;height:34px;border-radius:9px;background:var(--blue-pale);display:flex;align-items:center;justify-content:center;color:var(--blue);flex-shrink:0}
.portal-shell .act-ic svg{width:16px;height:16px}
.portal-shell .act-main{flex:1;min-width:0}
.portal-shell .act-text{font-size:13.5px;color:var(--ink);line-height:1.45}
.portal-shell .act-text a{color:inherit}
.portal-shell .act-text a:hover .act-target{color:var(--red)}
.portal-shell .act-text b{color:var(--blue-ink);font-weight:600}
.portal-shell .act-target{color:var(--blue);font-weight:600}
.portal-shell .act-time{font-size:12px;color:var(--mid);margin-top:3px}

/* firm: section head row, notices, forms (clients + later sections) */
.portal-shell .firm-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.portal-shell .firm-notice{padding:13px 18px;border-radius:10px;font-size:14px;font-weight:500;margin-bottom:20px;border:1px solid transparent}
.portal-shell .firm-notice.is-ok{background:var(--green-bg);color:var(--green);border-color:#bfe6cf}
.portal-shell .firm-notice.is-err{background:#fdecec;color:var(--red-dark);border-color:#f6c9c9}
.portal-shell .firm-form{padding:22px}
.portal-shell .firm-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.portal-shell .firm-grid{grid-template-columns:1fr}}
.portal-shell .firm-field{display:flex;flex-direction:column;gap:7px}
.portal-shell .firm-field.firm-full{grid-column:1/-1}
.portal-shell .firm-field label{font-size:13px;font-weight:600;color:var(--ink)}
.portal-shell .firm-field input,.portal-shell .firm-field select{width:100%;padding:11px 13px;border:1.5px solid var(--hair);border-radius:9px;font-family:inherit;font-size:14px;color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s}
.portal-shell .firm-field input:focus,.portal-shell .firm-field select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(237,28,36,.08)}
.portal-shell .firm-hint{font-size:12px;color:var(--mid)}
.portal-shell .firm-form-actions{margin-top:24px}
.portal-shell .firm-inline-form{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;padding:18px 22px;border-top:1px solid var(--grey-50)}
.portal-shell .firm-inline-form .firm-field{flex:1;min-width:180px}
.portal-shell .firm-field-btn{flex:0 0 auto}

/* firm: client 360 */
.portal-shell .c360-head{display:flex;align-items:center;gap:18px;padding:22px;flex-wrap:wrap}
.portal-shell .c360-id{flex:1;min-width:200px}
.portal-shell .c360-name{font-family:'Playfair Display',Georgia,serif;font-size:20px;font-weight:700;color:var(--blue-ink)}
.portal-shell .c360-org{font-size:13px;color:var(--mid);margin-top:2px}
.portal-shell .c360-contact{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px;font-size:13px;color:var(--mid)}
.portal-shell .c360-contact span{display:inline-flex;align-items:center;gap:6px}
.portal-shell .c360-contact svg{width:13px;height:13px}
.portal-shell .c360-stat{display:flex;gap:30px;padding:18px 22px;font-size:13.5px;color:var(--mid);align-items:center;flex-wrap:wrap}
.portal-shell .c360-stat-num{font-family:'Playfair Display',Georgia,serif;font-size:24px;font-weight:700;color:var(--blue-ink);margin-right:5px}

/* firm: matters list filterbar, matter detail meta + internal notes */
.portal-shell .firm-filterbar{gap:10px}
.portal-shell .firm-filter{padding:9px 12px;border:1.5px solid var(--hair);border-radius:8px;font-family:inherit;font-size:13.5px;color:var(--ink);background:#fff}
.portal-shell .firm-filter:focus{outline:none;border-color:var(--blue)}
.portal-shell .c360-meta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 24px;padding:22px}
@media(max-width:760px){.portal-shell .c360-meta-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.portal-shell .c360-meta-grid{grid-template-columns:1fr}}
.portal-shell .cm-label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);margin-bottom:5px}
.portal-shell .cm-val{font-size:14px;color:var(--blue-ink);font-weight:500}
.portal-shell .c360-summary{padding:0 22px 22px}
.portal-shell .c360-summary p{font-size:14px;color:var(--ink);line-height:1.6;margin-top:6px}
.portal-shell .firm-team{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px 16px}
.portal-shell .firm-check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink)}
.portal-shell .firm-check input{width:16px;height:16px;accent-color:var(--red)}
.portal-shell .firm-notes{list-style:none;margin:0;padding:0}
.portal-shell .firm-note{padding:14px 20px;border-bottom:1px solid var(--grey-50);background:#fffdf6}
.portal-shell .firm-note:last-child{border-bottom:none}
.portal-shell .firm-note-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px}
.portal-shell .firm-note-top b{font-size:13.5px;color:var(--blue-ink)}
.portal-shell .firm-note-body{font-size:13.5px;color:var(--ink);line-height:1.55}
.portal-shell .firm-note-body p{margin:0 0 6px}
.portal-shell .firm-note-form{padding:16px 20px 20px;border-top:1px solid var(--grey-50)}

/* firm: messaging — two-pane inbox + thread */
.portal-shell .ft-grid{display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start}
.portal-shell .ft-grid .panel{display:flex;flex-direction:column;max-height:calc(100vh - 220px);margin-bottom:0}
.portal-shell .ft-pane-list{display:flex;flex-direction:column;gap:16px;min-width:0}
.portal-shell .firm-sub{color:var(--mid);font-size:14px;margin:-6px 0 18px}
.portal-shell .msg-item.is-active{background:var(--red-pale)}
.portal-shell .ft-search{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--grey-50)}
.portal-shell .ft-search svg{width:15px;height:15px;color:var(--mid);flex-shrink:0}
.portal-shell .ft-search input{border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;color:var(--ink);width:100%}
.portal-shell .ft-threads{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}
.portal-shell .ft-thread-row{display:flex;gap:11px;padding:13px 16px;border-bottom:1px solid var(--grey-50);align-items:flex-start;color:inherit;position:relative}
.portal-shell .ft-thread-row:hover{background:var(--grey-50)}
.portal-shell .ft-thread-row.is-active{background:var(--blue-pale)}
.portal-shell .ft-thread-row.is-active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red)}
.portal-shell .ft-row-body{flex:1;min-width:0}
.portal-shell .ft-row-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.portal-shell .ft-row-name{font-size:14px;color:var(--blue-ink)}
.portal-shell .ft-thread-row.is-unread .ft-row-name{font-weight:700}
.portal-shell .ft-row-sub{display:flex;align-items:center;gap:7px;margin:2px 0}
.portal-shell .ft-row-ref{font-size:11.5px;color:var(--mid)}
.portal-shell .ft-tag{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--warn);background:var(--amber-bg);padding:2px 7px;border-radius:20px}
.portal-shell .ft-unread{flex-shrink:0;background:var(--red);color:#fff;font-size:11px;font-weight:700;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:30px;padding:0 6px}
.portal-shell .ft-thread-head{display:flex;align-items:center;gap:12px}
.portal-shell .ft-thread-matter{font-size:12.5px;color:var(--blue)}
.portal-shell .ft-thread-matter:hover{color:var(--red)}
.portal-shell .ft-back{display:none;width:34px;height:34px;border-radius:8px;border:1px solid var(--hair);align-items:center;justify-content:center;color:var(--mid);transform:rotate(180deg);flex-shrink:0}
.portal-shell .ft-assign{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--grey-50);background:#fffdf6}
.portal-shell .ft-assign select{padding:7px 10px;border:1px solid var(--hair);border-radius:8px;font-family:inherit;font-size:13px;color:var(--ink);background:#fff}
.portal-shell .ft-thread{flex:1}
.portal-shell .ft-bubble{max-width:75%;padding:11px 15px;border-radius:14px;font-size:14px;line-height:1.5;word-wrap:break-word}
.portal-shell .ft-bubble p{margin:0 0 6px}.portal-shell .ft-bubble p:last-child{margin:0}
.portal-shell .ft-bubble.theirs{align-self:flex-start;background:var(--grey-50);border:1px solid var(--hair);border-top-left-radius:4px;color:var(--ink)}
.portal-shell .ft-bubble.mine{align-self:flex-end;background:var(--blue);color:#fff;border-top-right-radius:4px}
.portal-shell .ft-bubble .bmeta{font-size:11px;margin-top:6px;color:var(--mid)}
.portal-shell .ft-bubble.mine .bmeta{color:rgba(255,255,255,.75)}
@media(max-width:860px){
	.portal-shell .ft-grid{grid-template-columns:1fr}
	.portal-shell .ft-grid.ft-has-active .ft-pane-list{display:none}
	.portal-shell .ft-grid:not(.ft-has-active) .ft-pane-thread{display:none}
	.portal-shell .ft-back{display:flex}
}

/* engagement widgets — WhatsApp FAB + placeholder AI chat (opt-in, group 06) */
.finlaw-fabs{position:fixed;right:20px;bottom:20px;z-index:1000;display:flex;flex-direction:column;gap:12px;align-items:center}
.finlaw-fab{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-2);border:none;cursor:pointer;color:#fff;transition:transform .2s var(--ease),box-shadow .2s}
.finlaw-fab:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.finlaw-fab:focus-visible{outline:3px solid var(--blue-pale);outline-offset:2px}
.finlaw-fab-wa{background:#25D366}
.finlaw-fab-chat{background:var(--red)}
@media(prefers-reduced-motion:reduce){.finlaw-fab{transition:none}.finlaw-fab:hover{transform:none}}
.finlaw-chat-panel{position:fixed;right:20px;bottom:86px;z-index:1001;width:340px;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--hair);border-radius:14px;box-shadow:var(--sh-3);overflow:hidden;display:flex;flex-direction:column;max-height:70vh}
.finlaw-chat-panel[hidden]{display:none}
.fchat-head{background:var(--blue-ink);color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between}
.fchat-title{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:16px;letter-spacing:.03em}
.fchat-close{background:none;border:none;color:#fff;font-size:22px;line-height:1;cursor:pointer}
.fchat-disclaimer{margin:0;padding:10px 16px;background:var(--amber-bg);color:#8a5a00;font-size:12px;line-height:1.45;border-bottom:1px solid var(--hair)}
.fchat-msgs{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-height:120px}
.fchat-msg{max-width:85%;padding:9px 13px;border-radius:12px;font-size:14px;line-height:1.5}
.fchat-bot{align-self:flex-start;background:var(--grey-50);border:1px solid var(--hair);border-top-left-radius:4px;color:var(--ink)}
.fchat-user{align-self:flex-end;background:var(--blue);color:#fff;border-top-right-radius:4px}
.fchat-cta{align-self:flex-start;margin-top:2px;font-size:13px;padding:8px 16px;text-decoration:none}
.fchat-form{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--grey-50)}
.fchat-form input{flex:1;padding:10px 12px;border:1.5px solid var(--hair);border-radius:8px;font-family:inherit;font-size:14px;color:var(--ink)}
.fchat-form input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(237,28,36,.08)}
.fchat-form .btn{padding:10px 16px;font-size:14px}
@media(max-width:480px){.finlaw-chat-panel{right:8px;left:8px;width:auto}}

/* WPForms (hybrid) — restyle WPForms markup to the brand (.inp / .btn-red look) */
.wpforms-form .wpforms-field-label{font-size:13px;font-weight:600;color:var(--ink)}
.wpforms-form input[type=text],.wpforms-form input[type=email],.wpforms-form input[type=tel],.wpforms-form input[type=url],.wpforms-form input[type=date],.wpforms-form select,.wpforms-form textarea{width:100%;padding:12px 14px;border:1.5px solid var(--hair);border-radius:6px;font-family:inherit;font-size:15px;color:var(--ink);background:#fff}
.wpforms-form input:focus,.wpforms-form select:focus,.wpforms-form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(38,64,141,.12)}
.wpforms-form button[type=submit],.wpforms-form .wpforms-submit{display:inline-flex;align-items:center;gap:9px;background:var(--red);color:#fff;border:1.5px solid var(--red);border-radius:var(--r-sm);font-family:'Inter';font-weight:600;font-size:15px;padding:13px 26px;cursor:pointer;transition:all .25s var(--ease)}
.wpforms-form button[type=submit]:hover,.wpforms-form .wpforms-submit:hover{background:var(--red-dark);border-color:var(--red-dark)}
.wpforms-form .wpforms-required-label,.wpforms-form .wpforms-error{color:var(--red)}
.wpforms-form .wpforms-field-description{font-size:12.5px;color:var(--mid)}

/* newsletter (MC4WP) — brand form for footer / insights / contact */
.finlaw-nl-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.finlaw-nl-row .inp{flex:1;min-width:200px;padding:12px 14px;border:1.5px solid var(--hair);border-radius:6px;font-family:inherit;font-size:15px;color:var(--ink);background:#fff}
.finlaw-nl-row .inp:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(38,64,141,.12)}
.finlaw-nl-consent{display:flex;align-items:flex-start;gap:9px;margin-top:11px;font-size:12.5px;line-height:1.5;color:var(--mid);cursor:pointer}
.finlaw-nl-consent input{margin-top:3px;width:16px;height:16px;accent-color:var(--red);flex-shrink:0}
.mc4wp-form .mc4wp-response{margin-top:10px;font-size:13.5px}
.mc4wp-form .mc4wp-response .mc4wp-alert,.mc4wp-form .mc4wp-response p{margin:0}
.mc4wp-form-success .mc4wp-response{color:var(--green)}
.mc4wp-form-error .mc4wp-response{color:var(--red)}
/* footer variant: white text on navy */
.fnews .finlaw-nl-consent{color:rgba(255,255,255,.7)}

/* shared: notification bell + dropdown (both shells) */
.portal-shell .fl-bell-wrap{position:relative}
.portal-shell .fl-bell{cursor:pointer}
.portal-shell .fl-bell-menu{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-width:90vw;background:#fff;border:1px solid var(--hair);border-radius:12px;box-shadow:var(--sh-3);z-index:70;overflow:hidden}
.portal-shell .fl-bell-menu[hidden]{display:none}
.portal-shell .fl-bell-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--grey-50)}
.portal-shell .fl-bell-head strong{font-size:14px;color:var(--blue-ink)}
.portal-shell .fl-bell-readall{background:none;border:none;font-size:12px;font-weight:600;color:var(--blue);cursor:pointer}
.portal-shell .fl-bell-readall:hover{color:var(--red)}
.portal-shell .fl-bell-list{list-style:none;margin:0;padding:0;max-height:380px;overflow-y:auto}
.portal-shell .fl-bell-item{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-bottom:1px solid var(--grey-50);cursor:pointer}
.portal-shell .fl-bell-item:hover{background:var(--grey-50)}
.portal-shell .fl-bell-item.is-unread{background:var(--blue-pale)}
.portal-shell .fl-bell-item.is-unread:hover{background:#e3ebfb}
.portal-shell .fl-bell-msg{font-size:13.5px;color:var(--blue-ink);line-height:1.4}
.portal-shell .fl-bell-item.is-unread .fl-bell-msg{font-weight:600}
.portal-shell .fl-bell-ago{font-size:11.5px;color:var(--mid)}
.portal-shell .fl-bell-empty{padding:24px 16px;text-align:center;font-size:13px;color:var(--mid)}
.portal-shell .fl-bell-all{display:block;padding:11px 16px;text-align:center;font-size:13px;font-weight:600;color:var(--blue);border-top:1px solid var(--grey-50)}
.portal-shell .fl-bell-all:hover{color:var(--red);background:var(--grey-50)}

/* firm: invoicing — line item rows + total */
.portal-shell .inv-line{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.portal-shell .inv-line input{padding:10px 12px;border:1.5px solid var(--hair);border-radius:9px;font-family:inherit;font-size:14px;color:var(--ink)}
.portal-shell .inv-line input[name="li_desc[]"]{flex:1}
.portal-shell .inv-line .inv-amount{width:140px;font-family:'JetBrains Mono',ui-monospace,monospace;text-align:right}
.portal-shell .inv-line input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(237,28,36,.08)}
.portal-shell .inv-rm{width:32px;height:32px;border-radius:8px;border:1px solid var(--hair);background:#fff;color:var(--mid);font-size:18px;line-height:1;flex-shrink:0;cursor:pointer}
.portal-shell .inv-rm:hover{border-color:var(--red);color:var(--red)}
.portal-shell .inv-total-row{margin-top:12px;text-align:right;font-size:14px;font-weight:600;color:var(--blue-ink)}
.portal-shell .inv-total-row .mono{font-size:18px;margin-left:8px}

/* firm: appointments — tabs + month calendar */
.portal-shell .firm-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.portal-shell .ft-tab{padding:7px 14px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--mid);border:1px solid transparent}
.portal-shell .ft-tab:hover{color:var(--blue)}
.portal-shell .ft-tab.is-active{background:var(--blue-pale);color:var(--blue)}
.portal-shell .ft-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:0 0 14px 14px;overflow:hidden}
.portal-shell .ft-cal-dow{background:var(--grey-50);padding:8px 10px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mid);text-align:left}
.portal-shell .ft-cal-cell{background:#fff;min-height:96px;padding:6px 7px;display:flex;flex-direction:column;gap:3px}
.portal-shell .ft-cal-cell.is-empty{background:var(--grey-50)}
.portal-shell .ft-cal-cell.is-today{background:var(--blue-pale)}
.portal-shell .ft-cal-num{font-size:12px;font-weight:600;color:var(--mid)}
.portal-shell .ft-cal-cell.is-today .ft-cal-num{color:var(--blue)}
.portal-shell .ft-cal-item{font-size:11.5px;line-height:1.3;color:var(--blue-ink);background:var(--grey-50);border-left:2px solid var(--blue);border-radius:4px;padding:2px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.portal-shell .ft-cal-item:hover{background:var(--blue-pale)}
@media(max-width:860px){.portal-shell .ft-cal{font-size:11px}.portal-shell .ft-cal-cell{min-height:72px}}

/* firm: documents — per-row visibility/status form, dropzone state */
.portal-shell .doc-upd-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.portal-shell .doc-upd-form select{padding:6px 8px;border:1px solid var(--hair);border-radius:7px;font-family:inherit;font-size:12.5px;color:var(--ink);background:#fff}
.portal-shell .doc-upd-form select:focus{outline:none;border-color:var(--blue)}
.portal-shell .doc-upd-save{padding:6px 12px;font-size:12.5px}
.portal-shell .upload{position:relative}
.portal-shell .upload.is-drag{border-color:var(--red);background:var(--red-pale);color:var(--red)}
.portal-shell .upload-filename{display:block;margin-top:8px;font-size:13px;font-weight:600;color:var(--blue-ink)}

/* ==========================================================================
   WCAG 2.1 AA contrast remediation (prompt 07-03)
   Handled at the token level: --red is now #d81f26 (white-on-red AND red-on-white
   both ≈5.1:1) and the ampersand keeps the exact logo red via --amp; --mid darkened
   to #5d6470 (passes on --grey-50). The only per-element fix left: this badge's
   subtext used 82% white over red — make it solid white for AA.
   ========================================================================== */
.about-badge .s{color:#fff}
/* Red text on red-pale pill needs the darker red (4.37 → 5.4:1). */
.vac-card .jt{color:var(--red-dark)}
/* Small text on DARK sections: red/grey fail — use gold / light-muted (AA on #15224d). */
.grad .eyebrow{color:var(--gold)}
.info-card .lbl{color:rgba(255,255,255,.72)}
/* Newsletter consent text sits on the dark --blue-ink band (contact/insights) — light it. */
.newsband .finlaw-nl-consent{color:rgba(255,255,255,.78)}

/* FINLAW-FOOTER-DISCLAIMER + mobile footer alignment (added 2026-08-14) */
.fdisc{border-top:1px solid rgba(255,255,255,.1);background:var(--foot)}
.fdisc .wrap{padding:20px 32px;text-align:center}
.fdisc p{font-size:13px;line-height:1.75;color:rgba(255,255,255,.6);max-width:1000px;margin:0 auto}
.fdisc strong{color:rgba(255,255,255,.72);font-weight:600}
@media(max-width:600px){
  .fnews .wrap{flex-direction:column;align-items:stretch;text-align:center;gap:18px}
  .fnews form{justify-content:center}
  .fnews input{min-width:0;width:100%;flex:1 1 auto}
  .fdisc .wrap{padding:18px 20px}
  .fdisc p{text-align:center}
  .fbot .wrap{flex-direction:column;align-items:center;text-align:center;gap:12px}
  .fbot .legal{justify-content:center}
}
/* end FINLAW-FOOTER-DISCLAIMER */

/* FINLAW-PHOTO-SIZING (2026-08-14): smaller portrait on lawyer bios + smaller Our People cards */
body.single-lawyer .side .elementor-widget-finlaw-post-image{max-width:340px;margin:0 auto 6px}
body.single-lawyer .elementor-widget-finlaw-post-image img{width:100%;height:auto;border-radius:var(--r-lg)}
@media(min-width:1200px){.ppl-grid{grid-template-columns:repeat(5,1fr)}}
/* end FINLAW-PHOTO-SIZING */


/* AMP COLOUR (2026-09-04, supersedes the 2026-08-14 single-colour workaround):
   brand kit §6 — the ampersand is ALWAYS the exact logo red. Client re-confirmed
   the red & today (only the ornate Playfair swash was wrong; the plain body-font
   rule below fixes that). `!important` beats the inherited/heading colours. */
.amp{color:inherit!important} /* was var(--amp) red — client 2026-09-07: .amp{color:var(--amp)!important} should match surrounding text colour */
.amp-svg{fill:currentColor!important}
.fcol.ct .amp-svg{color:inherit!important}
/* end FINLAW-AMP-SINGLECOLOR */

/* FINLAW-CONTACT-ICONS (2026-08-14): icons beside address/phone/email on Contact page */
.info-row{display:flex;gap:12px;align-items:flex-start}
.info-row .io{color:var(--gold);flex-shrink:0;display:inline-flex;margin-top:3px}
.info-row .io svg{width:20px;height:20px}
/* end FINLAW-CONTACT-ICONS */

/* FINLAW-RESPONSIBILITY-INTRO (2026-08-14): fix broken 3-col intro — image was
   overflowing a 15% column. Rebalance to text 58% / image 40%, drop empty spacer. */
.elementor-element-1fea18a .elementor-col-15:last-child .elementor-widget-image{width:100%!important;max-width:100%!important}
.elementor-element-1fea18a .elementor-widget-image img{width:100%!important;max-width:100%!important;height:auto;display:block;border-radius:12px}
.elementor-element-1fea18a .elementor-col-15:last-child .elementor-widget-wrap{overflow:hidden}
@media(min-width:993px){
  .elementor-element-1fea18a > .elementor-container{align-items:center}
  .elementor-element-1fea18a .elementor-col-15:first-child{width:0!important;min-width:0!important;padding:0!important;flex:0 0 0!important}
  .elementor-element-1fea18a .elementor-col-70{width:58%!important;flex:0 0 58%!important}
  .elementor-element-1fea18a .elementor-col-15:last-child{width:40%!important;flex:0 0 40%!important}
}
/* end FINLAW-RESPONSIBILITY-INTRO */

/* =====================================================================
   CLIENT CORRECTIONS — Website_Corrections.pdf (applied 2026-08-29)
   Appended last so these win the cascade. Grouped by correction page.
   ===================================================================== */

/* p17 — Logo larger so the tagline baked into the artwork is legible.
   The separate text tagline (footer <p.d>, portal .bp-sub) was removed in
   the templates, so the logo now carries the tagline once, at a readable size. */
.logo-img{height:66px;max-width:300px}
header.scrolled .logo-img{height:52px}
@media(max-width:768px){.logo-img{height:48px}}
.logo-footer{height:104px;max-width:340px}

/* p15 — Contact info card: the "FIN & LAW" wordmark must use the normal
   website font (not the decorative/serif logo style) in a single colour,
   consistent with the address/phone text below it. */
.info-card h3,
.info-card h3.elementor-heading-title{
	font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif !important;
	font-weight:700;
	letter-spacing:.02em;
	color:#fff;
}

/* p15 — Contact page: the left box (form) and the right box (info card)
   must align to the top of the row. The card was resolving to
   position:relative; top:106px (an old sticky offset), which pushed it ~106px
   below the form. Reset it so both boxes start at the top of the row. */
.elementor-container:has(.info-card){align-items:flex-start}
.info-card{position:static !important;top:auto !important;margin-top:0}

/* p8/p9/p11/p13 — Consistent separation before the full-bleed red CTA band.
   On archive/listing pages the content (staff grid, insight list, knowledge
   sections) sat flush against the red "Ready to talk to our team?" band with
   no whitespace, blurring where the page content ends and the footer chrome
   begins. Add a uniform off-white gap above the band wherever it precedes the
   footer. Scoped so a CTA band that is the first thing in its section (i.e.
   directly after a coloured hero) is not pushed away from that hero. */
.ctaband{margin-top:56px}
@media(max-width:768px){.ctaband{margin-top:40px}}

/* p16/p17 — Disclaimer / Terms of Use / Privacy Policy (and any other
   default-template page) had NO vertical padding: the content sat flush
   against the header and ran straight into the footer. Add consistent top and
   bottom breathing room so these pages match the spacing rhythm of the rest of
   the site, and give the legal sub-headings a little more separation. */
body.page-template-default .site-main{padding:56px 0 76px}
body.page-template-default .site-main article h2,
body.page-template-default .site-main article h3{margin-top:34px}
body.page-template-default .site-main article h1{margin-bottom:8px}
body.page-template-default .site-main article p{margin-bottom:14px;line-height:1.7}
@media(max-width:768px){body.page-template-default .site-main{padding:36px 0 52px}}

/* p10 consistency (client follow-up) — the site convention is far-left text.
   A few section intros were centred via Elementor per-widget alignment
   (e.g. Expertise: "Our Expertise" eyebrow, "Comprehensive Counsel, End to End",
   and the paragraph beneath; matching intros on other archives). Left-align the
   Elementor heading + text/field widgets and the theme's .section-head.center so
   every page reads left. Theme-coded component centring (stat bands, step cards,
   badges, member cards, newsletter band) is intentional and left untouched. */
.elementor-heading-title{text-align:left !important}
.elementor-widget-text-editor,
.elementor-widget-finlaw-field,
.elementor-widget-text-editor > .elementor-widget-container,
.elementor-widget-finlaw-field > .elementor-widget-container,
.elementor-widget-text-editor p,
.elementor-widget-finlaw-field p{text-align:left !important}
.section-head.center{margin-left:0;margin-right:auto;text-align:left}
.section-head.center .eyebrow{justify-content:flex-start}
.section-head.center h1::after,
.section-head.center h2::after{margin-left:0;margin-right:auto}

/* Ampersand always in the normal body font, never Playfair ornate & (client correction 2026-09-02) */
.amp{font-family:var(--font-body)!important;font-style:normal!important;letter-spacing:0}

/* Page-header banners: content full-width + left-aligned, not a centered narrow block (banner left-align 2026-09-02).
   Root cause: .banner is display:grid and .wrap's margin:0 auto shrank+centered it as a grid item. */
.banner .wrap{width:100%}

/* Boxed Elementor archive banners (e.g. Locations 338): stop the boxed container centering the header; (banner boxed-container left-align 2026-09-02) */
.banner .elementor-container{max-width:var(--maxw)!important;width:100%!important;margin-left:auto!important;margin-right:auto!important}

/* Two-text-column (Aim & Mission etc.): full-width centred header above two top-aligned cards (aim-mission vm-cards 2026-09-02) */
.finlaw-twocol-head{margin-bottom:36px}
.finlaw-twocol.finlaw-twocol--cards{align-items:stretch}
/* Aim & Mission (#vision): restore the mockup vm-card treatment - red "Aim" card + white "Mission" card */
.vm .finlaw-twocol--cards>div{padding:34px 34px;border-radius:14px}
.vm .finlaw-twocol--cards .tc-text{background:linear-gradient(135deg,var(--red-dark) 0%,var(--red) 100%);color:#fff}
.vm .finlaw-twocol--cards .tc-text .vc-label{color:#FFD9DB}
.vm .finlaw-twocol--cards .tc-text h3{color:#fff}
.vm .finlaw-twocol--cards .tc-text p,.vm .finlaw-twocol--cards .tc-text .article{color:#FBE7E8}
.vm .finlaw-twocol--cards .tc-media{background:#fff;border:1px solid rgba(21,34,77,.10);box-shadow:0 12px 32px rgba(21,34,77,.07)}


/* Locations: office card LEFT + map RIGHT, side by side; stacks on mobile (locations side-by-side 2026-09-02) */
.post-type-archive-office .loc-split{padding-top:58px!important;padding-bottom:58px!important}
.post-type-archive-office .loc-split .section-head{margin-bottom:28px}
.post-type-archive-office .loc-card-col .office-card{width:100%;max-width:none}
.post-type-archive-office .loc-card-col .elementor-widget-wrap{align-items:center;align-content:center}
.post-type-archive-office .loc-map-col .leaflet-container{height:440px!important}
@media(max-width:767px){.post-type-archive-office .loc-map-col .leaflet-container{height:320px!important}}