/* Red Stick Solutions, site.css
   Order is fixed: fonts, tokens, reset, layout, global components, page
   patterns, service skeleton, utilities, responsive, motion and forced colors.
   Do not reorder. No hex value appears outside the token block.
   v6 WP-0 (24 September 2026) added section 5c, the compact components of
   tools/PATTERN-V6.md, and the layout changes of Way Forward 9.3.
   Phase 1 of the merge (23 September 2026) added the components documented in
   tools/PATTERN.md. Every class named there is defined here. */

/* ---------- 0. FONTS, bundled locally, no network request ----------
   The brand faces. Source Serif 4 (400, 700) and Inter (400, 600, 700), both
   SIL Open Font License 1.1, pinned from the variable sources with fontTools
   and subset to Latin under assets/fonts/. Licenses ship beside them and the
   build is tools/build_fonts.py. No italic ships: the Source Serif 4 variable
   file carries no ital axis, so none is instanced and none is faked here.
   The serif bold file answers weights 600 and 700, as the stand in did. */
@font-face{font-family:"RSS Serif";src:url("fonts/rss-serif-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"RSS Serif";src:url("fonts/rss-serif-700.woff2") format("woff2");
  font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:"RSS Sans";src:url("fonts/rss-sans-400.woff2") format("woff2");
  font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"RSS Sans";src:url("fonts/rss-sans-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"RSS Sans";src:url("fonts/rss-sans-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

/* ---------- 1. TOKENS ---------- */
:root{
  --paper:#FAF8F3; --paper-2:#F3EFE7;
  --ink:#1A1D24; --ink-soft:#4A4F5C;
  --navy:#1B2D5B; --navy-soft:#3E5488;
  --red:#C8312A;
  --rule:#DCD5C7; --rule-2:#9C8F76;
  --focus:#1B2D5B; --errfg:#A3241E;
  --white:#FFFFFF;
  /* Alpha tones derived from the values above, for the photograph treatments
     and the table scroll hint. Kept here so no color literal sits elsewhere. */
  --navy-a:rgba(27,45,91,.34); --paper-a:rgba(250,248,243,.12);
  --shade:rgba(26,29,36,.16); --clear:rgba(250,248,243,0);
  /* The button on the navy closing band: cream with navy text, as Way Forward
     9.8 and C-128 specify. Red stays the one accent that carries meaning. */
  --band-btn-bg:var(--paper); --band-btn-fg:var(--navy);
  --serif:"RSS Serif",Georgia,"Times New Roman",serif;
  --sans:"RSS Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --measure:34rem;
}

/* ---------- 2. RESET AND BASE ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);
  font-size:19px;line-height:1.62;font-feature-settings:"kern" 1;
  /* Mentor final. An email address is one unbreakable word, and under text-only
     zoom at a narrow viewport it pushed the line past the viewport. It breaks
     instead. This affects nothing that already fits. */
  overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:underline;text-underline-offset:.16em;
  text-decoration-thickness:1px;
  /* Mentor final. An email address or a URL is one unbreakable word, and the
     links that carry one are inline-block so they can hold a 24px target, so
     they were sized to the whole word and pushed the line past a narrow
     viewport under text-only zoom. "anywhere" is the value that lets the word
     itself shrink. Nav links set white-space:nowrap and are unaffected. */
  overflow-wrap:anywhere}
a:hover{color:var(--red)}
/* Two ring focus indicator, from Site B in brand colors: a paper inner ring
   and a navy outer ring, so it reads on cream and against a navy control.
   Controls that sit ON a navy surface swap to a paper outline (below). */
:focus-visible{outline:2px solid var(--paper);outline-offset:0;
  box-shadow:0 0 0 2px var(--paper),0 0 0 5px var(--navy)}
.on-navy :focus-visible,.cta-blk :focus-visible,.skip:focus-visible{
  outline:3px solid var(--paper);outline-offset:2px;
  box-shadow:inset 0 0 0 1px var(--navy)}
h1,h2,h3,h4{color:var(--navy);letter-spacing:-.015em}
h1{font-size:clamp(2rem,4vw,2.85rem);line-height:1.14;font-weight:600;
  margin:0 0 1.5rem;max-width:20em}
h2{font-size:clamp(1.45rem,2.5vw,2.1rem);line-height:1.22;font-weight:600;
  margin:0 0 1rem;max-width:22em}
h3{font-size:1.22rem;font-weight:600;margin:0 0 .5rem;line-height:1.34}
h4{font-size:1.02rem;font-weight:600;margin:0 0 .4rem;font-family:var(--sans)}
p{margin:0 0 1.1rem;max-width:var(--measure)}
ul,ol{max-width:var(--measure)}
li{margin:0 0 .5rem}
strong{font-weight:600}
table{border-collapse:collapse;width:100%;font-size:.95rem}
caption{text-align:left}

/* ---------- 3. LAYOUT PRIMITIVES ---------- */
.wrap{max-width:70rem;margin:0 auto;padding:0 2.5rem}
.narrow{max-width:var(--measure)}
.grid{display:grid;gap:1.8rem 3rem;margin-top:1.8rem}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* A heading, paragraph or table that follows a card grid was flush against it. */
.grid+h3,.grid+p,.grid+.tbl-wrap,.card-grid+h3,.card-grid+p,.card-grid+.tbl-wrap{
  margin-top:2.4rem}

/* ---------- 4. GLOBAL COMPONENTS ---------- */
/* skip link */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:var(--paper);
  padding:.7rem 1.1rem;font-family:var(--sans);font-size:.9rem;z-index:50}
.skip:focus{left:.5rem;top:.5rem}

/* header. Static, not sticky. Brand lockup, Menu button (hidden until JS),
   eight item primary navigation with submenu disclosure buttons, the phone
   link and the Schedule a Discovery Call button. The button is never hidden:
   from 640px up it sits in the top row, below 640px it becomes a full width
   bar under the brand row, and the phone link is present at every width. */
.site-head{border-bottom:1px solid var(--rule);background:var(--paper)}
.head-in{display:flex;align-items:center;gap:1.2rem;padding:1.4rem 0;flex-wrap:wrap}
.brand{order:1;margin-right:auto;min-width:0}
.navtoggle{order:2}
.head-act{order:3}
nav.main{order:4;flex-basis:100%;border-top:1px solid var(--rule);margin-top:.2rem;
  padding-top:.15rem}
.brand{font-family:var(--serif);font-weight:700;font-size:1.2rem;color:var(--navy);
  text-decoration:none;letter-spacing:-.01em;line-height:1.2}
.brand span{display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;
  white-space:nowrap;
  text-transform:uppercase;color:var(--ink-soft);font-weight:500;margin-top:.3rem}

/* primary navigation */
nav.main ul{list-style:none;margin:0;padding:0;display:flex;gap:1.5rem;
  flex-wrap:wrap;max-width:none}
nav.main li{margin:0;position:relative}
nav.main a{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--navy);
  text-decoration:none;display:inline-block;padding:.55rem 0;min-height:24px;
  white-space:nowrap;border-bottom:2px solid transparent}
