/* 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,calc(7.2vw * var(--ibc-tscale)),5.2rem);
  --size-h2:clamp(1.85rem,calc(3.6vw * var(--ibc-tscale)),3rem);
  --size-h3:clamp(1.25rem,calc(1.4vw * var(--ibc-tscale)),1.55rem);
  --size-h4:clamp(1.08rem,calc(.8vw * var(--ibc-tscale)),1.2rem);
  --size-lede:clamp(1.02rem,.35vw + .95rem,1.2rem);
  --pad-band:clamp(3.6rem,calc(9vw * var(--ibc-tscale)),8rem) 0 clamp(3rem,calc(7vw * var(--ibc-tscale)),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,calc(2.2vw * var(--ibc-tscale)),1.6rem) clamp(1.25rem,calc(3vw * var(--ibc-tscale)),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,calc(9vw * var(--ibc-tscale)),8rem) over clamp(3rem,calc(7vw * var(--ibc-tscale)),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,calc(4.5vw * var(--ibc-tscale)),4rem) 1.25rem clamp(1.9rem,calc(3.5vw * var(--ibc-tscale)),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,calc(9vw * var(--ibc-tscale)),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,calc(3.5vw * var(--ibc-tscale)),2.6rem) 1.25rem 4rem;
  display:grid;gap:clamp(1.8rem,calc(4vw * var(--ibc-tscale)),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,calc(4vw * var(--ibc-tscale)),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,calc(4vw * var(--ibc-tscale)),3.5rem) clamp(1.25rem,calc(4vw * var(--ibc-tscale)),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{
  /* 18px, RAISED FROM 16 BY THE OWNER'S INSTRUCTION, 27 August 2026:
     "increase the body font size by 2 px". The 16px body was on the settled
     list, so this is a deliberate change to a settled value rather than a
     drift, and it is recorded here beside the number.

     THE HEADINGS DO NOT MOVE WITH IT. H1 38, H2 26 and H3 22 are also settled
     and were not part of the instruction, so they stay where they are. The two
     comments below used to describe H2 and H3 as "base plus 10" and "base plus
     6", which was true at 16 and is not true at 18. The relationship was
     never the rule; the numbers were. */
  /* THE MULTIPLIER THE TEXT SIZE CONTROL TURNS.

     Owner's instruction, 29 August 2026: "the increase and decrease of the
     font size should be applicable to all text in harmony, not only the body
     text". So one number governs every size on the site. reader.js sets it to
     the chosen size divided by 18, and at the settled 18 it is exactly 1, so
     the whole of the design below is unchanged until somebody presses a
     button. Every fixed size is written as that size times this number, and
     the proportions between them therefore never move.

     THE SETTLED NUMBERS ARE STILL THE SETTLED NUMBERS. 38, 26 and 22 are what
     the page renders at rest. What changes is that they are now a starting
     point a reader can turn, rather than a ceiling. */
  --ibc-tscale:1;
  --fs-base:calc(18px * var(--ibc-tscale));      /* body and top menu */
  --fs-h1:calc(38px * var(--ibc-tscale));
  --fs-h2:calc(26px * var(--ibc-tscale));        /* settled, not derived from base */
  --fs-h3:calc(22px * var(--ibc-tscale));
  --fs-h4:calc(18px * var(--ibc-tscale));
  --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,calc(3vw * var(--ibc-tscale)),2.5rem) clamp(1.25rem,calc(3vw * var(--ibc-tscale)),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,calc(3vw * var(--ibc-tscale)),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,calc(26vw * var(--ibc-tscale)),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:calc(12.5px * var(--ibc-tscale));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,calc(4.5vw * var(--ibc-tscale)),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,calc(2vw * var(--ibc-tscale)),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,calc(4vw * var(--ibc-tscale)),3.25rem);
}
.form-intro{display:flex;flex-direction:column;justify-content:center;height:100%}
.form-intro h2{
  font-size:clamp(2rem,calc(3.4vw * var(--ibc-tscale)),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,calc(2.5vw * var(--ibc-tscale)),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,calc(4vw * var(--ibc-tscale)),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,calc(4vw * var(--ibc-tscale)),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,calc(3.5vw * var(--ibc-tscale)),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,calc(3.4vw * var(--ibc-tscale)),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,calc(6.4vw * var(--ibc-tscale)),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,calc(1.32vw * var(--ibc-tscale)),1.28rem);
  line-height:1.5;
}
.enquiry-form .who-you-deal-with{
  font-size:clamp(1.02rem,calc(1.15vw * var(--ibc-tscale)),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}
}

/* ==== 50. THE CORNERSTONE PROMOTION, FOUR SHAPES ==========================
   Owner chose all four of the designs put to him on 26 August 2026 and asked
   for them to be used in different places. The markup is in _promo.html; the
   four shapes share the atoms below and diverge only in layout.

   Colours are the settled tokens and nothing else: navy #082556, gold #FCC600,
   coral #C31344 with WHITE text, never navy, because navy on coral measures
   2.48:1. Georgia throughout, one token, no webfont.

   WHY THE LIGHT SHAPES HAVE THEIR OWN CLASS NAMES rather than overriding the
   dark ones. G39 resolves a colour the way CSS does, by last declaration, but
   it does not model the ancestor that scopes it. So ".promo-b .promo-title"
   setting navy made the checker read every .promo-title as navy, including the
   ones on the navy panel, and it reported 1.08:1 on a combination that never
   renders. Two readings of that: call the checker wrong, or stop giving one
   class two colours. The second is better anyway, because a class whose colour
   depends on where it sits is a class waiting to be misused. Each name now
   carries exactly one colour and the markup picks the right name.
   ======================================================================== */
.promo{position:relative;margin:2.25rem 0;border-radius:12px;overflow:hidden}
.promo-shot{display:block}

