/* ibcfinancial.com
   Track B8. Written against frozen copy, 21 August 2026.

   The brief is the content: long-form regulated financial writing whose
   argument depends on being believed. The typography is conservative and the
   page is quiet. Nothing competes with the words.

   The disclosure stack and the dual-format disclosures are styled to be READ.
   A disclaimer set in small grey type is one designed to be skipped, which is
   the opposite of this site's position. */

:root {
  /* Built from the old site's own three brand values, graded the way cwcc.ca
     grades its sapphire rather than left as one flat blue. Contrast against
     the surface each colour actually sits on is recorded beside it. */

  /* NAVY, graded from #082556 */
  --abyss:#04122C;      /* deepest: footer, cover                */
  --navy:#082556;       /* the brand value, primary field        */
  --navy-2:#0E3574;     /* elevated surfaces on navy             */
  --royal:#1B57A8;      /* interactive                           */
  --azure:#9FBEDD;      /* muted text on dark, 7.1:1 on navy     */

  /* GOLD, with a light and a shadow stop so it reads as metal */
  --gold-deep:#8A6A0F;
  --gold:#FCC600;       /* the brand value                       */
  --champagne:#FFEFB0;
  --gold-text:#6E5305;  /* gold legible on white, 6.3:1          */
  --foil:linear-gradient(100deg,var(--gold-deep) 0%,var(--gold) 16%,
    var(--champagne) 36%,#FFFBE8 47%,var(--champagne) 58%,var(--gold) 78%,
    #7A5C0C 100%);

  --coral:#C31344;      /* every button and call to action */      /* brand coral, darkened so white clears 4.5:1 */
  /* The settled hover for the action colour. It had no token, so three
     different oranges had been typed in by hand: var(--coral-hover) on the header call
     to action, var(--coral-hover) on .btn-primary, and var(--coral-hover) in the rule that was
     meant to govern them all. The header one won on its own page because the
     governing rule's selector list never included it, so the most prominent
     button on the site hovered to a colour outside the palette at 4.52:1,
     the weakest contrast anywhere. */
  --coral-hover:#A50F39;

  /* SURFACES, cool rather than cream: this is a corporate practice */
  --paper:#FFFFFF;
  --mist:#F2F5FA;
  --platinum:#E7EDF6;
  --blue-pale:#E8F1FF;

  /* TEXT */
  --ink:#082556;
  --text:#0C1626;
  --text-2:#242F42;
  --muted:#33415A;      /* 9.4:1 on white                        */
  --rule:#D9E1EE;
  --body:#242F42;
  --text-3:#33415A;
  --grey:#5A6472;
  --navy-deep:var(--abyss); --navy-mid:var(--navy-2); --navy-link:var(--royal);
  --blue-soft:var(--azure); --wash:var(--mist); --accent:var(--royal);
  --warn-bg:#FDF8E8; --warn-edge:var(--gold);

  --font:Georgia,"Times New Roman",serif;
  /* Type scale taken from cwcc.ca, which sizes fluidly rather than at fixed
     pixels. A fixed 18px body and 50px hero read small on a wide monitor and
     oversized on a phone; these track the viewport between sensible bounds. */
  --size-body:clamp(1rem,.35vw + .95rem,1.125rem);
  --size-hero:clamp(2.4rem,7.2vw,5.2rem);
  --size-h2:clamp(1.85rem,3.6vw,3rem);
  --size-h3:clamp(1.25rem,1.4vw,1.55rem);
  --size-h4:clamp(1.08rem,.8vw,1.2rem);
  --size-lede:clamp(1.02rem,.35vw + .95rem,1.2rem);
  --pad-band:clamp(3.6rem,9vw,8rem) 0 clamp(3rem,7vw,5.5rem);
  --container:1260px;   /* your spec: 1200 to 1280 */
  --measure:1260px;
  --prose:74ch;         /* reading measure inside the shell */
  /* The measure on a page with NO contents rail, widened on the owner's
     instruction, 26 August 2026. He looked at the home page's long-form panel
     and said the text container should run to the full width rather than to
     about 60 percent of it, and he is right about that panel: a rail-less page
     has no second column to justify holding the text back, so the narrow
     measure read as an unexplained indent rather than as typography. The
     ceiling stays because a 2560px monitor with no ceiling produces a line of
     about 300 characters, which nobody can read. 1180px is roughly 125
     characters at 16px Georgia, wide but still trackable, and it is the number
     to change if he wants it wider again. */
  --prose-wide:min(100%,1180px);
  --banner-w:900px;     /* your spec: banners at 900 */
}

/* THE WOVEN BAR.
   The reference photograph is gold thread woven THROUGH navy, catching light
   unevenly along its length. Not a flat gold line. Every major section edge
   carries this. */
.foil-bar{height:4px;border:0;margin:0;background:var(--foil);
  background-size:200% 100%}
.band + .band{position:relative}
.band + .band::before{content:"";position:absolute;top:0;left:0;right:0;
  height:3px;background:var(--foil);background-size:200% 100%}

/* Gold set as metal rather than as a flat fill, where the browser allows it. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .foil-text{background:var(--foil);-webkit-background-clip:text;
    background-clip:text;color:transparent}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:var(--size-body);line-height:1.65;color:var(--body);
  background:var(--paper);margin:0;line-height:1.65;font-size:1.0625rem}
main{max-width:var(--container);margin:0 auto;
  padding:2.5rem 1.25rem 4rem;background:var(--paper)}
/* The shell is 1140px to match the live container. Running prose is held to a
   readable measure inside it rather than set to the full width. */
/* The shell is 1140px to match the live container, but running prose must be
   held to a readable measure AND CENTRED inside it. Capping the width without
   centring left every paragraph hugging the left edge with a wide empty column
   beside it, which is what the 21 Aug screenshots showed. */
main > article > .body,
main > article > .disclosure,
main > article > .dual-disclosure,
main > article > .reviewed{max-width:74ch;margin-left:auto;margin-right:auto}
.home > .body,
.home > .disclosure,
.home > .dual-disclosure{max-width:74ch;margin-left:auto;margin-right:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:0;top:0;z-index:10000;background:var(--ink);color:#fff;padding:.75rem 1rem}
a{color:var(--accent);text-underline-offset:.18em}
a:hover,a:focus{color:var(--ink)}
/* Heading scale from the live Elementor kit: hero 50px, h2 30, h3 24, h4 18,
   all Georgia. The kit declares h1 at 22px as a default, but the rendered hero
   heading widget uses 50px, which is what a reader actually sees. */
h1,h2,h3,h4{color:var(--ink);line-height:1.25;margin:2.4rem 0 .75rem;
  font-family:var(--font)}
h1{font-size:var(--size-hero);font-weight:700;margin-top:0;line-height:1.05;
  letter-spacing:-.02em}
h2{font-size:var(--size-h2);font-weight:700;line-height:1.08;letter-spacing:-.018em}
h3{font-size:var(--size-h3);font-weight:700;line-height:1.15;letter-spacing:-.015em}
h4{font-size:var(--size-h4);font-weight:700;line-height:1.2}
h2+p,h3+p{margin-top:.4rem}
p,li{margin:0 0 1.05rem}
ul,ol{padding-left:1.35rem}
strong{color:var(--ink)}
hr{border:0;border-top:1px solid var(--rule);margin:2.5rem 0}

/* The live header: full-width navy bar, gold rule beneath, logo left,
   horizontal nav in gold, coral action button right. Contents held to the
   1140px container so the bar spans but the content aligns with the page. */
/* The live header: full-width navy bar, gold rule beneath, logo left,
   horizontal nav in gold, coral action button right. Contents held to the
   1140px container so the bar spans but the content aligns with the page.
   Kept as ONE rule: split across two blocks, the last declaration for the
   class carried no background and the contrast check correctly reported gold
   on white. */
/* The masthead's height comes from min-height rather than from vertical
   padding.

   Two faults shared one cause. With .85rem of padding above and below, the
   flex line was 13.6px short of the header on each side, so the menu bar
   could never reach the header's own edges. The words then centred against
   the bar rather than against the masthead and sat eight pixels high, and a
   dropdown opened from the bottom of its list item appeared 30px above the
   bottom of the header, cutting across the gold rule.

   With no vertical padding the bar fills the masthead, the words centre
   against it, and top:100% on a dropdown is the bottom edge of the header. */
.site-head{background:linear-gradient(180deg,var(--navy) 0%,var(--abyss) 100%);
  border-bottom:0;position:relative;
  display:flex;align-items:center;gap:2rem;flex-wrap:wrap;
  /* 90px, brought down to 74px on the owner's instruction of 26 August 2026.
     The bar had grown taller than the original site's. The menu type came
     down with it and each letter is stretched instead, so the words still
     read tall inside a shorter bar. */
  min-height:74px;
  padding:0 max(1.25rem,calc((100% - var(--container))/2))}
/* The bar is the full height of the masthead, so its dropdowns hang from the
   masthead's edge. */
.site-head > .site-nav{align-self:stretch}
/* The woven bar beneath the masthead, in place of a flat rule.

   pointer-events:none is the whole reason the dropdowns were losing the
   pointer. This bar is painted over the last four pixels of the menu items,
   at exactly the height a pointer crosses on its way from the menu word down
   into the panel. It was taking the hover for itself, so the pointer left the
   list item, the item's mouseleave fired, and the panel closed in the reader's
   face one pixel before they reached it. Probed at y=87, 88 and 89 the
   element under the pointer was the header, not the menu item.

   Both bars are decoration. Neither should ever be a hover target. */
.site-head::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:4px;background:var(--foil);background-size:200% 100%;
  pointer-events:none}
/* A thinner companion above it, so the masthead is closed on both edges. Kept
   here rather than in nav.css: both bars belong to the same component, and the
   bottom one spent a while invisible because its off switch was written in the
   other file. Thinner than the bar below on purpose, so the pair reads as a
   masthead rather than as two rules of equal weight. */
.site-head::before{content:"";position:absolute;left:0;right:0;top:0;
  height:3px;background:var(--foil);background-size:200% 100%;z-index:1;
  pointer-events:none}
.brand{font-weight:700;color:var(--gold);text-decoration:none;font-size:1.05rem;
  display:flex;align-items:center}
/* Height lives in nav.css with the rest of the header. It was declared in
   both files at two different values, 56px here and 52px there, and nav.css
   loads second so this one never applied. */
.brand img{display:block;width:auto}
/* The nav markup is <nav><ul><li>. Making .site-nav a flex container lays out
   its CHILD, which is the single ul, so the list kept its bullets, its indent
   and its vertical stacking. The flex has to be on the ul. Found 21 Aug 2026
   from a screenshot of the running site, not from any check. */






/* The breadcrumb sits between the masthead and main, outside both, so it had
   no ground of its own and showed the page's tinted body colour directly
   under the gold rule. Same white sheet as the page it introduces, and air
   above it so it is not pinned to the header. */
.breadcrumb{
  font-size:.88rem;color:var(--muted);
  background:var(--paper);
  max-width:var(--wrap,1440px);margin-inline:auto;
  padding:clamp(1.1rem,2.2vw,1.6rem) clamp(1.25rem,3vw,2.5rem) .3rem;
  margin-block:0}
.breadcrumb a{color:var(--muted)}
/* An ordered list here would render as a numbered, indented column. The
   breadcrumb is a horizontal trail with a separator between items. */
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;
  margin:0;padding:0}
.breadcrumb li{margin:0;display:flex;align-items:center}
.breadcrumb li+li::before{content:"/";margin-right:.35rem;color:var(--muted)}
/* Everything inside the footer sits on the container, not the viewport. The
   disclosure block previously spanned the full screen width at small size,
   which is unreadable on a wide monitor. */
.site-foot > *{max-width:var(--container);margin-left:auto;margin-right:auto}
.site-foot{background:linear-gradient(180deg,var(--abyss) 0%,#020C1D 100%);
  border-top:0;position:relative;
  padding:2.5rem max(1.25rem,calc((100% - var(--container))/2)) 3rem;
  font-size:.95rem;color:var(--blue-pale)}
.site-foot a{color:var(--gold)}
/* Same fault as the nav: a bare ul inherits browser bullets and indent. */
.site-foot ul{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;list-style:none;
  margin:.5rem 0;padding:0}
.site-foot li{margin:0}
.nap{margin-bottom:.75rem}.copyright{margin-top:1rem}.consent-withdraw{margin-top:.5rem}

.direct-answer{font-size:1.15rem;line-height:1.55;color:var(--ink);
  border-left:3px solid var(--ink);padding:0 0 0 1.1rem;margin:0 0 2rem}

.toc{background:var(--wash);border:1px solid var(--rule);border-radius:8px;
  padding:1.1rem 1.35rem;margin:0 0 2.25rem}
.toc h2{font-size:.95rem;margin:0 0 .6rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted)}
.toc ol{margin:0;padding-left:1.2rem}
.toc li{margin:0 0 .35rem}
.toc a{color:var(--body);text-decoration:none}
.toc a:hover,.toc a:focus{text-decoration:underline;color:var(--ink)}

figure{margin:2rem 0}
figure img{max-width:100%;height:auto;display:block;border-radius:8px}
/* The lead photograph fills the column it sits in. Left at its intrinsic
   width it stopped three quarters of the way across and read as a picture
   somebody forgot to size. A 16 by 9 crop so the top of every page that has
   one has the same horizon. */
.feature{margin:1.4rem 0 1.8rem}
.feature img{border:1px solid var(--rule);border-radius:8px;
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  box-shadow:0 10px 26px rgba(8,37,86,.16)}
.card img{border:0}

table{width:100%;border-collapse:collapse;margin:1.75rem 0;font-size:.97rem}
th,td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--rule);vertical-align:top}
th{color:var(--ink);border-bottom:2px solid var(--ink)}
tbody tr:nth-child(even){background:var(--wash)}

