/* BUILD R22-2026-08-04-2015 — if this line is missing on the live site, the upload is stale */
/* ==========================================================================
   cwcc.css — CANONICAL SHARED STYLESHEET
   Canadian Wealth Creation Centre Inc.
   Version 1.0

   This file ships ONCE as a shared asset. Every page links to it.
   No page carries its own <style> block. A palette change is this file,
   uploaded once, and every page updates.

   Link from every page:
     <link rel="stylesheet" href="/wp-content/uploads/cwcc/cwcc.css">

   CONTENTS
     1  Tokens
     2  Reset and base
     3  Utility classes
     4  Layout
     5  Masthead and footer
     6  Hero and fact band
     7  Article shell and prose
     8  Components
     9  Cards and archive
    10  Forms
    11  Services and brand cards
    12  SVG helper classes
    13  Motion
    14  Print
    15  Legacy aliases
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   Sampled from the live cwcc.ca header. Do not substitute the print palette.
   ========================================================================== */
:root{
  /* brand */
  --blue:#0148BC;          /* primary. 7.9:1 on white, 7.1:1 on grey */
  --blue-deep:#012C71;     /* mid dark field */
  --blue-ink:#011B47;      /* deepest field: hero, CTA band, footer */
  --gold:#FCC600;          /* accent. 5.0:1 on blue, 10.6:1 on blue-ink */
  --gold-lift:#FFD634;     /* hover */
  --gold-deep:#8A6B00;     /* REQUIRED when gold must be TEXT on light. 5.0:1 */

  /* neutrals */
  --white:#FFFFFF;
  --grey:#F2F2F2;          /* section background, quiet fills */
  --grey-2:#E4E4E4;        /* hairlines, borders */
  --ink:#222222;           /* body text. 15.9:1 on white */
  --ink-2:#55606E;         /* secondary text. 6.4:1 on white */

  /* on dark fields */
  --on-dark:#EAF1FB;       /* 14.8:1 on blue-ink */
  --on-dark-2:#C4D3EA;     /* 11.1:1 */
  --on-dark-3:#9FB6DE;     /*  8.2:1 */
  --on-dark-4:#8FA2C0;     /*  6.5:1 — smallest permitted on dark */

  /* type */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* metrics */
  --gut:clamp(1.15rem,4vw,3.5rem);
  
  
  --hair:1px solid var(--grey-2);
}

/* CONTRAST RULES — enforced, not advisory
   - Gold on white is 1.6:1. Never text, never a link, never a rule that
     must be seen. Use --gold-deep for gold text on light fields.
   - Text on gold uses --blue-ink, never white.
   - Body text minimum 4.5:1. Large text and UI minimum 3:1.
   - No information conveyed by colour alone.                              */


/* ==========================================================================
   2. RESET AND BASE
   ========================================================================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--serif);font-size:1.0625rem;line-height:1.72;
  font-optical-sizing:auto;
}
img{max-width:100%;height:auto;display:block}
svg{display:block;max-width:100%}
a{color:inherit}
/* Focus ring: dark by default. Gold on white is 1.6:1 and fails SC 1.4.11,
   so gold is used only on dark fields where it reaches 10.6:1. */
:focus-visible{outline:3px solid var(--blue-ink);outline-offset:2px;border-radius:2px}
.mast :focus-visible,.hero :focus-visible,.cta-band :focus-visible,.cta :focus-visible,
.foot :focus-visible,.band--dark :focus-visible,.svc:focus-visible,
.insight :focus-visible{outline-color:var(--gold)}
/* on a gold control the ring must not be gold */
.btn:focus-visible,.mnav .go:focus-visible,.mnav .cta:focus-visible{outline-color:var(--blue-ink)}