nav.main a:hover,nav.main a[aria-current]{color:var(--navy);
  border-bottom-color:var(--red)}
nav.main ul.sub{position:absolute;left:-.9rem;top:100%;display:none;flex-direction:column;
  gap:0;background:var(--white);border:1px solid var(--rule);padding:.5rem 0;
  min-width:17rem;z-index:40}
/* No-script fallback. Hover and focus open a submenu on a pointer device, and
   below 900px, or on any device without hover, the submenus render inline so
   every destination is reachable with scripting off. */
html:not(.js) nav.main ul.sub{position:static;display:flex;border:0;
  padding:.1rem 0 .5rem .9rem;min-width:0;background:none}
html:not(.js) nav.main>ul{flex-wrap:wrap}
html:not(.js) nav.main>ul>li{flex-basis:100%}
@media (min-width:901px) and (hover:hover) and (pointer:fine){
  html:not(.js) nav.main ul.sub{position:absolute;display:none;border:1px solid var(--rule);
    padding:.5rem 0;min-width:17rem;background:var(--white)}
  html:not(.js) nav.main>ul{flex-wrap:wrap}
  html:not(.js) nav.main>ul>li{flex-basis:auto}
}
nav.main>ul>li:nth-last-child(-n+2)>ul.sub{left:auto;right:-.9rem}
nav.main li.has-sub:hover>ul.sub,nav.main li.has-sub:focus-within>ul.sub{display:flex}
/* With script, the button is the control and it governs on every input type. */
.js nav.main li.has-sub:hover>ul.sub,
.js nav.main li.has-sub:focus-within>ul.sub{display:none}
.js nav.main li.has-sub.open>ul.sub{display:flex}
@media (hover:hover) and (pointer:fine){
  .js nav.main li.has-sub:hover>ul.sub{display:flex}
  .js nav.main li.has-sub.dismissed:hover>ul.sub{display:none}
}
.subtoggle{background:none;border:0;padding:.55rem .35rem;margin-left:.1rem;
  cursor:pointer;color:var(--ink-soft);min-height:24px;min-width:24px;
  display:none;align-items:center;line-height:1}
.js .subtoggle{display:inline-flex}
.subtoggle .chev{display:block;width:.42rem;height:.42rem;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-.08rem,-.08rem)}
.subtoggle[aria-expanded="true"] .chev{transform:rotate(-135deg) translate(-.12rem,-.12rem)}
.subtoggle:hover{color:var(--navy)}
nav.main ul.sub a{display:block;padding:.5rem 1.1rem;font-size:.86rem;min-height:24px;
  border-bottom:0}
nav.main ul.sub a:hover,nav.main ul.sub a[aria-current="page"]{background:var(--paper-2);
  color:var(--navy)}
/* Group label inside the Cybersecurity submenu (C-018). Not a link. */
nav.main ul.sub li.grp{font-family:var(--sans);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);padding:.6rem 1.1rem .15rem;
  font-weight:600}
nav.main ul.sub li.grp+li{margin:0}
.navtoggle{display:none;font-family:var(--sans);font-size:.82rem;background:none;
  border:1px solid var(--navy);color:var(--navy);padding:.5rem .9rem;cursor:pointer;
  min-height:24px}
.head-act{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.head-cta{font-family:var(--sans);font-size:.82rem;letter-spacing:.05em;
  text-transform:uppercase;border:1px solid var(--navy);padding:.62rem .95rem;
  background:none;color:var(--navy);text-decoration:none;
  white-space:nowrap;display:inline-block;font-weight:600}
.head-cta:hover{background:var(--navy);border-color:var(--navy);color:var(--paper)}
/* A-27: the phone is the route that works today and the one a senior buyer uses.
   The number is shown in full from 640px up and as "Call" below it, never hidden. */
.head-tel{font-family:var(--sans);font-size:.86rem;font-weight:600;color:var(--navy);
  text-decoration:none;white-space:nowrap;display:inline-block;padding:.35rem 0;
  min-height:24px;border-bottom:2px solid transparent}
.head-tel:hover{border-bottom-color:var(--red)}
.head-tel .tel-short{display:none}

/* breadcrumb */
.breadcrumb{border-bottom:1px solid var(--rule);background:var(--paper-2)}
.breadcrumb ol{list-style:none;margin:0;padding:.7rem 0;display:flex;flex-wrap:wrap;
  gap:.45rem;font-family:var(--sans);font-size:.78rem;max-width:none;
  justify-content:flex-start;align-items:center;text-align:left}
.breadcrumb li{margin:0;color:var(--ink-soft)}
.breadcrumb li+li::before{content:"/";margin-right:.45rem;color:var(--rule-2)}
.breadcrumb a{color:var(--navy);text-decoration:none;display:inline-block;
  padding:.25rem 0;min-height:24px}
.breadcrumb a:hover{text-decoration:underline}

/* footer: brand block, four link columns, legal row. Cream; the closing band
   above it is the one navy surface on a page. */
.site-foot{border-top:2px solid var(--navy);background:var(--paper-2);
  margin-top:0;padding:3rem 0 2rem;font-family:var(--sans);font-size:.86rem}
.foot-grid{display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:2rem}
.foot-grid>*{min-width:0}
.foot-brand{font-family:var(--serif);font-weight:700;font-size:1.05rem;color:var(--navy)}
.foot-tag{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-soft);margin:.3rem 0 1rem}
.site-foot p{margin:0 0 .4rem;max-width:none;line-height:1.55}
.foot-h{font-weight:600;color:var(--navy);margin:0 0 .7rem;font-size:.82rem}
.site-foot ul{list-style:none;margin:0;padding:0;max-width:none}
.site-foot li{margin:0 0 .45rem}
.site-foot a{color:var(--ink-soft);text-decoration:none;display:inline-block;
  padding:.25rem 0;min-height:24px}
.site-foot a:hover{color:var(--navy);text-decoration:underline}
.foot-entity,.foot-people{color:var(--ink-soft)}
.foot-print{margin-top:.6rem!important}
.foot-bot{border-top:1px solid var(--rule);margin-top:2.2rem;padding-top:1.2rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font-size:.8rem;color:var(--ink-soft);align-items:baseline}
.foot-bot>div:first-child{padding:.25rem 0}
.foot-bot a{color:var(--ink-soft)}

/* buttons. One navy button per screen; the secondary is an outline button;
   tertiaries are text links. .btn.primary is the Site A spelling and stays
   valid; new markup uses .btn-primary and .btn-secondary. */
.btns{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin:1.7rem 0 0}
.btn{font-family:var(--sans);font-size:.9rem;letter-spacing:.02em;font-weight:500;
  border:1px solid var(--navy);padding:.8rem 1.2rem;color:var(--navy);
  background:none;text-decoration:none;display:inline-block;min-height:44px;
  line-height:1.4;cursor:pointer}
.btn:hover{background:var(--navy);color:var(--paper)}
.btn.primary,.btn.btn-primary{background:var(--navy);color:var(--paper);font-weight:600}
.btn.primary:hover,.btn.btn-primary:hover{background:var(--ink);border-color:var(--ink);
  color:var(--paper)}