.faq{margin:2.5rem 0}
.faq details{border-bottom:1px solid var(--rule);padding:.85rem 0}
.faq summary{cursor:pointer;color:var(--ink);font-weight:700;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+ ";color:var(--muted)}
.faq details[open] summary::before{content:"\2212 "}
.faq details>*:not(summary){margin-top:.7rem}

.dual-disclosure{border:1px solid var(--rule);border-left:4px solid var(--ink);
  background:var(--wash);padding:1.15rem 1.35rem;margin:2rem 0;border-radius:0 8px 8px 0}
.dual-disclosure .formal{font-style:italic;color:var(--ink);margin-bottom:.8rem}
.dual-disclosure .plain{margin-bottom:0}
/* The site-wide disclosure section sits OUTSIDE <main>, so a rule scoped to
   main never reached it and it rendered at full viewport width in very small
   type. Constrain and size it here. */
.disclosure{margin:3.5rem auto 0;padding:1.75rem 1.25rem 0;
  border-top:2px solid var(--ink);font-size:1rem;line-height:1.6;
  max-width:var(--container)}
.disclosure p{max-width:74ch}
.disclosure h2{font-size:1.05rem;text-transform:uppercase;letter-spacing:.06em;margin-top:0}
.disclosure p{margin-bottom:.85rem}
.pending-confirmation{background:var(--warn-bg);border:1px solid var(--warn-edge);
  border-left:5px solid var(--warn-edge);padding:1.15rem 1.35rem;margin:0 0 2rem;
  border-radius:0 8px 8px 0}
.pending-confirmation ul{margin-bottom:0}

.silo-map{margin:2.5rem 0}.silo-map li{margin-bottom:.8rem}
.related,.sources,.author-block,.author-entity,.credentials,.compensation{
  margin:2.5rem 0;padding-top:1.25rem;border-top:1px solid var(--rule);font-size:.96rem}
.sources li{margin-bottom:.5rem;color:var(--muted)}
.reviewed{color:var(--muted);font-size:.9rem}
.concession{border-left:3px solid var(--muted);padding-left:1.1rem;margin:1.75rem 0}
.why{margin:2rem 0}
.article,.pillar,.legal,.hub,.home,.contact,.conversion,.discovery,.profiles{display:block}
.body{display:block}

.cta{display:block;margin:2.75rem 0;padding:1.35rem 1.5rem;background:var(--wash);
  border:1px solid var(--rule);border-radius:8px;color:var(--ink);text-decoration:none}
.cta:hover,.cta:focus{border-color:var(--ink)}

/* The header button is the same class as the in-page banner but sits on navy
   and must read as the primary action. Scoped to the header so the in-page
   banners are untouched. */
.site-head .cta{display:inline-block;margin:0;padding:.68rem 1.5rem;
  background:var(--coral);border:0;border-radius:4px;color:var(--paper);
  font-weight:700;font-size:1.2rem;white-space:nowrap}
.site-head .cta:hover,.site-head .cta:focus{background:var(--coral-hover);color:var(--paper)}

@media (max-width:640px){
  body{font-size:1rem}h1{font-size:1.6rem}h2{font-size:1.3rem}
  main{padding:1.75rem 1rem 3rem}.site-nav{gap:.8rem}
  table{font-size:.92rem}th,td{padding:.55rem .5rem}
}

@media print{
  .site-nav,.toc,.cta,.cnst,.cnst-root,.consent-banner,.consent-panel,.skip{display:none}
  body{font-size:11pt;color:#000}main{max-width:none}
  .disclosure,.dual-disclosure{border-color:#000;background:none}
  a::after{content:" (" attr(href) ")";font-size:.85em;color:#444}
}

/* Consent. THE CONSENT SURFACE IS STYLED IN assets/consent.css AND NOWHERE
   ELSE. The rules that used to sit here painted it from var(--ink) and
   var(--gold) with no literal fallback, so a theme block arriving late or a
   token failing to resolve left white text on a white background: a button
   that is present, correctly sized and completely unreadable, which is the
   fault that gets reported as "the Accept button is missing". consent.css
   carries a literal fallback on every custom property and chains no token to
   another, so the panel survives its theme failing entirely.

   Only two things about the consent surface belong in this file: it must not
   print, which is handled in the print block above, and the status line the
   manager uses to announce a saved choice to a screen reader. */
.cnst-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  border:0}

/* .privacy and .consent appear in the footer disclosure block. Named so the
   two Law 25 items are addressable and can be found by anyone auditing. */
.privacy,.consent{margin-top:.75rem}

/* The 80/20 split figure. Two large numerals with their labels beneath.
   Numerals are set in the heading colour at a size that reads as a statement
   rather than as body copy, and the block collapses to a single column on a
   narrow screen so neither figure is truncated. */
.split{display:flex;gap:1.5rem;margin:2rem 0 2.5rem;flex-wrap:wrap}
.split-part{flex:1 1 12rem;background:var(--wash);border:1px solid var(--rule);
  border-left:4px solid var(--ink);border-radius:0 8px 8px 0;padding:1.35rem 1.5rem}
.split-figure{font-size:3.25rem;line-height:1;font-weight:700;
  color:var(--ink);letter-spacing:-.02em;margin:0}
.split-label{margin:.5rem 0 0;font-size:1.02rem;color:var(--body)}
@media (max-width:640px){
  .split{gap:1rem;margin:1.5rem 0 2rem}
  .split-figure{font-size:2.6rem}
  .split-part{flex:1 1 100%}
}
@media print{.split-part{background:none;border-color:#000}}

/* In-article call to action banners. The SVG carries its own shadow and border;
   the figure only needs spacing and a sensible maximum. */
.cta-banner{margin:2.75rem 0}
.cta-banner img{width:100%;height:auto;display:block;border-radius:10px}
.cta-banner a{display:block}
.cta-banner a:focus{outline:3px solid var(--ink);outline-offset:4px}
@media print{.cta-banner{display:none}}

.direct-answer[data-kind="definition"]{font-style:normal;border-left:4px solid var(--gold);padding-left:1rem}

/* ============================================================
   HOME LANDING SECTIONS
   Matching the live home page arrangement: hero split with the
   headline left and an image right, a three-card band, and a
   numbered three-step band. Colours and type come from the
   Elementor tokens above, so nothing here invents a value.
   ============================================================ */

/* The hero opens the page, so it needs air above it. With no top margin the
   picture's top edge sat directly against the masthead's gold rule, which
   read as the image having been cropped by the header. The text column is
   centred against the picture, so the same space appears on both sides. */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:3rem;align-items:center;margin:0 0 3rem}
.hero-text h1{margin:0 0 1.25rem;max-width:none}
.hero-text .direct-answer{max-width:none;border-left:4px solid var(--gold);
  padding-left:1.15rem;font-size:1.08rem;line-height:1.6}
.hero-media img{display:block;width:100%;height:auto;border-radius:8px}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin:1.75rem 0 0}

.btn-primary,.btn-ghost{display:inline-block;padding:.9rem 1.7rem;
  border-radius:4px;text-decoration:none;font-size:1.2rem;font-weight:700}
.btn-primary{background:var(--coral);color:var(--paper);border:2px solid var(--coral)}
.btn-primary:hover,.btn-primary:focus{background:var(--coral-hover);border-color:var(--coral-hover)}
.btn-ghost{background:var(--paper);color:var(--navy);border:2px solid var(--navy)}
.btn-ghost:hover,.btn-ghost:focus{background:var(--blue-pale)}

/* Same reasoning: 3.5rem of margin on top of the band's own padding stacked
   two spacers on each other. */
.cards-band,.steps-band{margin:1.5rem 0;padding:1.75rem 0;
  border-top:1px solid var(--rule)}
.cards-band h2,.steps-band h2{margin-top:0;text-align:center}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.75rem;margin-top:2rem}
.card-item{background:var(--blue-pale);border-radius:8px;padding:1.6rem 1.5rem}
.card-item h3{margin:0 0 .6rem;color:var(--navy)}
.card-item p{margin:0 0 .7rem;max-width:none}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.75rem;margin:2rem 0 0;padding:0;list-style:none;counter-reset:none}
.steps li{margin:0;padding:1.5rem;border-top:4px solid var(--gold);
  background:var(--wash);border-radius:0 0 8px 8px}
.step-n{display:inline-flex;align-items:center;justify-content:center;
  width:2.4rem;height:2.4rem;border-radius:50%;background:var(--navy);
  color:var(--gold);font-weight:700;font-size:1.2rem;margin-bottom:.7rem}
.steps h3{margin:0 0 .5rem;color:var(--navy)}
.steps p{margin:0;max-width:none}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:2rem}
  .hero-media{order:-1}
}

/* ============================================================
   LIVE HOME SECTIONS
   Built to the arrangement of the live site: full-bleed bands
   that alternate white and wash, each with its contents on the
   1140px container.
   ============================================================ */

/* Section padding.

   This was clamp(3.6rem,9vw,8rem) over clamp(3rem,7vw,5.5rem), which on a
   1440px frame is 128px above and 88px below EVERY band. Two bands meeting
   put 216px of nothing between one section and the next, and that is what
   was reported, section after section, as lots of empty space. The figures
   below are 64px and 52px at the same width, which is still generous
   separation and no longer a gap the reader has to scroll through. */
.band{padding:clamp(2.25rem,4.5vw,4rem) 1.25rem clamp(1.9rem,3.5vw,3.25rem)}
.band > .inner{max-width:var(--container);margin:0 auto}
.band-wash{background:var(--wash)}
.band-navy{background:var(--navy);color:var(--paper)}
.band-navy h2,.band-navy h3,.band-navy p{color:var(--paper)}
.band-navy .lede-light{color:var(--blue-pale)}
.band h2{text-align:center;margin:0 0 .6rem}
.band .lede{text-align:center;max-width:70ch;margin:0 auto 1.6rem;
  color:var(--muted);font-size:var(--size-lede);line-height:1.6}
/* The pale variant belongs only on navy. Declared as a bare .lede override it
   was measured against white and correctly failed contrast. */
.lede-light{color:var(--blue-pale)}

/* Assurance strip: navy bar of gold ticks under the hero */
/* The three assurance cards.

   Reported as unequal padding. Two things caused it. The cards had .9rem above
   and below against 1rem left and right, and the contents were pinned to the
   top with align-items:flex-start, so on a grid that makes every card the
   height of the tallest, the one-line card carried the whole difference as
   empty space under its text while the two-line card had none. Padding is now
   one figure on all four sides and the contents sit in the middle of whatever
   height the row settles on. */
.ticks{background:var(--navy);padding:1.15rem 1.25rem .8rem;margin:0}  /* bottom padding cut by 30 percent, owner's measurement, 26 August */
.ticks ul{max-width:var(--container);margin:0 auto;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.ticks li{display:flex;gap:.75rem;align-items:center;
  background:var(--blue-pale);padding:1rem;border-radius:4px;
  font-size:1rem;font-weight:700;color:var(--navy);line-height:1.4;
  box-shadow:0 3px 10px rgba(0,0,0,.18)}
.ticks li::before{content:"\2713";flex:none;display:inline-flex;
  align-items:center;justify-content:center;width:1.7rem;height:1.7rem;
  background:var(--gold);color:var(--navy);border-radius:3px;font-weight:700}

/* Split: text one side, image the other */
/* A split row is text on one side and a picture on the other. When a split
   had no picture the grid still reserved the second column, so half the band
   was blank. Every split now carries an image, and a row is only a grid when
   there is something to put in the second column. */
.split-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:2.5rem;align-items:start}
.split-row.no-media{grid-template-columns:minmax(0,1fr)}
.split-row.reverse .split-media{order:-1}
/* The picture starts level with the heading rather than floating in the middle
   of the column, so the top of the block reads as one line across.
   The width is capped because one of these pictures is a portrait. Left to
   fill the column it rendered 800 wide and 1200 tall, which is taller than the
   text beside it and reads as a poster rather than as a photograph of a
   person. */
.split-media{max-width:400px;margin-inline:auto}
/* Rounded at five percent of the picture's own width, with a shadow beneath
   it. Percentage rather than pixels, so the corner keeps its proportion when
   the picture is smaller on a narrow screen. */
.split-media img{display:block;width:100%;height:auto;border-radius:5%;
  box-shadow:0 14px 34px rgba(8,37,86,.28),0 4px 10px rgba(8,37,86,.16)}
/* The portrait is nearly square. At the column's full width it stood taller
   than the paragraphs beside it and left the bottom of the band empty.
   Cropped to four by five it sits level with the text and still shows the
   whole head and shoulders. */
.split-row.reverse .split-media img{aspect-ratio:4/5;object-fit:cover;
  object-position:center 10%}
.split-row h2{text-align:left}
/* The points are the substance of this block, not a footnote to the paragraph
   above them, so they are set at reading size rather than below it. */
.split-row ul{padding-left:1.2rem;margin:1.1rem 0 1.2rem}
.split-row li{margin-bottom:.75rem;font-size:calc(var(--fs-base) + 2px);
  line-height:1.55;color:var(--body)}
.split-row li::marker{color:var(--gold-text);font-weight:700}
.split-row > div > p{font-size:calc(var(--fs-base) + 1px)}

/* Card grids */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.75rem}
.panel{background:var(--paper);border-radius:6px;padding:1.6rem 1.5rem;
  box-shadow:0 3px 12px rgba(8,37,86,.10)}
.band-wash .panel{background:var(--paper)}
.panel h3{margin:0 0 .7rem;color:var(--navy);font-size:1.18rem}
.panel p{margin:0 0 .7rem;font-size:1rem;max-width:none}
.panel .fineprint{font-size:.86rem;font-style:italic;color:var(--muted)}
.panel-icon{display:inline-flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;border-radius:50%;background:var(--navy);
  color:var(--gold);font-size:1.2rem;font-weight:700;margin-bottom:.9rem}

/* Comparison table */
.compare{width:100%;border-collapse:collapse;margin:0 auto;
  max-width:var(--container);background:var(--paper);font-size:.98rem}
.compare th{background:var(--navy);color:var(--paper);padding:1rem;
  text-align:center;font-size:1.02rem}
.compare th:first-child{text-align:left}
.compare td{padding:.9rem 1rem;border-bottom:1px solid var(--rule);
  text-align:center;vertical-align:middle}
.compare td:first-child{text-align:left;font-weight:700;color:var(--navy);
  background:var(--wash)}