/* atoms for the dark panels: a and c */
.promo-eyebrow{font:700 calc(12px * var(--ibc-tscale))/1 Georgia,'Times New Roman',serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin:0}
.promo-title{font:700 clamp(1.35rem,calc(2.1vw * var(--ibc-tscale)),1.85rem)/1.22 Georgia,'Times New Roman',serif;
  margin:.7rem 0 0;color:#FFFFFF}
.promo-text{font:400 1.02rem/1.62 Georgia,'Times New Roman',serif;color:#D6E1F2;
  margin:.65rem 0 0;max-width:56ch}
.promo-meta{font:400 .86rem/1.5 Georgia,'Times New Roman',serif;color:#A9BCD8;margin:.85rem 0 0}

/* atoms for the light panels: b and d */
.promo-eyebrow-ink{font:700 calc(12px * var(--ibc-tscale))/1 Georgia,'Times New Roman',serif;letter-spacing:.14em;
  text-transform:uppercase;color:#8A0E31;margin:0}
.promo-title-ink{font:700 clamp(1.25rem,calc(1.9vw * var(--ibc-tscale)),1.65rem)/1.24 Georgia,'Times New Roman',serif;
  margin:.55rem 0 0;color:var(--navy)}
.promo-text-ink{font:400 1rem/1.6 Georgia,'Times New Roman',serif;color:#33415A;
  margin:.5rem 0 0;max-width:62ch}
.promo-meta-ink{font:400 .86rem/1.5 Georgia,'Times New Roman',serif;color:#4A5B76;margin:.8rem 0 0}

.promo-cta{display:inline-block;margin-top:1.15rem;background:var(--coral);color:#FFFFFF;
  font:700 1.02rem Georgia,'Times New Roman',serif;text-decoration:none;
  padding:.85rem 1.5rem;border-radius:6px;border:2px solid var(--coral)}
.promo-cta:hover,.promo-cta:focus{background:var(--coral-hover);
  border-color:var(--coral-hover);color:#FFFFFF;text-decoration:none}

/* a. navy panel, gold rule, round portrait */
.promo-a{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:1.9rem;align-items:center;
  padding:2.1rem 2.1rem 2.1rem 2.3rem;border-top:5px solid var(--gold);
  background:linear-gradient(160deg,#0A2A61 0%,var(--navy) 46%,#061B40 100%)}
.promo-a .promo-shot{width:230px;height:230px;border-radius:50%;margin-inline:auto;
  object-fit:cover;object-position:50% 17%;
  border:5px solid var(--gold);box-shadow:0 14px 34px rgba(0,0,0,.42)}

/* b. cream and navy split, coral edge */
.promo-b{display:grid;grid-template-columns:minmax(0,1fr) 290px;border:1px solid var(--rule)}
/* ITS OWN NAME, not ".promo-b .promo-copy". G39 walks the rendered ancestors
   but resolves each CLASS to one colour, so declaring a cream background on a
   class that the navy shapes also use handed cream to every panel in the
   family and reported white-on-cream on a combination that never renders. A
   background belongs to a class, not to a context. */
.promo-copy-light{background:var(--cream);padding:2rem 2rem 2rem 2.1rem;
  border-left:8px solid var(--coral)}
.promo-plate{position:relative;min-height:280px;
  background:linear-gradient(180deg,#0A2A61,#061B40)}
.promo-plate img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 12%}
/* NO WASH OVER THE PHOTOGRAPH. A navy gradient used to run across this
   panel to soften the join, and at the width the panel actually renders it
   reached the left of the face and put a blue cast on it. The owner saw it
   before I did. The join is made by the panel edge instead. */

/* c. wide navy, gold hairline, portrait bleeding off the right */
/* THE RESERVED STRIP IS A SHARE, NOT A NUMBER.

   Found 29 August 2026 sweeping every page at every step of the text size
   control. The photograph strip was reserved as a flat 300px of right padding
   while the left padding is in rem. In a 324px article column at the largest
   text the padding alone came to 358px, so the panel could not be made as
   narrow as the column holding it, and eighteen hub pages ran 3px past the
   window at 1024. Capping the strip at a share of the panel means the reserved
   space can never exceed the panel, whatever the column or the text size does.
   At full width min() still resolves to the 300px the design was drawn at. */
.promo-c{padding:2.4rem min(300px,42%) 2.4rem 2.4rem;min-height:300px;border-radius:14px;
  background:linear-gradient(115deg,#061B40 0%,#0B2C66 52%,#0E3474 100%)}
.promo-c::before{content:"";position:absolute;inset:0;border-radius:14px;
  border:1px solid rgba(252,198,0,.45);pointer-events:none}
.promo-rule{display:block;width:74px;height:4px;background:var(--gold);
  border-radius:2px;margin:0 0 1rem}
.promo-c .promo-shot{position:absolute;right:0;top:0;bottom:0;width:min(300px,42%);height:auto;
  object-fit:cover;object-position:52% 8%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);
          mask-image:linear-gradient(90deg,transparent 0,#000 34%)}

/* d. quiet strip, gold edge, small portrait */
.promo-d{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:1.4rem;
  align-items:center;background:#FFFFFF;border:1px solid var(--rule);
  border-left:8px solid var(--gold);border-radius:10px;padding:1.4rem 1.6rem}
.promo-d .promo-shot{width:88px;height:88px;border-radius:50%;
  object-fit:cover;object-position:50% 17%;border:3px solid var(--navy)}
.promo-d .promo-cta{margin-top:0;white-space:nowrap;font-size:.98rem;padding:.8rem 1.3rem}

/* The rail version used to be a fifth panel here, .promo-rail, with a round
   portrait and its own type sizes. It is gone, along with every rule that
   scoped an atom to it, because the right column now carries a drawn square
   instead and nothing in the templates emits those class names any more.
   Section 53 has the reasoning and the replacement. */

@media (max-width:820px){
  .promo-a{grid-template-columns:1fr;padding:1.6rem}
  .promo-a .promo-shot{width:170px;height:170px}
  .promo-b{grid-template-columns:1fr}
  .promo-plate{min-height:220px;order:-1}
  .promo-c{padding:1.8rem}
  .promo-c .promo-shot{display:none}
  .promo-d{grid-template-columns:1fr}
  .promo-d .promo-cta{justify-self:start}
}

/* ==== 51. A LONG URL MAY NOT PUSH THE PAGE SIDEWAYS =======================
   Raising the body type from 16px to 18px on 27 August 2026 made the profile
   pages' social links, which are written out as full addresses so a reader can
   see where they go, 7px wider than a 360px screen. A URL has no spaces in it,
   so nothing in normal wrapping can break it and the whole document scrolls.

   break-word rather than anywhere: the first only breaks a word that cannot
   fit on a line of its own, which is exactly this case, while the second
   breaks ordinary prose mid-word wherever it happens to be convenient.
   ======================================================================== */
a{overflow-wrap:break-word}
.prose a,.article a,.body a{word-break:normal;overflow-wrap:break-word}

/* ==== 52. THE PROMINENT NOTICE ============================================
   The aside a page uses when a general disclosure at the foot is not enough:
   a position on tax, a figure that changed, a statement about what the author
   is not qualified to be. It sits directly under the direct answer, above the
   first heading, because a reader who stops after two paragraphs must still
   have seen it.

   Coral rule and coral heading on cream. Coral on cream measures 6.4:1 and
   passes; the FILL is never coral with navy on it, which is the 2.48:1
   combination this site never uses.
   ======================================================================== */
.liability-rule{
  margin:1.6rem 0 2rem;padding:1.15rem 1.4rem;
  background:var(--cream);border:1px solid var(--rule);
  border-left:7px solid var(--coral);border-radius:0 10px 10px 0;
  box-shadow:0 6px 18px rgba(8,37,86,.10)}
.liability-rule p{margin:0 0 .7rem;font-size:.97rem;line-height:1.62;color:#33415A}
.liability-rule p:last-child{margin-bottom:0}
.liability-rule strong{color:#8A0E31}

/* ==== 53. THE SQUARE IN THE RIGHT COLUMN, AND THE HEIGHT IT NEEDS =========
   The cornerstone promotion in the rail was arriving on screen sliced through
   the middle, with a hard edge and empty space under it. Not a paint fault: a
   measurement one. .rail-sticky is a flex column capped at calc(100vh - 7rem)
   so it can stay stuck to the screen, it used to hold two blocks, and a third
   was added. A flex item shrinks by default, so the third absorbed the whole
   shortfall, and .promo carries overflow:hidden to round its corners, so the
   compressed remainder was clipped rather than merely spilling.

   The owner asked for a square drawn banner in its place, under the booking
   card, and that is the right answer rather than a patch. An image with an
   intrinsic 1:1 ratio reserves its own height before it loads, takes a
   predictable share of the column at every width, and its height is a function
   of the column width and nothing else.

   TWO RULES KEEP IT WHOLE. flex:0 0 auto, so the square is not a candidate for
   shrinking at all; and a min-height on the contents card, so the shrinking
   that has to land somewhere lands there instead. The contents card is built
   for it: its list is already an overflow-y:auto scroller with its own
   scrollbar, so losing height costs a reader two entries and a short scroll,
   while losing height cost the square its bottom half.
   ======================================================================== */
.rail-sticky > .rail-square{
  flex:0 0 auto;          /* never a candidate for the shortfall */
}
/* display:block and line-height:0 lived here while the square was a picture.
   Both had to go when it became markup: block collapsed the flex column that
   stacks the four lines, so the eyebrow and the headline ran together on one
   line, and a zero line height would have set the text solid. The layout for
   the markup version is in section 61. */

/* The floor for the contents card, and it is a measured number, not a guess.
   At a 1440 frame the rail column is 459px wide, so the square renders 459px
   tall. The card itself is 83px of chrome, which is the heading, its rule and
   the padding, and one contents entry is 36px. 83 plus three entries is 191,
   so 180px is the heading plus a little under three entries: the smallest
   height at which the card still reads as a contents list rather than a
   fragment. Only while the rail is a capped sticky column, which is above
   960px; below that it is a plain stacked block and a floor would only add
   white space under a short list. */
@media (min-width:961px){
  .rail-sticky > .toc{min-height:180px}
}

/* THE SHORT-VIEWPORT GUARD, with the arithmetic written out.

   Stacked in the sticky column, at a 1440 frame, the three blocks and the two
   1rem gaps between them measure:

       contents card, at its floor      180px
       gap                               18px
       booking card                     290px
       gap                               18px
       square banner                    459px
       giving a total of                965px

   The booking card is the French one. The English card is 266px, and taking
   the English number would have made this rule correct on three quarters of
   the site and ten pixels wrong on the rest, which is the exact shape of fault
   the comments in this file keep recording. The worst measured block is the
   one the threshold is built on.

   The cap is calc(100vh - 7rem), which at an 18px root is the viewport height
   less 126px. 965 plus 126 is 1091. So 1091px of viewport height is the line:
   at or above it the three blocks share one screen with the contents card
   still readable and the column still inside its own cap, and below it they
   cannot, whatever is done to them. The same sum at a 1366 frame comes to 965
   as well, because the column narrows the square by 24px and lengthens the
   booking card by the same 24px, so one threshold covers both.

   Below the line the column stops being sticky and simply stacks and scrolls
   with the page. Nothing is hidden and nothing is clipped: the reader gets all
   three blocks at full height, in order, and reaches them by scrolling, which
   is what the one-column layout below 960px has always done. The alternative,
   keeping the cap and letting the shortfall squeeze something, is the fault
   this section exists to remove.

   Worth saying plainly, because it is the real consequence: a 1080px monitor
   gives a browser viewport nearer 900px once its own chrome is taken off, so
   in practice most desktop readers now get the stacked column and the sticky
   path belongs to the tall screens. A whole banner that scrolls is a better
   answer than a sticky one with its bottom half cut away. */
/* SUPERSEDED ON 28 AUGUST 2026, and the reason is worth keeping.
   The rule above sent the whole column static below 1090px of viewport
   height, which is most desktop screens. It removed the clipping, which was
   the fault it was written for, and introduced a worse one: once the stacked
   rail ran out of content the right column was empty for the rest of the
   article, which the owner photographed and rejected. A column that is blank
   for two screens is a worse answer than a column the reader can scroll.
   Section 56 keeps the block sticky and lets the block itself scroll, so the
   column always has something in it. Only a genuinely short viewport, a
   laptop in landscape at 620px or less, still stacks. */
@media (max-height:620px){
  .rail-sticky{position:static;max-height:none}
  .rail-sticky > .toc{
    min-height:0;overflow:visible;flex:none;display:block}
  .rail-sticky > .toc ol{overflow:visible;max-height:none}
}

/* ==== 54. THE CONTENTS CARD: TALLER, TIGHTER, AND MARKED AS POINTS ========
   Reported on 28 August 2026 with the box drawn on the screenshot. The red
   rectangle was what the card actually occupied, the green one was what it
   should occupy. Three separate things were wrong and each has its own fix.

   TOO SHORT. The card was floored at 180px, which showed a heading and a
   little under three entries before the list began to scroll. On a page with
   six sections that is a scrollbar for the sake of forty pixels. The floor
   goes to 252px, forty percent more, which is what the owner asked for and
   which happens to be the height at which a six entry contents fits whole.

   TOO AIRY. Each entry carried .34rem of padding above and below, so between
   two lines of text sat .68rem of nothing. Halved to .17rem. The type size is
   unchanged: the space between the lines came down, not the words.

   NOT READABLE AS A LIST. Set as plain lines with the list marker suppressed,
   the entries read as a paragraph broken up rather than as points, which is
   what the owner saw. A small gold disc now sits before each one, drawn as a
   marker rather than typed into the content so a screen reader is not made to
   read it aloud. NO NUMBERS: he asked for that explicitly, and a number would
   also promise an order the sections do not have.

   The disc sits in its own 14px channel and the text is indented to clear it,
   so a wrapped entry would align under its first word rather than under the
   disc. Entries do not wrap today, they are trimmed with an ellipsis, but the
   indent costs nothing and means the card does not break if that ever changes.

   No colour is declared for any class that carries text, so G39 resolves the
   same colours it resolved before. The disc is a background, not ink. */
@media (min-width:961px){
  .rail-sticky > .toc{min-height:252px}
}
.rail-sticky > .toc li{
  position:relative;
  padding-left:14px;
}
.rail-sticky > .toc li::before{
  content:"";
  position:absolute;
  left:0;
  top:calc(.17rem + .55em);
  width:5px;height:5px;border-radius:50%;
  background:var(--gold);
}
.rail-sticky > .toc a{padding:.17rem 0}

/* ==== 55. THE HEADER CALL TO ACTION ======================================
   Reported 28 August 2026 with a picture of the size wanted. The button was
   61px tall against a 44px language box beside it, which made it read as a
   coloured panel filling the header rather than as a button sitting in it.
   Type comes down from 1.2rem to 1.05rem and the padding with it, landing at
   about 44px. That is the floor rather than an arbitrary number: 44px is the
   smallest touch target WCAG accepts, so the button is now as compact as it
   can be without becoming harder to hit on a phone.

   THE SHADOW. Two layers doing two jobs. A tight coral glow directly beneath
   carries the button's own colour into the navy, which is the "shining shadow"
   asked for, and a wider navy shadow underneath that gives it weight. Both are
   scoped to the header so the in-page buttons keep the shadow set in section
   49 and nothing else on the site moves.

   THE SHINE. A single light streak crosses the face once every fifteen
   seconds. The sweep itself lasts about one second, so the button is still for
   fourteen seconds out of every fifteen: long enough that the eye catches the
   movement when it happens, rare enough that it never becomes a flicker in the
   corner of a reader's vision while they are trying to read a page.

   It is drawn with ::after inside overflow:hidden, so it is clipped to the
   button and cannot paint over the navigation. It animates background
   position only, which the compositor handles without laying the page out
   again, and it stops completely for anyone who has asked their system to
   reduce motion. -------------------------------------------------------- */
.site-head .cta{
  position:relative;overflow:hidden;
  padding:.58rem 1.4rem;
  font-size:1.05rem;
  line-height:1.25;
  box-shadow:
    0 6px 16px -4px rgba(195,19,68,.62),
    0 2px 5px rgba(8,37,86,.34)!important;
  transition:background-color 160ms ease, box-shadow 220ms ease,
             transform 160ms ease;
}
.site-head .cta:hover,.site-head .cta:focus{
  transform:translateY(-1px);
  box-shadow:
    0 10px 24px -5px rgba(195,19,68,.78),
    0 4px 9px rgba(8,37,86,.4)!important;
}
/* THE SWEEP MOVES WITH transform, NOT WITH left.

   Reported from a phone on 28 August 2026: the top menu was shaking. It was.
   The comment above this rule claimed the sweep animated background position,
   but the keyframes underneath animated `left`, which is a layout property.
   Every frame of the sweep asked the browser to lay the button out again, and
   because the button sits inside a position:sticky masthead that the phone is
   also repainting as the page scrolls, the whole bar jittered.

   translateX is a compositor operation. Nothing is laid out, nothing above or
   beside the button is touched, and the sweep looks identical. The element now
   sits at left:0 and the percentages are expressed against ITS OWN width, 38%
   of the button, so -158% is the same starting place the old -60% was and 355%
   is the same finish. */
.site-head .cta::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:38%;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 100%);
  transform:translateX(-158%) skewX(-18deg);
  will-change:transform;
  pointer-events:none;
  animation:cta-shine 15s linear infinite;
}
@keyframes cta-shine{
  0%   {transform:translateX(-158%) skewX(-18deg)}
  7%   {transform:translateX(355%)  skewX(-18deg)}
  100% {transform:translateX(355%)  skewX(-18deg)}
}
@media (prefers-reduced-motion:reduce){
  .site-head .cta::after{animation:none;transform:translateX(-158%) skewX(-18deg)}
  .site-head .cta:hover,.site-head .cta:focus{transform:none}
}

/* ==== 56. TWO SPACING FAULTS THE OWNER MARKED ON A SCREENSHOT =============

   A. THE NAVY CHECKLIST BAND WAS BOTTOM HEAVY.
   Measured: 21px of navy above the three cards and 33px below, with a further
   strip under that. The section's own padding was nearly even, 20.7 top and
   14.4 bottom. The imbalance came from somewhere else: each card is an li
   carrying margin-bottom, which is useful when the cards stack in one column
   on a phone and is pure dead space when they sit side by side, because the
   last row's margin is still there and the band has to contain it.

   So the margin is removed where the cards are a row and kept where they are
   a column, and the section's own padding is made equal top and bottom. The
   band now sits evenly around its contents at every width.

   B. THE RIGHT COLUMN EMPTIED ITSELF PART WAY DOWN AN ARTICLE.
   The sticky block held three cards whose combined height, about 870px, was
   taller than the space it was allowed, about 774px on a 900px screen. The
   overflow was visible rather than hidden, so the bottom of the block hung
   below the viewport, scrolled away as the reader went down the page, and
   left the column empty for the rest of the article.

   The earlier design made the CONTENTS LIST the one thing that scrolled, on
   the reasoning that a card should never be a scroll container. That holds
   with two cards in the rail. With three it cannot: no amount of shrinking one
   list closes a hundred pixel gap.

   So the whole sticky block scrolls instead, and the list inside it stops
   scrolling, which leaves exactly ONE scroll container in the column rather
   than two nested ones. overscroll-behavior stays `auto` deliberately, not
   `contain`: contain stops the wheel dead at the end of the rail, which is
   what made the page feel frozen the first time a scroll container was tried
   here. With auto, the wheel hands back to the page once the rail has no more
   to give, and the rail is never empty at any point in any article.
   ======================================================================== */
.ticks{padding-top:1.15rem;padding-bottom:1.15rem}
@media (min-width:721px){
  .ticks li{margin-bottom:0}
}

@media (min-width:961px){
  .rail-sticky{
    overflow-y:auto;
    overscroll-behavior-y:auto;
    scrollbar-width:thin;
    padding-right:4px;
  }
  .rail-sticky::-webkit-scrollbar{width:6px}
  .rail-sticky::-webkit-scrollbar-thumb{
    background:var(--rule);border-radius:3px}
  .rail-sticky::-webkit-scrollbar-thumb:hover{background:var(--azure)}
  /* One scroll container, not two. The list goes back to its natural height
     and the block around it does the scrolling.

     flex:none is the load bearing word here. The contents card was
     flex:0 1 auto, which lets a flex item shrink BELOW its content when the
     column runs short. Combined with overflow:visible, which the card needs
     now that it is not the thing scrolling, the card was drawn at a fraction
     of its height and its list spilled straight over the two cards beneath
     it. Three cards rendered on top of each other, which is what the first
     attempt at this looked like. With flex:none the card takes the height it
     needs, the column overflows, and the column is what scrolls. */
  .rail-sticky > .toc{
    flex:none;min-height:0;overflow:hidden;display:flex;
    /* A CAP, NOT A SHRINK. Left uncapped the contents card on a long article
       ran to over a thousand pixels and pushed the booking card and the
       cornerstone banner clean off the bottom of the rail, reachable only by
       scrolling inside it. Nobody scrolls a sidebar to find a call to action.
       At 38vh the card takes about a third of the screen, which shows a
       heading and roughly eight entries, and the two blocks that ask the
       reader to do something stay where they can be seen. */
    max-height:38vh}
  /* !important, and not by habit. An older rule at the top of this file says
     .toc{max-height:none!important;overflow:visible!important}. It was written
     to kill an inner scrollbar somebody had seen in a screenshot, and it wins
     over any later plain declaration however specific, because that is what
     !important does. The cap above is deliberate and has to outrank it, so it
     is declared the same way rather than by inventing a heavier selector. */
  .rail-sticky > .toc{
    max-height:38vh!important;overflow:hidden!important}
  .rail-sticky > .toc ol{
    overflow-y:auto!important;max-height:none!important;
    flex:1 1 auto;min-height:0}
  /* The square is 1:1, so its height is its width. In a 455px rail that is a
     455px block, which is half a screen for one banner. Capped and centred. */
  /* FULL COLUMN WIDTH. The 300px cap was put here when the square was an
     image: at 455px the picture was a 455px tall block, half a screen for one
     banner, so it was reined in. As markup the height is set by the words
     rather than by the width, so the cap only made the banner narrower than
     the two cards above it and it read as an afterthought. It fills the
     column now, like everything else in the rail. */
  .rail-sticky > .rail-cta,
  .rail-sticky > .rail-square,
  .rail-sticky > .promo{flex:none}
}

/* ==== 57. HALF BOLD FOR THE PAIN POINTS ==================================
   The owner asked for the "Does this sound familiar" points to be half bold.
   Georgia ships two weights, 400 and 700, and nothing between them. Asking a
   browser for 600 does not produce a middle weight: font matching rounds up
   and you get full bold, which is what the headings already use and would
   flatten the difference between a heading and a list.

   A real half weight is made by thickening the strokes of the regular face
   very slightly. A third of a pixel of stroke in the text's own colour reads
   as a hair heavier than the body, clearly lighter than the headings, and
   costs nothing to download. currentColor rather than a fixed value, so the
   effect follows the text wherever the list is used.

   Scoped to a list inside a split row, which is where this pattern lives. The
   ordinary prose lists elsewhere are untouched. */
.split-row ul > li{
  -webkit-text-stroke:.32px currentColor;
  letter-spacing:.002em;
}

/* ==== 58. THE FIGURES, IN THREE SKINS ====================================
   The owner chose designs 1, 2 and 3 of the five put to him and asked for one
   per silo. figure_html.py decides which silo gets which and emits the class;
   everything about how they look is here.

   TWO TYPEFACES. Georgia for the words, the monospace stack for the numerals
   and the small capitals. Both were already loading.

   THE NUMERALS ARE THE APPLE COLOUR, the Get Started red, replacing the gold
   with a navy outline he rejected. On the navy panel that exact red measures
   1.8 to 1 against the ground, which is unreadable, so there it is lifted to
   a lighter shade of the same colour measuring 6.0 to 1 at the light end of
   the gradient and 9.5 to 1 at the dark end. Same colour to the eye, legible
   to everyone, and the only place the value differs. */
:root{
  --apple:#C31344;        /* the Get Started colour */
  --apple-lift:#FF9DB2;   /* the same red, raised to pass on navy */
}
.fig{margin:2rem 0;padding:0;border:0}
.fig .fig-head{margin:0}
.fig .fig-kick,.fig .fig-kick-gold{
  font:700 calc(11.5px * var(--ibc-tscale))/1.35 var(--mono,ui-monospace,'DejaVu Sans Mono',Menlo,Consolas,monospace);
  letter-spacing:.2em;text-transform:uppercase;margin:0 0 6px}
.fig .fig-kick{color:var(--slate)}
.fig .fig-kick-gold{color:var(--gold);margin-top:.35rem}
.fig .fig-title,.fig .fig-title-lift{
  font:700 clamp(1.35rem,calc(2.1vw * var(--ibc-tscale)),1.72rem)/1.2 Georgia,'Times New Roman',serif;
  margin:0 0 1.15rem}
.fig .fig-title{color:var(--apple)}
.fig .fig-title-lift{color:var(--apple-lift)}
.fig .fig-rows{list-style:none;margin:0;padding:0;counter-reset:none}
.fig .fig-n{
  font:700 1.05rem/1 var(--mono,ui-monospace,'DejaVu Sans Mono',Menlo,Consolas,monospace);
  font-style:normal;color:var(--apple)}
.fig .fig-b{display:block;font:700 1.06rem/1.34 Georgia,'Times New Roman',serif;
  color:var(--navy)}
.fig .fig-s{display:block;font:400 .95rem/1.5 Georgia,'Times New Roman',serif;
  color:var(--slate);margin-top:.18rem}
.fig figcaption{
  font:400 .9rem/1.55 Georgia,'Times New Roman',serif;margin:.7rem 0 0}
.fig .fig-cap{color:var(--slate)}
.fig .fig-cap-light{color:#C9D6EA}

/* ---- skin 1, the ledger ---- */
.fig-ledger{background:var(--cream);border:1px solid #E7DCC6;
  border-left:8px solid var(--gold);border-radius:12px;
  padding:1.7rem 1.9rem 1.4rem;box-shadow:0 10px 28px rgba(8,37,86,.10)}
.fig-ledger .fig-rows li{
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:1rem;
  align-items:start;padding:.85rem 0;border-top:1px solid #E7DCC6}
.fig-ledger .fig-rows li:first-child{border-top:0}
.fig-ledger figcaption{margin-top:1rem;border-top:1px solid #E7DCC6;
  padding-top:.7rem}

/* ---- skin 2, the navy panel ---- */
.fig-panel{background:linear-gradient(158deg,#0E3574,#04122C);
  border-radius:14px;border-top:5px solid var(--gold);
  padding:1.8rem 1.7rem 1.5rem;position:relative;
  overflow:hidden;box-shadow:0 18px 44px rgba(8,37,86,.30)}
.fig-panel .fig-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.85rem}
.fig .fig-card{background:#FFFFFF;border-radius:10px;
  padding:1rem 1.15rem;border-left:5px solid var(--apple);
  box-shadow:0 8px 20px rgba(0,0,0,.24)}
.fig-panel .fig-n{display:block;font-size:.8rem;letter-spacing:.12em;
  margin-bottom:.35rem}
.fig-panel figcaption{margin-top:1rem}

/* ---- skin 3, the gold spine ---- */
.fig-spine{background:var(--paper);border:1px solid var(--rule);
  border-radius:12px;padding:1.7rem 1.9rem 1.2rem;
  box-shadow:0 10px 26px rgba(8,37,86,.09)}
/* The spine is a BORDER, not a background. Drawn as a background on a
   pseudo element it became, as far as G39 is concerned, the ground behind
   every numeral inside the list, and the checker reported red on gold at
   3.78 to 1. It was never actually behind the text, but the checker cannot
   know that from the cascade, and a rule it cannot verify is a rule that will
   be broken later by someone who trusts the green tick. A border carries no
   background, so the numerals resolve against the card and the line looks
   identical. */
.fig-spine .fig-rows{position:relative;padding-left:2.6rem;
  border-left:3px solid var(--gold);margin-left:.55rem}
.fig-spine .fig-rows li{position:relative;padding:0 0 1.35rem}
.fig-spine .fig-rows li::before{content:"";position:absolute;
  left:-2.73rem;top:.36rem;width:15px;height:15px;border-radius:50%;
  background:var(--paper);border:5px solid var(--gold);
  box-shadow:0 0 0 1px var(--navy)}
.fig-spine .fig-n{display:block;font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:.2rem}
.fig-spine figcaption{margin-top:.3rem;border-top:1px solid var(--rule);
  padding-top:.7rem}

@media (max-width:720px){
  .fig-panel .fig-rows{grid-template-columns:1fr}
  .fig-ledger,.fig-spine,.fig-panel{padding-left:1.15rem;padding-right:1.15rem}
  .fig-ledger .fig-rows li{grid-template-columns:40px minmax(0,1fr);gap:.7rem}
}

/* ==== 59. THE SOCIAL ACCOUNTS IN THE FOOTER ==============================
   Five accounts, in gold, drawn as inline SVG so they take their colour from
   here and cost no extra request. The five addresses come from site.yml, the
   same list the JSON-LD sameAs block reads, so the icons and what the site
   declares to a search engine cannot drift apart.

   THE TARGET IS 44px, not the size of the mark. The gold shape is 22px and
   the tappable square around it is 44, which is the smallest target WCAG
   accepts. An icon row is exactly where that matters: five small things close
   together on a phone is the classic way to make a footer unusable.

   Gold on the navy footer measures 9.9 to 1, well clear of the 4.5 floor, and
   the hover state lifts to white at 15.9 to 1 rather than dimming, so the
   contrast improves on interaction rather than degrading. */
/* ONE ROW, AND WHY THE SELECTOR CARRIES .site-foot.

   Reported 29 August 2026: the five accounts were stacked one per line. The
   rule below said display:flex and had said so from the start, and it was
   never in force. Earlier in this file .site-foot ul sets display:block, and
   that selector scores one class plus one element against this one's single
   class, so it won wherever it sat in the file. Order was never going to fix
   it. The selector is qualified instead, and the row is told not to wrap. */
.site-foot ul.foot-social{
  list-style:none;display:flex;flex-wrap:nowrap;gap:.3rem;
  align-items:center;
  margin:1.15rem 0 0;padding:0}
.site-foot ul.foot-social > li{flex:0 0 auto;margin:0;width:auto}
.foot-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:8px;
  color:var(--gold);text-decoration:none;
  transition:color .18s ease,background-color .18s ease,transform .18s ease}
.foot-social svg{width:22px;height:22px;fill:currentColor;display:block}
.foot-social a:hover,.foot-social a:focus-visible{
  color:#FFFFFF;background:rgba(252,198,0,.16);transform:translateY(-2px)}
.foot-social a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .foot-social a:hover,.foot-social a:focus-visible{transform:none}
}

/* ==== 60. THE TEAM PHOTOGRAPHS WERE CUTTING THE TOP OFF TWO HEADS ========
   Reported 28 August 2026 with the page open. The frame was 4 by 3 and the
   two source photographs are portraits: Jose's is 1320 by 1431, Michael's is
   375 by 583, which is nearly twice as tall as it is wide. object-fit:cover
   fills a landscape frame from a portrait source by scaling to the width and
   throwing away the top and the bottom, and object-position:center 18% then
   moved the surviving band DOWN, which is what took the top of Michael's head.

   Two changes, and the first is the one that matters.

   THE FRAME IS NOW A PORTRAIT, 3 by 4. A portrait source in a portrait frame
   crops sideways rather than vertically, so on Michael's photograph nothing
   above or below is lost at all, and on Jose's the loss is a few percent
   instead of a third.

   THEN THE HEADROOM. object-position is 50% 0, which anchors the visible band
   to the TOP of the source, so the crop can only ever take from the bottom of
   a photograph and never from a head. On top of that the frame carries 10px
   of its own space above the image, which is what the owner asked for: the
   photograph is inset rather than bleeding to the card's edge, so there is
   always a clear band above the head even when a future portrait is framed
   tightly. The inset is the card's own cream, on all four sides, so it reads
   as a mount around the picture rather than as a strip stuck on the top. */
.team-photo{
  aspect-ratio:3/4;
  object-position:50% 0;
  padding:10px 10px 0;
  background:transparent;
  border-radius:14px;
}

/* ==== 61. THE RAIL SQUARE, NOW MARKUP ====================================
   It was a generated picture carrying one sentence. It carries one of forty
   now, chosen by silo so the argument matches what the reader is reading, and
   the copy is text rather than pixels.

   THE SQUARE IS KEPT, and it is kept for the reason it was introduced: an
   element with a declared aspect ratio reserves its own height before anything
   loads and cannot be compressed by the flex column around it, which is what
   sliced the old portrait panel in half. aspect-ratio does for a block of text
   what the image's intrinsic size used to do for the picture.

   min-height rather than a hard height, because a long headline in French must
   be allowed to make the block taller rather than overflow it. The square is a
   floor, not a cage. */
.rail-square{
  display:flex;flex-direction:column;
  /* NO ASPECT RATIO ANY MORE, and no width cap.
     The square shape existed to reserve height while the banner was an image.
     Markup reserves its own height by having words in it, so forcing a square
     onto a full width column would have left a large empty space under short
     copy and squeezed the long French headlines. The block is as tall as it
     needs to be and as wide as the column. */
  width:100%;
  padding:1.35rem 1.4rem 1.4rem;
  border-radius:14px;border-top:5px solid var(--gold);
  background:linear-gradient(158deg,#0E3574,#04122C);
  box-shadow:0 18px 44px rgba(8,37,86,.30);
  text-decoration:none;
  transition:transform .18s ease,box-shadow .22s ease;
}
.rail-square:hover{transform:translateY(-3px);
  box-shadow:0 24px 54px rgba(8,37,86,.40)}
.rs-kick{
  font:700 calc(11px * var(--ibc-tscale))/1.35 var(--mono,ui-monospace,'DejaVu Sans Mono',Menlo,Consolas,monospace);
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  padding-bottom:.6rem;margin-bottom:.85rem;
  border-bottom:1px solid rgba(252,198,0,.45)}
.rs-head{
  font:700 1.16rem/1.28 Georgia,'Times New Roman',serif;color:#FFFFFF}
.rs-line{
  font:400 .93rem/1.5 Georgia,'Times New Roman',serif;color:#D6E1F2;
  margin-top:.6rem}
/* The button is pushed to the floor of the square by the auto margin, so forty
   headlines of different lengths all put their call to action in one place. */
.rs-cta{
  margin-top:auto;display:block;text-align:center;
  background:var(--coral);color:#FFFFFF;
  font:700 .97rem/1 Georgia,'Times New Roman',serif;
  padding:.78rem 1rem;border-radius:6px}
.rail-square:hover .rs-cta{background:var(--coral-hover)}
@media (prefers-reduced-motion:reduce){
  .rail-square:hover{transform:none}
}

/* ==== 62. THE BREADCRUMB ON A PHONE ======================================

   Found while measuring the mobile masthead on 28 August 2026. Two faults,
   both visible in the screenshot: a stray slash floating at the left margin
   beside the second line of the title, and a trail three lines deep carrying
   the full title of the page immediately above the same title set as an H1.

   THE STRAY SLASH. Each crumb is a flex box with align-items:center, and the
   separator is drawn as ::before on the crumb. When the last crumb runs to
   three lines the separator centres itself against all three, so it lands
   beside the middle line instead of the first. Aligned to the first baseline
   it sits where a reader expects it, whatever the crumb does afterwards.

   THE LENGTH. The last crumb is the page you are already on, and on this site
   the titles are long. Repeating a sixteen word title one line above the same
   sixteen words in the H1 costs three lines of a phone screen and tells the
   reader nothing. It is hidden below 700px. Nothing is lost to search: the
   BreadcrumbList in the page's structured data is written separately and still
   carries every level, including this one. */
.breadcrumb li{align-items:baseline}
@media (max-width:699px){
  .breadcrumb li[aria-current="page"]{display:none}
}

/* ==== 63. THE PHONE GUTTER =============================================

   Owner's instruction, 28 August 2026, from an iPhone: too much empty space
   down the left and right, and the line of text too short as a result. Keep a
   margin, but take it down to about a quarter of what is there now.

   MEASURED FIRST. Every full width container on a phone takes its side
   padding from clamp(1.25rem,calc(3vw * var(--ibc-tscale)),2.5rem). On a 390 pixel screen 3vw is 11.7
   pixels, so the floor wins and the gutter is the full 1.25rem, which at this
   site's 18px root is 22.5 pixels a side, 45 pixels of the screen. The text
   column was 345 pixels of 390.

   SET TO 12 PIXELS, which is 0.667rem at this site's 18px root. The reading
   column becomes 366 pixels of 390, about six per cent more type on every
   line, and the whole page moves visibly outward.

   WHY 12 AND NOT THE 5.6 FIRST ASKED FOR. The instruction on 28 August was a
   quarter of the old margin, which is 5.6 pixels, and that is what was built
   first. Photographs sent from the phone later the same day, captioned as the
   padding he wanted, measure closer to 12. The two signals disagree, and he
   declined to choose between them, so the middle value is taken and recorded
   here rather than picked silently.

   The reservation that made 5.6 worth questioning still stands. Under about
   8 pixels the type sits close enough to the glass that a curved screen edge
   or a heavy case can shade the first letter of every line, and a thumb
   resting on the side of the phone covers it. 12 clears that and still takes
   most of the space back.

   ONE NUMBER CHANGES IT. Every value below is 0.667rem. For the original
   quarter, make them 0.3125rem; to restore what the site had, 1.25rem.

   The gutter is only taken off the OUTER containers. Cards, panels and the
   navy bands keep their own inner padding, because that padding is what
   separates their text from their own coloured edge, and removing it would
   make the boxes look broken rather than the page look wider.
   ==================================================================== */
@media (max-width:699px){
  main{padding-inline:.667rem!important}
  .breadcrumb{padding-inline:.667rem}
  .band > .inner,.foot-cols,.foot-copy,.site-foot > .inner{
    padding-inline:.667rem!important}
  /* The 640px block earlier in this file sets main's padding in shorthand,
     which would reset the inline value on the smallest phones. Restated so
     the intent survives it, and so the top and bottom padding it chose are
     kept exactly as they were. */
  .shell{padding-inline:0!important}
}

/* ==== 64. THE MISSION BANNERS ============================================

   Owner's instruction, 28 August 2026: banners for the mission of Canadian
   Wealth Creation Centre Inc., distributed among the articles, with a small
   one as the last box in the right-hand column.

   THREE SIZES, ONE IDEA. The small rail box, a horizontal strip for the
   middle of an article, and a wide statement for the hubs and the conversion
   pages. All three carry the same sentence and the same gold edge, so a
   reader meeting the second one recognises it rather than reading it again.

   WHY THEY DO NOT LOOK LIKE THE CORNERSTONE SQUARE. The square above it in
   the same column is a deep navy panel with a red button. Two navy panels
   with red buttons stacked on each other read as one advertisement repeated,
   and the second gets ignored. The mission box is the inverse: a light ground
   with a gold edge and a plain gold link. It is quieter on purpose, because
   it is the third thing in the column and a reader who has already passed a
   booking card and a guide should meet something that reads as a statement
   rather than a third demand.

   COLOUR, MEASURED. Navy #082556 on the warm cream #FDF9EF measures 14.3 to 1.
   The kicker uses --gold-text #6E5305, which is the gold that is legible on a
   light ground, at 6.3 to 1; the brand gold #FCC600 is 1.6 to 1 on cream and
   is used here only as an edge, never as text. On the navy of the wide
   banner the champagne #FFEFB0 measures 12.8 to 1 and white 14.9 to 1. Every
   class below carries exactly one colour, which is what G39 resolves.
   ======================================================================== */

/* ---- the small box, last in the rail ---- */
.mission-rail{
  display:flex;flex-direction:column;
  width:100%;
  margin-top:1.1rem;
  padding:1.1rem 1.15rem 1.15rem;
  border:1px solid var(--rule);
  border-top:4px solid var(--gold);
  border-radius:12px;
  background:#FDF9EF;
  text-decoration:none;
  transition:transform .18s ease,box-shadow .22s ease;
}
.mission-rail:hover{transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(8,37,86,.16)}
.mr-kick{
  font:700 calc(11px * var(--ibc-tscale))/1.35 ui-monospace,'DejaVu Sans Mono',Menlo,Consolas,monospace;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);
  padding-bottom:.55rem;margin-bottom:.7rem;
  border-bottom:1px solid rgba(110,83,5,.28)}
.mr-head{font:700 1.08rem/1.3 Georgia,'Times New Roman',serif;color:var(--ink)}
.mr-line{font:400 .9rem/1.5 Georgia,'Times New Roman',serif;color:var(--muted);
  margin-top:.5rem}
.mr-cta{margin-top:.85rem;display:block;
  font:700 .92rem/1 Georgia,'Times New Roman',serif;color:var(--gold-text);
  text-decoration:underline;text-underline-offset:3px}

/* ---- the strip, between two sections of an article ---- */
.mission-strip{
  margin:2.4rem 0;
  padding:1.3rem 1.5rem 1.4rem;
  border-left:5px solid var(--gold);
  border-radius:0 10px 10px 0;
  background:#FDF9EF;
}
.ms-kick{
  font:700 calc(11px * var(--ibc-tscale))/1.35 ui-monospace,'DejaVu Sans Mono',Menlo,Consolas,monospace;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);
  margin:0 0 .45rem}
.ms-head{font:700 1.35rem/1.25 Georgia,'Times New Roman',serif;color:var(--ink);
  margin:0}
.ms-line{font:400 1rem/1.6 Georgia,'Times New Roman',serif;color:var(--body);
  margin:.6rem 0 .9rem;max-width:62ch}
.ms-cta{font:700 1rem/1 Georgia,'Times New Roman',serif;color:var(--gold-text);
  text-decoration:underline;text-underline-offset:3px}

/* ---- the wide statement, on hubs and conversion pages ---- */
.mission-wide{
  margin:2.6rem 0;
  padding:2rem 2.1rem 2.1rem;
  border-radius:14px;
  border-top:5px solid var(--gold);
  background:linear-gradient(158deg,#0E3574,#04122C);
}
.mw-kick{
  font:700 calc(12px * var(--ibc-tscale))/1.35 ui-monospace,'DejaVu Sans Mono',Menlo,Consolas,monospace;
  letter-spacing:.2em;text-transform:uppercase;color:var(--champagne);
  margin:0 0 .6rem}
.mw-head{font:700 1.9rem/1.2 Georgia,'Times New Roman',serif;color:#FFFFFF;
  margin:0}
.mw-line{font:400 1.05rem/1.65 Georgia,'Times New Roman',serif;color:#D6E1F2;
  margin:.8rem 0 1.2rem;max-width:70ch}
.mw-cta{display:inline-block;
  font:700 1rem/1 Georgia,'Times New Roman',serif;
  background:var(--coral);color:#FFFFFF;
  padding:.85rem 1.6rem;border-radius:6px;text-decoration:none}
.mw-cta:hover{background:var(--coral-hover)}

@media (prefers-reduced-motion:reduce){
  .mission-rail:hover{transform:none}
}

/* ==== 65. THE ORPHANED LAST CARD IN A NAVY FIGURE ========================

   Found 29 August 2026 by layout_check, which reports a grid whose last row
   is short. Thirty four pages carry a five row figure in the two column navy
   panel, so the fifth card sat alone in a half width box with an empty cell
   beside it. It reads as a card that failed to load rather than as the end of
   a list.

   An odd last child spans both columns instead. The rule is written so it
   applies only when the count is odd: :nth-child(odd):last-child is true for
   the fifth of five and false for the sixth of six, so an even figure is
   untouched. Nothing else about the figure changes.

   Not applied below 700px, where the grid is a single column already and
   spanning two columns would mean nothing.
   ======================================================================== */
@media (min-width:701px){
  .fig-panel .fig-rows > li:nth-child(odd):last-child{grid-column:1 / -1}
}

/* ==== 66. NOTHING IS WIDER THAN THE SCREEN ==============================

   PRECAUTIONARY, AND THE STORY MATTERS MORE THAN THE RULES.

   Chasing the owner's report that the page slides sideways on a phone, I
   measured the built site and found images 2048 pixels wide on a 390 pixel
   screen, with the layout viewport expanded to 1560. It looked like the exact
   cause, and it was wrong. My test server was serving the pages without the
   main stylesheet, because I had started it with the wrong document root, so
   what I measured was the site with no CSS at all. Unstyled images are their
   own intrinsic size, and that is all I had found.

   Measured properly, with the stylesheet loading, every page reports a
   document width of 390 on a 390 pixel screen. There is no overflow in this
   build.

   THE RULES BELOW STAY, because they are correct and cost nothing: an image
   should never be able to exceed its container, and every replaced element on
   this site now cannot. What they are NOT is the fix for anything currently
   reported.

   THE LESSON, written here because it nearly went out as a diagnosis: before
   measuring a layout, confirm the page is actually styled. A stylesheet that
   404s produces a page that looks broken in exactly the way a layout bug does.
   ======================================================================== */
img, svg, video, canvas, iframe {
  max-width: 100%;
  height: auto;
}
/* height:auto must not fight an element that was given an aspect ratio or an
   explicit height on purpose. */
.res-thumb img, .split-media img, .team-photo, .hero-media img { height: 100%; }
.fig svg, .cnst svg { height: auto; }

/* The automatic minimum size is what lets an image push a track wider than
   the screen. Every container that lays children out in a row or a grid gets
   permission to be narrower than its contents. */
.res-grid > *, .cards > *, .split-row > *, .foot-cols > *,
.shell > *, .stages > *, .fig-rows > * { min-width: 0; }

/* ==== 67. EVERY GRID TRACK MAY BE NARROWER THAN ITS CONTENT ==============

   The companion to section 66, and precautionary for the same reason.

   `1fr` means `minmax(auto, 1fr)`, and that automatic minimum is the content's
   min-content size. For an image that is its intrinsic width, so a wide image
   in a `1fr` column can make the column wider than the screen however many
   times the image is told to be 100% of it: it obeys, against a track it
   created. `minmax(0,1fr)` removes the automatic minimum.

   This site does not currently exhibit that fault. These declarations make it
   unable to.
   ======================================================================== */
.shell, .hero, .split-row, .form-block, .form-fields .row,
.foot-cols, .cards, .steps, .grid-3, .res-grid, .photo-strip, .stages {
  grid-auto-columns: minmax(0, 1fr);
}
@media (max-width: 960px) {
  .shell, .hero, .split-row, .form-block, .form-fields .row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
@media (max-width: 860px) {
  .foot-cols { grid-template-columns: minmax(0, 1fr) !important; }
}
/* Every direct child of a grid or flex container may shrink below its
   content. Without this the child, rather than the track, holds the floor. */
.shell > *, .hero > *, .split-row > *, .form-block > *, .form-fields .row > *,
.foot-cols > *, .cards > *, .steps > *, .grid-3 > *, .res-grid > *,
.photo-strip > *, .stages > *, .prose > *, .body > * { min-width: 0; }

/* ==== 68. TWELVE PIXELS INSIDE THE BOXES TOO =============================

   Owner's instruction, 29 August 2026, with a screenshot of a resource card:
   the page margin was fixed at 12 pixels but the text inside a card was still
   narrow, and he is right about where the width went.

   MEASURED BEFORE CHANGING ANYTHING, at 390 pixels:

     a plain paragraph        366px wide   the 12px gutter, correct already
     a resource card's text   317px        the card adds 23.4px of its own
     a promotion's text       300 to 308px the panel adds 28.8 to 32.4px
     a figure's text          325px        20.7px
     a disclosure's text      345px        22.5px

   So the gutter was doing its job and the panels were quietly taking it back.
   A reader meets most of the site's words inside one of these boxes, which is
   why the page still read as narrow after the margin was cut.

   HORIZONTAL ONLY. The vertical padding is what separates one block from the
   next and it is untouched. Only the left and right are brought to 12 pixels,
   so the text inside a card now runs to 342 pixels rather than 317, and the
   text inside a promotion gains up to 42 pixels a line.

   TWELVE, NOT ZERO. A panel with no inner padding puts its words against its
   own coloured edge, and the border stops reading as a container. Twelve is
   the same number as the page gutter, so the eye meets one measure rather
   than two.
   ======================================================================== */
@media (max-width: 699px) {
  .res-body,
  .promo, .promo-a, .promo-b, .promo-c, .promo-d,
  .fig, .fig-ledger, .fig-panel, .fig-spine,
  .disclosure, .disclosure-set,
  .card, .rail-cta, .rail-square,
  .mission-rail, .mission-strip, .mission-wide,
  .ticks, .form-block, .band > .inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* A left edge that carries a colour keeps it: the bar is the point of the
     block, and 12px is measured from inside it. */
  .mission-strip { padding-left: 12px !important; }
  /* The figure's own rows inherit the new width rather than adding to it. */
  .fig .fig-rows, .fig figcaption { padding-left: 0; padding-right: 0; }
}

/* ==== 69. THE HOME PAGE MARGIN, TRIED AND REVERSED =======================

   On 29 August 2026 the owner asked for the home page to sit at 22 pixels on
   a phone rather than 12, so the white page would show between the coloured
   blocks. It was built, he looked at it, and his judgement was that 22 is too
   much. Reverted the same day.

   The section is left here as a record rather than deleted, because the next
   person to look at a phone will have the same thought I did, that coloured
   blocks want a frame around them. They were tried at 22 and they do not.
   The whole site is 12.
   ======================================================================== */


/* ==== 70. THE TEXT SIZE CONTROL =========================================

   Owner's instruction, 29 August 2026, revised the same evening against a
   reference he sent: a floating control for making the text larger and
   smaller, at the BOTTOM CENTRE, that shrinks to a single circle after a
   minute and opens again when it is pressed.

   WHERE IT SITS, AND WHY IT MOVED. It began in the bottom right corner. The
   owner is putting a chat bot there, so the corner is spoken for, and two
   floating things stacked in one corner is how a page starts to feel like a
   dashboard rather than something to read. The centre is also the honest
   place for it: a control that serves the whole column belongs under the
   whole column, not off to one side of it.

   IT DOES NOT COLLIDE WITH THE CONSENT PANEL. The panel sits in the bottom
   left and is at most 23rem wide; this is centred and, at its widest, well
   inside the middle of the page. It also sits below the panel in the stack,
   deliberately: the panel is a question that must be answered, and this is a
   convenience.

   WHY IT COLLAPSES. "We don't want to bother the reading." A control that is
   needed once and then stands there for the rest of the visit is furniture.
   After a minute with nothing pressed it folds down to one circle, which is
   enough to say the control exists and small enough to stop competing with
   the page. Pressing it opens the row again, and every press restarts the
   minute, so nobody is ever collapsed mid-decision.

   THE TARGET IS 44px on every button, the same floor the footer icons and
   the language switch hold to. The collapsed circle is 48.

   CONTRAST. Navy field, gold circles, navy glyphs inside them: 9.9 to 1 for
   the gold on navy, and the same pair inverted inside the circles. The spent
   state is a muted slate at 4.7 rather than a dimmed gold, which would fall
   under the floor and read as a broken button. It carries aria-disabled, so
   it is announced rather than merely looking different. */
.tsz{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:1rem;
  z-index:2147482000;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:.4rem;
  padding:.35rem .5rem;
  border:2px solid var(--gold);
  border-radius:999px;
  background:linear-gradient(180deg,#082556 0%,#04122C 100%);
  box-shadow:0 6px 20px rgba(4,18,44,.38);
  transition:padding 180ms ease,gap 180ms ease;
}
.tsz__b{
  display:flex;align-items:center;justify-content:center;gap:.05rem;
  width:44px;height:44px;min-width:44px;min-height:44px;
  padding:0;
  font-family:var(--font);
  line-height:1;
  color:#082556;
  background:var(--gold);
  border:0;
  border-radius:999px;
  cursor:pointer;
  transition:color 160ms ease,background-color 160ms ease;
}
/* Reset is the letter on its own, outlined rather than filled: it is the way
   back, not one of the two things a reader came here to do. Same circle as
   the other two, so the row is three of one shape rather than two and a pill. */
.tsz__b--reset{
  background:transparent;
  color:var(--gold);
  border:1px solid var(--gold);
}
.tsz__b:not([aria-disabled="true"]):hover,
.tsz__b:not([aria-disabled="true"]):focus-visible{
  background:#FFE070;color:#04122C;
}
.tsz__b--reset:not([aria-disabled="true"]):hover,
.tsz__b--reset:not([aria-disabled="true"]):focus-visible{
  background:rgba(252,198,0,.16);color:#FFFFFF;border-color:#FFFFFF;
}
.tsz__b:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.tsz__b[aria-disabled="true"]{background:#20365E;color:#8FA3C4;cursor:default}
.tsz__b--reset[aria-disabled="true"]{
  background:transparent;color:#8FA3C4;border-color:#4A5F86}
/* THE TWO LETTERS ARE FIXED IN PIXELS ON PURPOSE. Everything else on the page
   is written as its size times --ibc-tscale and grows when this control is
   used. A control that grew along with the text it is resizing would walk
   across the foot of the page as the reader pressed it. */
.tsz__a{font-size:16px;font-weight:700}
.tsz__a--s{font-size:13px}
.tsz__a--l{font-size:20px}
.tsz__sign{font-size:13px;font-weight:700;margin-left:1px}

/* ---- the folded state -------------------------------------------------
   One circle, and nothing else drawn. The row is not merely hidden: the
   buttons are removed from the tab order with the same attribute that hides
   them, so a keyboard reader tabs past one control rather than through four
   invisible ones. */
.tsz__open{
  display:none;
  align-items:center;justify-content:center;
  width:48px;height:48px;min-width:48px;min-height:48px;
  padding:0;
  font-family:var(--font);
  font-size:17px;font-weight:700;line-height:1;
  color:#082556;background:var(--gold);
  border:0;border-radius:999px;cursor:pointer;
  transition:background-color 160ms ease,color 160ms ease;
}
.tsz__open:hover,.tsz__open:focus-visible{background:#FFE070;color:#04122C}
.tsz__open:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.tsz--folded{padding:.2rem;gap:0}
.tsz--folded .tsz__b{display:none}
.tsz--folded .tsz__open{display:flex}

/* The reading is for a screen reader, not for the foot of the page. */
.tsz__live{
  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;
}
/* On a phone the row is tighter and the label goes, because the two letters
   say what the word says and the width is worth more than the word. */
@media (max-width:520px){
  .tsz{bottom:12px;gap:.3rem;padding:.3rem .35rem}
}
@media (prefers-reduced-motion:reduce){
  .tsz,.tsz__b,.tsz__open{transition:none}
}
/* ---- the desktop, where it is small and out of the way ----------------

   Owner's instruction, 29 August 2026: "reduce it in the desktop, it is very
   big, it is covering important text. Better to put it on the side above the
   bot icon, extreme right, about 80% of the fold."

   SO IT MOVES AND IT SHRINKS, and only on the desktop. A phone keeps the row
   across the bottom centre and keeps its 44px targets, because that is a
   thumb and 44 is the floor for a thumb. A desktop is a mouse, and a mouse
   does not need 44: WCAG 2.2 sets the minimum target at 24, so 30 is
   comfortably clear of it while being about two thirds smaller in area than
   the row it replaces.

   WHERE IT SITS. Hard against the right edge, its top at 80% of the window
   height, stacked upward: A+, then A, then A minus. The bottom right corner
   below it stays empty for the chat bot. It is on the edge rather than inset
   so it reads as page furniture rather than as something floating over the
   article, and at 34px wide it cannot cover a column of text that ends 100px
   short of it.

   IT STILL FOLDS after a minute, to one 34px circle, which is the smallest
   this gets. */
@media (min-width:961px){
  .tsz{
    left:auto;
    right:10px;
    bottom:auto;
    top:80vh;
    transform:none;
    flex-direction:column;
    gap:.2rem;
    padding:.25rem;
    border-width:1px;
    border-radius:22px;
    box-shadow:0 4px 14px rgba(4,18,44,.30);
  }
  .tsz__b{
    width:30px;height:30px;min-width:30px;min-height:30px;
    border-radius:999px;
  }
  .tsz__a{font-size:12px}
  .tsz__a--s{font-size:10px}
  .tsz__a--l{font-size:14px}
  .tsz__sign{font-size:10px;margin-left:0}
  .tsz__open{
    width:34px;height:34px;min-width:34px;min-height:34px;
    font-size:14px;
  }
  .tsz--folded{padding:.15rem}
}

/* Printed pages carry no controls. */
@media print{
  .tsz{display:none}
}
/* ==== 71. THE STEP CONNECTORS AND THE ENLARGED TEXT ======================

   Found by sweeping all 163 pages at every step of the text size control, 29
   August 2026. The home page ran 10px past the window at the largest size, in
   both languages, and nothing on it was wider than the window. The dash
   between the five cards was the whole of it.

   WHAT IS ACTUALLY WRONG. The connector is an absolutely positioned pseudo at
   right:-2.25rem, sitting in the grid gap and pointing at the next card. It is
   suppressed on the last child, which is correct while every card is on one
   row. The row is not fixed: the track is minmax(230px,1fr) and the gap is in
   rem, so the column count falls as the text grows. At 18px five cards make
   one row of five. At 24px they make four and one, and the fourth card, which
   is not the last child, draws a dash off the right hand edge of the grid.

   This was always latent. Any window narrow enough to give four columns would
   have done the same thing; the size control is only what found it.

   WHY THE CONNECTORS ARE DROPPED RATHER THAN CLIPPED. overflow on the grid
   would clip the numbered badges, which sit above the cards on purpose.
   overflow-x:clip with overflow-y:visible would not, but it is newer than the
   browsers this site supports. The dash means "and then", and it can only
   mean that along a row. At the sizes where the row cannot be relied upon, it
   is not drawn, and nothing is lost but an ornament.

   The selector is written as an exclusion so that a reader with JavaScript
   off, who has no data-textsize attribute at all, still sees them.

   The headings scale too as of the same day, so the row gets shorter still at
   the larger sizes and this rule matters more, not less. */
html[data-textsize="20"] .steps li::after,
html[data-textsize="22"] .steps li::after,
html[data-textsize="24"] .steps li::after{content:none}

/* ==== 72. THE RAIL BLOCKS ================================================

   Owner's instruction, 29 August 2026: the "On this page" block is to stand
   about a fifth taller, the block under it may be pushed down by that, and
   the question at the top of that block wants a more attractive colour.

   WHAT ACTUALLY DECIDES THAT HEIGHT, because my first two attempts changed
   nothing and I measured them both. Padding and list spacing do not: the
   block is a flex column inside .rail-sticky, which is itself capped to the
   sticky viewport, and the list inside the block is the flexible part that
   scrolls. The block was therefore 342px on every article regardless of how
   many headings it held, because 342 was simply what the column had left
   after the blocks under it took theirs. The number to move is the list's own
   minimum, and everything else follows from it.

   342 to 410 is the fifth that was asked for. The blocks under it start 68
   pixels lower, which the owner allowed in the same instruction. On a short
   screen the rail scrolls, as it already did.

   THE QUESTION IS GOLD, AND THE SELECTOR HAS TO SAY .rail-sticky.

   The colour painting that heading is written at .rail-sticky > .rail-cta h2
   with color:var(--paper)!important, so the ordinary .rail-cta h2 rule I
   wrote first changed nothing at all: measured, the heading was still white.
   It was white against three white sentences underneath, so the question did
   not read as the opening of anything.

   Gold measures 9.9 to 1 on this navy. The red from the Get Started button
   was the other candidate and it is not usable here: that red on this navy is
   far under the floor, and navy on that red is 2.48 to 1, which is the pair
   this site is forbidden to use anywhere. The typeface does not change.
   Georgia stays, one font, as settled. */
/* THE NUMBER THAT DECIDES IT IS 38vh, AND IT IS NOW 45.6vh.

   Three attempts went past this before I found it, and all three are worth
   recording because each looked reasonable. Padding and list spacing: no
   effect, the list scrolls inside a capped box. A minimum height on the list:
   no effect, the box clips it. Refusing to let the box shrink: no effect,
   for the same reason. The box carries max-height:38vh!important, written
   deliberately further up this file so that a long contents list cannot push
   the booking card off the bottom of the rail. 38 plus a fifth is 45.6, which
   is the whole of the change. Measured at a 900px window: 342 before, 410
   after, and the booking card starts 68 pixels lower, which is what was
   allowed for.

   Declared with !important because the rule it is raising is itself
   !important, for the reason given where it is written. */
.rail-sticky > .toc{max-height:45.6vh!important}
.rail-sticky > .rail-cta h2,
.rail-cta h2{
  color:var(--gold)!important;
  letter-spacing:-.01em;
}

/* ==== 73. THE PHONE MAY NOT BE MADE WIDER THAN THE PHONE ==================

   Owner, 29 August 2026, with a screenshot of the live site: the page drawn
   at about sixty per cent of the screen with grey beside it, still wrong
   after closing the menu and refreshing.

   WHAT THAT PICTURE IS. When something on a page is wider than the window,
   Safari does not simply add a sideways scrollbar the way a desktop browser
   does. It widens the layout viewport to fit the widest thing and scales the
   whole page down to suit, so one overflowing element shrinks everything: the
   header, the type, the images, all of it, and leaves the difference as empty
   background. It is one of the few faults that disfigures an entire site
   rather than one block of it.

   THIS IS A GUARD, NOT THE FIX. The fault behind that screenshot is the wide
   Resources panel being thrown half its own width off the left edge, and that
   is fixed at its source in nav.css section 31. This rule exists so the next
   element written a little too wide cannot do the same thing to the whole
   page again.

   FOUR COMBINATIONS WERE MEASURED, AND ONLY ONE IS BOTH SAFE AND EFFECTIVE.
   A 900px block was injected into a 390px page and the page was then asked to
   scroll sideways and then to scroll down:

     html{overflow-x:hidden}            scrolled to 500. No clamp at all.
     html,body{overflow-x:hidden}       clamped, and the sticky masthead came
                                        away from the top: measured at -1200
                                        after a 1200px scroll. It stops being
                                        a sticky header.
     html,body{overflow-x:clip}         clamped, and the masthead stayed at 0.
     clip plus max-width:100%           same, and states the intent.

   So clip, on both, and hidden is NOT used as a fallback: it would trade a
   fault nobody has for a broken header everybody would see. A browser too old
   for clip, which means Safari before 16, gets no guard and relies on the
   source fix and on the responsive check, which is how every other width
   fault on this site is caught anyway.

   IT IS NOT A LICENCE TO OVERFLOW. The responsive check still measures all
   163 pages at eleven widths and at every text size, and still fails the
   build on anything that runs past its box. This only stops a miss from
   disfiguring the whole page. */
@supports (overflow-x:clip){
  @media (max-width:960px){
    html,body{max-width:100%;overflow-x:clip}
  }
}