.btn.btn-secondary{background:none;color:var(--navy)}
.btn.btn-secondary:hover{background:var(--navy);color:var(--paper)}
.more{font-family:var(--sans);font-size:.83rem;font-weight:500;
  text-decoration:none;border-bottom:1px solid var(--red);
  display:inline-block;min-height:24px;padding:.2rem 0 1px}
.more:hover{color:var(--red)}
/* A .more link inside running prose inherits the prose face and size; the
   sans device is for standalone links that end a block (.after-list, li). */
p:not(.after-list)>a.more{font:inherit;border-bottom:0;text-decoration:underline;
  text-underline-offset:.16em;display:inline;min-height:0;padding:0}
p:not(.after-list)>a.more:hover{color:var(--red)}
.after-list a.more+a.more{margin-left:1.4rem}

/* trust line: under every primary and offer specific button and in every
   closing band. Small sans. .trustline is the Way Forward's spelling. */
.trust-line,.trustline{font-family:var(--sans);font-size:.84rem;line-height:1.6;
  color:var(--ink-soft);margin:1rem 0 0;max-width:40rem}
.trust-line a,.trustline a{color:inherit}
.nb{white-space:nowrap}

/* closing band: the one navy surface on a page. Cream text, red primary
   button, trust line in cream, phone and email in small type. */
.cta-blk{background:var(--navy);color:var(--paper);border-top:0;border-bottom:0}
.cta-blk h2,.cta-blk h3{color:var(--paper)}
.cta-blk p,.cta-blk .lead-p,.cta-blk .reassure{color:var(--paper)}
.cta-blk .reassure{font-family:var(--sans);font-size:.88rem;
  margin:1.2rem 0 0;max-width:38rem}
.cta-blk a{color:var(--paper)}
.cta-blk a:hover{color:var(--white)}
.cta-blk .btn{border-color:var(--paper);color:var(--paper)}
.cta-blk .btn:hover{background:var(--paper);color:var(--navy)}
.cta-blk .btn.primary,.cta-blk .btn.btn-primary{background:var(--band-btn-bg);
  color:var(--band-btn-fg);border-color:var(--band-btn-bg)}
.cta-blk .btn.primary:hover,.cta-blk .btn.btn-primary:hover{background:var(--paper);
  color:var(--navy);border-color:var(--paper)}
.cta-blk .more{border-bottom-color:var(--paper)}
.cta-blk .more:hover{color:var(--white)}
.cta-blk .trust-line,.cta-blk .trustline{color:var(--paper);opacity:.92}
.cta-blk .contact-line{font-family:var(--sans);font-size:.88rem;margin:1.2rem 0 0}

/* mid page call to action: cream band with a navy rule, one offer specific
   button, one tertiary link, one sentence. .midcta is the Way Forward's name. */
.cta-mid,.midcta{background:var(--paper-2);border-top:2px solid var(--navy);
  padding:1.6rem 1.6rem 1.5rem;margin:2.6rem 0;max-width:46rem}
.cta-mid .btns,.midcta .btns{margin:0 0 .9rem;align-items:center}
.cta-mid p,.midcta p{font-family:var(--sans);font-size:.9rem;color:var(--ink-soft);
  margin:0;max-width:40rem}
.cta-mid p+p,.midcta p+p{margin-top:.5rem}
.cta-mid .trust-line,.midcta .trust-line{margin-top:.8rem}

/* form. .field is the Phase 1 name, .fld is Site A's; both are valid. */
.rss-form{max-width:40rem}
.fld,.field{margin:0 0 1.3rem;padding-left:0;border-left:0}
.fld label,.field label{display:block;font-family:var(--sans);font-size:.85rem;font-weight:600;
  color:var(--navy);margin:0 0 .35rem}
.fld .req,.field .req{color:var(--errfg);font-weight:700}
.reqnote{font-family:var(--sans);font-size:.83rem;color:var(--ink-soft);margin:0 0 1.2rem}
.fld .hint,.field .hint{font-family:var(--sans);font-size:.8rem;color:var(--ink-soft);
  margin:0 0 .45rem;max-width:none;line-height:1.5}
.fld input,.fld select,.fld textarea,.field input,.field select,.field textarea{
  width:100%;font-family:var(--sans);font-size:.95rem;
  padding:.65rem .7rem;border:1px solid var(--rule-2);background:var(--white);
  color:var(--ink);min-height:44px}
.fld textarea,.field textarea{line-height:1.55;min-height:8rem}
/* inline validation. The error slot is empty and hidden until the browser's
   constraint check (surfaced by site.js) or the server fills it. */
.err{font-family:var(--sans);font-size:.85rem;color:var(--errfg);margin:.4rem 0 0;
  max-width:none;font-weight:600}
.fld [aria-invalid="true"],.field [aria-invalid="true"]{border:2px solid var(--errfg)}
.field.is-invalid,.fld.is-invalid{border-left:3px solid var(--errfg);padding-left:.9rem}
.err-summary,.form-errors{border-left:3px solid var(--errfg);background:var(--paper-2);
  padding:.9rem 1.1rem;margin:0 0 1.5rem;max-width:40rem;font-family:var(--sans);
  font-size:.9rem}
.err-summary p,.form-errors p{margin:0 0 .5rem;font-weight:600;color:var(--errfg);
  max-width:none}
.err-summary ul,.form-errors ul{margin:0;padding-left:1.2rem;max-width:none}
.err-summary li,.form-errors li{margin:0 0 .3rem}
.err-summary a,.form-errors a{color:var(--navy)}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.5rem}
button.sub{font-family:var(--sans);font-size:.9rem;letter-spacing:.03em;font-weight:600;
  background:var(--navy);color:var(--paper);border:1px solid var(--navy);
  padding:.85rem 1.5rem;cursor:pointer;min-height:44px}
button.sub:hover{background:var(--ink);border-color:var(--ink)}
button.sub[disabled]{opacity:.7;cursor:default}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{font-family:var(--sans);font-size:.85rem;background:var(--paper-2);
  border-left:3px solid var(--red);padding:.9rem 1.1rem;margin:0 0 1.5rem;
  max-width:40rem;line-height:1.55}
.privnote{font-family:var(--sans);font-size:.83rem;color:var(--ink-soft);
  margin:0 0 1.3rem;max-width:40rem;line-height:1.55}
.who-reads{font-family:var(--sans);font-size:.85rem;color:var(--ink-soft);
  border-top:1px solid var(--rule);padding-top:1rem;margin:1.6rem 0 0;max-width:40rem;
  line-height:1.6}
.commit,.fee{border-left:3px solid var(--navy);padding:.2rem 0 .2rem 1.2rem;
  margin:0 0 2rem;max-width:38rem}
/* Contact page: form beside a "What to tell us" column from 900px up. */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:3rem 4rem;align-items:start;margin-top:2rem}
.contact-grid>*{min-width:0}

/* figures. A diagram is inline SVG inside a labelled wrapper. The SVG scales
   to its column, no min-width anywhere, so a hero figure never clips. Type in
   a diagram is 16 to 18 units on its viewBox. A figure that needs a second
   drawing for phones carries two SVGs, .wide and .narrow, switched below
   640px, and inside the hero column by the container query in section 5. A legacy drawing that cannot yet be redrawn may opt into a scroll
   region with .fig.scroll until Phase 2 redraws it. */