.compare .yes{color:#1b7a3d;font-size:1.25rem;display:block}
.compare .no{color:#b8341f;font-size:1.25rem;display:block}
.compare .note{display:block;font-size:.86rem;font-style:italic;
  color:var(--muted);margin-top:.2rem}
.compare-note{max-width:var(--container);margin:1.5rem auto 0;
  border-left:4px solid var(--gold);padding:1rem 1.25rem;background:var(--wash);
  font-size:.95rem}

/* Resource card grid */
.res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:1.5rem}
.res-card{background:var(--paper);border-radius:6px;padding:1.4rem;
  box-shadow:0 3px 12px rgba(8,37,86,.10);text-align:center}
.res-card h3{margin:0 0 .6rem;font-size:1.08rem}
.res-card h3 a{color:var(--navy);text-decoration:none}
.res-card h3 a:hover{text-decoration:underline}
.res-card p{margin:0;font-size:.95rem;color:var(--text-3);max-width:none}

/* Closing navy call to action */
.cta-band{background:var(--navy);color:var(--paper);text-align:center;
  padding:clamp(3.6rem,9vw,7rem) 1.25rem}
.cta-band h2{color:var(--paper);max-width:var(--container);margin:0 auto .9rem}
.cta-band p{color:var(--blue-pale);max-width:74ch;margin:0 auto 1.75rem}

@media (max-width:860px){
  .split-row{grid-template-columns:1fr;gap:2rem}
  .split-row.reverse .split-media{order:0}
  .compare{font-size:.9rem}
  .compare td,.compare th{padding:.7rem .5rem}
}

/* ==== Services dropdown, matching the cwcc.ca pattern ===============
   Opened by a real <button> rather than hover alone, so it works by
   keyboard and on touch. aria-expanded carries the state. */










@media (max-width:900px){
  
  
  
}

/* Testimonials. The disclosure sits inside the figure, not at the foot of the
   section, so a quotation cannot be read apart from its qualifier. */
.quote{margin:0;background:var(--paper);border-radius:6px;padding:1.6rem 1.5rem;
  box-shadow:0 3px 12px rgba(8,37,86,.10);display:flex;flex-direction:column}
.quote .stars{color:#8A6B00;margin:0 0 .6rem;font-size:1.05rem;letter-spacing:.1em}
.quote h3{margin:0 0 .7rem;color:var(--navy);font-size:1.12rem}
.quote blockquote{margin:0 0 .9rem;padding:0}
.quote blockquote p{margin:0;font-style:italic;max-width:none}
.quote figcaption{font-weight:700;color:var(--navy);margin-bottom:.7rem}
.quote .fineprint{margin:auto 0 0;font-size:.84rem;font-style:italic;
  color:var(--muted);line-height:1.5}

/* ==== footer, three columns like the live site ===================== */
.site-foot::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:var(--foil);background-size:200% 100%}
/* Four columns: the practice, Legal, Information, and Where we act. The
   fourth arrived when Locations came out of the menu bar. */
.foot-cols{max-width:var(--container);margin:0 auto;display:grid;
  grid-template-columns:1.35fr 1fr 1fr 1.05fr;gap:2.5rem}
.foot-brand img{display:block;height:64px;width:auto;margin-bottom:1.5rem}
.foot-label{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);margin:1.25rem 0 .25rem;font-weight:700}
.foot-brand p{margin:0;color:#fff;max-width:none;line-height:1.55}
.foot-head{font-size:1.5rem;color:#fff;margin:0 0 1.25rem;padding-bottom:.6rem;
  border-bottom:1px solid var(--gold);font-weight:400}
.site-foot ul{list-style:none;margin:0;padding:0;display:block}
.site-foot li{margin:0 0 .85rem}
.site-foot a{color:#fff;text-decoration:none}
.site-foot a:hover,.site-foot a:focus-visible{color:var(--gold);text-decoration:underline}
.foot-copy{max-width:var(--container);margin:3rem auto 0;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.22);font-size:.92rem;color:#C9D6E8}
@media (max-width:1120px){.foot-cols{grid-template-columns:1.3fr 1fr 1fr;gap:2.25rem}}
@media (max-width:860px){.foot-cols{grid-template-columns:1fr!important;gap:2.25rem}}

/* ==== photo strip, tax note, enquiry form ========================== */
.photo-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem}
.photo-strip img{display:block;width:100%;height:auto;border-radius:4px;
  box-shadow:0 4px 14px rgba(8,37,86,.16)}

/* The 74ch cap that stood here never applied: the grouped rule further down
   overrides it with var(--wrap)!important, which a browser confirms as
   1440px computed. It was removed rather than left in place because a
   declaration that never takes effect still misleads whoever reads the file
   next, and it had already produced a false failure in verify.py, which reads
   this rule and not the one that wins. */
.tax-note{margin:0 auto;font-size:.92rem;line-height:1.6;
  color:var(--text-3)}

.form-block{display:grid;grid-template-columns:1fr 1.35fr;gap:2.5rem;
  background:var(--navy);border:3px solid var(--gold);border-radius:6px;
  padding:2.5rem}
.form-intro h2{color:var(--gold);text-align:left;margin:0 0 .9rem;font-size:2rem}
.form-intro p{color:#fff;max-width:none;margin:0}
.form-fields{display:flex;flex-direction:column;gap:.9rem}
.form-fields .row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.form-fields label{display:flex;flex-direction:column;gap:.3rem;color:#fff;
  font-size:.95rem}
.form-fields label span[aria-hidden]{color:var(--gold);margin-left:.15rem}
.form-fields input[type=text],.form-fields input[type=email],
.form-fields input[type=tel],.form-fields select{
  font:inherit;font-size:1rem;padding:.7rem .8rem;border:1px solid var(--rule);
  border-radius:3px;background:#fff;color:var(--text)}
.form-fields input:focus-visible,.form-fields select:focus-visible{
  outline:3px solid var(--gold);outline-offset:1px}
.form-fields .consent{flex-direction:row;align-items:flex-start;gap:.6rem;
  font-size:.9rem;line-height:1.5;margin-top:.4rem}
.form-fields .consent input{margin-top:.25rem;flex:none;width:1.1rem;height:1.1rem}

.privacy-note a{color:var(--gold)}
.form-fields .btn-primary{align-self:flex-start;margin-top:.5rem;border:0}
@media (max-width:860px){
  .form-block{grid-template-columns:1fr;padding:1.75rem}
  .form-fields .row{grid-template-columns:1fr}
}

/* The long explanation. Indexed and reachable, but not a wall between the
   sections and the footer. */
.longform{max-width:var(--container);margin:0 auto}
.longform > summary{
  cursor:pointer;list-style:none;font-size:1.25rem;color:var(--navy);
  font-weight:700;padding:1.1rem 1.4rem;background:var(--paper);
  border-left:4px solid var(--gold);border-radius:4px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.longform > summary::-webkit-details-marker{display:none}
.longform > summary::after{content:"+";font-size:1.5rem;color:var(--gold);line-height:1}
.longform[open] > summary::after{content:"\2212"}
.longform > summary:hover,.longform > summary:focus-visible{background:var(--blue-pale)}
.longform .body{
  background:var(--paper);padding:2rem 2.25rem;border-radius:0 0 4px 4px;
  margin-top:.25rem;
}
.longform .body > *{max-width:74ch;margin-left:auto;margin-right:auto}

/* ==== the metal, applied with restraint ============================ */
/* Section headings on light surfaces get a short foil rule beneath them
   rather than foil type, which would be unreadable at body sizes. */
.band > .inner > h2{position:relative;padding-bottom:1rem}
.band > .inner > h2::after{content:"";position:absolute;left:50%;bottom:0;
  transform:translateX(-50%);width:88px;height:3px;
  background:var(--foil);background-size:200% 100%}
.split-row h2::after{left:0;transform:none}

/* Cards sit on navy-tinted platinum with a gold hairline at the top edge,
   so the grid reads as inlay rather than as boxes. */
.panel,.res-card,.quote{border-top:2px solid transparent;
  background-image:linear-gradient(var(--paper),var(--paper)),var(--foil);
  background-origin:border-box;background-clip:padding-box,border-box}

/* The navy bands get depth rather than one flat fill. */
.band-navy,.cta-band{
  background:linear-gradient(160deg,var(--navy) 0%,var(--abyss) 100%)}
.cta-band{position:relative}
.cta-band::before,.cta-band::after{content:"";position:absolute;left:0;right:0;
  height:3px;background:var(--foil);background-size:200% 100%}
.cta-band::before{top:0}.cta-band::after{bottom:0}

/* The hero direct answer: gold thread down the left edge.

   Set a step heavier than body text. It is the sentence the whole page is
   built to support, and at the same weight as everything else it read as one
   more paragraph. Georgia has two weights, so this is its bold face at a size
   below the headline: enough to carry, not enough to shout. */
.hero-text .direct-answer{border-left:0;padding-left:1.4rem;position:relative;
  font-size:var(--size-lede);line-height:1.62;
  font-weight:600;color:var(--navy)}
.hero-text .direct-answer::before{content:"";position:absolute;left:0;top:.2em;
  bottom:.2em;width:4px;background:var(--foil);background-size:100% 200%}

/* Step numerals as struck medals rather than flat discs. */
.step-n{background:linear-gradient(150deg,var(--navy-2),var(--abyss));
  box-shadow:0 0 0 2px var(--gold-deep),0 2px 6px rgba(4,18,44,.35);
  color:var(--champagne)}

/* The enquiry form: gold border becomes woven. */
.form-block{border:0;position:relative;
  background:linear-gradient(160deg,var(--navy) 0%,var(--abyss) 100%);
  box-shadow:0 0 0 3px var(--gold-deep)}
.form-block::before{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:6px;padding:3px;background:var(--foil);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}

/* ============================================================
   ARTICLE SHELL: prose column with a sticky rail
   New, and better than either reference in one respect: the rail
   shows READING PROGRESS against the section list, so a long
   regulated page tells you how much is left rather than just
   where you are.
   ============================================================ */

.shell{max-width:var(--container);margin-inline:auto;
  padding:clamp(1.5rem,3.5vw,2.6rem) 1.25rem 4rem;
  display:grid;gap:clamp(1.8rem,4vw,3.2rem);
  grid-template-columns:minmax(0,1fr) 320px}
.shell > .prose{min-width:0}
.shell > .prose > *{max-width:var(--prose)}
.shell > .prose > figure,
.shell > .prose > .ig,
.shell > .prose > .cta-banner-wrap{max-width:none}

/* the rail */
.rail{position:sticky;top:5.5rem;align-self:start;
  /* No max-height and no overflow. A capped, scrollable rail creates a
     second scrollbar and swallows the wheel when the cursor is over it,
     which reads as the page being frozen. */
  max-height:none;overflow:visible}
.toc{background:var(--paper);border:1px solid var(--rule);border-radius:6px;
  padding:1.35rem 1.25rem;border-top:3px solid transparent;
  background-image:linear-gradient(var(--paper),var(--paper)),var(--foil);
  background-origin:border-box;background-clip:padding-box,border-box}
.toc h2{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .9rem;text-align:left;font-weight:700}
.toc h2::after{display:none}
/* No numbers. There were two counters, one on the list item and one on the
   link, so every entry read "1 1", "2 2", "3 3". Removing one of them would
   have left a number the contents does not need: the entries are already in
   the order the page is in, and the figure was competing with the words for
   the reader's eye in a narrow column. */
.toc ol{list-style:none;margin:0;padding:0}
.toc li{margin:0 0 .35rem}
.toc a{color:var(--text-2);text-decoration:none;font-size:.95rem;line-height:1.4}
.toc a:hover,.toc a:focus-visible{color:var(--navy);text-decoration:underline}
.toc li.here a{color:var(--navy);font-weight:700}
.toc li.here::before{color:var(--gold-text)}

/* reading progress, the part neither reference has */
.toc-progress{height:3px;background:var(--rule);border-radius:2px;
  margin:0 0 .6rem;overflow:hidden}
.toc-progress > i{display:block;height:100%;width:0;background:var(--foil);
  background-size:200% 100%;transition:width .18s linear}

/* ARTICLE HERO IMAGE, full bleed above the shell */
.article-hero{position:relative;max-width:var(--container);margin:0 auto;
  padding:0 1.25rem}
.article-hero img{display:block;width:100%;height:auto;border-radius:6px;
  aspect-ratio:1024/420;object-fit:cover}
.article-hero::after{content:"";position:absolute;left:1.25rem;right:1.25rem;
  bottom:0;height:4px;background:var(--foil);background-size:200% 100%;
  border-radius:0 0 6px 6px}

/* INFOGRAPHIC FIGURE.
   Generated by toolchain/infographics.py, which draws seven shapes onto one
   900px plate. The plate carries its own rounded card, its own 1px rule
   border and its own tinted band, so THE STYLESHEET MUST NOT ADD A SECOND
   ONE. It used to: a 6px CSS radius and a 1px CSS border sat outside the
   SVG's own 14px radius and its own border, which reads as a hairline ghost
   around every corner. The frame belongs to whichever layer can round the
   corner correctly, and that is the one drawing the shape. */
.ig{margin:clamp(1.8rem,4vw,2.6rem) 0;max-width:none}
.ig img,.ig svg{display:block;width:100%;height:auto;
  border:0;border-radius:0;background:transparent}
.ig figcaption{font-size:.86rem;color:var(--muted);margin-top:.6rem;
  letter-spacing:.02em}
/* A figure is one object. Broken over a page it becomes two half objects,
   and the half carrying the heading is the one that goes missing. */
@media print{.ig{break-inside:avoid;page-break-inside:avoid}}

/* banners held to 900 */
.cta-banner,.cta-banner-wrap img{max-width:var(--banner-w);
  margin-inline:auto;display:block}

@media (max-width:1040px){
  .shell{grid-template-columns:1fr}
  .rail{position:static;max-height:none;order:-1}
  .toc{margin-bottom:1rem}
}

/* The language toggle where no French twin exists yet. Inert rather than
   absent, so the reader can see the site is bilingual and that this page is
   not yet translated. A toggle that lands on the wrong page, or on a 404, is
   worse than no toggle. */



/* ==== reading measure, taken from how assurancevie.ai sizes an article ====
   That build does not center a narrow column inside a wide container. The
   container itself is the measure, so the text meets its edges and the page
   reads as one column rather than a column adrift in a field. */
main{
  max-width:var(--container);
  margin-inline:auto;
  padding:clamp(2rem,4vw,3.5rem) clamp(1.25rem,4vw,2.5rem) 4rem;
}
/* Article, author, legal and glossary pages read; they do not need 1140px. */
body:has(article.article) main,
body:has(article.author-entity) main,
body:has(article.legal) main{max-width:78ch}
/* The home page carries a collapsed .longform panel, so a selector keyed on
   that class squeezed the hero into a reading column. A landing page keeps the
   full container. */
body:has(article.home) main,
body:has(.hero) main{max-width:var(--container)}

/* Text fills its container instead of being capped again inside it. */
main > article > .body,
main > article > .disclosure,
main > article > .dual-disclosure,
.home > .body,
.longform .body > *{max-width:none;margin-left:0;margin-right:0}

/* Headings and prose keep a comfortable line length by the CONTAINER width,
   which is the whole point of narrowing it. */
main > article > .body > p{max-width:none}

/* ==== rail call to action, the card assurancevie.ai puts under its contents --
   A rail holding only a table of contents leaves most of the column empty on a
   long page, which is what the screenshots showed. */
.rail-cta{
  background:linear-gradient(160deg,var(--navy) 0%,var(--abyss) 100%);
  color:var(--paper);border-radius:6px;padding:1.5rem 1.4rem;margin-top:1.5rem;
  position:relative;
}
.rail-cta::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--foil);border-radius:6px 6px 0 0}
.rail-cta h2{color:var(--paper);font-size:1.15rem;margin:0 0 .6rem;
  padding-bottom:0;border:0}
.rail-cta h2::after{display:none}
.rail-cta p{color:var(--azure);font-size:.95rem;line-height:1.55;margin:0 0 1.1rem;
  max-width:none}
.rail-cta .cta{display:inline-block;background:var(--paper);color:var(--navy);
  padding:.7rem 1.2rem;border-radius:3px;text-decoration:none;font-weight:700;
  font-size:.95rem}
.rail-cta .cta:hover{background:var(--champagne, #FFEFB0)}

/* A pillar with a rail is a two-column page, so it uses the full container
   rather than the narrow reading measure. */
body:has(article.pillar) main{max-width:var(--container)}

/* The shell was written for an article, whose prose sits in .prose. A pillar
   puts its <article> in that slot instead, so the grid child rules must reach
   it too or the column collapses and the rail lands underneath. */
.shell > article.pillar{min-width:0}
.shell > article.pillar > *{max-width:var(--prose)}
.shell > article.pillar > figure,
.shell > article.pillar > .compare-wrap,
.shell > article.pillar > table,
.shell > article.pillar > .cta-banner-wrap{max-width:none}

/* ==========================================================================
   STRUCTURAL REBUILD. Everything below overrides what came before.
   Driven by tokens so a control panel can change them in one place.
   ========================================================================== */
:root{
  --fs-base:16px;      /* body and top menu */
  --fs-h1:38px;
  --fs-h2:26px;        /* base + 10 */
  --fs-h3:22px;        /* base + 6  */
  --fs-h4:18px;
  --wrap:1440px;       /* the real page width, not 1140 */
  /* The settled split is 65 and 35. Expressed as fr rather than as
     percentages, because percentages are taken of the whole container and
     take no account of the gap between the two columns: 65% plus 33% plus a
     43px gap came to 16px more than the box on all 65 article pages. fr
     divides what is left AFTER the gap, so the ratio is exactly 65 to 35 and
     the track cannot overflow whatever the gap is set to.
     --rail-col was also declared twice here, 35% then 33%, and the second
     won, so the settled 35 had quietly become 33. */
  /* minmax(0, …) wraps both tracks, 25 August 2026.
     An fr track carries an automatic minimum of auto, so a wide item inside a
     track can push it past its own share and squeeze the other one. That is
     what happened: the contents rail sets its links nowrap, French headings run
     longer than English ones, and a 659px link forced the 35 track to 693px.
     The article column collapsed to 472px on two French pages, against a 520px
     floor, while the rail took 58 percent of a grid declared at 35. minmax(0)
     removes the automatic minimum, so the settled 65 to 35 is now enforced
     rather than merely requested. The value is unchanged; only its floor is. */
  --prose-col:minmax(0,65fr);
  --rail-col:minmax(0,35fr);
}

/* ==== WIDTH. Every page uses the full frame. ==== */
main,.shell,.band > .inner,.foot-cols,.foot-copy,.inner{
  max-width:var(--wrap)!important;
  margin-inline:auto!important;
}
/* The top of the page is white, not the page's tinted ground.

   main's top padding was zero, so the space above the hero could only be made
   with a MARGIN, and a margin on the first child collapses out through main
   and shows whatever is behind it. Behind it is the body, which is #F2F5FA,
   so the gap under the masthead was a pale blue strip across the full width.
   The space is padding inside main now, and main is white, so the strip is
   white. */
main{padding:clamp(1.5rem,3vw,2.5rem) clamp(1.25rem,3vw,2.5rem) 4rem!important}
body:has(article.article) main,
body:has(article.author-entity) main,
body:has(article.legal) main,
body:has(article.pillar) main,
body:has(.hero) main{max-width:var(--wrap)!important}

/* ==== TYPE ==== */
html,body{font-size:var(--fs-base)!important;line-height:1.7}
body,p,li,td,th,label,input,select,textarea,button{font-family:var(--font)}
h1,.hero h1{font-size:var(--fs-h1)!important;line-height:1.15;letter-spacing:-.015em}
h2{font-size:var(--fs-h2)!important;line-height:1.25}
h3{font-size:var(--fs-h3)!important;line-height:1.3}
h4{font-size:var(--fs-h4)!important}


/* ==== ARTICLE AND PILLAR: two blocks, 65 and 33, rail sticky, NO inner scroll === */
.shell{
  display:grid!important;
  grid-template-columns:var(--prose-col) var(--rail-col)!important;
  gap:clamp(1.5rem,3vw,3rem)!important;
  align-items:start!important;
  padding:0 0 4rem!important;
}
.shell > .prose,.shell > article{min-width:0;max-width:none}
.shell > .prose > *,.shell > article > *{max-width:none!important}

.rail{
  position:sticky!important;
  top:5.5rem!important;
  align-self:start!important;
  max-height:none!important;   /* the inner scrollbar in the screenshot */
  overflow:visible!important;
}
.toc{max-height:none!important;overflow:visible!important}

/* ==== ARTICLE HEADER IMAGE above the H1 ==== */
.article-hero,.pillar-hero{
  max-width:var(--wrap);margin:0 auto 2rem;position:relative;
}
.article-hero img,.pillar-hero img{
  display:block;width:100%;height:clamp(220px,26vw,380px);object-fit:cover;
  border-radius:6px}
.article-hero::after,.pillar-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--foil);border-radius:0 0 6px 6px}

@media (max-width:960px){
  .shell{grid-template-columns:1fr!important}
  .rail{position:static!important}
}

/* ==== FOOTER, full width, disclosure across the whole frame ==== */
.foot-cols{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.05fr;gap:2.5rem}
.foot-disclosure{
  max-width:var(--wrap);margin:2.5rem auto 0;padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.2);
  font-size:12.5px;line-height:1.65;color:#C9D6E8;column-gap:2.5rem;
}
.foot-disclosure p{max-width:none;margin:0 0 .85rem;color:#C9D6E8}
.foot-disclosure strong{color:#fff}
.foot-disclosure h2{display:none}
@media (max-width:860px){.foot-cols{grid-template-columns:1fr}}

/* ==== FORM. Placeholders inside the fields, one height, two columns. ==== */
.form-block{display:grid;grid-template-columns:1fr 1.35fr;gap:2.5rem;align-items:start}
.form-fields{display:flex;flex-direction:column;gap:.85rem}
.form-fields .row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.form-fields input[type=text],.form-fields input[type=email],
.form-fields input[type=tel],.form-fields select{
  height:48px;padding:0 .9rem;font:inherit;font-size:var(--fs-base);
  border:1px solid var(--rule);border-radius:3px;background:#fff;color:var(--text);
  width:100%;box-sizing:border-box}
.form-fields select{padding-right:2rem}
.form-fields ::placeholder{color:#6B7686;opacity:1}
.form-fields label:not(.consent){display:none}
.form-intro h2{font-size:var(--fs-h1);color:var(--gold);text-align:left;margin:0 0 .8rem}
@media (max-width:860px){
  .form-block{grid-template-columns:1fr}
  .form-fields .row{grid-template-columns:1fr}
}

/* ==== MENU. Four pixels larger than the body, as requested. ==== */

.foot-brand img{height:48px;width:auto}

/* ==== RESOURCES: the card index ==== */
.cards-group{margin:0 0 3rem}
.cards-group > h2{padding-bottom:.6rem;border-bottom:2px solid var(--gold);
  margin-bottom:.5rem}
.group-lede{color:var(--muted);margin:0 0 1.4rem;max-width:80ch}
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1.5rem}
/* The article cards.

   Same design as the five step cards, which was the request: the same resting
   shadow, the same lift, and the same change of ground colour under the
   pointer. They also carry a picture now, so the grid reads as articles rather
   than as a list of links in boxes. */
.res-card{background:var(--paper);border:1px solid var(--rule);border-radius:10px;
  padding:0;display:flex;flex-direction:column;position:relative;
  overflow:hidden;
  transition:transform .32s cubic-bezier(.2,.7,.3,1),
             box-shadow .32s cubic-bezier(.2,.7,.3,1),
             background-color .32s ease;
  box-shadow:
    6px 10px 18px rgba(8,37,86,.10),
    2px  4px  8px rgba(8,37,86,.08);
}
.res-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--foil);border-radius:10px 10px 0 0;z-index:2}
.res-card:hover,.res-card:focus-within{
  transform:translateY(-6px);
  background:var(--mist);
  box-shadow:
    -14px 26px 44px rgba(8,37,86,.20),
     -4px  8px 16px rgba(8,37,86,.12);
}
/* The picture. A fixed ratio so a row of cards has one horizon line whatever
   shape the source images are. */
.res-thumb{display:block;margin:0;background:var(--wash);overflow:hidden}
.res-thumb img{display:block;width:100%;height:100%;object-fit:cover;
  aspect-ratio:16/9;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.res-card:hover .res-thumb img{transform:scale(1.045)}
.res-body{padding:1.15rem 1.3rem 1.3rem;display:flex;flex-direction:column;flex:1}
@media (prefers-reduced-motion:reduce){
  .res-card{transition:box-shadow .2s ease,background-color .2s ease}
  .res-card:hover,.res-card:focus-within{transform:none}
  .res-thumb img,.res-card:hover .res-thumb img{transition:none;transform:none}
}
.res-cat{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-text);margin-bottom:.6rem;font-weight:700}
.res-card h3{margin:0 0 .6rem;font-size:var(--fs-h3);line-height:1.3}
.res-card h3 a{color:var(--navy);text-decoration:none}
.res-card h3 a:hover{text-decoration:underline}
.res-card p{font-size:calc(var(--fs-base) - 1px);color:var(--muted);
  margin:0 0 1rem;line-height:1.55;flex:1}
.res-more{font-size:.85rem;font-weight:700;color:var(--royal);text-decoration:none;
  align-self:flex-start}
.res-more::after{content:" \2192"}

/* ==== STICKY RAIL, done the way it actually works =========================
   A sticky element only sticks while its PARENT is still in view. The rail was
   align-self:start, so it was only as tall as its own contents: once the
   article scrolled past that height the rail had nothing left to stick within
   and the whole right column went blank.

   The rail must fill the grid row. The block INSIDE it does the sticking, and
   it then follows the reader for the full length of the article. */
.shell{align-items:stretch!important}
.rail{
  position:static!important;      /* the rail is now the track */
  align-self:stretch!important;
  max-height:none!important;
  overflow:visible!important;
  height:100%;
}
.rail > .toc,
.rail > .rail-cta{position:static}
.rail-inner,
.rail > .toc:first-child{
  position:sticky;
  top:5.5rem;
}
/* Wrap both blocks so they travel together. Where no wrapper exists the first
   child sticks and the CTA rides with it. */
.rail-sticky{position:sticky;top:5.5rem;display:flex;flex-direction:column;
  gap:1.5rem}

@media (max-width:960px){
  .shell{align-items:start!important}
  .rail,.rail-sticky{position:static!important;height:auto}
}

/* ==== DISCLOSURES AND PANELS AT FULL FRAME WIDTH ==========================
   The home-page selector still capped these at 74ch, which is why the
   disclosure blocks rendered at roughly half the frame while everything above
   them ran full width. An earlier fix cleared only the article version. */
.home > .body,
.home > .disclosure,
.home > .dual-disclosure,
main > article > .disclosure,
main > article > .dual-disclosure,
.disclosure,
.dual-disclosure,
.longform{
  max-width:var(--wrap)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  width:100%;
}
.dual-disclosure{padding:1.5rem 1.75rem}
.dual-disclosure p{max-width:none}

/* ==== The closing navy band: half the padding it had ==== */
.cta-band{padding:clamp(1.8rem,4.5vw,3.5rem) 1.25rem!important}
.cta-band .inner{max-width:var(--wrap);margin-inline:auto}

/* ==== The collapsed panel, redesigned ====================================
   It was a white bar in a grey field with nothing to indicate it opens. Now it
   reads as a control: full width, a gold rule, and a marker that rotates. */
.longform{margin-block:2.5rem}
.longform > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.25rem 1.75rem;
  background:var(--mist);
  border:1px solid var(--rule);
  border-left:4px solid var(--gold);
  border-radius:4px;
  font-size:var(--fs-h3);color:var(--navy);font-weight:700;
  transition:background .18s ease;
}
.longform > summary::-webkit-details-marker{display:none}
.longform > summary::after{
  content:"";flex:none;width:11px;height:11px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg) translateY(-3px);
  transition:transform .22s ease;
}
.longform[open] > summary::after{transform:rotate(-135deg) translateY(-3px)}
.longform > summary:hover{background:var(--blue-pale)}
.longform > summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.longform .body{
  background:var(--paper);border:1px solid var(--rule);border-top:0;
  border-radius:0 0 4px 4px;padding:2rem 1.75rem;
}
.longform .body > *{max-width:none!important;margin-left:0!important;
  margin-right:0!important}

