/* ============================================================
   CCJ Redesign — Shared Theme
   Matched to ccj.org brand: navy/royal-blue, cool grounds, bright-blue accent.
   Used by all subpage templates. Premium, dignified, AA-contrast, mobile-first.
   ============================================================ */
:root{
  /* CCJ Pantone palette refresh (2026-07-10, from "CCJ Colour Palette" doc) mapped onto the wireframe roles:
     ink=Black 3C #212721 (body text) · teal=3597C #21366E (headings/primary, was Reflex Blue #2C2C6C)
     teal-700/teal-deep=2767C #13294B (hover-darken + dark surfaces, was Royal 2370/#23235A)
      gold/gold-soft=2007C #E0A526 + 121C #FDD757 (approved amber/sunbeam accents)
     blue/blue-700/focus=1795C #D22630 + darkened hover (buttons/links, was Cyan 2202 #01A3DD) —
     chosen over 7454C because it's the only non-navy swatch in the new palette that clears AA
     text contrast (5.17:1) against white button fills; user-approved trade-off, see chat 2026-07-10.
     Supporting/remaining accent swatches (7738C green, 359C light-green, 570C teal, 2007C orange,
     121C yellow) are NOT yet wired to a token — available for a future role (status/success/warning
     badges) if one is wanted. Neutral backgrounds (ivory/stone/ice/muted) are intentionally UNCHANGED:
     they're custom cool-blue tints, not sourced from a named Pantone swatch in the new doc, and are
     used too pervasively to swap without a confident source color.
     Old palette preserved in assets/ccj-theme.pre-pantone-refresh-2026-07-10.css
     2026-10-01: the Palette Lab selection CCJ reviewed on dev.ccj.org (option ccj_palette_active) is now
     baked in here and the option cleared, so live needs no Palette Lab: teal #13294B, teal-700/teal-deep
     #21366E, blue/focus #2EA3F2 (blue-700 #247FBD), gold #FDD757, gold-soft #FEE9A3, breadcrumb #B3E3F5,
     stone #E6E7F2. The role notes above describe the July mapping these replaced. */
  --ink:#212721; --teal:#13294B; --teal-deep:#21366E; --teal-700:#21366E;
  --dark-blue:#0D1F3A;                               /* preferred dark blue (primary colors, added 2026-07-19) */
  --photo-dark-blue:#03122C;                         /* Photo dark blue — darkest blue sampled from Hilwyn's screenshot 2026-07-19 */
   --gold:#FDD757; --gold-soft:#FEE9A3; --blue:#2EA3F2; --blue-700:#247FBD; --focus:#2EA3F2;
  --ivory:#F4F7FB; --stone:#E6E7F2; --stone-line:#D6DFEB; --white:#FFFFFF;
  --footer-bg:var(--photo-dark-blue);                /* footer band (Photo dark blue 2026-07-19; was royal #2F328D) */
  --ice:#F2F7FC; --ice-line:#DEE9F5;                 /* very-light-blue surface (box tints, zebra, icon chips) */
  --muted:#4A5A6E; --muted-on-dark:#C5CFDA;
  --breadcrumb:#B3E3F5;                              /* masthead breadcrumb trail (own palette role; links inherit) */
  --base-offwhite:#F8F6F2; --base-dark-blue:#1B2E4B; --base-gold:#C9973D;  /* new base palette additions, 2026-07-18 — not yet wired to any role */
  /* 2026-08-10: Arsenal retired — Roboto now carries the display role too (all-Roboto).
     Token NAMES unchanged (--serif = display role) so no component edits needed. */
  --serif:"Roboto","Source Serif 4",Georgia,serif;
  --sans:"Roboto",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --maxw:1240px; --radius:3px;
  --header-h:117px; /* fallback (matches unscrolled .nav height); ccj.js overwrites this live so 100vh sections can subtract the real, current header height */
  /* ---- SPACING SYSTEM ----------------------------------------------
     Scale (8px base):  3xs 4 · 2xs 8 · xs 12 · s 16 · m 24 · l 32 · xl 48 · 2xl 64 · 3xl 96
     Fluid structural tokens (clamp): scale smoothly with viewport — no breakpoint jumps.
     Rule of thumb: layout spacing uses tokens; intra-component micro-gaps may stay literal. */
  --sp-3xs:4px; --sp-2xs:8px; --sp-xs:12px; --sp-s:16px; --sp-m:24px; --sp-l:32px; --sp-xl:48px; --sp-2xl:64px; --sp-3xl:96px;
  --space-section:clamp(44px, 2.5vw + 34px, 70px);   /* main sections: 70 desktop -> 44 small, fluid */
  --space-hero:clamp(56px, 4vw + 39px, 96px);        /* hero band */
  --space-masthead:clamp(40px, 2vw + 32px, 60px);    /* page mastheads */
  --space-heading:clamp(28px, 1.5vw + 22px, 44px);   /* gap under section heads */
  --section-pad-y:var(--space-section);
  --gap-grid:var(--sp-m);                            /* card/tile grids */
  --gap-docs:50px;                                   /* document-card grids (user standard) */
  --gap-grid-lg:var(--sp-xl);                        /* editorial two-column splits */
  --pad-card:var(--sp-m);                            /* tile/card inner padding */
  --flow-space:1em;                                  /* .flow vertical rhythm */ --shadow:0 1px 2px rgba(10,42,48,.04),0 8px 28px rgba(10,42,48,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
/* Scoped reset — re-adds the wireframe reset ONLY inside .ccj-wire (exact HTML),
   placed BEFORE the components so they override it (fixes .wrap padding, grids, gaps). */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--ivory);line-height:1.8;font-size:1.0625rem;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.18;font-weight:600;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
svg{display:block}
ul{list-style:none}
img{max-width:100%;display:block}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--ink);padding:.75rem 1.25rem;font-weight:600;z-index:200}
.skip:focus{left:.5rem;top:.5rem}
.proto-banner{background:#FBF3D6;color:#5A4B1A;border-bottom:1px solid #ECDFB0;text-align:center;font-size:.8rem;padding:.5rem 1rem;font-weight:500}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.overline{font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#323392;margin-bottom:.85rem}  /* Logo Royal text on light bands (chip experiment reverted 2026-07-19) */
/* dark bands: colored-text eyebrows */
.band-teal .overline,.masthead .overline{color:var(--gold-soft)}
.jud-dark .overline{color:var(--base-gold)}
.exp-navy .overline,.sit-royal .overline{color:#8FD8F8}
.lede{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--muted);max-width:62ch}
.center{text-align:center}.mt0{margin-top:0}

/* ---------- buttons / links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font-family:var(--sans);font-weight:600;font-size:1rem;padding:.8rem 1.4rem;border-radius:var(--radius);border:1.5px solid transparent;cursor:pointer;transition:.18s ease}
.btn-primary{background:var(--blue);color:#fff}.btn-primary:hover{background:var(--blue-700)}
.btn-solid{background:var(--teal);color:#fff}.btn-solid:hover{background:var(--teal-700)}
.btn-outline{background:transparent;color:var(--teal);border-color:var(--stone-line)}.btn-outline:hover{border-color:var(--teal);background:var(--white)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}.btn-ghost:hover{border-color:var(--gold);color:var(--gold-soft)}
.link{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:var(--blue)}
.arrow{transition:transform .18s ease}.link:hover .arrow,.btn:hover .arrow{transform:translateX(3px)}

/* ---------- utility bar + header ---------- */
.utility{background:var(--teal-deep);color:var(--muted-on-dark);font-size:.82rem}
.utility .wrap{display:flex;justify-content:flex-end;align-items:center;gap:1.5rem;height:42px}
.utility a{display:inline-flex;align-items:center;gap:.4rem}.utility a:hover{color:#fff}
.live{display:inline-flex;align-items:center;gap:.5rem;color:var(--gold-soft);font-weight:600}
.live .dot{width:8px;height:8px;border-radius:50%;background:#E5484D;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}70%{box-shadow:0 0 0 7px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}
header.site{position:sticky;top:0;z-index:100;background:#fff;transition:box-shadow .3s ease}

/* ---------- SiteMapNav mega menu (UKSC-style bar + full-width white dropdown) ---------- */
.megabar-wrap{position:relative;background:#323392;z-index:90}  /* Logo Royal */
/* variant `megabar-navy` (Hilwyn 2026-09-04, Sections panel; class set in header.php): the nav bar
   and its dropdown panels on Photo dark blue — the hero/footer navy — instead of Logo Royal, which
   reads purple on many monitors (CCJ's graphic artist + Hilwyn). A hairline keeps the seam against
   the navy hero on the homepage. Hover tints are white-alpha, so they carry over unchanged. */
header.site.mb-navy .megabar-wrap{background:var(--photo-dark-blue);border-bottom:1px solid rgba(255,255,255,.10)}
header.site.mb-navy .mega-panel{background:var(--photo-dark-blue)}
header.site.mb-navy .mega-item:hover .mega-top,header.site.mb-navy .mega-item:focus-within .mega-top{background:rgba(255,255,255,.10)}
.megabar-list{display:flex;justify-content:space-between;gap:.5rem;list-style:none}  /* padding/max-width come from the enclosing .wrap */
.mega-item{list-style:none;display:flex}
/* interior pages: a resting hairline under the nav row in the same ink/opacity the
   dropdown panel uses on hover — width follows the boxed nav, not the viewport
   (Hilwyn 2026-08-10) */
body:not(.home) .megabar-list{border-bottom:1px solid rgba(255,255,255,.12)}
.mega-top{display:flex;align-items:center;justify-content:center;gap:.35rem;padding:2rem 1rem;color:#fff;font-family:var(--sans);font-weight:500;font-size:1.06rem;white-space:nowrap;line-height:1;transition:padding .3s ease}  /* was 1.5rem vertical (2026-07-19) */
header.site.scrolled .mega-top{padding-block:.85rem}  /* condensed bar when scrolled */
@media (max-width:1120px){.mega-top{font-size:.95rem;padding-inline:.7rem}}  /* 1.06rem overflows the bar in the narrow 980–1120 band (megabar hides <980) — step back down there */
.mega-search{display:none;align-items:center;justify-content:center;padding:2rem .9rem;background:none;border:0;cursor:pointer;color:#fff;transition:padding .3s ease,background .2s ease}
header.site.scrolled .mega-search{display:flex;padding-block:.85rem}  /* search surfaces in the minimized bar only — the logo row's Search has scrolled away */
.mega-search:hover{background:rgba(255,255,255,.12)}
.mega-item:hover .mega-top,.mega-item:focus-within .mega-top{background:rgba(255,255,255,.12)}
.mega-caret{transition:transform .2s ease}
.mega-item.is-open .mega-caret,html:not(.mb-intent) .mega-item:hover .mega-caret,.mega-item:focus-within .mega-caret{transform:rotate(180deg)}
.mega-panel{position:absolute;left:0;right:0;top:100%;overflow:hidden;background:#323392;border-top:1px solid rgba(255,255,255,.12);box-shadow:0 22px 44px rgba(10,20,60,.18);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:120}  /* natural-height dropdown in Logo Royal (fullscreen behavior removed 2026-07-22) */
.mega-item.is-open .mega-panel,html:not(.mb-intent) .mega-item:hover .mega-panel,.mega-item:focus-within .mega-panel{opacity:1;visibility:visible;transform:none}  /* G13: with JS hover-intent (html.mb-intent) the panel opens on .is-open, not raw :hover */
/* page scrim while a dropdown is open: content behind blurs + darkens; the header
   (z-index 100) and the panel stay crisp above it (2026-07-22) */
body::after{content:"";position:fixed;inset:0;z-index:95;background:rgba(3,18,44,.45);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s}
body:has(.mega-item.has-panel.is-open)::after,html:not(.mb-intent) body:has(.mega-item.has-panel:hover)::after,body:has(.mega-item.has-panel:focus-within)::after{opacity:1;visibility:visible}  /* only items WITH submenus trigger the scrim */
/* backdrop: HQ building sketch, bottom-left, lightened to sit quietly on the royal panel (2026-07-19) */
/* sketch backdrop removed with the fullscreen dropdown (2026-07-22) — it remains in the fullscreen hamburger menu */
.mega-panel-inner{position:relative;z-index:1}
.mega-panel-inner{max-width:var(--maxw);margin-inline:auto;padding:2.25rem clamp(1.25rem,4vw,2.5rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.75rem 2rem;align-items:start}  /* adapts to the column count — a 5-tile panel sits in one aligned row instead of wrapping 4+1 (2026-07-22) */
.mega-col-stack{display:flex;flex-direction:column;gap:1.6rem}  /* trailing icon tiles sharing one column (see ccj_render_sitemap_megamenu) stack instead of sitting side by side (2026-09-03) */
.mega-col-head{display:block;font-family:var(--sans);font-weight:700;font-size:.97rem;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:.7rem}
.mega-col-head{cursor:default}  /* plain label since 2026-10-02 — no hover state */
.mega-col-head{color:var(--base-gold)}  /* headings read apart from the white links under them: the footer's muted gold on the same navy (Hilwyn 2026-10-02) */
.mega-col-link{display:block;color:#fff;font-size:.9rem;line-height:1.3}   /* childless level-2 items: same voice as the column links */
/* icon tiles — childless entries in Court Documents / Services / Media & Resources (2026-07-19) */
.mega-col-link.mega-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.8rem;font-size:.95rem;font-weight:600}
/* animated underline: grows from center on hover (ease-in), retracts on leave (ease-out) */
.mega-col-link.mega-tile:hover{text-decoration:none!important}
.mega-col-link.mega-tile::after{content:"";width:56px;height:2px;margin-top:-.3rem;background:linear-gradient(90deg,var(--gold) 12px,transparent 12px 18px,#01A3DD 18px);border-radius:1px;transform:scaleX(0);transition:transform .2s ease-out}
.mega-col-link.mega-tile:hover::after,.mega-col-link.mega-tile:focus-visible::after{transform:scaleX(1);transition:transform .14s ease-in}
.mega-ico{display:flex;align-items:center;justify-content:center;opacity:.65;transition:color .2s ease,transform .2s ease,opacity .2s ease}  /* bare icon — no chip/border; semi-transparent at rest */
.mega-ico svg{width:52px;height:52px}
.mega-col-link.mega-tile:hover .mega-ico{color:#01A3DD;opacity:1;transform:translateY(-2px)}
.mega-panel-inner .mega-col{border-right:1px solid rgba(255,255,255,.09);padding-right:1.75rem}
.mega-panel-inner .mega-col:last-child{border-right:0;padding-right:0}
.mega-col ul{list-style:none;display:flex;flex-direction:column;gap:.1rem}  /* item spacing comes from the anchors' own padding */
.mega-col ul a{display:block;padding:.55rem 0;color:#fff;font-size:.9rem;line-height:1.32}  /* block + own line-height keeps WRAPPED lines tight-ish; padding separates the items themselves */
/* animated underline for the regular submenu links — grows from the left on hover, retracts on leave.
   Two-tone like the section-title rules: a 12px gold dash on the left, a 6px gap, then cyan for the rest
   (dash leads as the line grows and stays 12px at every width; Hilwyn 2026-10-02) */
.mega-col ul a,.mega-col-link:not(.mega-tile){background-image:linear-gradient(90deg,var(--gold) 12px,transparent 12px 18px,#01A3DD 18px);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .2s ease-out}
.mega-col ul a:hover,.mega-col-link:hover{color:#fff}
.mega-col ul a:hover,.mega-col ul a:focus-visible,.mega-col-link:not(.mega-tile):hover,.mega-col-link:not(.mega-tile):focus-visible{background-size:100% 1px;transition:background-size .14s ease-in}
@media(max-width:980px){.megabar-wrap{display:none}}
header.site.scrolled{box-shadow:0 4px 24px rgba(10,20,60,.10)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:24px 16px;transition:padding .3s ease}
header.site.scrolled .nav{padding-block:9px}
.brand{display:flex;align-items:center;gap:.85rem;flex-shrink:0}
.seal{width:84px;height:84px;flex-shrink:0;display:block;object-fit:contain;transition:width .3s ease,height .3s ease}
header.site.scrolled .seal{width:48px;height:48px}
.brand-txt strong{display:block;font-family:var(--sans);font-weight:700;font-size:1.15rem;color:var(--teal);line-height:1.1;transition:font-size .3s ease}
.hb-br{display:none}  /* wordmark splits "Caribbean / Court of Justice" on phones only */
header.site.scrolled .brand-txt strong{font-size:.92rem}
.brand-txt span{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:2px;transition:font-size .3s ease,margin-top .3s ease,opacity .3s ease}
header.site.scrolled .brand-txt span{font-size:0;margin-top:0;opacity:0}
.primary-nav ul{display:flex;gap:.25rem}
.primary-nav a{display:block;padding:.55rem .8rem;font-weight:500;font-size:.95rem;border-radius:var(--radius);color:var(--ink)}
.primary-nav a:hover{color:var(--teal);background:var(--stone)}
.primary-nav a[aria-current="page"]{color:var(--teal);font-weight:600;box-shadow:inset 0 -2px 0 var(--gold)}
.nav-cta{display:flex;align-items:center;gap:.6rem}
.cta-links{display:flex;align-items:center;gap:1.15rem;margin-left:.6rem;margin-right:1.5rem}  /* quick links after Search; space before the menu button */
.cta-links a{font-size:.9rem;font-weight:500;color:var(--ink);white-space:nowrap}  /* matches the Search label */
.cta-links a:hover{color:var(--blue)}
.cta-links a.watch-live{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .65rem;border-radius:var(--radius);background:#B8202A;color:#fff!important;font-size:.82rem;font-weight:700}
.cta-links a.watch-live:hover{background:#A41E25;color:#fff!important}
.cta-sep{width:1px;height:16px;background:var(--stone-line)}
@media(max-width:980px){.cta-links{display:none}}
.mobile-only{display:none}

/* ---- Header on phones: the row must never exceed the viewport. The
   letter-spaced tagline + non-shrinking brand were forcing a 512px
   document on 390px phones (pushing search/menu off-canvas and adding
   page-wide horizontal scroll), so: tagline hidden, brand allowed to
   shrink/wrap, paddings compacted. ---- */
@media(max-width:640px){
  .nav{gap:.9rem;padding-block:18px 14px}
  .brand{flex-shrink:1;min-width:0;gap:.7rem}
  .seal{width:56px;height:56px}
  .brand-txt{min-width:0}
  .brand-txt strong{font-size:1.02rem;white-space:normal}
  .brand-txt span{display:none}
  .hb-br{display:inline}
  header.site.scrolled .nav{padding-block:8px}
}
/* Safety net: nothing may widen the page sideways (clip, not hidden —
   doesn't create a scroll container, keeps position:sticky working). */
html{overflow-x:clip}
.nav-overlay{position:fixed;inset:0;background:rgba(8,46,53,.55);opacity:0;visibility:hidden;transition:opacity .25s;z-index:140}
.nav-overlay.show{opacity:1;visibility:visible}
body.nav-open{overflow:hidden}

/* ---------- masthead ---------- */
/* page-title masthead: royal fullscreen-nav ground with a ghosted SECTION SKETCH
   anchored bottom-right (robe photo retired 2026-07-28 — Hilwyn's sketch-identity
   system). Each main CCJNav2026 section can carry its own sketch via the
   body.mast-sk-<top-level-slug> class (emitted in functions.php; per-page override
   via `ccj_sketch` post meta, 'none' suppresses). Default art = HQ building sketch,
   same treatment the search results masthead pioneered. */
.masthead{position:relative;overflow:hidden;color:#fff;background:#323392}
.masthead::before{content:"";position:absolute;inset:16px 0 0 auto;
  /* HEIGHT-driven (2026-08-01, per Hilwyn: art was clipping): the box spans the
     masthead's full height minus a 16px top breather; width follows --sketch-ar.
     contain + right-bottom anchoring keeps the ENTIRE image visible at every
     desktop/tablet width; max-width stops wide art crossing into the title. */
  aspect-ratio:var(--sketch-ar,1672/941);max-width:min(640px,58%);
  filter:invert(1);opacity:.11;
  background:var(--sketch,url("img/ccj-hq-sketch.png")) right bottom/contain no-repeat;pointer-events:none}
/* section sketches — Hilwyn's picks 2026-08-01 (chooser rounds 3-4); line art is
   hand-drawn SVG, ink on transparent, inverted to white by the ::before filter */
body.mast-sk-judgments-proceedings .masthead{--sketch:url("img/sketch-bench.svg");--sketch-ar:1040/700}  /* the judges' bench (Hilwyn 2026-08-01); sketch-robe.png retired, kept on disk */
body.mast-sk-court-documents .masthead{--sketch:url("img/sketch-docs.svg");--sketch-ar:900/720}
body.mast-sk-e-filing .masthead{--sketch:url("img/sketch-efile.svg");--sketch-ar:1100/640}
body.mast-sk-services .masthead{--sketch:url("img/sketch-crowd.svg");--sketch-ar:1000/680}
body.mast-sk-media-resources .masthead{--sketch:url("img/sketch-photos.svg");--sketch-ar:980/700}
body.mast-sk-library .masthead{--sketch:url("img/sketch-shelves.png");--sketch-ar:1024/683}  /* photo texture, left-fade; sketch-books.svg kept as alternate */
body.mast-sk-none .masthead::before{content:none}
.masthead .wrap{padding-block:var(--space-masthead);position:relative;z-index:1}
.page-id-29346 .masthead .wrap{padding-top:1.15rem}  /* What We Do: breadcrumb tucked up under the nav bar; eyebrow removed (Hilwyn 2026-08-10) */
.breadcrumb{font-size:.85rem;color:var(--breadcrumb);margin-bottom:1.25rem}
.breadcrumb a:hover{color:#fff}.breadcrumb span{margin-inline:.5rem;opacity:.5}
/* masthead tone variants — per page via `ccj_masthead` post meta (light|white) */
body.mast-light .masthead,body.mast-white .masthead,body.mast-parchment .masthead{color:var(--ink)}
body.mast-light .masthead::before,body.mast-white .masthead::before,body.mast-parchment .masthead::before{content:none}   /* no robe photo */
body.mast-white .masthead{background:#fff}
body.mast-light .masthead{background:linear-gradient(135deg,#F5F6FB 0%,#EBECF6 55%,#E6E7F2 100%)}   /* lightest Logo-Royal tints */
body.mast-parchment .masthead{background:#eeeae2}   /* matches the interior page band (2026-07-21) */
body.mast-light .masthead+.band,body.mast-white .masthead+.band,body.mast-parchment .masthead+.band{border-top:0}   /* no hairline under light/white title bands */
body.mast-light .masthead h1,body.mast-white .masthead h1,body.mast-parchment .masthead h1{color:var(--teal);text-shadow:none}
body.mast-light .masthead .breadcrumb,body.mast-white .masthead .breadcrumb,body.mast-parchment .masthead .breadcrumb{color:var(--muted)}
body.mast-light .masthead .breadcrumb a:hover,body.mast-white .masthead .breadcrumb a:hover,body.mast-parchment .masthead .breadcrumb a:hover{color:#323392}
body.mast-light .masthead p.intro,body.mast-white .masthead p.intro,body.mast-parchment .masthead p.intro{color:var(--muted)}
.masthead h1{font-size:clamp(2.3rem,4.8vw,3.5rem);line-height:1.14;letter-spacing:0;max-width:26ch;text-wrap:balance}  /* tracking opened + balanced wrapping for long titles (E5 readability, 2026-07-21); no text-shadow: the navy sweep behind the title already guarantees contrast */
.masthead h1::after{content:"";display:block;width:58px;height:3px;background:linear-gradient(90deg,#E0A526 0 42px,transparent 42px 47px,#01A3DD 47px);margin-top:1.15rem;border-radius:2px}  /* Amber 2007C + Logo Cyan dash — split-rule motif (Hilwyn 2026-07-28) on the navy-robe (and light) mastheads */
body.mast-white .masthead h1::after{background:linear-gradient(90deg,#01A3DD 0 42px,transparent 42px 47px,#323392 47px)}  /* Logo Cyan + Logo Royal dash on the white variant */
/* INVERTED title band (comparison variant, Hilwyn 2026-08-10; panel key
   mast-inverted-<id> on full-width pages): re-asserts the standard royal-ground,
   white-type, section-sketch masthead even on pages whose ccj_masthead meta made
   the band light/white/parchment — i.e. the treatment What we do and the other
   section titles use. Specificity beats the body.mast-* tone rules above. */
body .masthead.mast-inverted{background:#323392;color:#fff}
body .masthead.mast-inverted::before{content:""}
body .masthead.mast-inverted h1{color:#fff;text-shadow:none}
body .masthead.mast-inverted h1::after{background:linear-gradient(90deg,#E0A526 0 42px,transparent 42px 47px,#01A3DD 47px)}
body .masthead.mast-inverted .breadcrumb{color:var(--breadcrumb)}
body .masthead.mast-inverted .breadcrumb a:hover{color:#fff}
body .masthead.mast-inverted p.intro{color:var(--muted-on-dark)}
body .masthead.mast-inverted+.band{border-top:0}
/* WHITE + SKETCH title band, optionally carrying Mission & Vision (Hilwyn 2026-08-10;
   panel key mast-sketch-<id>): the section sketch sits on white in its own dark ink —
   no invert filter, unlike the royal band — behind a navy-on-white title. */
body .masthead.mast-sketchwhite{background:#fff;color:var(--ink)}
body .masthead.mast-sketchwhite::before{content:"";filter:none;opacity:.13;inset:0 0 0 auto;height:100%;max-width:min(980px,72%)}  /* large, but contained within the band (Hilwyn 2026-08-10) */
body .masthead.mast-sketchwhite h1{color:var(--teal);text-shadow:none}
body .masthead.mast-sketchwhite h1::after{background:linear-gradient(90deg,#01A3DD 0 42px,transparent 42px 47px,#323392 47px)}
body .masthead.mast-sketchwhite .breadcrumb{color:var(--muted)}
body .masthead.mast-sketchwhite .breadcrumb a:hover{color:#323392}
body .masthead.mast-sketchwhite+.band{border-top:0}
/* the two statements as seal-coloured boxes, set inside the title band */
.mast-mv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.1rem,2.2vw,1.9rem);margin-top:clamp(2rem,4vw,3rem);max-width:min(960px,100%)}
.mast-mv>div{min-width:0}
.mast-mvcard{display:flex;flex-direction:column;gap:.55rem;padding:clamp(1.5rem,2.6vw,2.1rem);border-radius:9px}
.mast-mv-mission{background:#323392}   /* Logo Royal */
.mast-mv-vision{background:#01A3DD}    /* Logo Cyan */
.mast-mv .ww-kicker{margin-bottom:0;color:rgba(255,255,255,.82)}
.masthead .mast-mv h2{font-size:clamp(1.35rem,2.1vw,1.75rem);color:#fff;margin:0;line-height:1.1}
.masthead .mast-mv h2::after{content:none}   /* the h1 already carries the split rule */
.masthead .mast-mv p{font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.55;color:#fff;margin:0;max-width:46ch}
@media(max-width:900px){.mast-mv{grid-template-columns:1fr;gap:1rem}}
.masthead p.intro{color:#E2ECF6;margin-top:.9rem;max-width:60ch;font-size:1.08rem}
.masthead .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.75rem}

/* ---------- sections / scaffold ---------- */
section.block{padding-block:var(--section-pad-y)}
.band{background:var(--white);border-block:1px solid var(--stone-line)}
body:not(.home) .band{background:#eeeae2}  /* interior pages: content band matches the homepage quick-links parchment (2026-07-21) */
.band-stone{background:var(--stone)}
.band-teal{background:var(--teal-deep);color:#fff}
.band-teal h2,.band-teal h3{color:#fff}.band-teal .lede{color:var(--muted-on-dark)}
.sec-head{max-width:64ch;margin-bottom:var(--space-heading)}
.sec-head h2::after,.overline+h2::after{content:"";display:block;width:64px;height:3px;background:linear-gradient(90deg,#323392 0 46px,transparent 46px 52px,#01A3DD 52px);border-radius:1px;margin-top:.75rem}  /* split title rule (Hilwyn 2026-07-28): long Logo Royal + short Logo Cyan dash, mirrors the QA eyebrow */
.band-teal .sec-head h2::after,.band-teal .overline+h2::after,.masthead .sec-head h2::after,.masthead .overline+h2::after,.jud-dark .sec-head h2::after,.jud-dark .overline+h2::after,.exp-navy .sec-head h2::after,.exp-navy .overline+h2::after,.sit-royal .sec-head h2::after,.sit-royal .overline+h2::after{background:linear-gradient(90deg,#01A3DD 0 46px,transparent 46px 52px,var(--gold) 52px)}  /* dark bands: long Logo Cyan + gold dash */
.sec-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem);color:var(--teal)}
.sec-head .lede{margin-top:.9rem}

/* ---------- editorial + anchor nav (jurisdiction / about) ---------- */
.editorial{display:grid;grid-template-columns:230px 1fr;gap:var(--gap-grid-lg);align-items:start}
.anchornav{position:sticky;top:76px}
.anchornav h2{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:var(--sans);margin-bottom:.9rem}
.anchornav a{display:block;padding:.5rem .75rem;font-size:.94rem;color:var(--muted);border-left:2px solid var(--stone-line);border-radius:0 var(--radius) var(--radius) 0}
.anchornav a:hover,.anchornav a.active{color:var(--teal);border-left-color:var(--gold);background:var(--stone);font-weight:600}
/* "In this section" rail: sibling-page nav in a right column on interior pages
   (menu-driven, see ccj_section_nav()). Sticky offset tracks the live header
   height that ccj.js maintains in --header-h. */
.page-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(2.2rem,4.5vw,4.75rem);align-items:start}
/* rail nav in a light shaded box hugging its content; the box itself sticks on scroll */
.secnav{position:sticky;top:calc(var(--header-h) + 28px);background:var(--ivory);border-radius:5px;padding:1.9rem clamp(1.4rem,1.8vw,1.9rem);font-family:var(--sans)}
.secnav .sn-head{display:block;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#323392;padding-bottom:.75rem;border-bottom:2px solid #323392;margin-bottom:.75rem;line-height:1.4}
.secnav a.sn-head:hover{color:#01A3DD;border-bottom-color:#01A3DD}
.secnav ul{list-style:none;margin:0;padding:0}
.secnav .sn-list>li{border-bottom:1px solid var(--stone-line)}
.secnav .sn-list a{display:block;padding:.62rem .5rem .62rem .75rem;font-size:.92rem;line-height:1.4;color:var(--ink);border-left:3px solid transparent;transition:background .15s ease,color .15s ease}
.secnav .sn-list a:hover{background:#fff;color:#323392}
.secnav .sn-list>li.cur>a,.secnav .sn-head.cur{color:#323392}
.secnav .sn-list>li.cur>a{border-left-color:#323392;background:#E6E7F2;font-weight:600}
.secnav .sn-group{display:block;padding:.8rem .5rem .15rem 0;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.secnav .sn-sub{margin:.1rem 0 .55rem}
.secnav .sn-sub a{padding:.38rem .5rem .38rem 1.7rem;font-size:.86rem;color:var(--muted)}
.secnav .sn-sub li.cur>a{border-left-color:#323392;background:#E6E7F2;font-weight:600;color:#323392}
@media (max-width:980px){
  .page-cols{display:block}
  .secnav{position:static;margin-top:3.2rem;padding:1.7rem 1.4rem;max-width:440px}
}
/* interior pages: body copy in the brand serif (Times New Roman -> Source Serif 4 on web).
   Headings/buttons keep their own font rules; homepage (.home) stays sans. */
body:not(.home) .prose{font-family:var(--serif)}
body:not(.home) .prose .btn,body:not(.home) .prose .chip{font-family:var(--sans)}
.prose h2{font-size:clamp(1.4rem,2.6vw,1.9rem);color:var(--teal);margin:2.25rem 0 .85rem;scroll-margin-top:76px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.2rem;color:var(--ink);margin:1.5rem 0 .5rem}
.prose p{margin-bottom:1.1rem;max-width:65ch}
.prose p:has(>img:only-child),.prose p:has(>a:only-child>img){max-width:none}  /* lone images (posters, notices) get the full column */
.prose ul.bullets{margin:0 0 1.1rem 1.1rem;max-width:65ch}
/* editorial auto-lede: the opening paragraph of a generic interior page reads as an intro */
.prose-content>p:first-child:not(:has(>a.ccj-back)){font-size:1.26rem;line-height:1.65;color:var(--muted);max-width:56ch;padding-bottom:1.7rem;border-bottom:1px solid var(--stone-line);margin-bottom:1.9rem}  /* auto-lede skips back-link rows */
/* quoted material (treaty text, judgments) — serif italic behind a whisper-of-royal rule */
.prose blockquote{margin:2.1rem 0;padding:.35rem 0 .35rem 1.7rem;border-left:3px solid rgba(50,51,146,.4)}
.prose blockquote p{font-style:italic;font-size:1.13rem}
.prose blockquote p:last-child{margin-bottom:0}
.prose blockquote cite{display:block;margin-top:.7rem;font-style:normal;font-family:var(--sans);font-size:.85rem;color:var(--muted)}
/* figures: plain image + quiet caption; .fig-right floats beside the prose */
.prose figure{margin:2.1rem 0}
.prose figure img{max-width:100%;height:auto}
.prose figure figcaption{margin-top:.75rem;font-family:var(--sans);font-size:.84rem;color:var(--muted);text-align:center}
.prose figure.fig-right{float:right;width:min(46%,330px);margin:.4rem 0 1.6rem 2.4rem}
@media(max-width:700px){.prose figure.fig-right{float:none;width:100%;margin:1.8rem 0}}
/* legacy Divi accordions (FAQs) render as native details/summary — light cards, first one open */
.prose details.acc{background:var(--ivory);border-radius:5px;padding:0 1.35rem;margin-bottom:.85rem;max-width:70ch}
.prose details.acc>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:1rem;padding:1.05rem .15rem;font-family:var(--sans);font-weight:600;font-size:.99rem;line-height:1.45;color:var(--ink);transition:color .15s ease}
.prose details.acc>summary::-webkit-details-marker{display:none}
/* click focus-ring suppression lives in ccj.js (summary blur-on-click) — Chrome paints
   the :focus-visible ring even for mouse clicks on <summary>, so CSS alone can't split
   pointer from keyboard; the global summary:focus-visible rule still covers keyboard */
.prose details.acc>summary::after{content:"+";margin-left:auto;flex:none;font-size:1.5rem;font-weight:300;line-height:1;color:#323392;transition:transform .25s ease}
.prose details.acc[open]>summary::after{transform:rotate(45deg)}
.prose details.acc>summary:hover{color:#323392}
.prose .acc-body{padding:.15rem .15rem 1.3rem}
.prose .acc-body>p:last-child{margin-bottom:0}
/* opened FAQ flips dark: Court-Navy card, white question, soft-white answer */
.prose details.acc[open]{background:#13294B}
.prose details.acc[open]>summary,.prose details.acc[open]>summary:hover{color:#fff}
.prose details.acc[open]>summary::after{color:#fff}
.prose details.acc[open] .acc-body p{color:var(--muted-on-dark)}
.prose details.acc[open] .acc-body a{color:#8FD8F8}
/* quiet end-of-article mark */
.prose-content::after{content:"\00B7\2002\00B7\2002\00B7";display:block;margin-top:3.2rem;text-align:center;font-family:var(--serif);font-size:1.25rem;letter-spacing:.18em;color:var(--muted);opacity:.55}

/* ---------- "Who we are" remodel (page 1330 content sections) ----------
   Band colors sampled from the retired Mission/Vision/Core-Values graphics:
   mission = sky-cyan watercolor, vision = orchid watercolor, values = sand. */
.page-template-page-fullwidth .band{overflow-x:clip}
/* content that OPENS with a full-bleed band sits flush under the page title */
.band:has(>.wrap>.prose-content>.ww-band:first-child),.band:has(>.wrap.prose-content>.ww-band:first-child){padding-top:0}
.page-id-1330 .band{padding-top:0}  /* Who we are always opens with a full-bleed band; the :first-child form above breaks once section-visibility wrappers/markers precede it */
.page-id-10 .band,.band:has(>.wrap>.prose>.sl-plate:first-child){padding-top:0}    /* pages that open with the white specimen plate (Seal of the Court, The Judges' Robes) sit it flush under the masthead */
/* ---- SEAL OF THE COURT (p10, 2026-08-10) — museum-plate treatment: the physical
   seal as a specimen on white with a record card beside it; Article III as a
   ceremonial centred citation; the sealing history as ruled columns. ---- */
.sl-plate{width:100vw;margin-left:calc(50% - 50vw);background:#fff;padding-block:clamp(2.8rem,5.5vw,4.6rem)}
.sl-grid{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem);display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:clamp(2.2rem,5vw,4.5rem);align-items:center}
.sl-fig{margin:0;position:relative;isolation:isolate}
.sl-fig::before{content:"";position:absolute;inset:-8%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,#F6F4F0 0%,rgba(246,244,240,.65) 55%,rgba(246,244,240,0) 72%)}
.sl-fig img{display:block;width:100%;max-width:460px;height:auto;margin-inline:auto}
.sl-fig figcaption{margin-top:1.1rem;text-align:center;font-size:.9rem;line-height:1.5;color:var(--muted)}
.sl-record .ww-kicker{margin-bottom:.7rem}
.prose .sl-lede{font-family:var(--serif);font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.6;color:#13294B;margin:0;max-width:none}
.sl-rows{margin:1.7rem 0 0;display:flex;flex-direction:column}
.sl-row{display:grid;grid-template-columns:138px minmax(0,1fr);gap:1.3rem;padding:.95rem 0;border-top:1px solid rgba(21,35,59,.14)}
.sl-row dt{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#323392;padding-top:.2rem}
.sl-row dd{margin:0;font-size:1rem;line-height:1.6;color:var(--ink)}
.sl-row dd .sl-sub{display:block;font-size:.93rem;color:var(--muted)}  /* G6: role-based extension lines under a shared number */
.sl-quote{padding:clamp(2.6rem,5.5vw,4.2rem) 0 0;text-align:center}
.sl-quote::before{content:"";display:block;width:11px;height:11px;margin:0 auto 1.7rem;transform:rotate(45deg);background:var(--base-gold);box-shadow:0 0 0 2.5px #fff}
.prose .sl-quote blockquote{margin:0 auto;padding:0;border-left:0;max-width:58ch}
.prose .sl-quote blockquote p{font-family:var(--serif);font-style:italic;font-size:clamp(1.35rem,2.3vw,1.85rem);line-height:1.5;color:#13294B;margin:0}
.sl-quote cite{display:block;margin-top:1.2rem;font-style:normal;font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.sl-practice{margin-top:clamp(2.6rem,5.5vw,4rem);padding-top:clamp(1.6rem,3vw,2.2rem);border-top:1px solid rgba(21,35,59,.14)}
.sl-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3.4rem);margin-top:1.1rem}
.sl-cols p{margin:0;max-width:none}
.sl-plate p:empty,.sl-practice p:empty{display:none}
/* ANNUAL REPORTS (p121, 2026-08-10): CVP grid skinned as cover cards, 4 across.
   Doubled-ID prefix beats the view's inline !important CSS. */
/* The bootstrap column layout (col-md-3 floats + item padding) is replaced by a real
   CSS grid on .pt-cv-page, so the separation is honest `gap` rather than padding.
   GOTCHA: CVP paints .pt-cv-content-item white — left as-is it bleeds across the
   gutters and fuses the cards into one slab. */
.ar-skin #pt-cv-view-cd13a3b4fw#pt-cv-view-cd13a3b4fw .pt-cv-page{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.6rem);margin:0}
.ar-skin #pt-cv-view-cd13a3b4fw#pt-cv-view-cd13a3b4fw .pt-cv-content-item{background:transparent!important;padding:0!important;margin:0!important;width:auto!important;float:none!important;left:auto!important;right:auto!important}
.ar-skin #pt-cv-view-cd13a3b4fw#pt-cv-view-cd13a3b4fw .pt-cv-ifield{background:transparent!important;border:0;border-radius:0;overflow:visible;height:100%;display:flex;flex-direction:column;box-shadow:none;transition:transform .2s ease}
.ar-skin #pt-cv-view-cd13a3b4fw#pt-cv-view-cd13a3b4fw .pt-cv-ifield:hover{transform:translateY(-3px)}
.ar-skin #pt-cv-view-cd13a3b4fw#pt-cv-view-cd13a3b4fw .pt-cv-href-thumbnail{border-radius:9px}  /* the cover keeps the rounded frame now the card ground is gone */
@media(max-width:900px){.ar-skin #pt-cv-view-cd13a3b4fw#pt-cv-view-cd13a3b4fw .pt-cv-page{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ar-skin #pt-cv-view-cd13a3b4fw#pt-cv-view-cd13a3b4fw .pt-cv-page{grid-template-columns:1fr}}
.ar-skin #pt-cv-view-cd13a3b4fw#pt-cv-view-cd13a3b4fw .pt-cv-href-thumbnail{overflow:hidden;display:block!important}
.ar-skin #pt-cv-view-cd13a3b4fw#pt-cv-view-cd13a3b4fw .pt-cv-thumbnail{width:100%!important;max-width:none!important;aspect-ratio:3/4;object-fit:cover;object-position:top;display:block!important;margin:0!important;transition:transform .35s ease}
.ar-skin #pt-cv-view-cd13a3b4fw#pt-cv-view-cd13a3b4fw .pt-cv-ifield:hover .pt-cv-thumbnail{transform:scale(1.035)}
.ar-skin #pt-cv-view-cd13a3b4fw#pt-cv-view-cd13a3b4fw h4.pt-cv-title{margin:0;padding:.95rem 1rem 1.15rem;font-size:.98rem;line-height:1.35;text-align:center;flex:1;display:flex;align-items:center;justify-content:center}
.ar-skin #pt-cv-view-cd13a3b4fw#pt-cv-view-cd13a3b4fw h4.pt-cv-title a{color:var(--teal)!important;font-weight:700!important;text-decoration:none!important}
.ar-skin #pt-cv-view-cd13a3b4fw#pt-cv-view-cd13a3b4fw h4.pt-cv-title a:hover{color:#0E86BD!important}
.ar-skin #pt-cv-view-cd13a3b4fw#pt-cv-view-cd13a3b4fw .pt-cv-rmwrap{display:none}  /* cover + title already link */
/* ==========================================================================
   DOCUMENT ROWS (2026-08-10) — opt-in treatment for instrument/document pages:
   wrap a ul.docs in <div class="docrows"> and the rewritten cards stack as
   full-width rows instead of a two-across grid. Anatomy: royal file chip ·
   title + meta · ringed download glyph, with a split-rule accent that wipes
   in from the left on hover. Leaves the shared .doc-card grid untouched.
   ========================================================================== */
.prose .docrows .docgrid{display:flex;flex-direction:column;gap:.7rem;margin:1.4rem 0}
.docrows .doc-card{grid-template-columns:auto minmax(0,1fr);grid-auto-rows:min-content;align-content:center;row-gap:.12rem;column-gap:1.15rem;
  padding:.9rem 1.3rem;border-radius:9px;border:1px solid rgba(21,35,59,.08);box-shadow:none;position:relative;overflow:hidden}
.docrows .doc-card .doc-meta{padding:0;margin:0}   /* the legacy .doc-meta card padding would double the row height */
.docrows .doc-card:hover{transform:none;border-color:rgba(50,51,146,.3);box-shadow:none;background:#FCFCFE}
/* left accent wipes in on hover */
.docrows .doc-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;transform:scaleY(0);transform-origin:top;
  background:linear-gradient(180deg,#323392,#01A3DD);transition:transform .24s ease}
.docrows .doc-card:hover::after{transform:scaleY(1)}
/* file chip: smaller, royal-tinted, square-ish */
.docrows .doc-card::before{grid-row:1/span 2;align-self:center;width:42px;height:42px;border-radius:8px;background-color:#E6E7F2;background-size:19px}
.docrows .doc-card:hover::before{background-color:#DDDEEF}
.docrows .doc-card .doc-title{font-family:var(--sans);font-weight:700;font-size:1.02rem;line-height:1.4;color:var(--teal)}
.docrows .doc-card:hover .doc-title{color:#323392}
.docrows .doc-card .doc-meta{grid-column:2;margin-top:.2rem;font-size:.7rem;letter-spacing:.13em}
/* ringed download glyph on the right */
.docrows .doc-card .doc-title::after{content:"";position:absolute;right:1.25rem;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(50,51,146,.3);
  background:#323392;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='none' stroke='black' stroke-width='1.4'/><path d='M12 6.5v8M8.5 11l3.5 3.5 3.5-3.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='none' stroke='black' stroke-width='1.4'/><path d='M12 6.5v8M8.5 11l3.5 3.5 3.5-3.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  border:0;opacity:.45;transition:opacity .18s ease,transform .18s ease}
.docrows .doc-card:hover .doc-title::after{opacity:1;transform:translateY(-50%) translateY(2px)}
.docrows .doc-card .doc-title{padding-right:3.4rem}
@media(max-width:560px){
  .docrows .doc-card{column-gap:1rem;padding:.95rem 1.1rem}
  .docrows .doc-card .doc-title{padding-right:2.6rem;font-size:.97rem}
}
/* RESEARCH LINK GROUPS (Court Library p20, 2026-08-10): the Divi tab strip becomes
   ruled columns — every group visible at once instead of hidden behind eight tabs. */
.lg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.6rem,3.5vw,3rem);margin-top:1.4rem}
.lg-col{position:relative;border-top:1px solid rgba(21,35,59,.16);padding-top:1.3rem;break-inside:avoid}
.lg-col::before{content:"";position:absolute;left:0;top:-2px;height:3px;width:64px;border-radius:1px;
  background:linear-gradient(90deg,#323392 0 46px,transparent 46px 52px,#01A3DD 52px)}
.prose .lg-col h3{font-size:1.06rem;margin:0 0 .8rem;color:var(--teal)}
.prose .lg-col ul,.lg-col ul{list-style:none!important;margin:0;padding:0;display:flex;flex-direction:column}
.lg-col li{padding:.42rem 0;font-size:.96rem;line-height:1.45;color:var(--muted)}
.lg-col li+li{border-top:1px solid rgba(21,35,59,.07)}
.prose-content .lg-grid .lg-col li a,.lg-col li a{color:#0E6E9E;font-weight:600;text-decoration:none!important;text-underline-offset:0}
.prose-content .lg-col a:hover{color:#323392}
@media(max-width:900px){.lg-grid{grid-template-columns:1fr;gap:1.6rem}}
/* RESOURCES (p14931, 2026-08-10): resource image cards, three across */
.rs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem);margin-top:1.8rem}
.rs-grid>p{display:contents}      /* wpautop wraps the inline card-links in <p>s — dissolve them */
.rs-grid>p:empty,.rs-grid>br{display:none}  /* …and its <br>s would each eat a grid cell */
.rs-card.rs-tall img{aspect-ratio:3/4}      /* book/report covers read better tall */
.rs-pubs{grid-template-columns:repeat(3,minmax(0,1fr));max-width:66%;margin-inline:auto;column-gap:clamp(2rem,4.5vw,3.6rem)}  /* 2/3 scale cards, wider gutters, centered (Hilwyn 2026-08-10) */
.rs-pubs .rs-card b{text-align:center}
@media(max-width:900px){.rs-pubs{max-width:100%}}
.rs-card{display:flex;flex-direction:column;background:#fff;border-radius:9px;overflow:hidden;border:1px solid rgba(21,35,59,.07)}
.rs-card img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;display:block}
.rs-card b{padding:1rem 1.2rem 1.1rem;font-family:var(--sans);font-weight:700;font-size:1rem;color:var(--teal);line-height:1.35;transition:color .18s ease}
.rs-card:hover b{color:#0E86BD}
@media(max-width:900px){.rs-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rs-grid{grid-template-columns:1fr}}
/* TENDERS (p13894, 2026-08-10): repeatable notice plates — never more than 2 per
   row, wide gutters so notices read as distinct instruments; comms adds a tender
   by copying a .tn-item block in the override. */
.tn-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.8rem,4vw,3rem);margin-top:clamp(1.6rem,3vw,2.4rem);align-items:start}
.tn-item{background:#fff;border:1px solid rgba(21,35,59,.07);border-radius:9px;padding:clamp(1.6rem,3vw,2.3rem)}
.tn-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.55rem}
.tn-head .ww-kicker{margin-bottom:0}
.tn-ref{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#fff;background:#323392;border-radius:3px;padding:.32rem .65rem;white-space:nowrap}
.prose .tn-item h2{font-size:clamp(1.35rem,2vw,1.7rem);margin:0 0 .7rem;color:var(--teal)}
.tn-item .sl-rows{margin-top:.9rem;margin-bottom:1.1rem}
.prose .tn-item p{max-width:none}
@media(max-width:900px){.tn-list{grid-template-columns:1fr}}
.tn-none{grid-column:1/-1;margin:0;padding:1.4rem 1.6rem;background:var(--ice);border:1px solid var(--ice-line);border-radius:var(--radius);color:var(--muted)} /* empty state when no tender is open (E14, round 3) */
/* Trust Fund board portrait roll (p24, 2026-08-10): trustees as a figure grid,
   names + station beneath — photos proxied from the live media library */
.tf-board{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.2vw,1.8rem);margin:1.2rem 0 0}
@media(max-width:560px){.tf-board{grid-template-columns:repeat(2,1fr)}}
.tf-board figure{margin:0}
.tf-board img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;border-radius:9px;display:block}
.tf-board figcaption{margin-top:.55rem;font-size:.9rem;line-height:1.35;color:var(--teal);font-weight:600}
.tf-board figcaption span{display:block;margin-top:.18rem;font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#323392}
/* rectangular specimen (publication covers): no circular halo, plate edge instead */
.sl-fig-rect::before{content:none}
.sl-fig-rect img{max-width:none;border-radius:9px;border:1px solid rgba(21,35,59,.1)}
.sl-fig-book img{max-width:264px;margin-inline:auto;border:0;border-radius:0}  /* small-source book covers: cap the upscale; the 3-D cover art needs no frame */
/* quiet back-link above a plate */
a.ccj-back{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:600;font-size:.95rem;color:#0E6E9E;text-decoration:none!important;transition:color .18s ease}
.prose-content>p:has(>a.ccj-back){margin:0 0 .9rem}
/* a page that opens with a back link doesn't want the full 70px band opening above it
   (matches any wrapper: .wrap prose pages and .wrap-wide table pages alike) */
.band:has(a.ccj-back){padding-top:clamp(1.1rem,2vw,1.6rem);padding-bottom:clamp(2.4rem,4.5vw,3.4rem)}
.wrap-wide>p:has(>a.ccj-back){margin:0 0 .9rem}
a.ccj-back::before{content:"\2190";transition:transform .18s ease}
a.ccj-back:hover{color:#323392}
a.ccj-back:hover::before{transform:translateX(-3px)}
/* G7 (2026-09-22): foot-of-article return link on posts (single.php) — same voice as a.ccj-back, but
   kept out of the .band:has(a.ccj-back) top-padding rule since it sits at the bottom. */
.post-back{margin-top:2.8rem;padding-top:1.3rem;border-top:1px solid rgba(19,41,75,.14)}
.post-back a{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:600;font-size:.95rem;color:#0E6E9E;text-decoration:none}
.post-back a::before{content:"\2190";transition:transform .18s ease}
.post-back a:hover{color:#323392}.post-back a:hover::before{transform:translateX(-3px)}
/* First Ten Years plate (p6701): narrow cover column, record top-aligned */
.page-id-6701 .sl-inplate{grid-template-columns:minmax(0,20%) minmax(0,1fr);align-items:start}
.page-id-6701 .sl-record{align-self:start}
/* in-column plate for railed pages (no full bleed): white panel, same anatomy */
.sl-inplate{background:#fff;border:1px solid rgba(21,35,59,.07);border-radius:9px;padding:clamp(1.6rem,3vw,2.4rem);display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:clamp(1.6rem,3.2vw,2.8rem);align-items:center;margin-bottom:clamp(1.8rem,3.5vw,2.6rem)}
.sl-inplate .sl-rows{margin-top:1.2rem}
.sl-inplate.sl-solo{grid-template-columns:1fr}  /* no artwork — record only */
/* Full-width About pages: wider 90ch measure (Hilwyn 2026-08-10; ACE first, then Moot + Code + FAQ) */
.page-id-13890 .prose p,.page-id-28893 .prose p,.page-id-967 .prose p,.page-id-26 .prose p{max-width:90ch}
/* ---- JUDGES CVP skins (p12 comparison candidates, Hilwyn 2026-08-10; panel keys
   judges-view-current / judges-view-navy / judges-view-ledger — winner's class then
   wraps both judges views). GOTCHA: CVP prints per-view inline CSS on
   #pt-cv-view-b3e391954t with !important (justify, cyan readmore, centered thumb) —
   the doubled-ID prefix out-specifies it. Winner rollout: repeat the prefix for the
   past-judges view id 4772b8d739. */
.jv-skin :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739){text-align:left!important}
.jv-skin :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) .pt-cv-content,
.jv-skin :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) .pt-cv-content p{text-align:left!important;max-width:none;color:#2c3a4d;line-height:1.66;font-size:.98rem}
.jv-skin :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) .pt-cv-content p{margin:0 0 .9rem}
.jv-skin :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) .pt-cv-content-item{display:block;border:0;box-shadow:none;padding:0}
.jv-skin :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) .panel-heading{display:flex;align-items:center;gap:1rem;border:0;border-radius:0}
.jv-skin :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) .panel-title{flex:1;text-decoration:none!important;font-family:var(--sans);font-weight:700!important;line-height:1.3}
.jv-skin :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) .panel-body{display:flex;padding:0;align-items:stretch}
.jv-skin :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) .pt-cv-href-thumbnail{flex:0 0 min(300px,32%);margin:0!important;float:none;display:block!important;clear:none!important;overflow:hidden}
.jv-skin :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) .pt-cv-thumbnail{width:100%!important;height:100%!important;min-height:100%;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;object-fit:cover;object-position:top;margin:0!important;float:none!important;display:block!important}
.jv-skin :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) .pt-cv-colwrap{flex:1;min-width:0;padding:1.35rem 1.6rem 1.4rem}
.jv-skin :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) .pt-cv-rmwrap{margin-top:.4rem}
.jv-skin :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) a.pt-cv-readmore{background:none!important;border:0!important;padding:0!important;color:#0E6E9E!important;font-weight:600;font-size:.96rem;border-radius:0;box-shadow:none!important;text-decoration:none!important;text-shadow:none!important}
.jv-skin :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) a.pt-cv-readmore:hover{color:#323392!important;background:none!important}
.jv-skin a.pt-cv-readmore::after{content:"\2192";margin-left:.45rem;display:inline-block;transition:transform .18s ease}
.jv-skin a.pt-cv-readmore:hover::after{transform:translateX(3px)}
/* Option A — banded cards: Court-Navy name band, split rule, white card */
.jv-a :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) .pt-cv-content-item{background:#fff;border-radius:9px;overflow:hidden;margin-bottom:1.6rem}
.jv-a :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) .panel-heading{background:#13294B;padding:0 1.3rem 0 0}
.jv-a :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) .panel-title{color:#fff!important;padding:1rem 0 1rem 1.6rem;font-size:1.13rem}
.jv-a :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) .panel-title::after{content:"";display:block;width:58px;height:3px;border-radius:1px;margin-top:.5rem;background:linear-gradient(90deg,var(--gold) 0 42px,transparent 42px 47px,#01A3DD 47px)}
.jv-a :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) .panel-heading .pull-right{color:#8FD8F8}
/* Option B — ledger register: ruled name rows, white plate opens beneath */
.jv-b :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) .pt-cv-content-item{background:transparent;border-radius:0;margin:0;border-top:1px solid rgba(21,35,59,.16)}
.jv-b :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) .panel-heading{padding:1rem .2rem;background:none}
.jv-b :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) .panel-title{color:var(--teal)!important;font-size:1.08rem}
.jv-b :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) .panel-heading .pull-right{color:#323392}
.jv-b :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) .panel-collapse.in,
.jv-b :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) .panel-collapse.collapsing{background:#fff;border-radius:9px;overflow:hidden;margin:.35rem 0 1.5rem}
@media(max-width:760px){
  .jv-skin :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) .panel-body{flex-direction:column}
  .jv-skin :is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739):is(#pt-cv-view-b3e391954t,#pt-cv-view-4772b8d739) .pt-cv-href-thumbnail{flex:none;max-height:340px}
}
/* generic LEDGER ACCORDION (promoted from the FAQ treatment, 2026-08-10):
   wrap long collapsible sections in <div class="acc-ledger"> — ruled rows,
   ink stays ink when open (no legacy navy flip). */
.prose .acc-ledger details.acc{background:none;border-radius:0;padding:0;margin:0;max-width:90ch;border-top:1px solid rgba(21,35,59,.14)}
.prose .acc-ledger details.acc:last-of-type{border-bottom:1px solid rgba(21,35,59,.14)}
.prose .acc-ledger details.acc>summary{padding:1.15rem .15rem;font-size:1.1rem;color:var(--teal)}
.prose .acc-ledger details.acc>*:not(summary){margin:0 0 1.05rem;max-width:80ch}
.prose .acc-ledger details.acc[open]{background:none}
.prose .acc-ledger details.acc[open]>summary,.prose .acc-ledger details.acc[open]>summary:hover{color:var(--teal)}
.prose .acc-ledger details.acc[open]>summary::after{color:#323392}
.prose .acc-ledger details.acc h3{font-size:1.02rem;margin:1.2rem 0 .5rem;color:var(--teal)}
/* ---- FAQ (p26, 2026-08-10): grouped question ledger — themed groups under split-rule
   heads, accordions as ruled rows instead of ivory pills. ---- */
.faq-group{margin-top:clamp(2.4rem,4.5vw,3.4rem)}
.page-id-26 .prose .faq-group h2{margin:0 0 1.1rem}
.page-id-26 .prose .faq-group h2::after{content:"";display:block;width:64px;height:3px;border-radius:1px;margin-top:.65rem;
  background:linear-gradient(90deg,#323392 0 46px,transparent 46px 52px,#01A3DD 52px)}
.page-id-26 .prose details.acc{background:none;border-radius:0;padding:0;margin:0;max-width:90ch;border-top:1px solid rgba(21,35,59,.14)}
.page-id-26 .prose .faq-group details.acc:last-of-type{border-bottom:1px solid rgba(21,35,59,.14)}
.page-id-26 .prose details.acc>summary{padding:1.15rem .15rem;font-size:1.05rem;color:var(--teal)}
/* the legacy .acc open-state goes navy/white — the FAQ ledger stays ink on parchment */
.page-id-26 .prose details.acc[open]{background:none}
.page-id-26 .prose details.acc[open]>summary,.page-id-26 .prose details.acc[open]>summary:hover{color:var(--teal)}
.page-id-26 .prose details.acc[open]>summary::after{color:#323392}
.page-id-26 .prose details.acc>*:not(summary){margin:0 0 1.15rem;max-width:80ch}
.page-id-26 .prose details.acc ul.bullets{padding-left:1.2rem}
@media(min-width:901px){.page-id-13890 .prose-content>.sl-rows{max-width:80%}}
/* CTA band — reusable "learn more" close: white type on Logo Royal */
.ccj-cta{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;background:#323392;color:#fff;border-radius:9px;padding:clamp(1.5rem,2.6vw,2rem) clamp(1.5rem,3vw,2.2rem);margin-top:2.4rem}
.ccj-cta>*{position:relative;z-index:1}
/* under-review variant: ghost line-art anchored right — document lines under a
   magnifying lens, in the sketch identity's ink-on-ground language (Hilwyn 2026-08-10) */
.ccj-cta-review::after{content:"";position:absolute;z-index:0;right:clamp(.6rem,3vw,2.6rem);top:50%;transform:translateY(-50%);
  width:min(300px,32%);aspect-ratio:220/170;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 170' fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cg stroke-opacity='.28' stroke-width='2.5'%3E%3Cpath d='M6 18h208'/%3E%3Cpath d='M6 38h174'/%3E%3Cpath d='M6 58h199'/%3E%3Cpath d='M6 78h154'/%3E%3Cpath d='M6 98h208'/%3E%3Cpath d='M6 118h184'/%3E%3Cpath d='M6 138h164'/%3E%3Cpath d='M6 158h114'/%3E%3C/g%3E%3Ccircle cx='138' cy='74' r='44' stroke-opacity='.55' stroke-width='3.5'/%3E%3Cpath d='M170 106l36 36' stroke-opacity='.55' stroke-width='5'/%3E%3C/svg%3E") right center/contain no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent 0%,#000 38%);mask:linear-gradient(90deg,transparent 0%,#000 38%)}
@media(max-width:760px){.ccj-cta-review::after{content:none}}
/* calendar variant: ghost month grid with a gold diamond on one day (Court Terms close) */
.ccj-cta-cal::after{content:"";position:absolute;z-index:0;right:clamp(.6rem,3vw,2.6rem);top:50%;transform:translateY(-50%);
  width:min(280px,30%);aspect-ratio:220/170;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 170' fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cg stroke-opacity='.5' stroke-width='3.5'%3E%3Crect x='14' y='26' width='192' height='130' rx='10'/%3E%3Cpath d='M60 12v28M160 12v28M14 62h192'/%3E%3C/g%3E%3Cg stroke-opacity='.28' stroke-width='2.5'%3E%3Cpath d='M62 62v94M110 62v94M158 62v94M14 93h192M14 124h192'/%3E%3C/g%3E%3Cg stroke-opacity='.75' stroke-width='3'%3E%3Cpath d='M134 100.5l-10 8 10 8 10-8z'/%3E%3C/g%3E%3C/svg%3E") right center/contain no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent 0%,#000 38%);mask:linear-gradient(90deg,transparent 0%,#000 38%)}
@media(max-width:760px){.ccj-cta-cal::after{content:none}}
/* learn-more variant: ghost open book, same ink-line language (Hilwyn 2026-08-10) */
.ccj-cta-learn::after{content:"";position:absolute;z-index:0;right:clamp(.6rem,3vw,2.6rem);top:50%;transform:translateY(-50%);
  width:min(300px,32%);aspect-ratio:220/170;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 170' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke-opacity='.5' stroke-width='3.5'%3E%3Cpath d='M110 40 C 82 22, 40 22, 16 34 L16 136 C 40 124, 82 124, 110 144'/%3E%3Cpath d='M110 40 C 138 22, 180 22, 204 34 L204 136 C 180 124, 138 124, 110 144'/%3E%3Cpath d='M110 40V144'/%3E%3C/g%3E%3Cg stroke-opacity='.28' stroke-width='2.5'%3E%3Cpath d='M32 54c22-7 44-8 64-3'/%3E%3Cpath d='M32 74c22-7 44-8 64-3'/%3E%3Cpath d='M32 94c22-7 44-8 64-3'/%3E%3Cpath d='M32 114c16-5 30-6 44-4'/%3E%3Cpath d='M124 51c20-5 42-4 64 3'/%3E%3Cpath d='M124 71c20-5 42-4 64 3'/%3E%3Cpath d='M124 91c20-5 42-4 64 3'/%3E%3Cpath d='M124 111c14-3 28-3 44 1'/%3E%3C/g%3E%3C/svg%3E") right center/contain no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent 0%,#000 38%);mask:linear-gradient(90deg,transparent 0%,#000 38%)}
@media(max-width:760px){.ccj-cta-learn::after{content:none}}
.ccj-cta-kicker{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8FD8F8}
.prose .ccj-cta p{color:#fff;margin:0;max-width:60ch;font-size:1.05rem;line-height:1.6}
.prose-content .ccj-cta a.link{display:inline-flex;color:#fff;font-weight:600;margin-top:.35rem;text-decoration:none!important;border-bottom:2px solid rgba(255,255,255,.45);padding-bottom:.2rem;transition:border-color .18s ease}
.prose-content .ccj-cta a.link:hover{border-bottom-color:#fff;color:#fff}
.ccj-cta a.link .arrow{transition:transform .18s ease}
.ccj-cta a.link:hover .arrow{transform:translateX(3px)}
.sl-side{display:flex;flex-direction:column;gap:1.1rem;align-self:start}
.sl-side .docgrid{margin:0;--gap-docs:0px}
.sl-side .doc-card{border:1px solid rgba(21,35,59,.1)}  /* the white plate needs an edge on the white card */
.sl-side p{margin:0}
/* bare download link: icon + words, no card (SVG via CSS mask — kses strips inline svg) */
.ccj-dl{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);font-weight:600;color:#323392;line-height:1.4}
.ccj-dl::before{content:"";flex:none;width:19px;height:19px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v11M7 10l5 5 5-5M4 20h16'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v11M7 10l5 5 5-5M4 20h16'/></svg>") center/contain no-repeat}
.prose-content a.ccj-dl{text-decoration:none!important;transition:color .18s ease}
.prose-content a.ccj-dl:hover{color:#0E86BD}
/* composed download card: royal ground, ringed icon, kicker + title — fit-content, not a bar */
.ccj-dlcard{display:inline-flex;align-items:center;gap:1.1rem;background:#323392;color:#fff;border-radius:9px;
  padding:1.1rem 1.7rem 1.1rem 1.25rem;max-width:100%;transition:background .18s ease;text-decoration:none!important}
.ccj-dlcard:hover{background:#282A7E}
.ccj-dlcard-ico{flex:none;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);position:relative;transition:background .18s ease}
.ccj-dlcard-ico::before{content:"";position:absolute;inset:0;margin:auto;width:21px;height:21px;background:#fff;transition:background .18s ease;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v11M7 10l5 5 5-5M4 20h16'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v11M7 10l5 5 5-5M4 20h16'/></svg>") center/contain no-repeat}
.ccj-dlcard:hover .ccj-dlcard-ico{background:#fff}
.ccj-dlcard:hover .ccj-dlcard-ico::before{background:#323392}
.ccj-dlcard-txt{display:flex;flex-direction:column;gap:.18rem;min-width:0}
/* action variant: arrow glyph instead of the download tray; cyan alternate ground */
.ccj-dlcard-go .ccj-dlcard-ico::before{
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat}
.ccj-dlcard-cyan{background:#0186BD}
.ccj-dlcard-cyan:hover{background:#0A6E99}
.ccj-dlcard-cyan:hover .ccj-dlcard-ico::before{background:#0186BD}
.ccj-dlcard-cyan .ccj-dlcard-txt i{color:#CFEFFC}
.ef-actions{display:flex;gap:clamp(1rem,2vw,1.5rem);flex-wrap:wrap;margin:1.8rem 0 .4rem}
.ccj-dlcard-txt i{font-style:normal;font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#8FD8F8}
.ccj-dlcard-txt b{font-family:var(--sans);font-weight:700;font-size:1.08rem;line-height:1.3;color:#fff}
@media(max-width:900px){.sl-inplate{grid-template-columns:1fr;gap:1.4rem}}
@media(max-width:900px){
  .sl-grid{grid-template-columns:1fr;gap:2.2rem}
  .sl-fig img{max-width:340px}
  .sl-row{grid-template-columns:1fr;gap:.3rem}
  .sl-cols{grid-template-columns:1fr;gap:1.2rem}
}
.ww-bleed{width:100vw;margin-left:calc(50% - 50vw)}
.ww-band{font-family:var(--sans)}
.ww-kicker{display:block;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#323392;margin-bottom:.6rem}
/* 40% title column + 60% body, packed close */
.ww-cols{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:clamp(1.6rem,3vw,3rem);align-items:center;padding-block:clamp(3rem,7vw,5.5rem)}
/* mission: the retired graphic sits faded on the right, swept into the band blue from the left */
.ww-mission{background:
  linear-gradient(90deg,#CFEAF8 0%,#CFEAF8 40%,rgba(207,234,248,.86) 58%,rgba(207,234,248,.55) 76%,rgba(207,234,248,.38) 100%),
  url("img/ww-mission-bg.jpg") right center/cover no-repeat,
  linear-gradient(135deg,#E9F6FD 0%,#C2E7F8 55%,#A5DCF5 100%)}
/* vision: mirrored — artwork faded on the left, swept into the band CREAM/GOLD from the
   right (pink replaced per the approved blue/gold/cream direction, 2026-07-21 — E1) */
/* mission | vision | values meet flush; a brand hairline with a floating gold diamond
   marks each seam (2026-07-21) — the line IS the divider, straddling both bands */
.ww-vision,.ww-values{position:relative}
.ww-vision::before,.ww-values::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;transform:translateY(-50%);background:linear-gradient(90deg,transparent 0%,#323392 32%,var(--base-gold) 47%,var(--base-gold) 53%,#01A3DD 68%,transparent 100%);pointer-events:none}
.ww-vision::after,.ww-values::after{content:"";position:absolute;left:50%;top:0;width:11px;height:11px;transform:translate(-50%,-50%) rotate(45deg);background:var(--base-gold);box-shadow:0 0 0 2.5px #fff;pointer-events:none}
.ww-vision{margin-top:0;background:
  linear-gradient(270deg,#F2E8D2 0%,#F2E8D2 40%,rgba(242,232,210,.86) 58%,rgba(242,232,210,.55) 76%,rgba(242,232,210,.38) 100%),
  url("img/ww-vision-bg.jpg") left center/cover no-repeat,
  linear-gradient(135deg,#F8F1E0 0%,#EFDDB4 55%,#E4C98E 100%)}
.prose .ww-band h2{font-size:clamp(2.3rem,4.6vw,3.6rem);color:var(--teal);margin:0;line-height:1.05}  /* same ink as the Timeline and Jurisdiction heading — was Logo Royal #323392 (Hilwyn 2026-08-10) */
.ww-body p{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.55;color:#13294B;margin:0;max-width:none}
.ww-vision .ww-body p{font-size:clamp(1.45rem,2.4vw,1.95rem)}
@media(min-width:901px){
  .ww-rev{grid-template-columns:minmax(0,1fr) minmax(0,40%)}
  .ww-rev .ww-title{order:2;justify-self:end;text-align:right}
}
/* Mission + Vision HORIZONTAL · GRADIENT BANDS (comparison candidate, back by request
   Hilwyn 2026-08-10; panel key ww-mv-side-grad): one full-bleed row, each half keeping
   its original band gradient; the brand hairline + gold diamond turn vertical at the
   seam; mission column left-aligns to the wrap column. */
.ww-mvs{position:relative;display:grid;grid-template-columns:1fr 1fr}
/* top seam: same brand hairline + gold diamond as the values-band seam below (Hilwyn 2026-08-10) */
.ww-mvs::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;transform:translateY(-50%);background:linear-gradient(90deg,transparent 0%,#323392 32%,var(--base-gold) 47%,var(--base-gold) 53%,#01A3DD 68%,transparent 100%);pointer-events:none;z-index:1}
.ww-mvs::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;transform:translate(-50%,-50%) rotate(45deg);background:var(--base-gold);box-shadow:0 0 0 2.5px #fff;pointer-events:none;z-index:1}  /* diamond rides the MIDDLE of the vertical divider, not the top seam (Hilwyn 2026-08-10) */
.ww-mvs .ww-mvs-cell{display:flex;flex-direction:column;justify-content:center;gap:1.1rem;padding:clamp(2.6rem,5vw,4.25rem) clamp(1.4rem,4vw,4rem)}
.ww-mvs .ww-mission.ww-mvs-cell{padding-left:calc(max((100vw - var(--maxw)) / 2, 0px) + clamp(1.25rem,4vw,2.5rem))}
/* lighter halves (Hilwyn 2026-08-10): the band stacks restated with a white veil on top,
   scoped here so the stacked variant keeps full strength */
.ww-mvs .ww-mission.ww-mvs-cell{background:
  linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),
  linear-gradient(90deg,#CFEAF8 0%,#CFEAF8 40%,rgba(207,234,248,.86) 58%,rgba(207,234,248,.55) 76%,rgba(207,234,248,.38) 100%),
  url("img/ww-mission-bg.jpg") right center/cover no-repeat,
  linear-gradient(135deg,#E9F6FD 0%,#C2E7F8 55%,#A5DCF5 100%)}
.ww-mvs .ww-vision.ww-mvs-cell{background:
  linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),
  linear-gradient(270deg,#F2E8D2 0%,#F2E8D2 40%,rgba(242,232,210,.86) 58%,rgba(242,232,210,.55) 76%,rgba(242,232,210,.38) 100%),
  url("img/ww-vision-bg.jpg") left center/cover no-repeat,
  linear-gradient(135deg,#F8F1E0 0%,#EFDDB4 55%,#E4C98E 100%)}
/* middle divider = vertical hairline on the vision cell's left edge, NO diamond (Hilwyn 2026-08-10) */
.ww-mvs .ww-vision.ww-mvs-cell::before{left:0;right:auto;top:0;bottom:0;height:auto;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,transparent 0%,#323392 32%,var(--base-gold) 47%,var(--base-gold) 53%,#01A3DD 68%,transparent 100%)}
.ww-mvs .ww-vision::after{display:none}  /* the stacked layout's seam diamond */
.ww-mvs .ww-kicker{margin-bottom:0}
.prose .ww-mvs h2{font-size:clamp(2rem,3.2vw,2.8rem)}
.prose .ww-mvs .ww-body p{font-size:clamp(1.15rem,1.55vw,1.45rem)}
.ww-mvs p:empty{display:none}  /* wpautop strays would hijack a grid column */
/* SOLID LOGO-BLUES variant (comparison candidate, Hilwyn 2026-08-10; panel key
   ww-mv-side-solid): same horizontal anatomy, halves in the logo's two primary blues —
   navy Reflex #2C2C6C | Logo Royal #323392 — with white text; divider re-tinted for dark. */
.ww-mvs.ww-mvs-solid .ww-mission.ww-mvs-cell{background:#2C2C6C}
.ww-mvs.ww-mvs-solid .ww-vision.ww-mvs-cell{background:#323392}
.ww-mvs-solid .ww-kicker{color:#C5CFDA}
.prose .ww-mvs-solid h2{color:#fff}
.prose .ww-mvs-solid .ww-body p{color:#fff}
.ww-mvs-solid .ww-vision.ww-mvs-cell::before{background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.55) 32%,var(--base-gold) 47%,var(--base-gold) 53%,#01A3DD 68%,transparent 100%)}
div:has(>.ww-mvs.ww-mvs-solid)+.ww-values::after{display:none}  /* the values seam below keeps its line, loses its diamond, while the solid variant sits above it */
/* BOXED-WITH-A-GAP variant (comparison candidate, Hilwyn 2026-08-10; panel key
   ww-mv-cards): same two statements, but as a pair of rounded cards on the page's
   parchment instead of a full-bleed band — no seams, no divider; the gap does the
   separating. Card fills are the lightened band gradients, art dropped so the
   boxes read clean at card size. */
/* flush to the title band above, breathing room below; white ground painted full-bleed by
   ::before so the CARDS can still align to the page-title column (Hilwyn 2026-08-10) */
.ww-mvcards{position:relative;padding:0 0 clamp(2.6rem,5vw,4rem)}
.ww-mvcards::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;background:#fff}
.ww-mvcards-grid{position:relative;z-index:1}
.ww-mvcards-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.1rem,2.2vw,1.9rem);padding-inline:0}  /* nested .wrap would double the side padding — 0 keeps the cards flush with the page title column (Hilwyn 2026-08-10) */
.ww-mvcard{display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:clamp(1.7rem,3vw,2.6rem);border-radius:9px;border:1px solid rgba(21,35,59,.07)}
.ww-mvcard.ww-vision::before,.ww-mvcard.ww-vision::after{content:none}  /* the stacked layout's seam line + diamond don't belong on a card */
/* one seal colour per card — Logo Royal (ring/monogram) and Logo Cyan (scales) */
.ww-mvcard{border-color:transparent}
.ww-mvcard.ww-mission{background:#323392}
.ww-mvcard.ww-vision{background:#01A3DD}
.ww-mvcards .ww-kicker{margin-bottom:0;color:rgba(255,255,255,.82)}
.prose .ww-mvcards h2{font-size:clamp(1.9rem,3vw,2.6rem);color:#fff;margin:0;line-height:1.05}
.prose .ww-mvcards .ww-body p{font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.55;color:#fff;margin:0;max-width:none}
.ww-mvcards p:empty{display:none}  /* wpautop strays would hijack a grid column */
@media(max-width:900px){.ww-mvcards-grid{grid-template-columns:1fr}}
/* SKETCH-ON-WHITE variant (comparison candidate, Hilwyn 2026-08-10; panel key
   ww-mv-sketch): the same white full-bleed ground, with the HQ building sketch
   ghosted into it — statements sit as plain columns so the drawing reads through. */
.ww-mvsketch{position:relative;padding:clamp(2.4rem,4.5vw,3.6rem) 0 clamp(2.6rem,5vw,4rem)}
.ww-mvsketch::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;background:#fff}
.ww-mvsketch::after{content:"";position:absolute;right:calc(50% - 50vw);bottom:0;width:min(720px,58%);height:100%;
  background:url("img/ccj-hq-sketch.png") right bottom/contain no-repeat;opacity:.13;pointer-events:none}
.ww-mvsketch-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.5rem);padding-inline:0}
.ww-mvsketch-grid>div{min-width:0}
.ww-mvsketch .ww-kicker{margin-bottom:0}
.prose .ww-mvsketch h2{font-size:clamp(1.9rem,3vw,2.6rem);color:var(--teal);margin:.35rem 0 .7rem;line-height:1.05}
.prose .ww-mvsketch .ww-body p{font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.55;color:#13294B;margin:0;max-width:none}
.ww-mvsketch p:empty{display:none}  /* wpautop strays would hijack a grid column */
@media(max-width:900px){
  .ww-mvsketch-grid{grid-template-columns:1fr;gap:1.8rem}
  .ww-mvsketch::after{width:82%;opacity:.09}
}
@media(max-width:900px){
  .ww-mvs{grid-template-columns:1fr}
  .ww-mvs .ww-vision.ww-mvs-cell::before{display:none}  /* stacked columns: no vertical divider; top seam stays */
}
/* Mission + Vision merged INTO the Core Values band (Hilwyn 2026-08-10; panel key
   ww-mv-side): two plain columns on the band's own background — no gradients, no
   boxes — above the Core Values head. */
.ww-mvrow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.5rem);margin-bottom:clamp(2.4rem,4.5vw,3.6rem)}
.ww-mvrow>div{min-width:0}
.ww-mvrow p:empty{display:none}  /* wpautop strays would hijack a grid column */
@media(max-width:900px){.ww-mvrow{grid-template-columns:1fr;gap:1.8rem}}
/* values: watercolor from the JUSTICE graphic as a whisper backdrop, fading out down the page */
.ww-values{margin-top:0;background:
  linear-gradient(180deg,rgba(252,247,234,.5) 0%,rgba(250,243,226,.85) 42%,#F6ECD4 70%,#F4E8CB 100%),
  url("img/ww-values-bg.jpg") center top/cover no-repeat,
  linear-gradient(160deg,#FCF7EA 0%,#F4E8CB 100%);padding-block:clamp(3rem,6vw,5rem)}
.prose .ww-values h2,.prose .ww-history h2{font-size:clamp(2rem,3.6vw,2.8rem);margin:.15rem 0 .35rem}
.ww-note{color:var(--muted);margin:0 0 2.3rem;font-size:1.02rem}
.ww-vlist{display:grid;gap:1.05rem}
.ww-v{display:grid;grid-template-columns:64px 1fr;gap:1.3rem;align-items:start;background:rgba(255,255,255,.72);border-radius:9px;padding:1.2rem 1.5rem}
.ww-v>p:empty{display:none}   /* wpautop injects a stray <p> that would hijack the 1fr column */
.ww-v>div{min-width:0}
.ww-ltr{font-family:var(--serif);font-weight:700;font-size:2.7rem;line-height:1;color:#323392;text-align:center}
.ww-v h3{font-family:var(--sans);font-weight:700;font-size:1.06rem;color:#13294B;margin:0 0 .35rem}
.ww-v p{font-size:.97rem;line-height:1.65;color:#3A4757;margin:0;max-width:none}
.ww-history{background:linear-gradient(150deg,#0E2140 0%,#13294B 60%,#1B3A66 100%);color:#fff;padding-block:clamp(3rem,6vw,5rem) clamp(3.2rem,6vw,5.2rem)}
.ww-history .ww-kicker{color:#8FD8F8}
.prose .ww-history h2{color:#fff}
.ww-history .ww-note{color:var(--muted-on-dark);margin:0}
.ww-hist-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:2.4rem}
.ww-tl-nav{display:flex;gap:.7rem;flex:none}
.ww-tl-btn{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .18s ease,color .18s ease,border-color .18s ease}
.ww-tl-btn:hover{background:#fff;border-color:#fff;color:#13294B}
.ww-tl-btn svg{width:19px;height:19px}
.ww-tl{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(270px,26vw,330px);gap:2.2rem;margin:0;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:.6rem max(1.25rem,calc(50vw - 620px + 2.5rem)) 1.5rem;scroll-padding-left:max(1.25rem,calc(50vw - 620px + 2.5rem))}  /* snap respects the wrap-aligned inset, else load snaps card 1 to the raw edge */
.ww-tl li{scroll-snap-align:start;position:relative;border-top:2px solid rgba(255,255,255,.22);padding-top:1.5rem}
.ww-tl li::before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:#E0A526}
.ww-yr{display:block;font-family:var(--serif);font-weight:700;font-size:2rem;line-height:1;color:#E0A526;margin-bottom:.65rem}
.ww-tl h3{font-family:var(--sans);font-weight:700;font-size:1.02rem;line-height:1.4;color:#fff;margin:0 0 .5rem}
.ww-tl p{font-family:var(--sans);font-size:.9rem;line-height:1.65;color:var(--muted-on-dark);margin:0;max-width:none}
.ww-tl::-webkit-scrollbar{height:8px}
.ww-tl::-webkit-scrollbar-track{background:rgba(255,255,255,.08);border-radius:4px}
.ww-tl::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:4px}
.ww-jur{max-width:75%;margin-top:3.5rem;background:#F6F4F0;border:1px solid rgba(21,35,59,.07);border-radius:9px;padding:clamp(1.6rem,3vw,2.6rem)}  /* padded box one tint lighter than the parchment band #eeeae2 (Hilwyn 2026-08-10) */
.ww-jur p{max-width:none}
@media(max-width:900px){
  .ww-cols{grid-template-columns:1fr;gap:1.3rem;padding-block:2.6rem}
  .ww-v{grid-template-columns:48px 1fr;padding:1.05rem 1.15rem}
  .ww-ltr{font-size:2.1rem}
  .ww-jur{max-width:none}
}

/* ---------- Careers page: three color-block columns (page 15772) ---------- */
.cr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem}
.cr-card{--bg:#323392;height:100%;display:flex;flex-direction:column;gap:.85rem;background:var(--bg);color:#fff;border-radius:5px;padding:2.4rem 2.2rem 2.1rem;min-height:330px;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,filter .22s ease}
.cr-cell:nth-child(2) .cr-card{--bg:#0186BD}
.cr-cell:nth-child(3) .cr-card{--bg:#13294B}
.cr-card:hover{transform:translateY(-5px);box-shadow:0 22px 44px -14px rgba(19,41,75,.5);filter:brightness(1.08)}
.cr-kicker{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.cr-title{display:block;font-family:var(--serif);font-weight:600;letter-spacing:-.01em;color:#fff;font-size:1.6rem;line-height:1.15}
.cr-desc{display:block;font-family:var(--sans);font-size:.95rem;line-height:1.6;color:rgba(255,255,255,.85);flex:1}
.cr-link{font-family:var(--sans);display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.95rem;color:#fff}
.cr-link svg{width:16px;height:16px;transition:transform .2s ease}
.cr-card:hover .cr-link svg{transform:translateX(4px)}
@media(max-width:900px){.cr-grid{grid-template-columns:1fr}.cr-card{min-height:0}}
.prose ul.bullets li{list-style:disc;margin-bottom:.45rem;padding-left:.25rem}
.callout{background:var(--stone);border-left:4px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0;padding:1.25rem 1.5rem;margin:0 0 1.5rem}
.callout strong{color:var(--teal)}

/* ---------- steps (process) ---------- */
.steps{counter-reset:step;display:grid;gap:1rem;margin:1.25rem 0}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-s);align-items:start;background:var(--white);border:1px solid var(--stone-line);border-radius:var(--radius);padding:var(--pad-card);box-shadow:var(--shadow)}
.step::before{counter-increment:step;content:counter(step);width:38px;height:38px;border-radius:50%;background:var(--teal);color:#fff;font-family:var(--serif);font-weight:600;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.step h3{font-size:1.1rem;color:var(--teal);margin-bottom:.25rem}
.step p{color:var(--muted);font-size:.96rem;max-width:64ch}

/* ---------- cards / tiles ---------- */
.cardgrid{display:grid;gap:var(--gap-grid)}
.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}
.tile{background:var(--white);border:1px solid var(--stone-line);border-radius:var(--radius);padding:var(--pad-card);box-shadow:var(--shadow);transition:.18s;display:flex;flex-direction:column;gap:.5rem}
.tile:hover{transform:translateY(-3px);border-color:var(--teal)}
.tile .ico{width:36px;height:36px;color:var(--blue);margin-bottom:.3rem}
.tile h3{font-size:1.18rem;color:var(--teal)}
.tile p{font-size:.94rem;color:var(--muted);flex:1}
.tile .link{margin-top:.3rem;font-size:.95rem}

/* ---------- badges ---------- */
.badge{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:.28rem .6rem;border-radius:2px;display:inline-block}
.b-orig{background:#E6F3FE;color:#0A5FA6;border:1px solid #BFE0FB}
.b-appel{background:#EAF0F8;color:#0A326E;border:1px solid #CDDCEE}
.kicker{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--blue)}

/* ---------- member-state chips ---------- */
.states{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.state{display:inline-flex;align-items:center;gap:.5rem;background:var(--white);border:1px solid var(--stone-line);border-radius:999px;padding:.5rem 1rem;font-size:.92rem;font-weight:500}
.state .pip{width:9px;height:9px;border-radius:50%;background:var(--gold)}
.state.appel .pip{background:var(--teal)}
.band-teal .state{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}

/* ---------- FAQ / accordion ---------- */
.faq{border-top:1px solid var(--stone-line);max-width:80ch}
.faq details{border-bottom:1px solid var(--stone-line)}
.faq summary{list-style:none;cursor:pointer;padding:1.1rem .25rem;font-weight:600;color:var(--teal);display:flex;justify-content:space-between;gap:1rem;align-items:center;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--blue);font-weight:400;transition:.2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 .25rem 1.2rem;color:var(--muted);max-width:72ch}

/* ---------- document library (publications) ---------- */
.doclib{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}
.doc-card{background:var(--white);border:1px solid var(--stone-line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.18s;display:flex;flex-direction:column}
.doc-card:hover{transform:translateY(-3px);border-color:var(--teal)}
.doc-cover{aspect-ratio:8/5;background:linear-gradient(135deg,#063061,#0C71C3);display:flex;align-items:flex-end;padding:1.1rem;color:#fff;position:relative}
.doc-cover .type{position:absolute;top:.9rem;left:.9rem;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;background:rgba(255,255,255,.16);padding:.25rem .55rem;border-radius:2px}
.doc-cover .yr{font-family:var(--serif);font-size:1.6rem;font-weight:600}
.doc-meta{padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.doc-meta h3{font-size:1.08rem;color:var(--teal)}
.doc-meta p{font-size:.9rem;color:var(--muted);flex:1}
.doc-dl{display:flex;align-items:center;justify-content:space-between;font-size:.84rem;color:var(--muted);border-top:1px solid var(--stone-line);padding-top:.75rem}
.doc-dl .link{font-size:.88rem}

/* feature doc (latest report) */
.feature-doc{display:grid;grid-template-columns:300px 1fr;gap:var(--sp-xl);align-items:center;background:var(--white);border:1px solid var(--stone-line);border-radius:var(--radius);padding:var(--sp-l);box-shadow:var(--shadow)}
.feature-doc .cover{aspect-ratio:8/10;border-radius:var(--radius);background:linear-gradient(150deg,#022B57,#0C71C3);display:flex;flex-direction:column;justify-content:space-between;padding:1.5rem;color:#fff}
.feature-doc .cover .yr{font-family:var(--serif);font-size:2.4rem;font-weight:600}

/* ---------- news list (media) ---------- */
.newslist{display:flex;flex-direction:column;gap:1rem}
.news-card{display:grid;grid-template-columns:130px 1fr;gap:var(--gap-grid);background:var(--white);border:1px solid var(--stone-line);border-radius:var(--radius);padding:var(--pad-card);box-shadow:var(--shadow);transition:.16s;align-items:center}
.news-card:hover{transform:translateY(-2px);border-color:var(--teal)}
.news-date{font-family:var(--serif);color:var(--blue);text-align:center;border-right:1px solid var(--stone-line);padding-right:1rem}
.news-date b{display:block;font-size:1.8rem;color:var(--teal);line-height:1}
.news-date span{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.news-body h3{font-size:1.2rem;color:var(--teal);margin:.35rem 0}
.news-body p{font-size:.95rem;color:var(--muted);max-width:70ch}

/* ---------- sittings ---------- */
.sit-row{display:grid;grid-template-columns:90px 1fr auto;gap:1.5rem;align-items:center;background:var(--white);border:1px solid var(--stone-line);border-left:4px solid var(--blue);border-radius:var(--radius);padding:1.25rem 1.5rem;box-shadow:var(--shadow);margin-bottom:1rem}
.sit-row.orig{border-left-color:var(--gold)}
.sit-when{text-align:center;background:var(--stone);border-radius:var(--radius);padding:.6rem}
.sit-when b{display:block;font-family:var(--serif);font-size:1.6rem;color:var(--teal);line-height:1}
.sit-when span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sit-info h3{font-size:1.15rem;color:var(--teal);margin-bottom:.2rem}
.sit-info p{font-size:.92rem;color:var(--muted)}
.table-wrap{overflow-x:auto;border:1px solid var(--stone-line);border-radius:var(--radius);background:#fff}
table.cause{width:100%;border-collapse:collapse;min-width:560px}
table.cause th,table.cause td{text-align:left;padding:.9rem 1.1rem;border-bottom:1px solid var(--stone-line);font-size:.94rem}
table.cause th{background:var(--stone);font-family:var(--sans);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
table.cause tr:last-child td{border-bottom:none}

/* tabs */
.tabs{display:flex;gap:.4rem;border-bottom:1px solid var(--stone-line);margin-bottom:1.75rem}
.tab{background:none;border:none;font-family:var(--sans);font-weight:600;font-size:1rem;color:var(--muted);padding:.85rem 1.1rem;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}
.tab[aria-selected="true"]{color:var(--teal);border-bottom-color:var(--gold)}
.tabpanel[hidden]{display:none}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-grid-lg);align-items:start}
.contact-card{background:var(--white);border:1px solid var(--stone-line);border-radius:var(--radius);padding:var(--pad-card);box-shadow:var(--shadow);margin-bottom:1.25rem}
.contact-card h3{font-size:1.15rem;color:var(--teal);margin-bottom:.75rem}
.contact-card dl div{display:flex;gap:.6rem;padding:.4rem 0;font-size:.95rem}
.contact-card dt{color:var(--muted);min-width:72px}
.contact-card dd{color:var(--ink);font-weight:500}
.map-embed{aspect-ratio:16/10;border-radius:var(--radius);background:linear-gradient(135deg,#0A326E,#0C71C3);display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;padding:2rem;border:1px solid var(--stone-line)}
/* Contact location panel (2026-08-10): the map placeholder became a composed address
   plate — navy ground, left-aligned stack, kicker + serif name + maps link */
.ccj-mappanel{flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;gap:.45rem;border-radius:9px;border:0;
  background:linear-gradient(150deg,#0E2140 0%,#13294B 60%,#1B3A66 100%);line-height:1.55}
.ccj-mappanel .ww-kicker{color:#8FD8F8;margin-bottom:.2rem}
.ccj-mappanel b{font-family:var(--serif);font-weight:700;font-size:1.35rem;line-height:1.25}
.ccj-mappanel .link{color:#fff;margin-top:.7rem}
.ccj-mappanel .link:hover{color:#8FD8F8}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.field label{font-weight:600;font-size:.92rem;color:var(--ink)}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:1rem;padding:.75rem .85rem;border:1px solid var(--stone-line);border-radius:var(--radius);color:var(--ink);background:#fff}
.field textarea{min-height:120px;resize:vertical}

/* facts strip */
.facts4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-grid)}
.facts4 .f b{display:block;font-family:var(--serif);font-size:2.1rem;color:var(--gold-soft);line-height:1}
.facts4 .f span{display:block;color:var(--muted-on-dark);font-size:.92rem;margin-top:.4rem}

/* judges grid */
.judges{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-grid)}
.judge{text-align:center}
.judge .av{aspect-ratio:1;border-radius:50%;background:linear-gradient(150deg,#0A326E,#0C71C3);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--serif);font-size:1.8rem;margin-bottom:.85rem;box-shadow:var(--shadow)}
.judge h3{font-size:1.05rem;color:var(--teal)}
.judge p{font-size:.85rem;color:var(--muted)}

/* related feed */
.relfeed{display:flex;flex-direction:column;gap:.75rem}
.rel{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem 1.25rem;background:var(--white);border:1px solid var(--stone-line);border-radius:var(--radius);transition:.15s}
.rel:hover{border-color:var(--teal);transform:translateY(-2px)}
.rel .t{font-family:var(--serif);color:var(--teal);font-size:1.05rem}
.rel .c{font-size:.84rem;color:var(--muted)}

/* ---------- footer ---------- */
/* partner strip at the top of the footer: light logo band + white flags band (2026-07-19) */
.foot-partners{position:relative;z-index:1;margin-top:calc(var(--sp-2xl) * -1);margin-bottom:var(--sp-2xl);background:#fff}
.fp-logos{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.25rem);padding-block:2rem}
.fp-logos img{height:64px;width:auto;display:block}
.fp-logos img[src*="rjlsc"]{height:48px}  /* the RJLSC lockup is visually heavier — sized down */
.fp-logos img[src*="eu_cofunded"]{height:44px}  /* wide EU lockup — sized down */
.fp-logos a{display:block;transition:transform .18s ease}
.fp-logos a:hover{transform:translateY(-2px)}
.fp-flags-band{background:#fff}  /* no rule between the partner logos and the flags (Hilwyn 2026-10-02) */
.fp-flags-note{text-align:center;font-family:var(--sans);font-size:.82rem;color:var(--ink);padding-top:2rem;margin-bottom:-.4rem}
.fp-flags{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(.6rem,1.6vw,1.35rem);padding-block:1.4rem}
.fp-flags img{width:34px;height:auto;display:block;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.fp-flags a{display:block;transition:transform .15s ease}
.fp-flags a:hover{transform:translateY(-2px)}
@media(max-width:640px){.fp-logos img{height:44px}.fp-flags img{width:26px}}
/* phones: partner logos as a balanced 2x2 grid (Hilwyn 2026-10-03). One shared height let the wide
   RJLSC lockup dominate (its 48px rule also outranked the 44px above), the Academy and CAJO files
   carry built-in padding so they read small, and the row broke 3 + 1 with CAJO alone. Heights are
   set per logo so the visible marks carry similar weight in equal cells. */
@media(max-width:640px){
  .fp-logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;align-items:center;gap:1.6rem 1rem;padding-block:1.75rem}
  .fp-logos img{max-width:100%;object-fit:contain}
  .fp-logos img[src*="caricom"]{height:50px}
  .fp-logos img[src*="rjlsc"]{height:38px}
  .fp-logos img[src*="calca"]{height:52px}
  .fp-logos img[src*="cajo"]{height:58px}
}
footer.site{background:var(--footer-bg);color:var(--muted-on-dark);padding-block:var(--sp-2xl) var(--sp-l);margin-top:0;position:relative}
/* the section above "casts a shadow" onto the footer: deep but soft top gradient */
footer.site::before{content:"";position:absolute;top:0;left:0;right:0;height:74px;background:linear-gradient(180deg,rgba(6,10,26,.30) 0%,rgba(6,10,26,.11) 46%,rgba(6,10,26,0) 100%);pointer-events:none}
footer.site>.wrap{position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:var(--gap-grid-lg)}
.foot-brand{text-align:center}
.foot-brand .seal{width:160px;height:160px;margin:0 auto 1rem;object-fit:contain}
.foot-brand p{max-width:32ch;margin-inline:auto;font-size:.92rem;font-weight:700;color:#fff}
.fb-br{display:none}  /* two-line name lockup is a phone-only treatment */
.fb-tag{display:block;margin-top:.45rem;font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-on-dark)}  /* footer tagline, the header lockup's voice (2026-10-03) */
@media(max-width:640px){.fb-tag{font-size:.6rem;letter-spacing:.1em;white-space:nowrap}}  /* one line beside the phone seal — no orphaned "COURT." */
/* contact block lives in the Connect row: left-aligned two-column box, ≤40% of the section */
.foot-contact{max-width:60%;display:flex;gap:clamp(1.5rem,4vw,3rem);text-align:left}
.foot-contact .fc-col{display:flex;flex-direction:column;gap:1.1rem;font-style:normal;font-size:.9rem;color:var(--muted-on-dark)}
.foot-contact .fc-col+.fc-col{border-left:1px solid rgba(255,255,255,.18);padding-left:clamp(1.5rem,4vw,3rem)}
.foot-contact .fc-col p{display:flex;flex-direction:column;gap:.1rem;margin:0;line-height:1.3}
.foot-contact .fc-col span{display:block}
.fc-connect{display:flex;align-items:center;gap:.75rem}
footer h4{font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--base-gold);margin-bottom:1.1rem}  /* accent matches the dark judgments band (2026-07-19) */
/* fg-btn is injected into footer h4s by the accordion JS at every width —
   without this global reset, desktop shows UA default (white) buttons */
footer .foot-grid .fg-btn{display:inline;background:none;border:0;padding:0;margin:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-align:left;cursor:default}
footer li{margin-bottom:.6rem}footer li a{font-size:.92rem}
footer li a,.foot-contact a{transition:color .25s ease}
footer li a:hover,footer li a:focus-visible,.foot-contact a:hover,.foot-contact a:focus-visible{color:#7FD4F5}  /* light Logo Cyan, eased in and out (Hilwyn 2026-10-02; was a hard switch to white) */
.foot-connect{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;margin-top:3rem;padding-top:2rem;border-top:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.09) 16%,rgba(255,255,255,.09) 84%,transparent 100%) top/100% 1px no-repeat}
.foot-connect h4{margin:0}
.social-row{display:flex;gap:.6rem}
.social-ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--teal-deep);flex-shrink:0;transition:transform .15s ease,background .15s ease}
.social-ico svg{width:18px;height:18px}
.social-ico:hover{background:var(--base-gold);transform:translateY(-2px)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:1.75rem;padding-top:1.75rem;border-top:0;font-size:.85rem;position:relative}
/* divider: rule warms to gold at its midpoint, with three tick marks (short–tall–short) at center (2026-07-19) */
.foot-bottom::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.12) 14%,#323392 38%,var(--base-gold) 47%,var(--base-gold) 53%,#01A3DD 62%,rgba(255,255,255,.12) 86%,transparent 100%)}  /* ends dissolve into the footer → Royal → gold → Cyan → dissolve */
.foot-bottom::after{content:"";position:absolute;left:50%;top:1px;transform:translate(-50%,-50%) rotate(45deg);width:9px;height:9px;background:var(--base-gold);border:9px solid var(--footer-bg)}  /* gold diamond; its navy border masks the line either side */
.foot-bottom nav,.foot-bottom .foot-legal{display:flex;flex-wrap:wrap;gap:1.5rem;width:100%;justify-content:space-between}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .editorial{grid-template-columns:1fr;gap:1.5rem}
  .anchornav{position:static;display:none}
  .cols-3,.cols-4,.doclib,.judges,.facts4{grid-template-columns:repeat(2,1fr)}
  .cols-2,.contact-grid,.feature-doc,.feature-doc .cover{grid-template-columns:1fr}
  .feature-doc .cover{max-width:260px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:2rem}.foot-brand{grid-column:1/-1}
  /* brand block goes compact + left-aligned when it spans the full row
     (the desktop treatment centered a 160px seal across the whole phone) */
  .foot-brand{display:flex;align-items:center;gap:1rem;text-align:left;margin-bottom:.5rem}
  .foot-brand .seal{width:92px;height:92px;margin:0}
  .foot-brand p{margin:0;max-width:none;line-height:1.35}
  .fb-br{display:inline}  /* name splits into a two-line lockup beside the seal */
  .primary-nav{position:fixed;top:0;right:0;height:100dvh;width:min(86vw,340px);background:var(--ivory);z-index:150;transform:translateX(100%);transition:transform .28s ease;padding:1rem 1.1rem 2rem;overflow-y:auto;box-shadow:-14px 0 40px rgba(8,46,53,.22)}
  .primary-nav.open{transform:translateX(0)}
  .primary-nav .mobile-only{display:flex}
  .primary-nav ul{flex-direction:column;gap:.1rem}
  .primary-nav a{padding:1rem .75rem;font-size:1.08rem;border-bottom:1px solid var(--stone-line);border-radius:0}
  .drawer-head{justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.85rem;border-bottom:1px solid var(--stone-line)}
  .drawer-title{font-family:var(--serif);font-weight:600;color:var(--teal);font-size:1.15rem}
  .drawer-close{background:var(--stone);border:none;border-radius:4px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer}
}
@media(max-width:620px){
  .cols-3,.cols-4,.doclib,.judges,.facts4{grid-template-columns:1fr}
  .news-card{grid-template-columns:1fr;gap:.6rem}
  .news-date{display:flex;gap:.5rem;align-items:baseline;border-right:none;border-bottom:1px solid var(--stone-line);padding:0 0 .5rem;text-align:left}
  .news-date b{font-size:1.2rem}
  .sit-row{grid-template-columns:1fr;gap:.75rem}
  .step{grid-template-columns:1fr}.step::before{margin-bottom:.25rem}
  .utility a:not(.live){display:none}
  .facts4 .f b{font-size:1.7rem}
  .foot-connect{flex-direction:column;align-items:flex-start;gap:.85rem}
  .foot-contact{max-width:100%;flex-wrap:wrap;flex-direction:column;gap:1.1rem}
  .foot-contact .fc-col+.fc-col{border-left:0;padding-left:0}  /* divider only makes sense side-by-side */

  /* ---- Phone footer: link groups collapse to accordion rows ----
     ccj.js adds .foot-acc (and per-group toggle buttons) only when JS
     runs; without JS the footer just stays fully expanded. Collapsed
     groups take the footer from ~2 screens of links down to one. */
  .foot-acc{display:block}
  .foot-acc>div:not(.foot-brand){border-top:1px solid rgba(255,255,255,.14)}
  .foot-acc>div:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
  .foot-acc h4{margin:0}
  footer .foot-acc .fg-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:1rem 0;cursor:pointer}  /* matches the global fg-btn reset's specificity; later in file wins */
  footer .foot-acc .fg-btn::after{content:"+";font-size:1.35rem;font-weight:300;line-height:1;color:var(--base-gold);transition:transform .25s ease}
  footer .foot-acc .open .fg-btn::after{transform:rotate(45deg)}
  .foot-acc>div:not(.foot-brand) ul{display:none;padding-bottom:.85rem}
  .foot-acc>div.open ul{display:block}
  .foot-acc ul li{margin:0}
  .foot-acc ul li a{display:block;padding:.45rem 0;font-size:.95rem}
  .foot-brand{margin-bottom:1.15rem}
  /* the accordion's own bottom hairline replaces .foot-connect's top border;
     without this the two lines double up around a dead 5rem gap */
  .foot-connect{margin-top:1.4rem;padding-top:0;border-top:0;background:none}
  /* contact block: tighter rhythm, clearly tappable links */
  .foot-contact .fc-col p{line-height:1.5;gap:.15rem}
  .foot-contact a{text-decoration:underline!important;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
  /* divider between the contact block (ends at "Website feedback") and Connect */
  .fc-connect{width:100%;border-top:1px solid rgba(255,255,255,.14);margin-top:.8rem;padding-top:1.5rem}
  /* smaller legal line */
  .foot-bottom{font-size:.74rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* CCJ fix: a .sec-head heading on a dark band must stay white (beats .sec-head h2 teal) */
.band-teal .sec-head h2,.band-teal .sec-head h3{color:#fff}
.band-teal .sec-head .lede{color:var(--muted-on-dark)}

/* ============================================================
   CCJ header nav v2 — right-side hamburger drawer at ALL sizes
   (replaces the horizontal desktop nav that overflowed).
   ============================================================ */
.site a,.site a:hover,header.site a,footer.site a,#main a.btn,#main a.link,.ncard,.jrow,.tile{text-decoration:none}
.menu-btn{display:inline-flex!important;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;background:var(--white);border:1px solid var(--ivory);border-radius:50%;cursor:pointer;padding:0;transition:border-color .2s ease,background .2s ease}  /* border matches header bg (per Hilwyn, for now) */
.menu-btn:hover{border-color:var(--ivory);background:var(--stone)}
.menu-icon{position:relative;width:18px;height:13px;flex-shrink:0}
.menu-icon span{position:absolute;left:0;height:2px;border-radius:1px;background:var(--ink);transition:transform .25s ease,opacity .2s ease,width .25s ease,left .25s ease}
.menu-icon span:nth-child(1){top:0;width:18px}
.menu-icon span:nth-child(2){top:5.5px;width:11px;left:7px}
.menu-icon span:nth-child(3){top:11px;width:18px}
.menu-btn[aria-expanded="true"] .menu-icon span:nth-child(1){top:5.5px;left:0;width:18px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-icon span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .menu-icon span:nth-child(3){top:5.5px;left:0;width:18px;transform:rotate(-45deg)}
/* Drawer glass: translucent-blur like the search overlay, but light/frosted */
.primary-nav{position:fixed;top:0;right:0;height:100dvh;width:min(88vw,360px);background:linear-gradient(172deg,#FFFFFF 0%,#FFFFFF 44%,#E6E7F2 74%,#E0F4FB 100%);z-index:150;transform:translateX(100%);transition:transform .28s ease;padding:1.1rem 1.2rem 2rem;overflow-y:auto;box-shadow:-14px 0 40px rgba(8,46,48,.22);display:block}  /* white top for clean menu items, fading into the logo tints (royal #E6E7F2 → cyan #E0F4FB) */
.primary-nav.open{transform:translateX(0)}
.primary-nav .mobile-only{display:flex}
.primary-nav ul{flex-direction:column;gap:.1rem;display:block}
.primary-nav li{display:block;width:100%}
.primary-nav a{display:block;padding:.95rem .6rem;font-size:1.05rem;line-height:1.3;border-bottom:1px solid rgba(21,35,59,.12);border-radius:0;color:var(--ink);box-shadow:none;text-transform:none}
.primary-nav a:hover{background:rgba(21,35,59,.06);color:var(--teal)}
body.nav-open{overflow:hidden}

/* Kill legacy plugin underline forcing (#et-main-area a / ubermenu). Design uses none. */
a{text-decoration:none!important}
.single .prose a{text-decoration:underline!important;text-underline-offset:2px}  /* article-content links only */
.prose-content a:not(.btn):not(.doc-card):not(.cr-card):not(.mc-link):not(.desc_trig):not(.ccj-dl):not(.ccj-dlcard):not(.ccj-cta a):not(.rs-card):not(.ccj-back):not(.lg-col a){text-decoration:underline!important;text-underline-offset:2px}  /* generic re-authored pages (page.php); card-links + composed CTAs opt out */
/* E7 (2026-07-21): Trustee portraits on the CCJ Trust Fund page rendered at natural size
   and dominated the page. Constrain to a consistent centered portrait; captions tuck under. */
.page-id-24 .prose-content p>img{display:block;width:min(220px,64vw);aspect-ratio:4/5;object-fit:cover;object-position:top center;margin:0 auto;border-radius:4px;box-shadow:var(--shadow)}
.page-id-24 .prose-content p:has(>img)+p{margin-top:.55rem}

/* Drawer header + in-drawer search — apply at all sizes (were mobile-only) */
.primary-nav .drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.85rem;border-bottom:1px solid rgba(21,35,59,.14)}
.primary-nav .drawer-title{font-family:var(--serif);font-weight:600;color:var(--teal);font-size:1.15rem}
.primary-nav .drawer-close{background:rgba(255,255,255,.65);border:0;border-radius:4px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer}
.primary-nav .drawer-close:hover{background:#fff}
.primary-nav .drawer-close:focus,.primary-nav .drawer-close:focus-visible{outline:0!important;box-shadow:none}
.primary-nav .mobile-search{display:flex;align-items:center;gap:.35rem;margin:0 0 1rem;background:#E0F4FB;border:0;border-radius:5px;padding:.3rem}  /* lightest Logo-Cyan tint; borderless */
.primary-nav .mobile-search input{flex:1;min-width:0;padding:.6rem .75rem;border:0;background:transparent;outline:0;border-radius:var(--radius);font-family:var(--sans);font-size:.95rem;color:var(--ink)}
.primary-nav .mobile-search button{background:var(--blue);border:none;border-radius:var(--radius);width:44px;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
/* Drawer utility links (Contact / Gift Shop / Careers) — the header's
   .cta-links are hidden <=980px, so the drawer carries them: a compact,
   muted secondary group under the menu. */
.primary-nav .drawer-utils{display:flex;flex-direction:column;margin-top:1.5rem;padding-top:1.15rem;border-top:1px solid rgba(21,35,59,.14)}
.primary-nav .drawer-utils a{padding:.6rem .75rem;font-size:.92rem;font-weight:500;color:var(--muted);border-bottom:0}
.primary-nav .drawer-utils a:hover{color:var(--teal)}
.primary-nav .drawer-utils a.watch-live{display:inline-flex;align-items:center;align-self:flex-start;gap:.4rem;padding:.4rem .65rem;border-radius:var(--radius);background:#B8202A;color:#fff!important;font-size:.78rem;font-weight:700}
.primary-nav .drawer-utils a.watch-live:hover{background:#A41E25;color:#fff!important}
.cta-links a.watch-live::before,.primary-nav .drawer-utils a.watch-live::before{content:"";width:.5rem;height:.58rem;flex:0 0 auto;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%);animation:watch-live-pulse 2.4s ease-in-out infinite}  /* blinking play triangle (was pulsing dot, 2026-07-19) */
@keyframes watch-live-pulse{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.cta-links a.watch-live::before,.primary-nav .drawer-utils a.watch-live::before{animation:none}}

/* Header search button — global (was homepage-only in the prototype) */
.search-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:transparent;border:0;border-radius:var(--radius);padding:.6rem .9rem;font-family:var(--sans);font-size:.9rem;font-weight:500;color:var(--ink);cursor:pointer}  /* matches .cta-links */
.search-btn:hover{color:var(--teal)}
@media(max-width:980px){.search-btn .lbl{display:none}}

/* Fullscreen search overlay — "zoom into focus" fade+scale, opened from .search-btn */
.search-overlay{position:fixed;inset:0;z-index:180;background:rgba(15,23,43,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:2rem;opacity:0;visibility:hidden;transform:scale(1.03);transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s}
.search-overlay.open{opacity:1;visibility:visible;transform:scale(1);transition:opacity .28s ease,transform .28s ease,visibility 0s}
.search-overlay-form{width:min(92vw,680px);display:flex;align-items:center;gap:.75rem;background:var(--white);border-radius:8px;padding:1.1rem 1.4rem;box-shadow:0 24px 80px rgba(8,12,30,.4);color:var(--muted);transform:translateY(-14px) scale(.97);transition:transform .3s ease}
.search-overlay.open .search-overlay-form{transform:translateY(0) scale(1)}
.search-overlay-form input{flex:1;border:0;outline:0;-webkit-appearance:none;appearance:none;font-family:var(--serif);font-size:1.35rem;color:var(--ink);background:transparent;min-width:0}
.search-overlay-form input:focus,.search-overlay-form input:focus-visible{outline:0 !important;border:0 !important;box-shadow:none !important}
.search-overlay-form input::-webkit-search-decoration,.search-overlay-form input::-webkit-search-cancel-button{-webkit-appearance:none}
.search-overlay-form input::placeholder{color:var(--muted);opacity:.75}
.search-overlay-form button[type=submit]{background:var(--blue);border:none;border-radius:5px;width:42px;height:42px;flex-shrink:0;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease}
.search-overlay-form button[type=submit]:hover{background:var(--blue-700)}
.search-overlay-close{position:absolute;top:2rem;right:2rem;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease}
.search-overlay-close:hover{background:rgba(255,255,255,.22)}
body.search-open{overflow:hidden}

/* ---------- dark header (photo dark blue, matches footer) 2026-07-19 ----------
   Header bar flipped from white to var(--footer-bg); light text/controls below. */
header.site{background:
  radial-gradient(ellipse 70% 60% at 50% 0%,rgba(1,163,221,.14),transparent 70%),
  radial-gradient(ellipse 55% 45% at 85% 100%,rgba(50,51,146,.28),transparent 70%),
  var(--footer-bg)}  /* same cyan/royal radial glows as the latest-decisions band */
.brand-txt strong{color:#fff}
.brand-txt span{color:var(--muted-on-dark)}
.cta-links a{color:#fff}
.cta-sep{background:rgba(255,255,255,.28)}
.search-btn{color:#fff}
.search-btn:hover{color:var(--muted-on-dark)}
.menu-btn{background:transparent;border:0}
.menu-btn:hover{background:rgba(255,255,255,.12)}
.menu-icon span{background:#fff}

/* ---------- scrolled desktop header: menu bar only (2026-07-19; reworked 2026-07-22) ----------
   The header sticks at a NEGATIVE top equal to the logo/search row's height, so that row
   scrolls off — and back on — 1:1 with the page. The row NEVER leaves the flow (the old
   overlay approach re-inserted it at the un-scroll threshold, shifting the document and
   making the header jump). While .scrolled, only the seal + hamburger are lifted out and
   absolutely positioned onto the pinned menu bar; the class flips happen while the row is
   off-screen, so expansion is purely the natural scroll reveal. */
@keyframes ccj-bar-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(min-width:981px){
  header.site{top:calc(0px - var(--navrow-h,125px))}
  header.site.scrolled>.wrap{min-height:var(--navrow-h,125px)}  /* hold the row band's height while its contents are lifted onto the bar — a collapsing row would pull the pinned bar off-screen */
  header.site.scrolled .brand-txt,header.site.scrolled .search-btn,header.site.scrolled .cta-links,header.site.scrolled .cta-sep{display:none}
  header.site.scrolled .brand{position:absolute;left:clamp(1.25rem,4vw,2.5rem);top:calc(var(--navrow-h,125px) + 2px);z-index:95;animation:ccj-bar-in .38s ease .06s backwards}
  header.site.scrolled .menu-btn{position:absolute;right:clamp(1.25rem,4vw,2.5rem);top:calc(var(--navrow-h,125px) - 1px);z-index:95;animation:ccj-bar-in .38s ease .06s backwards}
  header.site.scrolled .seal{width:38px;height:38px}
}
/* sticky bar hamburger: bare Logo Cyan lines, no chip or ring (Hilwyn 2026-10-02). .nav-cta lifts
   specificity over the homepage's header.site.hdr-white .menu-btn (ccj-home.css loads later). */
header.site.scrolled .nav-cta .menu-btn,header.site.scrolled .nav-cta .menu-btn:hover{background:transparent;border-color:transparent}
header.site.scrolled .nav-cta .menu-btn .menu-icon span{background:#01A3DD;transition:transform .25s ease,opacity .2s ease,width .25s ease,left .25s ease,background-color .2s ease}
@media(min-width:981px){header.site.scrolled .nav-cta .menu-btn:hover .menu-icon span{background:#fff}}  /* on the navy bar only — the phone bar can be white */
@media(max-width:980px){
  /* phones/tablets: same feel — the full bar scrolls off, then the condensed
     logo + hamburger row eases back in as the sticky bar */
  header.site{top:calc(0px - var(--navrow-h,80px))}
  header.site.scrolled{top:0}
  header.site.scrolled .nav{animation:ccj-bar-in .38s ease backwards}
}
@media(max-width:620px){.search-overlay{padding:1.25rem}.search-overlay-close{top:1.25rem;right:1.25rem}.search-overlay-form{padding:1rem .85rem;gap:.5rem}.search-overlay-form input::placeholder{font-size:calc(1.35rem - 2px)}}

/* E6 (2026-07-23): hub-landing spacing normalization — Media (1101), Court Documents
   (505), Services (23223). Content images span the column at every width (they sat at
   natural width mid-breakpoint) and the image→heading→image rhythm is evened out. */
.page-id-1101 .prose img,.page-id-505 .prose img,.page-id-23223 .prose img{display:block;width:100%;height:auto;margin:0 0 1.1rem}
.page-id-1101 .prose h2,.page-id-1101 .prose h3,.page-id-505 .prose h2,.page-id-505 .prose h3,.page-id-23223 .prose h2,.page-id-23223 .prose h3{margin:2.2rem 0 .9rem}
.page-id-1101 .prose hr,.page-id-505 .prose hr,.page-id-23223 .prose hr{margin:2rem 0}

/* search results masthead: full-width title, "New Search" box stacked beneath (2026-07-27) */
.srch-again{margin-top:1.6rem;max-width:560px}
.srch-label{display:block;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:.55rem}
.srch-box{display:flex;align-items:stretch;background:#fff;border-radius:5px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.22)}
.srch-box input{flex:1;min-width:0;border:0;background:transparent;padding:.8rem .95rem;font-family:var(--sans);font-size:.98rem;color:var(--ink)}
.srch-box input:focus{outline:none}
.srch-box:focus-within{outline:3px solid var(--gold);outline-offset:2px}
.srch-box .btn{border-radius:0}
/* result cards: date moves to a small neutral right column; searched keywords highlighted */
.srch-card{grid-template-columns:minmax(0,1fr)}  /* single column; the date floats on the title line */
.srch-card .news-body p{max-width:none}  /* excerpt fills the card width (base .news-body caps at 70ch) */
.srch-title{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.srch-title h3{min-width:0}
.srch-date{font-size:.8rem;color:var(--muted);white-space:nowrap}
.srch-card mark,mark.ccj-hl{background:var(--gold-soft);color:var(--ink);padding:0 .18em;border-radius:2px}
mark.ccj-hl{scroll-margin-top:calc(var(--header-h,120px) + 2rem)}

/* ---------- Photo Gallery (M5, 2026-07-22): album cards + in-album grids ---------- */
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--gap-grid)}
.album-card{display:flex;flex-direction:column;gap:.35rem;background:#fff;border-radius:5px;overflow:hidden;box-shadow:0 1px 3px rgba(21,35,59,.08);transition:transform .2s ease,box-shadow .2s ease;padding-bottom:1.2rem}
.album-card:hover{transform:translateY(-4px);box-shadow:0 2px 6px rgba(21,35,59,.06),0 16px 40px rgba(21,35,59,.14)}
.album-cover{position:relative;display:block;aspect-ratio:3/2;background:var(--dark-blue) center/cover no-repeat}
.album-fallback{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;opacity:.85}
.album-count{position:absolute;right:.7rem;bottom:.7rem;background:rgba(3,18,44,.72);color:#fff;font-size:.75rem;font-weight:600;padding:.25rem .6rem;border-radius:99px}
.album-card h3{font-size:1.12rem;color:var(--teal);margin:.85rem 1.2rem 0}
.album-card p{font-size:.88rem;color:var(--muted);margin:0 1.2rem}
.album-card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5} /* CCJ write-ups (M04, round 3): even cards; full text on the album page */
.album-intro{max-width:68ch;margin:0 0 1.8rem;font-size:1.08rem;line-height:1.7;color:var(--muted)}
/* native WP galleries inside album pages: tidy grid, hover lift, caption strip */
.prose .wp-block-gallery,.prose .gallery{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:1.5rem 0}
.prose .wp-block-gallery .wp-block-image,.prose .gallery .gallery-item{margin:0;position:relative;border-radius:4px;overflow:hidden}
.prose .wp-block-gallery img,.prose .gallery img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;border:0;transition:transform .3s ease}
.prose .wp-block-gallery .wp-block-image:hover img,.prose .gallery .gallery-item:hover img{transform:scale(1.04)}
.prose .wp-block-gallery figcaption,.prose .gallery .gallery-caption{position:absolute;inset:auto 0 0 0;background:linear-gradient(180deg,rgba(3,18,44,0),rgba(3,18,44,.82));color:#fff;font-size:.8rem;padding:1.2rem .8rem .55rem;margin:0}

/* Gravity Forms — harmonize with the design system (.field look + primary button) */
.gform_wrapper label.gfield_label{font-weight:600;font-size:.92rem;color:var(--ink);font-family:var(--sans)}
.gform_wrapper .gfield_required{color:var(--blue)}
.gform_wrapper input[type=text],.gform_wrapper input[type=email],.gform_wrapper input[type=tel],
.gform_wrapper select,.gform_wrapper textarea{
  width:100%;font-family:var(--sans);font-size:1rem;padding:.75rem .85rem;
  border:1px solid var(--stone-line);border-radius:var(--radius);color:var(--ink);background:#fff}
.gform_wrapper textarea{min-height:120px;resize:vertical}
.gform_wrapper .gfield{margin-bottom:1rem}
.gform_wrapper input[type=submit],.gform_wrapper .gform_button{
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:600;
  font-size:1rem;padding:.8rem 1.6rem;border-radius:var(--radius);border:1.5px solid transparent;
  background:var(--blue);color:#fff;cursor:pointer;transition:.18s ease}
.gform_wrapper input[type=submit]:hover{background:var(--blue-700)}


/* ============================================================
   CCJ standard: main content sections = 70px vertical padding.
   Token --section-pad-y (in :root). Applies to all band sections;
   .masthead and .hero keep their own rhythm. Mobile reduces to 44px —
   change the token in the media query below to make it uniform.
   ============================================================ */
section.band,section.band-stone,section.band-teal{padding-block:var(--section-pad-y)}
/* (mobile handled fluidly by --space-section) */


/* Vertical-rhythm utility: space between siblings, none at edges. Usage: add "flow"
   to any container; tune per-instance with style="--flow-space:var(--sp-l)". */
.flow>*+*{margin-top:var(--flow-space,1em)}

/* ============================================================
   Wide container for data-table pages (page-fulltable.php)
   ============================================================ */
.wrap-wide{max-width:none;margin-inline:auto;padding-inline:clamp(1rem,2vw,2rem)}  /* full-screen tables (Hilwyn 2026-08-10; was min(96vw,1680px)) */
/* judgment tables: the date + citation columns must never crush (Hilwyn 2026-08-10) */
.page-id-17217 .ninja_table_wrapper table th:nth-child(-n+2),.page-id-17217 .ninja_table_wrapper table td:nth-child(-n+2),
.page-id-18491 .ninja_table_wrapper table th:nth-child(-n+2),.page-id-18491 .ninja_table_wrapper table td:nth-child(-n+2){min-width:150px}
.wrap-wide h2,.wrap-wide h3{color:var(--teal)}

/* ============================================================
   NINJA TABLES — modern skin (all judgment/paper databases)
   Zebra light-blue rows, hairline separators, roomy cells,
   navy header, horizontal scroll instead of ugly wrapping.
   ============================================================ */
#main .ninja_table_wrapper{overflow-x:auto;background:#fff;border:1px solid var(--stone-line);border-radius:var(--radius);box-shadow:0 1px 2px rgba(21,35,59,.05),0 8px 24px rgba(21,35,59,.06);padding:var(--sp-s)}
#main .ninja_table_wrapper table{border-collapse:separate;border-spacing:0;width:100%;min-width:820px;margin:0}
#main .ninja_table_wrapper th,
#main .ninja_table_wrapper thead td{background:var(--teal)!important;color:#fff!important;font-family:var(--sans);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:var(--sp-s) var(--sp-m);border:0;text-align:left}
#main .ninja_table_wrapper tbody td{padding:.95rem var(--sp-m);border-bottom:1px solid var(--stone-line);font-size:.95rem;color:var(--ink);vertical-align:top;background:#fff}
#main .ninja_table_wrapper tbody tr:nth-child(even) td{background:#F2F7FC}   /* light-blue zebra */
#main .ninja_table_wrapper tbody tr:hover td{background:#EAF3FB}
#main .ninja_table_wrapper tbody tr:last-child td{border-bottom:0}
#main .ninja_table_wrapper a{color:var(--blue);font-weight:600}
#main .ninja_table_wrapper a:hover{color:var(--teal)}
/* search box + controls above the table */
#main .ninja_table_wrapper input[type=search],
#main .ninja_table_wrapper .ninja-forms-field,
#main .ninja_table_wrapper select{font-family:var(--sans);padding:.55rem .8rem;border:1px solid var(--stone-line);border-radius:var(--radius)}
/* footable pagination (if enabled per-table) */
#main .ninja_table_wrapper .pagination>li>a{border:1px solid var(--stone-line);color:var(--teal);padding:.4rem .8rem;border-radius:3px;margin:0 2px}
#main .ninja_table_wrapper .pagination>li.active>a{background:var(--blue);border-color:var(--blue);color:#fff}

/* ============================================================
   CONTENT VIEWS grids — modern card skin (judges, reports, …)
   Soft shadow instead of hard borders, gentle hover lift.
   ============================================================ */
#main .pt-cv-view .pt-cv-content-item{background:#fff;border:0!important;border-radius:5px;box-shadow:0 1px 2px rgba(21,35,59,.06),0 10px 28px rgba(21,35,59,.08);padding:var(--sp-m);transition:transform .18s ease,box-shadow .18s ease}
#main .pt-cv-view .pt-cv-content-item:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(21,35,59,.08),0 16px 40px rgba(21,35,59,.12)}
#main .pt-cv-view .pt-cv-content-item img{border-radius:4px}
#main #pt-cv-view-b3e391954t .pt-cv-href-thumbnail,#main #pt-cv-view-4772b8d739 .pt-cv-href-thumbnail{margin:0 var(--sp-m) var(--sp-s) 0}
#main #pt-cv-view-b3e391954t .pt-cv-href-thumbnail img.pt-cv-thumbnail,#main #pt-cv-view-4772b8d739 .pt-cv-href-thumbnail img.pt-cv-thumbnail{margin:0 var(--sp-m) var(--sp-s) 0!important}
#main #pt-cv-view-b3e391954t .pt-cv-title,#main #pt-cv-view-4772b8d739 .pt-cv-title{margin:0 0 var(--sp-2xs);line-height:1.3}
#main #pt-cv-view-b3e391954t .pt-cv-content,#main #pt-cv-view-4772b8d739 .pt-cv-content{margin-top:var(--sp-xs);line-height:1.65}
#main #pt-cv-view-b3e391954t .pt-cv-meta-fields,#main #pt-cv-view-4772b8d739 .pt-cv-meta-fields{margin-top:var(--sp-xs)}
#main .pt-cv-view .pt-cv-title,#main .pt-cv-view .pt-cv-title a{font-family:var(--serif);color:var(--teal);font-weight:600;text-decoration:none}
#main .pt-cv-view .pt-cv-title a:hover{color:var(--blue)}
#main .pt-cv-view .pt-cv-readmore{background:var(--blue);color:#fff;border-radius:var(--radius);padding:.45rem 1rem;text-decoration:none;font-weight:600}
#main .pt-cv-view .pt-cv-readmore:hover{background:var(--teal)}
#main .pt-cv-page{row-gap:var(--gap-grid)}
@media(min-width:621px){#main #pt-cv-view-b3e391954t .pt-cv-colwrap,#main #pt-cv-view-4772b8d739 .pt-cv-colwrap{margin-left:var(--sp-m);padding-left:var(--sp-m)}}
@media(max-width:620px){#main #pt-cv-view-b3e391954t .pt-cv-href-thumbnail,#main #pt-cv-view-4772b8d739 .pt-cv-href-thumbnail{margin-right:0;margin-bottom:var(--sp-m)}#main #pt-cv-view-b3e391954t .pt-cv-href-thumbnail img.pt-cv-thumbnail,#main #pt-cv-view-4772b8d739 .pt-cv-href-thumbnail img.pt-cv-thumbnail{margin:0 0 var(--sp-m)!important}}

/* Legacy Divi prose: neutralize inline justified text (rivers of whitespace) */
.prose [style*="text-align: justify"],.prose [style*="text-align:justify"]{text-align:left!important}
/* Plain content lists (legacy pages) get bullets back; authored classes opt out */
.prose ul:not([class]){margin:0 0 1.1rem 1.1rem;max-width:70ch}
.prose ul:not([class]) li{list-style:disc;margin-bottom:.45rem;padding-left:.25rem}
.prose ol:not([class]){margin:0 0 1.1rem 1.35rem;max-width:70ch}
.prose ol:not([class]) li{list-style:decimal;margin-bottom:.45rem;padding-left:.25rem}
.prose .img-right{float:right;width:min(280px,42%);margin:.35rem 0 1.25rem 1.75rem;border-radius:var(--radius)}
@media (max-width:640px){.prose .img-right{float:none;width:min(280px,100%);margin:0 auto 1.25rem}}

/* ============================================================
   BOX TINTS — uniform surface variants for any box/card/band.
   Combine with a component: <div class="contact-card tint-blue">.
   tint-blue = very light blue · tint-navy = dark blue (light text)
   tint-royal = royal blue (light text) · tint-stone = warm neutral.
   ============================================================ */
.tint-blue{background:var(--ice);border:1px solid var(--ice-line)}
.tint-stone{background:var(--stone);border:1px solid var(--stone-line)}
.tint-navy{background:var(--teal-deep);border:1px solid var(--teal-deep)}
.tint-royal{background:var(--teal-700);border:1px solid var(--teal-700)}
.tint-navy,.tint-navy p,.tint-navy dd,.tint-royal,.tint-royal p,.tint-royal dd{color:#fff}
.tint-navy h2,.tint-navy h3,.tint-navy h4,.tint-royal h2,.tint-royal h3,.tint-royal h4{color:#fff}
.tint-navy .lede,.tint-navy dt,.tint-royal .lede,.tint-royal dt{color:var(--muted-on-dark)}
.tint-navy a:not(.btn),.tint-royal a:not(.btn){color:var(--gold-soft);text-decoration:underline;text-decoration-color:rgba(143,199,234,.5)}
.tint-navy a:not(.btn):hover,.tint-royal a:not(.btn):hover{color:#fff}

/* ============================================================
   DOCUMENT CARDS — templated design for document/PDF links.
   Sources: <ul class="docs"> lists and converted [et_pb_button]s
   (both rewritten to .docgrid > a.doc-card at render time).
   Long titles wrap beside a fixed icon chip; equal card heights.
   PDF glyph when the href ends in .pdf, arrow chip otherwise.
   ============================================================ */
.prose .docgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:var(--gap-docs);margin:1.75rem 0;max-width:none}
.doc-card{display:grid;grid-template-columns:auto 1fr;column-gap:1.1rem;align-items:center;background:var(--white);border:1px solid var(--stone-line);border-radius:var(--radius);padding:var(--pad-card);box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.doc-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 2px 4px rgba(21,35,59,.08),0 16px 40px rgba(21,35,59,.12)}
.doc-card::before{content:"";grid-row:1/span 2;width:52px;height:52px;border-radius:6px;background-color:var(--ice);background-repeat:no-repeat;background-position:center;background-size:24px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301A3DD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M9 7h8v8'/%3E%3C/svg%3E")}
.doc-card[href$=".pdf" i]::before,.doc-card[href$=".PDF"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301A3DD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 17h5'/%3E%3C/svg%3E")}
.doc-card .doc-title{font-family:var(--serif);font-weight:600;font-size:1.08rem;line-height:1.35;color:var(--teal)}
.doc-card:hover .doc-title{color:var(--blue)}
.doc-card .doc-meta{grid-column:2;margin-top:.3rem;font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   PHOTO GALLERIES — Content-Views overlay grids (law moot,
   court events…). Full-bleed image cards: no white frame, photo
   fills the card, caption sits on a navy scrim, gentle zoom.
   Applies to every CVP "overlay" gallery view automatically.
   ============================================================ */
#main .pt-cv-view.pt-cv-overlaygrid .pt-cv-content-item{position:relative;overflow:hidden;padding:0;border-radius:7px;background:var(--teal-deep);box-shadow:0 1px 2px rgba(21,35,59,.08),0 12px 30px rgba(21,35,59,.14)}
#main .pt-cv-overlaygrid > .pt-cv-page{gap:var(--gap-grid)!important}
#main .pt-cv-overlaygrid .pt-cv-thumb-wrapper{margin:0;height:100%}
#main .pt-cv-overlaygrid .pt-cv-thumb-wrapper::before{display:none!important}
#main .pt-cv-overlaygrid .pt-cv-thumb-wrapper a{display:block;height:100%}
#main .pt-cv-overlaygrid img.pt-cv-thumbnail{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;border-radius:0;opacity:1!important;filter:none!important;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
#main .pt-cv-overlaygrid .pt-cv-content-item:hover img.pt-cv-thumbnail{transform:scale(1.05)}
#main .pt-cv-overlaygrid .pt-cv-overlay-wrapper{position:absolute;left:0;right:0;bottom:0;top:auto;width:auto;height:auto;margin:0;padding:2.6rem 1.15rem .9rem;background:linear-gradient(180deg,rgba(21,35,59,0) 0%,rgba(21,35,59,.55) 45%,rgba(21,35,59,.88) 100%)}
#main .pt-cv-overlaygrid .pt-cv-title{margin:0;font-size:1rem;line-height:1.35}
#main .pt-cv-overlaygrid .pt-cv-title a{color:#fff;text-decoration:none!important;font-family:var(--serif);font-weight:600;text-shadow:0 1px 8px rgba(21,35,59,.5)}
#main .pt-cv-overlaygrid .pt-cv-content-item:hover .pt-cv-title a{color:var(--gold-soft)}

/* Branded external-redirect interstitial (e.g. RJLSC) */
.ccj-redirect{max-width:560px;margin:1rem auto;padding:2.75rem 2rem;text-align:center;background:#fff;border:1px solid var(--stone-line);border-radius:var(--radius);box-shadow:0 8px 28px rgba(21,35,59,.07)}
.ccj-redirect-mark{width:104px;height:104px;margin:0 auto 1.5rem;border-radius:50%;border:2px solid var(--gold);background:#fff;color:var(--teal);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;letter-spacing:.06em;font-size:1.15rem;overflow:hidden}
.ccj-redirect-mark img{width:66px;height:66px;object-fit:contain}
.ccj-redirect h2{color:var(--teal);margin:0 0 .75rem}
.ccj-redirect p{max-width:none;margin-inline:auto}
.ccj-redirect .ccj-redirect-cta{margin-top:1.6rem}

/* =====================================================================
   MC-LINK (promoted from ccj-home.css) — "text + ring-arrow" CTA usable
   on interior pages. Home defines its own identical copy; keep in sync.
   Content-authored copies use a text arrow (&#8594;) since inline SVG
   is stripped by kses in post content.
   ===================================================================== */
.mc-link{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;font-family:var(--sans);font-weight:600;color:var(--teal);transition:color .2s ease}
.mc-ring{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--stone-line);display:inline-flex;align-items:center;justify-content:center;transition:.2s ease;font-size:1rem;line-height:1}
.mc-link:hover{color:#01A3DD}
.mc-link:hover .mc-ring{border-color:#01A3DD;background:#01A3DD;color:#fff;transform:translateX(3px)}
/* mc-link on ANY dark band — universal light-cyan accent (2026-07-19). Covers the news
   band, dark judgments variants, royal/navy showcase options, and plain dark band-teal
   (the jud-light/jud-cyan band-teal recolors stay on the light default). */
.jud-dark .mc-link,.sit-royal .mc-link,.exp-navy .mc-link,.band-teal:not(.jud-light):not(.jud-cyan) .mc-link{color:#01A3DD}  /* Logo Cyan (was light cyan #8FD8F8, 2026-07-19) */
.jud-dark .mc-ring,.sit-royal .mc-ring,.exp-navy .mc-ring,.band-teal:not(.jud-light):not(.jud-cyan) .mc-ring{border-color:rgba(1,163,221,.55);color:#01A3DD}
.jud-dark .mc-link:hover,.sit-royal .mc-link:hover,.exp-navy .mc-link:hover,.band-teal:not(.jud-light):not(.jud-cyan) .mc-link:hover{color:#fff}
.jud-dark .mc-link:hover .mc-ring,.sit-royal .mc-link:hover .mc-ring,.exp-navy .mc-link:hover .mc-ring,.band-teal:not(.jud-light):not(.jud-cyan) .mc-link:hover .mc-ring{border-color:#01A3DD;background:#01A3DD;color:var(--photo-dark-blue)}
/* =====================================================================
   COURT TERMS (page 734 override) — judicial-year header, term timeline
   bar + term row-cards. Status classes (is-past / is-now / is-ahead)
   are added by ccj.js from data-from/data-to; without JS everything
   renders neutral (no chips), so the page never shows a stale status.
   ===================================================================== */
.ct-year{display:flex;align-items:baseline;gap:1.15rem;margin:.3rem 0 1.5rem;flex-wrap:wrap}
.ct-yk{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#323392}
h2.ct-yr{font-size:clamp(2rem,3.6vw,2.7rem);line-height:1.05;color:var(--teal);margin:0}
.ct-timeline{margin:0 0 2.1rem;padding-bottom:1.3rem}
.ct-barcap{display:flex;justify-content:space-between;margin-bottom:.5rem;font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* v2 (2026-08-10): year lockup + timeline live on a white plate; gold TODAY diamond
   (injected by ccj.js) rides the bar; cards differentiate by state — concluded fades
   to a quiet ledger, the sitting term goes Logo Royal. */
.ct-plate{background:#fff;border:1px solid rgba(21,35,59,.07);border-radius:9px;padding:clamp(1.5rem,2.6vw,2.2rem) clamp(1.5rem,2.8vw,2.4rem) clamp(1.9rem,3vw,2.6rem);margin:0 0 clamp(1.8rem,3vw,2.4rem)}
.ct-plate .ct-year{margin-top:0}
.ct-plate .ct-timeline{margin-bottom:0}
.ct-bar{display:flex;height:10px;border-radius:999px;background:#EEF1F6;position:relative}
.ct-today{position:absolute;top:0;bottom:0;z-index:2;pointer-events:none}
.ct-today::before{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;transform:translate(-50%,-50%) rotate(45deg);background:var(--base-gold);box-shadow:0 0 0 2.5px #fff;border-radius:1px}
.ct-today i{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);font-style:normal;font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#A87A16;white-space:nowrap}
.ct-seg{position:relative;height:100%;background:#323392;border-radius:999px}
.ct-gap{height:100%}
.ct-seg.is-past{background:#9899C9}
.ct-seg.is-now{background:#01A3DD;box-shadow:0 0 0 3px rgba(1,163,221,.18)}
.ct-seg i{position:absolute;top:16px;left:2px;font-style:normal;font-family:var(--sans);font-size:.72rem;font-weight:600;color:var(--muted);white-space:nowrap}
.ct-seg.is-now i{color:#0B6E93;font-weight:700}
@media(max-width:560px){.ct-seg i{display:none}.ct-timeline{padding-bottom:.2rem}}
.ct-list{display:grid;gap:14px;margin:0 0 .5rem}
.ct-list p:empty{display:none}
.ct-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.5rem;background:#fff;border-radius:10px;box-shadow:0 6px 18px rgba(13,30,64,.07);padding:1.2rem 1.6rem 1.2rem 1.5rem;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.ct-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#C9CFDB}
.ct-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(13,30,64,.12)}
.ct-card.is-now::before{background:linear-gradient(180deg,#323392,#01A3DD)}
.ct-num{width:54px;height:54px;border-radius:8px;background:#E6E7F2;color:#323392;font-family:var(--serif);font-weight:600;font-size:1.45rem;display:flex;align-items:center;justify-content:center}
.ct-card.is-now .ct-num{background:#E0F4FB;color:#0B6E93}
.ct-card.is-past .ct-num{background:#F1F2F5;color:var(--muted)}
.ct-body{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.ct-head{display:flex;align-items:center;gap:.85rem}
.ct-term{font-family:var(--sans);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#323392}
.ct-status{display:none;font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:.32em .85em;align-items:center;gap:.45em}
.ct-card.is-now .ct-status{display:inline-flex;background:#E0F4FB;color:#0B6E93}
.ct-card.is-past .ct-status{display:inline-flex;background:#F1F2F5;color:var(--muted)}
.ct-card.is-ahead .ct-status{display:inline-flex;background:#E6E7F2;color:#323392}
.ct-card.is-now .ct-status::before{content:"In session"}
.ct-card.is-past .ct-status::before{content:"Concluded"}
.ct-card.is-ahead .ct-status::before{content:"Upcoming"}
.ct-card.is-now .ct-status::after{content:"";width:7px;height:7px;border-radius:50%;background:#01A3DD;animation:ctPulse 2.2s ease-in-out infinite}
/* state-differentiated cards (2026-08-10) */
.ct-card.is-now{background:#323392;box-shadow:0 14px 30px rgba(50,51,146,.26)}
.ct-card.is-now:hover{box-shadow:0 18px 36px rgba(50,51,146,.32)}
.ct-card.is-now::before{background:linear-gradient(180deg,var(--base-gold),#01A3DD)}
.ct-card.is-now .ct-term{color:#fff}
.ct-card.is-now .ct-num{background:rgba(255,255,255,.15);color:#fff}
.ct-card.is-now .ct-lbl{color:#8FD8F8}
.ct-card.is-now .ct-val{color:#fff}
.ct-card.is-now .ct-weeks{color:rgba(255,255,255,.78)}
.ct-card.is-now .ct-status{background:rgba(255,255,255,.16);color:#fff}
.ct-card.is-now .ct-arrow{background:linear-gradient(90deg,rgba(255,255,255,.4),#01A3DD)}
.ct-card.is-now .ct-arrow::after{border-color:#01A3DD}
.ct-card.is-past{background:transparent;box-shadow:none;border:1px solid rgba(21,35,59,.1)}
.ct-card.is-past:hover{transform:none;box-shadow:none}
@keyframes ctPulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.ct-card.is-now .ct-status::after{animation:none}}
.ct-dates{display:flex;align-items:center;gap:1.1rem 1.5rem;flex-wrap:wrap}
.ct-d{display:flex;flex-direction:column;gap:.18rem}
.ct-lbl{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ct-val{font-family:var(--serif);font-size:1.13rem;font-weight:600;color:#13294B;line-height:1.25}
.ct-card.is-past .ct-val{color:rgba(21,35,59,.55)}
.ct-arrow{position:relative;width:38px;height:2px;flex:none;background:linear-gradient(90deg,#C9CFDB,#323392);align-self:center;margin-top:.95rem}
.ct-arrow::after{content:"";position:absolute;right:0;top:-3.2px;width:8px;height:8px;border-top:2px solid #323392;border-right:2px solid #323392;transform:rotate(45deg)}
.ct-weeks{font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--muted);white-space:nowrap;justify-self:end}
.ct-more{margin-top:1.7rem}
.ct-callink{margin-top:1.9rem}
@media(max-width:760px){
  .ct-card{grid-template-columns:auto minmax(0,1fr);row-gap:1rem}
  .ct-weeks{grid-column:2;justify-self:start;margin-top:-.4rem}
  .ct-arrow{display:none}
}

/* =====================================================================
   EVENTON LIST SKIN — applies to any [add_eventon_list] rendered in page
   content (Schedule of Court Sittings, 2254). Replaces the plugin's flat
   colored rows (incl. its inline background-color on a.desc_trig) with
   the theme's white card + royal-tint date-panel language.
   ===================================================================== */
#main .evo_events_list_box{margin:1.4rem 0 .4rem}
#main .evcal_month_line{margin:2.2rem 0 1.05rem;padding-bottom:.55rem;border-bottom:1px solid var(--stone-line)}
#main .evcal_month_line:first-child{margin-top:.4rem}
#main .evcal_month_line p{margin:0;max-width:none;font-family:var(--sans);font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#323392}
#main .eventon_list_event{margin:0 0 14px;background:none}
#main .eventon_list_event p.desc_trig_outter{margin:0;max-width:none}
#main .eventon_list_event a.desc_trig{display:flex;align-items:stretch;background:#fff!important;border-radius:10px;box-shadow:0 6px 18px rgba(13,30,64,.07);overflow:hidden;padding:0;transition:transform .18s ease,box-shadow .18s ease}
#main .eventon_list_event a.desc_trig:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(13,30,64,.12)}
#main .eventon_list_event .evoet_c2{flex:none;display:flex}
#main .eventon_list_event .evoet_dayblock{display:flex;align-items:center;justify-content:center;background:#E6E7F2!important;min-width:104px;padding:1rem 1.1rem;height:auto}
#main .eventon_list_event .evo_start{display:flex;flex-direction:column;align-items:center;gap:.12rem}
#main .eventon_list_event .evo_start em{font-style:normal;margin:0;color:inherit}
#main .eventon_list_event .evo_start em.date{font-family:var(--serif);font-size:2rem;line-height:1;font-weight:700;color:var(--teal)!important}
#main .eventon_list_event .evo_start em.month{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#323392!important}
#main .eventon_list_event .evo_start em.time{font-family:var(--sans);font-size:.72rem;color:var(--muted)!important;margin-top:.15rem}
#main .eventon_list_event .evoet_c3{display:flex;flex-direction:column;justify-content:center;gap:.3rem;padding:1.1rem 1.5rem;min-width:0}
#main .eventon_list_event .evoet_title{font-family:var(--serif);font-size:1.08rem;line-height:1.4;font-weight:600;color:#13294B!important;text-transform:none;letter-spacing:0;text-decoration:none}
#main .eventon_list_event a.desc_trig:hover .evoet_title{color:#323392!important}
#main .eventon_list_event .evoet_subtitle{font-family:var(--sans);font-size:.82rem;color:var(--muted)!important}
/* past events read as concluded: ghost-grey date panel, muted type */
#main .past_event a.desc_trig{opacity:.78}
#main .past_event a.desc_trig:hover{opacity:1}
#main .past_event .evoet_dayblock{background:#F1F2F5!important}
#main .past_event .evo_start em.date{color:var(--muted)!important}
#main .past_event .evo_start em.month{color:var(--muted)!important}
/* expanded event card (opens under the row) */
#main .evcal_eventcard{background:var(--ivory);border-radius:0 0 10px 10px;padding:1.15rem 1.5rem;margin-top:2px}
#main .evcal_eventcard .evo_h3{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#323392;margin:0 0 .35rem}
#main .evcal_eventcard p{font-family:var(--sans);font-size:.95rem;max-width:none;margin-bottom:.6rem}
#main .evcal_eventcard .evcal_evdata_icons{color:#323392}
#main .evcal_eventcard .evcal_evdata_row{border:0;padding:.55rem 0}
/* toolbar (search / filter / current-month) — recolor only, keep plugin geometry */
#main .evo_cal_above .cal_head_btn{background:#fff;border:1.5px solid var(--stone-line);color:#323392;transition:.15s ease}
#main .evo_cal_above .cal_head_btn:hover{background:#323392;border-color:#323392;color:#fff}
#main .evo_cal_above .evo-gototoday-btn{font-family:var(--sans);font-weight:600}

/* =====================================================================
   FULLSCREEN MOBILE MENU — the drawer goes edge-to-edge <=980px and
   renders CCJNav2026 (the mega-menu's source) as an accordion: every
   top-level section COLLAPSED by default, tap to expand. Level-2 group
   heads mirror the mega panel (uppercase royal); '#' placeholder heads
   are tagged .mnav-label by ccj.js and act as labels, not links.
   ===================================================================== */
@media(max-width:980px){
  .primary-nav{width:100vw;max-width:none;padding:1.15rem 1.35rem 2.75rem}
}
.primary-nav .mnav>li>ul{display:none}
.primary-nav .mnav>li.open>ul{display:block;padding:.35rem 0 .9rem .4rem}
.primary-nav .mnav>li.menu-item-has-children>a{position:relative;padding-right:2.3rem}
.primary-nav .mnav>li.menu-item-has-children>a::after{content:"+";position:absolute;right:.6rem;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:300;line-height:1;color:#323392;transition:transform .25s ease}
.primary-nav .mnav>li.open>a{color:#323392}
.primary-nav .mnav>li.open>a::after{transform:translateY(-50%) rotate(45deg)}
.primary-nav .mnav>li>ul>li>a{border-bottom:0;padding:.55rem .5rem;font-size:.98rem}
.primary-nav .mnav>li>ul>li.menu-item-has-children>a{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#323392;padding:.85rem .5rem .3rem}
.primary-nav .mnav>li>ul>li>ul{padding:0 0 .4rem .4rem}
.primary-nav .mnav>li>ul>li>ul>li>a{border-bottom:0;padding:.5rem .5rem;font-size:.98rem;color:var(--ink)}
.primary-nav .mnav a{line-height:1.25}  /* tight wrapped lines on long items; item separation comes from each anchor's padding (2026-07-19) */
.primary-nav .mnav a.mnav-label{cursor:default}
.primary-nav .mnav>li>ul>li.mnav-overview>a{font-weight:700;color:#323392;padding-top:.65rem}  /* G13: the section hub itself, reachable from the drawer */
.primary-nav .mnav>li>ul>li.mnav-overview>a span{margin-left:.3rem}

/* ---- Fullscreen menu polish: brand lockup head, serif section rows,
   ghost seal watermark bottom-right (white seal over the same tint
   gradient — background colors unchanged). ---- */
 .primary-nav{background-image:url("img/ccj-seal-white.png"),linear-gradient(172deg,#FFFFFF 0%,#FFFFFF 44%,#E6E7F2 74%,#E0F4FB 100%);background-repeat:no-repeat,no-repeat;background-position:right -80px bottom -80px,0 0;background-size:340px auto,auto}
.primary-nav .drawer-brand{display:flex;align-items:center;gap:.7rem}
.primary-nav .drawer-brand img{width:42px;height:42px;object-fit:contain}
.primary-nav .drawer-brand b{font-family:var(--sans);font-weight:700;font-size:.98rem;line-height:1.22;color:var(--teal)}
.primary-nav .drawer-head{border-bottom:1px solid;border-image:linear-gradient(90deg,#323392,#01A3DD 55%,rgba(1,163,221,0)) 1}
.primary-nav .mnav>li>a{font-family:var(--serif);font-weight:600;font-size:1.1rem;color:var(--teal)}
.primary-nav .mnav>li.open>a{color:#323392}
.primary-nav .drawer-utils a{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#323392}
.primary-nav .mnav>li:last-child>a{border-bottom:0}  /* the drawer-utils top divider already closes the list — one line after CJIS, not two */

.primary-nav .mega-ico{display:none}  /* phone drawer stays icon-free; the >=641px skin re-enables them */

/* ================================================================
   ROYAL FULLSCREEN MENU SKIN (2026-07-19) — desktop + tablet ONLY
   (>=641px). Phones (<=640px) keep the original light slide-in drawer.
   Logo Royal ground, light text, HQ sketch at the foot.
   ================================================================ */
@media(min-width:641px){
.primary-nav{background:#323392}
.primary-nav::before{content:"";position:absolute;left:0;right:0;bottom:0;aspect-ratio:1672/941;background:url("img/ccj-hq-sketch.png") center bottom/cover no-repeat;filter:invert(1);opacity:.07;pointer-events:none}
.primary-nav::after{content:"";position:absolute;inset:0;background:rgba(3,18,44,.32);pointer-events:none}  /* darkening veil over royal + sketch, beneath the content */
.primary-nav>*{position:relative;z-index:1}
.primary-nav a{color:#fff;border-bottom-color:rgba(255,255,255,.14)}
.primary-nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.primary-nav .drawer-title{color:#fff}
.primary-nav .drawer-brand b{color:#fff}  /* wordmark was teal-on-royal (illegible) on tablet — white belongs to the whole royal skin, not just >=981 */
.primary-nav .drawer-close{background:rgba(255,255,255,.12);color:#fff}
.primary-nav .drawer-close:hover{background:rgba(255,255,255,.22)}
.primary-nav .drawer-head{border-image:linear-gradient(90deg,var(--gold-soft),#01A3DD 55%,rgba(1,163,221,0)) 1}
.primary-nav .mnav>li>a{color:#fff}
.primary-nav .mnav>li.open>a{color:var(--gold-soft)}
.primary-nav .mnav>li.menu-item-has-children>a::after{color:var(--gold-soft)}
.primary-nav .mnav>li>ul>li.menu-item-has-children>a{color:#8FD8F8}
.primary-nav .mnav>li>ul>li>ul>li>a{color:#fff}
.primary-nav .drawer-utils{border-top-color:rgba(255,255,255,.18)}
.primary-nav .drawer-utils a{color:rgba(255,255,255,.85)}
.primary-nav .drawer-utils a:hover{color:#fff}
/* submenu icons (injected for Court Documents / Services / Media & Resources) —
   inline before the label, resting semi-transparent, waking cyan on hover */
.primary-nav .mega-ico{display:inline-flex;vertical-align:-5px;margin-right:.6rem;opacity:.65;transition:opacity .15s ease,color .15s ease}
.primary-nav .mega-ico svg{width:21px;height:21px}
.primary-nav .mnav a:hover .mega-ico{opacity:1;color:#01A3DD}
/* fullscreen, content gently inset */
.primary-nav{width:100vw;max-width:none;padding-inline:clamp(1.35rem,8vw,7rem)}

/* entrance: fade + settle with staggered links (phones keep the slide-in) */
.primary-nav{transform:scale(1.03);opacity:0;visibility:hidden;transition:opacity .32s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility .32s}
.primary-nav.open{transform:none;opacity:1;visibility:visible}
/* Chrome pieces (header/search/utils) fade-rise via transition. The rail LINKS use a
   keyframe ANIMATION instead: (a) animating the li would make it the containing block
   for its absolute panel (top-flash bug), and (b) transition-delays on the open state
   would lag every hover effect — animation-delay only affects the entrance. */
.primary-nav .drawer-head,.primary-nav .mobile-search,.primary-nav .drawer-utils{opacity:0;transform:translateY(16px);transition:opacity .3s ease,transform .38s cubic-bezier(.2,.8,.2,1)}
.primary-nav.open .drawer-head,.primary-nav.open .mobile-search,.primary-nav.open .drawer-utils{opacity:1;transform:none}
.primary-nav.open .drawer-head{transition-delay:.03s}
.primary-nav.open .mobile-search{transition-delay:.06s}
.primary-nav.open .drawer-utils{transition-delay:.24s}
@keyframes ccj-item-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.primary-nav.open .mnav>li>a{animation:ccj-item-in .3s cubic-bezier(.2,.8,.2,1) backwards}
.primary-nav.open .mnav>li:nth-child(1)>a{animation-delay:.05s}
.primary-nav.open .mnav>li:nth-child(2)>a{animation-delay:.08s}
.primary-nav.open .mnav>li:nth-child(3)>a{animation-delay:.11s}
.primary-nav.open .mnav>li:nth-child(4)>a{animation-delay:.14s}
.primary-nav.open .mnav>li:nth-child(5)>a{animation-delay:.17s}
.primary-nav.open .mnav>li:nth-child(6)>a{animation-delay:.2s}
.primary-nav.open .mnav>li:nth-child(n+7)>a{animation-delay:.23s}
}
@media(min-width:641px) and (prefers-reduced-motion:reduce){
  .primary-nav{transform:none;transition:opacity .2s ease,visibility .2s}
  .primary-nav .drawer-head,.primary-nav .mobile-search,.primary-nav .drawer-utils{transform:none;transition:opacity .2s ease;transition-delay:0s!important}
  .primary-nav.open .mnav>li>a{animation:none}
}

/* ================================================================
   FULLSCREEN MENU v4 (2026-07-19) — static master-detail screen, no scrolling.
   Header (brand + search + close) on top; below, a LEFT rail of the top-level
   sections in large serif, and the active section's submenu filling the right
   region — its groups flow into a second (and third, when needed) column.
   Hover/click a section on the left to swap the panel. <=980px keeps the accordion.
   ================================================================ */
@media(min-width:981px){
  .primary-nav{display:flex;flex-direction:column;overflow:hidden;padding-top:1.6rem;padding-bottom:1.8rem}
  .primary-nav .drawer-head{flex:0 0 auto;margin-bottom:1rem}
  .primary-nav .drawer-brand b{white-space:nowrap;color:#fff}
  .primary-nav .drawer-brand b br{display:none}   /* "Caribbean Court of Justice" on one line */
  /* third column: chat-style search composer, vertically centered on the right */
  .primary-nav .mobile-search{position:absolute;top:50%;right:clamp(1.35rem,8vw,7rem);transform:translateY(-50%);width:calc(var(--menu-col3) - var(--menu-colgap));max-width:none;margin:0;z-index:2;
    background:#fff;border-radius:16px;padding:.35rem .35rem .35rem 1.1rem;box-shadow:0 10px 34px rgba(0,0,0,.3)}
  .primary-nav .mobile-search::before{content:"What are you looking for?";position:absolute;bottom:100%;left:.2rem;margin-bottom:.9rem;font-family:var(--serif);font-size:1.25rem;font-weight:600;color:#fff;white-space:nowrap}
  .primary-nav .mobile-search input{font-size:1rem;padding:.85rem 0}
  .primary-nav .mobile-search button{width:42px;height:42px;border-radius:50%;background:var(--dark-blue)}
  .primary-nav .mobile-search button:hover{background:#13294B}
  .primary-nav .mnav{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:.15rem}
  .primary-nav .mnav>li{width:clamp(220px,22vw,300px)}
  /* left rail */
  .primary-nav .mnav>li>a{font-family:var(--serif);font-size:clamp(1.3rem,1.9vw,1.75rem);font-weight:600;padding:.5rem 0;border-bottom:0;color:rgba(255,255,255,.72);transition:color .12s ease,padding-left .14s ease}  /* entrance is keyframe-driven, so transitions stay clean for hover */
  .primary-nav .mnav>li>a:hover{background:transparent;color:#fff;padding-left:.9rem}
  .primary-nav .mnav>li.menu-item-has-children>a::after{content:none}
  .primary-nav .mnav>li.open>a{color:var(--gold-soft);padding-left:.9rem}
  .primary-nav .mnav>li.open>a::before,.primary-nav .mnav>li>a:hover::before{content:"";position:absolute;left:0;width:3px;height:1.2em;transform:translateY(.15em);background:var(--gold-soft);border-radius:2px}
  .primary-nav .mnav>li>a{position:relative;display:inline-block;min-width:100%}
  /* detail panel: the open section's submenu, filling the right region */
  /* shared column geometry — rail | panel | search all derive from the same vars */
  .primary-nav{--menu-col1:clamp(240px,24vw,330px);--menu-col3:clamp(320px,26vw,440px);--menu-colgap:clamp(3rem,4.5vw,5.5rem)}
  /* column dividers live on the STATIC .mnav frame, not the swapped panels — no flash on hover */
  .primary-nav .mnav::before,.primary-nav .mnav::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.14)}
  .primary-nav .mnav::before{left:var(--menu-col1)}
  .primary-nav .mnav::after{right:var(--menu-col3)}
  .primary-nav .mnav>li>ul{position:absolute;left:var(--menu-col1);right:var(--menu-col3);top:0;bottom:0;padding-inline:var(--menu-colgap)}
  .primary-nav .mnav>li.open>ul{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem clamp(1.2rem,2vw,2.5rem);align-content:center;animation:ccj-panel-in .32s ease;padding:0 var(--menu-colgap)}  /* padding restated here: the accordion's .open padding rule outspecifies the base panel rule */
  .primary-nav .mnav>li>ul>li>a{padding:.45rem 0;font-size:.98rem;border-bottom:0}
  .primary-nav .mnav>li>ul>li.menu-item-has-children>a{padding:0 0 .5rem;color:#8FD8F8}
  .primary-nav .mnav>li>ul>li>ul{padding:0}
  .primary-nav .mnav>li>ul>li>ul>li>a{padding:.38rem 0;font-size:.95rem;color:rgba(255,255,255,.92)}
  /* icon entries render as TILES, like the mega dropdown: big icon centered above the label */
  .primary-nav .mnav>li>ul>li>a:has(>.mega-ico){display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.75rem;padding:.6rem 0;font-size:.95rem;font-weight:600;background-image:none}
  .primary-nav .mnav>li>ul>li>a:has(>.mega-ico) .mega-ico{margin:0;vertical-align:0}
  .primary-nav .mnav>li>ul>li>a:has(>.mega-ico) .mega-ico svg{width:52px;height:52px}
  .primary-nav .mnav>li>ul>li>a:has(>.mega-ico)::after{content:"";width:56px;height:2px;background:#01A3DD;border-radius:1px;transform:scaleX(0);transition:transform .2s ease-out}
  .primary-nav .mnav>li>ul>li>a:has(>.mega-ico):hover::after,.primary-nav .mnav>li>ul>li>a:has(>.mega-ico):focus-visible::after{transform:scaleX(1);transition:transform .14s ease-in}
  /* same animated underline as the mega-dropdown links — SUBMENU links only, not the left rail */
  .primary-nav .mnav>li>ul a:not(.mnav-label){background-image:linear-gradient(#01A3DD,#01A3DD);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .2s ease-out,color .2s ease}
  .primary-nav .mnav>li>ul a:not(.mnav-label):hover,.primary-nav .mnav>li>ul a:not(.mnav-label):focus-visible{background-color:transparent;background-size:100% 1px;transition:background-size .14s ease-in,color .2s ease;color:var(--gold-soft)}
  /* utility links ride the header row, to the left of the close button */
  .primary-nav .drawer-utils{position:absolute;top:calc(1.6rem + 10px);right:calc(clamp(1.35rem,8vw,7rem) + 130px);flex-direction:row;align-items:center;gap:1.5rem;margin:0;padding:0;border-top:0}
  .primary-nav .drawer-utils a{padding-inline:0}
}
@keyframes ccj-panel-in{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
/* Section overview link (G13, injected first in each submenu by ccj.js) on the royal menu skin
   (Hilwyn 2026-10-02): it was Logo Royal on royal — near invisible — and on desktop it took the
   panel grid's first cell, pushing every group one cell along (About Us wrapped Governance under,
   icon tiles started mid-row). Now a cream header row spanning the panel, above the groups. */
@media(min-width:641px){
  .primary-nav .mnav>li>ul>li.mnav-overview>a{color:#EFE3C8}
  .primary-nav .mnav>li>ul>li.mnav-overview>a:hover{color:#fff}
}
@media(min-width:981px){
  .primary-nav .mnav>li>ul>li.mnav-overview{grid-column:1/-1}
  .primary-nav .mnav>li>ul>li.mnav-overview>a{display:inline-block;padding:0 0 .35rem;font-family:var(--serif);font-size:1.15rem;font-weight:600}
}
@media(min-width:981px) and (prefers-reduced-motion:reduce){
  .primary-nav .mnav>li.open>ul{animation:none}
}

/* ---------- scroll-reveal utility (ccj.js arms html.ccj-rv; reduced-motion never arms) ---------- */
html.ccj-rv .ccj-reveal [data-rv]{opacity:0}
html.ccj-rv .ccj-reveal.rv-in [data-rv]{animation:ccjRise .65s cubic-bezier(.3,.7,.3,1) forwards}
html.ccj-rv .ccj-reveal [data-rv].rv-done{opacity:1;animation:none}
@keyframes ccjRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ---------- WP Accessibility toolbar (G15, CCJ round 2, 2026-09-22) ----------
   The plugin's toolbar (contrast + text size) is switched back on (option wpa_toolbar) and dressed in
   the theme: navy tab off the left edge, gold when active. Its own sheet sets top:43vh and z 99999. */
.a11y-toolbar{top:auto!important;bottom:clamp(88px,13vh,140px)!important;z-index:90!important}
.a11y-toolbar ul{border-radius:0 6px 6px 0!important;overflow:hidden;box-shadow:0 12px 28px rgba(3,18,44,.30)}
.a11y-toolbar ul li button,.a11y-toolbar ul li a.a11y-toggle{width:46px;height:46px;padding:0!important;display:grid;place-items:center;font-size:19px!important;line-height:1;background:var(--photo-dark-blue)!important;color:#fff!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.14)!important;border-radius:0!important;transition:background .2s ease,color .2s ease}
.a11y-toolbar ul li:last-child button,.a11y-toolbar ul li:last-child a.a11y-toggle{border-bottom:0!important}
.a11y-toolbar ul li button:hover,.a11y-toolbar ul li button:focus-visible,.a11y-toolbar ul li a.a11y-toggle:hover{background:#323392!important;color:var(--gold)!important}
.a11y-toolbar ul li button:focus-visible{outline:2px solid var(--gold)!important;outline-offset:-3px}
.a11y-toolbar ul li button.active,.a11y-toolbar ul li a.a11y-toggle.active{background:var(--gold)!important;color:var(--photo-dark-blue)!important}
@media print{.a11y-toolbar{display:none!important}}


/* ---------- Seam divider (Hilwyn 2026-10-02): a white hairline that fades out at both
   ends and runs straight into a solid white diamond — no ring/box around the diamond,
   no gap in the line. Sits ON the seam between two bands (the line IS the divider, like
   the Who We Are seams). Use: <div class="ccj-divider" aria-hidden="true"></div> as the
   first child of a position:relative section. ---------- */
.ccj-divider{position:absolute;top:0;left:50%;width:min(var(--maxw,1240px),calc(100% - 2rem));height:12px;transform:translate(-50%,-50%);pointer-events:none;z-index:1}
.ccj-divider::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);background:linear-gradient(90deg,rgba(255,255,255,0) 0%,#fff 34%,#fff 66%,rgba(255,255,255,0) 100%)}
.ccj-divider::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;transform:translate(-50%,-50%) rotate(45deg);background:#fff}
.sesh1-light{position:relative}