.figure{margin:1.8rem 0;max-width:46rem;min-width:0}
.hero-fig{min-width:0}
.hero-fig .figure{margin:0;max-width:none}
.fig{overflow:hidden;border:1px solid var(--rule);background:var(--white);
  padding:1.6rem 1.2rem;color:var(--navy)}
.fig svg{display:block;width:100%;height:auto;min-width:0;max-width:100%}
.fig svg text{font-family:var(--sans)}
.fig svg.narrow{display:none}
.fig.scroll{overflow-x:auto}
.fig.scroll svg{min-width:560px}
.fig .acc{color:var(--red);stroke:var(--red)}
.fig svg .knock{fill:var(--white)}
.fig{scroll-margin-top:1rem}
section[id],h2[id],h3[id]{scroll-margin-top:1.5rem}
/* A-17: contents list on a long page. */
.onpage{border-bottom:1px solid var(--rule);background:var(--paper-2);
  padding:1.2rem 0}
.onpage .onpage-h{font-family:var(--sans);font-size:.74rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin:0 0 .8rem}
.onpage ul{list-style:none;margin:0;padding:0;max-width:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem 2rem}
.onpage li{margin:0}
.onpage a{font-family:var(--sans);font-size:.88rem;color:var(--navy);
  text-decoration:none;display:inline-block;padding:.2rem 0;min-height:24px}
.onpage a:hover{color:var(--red);text-decoration:underline}
figcaption{font-family:var(--sans);font-size:.83rem;color:var(--ink-soft);
  margin-top:.7rem;line-height:1.55}
/* R-102: the contents list becomes a sticky right column from 1100px up.
   Markup: div.has-contents holds nav.onpage first and div.contents-body
   second, so below 1100px the list still comes first as a band. */
@media (min-width:1100px){
  .has-contents{display:grid;grid-template-columns:minmax(0,1fr) 15rem;
    column-gap:3rem;max-width:70rem;margin:0 auto;padding:0 2.5rem}
  .has-contents>.contents-body{grid-column:1;grid-row:1;min-width:0}
  .has-contents>.contents-body>section.blk>.wrap{max-width:none;padding:0}
  .has-contents>.onpage{grid-column:2;grid-row:1;align-self:start;position:sticky;
    top:1.5rem;max-height:calc(100vh - 3rem);overflow:auto;background:none;
    border:0;border-left:1px solid var(--rule);padding:2.6rem 0 1rem 1.2rem}
  .has-contents>.onpage>.wrap{max-width:none;padding:0}
  .has-contents>.onpage ul{grid-template-columns:minmax(0,1fr);gap:.1rem}
  .has-contents>.onpage a{font-size:.84rem}
}
.hero.hero-tight{padding:2.6rem 0 2rem}

/* photographs. CC0, served locally, no people. The treatment is applied in
   CSS: the image is desaturated and blended onto a navy (.duotone) or cream
   (.tint) backdrop inside .ph, and a navy veil deepens the duotone. Hidden in
   print. .desk-only hides the figure below 640px (industry heroes). */
figure.photo{margin:2.2rem 0;max-width:46rem}
figure.photo .ph{position:relative;border-radius:0;overflow:hidden;isolation:isolate;
  border:1px solid var(--rule);background:var(--paper-2)}
figure.photo img{display:block;width:100%;height:auto;border-radius:0}
figure.photo.duotone .ph{background:var(--navy);border-color:var(--navy)}
figure.photo.duotone img{filter:grayscale(1) contrast(1.08) brightness(1.02);
  mix-blend-mode:luminosity}
figure.photo.duotone .ph::after{content:"";position:absolute;inset:0;
  background:var(--navy-a);mix-blend-mode:multiply;pointer-events:none}
figure.photo.tint .ph{background:var(--paper-2)}
figure.photo.tint img{filter:grayscale(1) contrast(1.02) brightness(1.04);
  mix-blend-mode:multiply;opacity:.94}
figure.photo.tint .ph::after{content:"";position:absolute;inset:0;
  background:var(--paper-a);pointer-events:none}
figure.photo.small{max-width:34rem}
.hero-fig figure.photo{margin:0;max-width:none}
figure.photo.hero-photo img{aspect-ratio:4/3;object-fit:cover}

/* tables. Every table sits in .tbl-wrap, a labelled scroll region with a
   shaded edge that signals more columns. A .tbl-wrap.stack renders each row as
   a labelled block below 640px, reading its labels from data-label on each td
   (Phase 2 adds data-label to every td of a stacked table). */
.tbl-wrap{overflow-x:auto;margin:1.2rem 0 1.6rem;border:1px solid var(--rule);
  background:
    linear-gradient(to right,var(--white) 30%,var(--clear)),
    linear-gradient(to left,var(--white) 30%,var(--clear)) 100% 0,
    radial-gradient(farthest-side at 0 50%,var(--shade),var(--clear)),
    radial-gradient(farthest-side at 100% 50%,var(--shade),var(--clear)) 100% 0;
  background-color:var(--white);
  background-repeat:no-repeat;background-size:40px 100%,40px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll}
th,td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--rule);
  vertical-align:top}
thead th{font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--navy);
  background:var(--paper-2);border-bottom:2px solid var(--rule-2)}
tbody th{font-weight:600;color:var(--navy)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}

/* details. Native disclosure with a plus or minus marker. */
.details-block{margin:1.6rem 0 2rem;max-width:44rem}
details{border-top:1px solid var(--rule);padding:.2rem 0}
details:last-child{border-bottom:1px solid var(--rule)}
summary{font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--navy);
  cursor:pointer;padding:.85rem 0 .85rem 1.6rem;position:relative;list-style:none;
  min-height:24px}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";position:absolute;left:0;top:.8rem;color:var(--red);
  font-weight:700;font-size:1.05rem;line-height:1.2}
details[open] summary::before{content:"\2212"}
details p,details ul{margin-bottom:.9rem}
details>*:not(summary){margin-left:1.6rem}
/* collapsed instrument block: a regulatory citation folded behind its name.
   Body content is the .instrument pattern. Opens in print. */
details.inst{border:1px solid var(--rule);border-left:3px solid var(--navy);
  padding:0 1.2rem;margin:1.2rem 0;max-width:44rem;background:var(--white)}
details.inst+details.inst{margin-top:.8rem}
details.inst:last-child{border-bottom:1px solid var(--rule)}
details.inst summary{font-size:.9rem;padding-left:1.4rem;line-height:1.45}
details.inst summary::before{top:.85rem}
details.inst>*:not(summary){margin-left:0}
details.inst .instrument{border-left:0;padding-left:0;margin:.2rem 0 1rem}
details.inst .src{margin-bottom:1rem}
/* common questions */
.faq{margin:1.6rem 0 2rem;max-width:44rem}
.faq summary{font-family:var(--serif);font-size:1.05rem;line-height:1.4}
.faq details p{font-size:.97rem}