/* ==== The collapsed panel: 65% less vertical padding =======================
   Was 1.25rem top and bottom on the summary and 2rem on the body. The band
   around it also carried a full section's padding, which is what made it a
   mostly empty screen. */
.longform{margin-block:1rem}
.longform > summary{padding-block:.44rem}          /* 1.25rem less 65% */
.longform .body{padding-block:.7rem}               /* 2rem less 65%    */
.longform .body{padding-inline:1.75rem}

/* The band that holds it does not need a full section's height. */
.band:has(> .inner > .longform){
  padding-block:clamp(.8rem,2vw,1.4rem)!important}

/* ==== Every remaining 74ch cap. Found by auditing the built page rather than
   the stylesheet, because each time I fixed one selector another was still
   holding the width. ==== */
.tax-note,
.band > .inner > p,
.band > .inner > .tax-note{max-width:var(--wrap)!important;margin-inline:auto!important}

/* ==== CONTACT FORM. Left panel fills its space, shadow under the block. ==== */
.form-block{
  box-shadow:0 18px 44px rgba(8,37,86,.22);
  align-items:center;
  padding:clamp(2rem,4vw,3.25rem);
}
.form-intro{display:flex;flex-direction:column;justify-content:center;height:100%}
.form-intro h2{
  font-size:clamp(2rem,3.4vw,3.1rem)!important;
  line-height:1.1;color:var(--gold);margin:0 0 1.1rem}
.form-intro p{
  font-size:calc(var(--fs-base) + 4px);line-height:1.6;color:#D6D0C6;
  max-width:38ch;margin:0}
.form-intro .intro-rule{width:72px;height:3px;background:var(--foil);
  margin:1.5rem 0 0}

/* ==== EVERY BUTTON AND CALL TO ACTION =====================================
   One colour, one token. White text measures 6.01:1 on it, which passes.
   Navy text measures 2.48:1 and must never be used on this fill. */