.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}
.skip:focus{width:auto;height:auto;clip:auto;clip-path:none;left:1rem;top:1rem;z-index:99;background:var(--blue);color:#fff;padding:.6rem 1rem;border-radius:3px}


/* ==========================================================================
   3. UTILITY CLASSES
   ========================================================================== */
.u-label{font-family:var(--sans);font-size:.6875rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.u-meta{font-family:var(--sans);font-size:.8125rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.badge{font-family:var(--sans);font-size:.625rem;font-weight:700;letter-spacing:.1em;border:1px solid var(--grey-2);padding:.14rem .4rem;border-radius:2px;color:var(--ink-2)}
.token{background:rgba(1,72,188,.1);color:var(--blue);padding:0 .25rem;border-radius:2px;font-family:var(--sans);font-size:.92em}
.foot .token,.hero .token,.cta-band .token,.facts .token,.band--dark .token{background:rgba(252,198,0,.18);color:#FFD75E}


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

.band{padding:clamp(3.5rem,8vh,6rem) 0;border-top:var(--hair)}
.band--quiet{background:var(--grey)}
.band--dark{background:var(--blue-ink);color:var(--on-dark);border-top:none}

/* spine: section label hung in the left margin against a hairline */
.spine{display:grid;grid-template-columns:10rem minmax(0,1fr);gap:0 3rem;align-items:start}
.spine__l{position:relative;padding-top:.4rem}
.spine__l .u-label{color:var(--ink-2)}
.band--dark .spine__l .u-label{color:var(--gold)}
.spine__l::after{content:"";position:absolute;left:0;top:2.5rem;bottom:-1.5rem;width:1px;background:var(--grey-2)}
.band--dark .spine__l::after{background:rgba(255,255,255,.18)}
@media (max-width:52rem){
  .spine{grid-template-columns:1fr;gap:1rem}
  .spine__l::after{display:none}
}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));gap:2.5rem}



/* ==========================================================================
   5. MASTHEAD AND FOOTER
   ========================================================================== */
.topbar{height:6px;background:var(--gold)}
.goldrule{height:4px;background:var(--gold)}

.mast{background:var(--blue);position:relative;z-index:20}
.mast__in{max-width:var(--max);margin:0 auto;padding:.9rem var(--gut);display:flex;align-items:center;justify-content:space-between;gap:1.25rem;flex-wrap:wrap}
.brand,.mark{font-family:var(--sans);font-weight:700;font-size:1rem;letter-spacing:.06em;color:#fff;text-decoration:none;line-height:1.1}
.mnav{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;font-family:var(--sans);font-size:.875rem;font-weight:600}
.mnav a{color:var(--gold);text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent}
.mnav a:hover{border-bottom-color:var(--gold)}
.mnav .go,.mnav .cta{background:var(--gold);color:var(--blue-ink);border:1px solid var(--gold);padding:.55rem 1.1rem;border-radius:2px}
.mnav .go:hover,.mnav .cta:hover{background:var(--gold-lift);border-color:var(--gold-lift)}

.foot{background:var(--blue-ink);color:#B4C4DD;padding:clamp(2.5rem,6vh,4rem) 0 2.25rem;font-size:.875rem}
.foot__in{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.13)}
.foot h5{font-family:var(--sans);font-size:.625rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-4);margin:0 0 1rem}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.5rem}
.foot a{color:#DDE7F6;text-decoration:none}
.foot a:hover{color:#fff;border-bottom:1px solid var(--gold)}
.foot p{max-width:none;margin:0 0 .55rem;line-height:1.65}
.legal{padding-top:2rem;font-family:var(--sans);font-size:.75rem;line-height:1.78;color:var(--on-dark-4)}
.legal p{max-width:54rem;margin:0 0 .9rem}
.legal strong{color:#CBD7E8;font-weight:600}


/* ==========================================================================
   6. HERO AND FACT BAND
   ========================================================================== */
.hero{position:relative;background:var(--blue-ink);color:var(--on-dark);isolation:isolate;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 90% at 78% 34%, rgba(252,198,0,.16), transparent 58%),
    radial-gradient(90% 80% at 8% 8%, rgba(1,72,188,.55), transparent 62%),
    linear-gradient(180deg,#01214F 0%,#011B47 60%,#01152F 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.35;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.hero__grid{max-width:var(--max);margin:0 auto;padding:clamp(3rem,8vh,6rem) var(--gut) clamp(3rem,7vh,5rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:60rem){.hero__grid{grid-template-columns:1fr;gap:2.5rem}}
.hero .eyebrow{color:var(--gold);margin:0 0 1.6rem;display:flex;align-items:center;gap:.75rem}
.hero .eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(252,198,0,.55),transparent)}
.hero h1{font-size:clamp(2.5rem,6.4vw,4.75rem);line-height:1.02;font-weight:200;letter-spacing:-.028em;margin:0;max-width:14ch}
.hero h1 em{font-style:italic;font-weight:300;color:var(--gold);display:block}
.hero .sub{margin:1.9rem 0 0;max-width:34rem;color:var(--on-dark-2);font-size:1.0625rem;line-height:1.75}
.hero .acts{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.2rem}
.hero .licence{margin:2.4rem 0 0;font-family:var(--sans);font-size:.75rem;color:var(--on-dark-3);line-height:1.8}

.facts{background:var(--blue);color:var(--on-dark);border-top:1px solid rgba(255,255,255,.12)}
.facts__in{max-width:var(--max);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.fact{padding:2.25rem 1.5rem;border-right:1px solid rgba(255,255,255,.18)}
.fact:first-child{padding-left:0}
.fact:last-child{border-right:none}
.fact dt{font-family:var(--sans);font-size:.625rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#CFDEF6;margin-bottom:.55rem}
.fact dd{margin:0;font-size:clamp(1.5rem,2.6vw,2.125rem);font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.fact dd small{display:block;font-size:.8125rem;font-family:var(--sans);color:#CFDEF6;margin-top:.5rem;line-height:1.5}
@media (max-width:48rem){.fact{border-right:none;border-bottom:1px solid rgba(255,255,255,.18);padding-right:0}}


/* ==========================================================================
   7. ARTICLE SHELL AND PROSE
   ========================================================================== */
.art{max-width:44rem;margin:0 auto;padding:0 var(--gut) 4rem}
.art--wide{max-width:60rem}

/* article header */
.ahead{padding:clamp(2rem,5vh,3.25rem) 0 1.6rem;border-bottom:var(--hair);margin-bottom:2rem}
.ahead .u-label{color:var(--blue)}
.ahead h1{font-size:clamp(1.9rem,4.6vw,2.9rem);font-weight:400;line-height:1.14;letter-spacing:-.02em;margin:.8rem 0 .9rem}
.ahead .dek{font-size:1.125rem;color:var(--ink-2);margin:0 0 1.3rem}
.byline{display:flex;gap:.65rem;align-items:center;flex-wrap:wrap}

/* prose */
.art p{margin:0 0 1.35rem}
.art h2{font-size:1.4375rem;font-weight:600;letter-spacing:-.012em;line-height:1.3;margin:2.6rem 0 .85rem}
.art h2::before{content:"";display:block;width:2.5rem;height:3px;background:var(--blue);margin-bottom:1rem}
.art h3{font-size:1.1875rem;font-weight:600;margin:1.9rem 0 .6rem}
.art ul,.art ol{margin:0 0 1.35rem;padding-left:1.3rem}
.art li{margin-bottom:.5rem}
p{max-width:var(--measure)}
.art p,.foot p,.legal p,.insight p{max-width:none}

/* section typography outside articles */
h2.sec{font-size:clamp(1.85rem,4vw,3rem);font-weight:300;line-height:1.12;letter-spacing:-.024em;margin:0 0 1.2rem;max-width:20ch}
h2.sec em{font-style:italic;color:var(--gold-deep)}
.band--dark h2.sec em{color:var(--gold)}
h3.sub{font-size:1.25rem;font-weight:500;line-height:1.3;margin:0 0 .5rem;letter-spacing:-.008em}
p.lede{font-size:1.1875rem;line-height:1.72;color:var(--ink-2);max-width:36rem;margin:0 0 1.5rem}
.band--dark p.lede{color:var(--on-dark-2)}

.dropcap::first-letter{float:left;font-size:3.9em;line-height:.82;font-weight:500;color:var(--blue);padding:.06em .1em 0 0}


/* ==========================================================================
   8. COMPONENTS
   ========================================================================== */

/* --- 8.1 insight box: blue field, gold border ------------------------- */
.insight{background:var(--blue);border:3px solid var(--gold);padding:1.6rem 1.75rem;margin:2.4rem 0;color:#fff}
.insight__k{display:flex;align-items:center;gap:.6rem;margin-bottom:.85rem}
.insight__k .u-label{color:var(--gold)}
.insight__k svg{width:20px;height:20px;flex:none;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.insight h3{font-size:1.3125rem;font-weight:500;line-height:1.3;margin:0 0 .6rem;color:#fff;letter-spacing:-.01em}
.insight p{margin:0 0 .85rem;font-size:1rem;line-height:1.68;color:#E8EFFA}
.insight p:last-child{margin-bottom:0}
.insight strong{color:#fff;font-weight:600}
.insight a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.insight ul{margin:0;padding-left:1.15rem;color:#E8EFFA;font-size:1rem}
.insight li{margin-bottom:.5rem}
.insight--deep{background:var(--blue-deep)}
.insight--slim{padding:1.15rem 1.35rem}
.insight--slim h3{font-size:1.0625rem;margin-bottom:.4rem}
.insight--slim p{font-size:.9375rem}

/* --- 8.2 definition block --------------------------------------------- */
.define{background:var(--grey);border-left:4px solid var(--blue);padding:1.3rem 1.5rem;margin:2rem 0}
.define .u-label{color:var(--blue);display:block;margin-bottom:.4rem}
.define p{margin:0;font-size:1rem;max-width:none}

/* --- 8.3 pull quote --------------------------------------------------- */
.pull{margin:2.2rem 0;padding:0 0 0 1.5rem;border-left:4px solid var(--gold);font-size:1.375rem;line-height:1.44;font-style:italic;color:var(--blue-deep)}
.pull p{margin:0;max-width:none}

/* --- 8.4 DUAL-FORMAT DISCLOSURE — both halves mandatory --------------- */
.disclose{margin:2.4rem 0;border:1px solid var(--grey-2)}
.disclose__f{background:var(--grey);border-left:4px solid var(--gold);padding:1.3rem 1.5rem}
.disclose__f .u-label{color:var(--gold-deep);display:block;margin-bottom:.5rem}
.disclose__f p{font-style:italic;font-size:.9375rem;line-height:1.62;margin:0;color:#3A3A3A;max-width:none}
.disclose__p{background:var(--white);padding:1.3rem 1.5rem;border-top:1px solid var(--grey-2)}
.disclose__p p{font-size:.9375rem;line-height:1.7;margin:0;color:var(--ink-2);max-width:none}
.disclose__p p+p{margin-top:.75rem}

/* --- 8.5 figure with infographic (SVG only, structure never values) --- */
figure.info,.figure{margin:2.4rem 0;padding:1.5rem;background:var(--grey);border:1px solid var(--grey-2)}
figure.info svg{margin:0 auto}
figure.info figcaption,.figure figcaption{font-family:var(--sans);font-size:.75rem;color:var(--ink-2);line-height:1.6;margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--grey-2)}

/* --- 8.6 comparison table --------------------------------------------- */
.cmp-wrap{overflow-x:auto}
.cmp{width:100%;border-collapse:collapse;margin:2rem 0;font-size:.9375rem}
.cmp caption{font-family:var(--sans);font-size:.75rem;color:var(--ink-2);text-align:left;padding-bottom:.7rem;line-height:1.55}
.cmp th,.cmp td{border:1px solid var(--grey-2);padding:.85rem 1rem;text-align:left;vertical-align:top}
.cmp thead th{background:var(--blue);color:#fff;font-family:var(--sans);font-size:.8125rem;font-weight:600}
.cmp tbody th{background:var(--grey);font-family:var(--sans);font-size:.8125rem;font-weight:600;width:12rem}
.cmp tbody tr:nth-child(even) td{background:#FAFAFA}

/* --- 8.7 Q&A accordion ------------------------------------------------ */
.qa{border-top:var(--hair);margin-top:2rem}
.qa details{border-bottom:var(--hair)}
.qa summary{cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;font-size:1.125rem;font-weight:500;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:.4rem;top:1rem;font-family:var(--sans);font-size:1.5rem;color:var(--blue);line-height:1}
.qa details[open] summary::after{content:"\2013"}
.qa summary:hover{color:var(--blue)}
.qa__a{padding:0 0 1.4rem}
.qa__a p{margin:0 0 .9rem;font-size:1rem;max-width:none}
.qa__a .direct{background:var(--grey);border-left:4px solid var(--gold);padding:.9rem 1.1rem;margin:0 0 1.1rem;font-size:1rem}

/* --- 8.8 numbered step ------------------------------------------------ */
.jump{position:sticky;top:0;background:var(--white);border-bottom:var(--hair);padding:.7rem 0;z-index:40;margin-bottom:1.5rem}
.jump ol{list-style:none;display:flex;gap:1.1rem;margin:0;padding:0;overflow-x:auto;font-family:var(--sans);font-size:.8125rem}
.jump a{text-decoration:none;color:var(--ink-2);white-space:nowrap;padding-bottom:3px;border-bottom:2px solid transparent}
.jump a:hover{color:var(--blue);border-bottom-color:var(--gold)}
.step{display:grid;grid-template-columns:4.25rem minmax(0,1fr);gap:1.5rem;padding:2rem 0;border-top:var(--hair)}
.step__n{font-family:var(--sans);font-size:2.25rem;font-weight:700;color:var(--gold-deep);line-height:1;font-variant-numeric:tabular-nums}
.step h2{margin:0 0 .6rem;font-size:1.375rem}
.step h2::before{display:none}
.step p{margin:0 0 1rem;max-width:none}
@media (max-width:34rem){.step{grid-template-columns:1fr;gap:.5rem}}

/* alternate step list used on standard pages */
.steps{list-style:none;margin:2.75rem 0 0;padding:0;max-width:none;border-top:var(--hair)}
.steps li{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:2rem;padding:2rem 0;border-bottom:var(--hair)}
.steps .k{font-family:var(--sans);font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);padding-top:.5rem}
.steps h3{font-size:1.5rem;font-weight:400;margin:0 0 .5rem;letter-spacing:-.014em}
.steps p{margin:0;color:var(--ink-2);font-size:1rem;max-width:44rem}
@media (max-width:40rem){.steps li{grid-template-columns:1fr;gap:.4rem}}

/* --- 8.9 glossary term ------------------------------------------------ */
.term{border-top:3px solid var(--blue);padding-top:1.5rem}
.term__fr{font-family:var(--sans);font-size:.9375rem;color:var(--ink-2);margin:.3rem 0 1.4rem}
.term__def{font-size:1.1875rem;line-height:1.65;border-left:4px solid var(--gold);padding-left:1.3rem;margin:0 0 2rem;max-width:none}
.term__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1px;background:var(--grey-2);border:1px solid var(--grey-2);margin:2rem 0}
.term__meta div{background:var(--white);padding:1rem 1.1rem}
.term__meta dt{font-family:var(--sans);font-size:.625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.35rem}
.term__meta dd{margin:0;font-size:.9375rem}
.seealso{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem}
.seealso a{font-family:var(--sans);font-size:.8125rem;text-decoration:none;padding:.35rem .8rem;border:1px solid var(--grey-2);border-radius:999px;color:var(--blue)}
.seealso a:hover{background:var(--grey)}

/* --- 8.10 buttons ----------------------------------------------------- */
.btn{display:inline-block;font-family:var(--sans);font-size:.9375rem;font-weight:700;text-decoration:none;padding:.85rem 1.6rem;border-radius:2px;background:var(--gold);color:var(--blue-ink);border:2px solid var(--gold);cursor:pointer;transition:background .2s,transform .2s}
.btn:hover{background:var(--gold-lift);border-color:var(--gold-lift);transform:translateY(-1px)}
.btn--onblue{background:var(--gold);color:var(--blue-ink)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);font-weight:600}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}

/* --- 8.11 CTA: inline, banner, band ----------------------------------- */
.cta-inline{border-left:5px solid var(--gold);background:var(--grey);padding:1.35rem 1.5rem;margin:2.4rem 0}
.cta-inline .u-label{color:var(--gold-deep);display:block;margin-bottom:.5rem}
.cta-inline p{margin:0 0 1rem;font-size:1rem;color:var(--ink);max-width:none}

/* the small banner that appears on EVERY article and page,
   directing to the single canonical contact page */
.cta-banner{
  background:var(--blue);border:3px solid var(--gold);
  display:flex;align-items:center;justify-content:space-between;
  gap:1.25rem;flex-wrap:wrap;padding:1.25rem 1.5rem;margin:2.75rem 0;
}
.cta-banner__t{color:#fff;font-size:1.0625rem;line-height:1.45;margin:0;max-width:34rem}
.cta-banner__t strong{font-weight:600}
.cta-banner .btn{flex:none;padding:.7rem 1.35rem;font-size:.875rem}
@media (max-width:34rem){.cta-banner{flex-direction:column;align-items:flex-start}}

.cta-band,.cta{background:var(--blue-ink);color:#fff;margin:3rem 0 0;position:relative;overflow:hidden}
.cta-band::before,.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 130% at 82% 50%,rgba(252,198,0,.16),transparent 62%)}
.cta-band__in,.cta__in{position:relative;max-width:var(--max);margin:0 auto;padding:clamp(2.5rem,6vh,3.75rem) var(--gut)}
.cta-band h2,.cta h2{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:300;letter-spacing:-.022em;line-height:1.14;margin:0 0 1rem;max-width:18ch}
.cta-band h2::before,.cta h2::before{display:none}
.cta-band h2 em,.cta h2 em{font-style:italic;color:var(--gold)}
.cta-band p,.cta p{color:var(--on-dark-2);margin:0 0 1.75rem;font-size:1.0625rem;max-width:36rem}
.cta-band .acts,.cta .acts{display:flex;gap:.75rem;flex-wrap:wrap}
.cta-band .fine,.cta .fine{font-family:var(--sans);font-size:.75rem;color:var(--on-dark-4);margin:1.5rem 0 0;line-height:1.7;max-width:40rem}

/* --- 8.12 page banner (SVG motif, one per silo) ----------------------- */
.banner{background:var(--blue-deep);position:relative;overflow:hidden}
.banner svg{width:100%;height:auto}
.banner__cap{position:absolute;left:0;right:0;bottom:0;padding:1.25rem var(--gut);background:linear-gradient(0deg,rgba(1,27,71,.92),transparent)}
.banner__cap .u-label{color:var(--gold)}

/* --- 8.13 author block ------------------------------------------------ */
.author{display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:1.2rem;margin-top:3rem;padding-top:1.8rem;border-top:3px solid var(--blue)}
.author__m,.author__mark{width:3.25rem;height:3.25rem;border-radius:50%;background:var(--blue);color:var(--gold);display:grid;place-items:center;font-family:var(--sans);font-weight:700;font-size:.9375rem}
.author h4{margin:0 0 .2rem;font-size:1.0625rem;font-weight:500}
.author .role{font-family:var(--sans);font-size:.8125rem;color:var(--ink-2);margin:0 0 .7rem;max-width:none}
.author p{font-size:.9375rem;color:var(--ink-2);margin:0;max-width:none}
.related{border-top:var(--hair);margin-top:3rem;padding-top:1.8rem}

/* --- 8.14 recognition list -------------------------------------------- */
.recog{list-style:none;margin:2.5rem 0 0;padding:0;max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 3rem}
.recog li{margin:0;padding-left:1.6rem;position:relative;font-size:1rem;line-height:1.65;color:var(--ink-2)}
.recog li::before{content:"";position:absolute;left:0;top:.72em;width:.6rem;height:2px;background:var(--blue)}
@media (max-width:46rem){.recog{grid-template-columns:1fr}}

/* --- 8.15 bio --------------------------------------------------------- */
.bio{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2rem;align-items:start}
.bio__mark{width:5rem;height:5rem;border-radius:50%;border:1px solid var(--grey-2);display:grid;place-items:center;font-family:var(--sans);font-weight:700;font-size:1.25rem;color:var(--blue);background:#fff}
@media (max-width:40rem){.bio{grid-template-columns:1fr}}


/* ==========================================================================
   9. CARDS AND ARCHIVE
   ========================================================================== */
.card{display:flex;flex-direction:column;padding-top:1.1rem;border-top:2px solid var(--grey-2);transition:border-color .22s}
.card:hover{border-top-color:var(--blue)}
.card__b{background:var(--blue-deep);margin-bottom:1rem}
.card__b svg{width:100%;height:auto}
.card__cat{font-family:var(--sans);font-size:.6875rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:.55rem}
.card h3{font-size:1.25rem;line-height:1.28;font-weight:500;letter-spacing:-.01em;margin:0 0 .55rem}
.card h3 a{text-decoration:none}
.card h3 a:hover{color:var(--blue)}
.card p{font-size:.9375rem;line-height:1.6;color:var(--ink-2);margin:0 0 1rem;max-width:none}
.card__f,.card__foot{margin-top:auto;display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;padding-top:.75rem;border-top:var(--hair)}

/* archive header */
.ahd{padding:clamp(2.5rem,6vh,4rem) 0 1.75rem}
.ahd h1{font-size:clamp(2rem,5vw,3.25rem);font-weight:400;letter-spacing:-.024em;margin:.6rem 0 .8rem;line-height:1.08;max-width:20ch}
.ahd h1 em{font-style:italic;color:var(--gold-deep)}
.ahd p{max-width:42rem;color:var(--ink-2);font-size:1.0625rem;margin:0}

.filters{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;padding:1.1rem 0;border-top:var(--hair);border-bottom:var(--hair);margin-bottom:2.75rem}
.filters__sp{flex:1 1 2rem}
.chip{font-family:var(--sans);font-size:.8125rem;text-decoration:none;padding:.4rem .85rem;border:1px solid var(--grey-2);border-radius:999px;color:var(--ink-2);white-space:nowrap}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip[aria-current="true"]{background:var(--blue);border-color:var(--blue);color:#fff}

.lead{display:grid;grid-template-columns:1.25fr .95fr;gap:2.5rem;padding-bottom:2.75rem;margin-bottom:2.75rem;border-bottom:3px solid var(--blue)}
.lead__flag{grid-column:1/-1;display:flex;align-items:center;gap:.8rem;margin-bottom:1.6rem}
.lead__flag .u-label{color:var(--gold-deep)}
.lead__flag::after{content:"";flex:1;height:1px;background:var(--grey-2)}
.lead h2{font-size:clamp(1.7rem,3.8vw,2.5rem);font-weight:400;line-height:1.12;letter-spacing:-.02em;margin:.9rem 0 .9rem}
.lead h2::before{display:none}
.lead h2 a{text-decoration:none}
.lead h2 a:hover{color:var(--blue)}
.lead .dek,.lead__dek{color:var(--ink-2);margin:0 0 1.1rem;max-width:34rem}
.lead__side{padding-top:.5rem}
@media (max-width:52rem){.lead{grid-template-columns:1fr;gap:1.4rem}.lead__side{padding-top:0}}

.pager{display:flex;gap:.4rem;justify-content:center;margin-top:4rem;padding-top:2rem;border-top:var(--hair);font-family:var(--sans);font-size:.875rem}
.pager a{text-decoration:none;min-width:2.4rem;text-align:center;padding:.5rem .6rem;border:1px solid var(--grey-2);border-radius:2px;color:var(--ink-2)}
.pager a[aria-current="page"]{background:var(--blue);border-color:var(--blue);color:#fff}
.pager a:hover{border-color:var(--blue);color:var(--blue)}
.pager a[aria-current="page"]:hover{color:#fff}


/* ==========================================================================
   10. FORMS
   ========================================================================== */
.form-card{border:3px solid var(--gold);background:var(--white);margin:2.5rem 0}
.form-card__head{background:var(--blue);color:#fff;padding:1.5rem 1.75rem}
.form-card__head .u-label{color:var(--gold);display:block;margin-bottom:.5rem}
.form-card__head h2{font-size:1.5rem;font-weight:500;margin:0 0 .4rem;line-height:1.22}
.form-card__head h2::before{display:none}
.form-card__head p{margin:0;font-size:.9375rem;color:#D2DEF1;max-width:none}
.form-card__body{padding:1.75rem}

.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:34rem){.fgrid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;margin-bottom:1.1rem}
.field label{font-family:var(--sans);font-size:.8125rem;font-weight:600;margin-bottom:.4rem}
.field .req{color:#B3261E}
.field .hint{font-family:var(--sans);font-size:.75rem;color:var(--ink-2);margin-top:.35rem}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:.9375rem;padding:.7rem .8rem;border:1px solid #9AA3AE;border-radius:2px;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);outline:3px solid rgba(1,72,188,.25);outline-offset:0}
.field textarea{min-height:6.5rem;resize:vertical}

fieldset{border:1px solid var(--grey-2);padding:1.1rem 1.25rem;margin:0 0 1.1rem}
legend{font-family:var(--sans);font-size:.8125rem;font-weight:600;padding:0 .4rem}
.radios{display:flex;gap:1.5rem;margin-top:.5rem}
.radios label{font-family:var(--sans);font-size:.9375rem;font-weight:400;display:flex;align-items:center;gap:.4rem;cursor:pointer}
.radios input{width:1.05rem;height:1.05rem;accent-color:var(--blue)}
.screen-note{font-family:var(--sans);font-size:.75rem;color:var(--ink-2);margin:.6rem 0 0;line-height:1.6;max-width:none}

.consent{display:grid;grid-template-columns:1.3rem 1fr;gap:.7rem;align-items:start;margin-bottom:1rem}
.consent input{width:1.15rem;height:1.15rem;margin-top:.2rem;accent-color:var(--blue)}
.consent label{font-family:var(--sans);font-size:.8125rem;line-height:1.6;color:var(--ink-2)}
.consent a{color:var(--blue)}

.privacy{background:var(--grey);border-left:5px solid var(--gold);padding:1rem 1.15rem;margin:1.25rem 0}
.privacy p{font-family:var(--sans);font-size:.75rem;line-height:1.65;color:var(--ink-2);margin:0 0 .6rem;max-width:none}
.privacy p:last-child{margin-bottom:0}
.privacy strong{color:var(--ink)}

.submit-row{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;padding-top:.5rem}
.submit-row .antispam{font-family:var(--sans);font-size:.75rem;color:var(--ink-2)}

/* demo scaffolding */
.sec-head{border-top:var(--hair);margin-top:4rem;padding-top:1.5rem}
.sec-head h2{font-family:var(--sans);font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin:0 0 .35rem}
.sec-head h2::before{display:none}
.sec-head p{font-size:.9375rem;color:var(--ink-2);margin:0 0 1.5rem;font-family:var(--sans)}
.intro{padding:2.5rem 0 0}
.intro h1{font-size:clamp(1.8rem,4.4vw,2.5rem);font-weight:400;letter-spacing:-.02em;line-height:1.14;margin:.5rem 0 .8rem}
.intro p{color:var(--ink-2);margin:0}


/* ==========================================================================
   11. SERVICES AND BRAND CARDS
   ========================================================================== */
.svcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16);margin-top:2.5rem}
.svc{background:var(--blue-deep);padding:2rem 1.75rem 1.75rem;text-decoration:none;display:block;position:relative;transition:background .25s}
.svc:hover{background:var(--blue)}
.svc__n{font-family:var(--sans);font-size:.625rem;font-weight:700;letter-spacing:.16em;color:var(--gold);display:block;margin-bottom:1.1rem}
.svc h3{font-size:1.3125rem;font-weight:400;margin:0 0 .6rem;letter-spacing:-.012em;color:#fff}
.svc p{font-size:.9375rem;line-height:1.62;color:#BDD0EE;margin:0;max-width:none}
.svc__go{display:inline-block;margin-top:1.1rem;font-family:var(--sans);font-size:.8125rem;color:#fff;border-bottom:1px solid var(--gold);padding-bottom:1px}
.svc--pillar{background:var(--blue)}
.svc--pillar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}

.brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1px;background:var(--grey-2);border:var(--hair);margin-top:2.5rem}
.brandcard{background:var(--white);padding:2rem 1.75rem;text-decoration:none;display:block}
.brandcard:hover{background:var(--grey)}
.brandcard__k{display:block;margin-bottom:.9rem;color:var(--blue)}
.brandcard h3{font-size:1.375rem;font-weight:400;margin:0 0 .5rem;letter-spacing:-.01em}
.brandcard p{font-size:.9375rem;color:var(--ink-2);margin:0;line-height:1.6}
.brandcard__go{font-family:var(--sans);font-size:.8125rem;margin-top:1.1rem;display:inline-block;border-bottom:2px solid var(--gold)}


/* ==========================================================================
   12. SVG HELPER CLASSES
   Applied to <text> and <path> inside inline SVG.
   ========================================================================== */
.svg-l{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.svg-t{font-family:var(--sans);font-size:12.5px}
.svg-s{font-family:var(--sans);font-size:11px;fill:#6A737F}
.fig-t{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.fig-t.warm{fill:var(--gold)}
.fig-t.cool{fill:var(--on-dark-3)}
.fig-s{font-family:var(--sans);font-size:11.5px;fill:#BDD0EE}

/* capital-flow hero figure */
.flow-loop{fill:none;stroke:var(--gold);stroke-width:1.6;opacity:.95}
.flow-loop-glow{fill:none;stroke:var(--gold);stroke-width:7;opacity:.14;filter:blur(3px)}
.flow-leak{fill:none;stroke:#6C86BC;stroke-width:1.4;stroke-dasharray:1 7;stroke-linecap:round;opacity:.85}
.flow-in{fill:none;stroke:#8FA9D8;stroke-width:1.4}
.dash{fill:none;stroke:var(--gold-lift);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:14 200;filter:drop-shadow(0 0 5px rgba(255,214,52,.6));animation:travel 7.2s linear infinite}
.dash-2{animation-delay:-2.4s}
.dash-3{animation-delay:-4.8s}
@keyframes travel{to{stroke-dashoffset:-856}}
.node{fill:var(--blue-ink);stroke:var(--gold);stroke-width:1.6}
.node-pulse{fill:var(--gold);opacity:.22;animation:pulse 3.4s ease-in-out infinite}
@keyframes pulse{0%,100%{r:9;opacity:.22}50%{r:19;opacity:0}}


/* ==========================================================================
   13. MOTION
   ========================================================================== */
/* Content-hiding is gated behind .js, which is only added by script.
   Without JavaScript the content is simply visible. It must never depend
   on JS to be readable. */
.reveal{transition:opacity .7s cubic-bezier(.22,.7,.3,1),transform .7s cubic-bezier(.22,.7,.3,1)}
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.in{opacity:1;transform:none}
.js .rise{animation:rise .75s cubic-bezier(.22,.7,.3,1) forwards}
.js .rise{opacity:0;transform:translateY(14px)}
.rise--2{animation-delay:.1s}.rise--3{animation-delay:.2s}.rise--4{animation-delay:.3s}
@keyframes rise{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .js .reveal{opacity:1!important;transform:none!important}
  .js .rise{opacity:1;transform:none}
  .dash{stroke-dasharray:none;opacity:.5}
  html{scroll-behavior:auto}
}


/* ==========================================================================
   14. PRINT
   ========================================================================== */
@media print{
  .mnav,.cta-banner,.cta-band,.cta,.jump,.filters,.pager{display:none}
  body{font-size:11pt;color:#000;background:#fff}
  .hero,.band--dark,.facts,.foot{background:#fff!important;color:#000!important}
  .insight{border:2px solid #000;background:#fff;color:#000}
  .insight h3,.insight p,.insight strong{color:#000}
  .disclose{border:1px solid #000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
}


/* ==========================================================================
   15. LEGACY ALIASES
   The demo files evolved and some components acquired two names.
   These aliases keep the existing markup working. Prefer the canonical
   name on the left in all NEW pages.

     canonical          alias
     .author__m         .author__mark
     .card__f           .card__foot
     .cta-band          .cta  /  .cta-band__in  .cta__in
     figure.info        .figure
     .step / .step__n   .steps / .steps .k
     .ahead .dek        .art__head .art__dek / .lead__dek
     .byline            .art__by
   ========================================================================== */
.art__head{padding:clamp(2rem,5vh,3.25rem) 0 1.6rem;border-bottom:var(--hair);margin-bottom:2rem}
.art__head .u-label{color:var(--blue)}
.art__head h1{font-size:clamp(1.9rem,4.6vw,2.9rem);font-weight:400;line-height:1.14;letter-spacing:-.02em;margin:.8rem 0 .9rem}
.art__dek{font-size:1.125rem;color:var(--ink-2);margin:0 0 1.3rem;max-width:none}
.art__by{display:flex;gap:.65rem;align-items:center;flex-wrap:wrap}

/* ==========================================================================
   16. SITE ADDENDUM — classes the 335 pages rely on
   ========================================================================== */

/* .essay — article wrapper on 218 content pages. Same shell as .art. */
.essay{max-width:44rem;margin:0 auto;padding:0 var(--gut) 4rem}
.essay p{margin:0 0 1.35rem;max-width:none}
.essay h2{font-size:1.4375rem;font-weight:600;letter-spacing:-.012em;line-height:1.3;margin:2.6rem 0 .85rem}
.essay h2::before{content:"";display:block;width:2.5rem;height:3px;background:var(--blue);margin-bottom:1rem}
.essay h3{font-size:1.1875rem;font-weight:600;margin:1.9rem 0 .6rem}
.essay ul,.essay ol{margin:0 0 1.35rem;padding-left:1.3rem}
.essay li{margin-bottom:.5rem}
.essay hr{border:none;border-top:1px solid var(--grey-2);margin:2.75rem 0}
.essay > h1{font-size:clamp(1.9rem,4.6vw,2.9rem);font-weight:400;line-height:1.14;letter-spacing:-.02em;margin:1.6rem 0 .9rem}

/* silo banner variants */
.banner--sovereignty{background:var(--blue-ink)}
.banner--wealth{background:var(--blue-deep)}
.banner--life{background:var(--blue)}
.banner--investment{background:linear-gradient(100deg,var(--blue-ink),var(--blue))}
.banner--living{background:linear-gradient(100deg,var(--blue),var(--blue-deep))}
.banner--succession{background:linear-gradient(100deg,var(--blue),var(--blue-ink))}
.banner--group{background:linear-gradient(100deg,var(--blue-deep),var(--blue-ink))}

/* category cards — type and rule, no rounded corners, no shadow */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1px;background:var(--grey-2);border:1px solid var(--grey-2);margin:2.5rem 0}
.cat-card{display:block;text-decoration:none;background:var(--white);transition:background .2s}
.cat-card:hover{background:var(--grey)}
.cat-card__band{height:6px}
.cat-card__body{padding:1.4rem 1.4rem 1.5rem}
.cat-card__body h3{font-size:1.1875rem;font-weight:500;margin:0 0 .5rem;letter-spacing:-.01em}
.cat-card__body p{font-size:.9375rem;line-height:1.6;color:var(--ink-2);margin:0;max-width:none}
.cat-card:hover .cat-card__body h3{color:var(--blue)}

/* form: anti-spam challenge, honeypot, visually hidden, error state */
.challenge .challenge-a,.challenge .challenge-b{font-variant-numeric:tabular-nums;font-weight:700;color:var(--blue-ink)}
.u-hp{position:absolute!important;left:-9999px!important;height:1px;width:1px;overflow:hidden}
.u-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.form-err{background:var(--white);border:2px solid var(--gold-deep);color:var(--blue-ink);
          font-family:var(--sans);font-weight:600;padding:.7rem 1rem;margin:.6rem 0 0;font-size:.875rem}

/* tabular figures wherever numbers are compared */
figure figcaption,.figures,td.num,.term__meta,time{font-variant-numeric:tabular-nums}

/* booking embed slot, replaced at deploy */
.placeholder{border:1px dashed var(--grey-2);background:var(--grey);padding:1.5rem;text-align:center;
             font-family:var(--sans);font-size:.875rem;color:var(--ink-2);margin:2rem 0}

/* ==========================================================================
   17. CASCADE DEFENCES
   Text on a dark field always declares its own colour. Inheritance loses
   to any direct element rule, so nothing here is left to inherit.
   ========================================================================== */
main{max-width:none;margin:0;padding:0;width:auto}

.hero,.hero p{color:var(--on-dark)}
.hero h1,.hero h2,.hero h3{color:var(--on-dark)}
.hero h1 em{color:var(--gold)}
.hero .sub{color:var(--on-dark-2)}
.hero .licence{color:var(--on-dark-3)}

.band--dark,.band--dark p{color:var(--on-dark)}
.band--dark h1,.band--dark h2,.band--dark h3,.band--dark h4{color:var(--on-dark)}
.band--dark h2.sec em{color:var(--gold)}

.facts,.facts dd{color:var(--on-dark)}
.facts dt,.facts dd small{color:#CFDEF6}

.cta-band,.cta,.cta-band p,.cta p{color:var(--on-dark-2)}
.cta-band h2,.cta h2{color:#fff}
.cta-band h2 em,.cta h2 em{color:var(--gold)}

.mast .mark,.mast .brand{color:#fff}
.mast .mark small,.mast .brand small{color:var(--gold)}
.mnav a{color:var(--gold)}
.mnav .go,.mnav .cta{color:var(--blue-ink)}

.insight,.insight p{color:#E8EFFA}
.insight h3,.insight h4,.insight strong{color:#fff}
.insight__k .u-label{color:var(--gold)}

.svc h3{color:#fff}
.svc p{color:#BDD0EE}
.svc__go{color:#fff}
.banner__cap .u-label{color:var(--gold)}

.foot,.foot p{color:#B4C4DD}
.foot h5{color:var(--on-dark-4)}
.foot a{color:#DDE7F6}
.legal,.legal p{color:var(--on-dark-4)}
.legal strong{color:#CBD7E8}

.figure--flush{margin:0;padding:0;background:transparent;border:none}
.bio .u-meta{margin:0 0 .8rem}

/* ==========================================================================
   18. INNER-PAGE CONTAINER
   Inner pages emit content as direct children of <main> with no wrapper.
   Give every such child the 1280px centred container — except components
   that are full-bleed by design. :where() keeps specificity at zero so
   component rules (.essay 44rem measure, .art) still win.
   ========================================================================== */
main > :where(:not(.hero):not(.facts):not(.band):not(.cta-band):not(.banner):not(.wrap):not(.topbar):not(.goldrule)){
  max-width:var(--max);
  margin-left:auto;margin-right:auto;
  padding-left:var(--gut);padding-right:var(--gut);
}
main > .banner{max-width:var(--max);margin:0 auto}
hr{border:none;border-top:1px solid var(--grey-2);max-width:var(--max);margin:1.75rem auto}
.banner:empty{min-height:110px}
#breadcrumb{font-family:var(--sans)}
#breadcrumb small{font-size:.8125rem;color:var(--ink-2)}
#breadcrumb a{color:var(--blue);text-decoration:none}
#breadcrumb a:hover{text-decoration:underline}

/* ==========================================================================
   19. ELEVATION
   Client direction: visible shadows on boxes and buttons.
   One soft ambient + one lifted hover level, in brand ink.
   ========================================================================== */
:root{
  
  
  
}
.btn{box-shadow:var(--shadow-1);border-radius:4px}
.btn:hover{box-shadow:var(--shadow-2)}
.mnav .go,.mnav .cta{box-shadow:var(--shadow-1);border-radius:4px}

.cat-card{box-shadow:var(--shadow-1);border-radius:var(--radius);overflow:hidden;transition:box-shadow .22s,transform .22s}
.cat-card:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.cat-grid{gap:1.25rem;background:transparent;border:none}

.card{background:var(--white);border:1px solid #E8ECF2;border-radius:var(--radius);
      padding:1.25rem 1.25rem 1rem;box-shadow:var(--shadow-1);transition:box-shadow .22s,transform .22s,border-color .22s}
.card:hover{box-shadow:var(--shadow-2);transform:translateY(-3px);border-color:#D2DEF1}
.card__b{margin:-1.25rem -1.25rem 1rem;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden}

.insight{box-shadow:var(--shadow-2);border-radius:var(--radius)}
.disclose{box-shadow:var(--shadow-1);border-radius:var(--radius);overflow:hidden}
.cta-banner{box-shadow:var(--shadow-2);border-radius:var(--radius)}
.form-card{box-shadow:var(--shadow-2);border-radius:var(--radius);overflow:hidden}
figure.info,.figure:not(.figure--flush){box-shadow:var(--shadow-1);border-radius:var(--radius)}
.cmp-wrap{box-shadow:var(--shadow-1);border-radius:var(--radius)}
.svc{transition:background .25s,box-shadow .25s,transform .25s}
.svc:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.chip{background:#fff;box-shadow:0 1px 2px rgba(1,27,71,.08)}

@media print{
  .btn,.card,.cat-card,.insight,.disclose,.cta-banner,.form-card,.cmp-wrap{box-shadow:none}
}


/* ==========================================================================
   20. AUDIT REMEDIATION
   ========================================================================== */

/* 20.1 — P1-2: media containers that expect an SVG child must not collapse.
   314 .banner and 218 .card__b elements ship empty; without an intrinsic
   height the silo colour system is invisible and .lead grids break. */
.banner{aspect-ratio:1280/150;min-height:6.5rem}
.banner:empty::after{content:"";display:block;height:100%}
.card__b{aspect-ratio:16/9;min-height:8rem}
.card__b:empty::after{content:"";display:block;height:100%}
.lead .card__b{min-height:12rem}

/* 20.2 — P0-2: text on the blue CTA banner declares its own colour.
   A <p> without .cta-banner__t inherited --ink and rendered at 1.9:1. */
.cta-banner p,.cta-banner a:not(.btn){color:#fff}
.cta-banner a:not(.btn){text-decoration:underline;text-underline-offset:3px}

/* 20.3 — container. Client specification is a 1280px container (80rem).
   The gutter sits inside the cap, so content never touches the viewport
   edge even when the window is exactly 1280px wide. */
:root{--max:80rem}

/* 20.4 — P1-4: deterministic grids instead of auto-fit orphan rows */
@media (min-width:64rem){
  .svcs{grid-template-columns:repeat(3,1fr)}
  .cat-grid{grid-template-columns:repeat(4,1fr)}
  .grid{grid-template-columns:repeat(3,1fr)}
}

/* 20.5 — P1-5: SVG labels are absolute px and were rendering near 8px */
.fig-t{font-size:15px}
.fig-s{font-size:15.5px}
.svg-t{font-size:15px}
.svg-s{font-size:14px}
.svg-l{font-size:13px}

/* 20.6 — P1-6: persistent navigation on long pages */
.mast{position:sticky;top:0;z-index:60}
.jump{z-index:40}

/* 20.7 — P2: tap targets (WCAG 2.2 SC 2.5.8) */
.mnav a{padding:.6rem 0 .5rem;border-bottom-width:2px}
.chip,.seealso a,.pager a{min-height:44px;display:inline-flex;align-items:center}

/* 20.8 — P2: print must not destroy the legal disclosures.
   The footer carries the compliance, terminology and compensation text;
   the parent rule alone left links and legal copy near-white on white. */
@media print{
  .foot,.foot p,.foot a,.foot h5,.legal,.legal p,.legal strong{color:#000!important}
  .foot a{text-decoration:underline}
  .topbar,.goldrule{display:none}
}

/* 20.9 — P2: hover must never be the only affordance */
.card h3 a,.cat-card,.svc{transition:box-shadow .22s,transform .22s,border-color .22s}
.qa summary:focus-visible{outline-offset:-2px}
[aria-current="page"]{border-bottom:2px solid var(--gold)!important}

/* 20.10 — P1-8: reading measure toward the 45-75ch band */
:root{--measure:36rem}
.art,.essay{max-width:40rem}

/* ==========================================================================
   21. MOBILE NAVIGATION
   Seven items wrapped to three rows on a phone and consumed a third of the
   viewport. The toggle is injected by cwcc-nav.js, so with no JavaScript
   the nav degrades to the previous wrapped list rather than disappearing.
   ========================================================================== */
.mnav__t{display:none}
@media (max-width:60rem){
  .mast__in{flex-wrap:wrap;gap:.75rem}
  .mnav__t{display:inline-grid;place-items:center;min-width:44px;min-height:44px;
           color:var(--gold);background:transparent;border:1px solid rgba(255,255,255,.4);
           border-radius:3px;cursor:pointer;margin-left:auto}
  .mnav__t:hover{background:rgba(255,255,255,.08)}
  .js .mnav{display:none;flex-direction:column;align-items:stretch;gap:0;width:100%;order:3}
  .js .mnav[data-open]{display:flex}
  .js .mnav a{width:100%;padding:.9rem .25rem;border-bottom:1px solid rgba(255,255,255,.14);
              border-radius:0;min-height:44px;display:flex;align-items:center}
  .js .mnav .go,.js .mnav .cta{justify-content:center;margin-top:.6rem;border-radius:3px}
}
@media (max-width:40rem){
  .facts__in{grid-template-columns:repeat(2,1fr)}
  .fact{border-right:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);padding:1.5rem 1rem}
  .fact:nth-child(2n){border-right:none}
}

.u-label--blue{color:var(--blue)}


/* ==========================================================================
   22. LEGAL MICROCOPY LEGIBILITY
   Fine print carries the compensation and suitability notices. It was set
   in --on-dark-4, documented as the smallest permitted value, at .75rem.
   The most legally important text should not sit at the floor.
   ========================================================================== */
.cta-band .fine,.cta .fine{color:var(--on-dark-3);font-size:.8125rem}
.legal,.legal p{color:var(--on-dark-3);font-size:.8125rem}
.hero .licence{font-size:.8125rem}
.foot h5{font-size:.6875rem}

/* ==========================================================================
   23. COMPARISON TABLE — MOBILE CARDS
   Horizontal scroll on a three-column prose table destroys comprehension.
   Below 48rem each row becomes a labelled card; the semantic table stays.
   ========================================================================== */
@media (max-width:48rem){
  .cmp,.cmp thead,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .cmp tbody tr{border:1px solid var(--grey-2);border-radius:var(--radius);
                margin:0 0 1rem;padding:.25rem 0;background:var(--white);box-shadow:var(--shadow-1)}
  .cmp tbody th{width:auto;background:var(--blue);color:#fff;border:none;
                border-radius:var(--radius) var(--radius) 0 0;font-size:.875rem}
  .cmp tbody td{border:none;border-top:1px solid var(--grey-2);padding:.85rem 1rem}
  .cmp tbody td::before{content:attr(data-label);display:block;font-family:var(--sans);
                        font-size:.6875rem;font-weight:700;letter-spacing:.12em;
                        text-transform:uppercase;color:var(--ink-2);margin-bottom:.35rem}
  .cmp tbody tr:nth-child(even) td{background:transparent}
  .cmp-wrap{overflow-x:visible;box-shadow:none;border-radius:0}
}


/* ==========================================================================
   24. FINAL AUDIT ITEMS
   ========================================================================== */

/* 24.1 — E-17: the hero figcaption sits on the dark hero field, so it must
   declare its own colour. Inherited --ink-2 rendered at 2.63:1. */
.hero figcaption,.hero .figure figcaption{color:var(--on-dark-3);border-top-color:rgba(255,255,255,.18)}

/* 24.2 — E-21: inside the spine grid the column already sets the measure,
   so paragraphs must not be capped again at 40rem. */
.spine p,.step p,.steps p,.svc p,.card p,.cat-card__body p,.qa__a p,.disclose p{max-width:none}


/* ==========================================================================
   25. WORDS OF WISDOM — SVG aphorism banners
   Three weights. All are inline SVG so they scale, print, and need no
   image assets. Text lives in the SVG as real <text>, so it is selectable
   and readable by assistive technology via role/aria-labelledby.
   ========================================================================== */

/* 25.1 — page opener: full measure, above the article header */



/* 25.2 — mid-article: quieter, sits between paragraphs */
.wisdom--mid{margin:2.5rem 0;box-shadow:var(--shadow-1)}

/* 25.3 — closing: paired with a call to action */
.wisdom--close{margin:2.75rem 0 0}

/* SVG type classes */
.wis-q{font-family:var(--serif);font-weight:300;font-style:italic;fill:#fff}
.wis-q--lead{font-family:var(--serif);font-weight:200;fill:#fff}
.wis-em{fill:var(--gold);font-style:italic}
.wis-by{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;
        text-transform:uppercase;fill:#9FB6DE}
.wis-rule{stroke:var(--gold);stroke-width:3}
.wis-mark{fill:none;stroke:var(--gold);stroke-width:1.5;opacity:.5}

@media print{.wisdom{box-shadow:none;border:1px solid #000}}


/* ==========================================================================
   26. ARTICLE CONTAINER — 1280 outer, readable measure inner
   The essay capped at 40rem while its banner spanned the container, so the
   column read as off-centre. A three-track grid gives a 1280 container, a
   centred reading column, and full-bleed rows for banners and wide tables.
   ========================================================================== */
.essay,.art{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gut) 4rem;
  display:grid;
  grid-template-columns:1fr min(46rem,100%) 1fr;
}
.essay > *,.art > *{grid-column:2}
.essay > .banner,.art > .banner,
.essay > .cmp-wrap,.art > .cmp-wrap,
.essay > figure,.art > figure,
.essay > .wisdom,.art > .wisdom,
.essay > .cta-banner,.art > .cta-banner{grid-column:1/-1}
.essay > hr,.art > hr{grid-column:1/-1;max-width:none;margin:2rem 0}
.art--wide{grid-template-columns:1fr min(60rem,100%) 1fr}

/* ==========================================================================
   27. ELEVATION — softer, wider, closer to the ibcfinancial.com feel
   ========================================================================== */
:root{
  --shadow-1:0 2px 4px rgba(1,27,71,.06),0 8px 24px rgba(1,27,71,.10);
  --shadow-2:0 6px 14px rgba(1,27,71,.10),0 22px 48px rgba(1,27,71,.18);
  --radius:8px;
  --paper:#F6F8FB;
}
.card,.cat-card,.form-card,.insight,.disclose,.cta-banner,.cmp-wrap,.wisdom,
figure.info,.figure:not(.figure--flush){border-radius:var(--radius)}
.card,.cat-card{border:1px solid #E8ECF2}
.card:hover,.cat-card:hover{transform:translateY(-3px)}
.btn{border-radius:5px}
.banner{border-radius:var(--radius);box-shadow:var(--shadow-1)}
.card__b{border-radius:var(--radius) var(--radius) 0 0}


/* ==========================================================================
   28. MASTHEAD ALIGNMENT
   Wordmark left, navigation flush right, even rhythm, clear active state.
   The company sub-lockup is removed; the wordmark stands alone.
   ========================================================================== */
.mast__in{max-width:var(--max);margin:0 auto;padding:0 var(--gut);
          display:flex;align-items:center;justify-content:space-between;gap:2rem;
          min-height:76px;flex-wrap:nowrap}
.brand,.mark{font-size:1.5rem;font-weight:700;letter-spacing:.04em;line-height:1;
             display:inline-flex;align-items:center}
.brand small,.mark small{display:none}
.mnav{display:flex;align-items:center;gap:1.75rem;margin-left:auto;flex-wrap:nowrap}
.mnav a{font-size:.9375rem;font-weight:600;white-space:nowrap;line-height:1;
        border-bottom:2px solid transparent;padding:.6rem 0 .45rem}
.mnav a:hover{border-bottom-color:var(--gold)}
.mnav a[aria-current="page"]{border-bottom-color:var(--gold)!important}
.mnav .go,.mnav .cta{margin-left:.5rem;padding:.7rem 1.35rem;border-bottom:none;
                     font-weight:700;white-space:nowrap}
.mnav .go:hover,.mnav .cta:hover{border-bottom:none}
@media (max-width:72rem){.mnav{gap:1.15rem}.mnav a{font-size:.875rem}}

/* alternating light band — FR homepage rhythm */
.band--alt{background:var(--paper,#F6F8FB)}
.band--alt .card{background:#fff}


/* ==========================================================================
   29. FINAL RECONCILIATION
   Items below supersede anything earlier with the same selector. They are
   collected here deliberately so the winning value is in one place.
   ========================================================================== */

/* 29.1 — category cards: complete, unclipped focus ring */
.cat-card{overflow:visible}
.cat-card__band{border-radius:var(--radius) var(--radius) 0 0;overflow:hidden}
.cat-card:focus-visible{outline:3px solid var(--blue-ink);outline-offset:3px}

/* 29.2 — the active chip must be visible (CSS targets the "page" token) */
.chip[aria-current="page"]{background:var(--blue);border-color:var(--blue);color:#fff}

/* 29.3 — the closing CTA sits in the reading column, not full bleed, so it
   does not tower over the Key Takeaways box 200px above it */
.essay > .cta-banner,.art > .cta-banner{grid-column:2}

/* 29.4 — legal microcopy: 13px sans at 54rem ran ~110 characters per line */
.legal p{max-width:42rem}

/* 29.5 — one card model */
.card{border:1px solid #E8ECF2}
.card:hover{border-color:#D2DEF1}


/* ==========================================================================
   30. FACT BAND NUMBER
   .token painted the figure in --blue on the --blue fact band, so every
   number on both homepages rendered invisible. The band is a dark field.
   ========================================================================== */
.fact dd .token{background:transparent;color:var(--gold);padding:0;font-family:var(--serif);
                font-size:1em;font-weight:300;letter-spacing:-.02em}

/* ==========================================================================
   31. CARD FOOTER AFFORDANCE
   "Read →" was a <span> — it looked like a link and was not one.
   It is now the card's anchor and must read as one.
   ========================================================================== */
.card__f a.u-meta,.card__foot a.u-meta{color:var(--blue);text-decoration:none;font-weight:600}
.card__f a.u-meta:hover,.card__foot a.u-meta:hover{text-decoration:underline;text-underline-offset:3px}
.card:hover .card__f a.u-meta{text-decoration:underline;text-underline-offset:3px}


/* ==========================================================================
   32. MASTHEAD CONTAINMENT
   Section 28 restyled .mast__in and dropped max-width/margin/padding, so the
   header content ran the full viewport while every other band stayed in the
   1280 container. The longer French labels made the overflow obvious first.
   ========================================================================== */
.mast__in{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.mnav{min-width:0}
.mnav a{flex-shrink:0}
/* French labels are longer: tighten before anything can overflow */
@media (max-width:78rem){.mnav{gap:1.35rem}.mnav a{font-size:.875rem}.mnav .go,.mnav .cta{padding:.65rem 1.1rem}}
@media (max-width:68rem){.mnav{gap:1rem}.mnav a{font-size:.8125rem}.mnav .go,.mnav .cta{padding:.6rem .9rem}}

/* ==========================================================================
   33. CONTAINER GUARANTEE — every direct child of <main> respects 1280
   The catch-all container rule uses :where() (zero specificity) so any
   component that declares its own margin shorthand — .form-card and
   .disclose both did — silently loses auto-centering and drifts full width.
   The rules below restore the guarantee at real specificity. Full-bleed
   bands (.hero .facts .band .cta-band) keep their inner .wrap and are the
   only deliberate exceptions.
   ========================================================================== */
main > .form-card,main > .disclose,main > .cta-banner,main > .author,
main > .filters,main > .lead,main > .step,main > .ahd,main > .jump,
main > .grid,main > .banner,main > .insight{
  width:calc(100% - 2*var(--gut));
  max-width:calc(var(--max) - 2*var(--gut));
  margin-inline:auto;
}
/* a booking form should not run 1280 wide — centre it at a form measure */
main > .form-card{max-width:56rem}
/* stray overflow can never introduce a horizontal scrollbar */
body{overflow-x:clip}

/* ==========================================================================
   34. READING MEASURE ON CONTENT PAGES
   Pillar and utility pages hold prose in classless sections, so text ran the
   full 1280 container — 200+ character lines. This gives every classless
   section, header and article the same three-track treatment as .essay:
   a centred 46rem reading column inside the container, with genuinely wide
   elements (card grids, comparison tables, banners) released to full width.
   The homepage bands are untouched — their sections carry classes.
   ========================================================================== */
main > section:not([class]),main > header:not([class]),main > article:not([class]){
  display:grid;grid-template-columns:1fr min(46rem,100%) 1fr;
}
main > section:not([class]) > *,
main > header:not([class]) > *,
main > article:not([class]) > *{grid-column:2;min-width:0}
main > section:not([class]) > .grid,
main > section:not([class]) > .cmp-wrap,
main > section:not([class]) > .banner,
main > section:not([class]) > .lead,
main > article:not([class]) > .grid,
main > article:not([class]) > .cmp-wrap,
main > article:not([class]) > .banner,
main > section:not([class]) > .cat-grid{grid-column:1/-1}
/* boxed callouts stay on the reading column but may breathe slightly wider */
main > section:not([class]) > .insight,
main > section:not([class]) > .disclose,
main > article:not([class]) > .insight,
main > article:not([class]) > .disclose{grid-column:2;max-width:none}


/* ==========================================================================
   35. HERO HEADLINE SCALE
   One clamp served a 40-character English headline and a 115-character
   French one; at 14ch max-width the French title stacked into a tower and
   pushed the capital-flow figure below the fold. Long-headline pages carry
   .hero--long: smaller scale, wider measure, the figure back beside it.
   ========================================================================== */
.hero h1{max-width:16ch}
.hero--long h1{font-size:clamp(1.9rem,3.4vw,2.75rem);line-height:1.12;max-width:24ch;
               letter-spacing:-.015em}
.hero--long .hero__grid{align-items:center}


/* ==========================================================================
   36. BARE PROSE SAFETY NET
   If any page places prose directly under <main> with no wrapper at all,
   it still gets the centred reading measure.
   ========================================================================== */
main > p,main > h2,main > h3,main > h4,main > ul,main > ol,main > blockquote,
main > details{max-width:46rem;margin-inline:auto}

/* ==========================================================================
   37. WISDOM BANNERS
   Aphorisms in the author's voice, set as inline SVG so the typography is
   identical wherever they land. Full container width; the closer variant
   carries a real HTML CTA link beneath the artwork.
   ========================================================================== */


.wisdom__cta{margin:0;padding:1.1rem 1.5rem;background:var(--blue);text-align:center;
             border-top:1px solid rgba(255,255,255,.18)}
.essay > .wisdom,.art > .wisdom{grid-column:1/-1}




/* ==========================================================================
   38. WISDOM BANNER GEOMETRY — 80% of the container, centred, everywhere
   Two defects: the global paragraph measure (36rem) clamped the CTA strip
   under the closer banner to half the banner's width; and grid contexts
   could hand the banner the reading column instead of the full track.
   The spec is now explicit: 80% of the 1280 container, centred, in every
   context, with the CTA strip exactly as wide as the banner above it.
   ========================================================================== */

.essay > .wisdom,.art > .wisdom{grid-column:1/-1;justify-self:center}
main > section:not([class]) > .wisdom,
main > article:not([class]) > .wisdom{grid-column:1/-1;justify-self:center}
p.wisdom__cta,.wisdom__cta{max-width:none;width:100%;box-sizing:border-box;
  margin:0;text-align:center}


/* ==========================================================================
   39. MASTHEAD CLUSTER
   The wordmark sat at the container's far-left edge, a full viewport away
   from the navigation. It now travels with the menu: one right-aligned
   cluster — CWCC, the items, then the CTA. Mobile keeps wordmark left and
   toggle right, which is the expected small-screen pattern.
   ========================================================================== */
@media (min-width:60rem){
  .mast__in{justify-content:flex-end}
  .mast__in .brand,.mast__in .mark{margin-right:1.25rem}
  .mnav{margin-left:0}
}


/* ==========================================================================
   40. BANNER WIDTH 1000 / MASTHEAD LTR / GOLD SHINING MARK / STICKY MENU
   ========================================================================== */

/* 40.1 — wisdom banners: full height back, width capped at 1000px, responsive */


/* 40.2 — masthead reads left-to-right: CWCC, then the items, CTA anchored right.
   One row, always — the CTA can never drop below the menu. */
@media (min-width:60rem){
  .mast__in{justify-content:flex-start;flex-wrap:nowrap}
  .mast__in .brand,.mast__in .mark{margin-right:2.25rem}
  .mnav{margin-left:0;flex:1 1 auto;justify-content:flex-start;flex-wrap:nowrap}
  .mnav .go,.mnav .cta{margin-left:auto}
}



/* 40.4 — the menu stays pinned while scrolling */
.mast{position:sticky;top:0;z-index:80;box-shadow:0 2px 12px rgba(1,27,71,.25)}
html{scroll-padding-top:104px}

/* 40.5 — consent dialog */
.ck{position:fixed;inset:auto 0 0 0;z-index:200;padding:1rem var(--gut);
    background:rgba(1,27,71,.35);backdrop-filter:blur(2px)}
.ck__box{max-width:46rem;margin:0 auto;background:#fff;border:3px solid var(--gold);
         border-radius:var(--radius);padding:1.5rem 1.75rem;box-shadow:var(--shadow-2)}
.ck__t{font-size:1.25rem;margin:0 0 .5rem}
.ck__t::before{display:none}
.ck__b{font-size:.9375rem;color:var(--ink-2);margin:.25rem 0 .9rem;max-width:none}
.ck__row{display:flex;gap:.6rem;flex-wrap:wrap}
.ck__btn{font-family:var(--sans);font-weight:700;font-size:.9375rem;cursor:pointer;
         padding:.7rem 1.2rem;border-radius:5px;border:2px solid var(--blue);
         background:var(--blue);color:#fff}
.ck__btn--line{background:#fff;color:var(--blue)}
.ck__btn--gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.ck__btn:focus-visible{outline:3px solid var(--blue-ink);outline-offset:2px}
.ck__opt{display:flex;gap:.8rem;align-items:flex-start;padding:.7rem 0;
         border-top:var(--hair);font-family:var(--sans);font-size:.9375rem}
.ck__opt input{margin-top:.3rem;width:1.1rem;height:1.1rem}
.ck-manage{font-size:.8125rem}

/* ==========================================================================
   41. FOOTER LEGAL — SPREAD ACROSS THE CONTAINER
   The 42rem cap fixed unreadable line length but left two-thirds of the
   footer empty. Multi-column flow fills the width while each column keeps
   a readable measure.
   ========================================================================== */
.legal{column-gap:3.5rem}
@media (min-width:60rem){.legal{columns:2}}
@media (min-width:88rem){.legal{columns:3}}
.legal p{max-width:none;break-inside:avoid;margin-top:0;margin-bottom:1.1rem}


/* ==========================================================================
   42. CONTENT ANCHORS LEFT — the homepage geometry, everywhere
   The centred reading column left a wide dead margin on the left of every
   utility, pillar and article page, which read as misalignment against the
   masthead and footer. Content now starts at the container's left edge —
   exactly like the homepage bands — with a generous measure and the
   remaining space falling to the right. Wide elements still span fully.
   ========================================================================== */
main > section:not([class]),main > header:not([class]),main > article:not([class]){
  grid-template-columns:min(72ch,100%) 1fr;
}
main > section:not([class]) > *,
main > header:not([class]) > *,
main > article:not([class]) > *{grid-column:1}
main > section:not([class]) > .grid,
main > section:not([class]) > .cmp-wrap,
main > section:not([class]) > .banner,
main > section:not([class]) > .lead,
main > section:not([class]) > .cat-grid,
main > article:not([class]) > .grid,
main > article:not([class]) > .cmp-wrap,
main > article:not([class]) > .banner{grid-column:1/-1}
main > section:not([class]) > .wisdom,
main > article:not([class]) > .wisdom{grid-column:1/-1;justify-self:center}

/* articles: same left anchor */
.essay,.art{grid-template-columns:min(72ch,100%) 1fr}
.essay > *,.art > *{grid-column:1}
.essay > .banner,.art > .banner,.essay > .cmp-wrap,.art > .cmp-wrap,
.essay > figure,.art > figure,.essay > hr,.art > hr,
.essay > .cta-banner,.art > .cta-banner{grid-column:1/-1}
.essay > .wisdom,.art > .wisdom{grid-column:1/-1;justify-self:center}

/* bare prose safety net follows the same anchor */
main > p,main > h2,main > h3,main > h4,main > ul,main > ol,main > blockquote,
main > details{max-width:72ch;margin-inline:0 auto}


/* ==========================================================================
   43. FULL-WIDTH TEXT — the client's explicit spec, stated three times
   No reading measure on content pages: text runs the full 1280 container,
   edge to edge, aligned with the masthead and footer. (Typographic measure
   was offered twice and declined; this section is the final word. To restore
   a measure later, delete this section — §42 beneath it anchors left at 72ch.)
   ========================================================================== */
main > section:not([class]),main > header:not([class]),main > article:not([class]),
.essay,.art{display:block}
.essay > *,.art > *,
main > section:not([class]) > *,
main > header:not([class]) > *,
main > article:not([class]) > *{max-width:none}
main > p,main > h2,main > h3,main > h4,main > ul,main > ol,main > blockquote,
main > details{max-width:none}
.essay p,.art p,
main > section:not([class]) p{max-width:none}
.essay > .wisdom,.art > .wisdom,



/* ==========================================================================
   44. THE MASTHEAD BUTTON BUG — root cause, finally
   The homepage conversion band's container is `.cta` — and the article
   masthead button is ALSO `class="cta"`. The band rule handed the button
   margin:3rem top, position:relative and overflow:hidden; specificity saved
   its gold colour, so it LOOKED right while sitting 48px below the bar.
   This resets every band property on the nav button, at higher specificity.
   ========================================================================== */
.mnav .cta,.mnav .go{
  margin:0 0 0 auto;
  position:static;
  overflow:visible;
  background:var(--gold);
  color:var(--blue-ink);
  display:inline-flex;align-items:center;
  padding:.7rem 1.35rem;border-radius:4px;
}
.mnav .cta:hover,.mnav .go:hover{background:var(--gold-lift)}


/* ==========================================================================
   45. BANNERS — ONE AUTHORITATIVE GEOMETRY (supersedes 25, 37, 38, 40, 43)
   Six competing width rules had accumulated across four sections; whichever
   won, the aside could end up wider than the artwork inside it, leaving the
   pale frame visible on both sides. One declaration now, navy behind the
   artwork so no gap can ever read as white, and the SVG filling exactly.
   Every banner: 1000px, centred, responsive below that.
   ========================================================================== */
.wisdom,
.essay > .wisdom,.art > .wisdom,
main > section:not([class]) > .wisdom,
main > article:not([class]) > .wisdom{
  display:block;
  width:min(100%,62.5rem);        /* 1000px cap, fluid below */
  max-width:62.5rem;
  margin:3rem auto;
  background:#012C71;             /* artwork colour — no pale frame possible */
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-1);
  line-height:0;                  /* kills the inline-SVG descender gap */
  justify-self:center;
}
.wisdom svg{display:block;width:100%;height:auto}
.wisdom__cta{line-height:1.5}
@media (max-width:48rem){.wisdom{margin:2rem auto}}

/* the conversion banner matches — same 1000px measure, centred */
.cta-banner{width:min(100%,62.5rem);max-width:62.5rem;margin-inline:auto}

/* 45.1 — the CTA belongs to the menu, not the far corner */
@media (min-width:60rem){
  .mnav .go,.mnav .cta{margin-left:.75rem}
  .mnav{justify-content:flex-start}
}


/* ==========================================================================
   46. THE MARK GLOWS
   A gradient sweep was too subtle to notice. The mark now emits light: a
   1.5-second bloom — gold lifting to near-white with a halo that expands and
   falls away — then rests until the next cycle.
   ========================================================================== */
.mast .brand,.mast .mark{
  color:var(--gold);
  background:none;
  -webkit-text-fill-color:currentColor;
  will-change:filter,text-shadow;
  animation:markglow 5s ease-in-out infinite;
}
@keyframes markglow{
  0%,70%{
    color:var(--gold);
    text-shadow:0 0 0 rgba(255,214,52,0);
    filter:brightness(1);
  }
  78%{
    color:#FFE9A3;
    text-shadow:0 0 10px rgba(255,214,52,.95),0 0 22px rgba(255,214,52,.65),
                0 0 40px rgba(255,214,52,.35);
    filter:brightness(1.35);
  }
  86%{
    color:#FFFDF2;
    text-shadow:0 0 16px rgba(255,255,255,1),0 0 34px rgba(255,214,52,.9),
                0 0 66px rgba(255,214,52,.55);
    filter:brightness(1.6);
  }
  95%{
    color:#FFE9A3;
    text-shadow:0 0 8px rgba(255,214,52,.6),0 0 20px rgba(255,214,52,.3);
    filter:brightness(1.2);
  }
  100%{
    color:var(--gold);
    text-shadow:0 0 0 rgba(255,214,52,0);
    filter:brightness(1);
  }
}
@media (prefers-reduced-motion:reduce){
  .mast .brand,.mast .mark{animation:none;color:var(--gold);
    text-shadow:none;filter:none}
}


/* ==========================================================================
   47. CRITICAL — the masthead button was swallowing every menu click
   The conversion band paints a radial wash with `.cta::before{position:
   absolute;inset:0}`. The masthead button shares the class. In §44 I set the
   button to position:static to strip the band's margin — which removed the
   containing block for that pseudo-element, so it resolved against the
   sticky `.mast` instead and stretched across the WHOLE header. Being a
   child of the booking anchor, it captured every click on About, Services,
   IFS, Resources and Contact and sent them to the Discovery Meeting page.
   The nav button never wanted the decorative wash: it is removed here, and
   the button is given its own containing block so nothing can escape again.
   ========================================================================== */
.mnav .cta::before,.mnav .go::before,
.mnav .cta::after,.mnav .go::after{content:none!important;display:none!important}
.mnav .cta,.mnav .go{position:relative;isolation:isolate;overflow:hidden}
.mnav a{position:relative;z-index:1}


/* ==========================================================================
   48. THE GOLD RULES TRAVEL WITH THE STICKY BAR
   .topbar (6px) sits before the header and .goldrule (4px) after it, so both
   scrolled away the moment the masthead pinned and the bar lost its frame.
   The rules now belong to .mast itself and stay with it at every position.
   ========================================================================== */
.mast{
  border-top:6px solid var(--gold);
  border-bottom:4px solid var(--gold);
  box-shadow:0 4px 14px rgba(1,27,71,.28);
}
/* the standalone rules would now double the frame at the top of the page */
.topbar,.goldrule{display:none}
@media print{.mast{border-color:#000;box-shadow:none}}

.jump{top:var(--mast-h,86px)}
:root{--mast-h:86px}