/* ---------- 5. PAGE PATTERNS ---------- */
/* hero: eyebrow, h1, one lead paragraph, two buttons, trust line; right column
   figure that scales to its column and stacks below 900px. */
.hero{padding:3.4rem 0 2.8rem;border-bottom:1px solid var(--rule)}
.hero .lead{font-size:1.14rem;line-height:1.6;color:var(--ink);max-width:36rem;
  margin:0 0 1.1rem}
.hero .sub{font-size:1rem;color:var(--ink);max-width:34rem;margin:0 0 1.6rem;
  border-left:3px solid var(--red);padding-left:1.1rem;background:none}
.hero .btns{margin-top:1.9rem}
.hero .trust-line,.hero .trustline{margin-top:1.2rem}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:3rem;align-items:center}
.hero-grid>*{min-width:0}
/* Hero figure: show the stacked drawing whenever the wide one would render
   under 13 CSS pixels. The wide drawing needs about 520px for that, so the
   column (padding included) needs 560px. Between 641 and 900 the hero is one
   column and the wide drawing renders at 13.7px or more; below 641 the media
   query already shows the narrow one. The cap keeps the narrow drawing near
   17.6px type at every width. */
.hero-fig{container-type:inline-size}
.hero-fig .fig svg.narrow{max-width:22rem;margin:0 auto}
@container (max-width:560px){
  .hero-fig .fig svg.wide{display:none}
  .hero-fig .fig svg.narrow{display:block}
}
.eyebrow{font-family:var(--sans);font-size:.73rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);margin:0 0 .85rem}
section.blk{padding:2.2rem 0;border-bottom:1px solid var(--rule)}
section.blk:last-of-type{border-bottom:0}
.lead-p{font-size:1.06rem;color:var(--ink-soft);max-width:36rem}
.card{border-top:2px solid var(--navy);padding-top:.9rem}
.card p{font-size:.97rem;color:var(--ink-soft);max-width:none}
.card h3,.card h4{margin-bottom:.45rem}
/* A-15: a card inside a named group is a member of it, not a sibling. */
.card h4{font-family:var(--serif);font-size:1.22rem;font-weight:600;line-height:1.34}
/* numbered card grid, from Site B: index numeral in the sans face, hidden
   from assistive technology in the markup. Two or three columns, stacking. */
.card-grid{display:grid;gap:1.8rem 3rem;margin-top:1.8rem}
.card-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card-grid>*{min-width:0}
.card .num{display:block;font-family:var(--sans);font-size:.78rem;font-weight:700;
  letter-spacing:.12em;color:var(--red);margin:0 0 .6rem}
.card .after-list{margin-top:.6rem}
.pts{padding-left:0;list-style:none;max-width:38rem}
.pts li{padding-left:1.5rem;position:relative;margin-bottom:.9rem}
.pts li::before{content:"";position:absolute;left:0;top:.62em;width:.6rem;height:2px;
  background:var(--red)}
.steps{list-style:none;padding-left:0;counter-reset:s;max-width:38rem}
.steps li{counter-increment:s;padding-left:2.4rem;position:relative;margin-bottom:1.2rem}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;
  font-family:var(--sans);font-size:.82rem;font-weight:700;color:var(--red);
  border:1px solid var(--rule-2);width:1.7rem;height:1.7rem;display:flex;
  align-items:center;justify-content:center}
.leaders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem;
  margin-top:2rem}
.leaders>*,.grid>*{min-width:0}
.leader{border-top:2px solid var(--navy);padding-top:.9rem}
.leader .nm{font-weight:700;color:var(--navy);font-size:1.1rem}
.leader .ttl{font-family:var(--sans);font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);margin:.2rem 0 .7rem}
.art-list{margin-top:2rem;border-top:1px solid var(--rule)}
.art{padding:1.5rem 0;border-bottom:1px solid var(--rule)}
.art .cat{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--red);margin-bottom:.4rem}
.art h3{margin-bottom:.4rem}
.art h3 a{text-decoration:none}
.art h3 a:hover,.art h3 a:focus-visible{color:var(--red);text-decoration:underline}
.art p{font-size:.97rem;color:var(--ink-soft);margin-bottom:.4rem}
.art .by{font-family:var(--sans);font-size:.8rem;color:var(--ink-soft)}
.instrument{border-left:3px solid var(--navy);padding:.1rem 0 .1rem 1.2rem;
  margin:1.5rem 0;max-width:38rem}
.instrument .nm{font-family:var(--sans);font-size:.83rem;font-weight:600;
  color:var(--navy);letter-spacing:.02em;margin:0 0 .35rem}
.instrument p{font-size:.97rem;margin-bottom:.55rem}
.instrument .scope{font-family:var(--sans);font-size:.95rem;color:var(--ink);
  margin:0}
.instrument .scope::before{content:"Who it reaches: ";font-weight:700;
  color:var(--navy)}
.instrument .src{margin:.55rem 0 0}
.instrument h2.nm,.instrument h3.nm,.instrument h4.nm,.instrument h5.nm,
.instrument h6.nm{font-family:var(--sans);font-size:.83rem;font-weight:600;
  color:var(--navy);letter-spacing:.02em;margin:0 0 .35rem;line-height:1.4;
  max-width:none}
.leader h2.nm,.leader h3.nm,.leader h4.nm,.leader h5.nm,.leader h6.nm{
  font-family:var(--serif);font-weight:700;color:var(--navy);font-size:1.1rem;
  margin:0;line-height:1.3}
.deliverable{border-top:2px solid var(--red);padding-top:.9rem}
.deliverable h3{font-size:1.08rem}
.deliverable p{font-size:.96rem;color:var(--ink-soft);max-width:none}
.calendar{margin:1.6rem 0 2rem}
.limits,.stops{background:var(--paper-2);border-left:3px solid var(--rule-2);
  padding:1.2rem 1.4rem;margin:2rem 0;max-width:40rem}
.limits h3,.stops h3{font-family:var(--sans);font-size:.88rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.6rem}
.limits p,.limits li,.stops p,.stops li{font-size:.95rem;margin-bottom:.55rem}
.limits :last-child,.stops :last-child{margin-bottom:0}
.pullquote{font-size:1.16rem;line-height:1.5;color:var(--navy);border-left:3px solid var(--red);
  padding-left:1.3rem;margin:2rem 0;max-width:38rem}
.after-list{margin-top:1.6rem}
.meta-line{font-family:var(--sans);font-size:.82rem;color:var(--ink-soft);
  margin:0 0 2rem}
/* article summary under the byline, and the sources list at the end */
.summary{border-left:3px solid var(--navy);padding:.15rem 0 .15rem 1.1rem;
  margin:0 0 2.2rem;max-width:36rem;font-size:1.04rem;line-height:1.6;color:var(--ink-soft)}
.summary p{max-width:none;margin:0}
.summary p+p{margin-top:.6rem}
.sources-list{font-family:var(--sans);font-size:.88rem;line-height:1.55;
  padding-left:1.3rem;max-width:40rem;margin:1.2rem 0 2rem}
.sources-list li{margin:0 0 .6rem}
.sources-list .when{color:var(--ink-soft)}