.btn-primary,.btn,button[type=submit],
.cta-band a.cta,.hero .acts .btn-primary,
.form-fields .btn-primary,a.btn-cta{
  background:var(--coral)!important;
  color:#fff!important;
  border-color:var(--coral)!important;
}
.btn-primary:hover,button[type=submit]:hover,
.rail-cta a.cta:hover,.cta-band a.cta:hover,.form-fields .btn-primary:hover{
  background:var(--coral-hover)!important;border-color:var(--coral-hover)!important;color:#fff!important}

/* On the navy header the fill only reaches 2.48:1 against the bar, so it needs
   an edge to separate it from the background. */
.site-head .btn-primary,.btn-cta{
  background:var(--coral)!important;color:#fff!important;
  border:2px solid rgba(255,255,255,.9)!important}
.site-head .btn-primary:hover,.btn-cta:hover{
  background:var(--coral-hover)!important;border-color:#fff!important;color:#fff!important}

/* ==== THE FORM'S LEFT PANEL ================================================
   It was a heading with empty space beneath it. The panel now carries the
   heading, a rule, the intro, and the three things a visitor wants to know
   before giving their details. */
.form-block{grid-template-columns:1fr 1.15fr;align-items:stretch}
.form-intro{
  display:flex;flex-direction:column;justify-content:center;
  padding-right:clamp(1rem,2.5vw,2.5rem);
  border-right:1px solid rgba(252,198,0,.28);
}
.form-intro h2{margin:0 0 1rem}
.form-intro > p{margin:0 0 1.75rem}
.form-points{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:1rem}
.form-points li{
  display:flex;gap:.85rem;align-items:flex-start;
  color:#D6D0C6;font-size:var(--fs-base);line-height:1.5}
.form-points svg{flex:none;width:20px;height:20px;margin-top:.15rem}
.form-points b{color:#fff;display:block;font-weight:700}
@media (max-width:860px){
  .form-block{grid-template-columns:1fr}
  .form-intro{border-right:0;border-bottom:1px solid rgba(252,198,0,.28);
    padding-right:0;padding-bottom:2rem;margin-bottom:2rem}
}



/* ==========================================================================
   THE SIDE RAIL, rebuilt.
   Two cards, one on top of the other, both always whole. The contents list
   scrolls inside its own card when it is long; the call to action sits beneath
   it and is never pushed off the screen.
   ========================================================================== */
/* The rail stays put, always.

   Three attempts and three faults, so the reasoning is written out.

   Capping the rail and letting the CARD scroll made a second scrollbar that
   swallowed the wheel. Capping the rail while the card is held at
   overflow:visible made the card spill over the call to action beneath it.
   Removing the cap and letting the rail stop sticking meant the rail scrolled
   away and left the whole right column empty for the rest of the article.

   What works: the rail is capped to the screen and stays stuck, the card is
   never a scroll container, and the one thing that scrolls is the LIST inside
   the card, which has a definite height from the flex layout. The card's
   heading stays visible, the call to action is always on screen, and the
   column is never empty. */
.rail-sticky{
  position:sticky;top:5.5rem;
  display:flex;flex-direction:column;gap:1rem;
  max-height:calc(100vh - 7rem);
}

/* ==== contents card ==== */
.rail-sticky > .toc{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:8px;
  padding:.95rem 1rem .8rem;
  margin:0;
  position:relative;
  /* A flex column that may shrink, with min-height:0 so it is allowed to.
     The list inside is the part that scrolls. */
  display:flex;flex-direction:column;
  flex:0 1 auto;min-height:0;
  box-shadow:0 2px 10px rgba(8,37,86,.06);
}
.rail-sticky > .toc::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--foil);border-radius:8px 8px 0 0}
.rail-sticky > .toc h2{
  font-size:.78rem!important;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-text);margin:0 0 .6rem;padding:0 0 .5rem;
  border-bottom:1px solid var(--rule);font-weight:700}
.rail-sticky > .toc h2::after{display:none}
.rail-sticky > .toc ol{
  list-style:none;margin:0;padding:0;
  flex:1 1 auto;min-height:0;
  overflow-y:auto;
  /* auto, NOT contain. contain stops the wheel at the end of the list, which
     is what made the page feel frozen the first time this was tried. auto
     hands the wheel back to the page once the list has no more to give. */
  overscroll-behavior-y:auto;
  scrollbar-width:thin;
}
.rail-sticky > .toc ol::-webkit-scrollbar{width:6px}
.rail-sticky > .toc ol::-webkit-scrollbar-thumb{
  background:var(--rule);border-radius:3px}
.rail-sticky > .toc ol::-webkit-scrollbar-thumb:hover{background:var(--azure)}
.rail-sticky > .toc li{margin:0}
/* One entry, one line. A heading longer than the column is trimmed with an
   ellipsis rather than wrapped, so the contents stays a scannable column of
   single lines. The full wording is on the link's title attribute and on the
   heading it points at, so nothing is lost, and the type is two pixels larger
   than it was because it had been set below reading size. */
.rail-sticky > .toc a{
  display:block;
  padding:.34rem 0;color:var(--muted);text-decoration:none;
  font-size:var(--fs-base);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-radius:3px;transition:color .15s ease}
.rail-sticky > .toc a:hover{color:var(--navy)}
/* a slim scrollbar rather than the browser's default slab */
.rail-sticky > .toc::-webkit-scrollbar{width:6px}
.rail-sticky > .toc::-webkit-scrollbar-thumb{
  background:var(--rule);border-radius:3px}
.rail-sticky > .toc::-webkit-scrollbar-thumb:hover{background:var(--azure)}

/* ==== call to action card ==== */
.rail-sticky > .rail-cta{
  flex:0 0 auto;
  /* Its own layer, above nothing and below nothing. Kept explicit because the
     two cards were reported as overlapping and a stacking accident should not
     be able to bring that back quietly. */
  z-index:0;
  background:linear-gradient(155deg,var(--navy) 0%,var(--abyss) 100%);
  color:var(--paper);
  border-radius:8px;
  padding:1.15rem 1.15rem 1.2rem;
  margin:0;
  position:relative;overflow:hidden;
  box-shadow:0 10px 28px rgba(8,37,86,.18);
}
.rail-sticky > .rail-cta::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--foil)}
.rail-sticky > .rail-cta h2{
  color:var(--paper)!important;font-size:calc(var(--fs-base) + 4px)!important;
  line-height:1.25;margin:0 0 .8rem;padding:0;border:0;font-weight:700}
.rail-sticky > .rail-cta h2::after{display:none}
.rail-sticky > .rail-cta p{
  color:var(--azure);font-size:calc(var(--fs-base) - 2px);line-height:1.5;
  margin:0 0 .4rem;max-width:none}
.rail-sticky > .rail-cta p:last-of-type{margin-bottom:.95rem}
.rail-sticky > .rail-cta .rail-btn{
  display:block;text-align:center;
  background:var(--coral)!important;color:#fff!important;
  padding:.7rem 1rem;border-radius:4px;text-decoration:none;font-weight:700;
  font-size:calc(var(--fs-base) - 1px);border:0}
.rail-sticky > .rail-cta .rail-btn:hover{background:var(--coral-hover)!important}

@media (max-width:960px){
  .rail-sticky{position:static;max-height:none}
  .rail-sticky > .toc{overflow:visible;flex:none;display:block}
  .rail-sticky > .toc ol{overflow:visible;max-height:none}
  /* On one column there is room to read the whole heading. */
  .rail-sticky > .toc a{white-space:normal;overflow:visible}
}

/* ==== IMPORTANT DISCLOSURES: full frame, not half ========================= */
.disclosure,.disclosure-stack,section.disclosure,
.band > .inner > .disclosure{
  max-width:var(--wrap)!important;width:100%;
  margin-inline:auto!important}
.disclosure p,.disclosure li{max-width:none!important}

/* ==== IMAGES: shadow, and the shadow moves on hover ======================= */
.figure-shadow,.body figure,.pain-figure,.article-hero,.pillar-hero{
  position:relative}
/* Five percent of the picture's own width, not a fixed 8px. This rule sits
   later in the file than the split-row rules and carries the same weight, so
   it decided the corner on the home page portraits as well; the two are set
   from one place now rather than disagreeing from two. */
.figure-shadow img,.body figure img,.pain-figure img{
  display:block;width:100%;height:auto;border-radius:5%;
  box-shadow:0 14px 34px rgba(8,37,86,.28),0 4px 10px rgba(8,37,86,.16);
  transition:box-shadow .32s cubic-bezier(.2,.7,.3,1),
             transform .32s cubic-bezier(.2,.7,.3,1);
}
.figure-shadow img:hover,.body figure img:hover,.pain-figure img:hover{
  box-shadow:-10px 22px 46px rgba(8,37,86,.3);
  transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){
  .figure-shadow img,.body figure img,.pain-figure img{transition:none}
  .figure-shadow img:hover,.body figure img:hover,.pain-figure img:hover{
    transform:none}
}

/* ==== The pain-points section becomes two columns ========================= */
.pain-split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media (max-width:860px){.pain-split{grid-template-columns:1fr}}

/* ==== SEMINAR CAROUSEL ==================================================== */
/* The seminar strip sits inside a .band, which already carries the section
   padding. Its own clamp of up to 4rem on each side added a second spacer to
   the first one, so the strip floated in the middle of a screen of nothing. */
.seminars{margin:0}
/* The line under the heading is centred, so the sentence under it is too. */
.seminars .inner > p{text-align:center;max-width:70ch;margin:0 auto 1.2rem;
  color:var(--muted)}
.seminar-track{
  display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:.5rem .25rem 1.5rem;
  scrollbar-width:thin;
  /* overflow-x:auto alone does not contain this. A flex or grid item defaults
     to min-width:auto, which refuses to shrink below its content, so the track
     grew to the width of nine slides and pushed the whole page sideways at
     768, 960 and 1024. The scrollbar was there and doing nothing, which is why
     it looked contained. */
  min-width:0;max-width:100%;
  overscroll-behavior-x:contain}
.seminar-track::-webkit-scrollbar{height:6px}
.seminar-track::-webkit-scrollbar-thumb{background:var(--rule);border-radius:3px}
.seminar-slide{
  flex:0 0 clamp(260px,30%,360px);scroll-snap-align:start;
  background:var(--paper);border:1px solid var(--rule);border-radius:8px;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(8,37,86,.14);
  transition:box-shadow .32s cubic-bezier(.2,.7,.3,1),
             transform .32s cubic-bezier(.2,.7,.3,1)}
.seminar-slide:hover{
  box-shadow:-10px 20px 42px rgba(8,37,86,.26);transform:translateY(-4px)}
.seminar-slide img{display:block;width:100%;height:190px;object-fit:cover}
.seminar-cap{padding:1rem 1.1rem}
.seminar-cap h3{margin:0 0 .3rem;font-size:var(--fs-h3)!important;color:var(--navy)}
.seminar-cap p{margin:0;font-size:calc(var(--fs-base) - 2px);color:var(--muted)}
.seminar-nav{display:flex;gap:.6rem;justify-content:flex-end;margin-top:-.5rem}
.seminar-nav button{
  /* 44px, not 40. The touch target minimum is 44 and these were four short,
     which is the sort of miss that never shows up in a screenshot. */
  width:44px;height:44px;border-radius:50%;border:1px solid var(--rule);
  background:var(--paper);color:var(--navy);cursor:pointer;font-size:1.1rem;
  display:grid;place-items:center;transition:background .16s ease}
.seminar-nav button:hover{background:var(--navy);color:var(--paper)}
.seminar-nav button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* The pause control carries a word, so it is wider than the round arrows and
   keeps its own shape rather than being squeezed into a circle. */
.seminar-nav .seminar-pause{
  width:auto;min-width:88px;height:44px;border-radius:22px;padding:0 1rem;
  font-family:var(--font);font-size:.95rem;font-weight:700;letter-spacing:.01em}
.seminar-nav .seminar-pause[aria-pressed="true"]{
  background:var(--navy);color:var(--paper);border-color:var(--navy)}

/* A subsection sits under its section rather than beside it. Without the
   indent the rail reads as one flat list and the reader cannot tell a heading
   from a sub-heading, which is worse than leaving the sub-headings out. The
   numbering counter runs on the top level only, so the visible numbers still
   match the sections. */
.rail-sticky > .toc li.toc-l3{counter-increment:none}
.rail-sticky > .toc li.toc-l3 > a{
  padding-left:1.6rem;font-size:.92em;opacity:.88}
.rail-sticky > .toc li.toc-l3 > a::before{content:none}

/* ===========================================================================
   28. THE LIFT. One shadow treatment, one place, applied to every raised
   surface on the site.

   It already existed but only for images, under .figure-shadow, so a
   photograph lifted on hover and a card beside it sat flat. That is the same
   fault as one component in two stylesheets, in a different form: one
   behaviour defined for a subset and absent from the rest, with no single
   place to change it.

   Two shadows, moving at different rates. A single shadow translating looks
   like a rectangle sliding sideways; the near one moving further and faster
   than the far one reads as the object being picked up and turned toward the
   reader, which is the effect being asked for.

   Anyone who has asked their system for less motion keeps the shadow and the
   colour and gets no movement at all. The shadow is not the barrier; the
   travel is.
   ========================================================================== */
.lift{
  transition:box-shadow .32s cubic-bezier(.2,.7,.3,1),
             transform .32s cubic-bezier(.2,.7,.3,1),
             background-color .32s ease;
  box-shadow:
     6px 10px 18px rgba(8,37,86,.10),
     2px  4px  8px rgba(8,37,86,.08);
}
.lift:hover,.lift:focus-within{
  transform:translateY(-6px);
  box-shadow:
    -14px 26px 44px rgba(8,37,86,.20),
     -4px  8px 16px rgba(8,37,86,.12);
}
@media (prefers-reduced-motion:reduce){
  .lift{transition:box-shadow .2s ease,background-color .2s ease}
  .lift:hover,.lift:focus-within{transform:none}
}

/* ==== 29. THE STEP CARDS =================================================
   Gold rule across the top with a navy rule immediately inside it, the number
   in a navy disc straddling the top-left corner, and a short gold connector
   between one card and the next. The connector is drawn on the card rather
   than as an element of its own, so a row that wraps does not leave a dash
   pointing at nothing. */
.steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:2.25rem;margin:3rem 0 0;padding:0;list-style:none;
  align-items:stretch;
}
.steps li{
  position:relative;margin:0;padding:2.4rem 1.5rem 1.75rem;
  background:var(--paper);
  border:1px solid var(--navy);
  border-top:2px solid var(--navy);
  border-radius:12px;
  /* One box-shadow property, three jobs.

     These cards carry .lift, which paints the resting shadow every other card
     on the site has. This rule came later in the file and set box-shadow to
     the gold rule alone, so it replaced the whole thing and the five step
     cards were the one group on the page sitting flat on the paper. That is
     the missing shadow that was reported. The gold rule is the first layer
     and the resting shadow follows it. */
  box-shadow:
    0 -4px 0 -1px var(--gold),
    6px 10px 18px rgba(8,37,86,.10),
    2px  4px  8px rgba(8,37,86,.08);
}
.steps li.lift:hover,.steps li.lift:focus-within{
  background:var(--mist);
  box-shadow:
    0 -4px 0 -1px var(--gold),
    -14px 26px 44px rgba(8,37,86,.20),
     -4px  8px 16px rgba(8,37,86,.12);
}
/* The connector.
   It hangs 2.25rem into the gap on the right of each card. :last-child covers
   the final card, but not the last card of a WRAPPED row, and CSS cannot
   express "last in row". That overhang pushed the page sideways by 6px at
   960, 4px at 1024 and 12px at 768, which is exactly the fault the responsive
   check exists to catch, introduced by me while adding these cards.
   So the connectors are drawn only at a width where all five cards are
   guaranteed to sit on one line and no row can wrap. Below that they are not
   drawn at all, which is also the honest reading: a dash between two cards
   stacked vertically points at nothing. */
.steps li::after{content:none}
@media (min-width:1320px){
  .steps li::after{
    content:"";position:absolute;top:50%;right:-2.25rem;width:2.25rem;height:2px;
    background:var(--gold);
  }
  .steps li:last-child::after{content:none}
}
.step-n{
  position:absolute;top:-1.15rem;left:1.1rem;
  display:inline-flex;align-items:center;justify-content:center;
  width:2.3rem;height:2.3rem;border-radius:50%;
  background:var(--navy);color:var(--paper);
  font-weight:700;font-size:1rem;line-height:1;
  box-shadow:0 2px 6px rgba(8,37,86,.28);
}
.steps h3{margin:0 0 .6rem;color:var(--navy)}
.steps p{margin:0;max-width:none}
@media (max-width:640px){
  .steps{grid-template-columns:1fr;gap:1.75rem}
  .steps li::after{content:none}
}

/* A table scrolls inside its own frame so the page never moves sideways.
   The frame is focusable, because a region that scrolls must be reachable by
   keyboard, and a visible edge appears only when there is something to scroll
   to, so a table that fits shows no furniture at all. */
.table-scroll{
  max-width:100%;overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.table-scroll:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.table-scroll table{margin-block:1.75rem}

/* A card title is the whole reason the card is there, and it was a 25px line
   of text. The link now fills the card's width and carries enough padding to
   clear the 44px target, so the thing a reader aims at is the size of the
   thing they are aiming for. */
.res-card h3 a,.res-card a.res-title{
  display:flex;align-items:center;min-height:46px;
  padding:.35rem 0}
/* The "Read more" link on a card was 47 by 23. Same reasoning as the title:
   an aim point smaller than a fingertip. */
.res-card .res-more,.res-card p:last-child a{
  /* min-width as well as min-height. The word "Read" plus its arrow measured
     43.8 wide, which passes a height check and still fails the target. Both
     axes have to clear 44, not one. */
  display:inline-flex;align-items:center;justify-content:flex-start;
  min-height:46px;min-width:56px;padding:.25rem 0}
/* The consent checkbox is 17.6px, but the target is the label wrapping it,
   which was 43px tall: one pixel under, and the one control on the site a
   reader must use before the form will submit. */
label.consent{display:flex;align-items:flex-start;gap:.6rem;min-height:46px;
  padding:.2rem 0;cursor:pointer}

/* ==== 30. THE PROMPT ABOVE THE LONG EXPLANATION ==========================
   The most substantial writing on the home page sits behind a disclosure
   control, and a closed control reads as a footer rule rather than as a door.
   This is the sign on the door: an arrow pointing down at it and a line
   saying what is behind it.

   The arrow moves. It is a two-second nudge of a few pixels on a single
   element that carries no information, so nothing is lost when it is removed,
   and the block at the end of this rule removes it for anyone who has asked
   their system for reduced motion. */
.longform-prompt{
  display:flex;align-items:center;gap:.85rem;
  max-width:var(--container);margin:0 auto .9rem;
  padding:.85rem 1.15rem;
  background:var(--paper);
  border:2px solid var(--gold);
  border-radius:8px;
  box-shadow:0 6px 16px rgba(8,37,86,.12);
  font-size:calc(var(--fs-base) + 1px);
  color:var(--navy);
}
.longform-prompt b{color:var(--coral)}
.longform-arrow{
  flex:none;width:1.5rem;height:1.5rem;
  border-right:4px solid var(--coral);
  border-bottom:4px solid var(--coral);
  transform:rotate(45deg) translate(-2px,-2px);
  animation:nudge-down 1.6s ease-in-out infinite;
}
@keyframes nudge-down{
  0%,100% {transform:rotate(45deg) translate(-2px,-2px)}
  50%     {transform:rotate(45deg) translate(3px,3px)}
}
@media (prefers-reduced-motion:reduce){
  .longform-arrow{animation:none}
}

/* ==== 31. THE CLOSING SPACING FIXES ======================================
   Reported one by one from the running page. Each is a gap or a collision
   between a heading and the block under it. */

/* The client quotations sat directly against their heading while the space
   above the heading was the full band padding, so the section read upside
   down: a wide gap, a heading, then the cards touching it. */
.band > .inner > h2{margin-bottom:1.1rem}
.band > .inner > h2 + .grid-3,
.band > .inner > h2 + .res-grid,
.band > .inner > .lede + .grid-3{margin-top:1.5rem}

/* The comparison table carried the band's padding above it AND its own top
   margin below the heading. */
.band .table-scroll table{margin-block:1.1rem}
.compare-note{margin-top:1.1rem}

/* A quotation card needs room around the words, and the disclosure under it
   is a separate thought rather than the last line of the quotation. */
.quote{padding:1.5rem 1.4rem}
.quote .fineprint{margin-top:1rem;padding-top:.85rem;
  border-top:1px solid var(--rule)}

/* ==== 32. THE DISCLOSURE SET =============================================
   One heading, then the page's disclosures as numbered points.

   A page carrying five of them used to open five consecutive blocks with the
   same two words, and the footer stack then said them a sixth time. The
   wording of each disclosure is untouched, and each is still its own element
   with its own key so the parity and visibility checks still see five things.
   What is different is that the label is said once and each point carries a
   subject line of its own.

   Nothing here collapses or hides. A disclosure behind a control the reader
   has to find is a disclosure that was not made. */
.disclosure-set{
  max-width:var(--container);margin:2.25rem auto 0;
  padding:1.5rem 1.6rem 1.6rem;
  background:var(--wash);
  border:1px solid var(--rule);
  border-top:4px solid var(--gold);
  border-radius:0 0 10px 10px;
}
.disclosure-set > h2{
  margin:0 0 1.1rem;text-align:left;
  font-size:1.12rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--navy);
}
.disclosure-set > h2::after{content:none}
.disclosure-set > ol{
  margin:0;padding:0;list-style:none;counter-reset:disc;
}
.disclosure-set > ol > li{
  counter-increment:disc;
  position:relative;
  margin:0;padding:1rem 0 1rem 3rem;
  border-top:1px solid var(--rule);
}
.disclosure-set > ol > li:first-child{border-top:0;padding-top:.25rem}
.disclosure-set > ol > li::before{
  content:counter(disc);
  position:absolute;left:0;top:1rem;
  display:inline-flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border-radius:50%;
  background:var(--navy);color:var(--gold);
  font-weight:700;font-size:.95rem;line-height:1;
}
.disclosure-set > ol > li:first-child::before{top:.25rem}
/* Inside the set the individual block loses its own frame. It was a bordered
   box, and five bordered boxes inside one bordered box is a stack of frames
   rather than a list of points. */
.disclosure-set .dual-disclosure{
  border:0;background:none;padding:0;margin:0;max-width:none;
}
.disclosure-set .dual-disclosure .formal{margin-bottom:.55rem}
.disclosure-set .dual-disclosure .formal strong{
  font-style:normal;color:var(--navy);letter-spacing:.005em}
.disclosure-set .dual-disclosure .plain{margin-bottom:0;color:var(--text-3)}
/* Alternating ground, so a long point and the one after it do not run into
   each other as one paragraph. */
.disclosure-set > ol > li:nth-child(even){background:rgba(255,255,255,.55)}
@media print{
  .disclosure-set{border-color:#000;background:none}
}

/* ==== 33. THE PEOPLE ======================================================
   Photograph, name, role, and the licence that decides whether that person may
   lawfully advise the reader. The licence line is not decoration: it is the
   only fact on the card that changes the answer to the reader's question. */
.team{margin:2.75rem 0 0}
.team > h2{margin-bottom:.6rem}
.team-lede{color:var(--muted);max-width:78ch;margin:0 0 1.6rem;
  font-size:var(--size-lede);line-height:1.6}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.75rem}
.team-card{background:var(--paper);border:1px solid var(--rule);
  border-top:4px solid var(--gold);border-radius:0 0 10px 10px;
  display:flex;flex-direction:column;overflow:hidden}
.team-photo{display:block;width:100%;height:auto;aspect-ratio:4/3;
  object-fit:cover;object-position:center 18%;background:var(--wash)}
/* A portrait inside a card is rounded and lifted the same way as the one on
   the home page, so the two read as one treatment. */
.team-card{box-shadow:0 10px 26px rgba(8,37,86,.16)}
.team-body{padding:1.25rem 1.35rem 1.4rem;display:flex;flex-direction:column;flex:1}
.team-body h3{margin:0 0 .2rem;color:var(--navy)}
.team-role{margin:0 0 .7rem;color:var(--gold-text);font-weight:700;
  font-size:.95rem;letter-spacing:.02em}
.team-licence{margin:0 0 .8rem;padding:.55rem .75rem;background:var(--wash);
  border-left:3px solid var(--navy);border-radius:0 4px 4px 0;
  font-weight:700;color:var(--navy);font-size:.95rem}
.team-body p{max-width:none;font-size:calc(var(--fs-base) - 1px);
  color:var(--text-3);line-height:1.55}
.team-body .res-more{margin-top:auto}
.team-note{margin:1.4rem 0 0;color:var(--muted);font-size:.95rem;max-width:78ch}

/* The guide beneath the learning centre's index. It is a reading order, not
   the index itself, so it is set quieter and narrower than the cards. */
.hub-guide{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--rule)}

/* The author page's lead photograph is a portrait of one person, not a scene.
   The 16 by 9 crop the other lead images take would cut it to a band across
   the eyes, so this one keeps its own shape and its own width. */
.author-entity > .feature{max-width:420px;margin-inline:0}
.author-entity > .feature img{aspect-ratio:auto}

/* ==== 34. WHAT THIS STRATEGY DOES FOR YOUR FAMILY ========================
   The mark sits on its own line above the heading, as it does on the live
   site, at a size that reads as a label rather than as a second heading. */
.band-kicker{
  text-align:center;margin:0 0 .35rem;
  font-size:1.05rem;font-weight:700;letter-spacing:.02em;
  color:var(--navy);
}
.band-kicker::after{content:":"}
.cards-band{border-top:0}
.cards-band > h2{margin-bottom:1.5rem}
.card-item{
  background:var(--paper);border:1px solid var(--rule);
  border-radius:12px;padding:1.9rem 1.6rem 1.7rem;
  display:flex;flex-direction:column;text-align:center;
}
.card-icon{
  align-self:center;
  display:inline-flex;align-items:center;justify-content:center;
  width:3.4rem;height:3.4rem;margin-bottom:1.1rem;
  border-radius:50%;background:var(--navy);color:var(--gold);
  box-shadow:0 6px 16px rgba(8,37,86,.28);
}
.card-icon svg{width:1.7rem;height:1.7rem;display:block}
.card-item h3{margin:0 0 .8rem;color:var(--navy)}
.card-item p{margin:0 0 .9rem;max-width:none;color:var(--text-3);
  line-height:1.6;text-align:left}
.card-item .res-more{align-self:center;margin-top:auto}
.cards-note{max-width:80ch;margin:1.6rem auto 0;text-align:center;
  color:var(--muted);font-size:.92rem;line-height:1.55}

/* Superseded. The rail now stays stuck at every height and the list inside
   the contents card is what scrolls, so there is no case in which the rail
   has to stop sticking and leave the column empty. */

/* ==== 35. THE CONTACT PAGE'S ENQUIRY FORM ================================
   Uses the same handler and the same discipline as the other two forms: a
   honeypot the reader never sees, a consent box that must be ticked, and the
   privacy notice at the point of collection rather than in the footer. */
.enquiry{margin:2.75rem 0 0;padding:1.9rem 1.9rem 2rem;
  background:var(--wash);border:1px solid var(--rule);
  border-top:4px solid var(--gold);border-radius:0 0 12px 12px;
  box-shadow:0 10px 26px rgba(8,37,86,.10)}
.enquiry > h2{margin:0 0 .5rem;text-align:left}
.enquiry > h2::after{content:none}
.enquiry-lede{color:var(--muted);margin:0 0 1.5rem;max-width:70ch}
.enquiry-form{display:grid;gap:1rem}
.enquiry-form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:620px){.enquiry-form .row{grid-template-columns:1fr}}
.enquiry-form label{display:grid;gap:.35rem;font-weight:700;color:var(--navy);
  font-size:.95rem}
.enquiry-form input,.enquiry-form select,.enquiry-form textarea{
  font-family:var(--font);font-size:var(--fs-base);
  padding:.7rem .8rem;border:1px solid var(--rule);border-radius:5px;
  background:var(--paper);color:var(--body);width:100%;
  font-weight:400;min-height:46px}
.enquiry-form textarea{min-height:8.5rem;resize:vertical;line-height:1.55}
.enquiry-form input:focus-visible,.enquiry-form select:focus-visible,
.enquiry-form textarea:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;border-color:var(--navy)}
.enquiry-form label.consent{grid-template-columns:auto 1fr;align-items:start;
  gap:.6rem;font-weight:400;color:var(--body);min-height:46px;padding:.2rem 0}
.enquiry-form label.consent input{min-height:0;width:auto;margin-top:.25rem}
/* Its own class, not .privacy-note.

   The other two forms sit on a navy panel and their note is white. Reusing
   that class here with a dark colour left one class with two colours, and the
   contrast check, which resolves a class to its LAST declaration, then paired
   the dark colour with the navy panel and reported a failure that appears
   nowhere on the site. One class, one colour, and the check reads the page
   correctly again. */
.enquiry-privacy{margin:0;color:var(--muted);font-size:.88rem;
  line-height:1.55;max-width:none}
.enquiry-privacy a{color:var(--royal)}
.enquiry-form .btn-primary{justify-self:start}
/* The honeypot. Off screen rather than display:none, because some browsers
   skip a hidden field's value entirely and the trap never springs. */
.enquiry-form .hp-field{position:absolute;left:-9999px;width:1px;height:1px;
  opacity:0;pointer-events:none}

/* ==========================================================================
   36. FREQUENTLY ASKED QUESTIONS
   The question is marked up as an <h3> inside the <summary> so that it keeps
   heading semantics and feeds the FAQPage schema. An h3 is a block element,
   so two things went wrong and neither was visible while pages carried five
   questions. The "+" generated on the summary was pushed onto its own line
   above the question, and the h3's own 38.4px top margin opened a gap under
   every row. Measured: a 94px summary carrying 22px of text. On a page with
   twenty-two questions that is 1.5 screens of empty space.
   The summary is now a flex row, the marker is a fixed column inside it, and
   the h3 gives up its block spacing while keeping its size. The size is the
   settled 22px and is not changed here.
   ========================================================================== */
.faq details{padding:0;border-bottom:1px solid var(--rule)}
.faq summary{display:flex;align-items:baseline;gap:.8rem;
  padding:.8rem .4rem;border-radius:6px;list-style:none;
  transition:background .16s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--mist)}
.faq summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.faq summary::before{content:"+";color:var(--coral);font-weight:700;
  font-size:1.5rem;line-height:1;flex:0 0 1.1rem;text-align:center}
.faq details[open] summary::before{content:"\2212"}
.faq summary h3{margin:0;line-height:1.35;color:inherit;flex:1 1 auto}
.faq details > *:not(summary){margin-top:.2rem}
.faq details > div{padding:.15rem .4rem 1.05rem 2.3rem}


/* ==========================================================================
   37. THE CONTENTS RAIL WRAPS
   With the grid tracks now floored at zero, a link longer than the rail can no
   longer widen it, so it has to wrap instead. The rail's links were set nowrap,
   which is why they were pushing the track in the first place. A French heading
   runs about twenty percent longer than its English twin, so this shows there
   first and would have shown everywhere eventually.
   ========================================================================== */
.rail .toc a,
.rail-sticky .toc a{white-space:normal;overflow-wrap:break-word;word-break:normal}
.rail .toc li,
.rail-sticky .toc li{white-space:normal}