.src a,.art h3 a,.after-list a,.details-block a,td>a:only-child,th>a:only-child{
  display:inline-block;min-height:24px}
.src{font-family:var(--sans);font-size:.8rem;color:var(--ink-soft);margin:.4rem 0 0}

/* ---------- 5b. SERVICE PAGE SKELETON ----------
   Section order on a service page: hero; use it when; what you receive;
   mid page call to action; how it runs; what it needs from you; where the
   firm stops; common questions; the fee; closing band. Instrument blocks sit
   collapsed (details.inst) where the page answers to them. */
ul.use-when{list-style:none;padding:0;margin:1.8rem 0 0;max-width:none;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem 2.4rem}
ul.use-when li{margin:0;border-top:2px solid var(--navy);padding-top:.8rem;
  font-size:.97rem;color:var(--ink-soft)}
ul.use-when li strong{display:block;font-family:var(--sans);font-size:.86rem;
  color:var(--navy);margin-bottom:.35rem;letter-spacing:.01em}
ul.receive{list-style:none;padding:0;margin:1.8rem 0 0;max-width:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 2.4rem}
ul.receive li{margin:0;border-top:1px solid var(--rule);padding-top:.8rem;
  font-size:.96rem;color:var(--ink-soft)}
ul.receive li strong{display:block;font-family:var(--serif);font-size:1.08rem;
  font-weight:600;color:var(--navy);margin-bottom:.35rem}
ul.needs{padding-left:0;list-style:none;max-width:38rem}
ul.needs li{padding-left:1.5rem;position:relative;margin-bottom:.9rem}
ul.needs li::before{content:"";position:absolute;left:0;top:.62em;width:.6rem;height:2px;
  background:var(--red)}

/* ---------- 5c. COMPACT COMPONENTS (v6, WP-0) ----------
   The components that let a page say the same thing in fewer words (Way
   Forward 9.3, review 05). Tokens only, no hex. Every one renders, reads and
   prints with scripting off. Copy and paste markup is in tools/PATTERN-V6.md;
   the rendered sheet is tools/pattern-v6-test.html. */

/* Icons. One inline sprite per page, written by tools/apply_chrome.py after
   <body>; each icon is <svg class="ico"><use href="#i-name"/></svg>, decorative
   and hidden from assistive technology, because the words beside it carry the
   meaning. Original drawings on a 24 unit grid, stroke only, currentColor:
   red on cream, cream on the navy band, CanvasText in forced colors. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1.25rem;height:1.25rem;flex:none;color:var(--red);fill:none;
  stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico-navy{color:var(--navy)}

/* 1. Fact row: label and value pairs in a description list. Fee rows, key
   facts and any paragraph that is really a set of attributes. */
.facts{margin:1.4rem 0 1.2rem;max-width:44rem;padding:0}
.facts>div{display:grid;grid-template-columns:10rem minmax(0,1fr);gap:0 1.4rem;
  padding:.55rem 0;border-top:1px solid var(--rule)}
.facts>div:last-child{border-bottom:1px solid var(--rule)}
.facts dt{font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--navy);
  letter-spacing:.02em;padding-top:.18rem}
.facts dd{margin:0;font-size:.97rem;color:var(--ink)}
.facts a{display:inline-block;min-height:24px}
.facts-note{font-family:var(--sans);font-size:.84rem;color:var(--ink-soft);margin:0 0 1.4rem}

/* 2. Key facts panel ("At a glance", V-065): the fact row in the hero's right
   column, or under the buttons where the hero already has a figure. */
.keyfacts{background:var(--white);border:1px solid var(--rule);border-top:3px solid var(--navy);
  padding:1.1rem 1.3rem 1rem}
.keyfacts-h{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 .4rem}
.keyfacts .facts{margin:0;max-width:none}
.keyfacts .facts>div{grid-template-columns:7.5rem minmax(0,1fr)}
.keyfacts .facts>div:last-child{border-bottom:0}
.keyfacts .facts dd{font-size:.93rem}
.hero-text .keyfacts{margin-top:1.6rem;max-width:36rem}

/* 3. Comparison grid: a table whose first column names the question and whose
   other columns are the things compared. Builds on .tbl-wrap; a grid of four
   or more columns also carries .stack. is-key is retained in source markup;
   all columns use the standard table rules. No glyphs in cells: Yes, No, or an icon. */
.cmp tbody th{background:var(--paper-2);font-family:var(--sans);font-size:.84rem;width:11rem}
.cmp td{font-size:.93rem}
.cmp .is-key{box-shadow:none}

/* 4. Icon list: a short line per item, the icon doing the work a bold lead in
   phrase used to do. .c2 sets two columns from 900px up. */
.ilist{list-style:none;padding:0;margin:1.4rem 0;max-width:44rem;display:grid;gap:.7rem}
.ilist.c2{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 2rem;max-width:none}
.ilist li{display:flex;gap:.7rem;align-items:flex-start;margin:0;font-size:.97rem}
.ilist li .ico{margin-top:.18rem}
.ilist strong{color:var(--navy)}
.cta-blk .ilist .ico{color:var(--paper)}
.cta-blk .ilist{font-family:var(--sans);font-size:.9rem}

/* 5. Step strip: a label and one clause per step, in a row on a wide screen
   and a column on a phone. The number is a CSS counter, so an ordered list
   stays an ordered list. .is-sign marks the principal sign off step. */
.strip{list-style:none;padding:0;margin:1.6rem 0;max-width:none;counter-reset:s;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:1.2rem 0}
.strip li{counter-increment:s;margin:0;padding:2.5rem 1.4rem 0 0;position:relative;
  font-size:.93rem;line-height:1.5;color:var(--ink-soft)}
.strip li::before{content:counter(s);position:absolute;left:0;top:0;z-index:1;
  width:1.8rem;height:1.8rem;display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:.82rem;font-weight:700;color:var(--red);
  background:var(--paper);border:1px solid var(--rule-2)}
.strip li::after{content:"";position:absolute;left:1.8rem;right:0;top:.9rem;height:1px;
  background:var(--rule-2)}
.strip li:last-child::after{display:none}
.strip li.is-sign::before{border:2px solid var(--red)}
.strip strong{display:block;font-family:var(--sans);font-size:.86rem;color:var(--navy);
  margin-bottom:.2rem}

/* 6. Scope table: Included and Not included, per subject. A subject with
   nothing included says Nothing, never a dash. */
.scope td{font-size:.93rem}
.scope td .ico{width:1.05rem;height:1.05rem;vertical-align:-.18rem;margin-right:.35rem}
.scope td.no .ico{color:var(--ink-soft)}
.scope tbody th{font-family:var(--sans);font-size:.84rem;width:9rem}

/* 7. Short form reference (V-015): the instrument named and linked to its one
   full treatment, at most one line on why it is on this page, and labeled
   fields (Reaches, Not, Clock, Exempt). Written by the build from
   instruments.json. Visible, never collapsed (V-019). */
.refs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.6rem;
  margin:1.4rem 0;max-width:none}