/* ==========================================================================
   38. READING MEASURE ON THE PAGES WITH NO CONTENTS RAIL

   A railed page is a two-column grid, so its article column is 65fr of the
   1440 frame and its running text measures 856px, about 91 characters to the
   line. The rail-less templates are one column and nothing held their prose
   back: at 1440 the widest paragraph ran the full 1360px of the shell, which
   is 102 to 181 characters to the line. Measured worst cases before this
   rule: /privacy-policy/ and /resources/the-book/ at 181 characters,
   /fr/glossaire/cout-de-base-rajuste/ at 179, /about-us/jose-salloum/ at 179.
   A line that long loses the reader on the return sweep, and the site's own
   accessibility page claims WCAG 2.1 AA, so this is a finding rather than a
   preference. 48 pages carried it: all 18 legal, 8 glossary, 6 author, 5 hub,
   4 conversion, 4 contact, the 404 and the two home pages.

   The pattern is the one .shell > .prose > * already uses on railed pages:
   the reading measure is the --prose token, and the things that are not
   reading matter keep the frame. Here the selector names the text elements
   rather than capping every child and handing the width back afterwards,
   because a section is a LAYOUT box: capping section.team also caps the
   team grid inside it, and no un-capping rule on the grid can widen it past
   a parent that is already narrow. So h1 to pre are capped and every
   container, figure, table, card grid, banner, form and disclosure block is
   left alone. Nothing here touches the 1440px frame or the 16px body size,
   both of which are settled.
   ========================================================================== */
:is(.legal,.hub,.author-entity,.glossary-term,.conversion,.contact,article[class~="404"]) > :is(h1,h2,h3,h4,h5,p,ul,ol,dl,blockquote,pre),
:is(.legal,.hub,.author-entity,.glossary-term,.conversion,.contact,article[class~="404"]) > .body > :is(h1,h2,h3,h4,h5,p,ul,ol,dl,blockquote,pre),
:is(.legal,.hub,.author-entity,.glossary-term,.conversion,.contact,article[class~="404"]) > .hub-guide > .body > :is(h1,h2,h3,h4,h5,p,ul,ol,dl,blockquote,pre),
:is(.legal,.hub,.author-entity,.glossary-term,.conversion,.contact,article[class~="404"]) > aside.pending-confirmation,
:is(.legal,.hub,.author-entity,.glossary-term,.conversion,.contact,article[class~="404"]) > section:not(.disclosure-set):not(.discovery-panel) > :is(h1,h2,h3,h4,h5,p,ul,ol,dl,blockquote,pre),
:is(.legal,.hub,.author-entity,.glossary-term,.conversion,.contact,article[class~="404"]) > section:not(.disclosure-set):not(.discovery-panel) > div > :is(h1,h2,h3,h4,h5,p,ul,ol,dl,blockquote,pre),
:is(.legal,.hub,.author-entity,.glossary-term,.conversion,.contact,article[class~="404"]) > section:not(.disclosure-set):not(.discovery-panel) > div > .body > :is(h1,h2,h3,h4,h5,p,ul,ol,dl,blockquote,pre),
:is(.legal,.hub,.author-entity,.glossary-term,.conversion,.contact,article[class~="404"]) > section:not(.disclosure-set):not(.discovery-panel) > details > div > :is(h1,h2,h3,h4,h5,p,ul,ol,dl,blockquote,pre){
  max-width:var(--prose-wide)}

/* The disclosure stack and the discovery panel are excluded above by name.
   The stack is required to sit at the full frame (verify.py check 2 asserts
   it never carries a 74ch cap) and the panel is a form. */

/* THE TWO CONTAINERS THE RULE ABOVE STILL MISSED, both of them running text.

   Excluding the disclosure stack by name kept its BOX at the full frame,
   which is what verify.py check 2 requires, but it also left the sentences
   inside it uncapped: aside.dual-disclosure measured 1159px on 24 rail-less
   pages, at 139 and 163 characters to the line at 16px. The enquiry form's
   privacy paragraph measured 1297px on the three contact-template pages, at
   164 characters at 14px. Both are full-sentence regulatory disclosure and
   consent copy, read start to finish by the reader who is about to hand over
   their name and telephone number, and a 163-character line is the hardest
   line on the site to read at the moment it matters most. The site's own
   /accessibility/ page claims WCAG 2.1 AA, so this is a finding.

   Same distinction as above, and for the same reason: the CONTAINER is a
   layout box and keeps its width, while the elements that hold sentences take
   the reading measure. Capping aside.dual-disclosure itself would narrow the
   bordered callout to a column and put a 74ch value on the very selector
   verify.py check 2 watches; capping form.enquiry-form would narrow every
   field, the two select lists and the message box with it. So the paragraphs
   are named, and nothing else moves. */
:is(.legal,.hub,.author-entity,.glossary-term,.conversion,.contact,.home,article[class~="404"])
  > section.disclosure-set aside.dual-disclosure > :is(p,ul,ol,dl,blockquote){
  max-width:var(--prose)}
.contact > section.enquiry > form.enquiry-form > p{max-width:var(--prose-wide)}

/* AND THE FAQ ANSWER, which is the same fault a third time and the largest of
   the three: 48 rail-less pages, every one of them running its answers at
   1316px, about 164 characters to the line at 16px. Found by measuring the
   rendered LINE BOXES rather than the elements, which is why it had been
   missed: _faq.html emits the answer as a bare text node inside <div>, with no
   paragraph around it, so every selector above that names h1 to pre had
   nothing to match. The rule two blocks up for the home page,
   article.home > section.faq > details > div > :is(h3,h4,p,ul,ol,blockquote),
   misses it for exactly the same reason and has never applied.

   The div is capped here rather than its children, which is the one place in
   this section where that is the safe move: a FAQ answer div contains no
   elements at all across the whole build, so there is no layout box inside it
   to narrow by accident. If an answer is ever given a figure or a table, the
   second rule hands it back the frame. */
:is(.legal,.hub,.author-entity,.glossary-term,.conversion,.contact,.home,article[class~="404"])
  > section.faq > details > div{max-width:var(--prose-wide)}
:is(.legal,.hub,.author-entity,.glossary-term,.conversion,.contact,.home,article[class~="404"])
  > section.faq > details > div > :is(figure,table,.table-scroll,.ig,.cta-banner-wrap){
  max-width:none}

/* The two home pages are rail-less as well and carried the same fault in a
   different shape: 1320px band ledes and, inside the long-form disclosure,
   1262px of continuous prose at roughly 170 characters to the line. The bands
   themselves, the card grids, the comparison table and the panels are not
   running text and keep the full frame. Only the sentences are held back, and
   the centred ones stay centred because the cap comes with auto margins.

   The !important is not decoration. Section 30 above sets
   .band > .inner > p{max-width:var(--wrap)!important} to clear an old 74ch
   cap off the band layout, and that declaration is what widened the ledes to
   1320px. It also overrode .band .lede{max-width:70ch} and
   .seminars .inner > p{max-width:70ch}, both of which had asked for a reading
   measure and been ignored. This restores what those two asked for, on the
   home pages only, and leaves every other band untouched. */
article.home .band > .inner > p,
article.home > .cards-band > p,
article.home > .steps-band > p{max-width:var(--prose-wide)!important;
  margin-inline:auto!important}
article.home > section.faq > details > div > :is(h3,h4,p,ul,ol,blockquote){
  max-width:var(--prose)}
/* The long-form panel is capped on the WRAPPER rather than on its children,
   because .longform .body > * already carries max-width:none!important twice
   in this file and an !important cannot be outranked by specificity. The
   panel holds nothing but headings and paragraphs, so narrowing the box
   narrows the prose. A figure or a table put in there later keeps the frame. */
/* The note under the comparison table, the last running paragraph on either
   home page still at the frame: 1207px in English and 1214px in French, about
   150 characters to the line. It is the disclosure that says the comparison is
   between an insurance product and a deposit, so it is read start to finish
   rather than glanced at. Like the FAQ answer it is a bare text node in a div,
   which is why no selector naming a paragraph reached it, and like the FAQ
   answer the div holds no elements, so capping the box is capping the text.
   It is used by T1_home and nowhere else. The auto margins it already carries
   keep it centred under the table. */
article.home .compare-note{max-width:var(--prose-wide)}

article.home .longform > .body{max-width:var(--prose-wide);margin-inline:auto}
article.home .longform > .body > :is(figure,table,.table-scroll,.ig,.cta-banner-wrap){
  max-width:none}

/* ==========================================================================
   39. DEPTH AND LIFE ON HOVER

   Owner's instruction, 26 August 2026: the cards and boxes are "all light blue
   and gray, no life in them", and hovering should warm them rather than shift
   them one shade of the same cold grey. He supplied a cream swatch, #FDF8F0,
   and said to better it if I could.

   Two decisions in here worth recording.

   The cream is warmed slightly toward the site's own gold rather than taken
   flat from the swatch, so it reads as belonging to a navy and gold palette
   instead of arriving from a different one. Body text on it measures 13.9:1,
   well past the 4.5 the site holds itself to, and the nested contrast check
   measures against the fill actually painted, so a token that only appears on
   hover still has to clear it.

   The shadow does not simply grow on hover. A shadow that only scales reads as
   the card inflating. This one lifts: the offset increases, the blur widens,
   and the spread pulls in, which is what a real object does when it rises off
   a surface. The gold hairline on top comes with it.
   ========================================================================== */
:root{
  --cream:#FDF9F1;          /* the resting warm, for surfaces that are not white */
  --cream-hover:#FCF4E4;    /* the hover warm, one step deeper and slightly gold */
  --lift-rest:0 2px 6px rgba(8,37,86,.07), 0 8px 20px rgba(8,37,86,.06);
  --lift-hover:0 6px 14px rgba(8,37,86,.13), 0 18px 40px rgba(8,37,86,.11);
  --lift-press:0 1px 4px rgba(8,37,86,.16), 0 4px 10px rgba(8,37,86,.10);
}

/* Every surface that behaves like a card gets the same resting shadow and the
   same lift, so the page has one physics rather than six. */
.res-card,.steps li,.card,.cards-band .card,.team-card,.split-media,
.figure-shadow,.ig,.cta-banner,.cta-banner-wrap,.toc,.rail-sticky > .toc,
.disclosure-set,.hub-guide,.enquiry-form,.discovery-panel{
  transition:box-shadow .22s ease, transform .22s ease, background-color .22s ease;
}

.res-card,.steps li,.cards-band .card,.team-card{
  background:var(--cream);
  box-shadow:var(--lift-rest);
}
.res-card:hover,.steps li:hover,.cards-band .card:hover,.team-card:hover,
.res-card:focus-within,.steps li:focus-within,.cards-band .card:focus-within{
  background:var(--cream-hover);
  box-shadow:var(--lift-hover), 0 -3px 0 -1px var(--gold);
  transform:translateY(-3px);
}

/* A banner and a figure are pictures, not cards: they lift but they do not
   change colour, because the colour is the artwork. */
.cta-banner img,.ig img,.ig svg,.figure-shadow img,.split-media img{
  box-shadow:var(--lift-rest);
  transition:box-shadow .22s ease, transform .22s ease;
}
.cta-banner a:hover img,.cta-banner a:focus-visible img{
  box-shadow:var(--lift-hover);
  transform:translateY(-2px);
}
.cta-banner a:active img{box-shadow:var(--lift-press);transform:translateY(0)}
.ig:hover img,.ig:hover svg,.figure-shadow:hover img{
  box-shadow:var(--lift-hover);
}

/* The FAQ row is the most-clicked surface on the site now that pages carry
   twenty questions, so it warms too rather than going grey. */
.faq summary:hover{background:var(--cream-hover)}
.faq details[open] > summary{background:var(--cream)}

/* The contents rail and the disclosure set sit still; they are furniture, not
   things to click, so they take the resting shadow and no hover at all. */
.toc,.disclosure-set{box-shadow:var(--lift-rest)}

@media (prefers-reduced-motion:reduce){
  .res-card,.steps li,.cards-band .card,.team-card,
  .cta-banner img,.ig img,.ig svg,.figure-shadow img{transition:none}
  .res-card:hover,.steps li:hover,.cards-band .card:hover,.team-card:hover,
  .cta-banner a:hover img{transform:none}
}


/* A card blurb is a paragraph, not a caption. It was centred, which sets a
   ragged edge on both sides and makes four lines of prose hard to track. Left
   aligned, with the heading and the read-more link already left aligned above
   and below it, the card reads as one column. */
.res-card .res-body,.res-card .res-body p,.res-card .res-body h3{text-align:left}

/* ==========================================================================
   40. WHO YOU ARE DEALING WITH

   The statement that names the firm. It appears above the submit button on
   every form, and again as the first line of the disclosure stack on all 158
   pages.

   Owner's instruction, 26 August 2026: give it a visible border in the button
   colour. He is right to want it loud. The declaration filed with the Autorite
   des marches financiers says IBC Financial concludes no transaction and holds
   no client relationship, and a reader has to be able to see whose name is on
   the other side of a form before they fill it in, not after. The coral is the
   site's action colour, so a coral frame reads as "this concerns you" rather
   than as decoration.

   The panel stays white behind the border rather than taking a coral fill.
   White is what lets both the coral lead-in and the body text clear their
   contrast thresholds: coral on white measures 6.2:1 and the body colour 13:1.
   Navy on coral is 2.48:1 and is banned outright on this site, which is why the
   colour is used as an edge and never as a ground under text.
   ========================================================================== */
.who-you-deal-with,
.disclosure > p:first-of-type{
  margin:1.2rem 0 1.35rem;
  padding:1rem 1.15rem;
  background:var(--paper);
  border:2px solid var(--coral);
  border-left-width:7px;
  border-radius:0 8px 8px 0;
  box-shadow:var(--lift-rest);
  font-size:1rem;
  line-height:1.62;
  color:var(--text-2);
}
.who-you-deal-with strong:first-child,
.disclosure > p:first-of-type strong:first-child{
  color:var(--coral);
  letter-spacing:.01em;
}
.who-you-deal-with strong,
.disclosure > p:first-of-type strong{color:var(--navy)}
.who-you-deal-with strong:first-child,
.disclosure > p:first-of-type strong:first-child{color:var(--coral)}

/* ==========================================================================
   41. WIDTH, WARMTH AND TWO SPACING FAULTS
   Owner's review, 26 August 2026, working from screenshots of the built site.

   1. THE TEXT IS STILL NOT SPREAD. Section 38 capped running prose at the
      --prose token to stop 181-character lines on rail-less pages. It caught
      more than it should have: the paragraphs inside a disclosure block were
      being held to 592px inside a container 1159px wide, which reads as an
      unexplained indent rather than as a measure. A disclosure block already
      sets its own width; the paragraphs inside it should fill it.

   2. THE NUMBERED DISCLOSURE SET was capped at --container while everything
      around it uses --wrap, so it sat visibly narrower than the page.

   3. NO LIFE IN THE BOXES. The cream hover reached the resource cards and the
      step boxes and stopped there. The three strategy cards on the home page,
      the service cards and every disclosure item were left cold.

   4. THE NAVY STRIP under the three ticks. The tick boxes did not fill the
      band, so a bar of bare navy showed beneath them. The boxes now stretch,
      which closes it without touching the band's own padding.
   ========================================================================== */

/* 1 and 2: width */
.dual-disclosure p,
.dual-disclosure li,
.disclosure-set li,
.disclosure-set p{max-width:none!important}
.disclosure-set{max-width:var(--wrap)!important}