.ref{border:1px solid var(--rule);border-left:3px solid var(--navy);background:var(--white);
  padding:.8rem 1rem .7rem;min-width:0;max-width:44rem}
.refs>.ref{max-width:none}
.ref-nm{font-family:var(--sans);font-size:.84rem;font-weight:600;margin:0 0 .3rem;
  line-height:1.4;max-width:none}
.ref-nm a{text-decoration:none;display:inline-block;min-height:24px}
.ref-nm a:hover{text-decoration:underline}
.ref-why{font-size:.93rem;margin:0 0 .45rem;max-width:none}
.ref-scope{margin:0;font-family:var(--sans);font-size:.8rem;line-height:1.5;color:var(--ink-soft)}
.ref-scope>div{display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:0 .6rem;
  padding:.2rem 0;border-top:1px solid var(--rule)}
.ref-scope dt{font-weight:600;color:var(--navy)}
.ref-scope dd{margin:0}
/* the same short forms as one table where a page cites three or more (V-020) */
.refs-table td{font-size:.9rem}
.refs-table .ref-f{display:block;font-family:var(--sans);font-size:.82rem;line-height:1.5;
  color:var(--ink-soft)}
.refs-table .ref-f+.ref-f{margin-top:.25rem}
.refs-table .ref-f b{color:var(--navy);font-weight:600}

/* 8. Accordion group (D7): native details sharing a name, so one is open at a
   time where the browser supports it and all can open where it does not. No
   script. Every panel prints open. */
.group{margin:1.4rem 0 2rem;max-width:44rem}
.group summary{font-family:var(--serif);font-size:1.05rem}
.group details[open]>summary{color:var(--red)}

/* 9. Before you sign (V-075): two columns, question and answer; a two column
   table does not stack on a phone. */
.bys{max-width:46rem}
.bys tbody th{font-family:var(--sans);font-size:.84rem;width:10rem;background:var(--paper-2)}
.bys td{font-size:.93rem}

/* 10. Chip rows: the nine decision words (V-078) and any short set of terms.
   Text, not a drawing, so it is counted, printed and read aloud. */
.chips{list-style:none;padding:0;margin:1.2rem 0 .6rem;display:flex;flex-wrap:wrap;gap:.45rem;
  max-width:none}
.chips li{margin:0;font-family:var(--sans);font-size:.84rem;font-weight:600;color:var(--navy);
  background:var(--white);border:1px solid var(--rule-2);border-radius:999px;padding:.28rem .8rem}
.chips-note{font-family:var(--sans);font-size:.88rem;color:var(--ink-soft);margin:0 0 1.4rem;
  max-width:44rem}

/* 11. Trigger word chips (V-105) lead each clock row. Shape and label carry
   the meaning, never color alone: open circle detection, half circle
   identification, square discovery, diamond reasonable belief, filled circle
   determination, triangle payment. */
.tw{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--sans);font-size:.72rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);
  border:1px solid var(--navy);border-radius:999px;padding:.1rem .55rem .1rem .45rem;
  margin:0 .35rem .25rem 0;background:var(--white);white-space:nowrap;vertical-align:.08em}
.tw::before{content:"";display:inline-block;width:.62rem;height:.62rem;flex:none;
  border:1.5px solid currentColor;box-sizing:border-box}
.tw-detection::before{border-radius:50%}
.tw-identification::before{border-radius:50%;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.tw-discovery::before{border-radius:0}
.tw-reasonable-belief::before{transform:rotate(45deg) scale(.85)}
.tw-determination::before{border-radius:50%;background:currentColor}
.tw-payment::before{border:0;width:0;height:0;border-left:.36rem solid transparent;
  border-right:.36rem solid transparent;border-bottom:.62rem solid currentColor}
.clocks td .tw{display:inline-flex}

/* 12. Library blocks: access, independence, the counsel boundary, the
   identity line in the closing band. */
.access{border-left:3px solid var(--navy);padding:.1rem 0 .1rem 1.2rem;margin:1.6rem 0;max-width:44rem}
.access-h{font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 .2rem}
.access .ilist{margin:.6rem 0}
.indep p{max-width:38rem}
.boundary{display:flex;gap:.6rem;align-items:flex-start;font-family:var(--sans);font-size:.88rem;
  color:var(--ink-soft);margin:1.2rem 0 0;max-width:44rem}
.boundary .ico{margin-top:.1rem}
.identity-line{font-family:var(--sans);font-size:.84rem;line-height:1.6;color:var(--ink-soft);
  margin:1rem 0 0;max-width:40rem}
.cta-blk .identity-line{color:var(--paper);opacity:.92}
.cta-blk .reassure+.identity-line{margin-top:.9rem}

/* A visible table caption (v6 components) reads as the table's label; v5
   captions are all visually hidden and are not affected. */
.tbl-wrap caption:not(.vh){font-family:var(--sans);font-size:.8rem;font-weight:600;
  color:var(--ink-soft);letter-spacing:.02em;padding:.6rem .9rem;background:var(--white);
  border-bottom:1px solid var(--rule)}
/* fee rows and fact rows inside the navy closing band */
.cta-blk .facts{max-width:40rem}
.cta-blk .facts>div{border-color:var(--navy-soft)}
.cta-blk .facts dt,.cta-blk .facts dd,.cta-blk .facts-note{color:var(--paper)}
.cta-blk .facts-note a{color:var(--paper)}

/* 13. Two column section (V-090): from 1100px up, the eyebrow and heading sit
   in a left column of a third and the content in the right two thirds, at the
   same reading measure. Below 1100px it is an ordinary section. */
.split-head>:last-child{margin-bottom:0}
@media (min-width:1100px){
  .split>.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:0 3rem;
    align-items:start}
  .split-head h2{font-size:1.55rem}
  .split-body{min-width:0}
  .split-body>:first-child{margin-top:0}
  .has-contents .split>.wrap{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:0 2rem}
}

/* 14. Contents chip row (V-089): below 1100px the On this page list is one
   line of chips that scrolls sideways inside itself, not a band of links
   500 to 700 pixels tall. From 1100px it stays the sticky right column. */
@media (max-width:1099px){
  .onpage{padding:.8rem 0}
  .onpage .onpage-h{margin:0 0 .45rem}
  .onpage ul{display:flex;flex-wrap:nowrap;gap:.45rem;overflow-x:auto;
    padding:0 0 .35rem;grid-template-columns:none;scrollbar-width:thin}
  .onpage li{flex:none}
  .onpage a{white-space:nowrap;border:1px solid var(--rule-2);border-radius:999px;
    background:var(--white);padding:.3rem .8rem;font-size:.84rem;min-height:24px}
}

@media (max-width:900px){
  .refs,.ilist.c2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .facts>div,.keyfacts .facts>div{grid-template-columns:minmax(0,1fr)}
  .facts dt{padding-top:0}
  .strip{grid-template-columns:minmax(0,1fr);gap:0}
  .strip li{padding:0 0 1.1rem 2.7rem}
  .strip li::after{left:.9rem;right:auto;top:1.8rem;bottom:0;width:1px;height:auto}
  .cmp tbody th,.scope tbody th,.bys tbody th{width:auto}
  .bys tbody th{width:36%}
  .ref-scope>div{grid-template-columns:minmax(0,1fr)}
  .tbl-wrap.stack caption:not(.vh){display:block;width:100%}
}
@media (forced-colors:active){
  .keyfacts,.ref,.access,.chips li,.tw{border-color:CanvasText}
  .ico{color:CanvasText}
  .strip li::before{border-color:CanvasText}
  .strip li::after{background:CanvasText}
  .tw::before{border-color:CanvasText}
  .tw-determination::before,.tw-identification::before{background:CanvasText}
  .tw-payment::before{border-bottom-color:CanvasText;background:none}
}

/* ---------- 6. UTILITIES ---------- */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}

/* ---------- 7. RESPONSIVE ---------- */
@media (max-width:900px){
  .wrap{padding:0 1.6rem}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  .grid.c3,.card-grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8rem}
  .foot-id{grid-column:1 / -1}
  .contact-grid{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  .contact-grid>.form-col{order:-1}
  .subtoggle{padding:.75rem 1rem;min-width:44px;min-height:44px}
  nav.main>ul>li.has-sub>a{padding-right:.5rem}
  .navtoggle{padding:.65rem .9rem}
  .head-in{align-items:center;flex-wrap:wrap}
  .head-act{gap:.7rem}
  .onpage ul{grid-template-columns:minmax(0,1fr)}
  nav.main{border-top:0;margin-top:0;padding-top:0}
  /* The collapse applies only when scripting is live. With no JS the .js class is
     never added, this rule never matches, and the full nav renders as a list. */
  .js nav.main{display:none;flex-basis:100%;order:3}
  .js nav.main.open{display:block}
  .js .navtoggle{display:inline-block}
  nav.main ul{flex-direction:column;gap:0}
  nav.main>ul>li{border-bottom:1px solid var(--rule)}
  nav.main a{padding:.75rem 0}
  nav.main ul.sub{position:static;border:0;padding:0 0 .6rem 1.2rem;
    min-width:0;background:none}
  nav.main>ul>li.has-sub{display:flex;flex-wrap:wrap;align-items:center;
    justify-content:space-between}
  nav.main>ul>li.has-sub>a{flex:1 1 auto}
  nav.main>ul>li.has-sub>ul.sub{flex-basis:100%}
  .js nav.main li.has-sub:hover>ul.sub{display:none}
  .js nav.main li.has-sub.open>ul.sub{display:flex}
  nav.main ul.sub a{padding:.45rem 0}
  nav.main ul.sub li.grp{padding-left:0}
  ul.use-when{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  body{font-size:18px}
  /* Header below 640px, also the layout at 200 percent zoom on a laptop.
     A three column grid: brand, the phone link shortened to "Call", Menu on
     the first row; the call to action as a full width bar on the second; the
     navigation on the third. Nothing is hidden at any width. */
  .head-in{display:grid;grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;gap:.7rem .9rem;padding:.9rem 0}
  .brand{grid-column:1;grid-row:1;margin:0;font-size:1.05rem}
  .brand span{font-size:.62rem;letter-spacing:.1em}
  .head-tel{grid-column:2;grid-row:1;margin:0;padding:.5rem .2rem}
  .head-tel .tel-full{display:none}
  .head-tel .tel-short{display:inline}
  .navtoggle{grid-column:3;grid-row:1}
  .head-act{display:contents}
  .head-cta{grid-column:1 / -1;grid-row:2;display:block;width:100%;text-align:center;
    font-size:.74rem;padding:.75rem 1rem;letter-spacing:.05em;white-space:normal;
    background:var(--navy);color:var(--paper)}
  .head-cta:hover{background:var(--ink);border-color:var(--ink)}
  nav.main,.js nav.main{grid-column:1 / -1;grid-row:3;flex-basis:auto}
  .wrap{padding:0 1.2rem}
  .grid.c2,.grid.c3,.card-grid.c2,.card-grid.c3{grid-template-columns:minmax(0,1fr)}
  .leaders{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{padding:3rem 0 2.4rem}
  section.blk{padding:2rem 0}
  ul.use-when,ul.receive{grid-template-columns:minmax(0,1fr)}
  .row2{grid-template-columns:minmax(0,1fr)}
  .cta-mid,.midcta{padding:1.3rem 1.2rem}
  figure.photo.desk-only{display:none}
  /* diagrams: the narrow drawing replaces the wide one */
  .fig svg.wide{display:none}
  .fig svg.narrow{display:block}
  /* stacked tables: each row becomes a labelled block */
  .tbl-wrap.stack{overflow:visible;background:var(--white)}
  .tbl-wrap.stack table,.tbl-wrap.stack tbody,.tbl-wrap.stack tr,
  .tbl-wrap.stack th,.tbl-wrap.stack td{display:block;width:100%}
  .tbl-wrap.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .tbl-wrap.stack tr{border-bottom:2px solid var(--rule-2);padding:.4rem 0}
  .tbl-wrap.stack tbody tr:last-child{border-bottom:0}
  .tbl-wrap.stack th,.tbl-wrap.stack td{border-bottom:0;padding:.55rem .9rem}
  .tbl-wrap.stack tbody th{font-family:var(--serif);font-size:1.02rem;
    padding-bottom:.2rem}
  .tbl-wrap.stack td::before{content:attr(data-label);display:block;
    font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.08em;
    text-transform:uppercase;color:var(--navy);margin-bottom:.15rem}
  .tbl-wrap.stack td:not([data-label])::before{display:none}
}
@media (max-width:420px){
  .brand span{display:none}
  .brand{font-size:1.02rem}
  .navtoggle{font-size:.78rem;padding:.5rem .8rem}
  .head-cta{font-size:.72rem}
  .wrap{padding:0 1.1rem}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1.2rem}
  .btns{flex-direction:column;align-items:stretch}
  .btn{text-align:center}
}

/* ---------- 8. MOTION AND FORCED COLORS ---------- */
/* No transitions or animations are declared anywhere in this file. The block
   below guards anything a theme or plugin adds later. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;
    scroll-behavior:auto!important}
}
@media (forced-colors:active){
  .btn,.head-cta,.head-tel,.navtoggle,button.sub{border:1px solid ButtonText}
  .fig,.tbl-wrap,.instrument,.limits,.stops,.commit,.fee,.pullquote,.cta-mid,.midcta,
  .summary,details.inst,.err-summary,.form-errors{border-color:CanvasText}
  .pts li::before,ul.needs li::before{background:CanvasText}
  .fig .acc{stroke:CanvasText}
  .cta-blk{border-top:1px solid CanvasText;border-bottom:1px solid CanvasText}
  figure.photo img{filter:none;mix-blend-mode:normal}
  figure.photo .ph::after{display:none}
  :focus-visible,.on-navy :focus-visible,.cta-blk :focus-visible,.skip:focus-visible{
    outline:3px solid Highlight;box-shadow:none}
}

/* 1.0.1: preserve the vendor heading wording without an isolated AI. */
h2.rss-vendor-oversight-heading{max-width:none}
.rss-vendor-oversight-heading .rss-keep-together{white-space:nowrap}