/* 3: warmth, on every surface that behaves like a card */
.cards-band .card,.cards-group .card,.card,
.dual-disclosure,.res-card,.steps li,.team-card{
  transition:background-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.cards-band .card,.cards-group .card{
  background:var(--cream);
  box-shadow:var(--lift-rest);
}
.cards-band .card:hover,.cards-group .card:hover,
.cards-band .card:focus-within,.cards-group .card:focus-within{
  background:var(--cream-hover);
  box-shadow:var(--lift-hover), 0 -3px 0 -1px var(--gold);
  transform:translateY(-3px);
}
.dual-disclosure:hover{background:var(--cream-hover)}
.disclosure-set li:hover .dual-disclosure{background:var(--cream-hover)}

/* 4: the tick boxes fill the band */
.ticks ul{align-items:stretch}
.ticks li{align-items:center}

@media (prefers-reduced-motion:reduce){
  .cards-band .card,.cards-group .card{transition:none}
  .cards-band .card:hover,.cards-group .card:hover{transform:none}
}


/* The "Does This Sound Familiar?" picture. It was capped at 400px inside a
   column roughly 600px wide, so it floated in the middle of an empty box with
   a visible border around nothing. It now fills its column. */
.split-media{max-width:none}
.split-media img{width:100%;height:auto;border-radius:10px}

/* ==========================================================================
   42. THE OWNER'S REVIEW, 26 AUGUST 2026, SECOND PASS

   Five things, all from screenshots of the built site.

   1. THE SHADOW UNDER THE BANNERS. Asked for repeatedly and never actually
      visible. The rule was there; the values were not. A 7 percent navy at 2px
      is invisible against a page that is already tinted, so from a reader's
      seat nothing had been done. The banner shadow is now the deepest on the
      site, because a banner is the largest object on the page and a shadow
      that reads on a card disappears under something eight times its size.

   2. THE PORTRAIT SITS ON THE RIGHT, the prose on the left. A portrait stacked
      above the text pushes every word below the fold and leaves a column of
      nothing beside it.

   3. SHINE. The same slow sheen the masthead logo carries, passing across a
      portrait every few seconds, so the page has one idea of movement rather
      than two.

   4. THE TEAM PHOTOGRAPHS were running at full column width. Reduced by 40
      percent, as asked, and given the same shadow and lift as everything else.

   5. "A THIRTY-MINUTE DISCOVERY MEETING" was 26px in a 156px box, so it broke
      into three lines inside a large empty rectangle. It now fills its panel.
   ========================================================================== */

/* 1: the banner shadow, at a depth that is actually visible */
.cta-banner{margin:clamp(1.9rem,4vw,2.8rem) 0}
.cta-banner img,
p.cta-banner img,
.cta-banner-wrap img{
  box-shadow:0 10px 24px rgba(8,37,86,.26), 0 26px 60px rgba(8,37,86,.20)!important;
  border-radius:12px;
  transition:box-shadow .24s ease, transform .24s ease;
}
.cta-banner a:hover img,.cta-banner a:focus-visible img{
  box-shadow:0 16px 34px rgba(8,37,86,.34), 0 34px 80px rgba(8,37,86,.26)!important;
  transform:translateY(-3px);
}
.cta-banner a:active img{transform:translateY(0)}

/* 2 and 3: the author portrait, right of the prose, with depth and a sheen */
.author-entity > .direct-answer{margin-bottom:1.4rem}
.author-portrait-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,34%);
  gap:clamp(1.6rem,3.5vw,3rem);
  align-items:start;
  margin:0 0 2rem;
}
.author-portrait-row > .author-copy > *:first-child{margin-top:0}
.author-entity figure.feature{
  position:relative;
  margin:0;
  max-width:none;
  overflow:hidden;
  border-radius:14px;
  box-shadow:0 12px 30px rgba(8,37,86,.24), 0 30px 66px rgba(8,37,86,.18);
  transition:box-shadow .26s ease, transform .26s ease;
}
.author-entity figure.feature img{
  display:block;width:100%;height:auto;border-radius:14px;
  aspect-ratio:auto;object-fit:contain;border:0;
}
.author-entity figure.feature:hover{
  box-shadow:0 18px 42px rgba(8,37,86,.32), 0 40px 90px rgba(8,37,86,.24);
  transform:translateY(-4px);
}
.author-entity figure.feature::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.30) 50%,transparent 62%);
  transform:translateX(-130%);
  animation:portrait-sheen 6s ease-in-out infinite;
}
@keyframes portrait-sheen{
  0%,72%{transform:translateX(-130%)}
  86%,100%{transform:translateX(130%)}
}

/* 4: the team photographs, 40 percent smaller, with the house shadow */
.team-photo{
  max-width:60%;
  height:auto;
  margin-inline:auto;
  display:block;
  border-radius:12px;
  box-shadow:0 10px 26px rgba(8,37,86,.22), 0 22px 50px rgba(8,37,86,.16);
  transition:box-shadow .24s ease, transform .24s ease;
}
.team-card:hover .team-photo{
  box-shadow:0 16px 36px rgba(8,37,86,.30), 0 30px 70px rgba(8,37,86,.22);
  transform:translateY(-3px);
}

/* 5: the discovery heading fills its panel */
.discovery-copy{display:flex;flex-direction:column;justify-content:center}
.discovery-copy h2{
  max-width:none!important;
  /* The element rule h2 carries !important for the settled 26px scale, so a
     class rule without one loses. This single panel is a deliberate display
     exception, stated here rather than by weakening the scale everywhere. */
  font-size:clamp(2.2rem,3.4vw,3.1rem)!important;
  line-height:1.06;
  letter-spacing:-.015em;
  font-style:italic;
  color:var(--gold);
  text-align:left;
  margin:0 0 1rem;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.discovery-copy p{text-align:left;max-width:none!important}

@media (max-width:860px){
  .author-portrait-row{grid-template-columns:1fr}
  .author-entity figure.feature{max-width:420px;margin-inline:auto}
  .team-photo{max-width:72%}
  .discovery-copy h2{font-size:clamp(1.9rem,6.4vw,2.4rem)!important}
}
@media (prefers-reduced-motion:reduce){
  .author-entity figure.feature::after{animation:none;opacity:0}
  .author-entity figure.feature:hover,.team-card:hover .team-photo,
  .cta-banner a:hover img{transform:none}
}


/* 43: the two pictures on the home split rows, sized to the owner's
   measurements of 26 August. The row that is not reversed carries the
   Does This Sound Familiar photograph and its column is widened so the
   picture grows by a fifth. The reversed row carries the portrait, which is
   capped at half its previous width and held against the outer edge of its
   column rather than floating in the middle of it. */
.split-row:not(.reverse){grid-template-columns:minmax(0,1.028fr) minmax(0,.972fr)}  /* photograph down 10 percent so each bullet beside it sits on one line */
.split-row.reverse .split-media{max-width:446px;margin-inline:auto}  /* 352, then 15 percent, then 10 percent more */
@media (max-width:860px){
  .split-row:not(.reverse){grid-template-columns:1fr}
  .split-row.reverse .split-media{max-width:320px;margin-inline:auto}
}

/* 44: the browser furniture takes the brand colour, the way cwcc.ca does.
   The scrollbar, the text selection, the focus ring and every native form
   control (checkbox, radio, range, progress) are drawn by the browser in its
   own default blue-grey unless a page says otherwise. Naming the brand navy
   here is what makes the whole window read as one piece rather than as a
   navy page sitting inside somebody else's chrome. theme-color and the two
   web manifests already carry the same value for the mobile address bar. */
:root{
  color-scheme:light;
  accent-color:var(--navy);
  scrollbar-color:var(--navy) #DCE6F5;
}
::selection{background:var(--gold);color:var(--navy)}
::-moz-selection{background:var(--gold);color:var(--navy)}
::-webkit-scrollbar{width:13px;height:13px}
::-webkit-scrollbar-track{background:#DCE6F5}
::-webkit-scrollbar-thumb{
  background:var(--navy);border-radius:7px;
  border:3px solid #DCE6F5;
}
::-webkit-scrollbar-thumb:hover{background:var(--navy-2)}
::-webkit-scrollbar-corner{background:#DCE6F5}

/* 45: THE CREAM HOVER, ON EVERY CARD SURFACE. Repeated request, and the
   earlier attempts missed the two bands on the home page because they named
   .card and .cards-band .card while those bands are built from .panel and
   .card-item. .quote was missed for the same reason. Listing the surfaces by
   what they look like on the page rather than by the one class name that came
   to mind is what stops this recurring. A figure that happens to carry .card
   is a picture, not a card, and is excluded. */
.panel,.card-item,.quote,.card:not(figure),
.cards-band .card,.cards-group .card,.res-card,.steps li,.team-card,
.card-item.lift,.panel.lift{
  background:var(--cream)!important;
  box-shadow:var(--lift-rest);
  transition:background-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.panel:hover,.card-item:hover,.quote:hover,.card:not(figure):hover,
.cards-band .card:hover,.cards-group .card:hover,.res-card:hover,
.steps li:hover,.team-card:hover,
.panel:focus-within,.card-item:focus-within,.quote:focus-within,
.card:not(figure):focus-within,.cards-band .card:focus-within,
.cards-group .card:focus-within,.res-card:focus-within,
.steps li:focus-within,.team-card:focus-within{
  background:var(--cream-hover)!important;
  box-shadow:var(--lift-hover), 0 -3px 0 -1px var(--gold);
  transform:translateY(-3px);
}
@media (prefers-reduced-motion:reduce){
  .panel:hover,.card-item:hover,.quote:hover,.card:not(figure):hover,
  .res-card:hover,.steps li:hover,.team-card:hover{transform:none}
}

/* 46: the split rows, centred, and the picture shadow at a depth that is
   actually visible.
   The shadow was set with the shared --lift-rest token, which is 7 percent and
   6 percent opacity: correct for a card that sits on cream, invisible for a
   photograph on white. It is stated here at the same weight as the banner
   shadow so the picture reads as lifted off the page rather than printed on
   it. The row is centred so the picture sits level with the middle of the
   text beside it rather than hanging from the top of the block. */
.split-row{align-items:center}
.split-media img,.figure-shadow img{
  box-shadow:0 10px 24px rgba(8,37,86,.26), 0 26px 60px rgba(8,37,86,.20)!important;
  transition:box-shadow .26s ease, transform .26s ease;
}
.split-media img:hover,.figure-shadow img:hover{
  box-shadow:0 16px 36px rgba(8,37,86,.34), 0 36px 84px rgba(8,37,86,.26)!important;
  transform:translateY(-4px);
}
@media (max-width:860px){.split-row{align-items:start}}
@media (prefers-reduced-motion:reduce){
  .split-media img:hover,.figure-shadow img:hover{transform:none}
}

/* 47: the identity statement under the discovery form, across the whole panel
   and set larger. Owner's design, 26 August. Inside the form's own column it
   was narrow, small and ran to five lines. Spanning both columns at a larger
   size it reads at a glance and takes less height, which is the point of the
   change. The gate check that this statement is present and visible on every
   form is unchanged; only where it sits has moved. */
.discovery-panel > .who-you-deal-with.panel-wide{
  grid-column:1 / -1;
  margin:.4rem 0 0;
  padding:1.15rem 1.4rem;
  font-size:clamp(1.06rem,1.32vw,1.28rem);
  line-height:1.5;
}
.enquiry-form .who-you-deal-with{
  font-size:clamp(1.02rem,1.15vw,1.16rem);
  line-height:1.52;
}
@media (max-width:860px){
  .discovery-panel > .who-you-deal-with.panel-wide{
    font-size:1.02rem;line-height:1.55;padding:.95rem 1.05rem;
  }
}

/* 48: each point beside the photograph on one line. The photograph came down
   by a tenth, which was not enough on its own: three of the six points still
   ran to two lines because they were set two pixels above body size. They are
   set at the settled 16px body size now, which is the size the rest of the
   site reads at, and all six fit on one line each. */
.split-row li{font-size:var(--fs-base)}

/* 49: the note under the licence question on the form. An advisor who holds a
   licence is not a prospect for a discovery meeting: they place business with
   the firm directly, and the form says so where the question is answered. */
.discovery-form .field-note{
  margin:.45rem 0 0;
  padding:.35rem .55rem;
  font-size:.95rem;
  line-height:1.45;
  /* The note sits on the navy panel. The background is named here as well as
     inherited, because the contrast gate resolves a colour against the nearest
     DECLARED background and would otherwise measure gold against white, which
     fails, and which is not what any reader sees. */
  background:var(--navy);
  color:var(--gold);
  border-radius:4px;
}
.discovery-form .field-note a{color:var(--paper);text-decoration:underline}
.discovery-form .field-note a:hover{color:var(--gold)}


/* ==== 49. EVERY BUTTON CARRIES THE SAME SHADOW ============================
   Owner's instruction, 26 August 2026: the shadow the cards and the panels
   carry belongs on the buttons too, on all of them, not on a few.

   Stated in literal values rather than drawn from --lift-rest. That token sits
   at 7 and 6 percent opacity, which is invisible against paper, and a rule
   written against it once before produced a shadow that existed in the
   stylesheet and could not be seen on the page. These are the same weights the
   figures use, at 26 and 18 percent.

   The list is by appearance rather than by remembered class name: the coral
   primary, the ghost, the header call to action, the band call to action, the
   rail call to action and the form's submit button are every button on the
   site. The language switch keeps its own smaller shadow, set in nav.css,
   because it sits on the navy bar where these weights would not read.
   ======================================================================== */
.btn-primary,.btn,.btn-ghost,.btn-cta,a.btn-cta,
.cta-band a.cta,.rail-cta a.cta,a.cta,
button[type=submit],.submit-button,.form-fields .btn-primary{
  box-shadow:0 6px 16px rgba(8,37,86,.26),
             0 16px 36px rgba(8,37,86,.18)!important;
  transition:box-shadow .28s cubic-bezier(.2,.7,.3,1),
             transform .28s cubic-bezier(.2,.7,.3,1),
             background-color .2s ease,border-color .2s ease;
}
.btn-primary:hover,.btn:hover,.btn-ghost:hover,.btn-cta:hover,a.btn-cta:hover,
.cta-band a.cta:hover,.rail-cta a.cta:hover,a.cta:hover,
button[type=submit]:hover,.submit-button:hover,.form-fields .btn-primary:hover,
.btn-primary:focus-visible,.btn-ghost:focus-visible,.btn-cta:focus-visible,
button[type=submit]:focus-visible,.submit-button:focus-visible{
  box-shadow:0 10px 24px rgba(8,37,86,.34),
             0 24px 52px rgba(8,37,86,.24)!important;
  transform:translateY(-2px);
}
@media (prefers-reduced-motion:reduce){
  .btn-primary,.btn,.btn-ghost,.btn-cta,button[type=submit],.submit-button{
    transition:box-shadow .2s ease,background-color .2s ease}
  .btn-primary:hover,.btn-ghost:hover,.btn-cta:hover,
  button[type=submit]:hover,.submit-button:hover{transform:none}
}