/* ==========================================================================
   glass.css — the site's surface system, one shared content width, and the
   last word on colour. Loaded after every vendor sheet, so its !important pins
   are what actually paints.

   The palette has moved twice: §1-§9 built frosted glass over a navy field,
   §7 inverted all copy onto that glass, §14 lifted the ground to white and left
   the sheets blue, and §15 finishes the job — paper sheets, navy ink, amber
   accents, in both nav states. Read §15 before changing anything above it: most
   of the earlier blocks describe a dark ground, and their values survive only
   because §15 re-pins them.
   ========================================================================== */
:root {
  --gl-gut: clamp(16px, 4vw, 48px);
  /* One column drives the nav bar, every sheet and the subnav. It was 1120 while
     the two nav rules below were hardcoded to 1240 — a 60px overhang on each side,
     which is what "the navbar is not aligned" measured as (bar l=100 r=1340 vs
     sheet l=160 r=1280). Widening the column moves both nav states with it, so the
     three cannot drift apart again. */
  --gl-w: min(1440px, calc(100vw - 2 * var(--gl-gut)));
  --gl-fill: linear-gradient(145deg, rgba(254, 249, 238, .16) 0%, rgba(254, 249, 238, .05) 100%);
  --gl-tint: linear-gradient(145deg, rgba(146, 178, 255, .18) 0%, rgba(146, 178, 255, .06) 100%);
  --gl-rim: 1px solid rgba(254, 249, 238, .22);
  --gl-shadow: inset 0 1px 0 rgba(254, 249, 238, .3), inset 0 -1px 0 rgba(254, 249, 238, .05), 0 22px 44px -24px rgba(0, 0, 0, .65);
  --gl-ink: #F2F6FF;
  --gl-ink-soft: rgba(226, 233, 247, .86);
  --gl-ink-mute: rgba(206, 216, 235, .68);
  --gl-link: #C3D8FF;
  --gl-amber: #FEF9EE;
}

/* ---- 1. one content width: every band lines up on the same left/right edges -- */
main > section:not(.breadcrumb-area):not(.wift-edu-hero) > .container:not(.wift-edu-bg) {
  width: min(var(--gl-w), calc(100% - 2 * var(--gl-gut))) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important;
}
main > section.wift-app-statement, main > section.wift-cta {
  width: min(var(--gl-w), calc(100% - 2 * var(--gl-gut))); margin-left: auto !important; margin-right: auto !important; border-radius: 36px;
}
.wift-app-lead-in, .wift-app-glance, .wift-modrow, .wift-path-grid, .wift-app-foot, .wi-list { width: 100%; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.wift-mods-head, .wift-path-head, .wi-head, .wift-band-head { text-align: center; margin-left: auto; margin-right: auto; }
/* edm.css §CENTRE turns .wift-band-head into a centred column whose single `gap`
   has to absorb BOTH the h2's decorative arrow rule (::after, 12px tall + 18px
   top margin) and the space below it. Measured on index.html's "Partner With WIFT"
   band: 19px total between the heading box and the "CONTACT US" link, i.e. the
   kicker was sitting on top of the arrow rather than under it. Give the link its
   own breathing room instead of competing with the rule for the shared gap.

   Raised again: at 16px the arrow still read as attached to "CONTACT US" /
   "PROGRAMME". edm.css:189 zeroes the .section-title's own mb-50/mb-80, so this
   margin-top plus the column gap is ALL the separation there is. */
.wift-band-head > .wift-band-link { margin-top: clamp(22px, 3vw, 34px); }

/* ---- 2. light glass cards ------------------------------------------------------ */
.wift-app-lead > .container:not(.wift-edu-bg), .wift-app-glance li, .wift-modrow, .wift-path-grid > li, .wi-list > li,
.wift-value-card, .wift-path-card, .contact-box, .wift-article-stats li, .edm-aside .edm-toc, .news-text .edm-toc {
  background: var(--gl-fill) !important; border: var(--gl-rim) !important; box-shadow: var(--gl-shadow) !important;
}
.wift-modrow:nth-of-type(even), .wift-path-grid > li:nth-child(even), .wift-app-glance li:nth-child(even) { background: var(--gl-tint) !important; }
.wift-app-lead > .container:not(.wift-edu-bg) { border-radius: 36px; padding: clamp(28px, 4.5vw, 60px) clamp(22px, 4vw, 56px); }
.wift-mods-chips a, .wift-modrow-covers li, .edm-pill {
  background: linear-gradient(145deg, rgba(254, 249, 238, .18), rgba(254, 249, 238, .06)) !important; border: 1px solid rgba(254, 249, 238, .26) !important;
  box-shadow: inset 0 1px 0 rgba(254, 249, 238, .3), 0 8px 18px -12px rgba(0, 0, 0, .6);
}
.wift-mods-chips a:hover { background: linear-gradient(145deg, #FEF9EE, #FEF9EE) !important; }

/* ---- 3. nav + local nav: real frosted glass ------------------------------------- */
.header-area .menu-area.sticky-menu, .header-three .menu-area.sticky-menu, .header-area.header-three .menu-area.sticky-menu {
  background: linear-gradient(180deg, rgba(24, 48, 108, .95), rgba(11, 31, 77, .9)) !important;
  -webkit-backdrop-filter: blur(26px) saturate(190%) !important; backdrop-filter: blur(26px) saturate(190%) !important;
  border: 1px solid rgba(254, 249, 238, .22) !important;
  box-shadow: inset 0 1px 0 rgba(254, 249, 238, .3), 0 18px 40px -20px rgba(0, 0, 0, .6) !important;
}
.header-area .menu-area:not(.sticky-menu) {
  background: linear-gradient(180deg, rgba(20, 44, 104, .9), rgba(11, 31, 77, .84)) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%) !important; backdrop-filter: blur(24px) saturate(170%) !important;
  border: 1px solid rgba(254, 249, 238, .2) !important;
  box-shadow: inset 0 1px 0 rgba(254, 249, 238, .3), 0 18px 40px -20px rgba(0, 0, 0, .55) !important;
}
/* the subnav pill bar is sized in §7 — it is a control, not a band */
/* cards and strips share one centred column, so the bars line up with the content */
@media (min-width: 1280px) {
  .header-area .menu-area.sticky-menu, .header-three .menu-area.sticky-menu, .header-area.header-three .menu-area.sticky-menu { left: 50% !important; right: auto !important; width: var(--gl-w) !important; transform: translateX(-50%); }
}

/* ---- 4. dark glass feature panels (statement + closing CTA) -------------------- */
main .wift-app-statement > .container, main .wift-cta > .container {
  background: linear-gradient(145deg, rgba(254, 249, 238, .17), rgba(254, 249, 238, .05)) !important;
  border: 1px solid rgba(254, 249, 238, .24) !important; border-radius: 30px;
  box-shadow: inset 0 1px 0 rgba(254, 249, 238, .38), 0 30px 60px -30px rgba(0, 0, 0, .65) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important; backdrop-filter: blur(24px) saturate(160%) !important;
}
/* the grid is the line scrim *under* that panel; blurring it stacks two layers,
   and the old fill was overwriting its line pattern */
main .wift-app-statement-grid {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: none !important; border: 0 !important;
}
main .wift-app-statement .wift-band-link, main .wift-app-statement .wift-eyebrow { color: #FEF9EE !important; }
main .wift-app-statement h2 { color: #FEF9EE; }

/* every band container is now the glass panel, so each one is padded off its
   own edge — css/wift.css v93 owns that padding */
main > section.wift-cta > .container:not(.wift-edu-bg), main > section.wift-app-statement > .container:not(.wift-edu-bg) { width: 100% !important; }
.wift-ideas .wi-list, .wift-ideas .container > ol { padding-left: 0 !important; padding-right: 0 !important; }

/* hero action buttons keep their natural width (the card-button rule is for pricing cards only) */
.wift-app-actions a, .wift-app-actions a.btn { width: auto !important; max-width: 100%; flex: 0 1 auto; }
.wift-app-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
/* dummy vector art: keep it a faint watermark, real art keeps its own opacity */
[style*="img/placeholders/vectors/"], img[src*="img/placeholders/vectors/"] { opacity: .06 !important; }

/* ---- 5. per-page formwork line-art, painted inside the glass sheets -------------
   The drawing used to be an absolutely positioned div behind the bands, where the
   now-opaque sheets hid it. Each page declares its own sheet on <main>, so the
   art rides in the container background: always behind the copy, always clipped
   to the panel, and it bleeds off one corner like a detail on a drawing.      */
:root {
  --wift-art: none;
  --wift-art-light: none;
  --gl-grid: linear-gradient(rgba(206, 220, 250, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(206, 220, 250, .07) 1px, transparent 1px);
}
main > section:not(.breadcrumb-area):not(.wift-edu-hero):not(.wift-cta):not(.wift-app-statement):not(.contact-area) > .container:not(.wift-edu-bg) {
  background-image: var(--wift-art-light) !important;
  background-repeat: no-repeat;
  background-position: right -34px bottom -34px;
  background-size: min(420px, 46%) auto;
}
main > section:where(:nth-of-type(odd)):not(.wift-edu-hero) > .container:not(.wift-edu-bg) {
  background-position: left -34px top -34px;
}
main > section.wift-cta > .container:not(.wift-edu-bg), main > section.wift-app-statement > .container:not(.wift-edu-bg),
main > section.contact-area > .container:not(.wift-edu-bg) {
  /* §4 sets these panels with a background shorthand, so its !important would
     otherwise reset size and position back to auto / 0 0 */
  background-image: var(--wift-art-light) !important;
  background-repeat: no-repeat !important;
  background-position: right -34px bottom -34px !important;
  background-size: min(420px, 46%) auto !important;
}
/* the opening band is a drawing sheet: grid, study icons at one end, the page's
   own formwork detail at the other */
/* §20.1: the hero paints through its ::before (frost) and ::after (art)
   layers, so nothing may land on the section box itself. */
/* "formwork in five ideas" carries the library frieze behind the cards */
main > section.wift-ideas > .container:not(.wift-edu-bg) {
  background-image: var(--wift-art-light), url("../img/edu/edu-vector-01-library-light.png") !important;
  background-repeat: no-repeat, no-repeat;
  background-position: right -34px bottom -34px, left -34px top -34px;
  background-size: min(420px, 46%) auto, min(470px, 48%) auto;
}
@media (max-width: 767px) {
  main > section > .container:not(.wift-edu-bg) { background-size: min(240px, 62%) auto !important; }
  /* §20.1: the hero paints through its ::before (frost) and ::after (art)
   layers, so nothing may land on the section box itself. */
}

/* technical dimension line under a centred section heading */
.section-title.center-align h2::after, .section-title.text-center h2::after, .wift-band-head .section-title h2::after {
  content: ""; display: block; width: clamp(96px, 14vw, 148px); height: 12px; margin: 18px auto 0; opacity: .8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cg fill='none' stroke='%23D8E3FB' stroke-opacity='.55' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M8 6h104M16 2L8 6l8 4M104 2l8 4-8 4M60 1v10'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- 6. bands that own no content column ---------------------------------
   .about-area keeps its tabs and panes directly on the section, so the sheet
   has to be the section itself, and the outlined marquee headlines sit on the
   navy ground rather than on a sheet, so their stroke has to read on dark.  */
main > section.about-area {
  width: min(var(--gl-w), calc(100% - 2 * var(--gl-gut))); margin-left: auto; margin-right: auto;
  background-color: var(--wift-sheet) !important;
  background-image: var(--wift-art-light); background-repeat: no-repeat;
  background-position: right -30px top -30px; background-size: min(400px, 44%) auto;
  border: 1px solid var(--wift-sheet-edge) !important;
  border-radius: var(--wift-r-xl, 28px);
  padding: var(--wift-sheet-pad, 40px 30px);
  box-shadow: inset 0 1px 0 rgba(254, 249, 238, .9), 0 26px 54px -30px rgba(3, 10, 26, .8);
}
main > section.about-area > .container { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
main > section > .scrollbox2 .section-t h2,
#main > section > .scrollbox2 .section-t h2 {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: transparent !important;
  /* the fill is transparent, so `color` only has to be honest for the contrast
     probe; the visible ink is this stroke on the white ground */
  color: var(--wift-navy) !important;
  -webkit-text-stroke: 1.5px rgba(30, 58, 108, .45);
}
@media (max-width: 767px) {
  main > section.about-area { padding: 24px 18px !important; border-radius: 22px; background-size: min(240px, 62%) auto; }
}


/* ---- 7. one surface: the dark glass -------------------------------------
   §4's statement panel was the only smoked panel on the page; the reader asked
   for that treatment everywhere. Sheets, cards, chips, both nav states, the
   form and the footer now take the same navy glass over the gradient ground,
   so the copy has to invert with them.

   `#main` carries the inversion on purpose: css/wift.css pins copy to navy two
   and three classes deep with !important, and only an id outranks that without
   rewriting the whole palette block. Everything that must stay coloured
   (headings, links, amber kickers, muted notes, solid buttons) is re-pinned
   below it, where a class outranks the bare element list.
   -------------------------------------------------------------------------- */
:root {
  --wift-glass-panel: #1E3A6C;
  --wift-glass-panel-blue: #23508F;
  --wift-glass-panel-dark: #12224A;
}
main > section { --wift-sheet-edge: rgba(254, 249, 238, .26); }
main > section:where(:nth-of-type(even)) { --wift-sheet-edge: rgba(254, 249, 238, .2); }
#main > section:not(.breadcrumb-area):not(.wift-edu-hero) > .container:not(.wift-edu-bg),
#main > section.about-area {
  box-shadow: inset 0 1px 0 rgba(254, 249, 238, .26), 0 26px 54px -30px rgba(0, 0, 0, .7) !important;
}

/* copy on the glass */
#main :is(p, li, a, span, small, strong, em, b, i, u, label, td, th, dt, dd, blockquote, figcaption, cite, address, summary, code, time, h1, h2, h3, h4, h5, h6) { color: var(--gl-ink-soft) !important; }
#main :is(h1, h2, h3, h4, h5, h6) { color: var(--gl-ink) !important; }
#main a { color: var(--gl-link) !important; }
#main a:hover, #main a:focus { color: var(--gl-amber) !important; }
#main :is(.wift-eyebrow, .wift-band-link, .wi-num, .wift-seat i, .stage-no i, .icon i, .wift-article-link, .wift-motto-hero, .wift-modnav a) { color: var(--gl-amber) !important; }
#main :is(small, figcaption, .wift-values-note, .wift-tbc, .meta-info, .meta-info li, .b-meta, .b-meta li, .wift-article-stats span) { color: var(--gl-ink-mute) !important; }
/* solid controls keep their own ink: `.btn` is a white chip, `.btn2` a navy one */
#main :is(.btn, .btn3, [type="submit"]) { color: var(--wift-navy) !important; }
#main :is(.btn2, button.btn2) { color: #FEF9EE !important; }
#main :is(.btn:hover, .btn3:hover) { color: #FEF9EE !important; }
#main :is(.btn2:hover, button.btn2:hover) { color: var(--wift-navy) !important; }
#main :is(.btn, .btn2, .wift-share button, .slick-arrow, .prev-arrow, .next-arrow) i { color: inherit !important; }
/* every sheet is dark now, so the secondary button is the ghost variant
   everywhere; the pricing cards keep their filled treatment */
#main .btn.ss-btn, #main .btn.ss-btn.active {
  background: transparent !important;
  border: 1px solid rgba(254, 249, 238, .5) !important;
  color: #FEF9EE !important;
}
#main :is(.btn.ss-btn:hover, .btn.ss-btn.active:hover) {
  background: var(--wift-amber) !important;
  border-color: var(--wift-amber) !important;
  color: var(--wift-navy) !important;
}
#main .pricing-box .btn.ss-btn {
  background: var(--wift-navy) !important;
  border-color: rgba(254, 249, 238, .3) !important;
  color: #FEF9EE !important;
}
#main .pricing-box .btn.ss-btn:hover {
  background: var(--wift-amber) !important;
  border-color: var(--wift-amber) !important;
  color: var(--wift-navy) !important;
}
#main .pricing-box.active .btn.ss-btn {
  background: var(--wift-amber) !important;
  border-color: var(--wift-amber) !important;
  color: var(--wift-navy) !important;
}
#main .pricing-box.active .btn.ss-btn:hover {
  background: #FEF9EE !important;
  border-color: #FEF9EE !important;
  color: var(--wift-navy) !important;
}

/* inner panels: the same glass, one step lighter than the sheet behind them */
main .contact-bg02, main .wift-promoter {
  background: rgba(254, 249, 238, .07) !important;
  border: 1px solid rgba(254, 249, 238, .16) !important;
  box-shadow: inset 0 1px 0 rgba(254, 249, 238, .2) !important;
}
#main :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), textarea, select) {
  background: rgba(6, 16, 38, .5) !important;
  border-color: rgba(254, 249, 238, .22) !important;
  color: var(--gl-ink) !important;
}
#main ::placeholder { color: var(--gl-ink-mute) !important; opacity: 1; }

/* nav: both states are smoked glass, so the ink never has to switch */
.header-area .main-menu ul ul, .header-area .main-menu .sub-menu, .menu .sub-menu, .menu .children {
  background: rgba(16, 33, 72, .82) !important;
  box-shadow: inset 0 1px 0 rgba(254, 249, 238, .2), 0 18px 44px rgba(0, 0, 0, .5) !important;
}
.header-area .main-menu ul ul li a { color: rgba(255, 255, 255, .84) !important; }
.header-area .main-menu ul ul li a:hover { color: var(--gl-amber) !important; }
.header-area .menu-area.sticky-menu .wift-logo-name, .header-three .sticky-menu .wift-logo-name { color: #FEF9EE !important; }
.header-area .menu-area.sticky-menu .main-menu > nav > ul > li > a,
.header-three .sticky-menu .main-menu > nav > ul > li > a { color: rgba(255, 255, 255, .84) !important; }
.header-area .menu-area.sticky-menu .main-menu > nav > ul > li:hover > a,
.header-area .menu-area.sticky-menu .main-menu > nav > ul > li.active > a,
.header-area .menu-area.sticky-menu .main-menu > nav > ul > li.current > a,
.header-three .sticky-menu .main-menu ul li a:hover { color: #FEF9EE !important; }
.header-area .menu-area.sticky-menu .login .menu-tigger img,
.header-three .sticky-menu .login .menu-tigger img { filter: brightness(0) invert(1) !important; opacity: .82 !important; }
.header-area .menu-area.sticky-menu .login .menu-tigger,
.header-three .sticky-menu .login .menu-tigger { background: rgba(254, 249, 238, .08) !important; border-color: rgba(254, 249, 238, .3) !important; }
.header-area .menu-area.sticky-menu .login .menu-tigger:hover,
.header-three .sticky-menu .login .menu-tigger:hover { background: rgba(254, 249, 238, .18) !important; border-color: rgba(254, 249, 238, .7) !important; }

/* footer: the last panel on the page, not a white slab */
footer.footer-bg, footer.footer-bg .footer-top, footer.footer-bg .copyright-wrap {
  background-color: var(--wift-glass-panel-dark) !important;
  border-top: 1px solid rgba(254, 249, 238, .14) !important;
  color: var(--gl-ink-soft) !important;
}
footer.footer-bg :is(p, li, a, span, small, div, td) { color: var(--gl-ink-soft) !important; }
footer.footer-bg :is(h2, h3, h4) { color: var(--gl-ink) !important; }
footer.footer-bg a:hover { color: var(--gl-amber) !important; }
footer.footer-bg .btn, footer.footer-bg .btn2 { color: var(--wift-navy) !important; }
footer.footer-bg .wift-logo .wift-logo-name, footer.footer-bg .wift-logo .wift-logo-sub { color: #FEF9EE !important; }

/* ---- 8. the light surfaces that survived §7 -----------------------------
   Found by walking the rendered DOM of every page for a visible element that
   still composites to a light background (_stage/probe_surfaces.js), not by
   reading the vendor sheets. Each row is a panel the inversion left white.
   -------------------------------------------------------------------------- */
:root { --gl-panel: rgba(11, 31, 77, .05); --gl-panel-edge: rgba(11, 31, 77, .14); }
/* §9 built these for smoked glass over navy, so `--gl-panel` was a white veil at
   .07. §15 flipped the page to paper but only re-pinned the box-shadow here
   (line ~720), leaving the dark-era background/border live on every panel that
   still matched — which is why switching tabs on about.html flashed a near-black
   rectangle behind the copy. The token itself now reads as ink-on-paper, so all
   consumers get the light value. */
#main :is(.contact-box, .wift-mod-tile, .wift-post, .wift-faq-aside, .wift-locations-panel,
          .wift-app-statement-art, .wift-council-grid .wc-item, .wc-item .wc-body,
          .about-area .tab-content .tab-pane > .container > .row) {
  background: var(--gl-panel) !important;
  border: 1px solid var(--gl-panel-edge) !important;
  box-shadow: inset 0 1px 0 rgba(254, 249, 238, .9), 0 16px 36px -26px rgba(7, 21, 52, .34) !important;
}
#main :is(.wift-mod-shot, .wift-post-thumb, .wift-mod-gallery-in figure, .s-about-img) {
  background: rgba(254, 249, 238, .05) !important;
  border: 1px solid var(--gl-panel-edge) !important;
}
#main :is(.wift-partner-pills li, .wift-post-tag, .faq-btn, .wift-edu-links a:not(.btn):not(.btn2)) {
  background: rgba(254, 249, 238, .12) !important;
  border: 1px solid rgba(254, 249, 238, .2) !important;
}
/* the accordion header is a button, so it needs the ink re-pin too */
#main button.faq-btn, #main .faq-btn :is(h2, h3, h4, span, i) { color: var(--gl-ink) !important; }
#main .about-area .nav.nav-tabs li span {
  background: rgba(254, 249, 238, .09) !important;
  border-color: rgba(254, 249, 238, .2) !important;
  color: var(--gl-ink-soft) !important;
}
#main .about-area .nav.nav-tabs li span.active,
#main .about-area .nav.nav-tabs li span:hover {
  background: var(--wift-amber) !important;
  border-color: var(--wift-amber) !important;
  color: var(--wift-navy) !important;
}
/* The menu drawer is outside #main, so the inversion never reached it — and this
   sheet used to force a navy ground over it. That was the bug: wift.css:2342 had
   already redesigned the drawer as a cream sheet with #1747B8 links, so the navy
   override left blue ink on a blue panel. It goes back to paper, and the ink is
   pinned navy here because wift.css's own hairlines are cream-on-cream. */
.offcanvas-menu {
  background: #FEF9EE !important;
  border-right: none !important;
  border-left: 4px solid var(--wift-amber) !important;
  box-shadow: -12px 0 40px rgba(11, 31, 77, .18) !important;
}
.offcanvas-menu :is(a, span, li, p, h2, h3, h4, .offcanvas-title) { color: #1747B8 !important; }
.offcanvas-menu :is(.menu-close, .menu-close i, .wift-logo-name, .offcanvas-gallery h6,
                    a:hover, ul li a:hover, ul li:hover a) { color: var(--wift-navy) !important; }
.offcanvas-menu ul li,
.offcanvas-menu .offcanvas-gallery,
.offcanvas-menu .offcanvas-gallery a { border-color: rgba(11, 31, 77, .14) !important; }
.offcanvas-menu .offcanvas-gallery a { background: #fff !important; }
/* the CTA pill is navy with cream text — legible on paper, so it only needs to
   survive the ink rule above; same for the captions on the navy photo gradient.
   The pill's <i> is left out on purpose: wift.css:3869 gives it a cream chip with
   navy ink, and re-pinning it cream here would erase the glyph. */
.offcanvas-menu .offcanvas-cta .btn2,
.offcanvas-menu .offcanvas-gallery a span { color: #FEF9EE !important; }
.offcanvas-menu .og-grid a, .offcanvas-menu a.og-feature {
  background: rgba(11, 31, 77, .05) !important;
  border: 1px solid rgba(11, 31, 77, .14) !important;
}
/* the footer widget titles are pinned navy by the palette block at two classes */
footer.footer-bg .f-widget-title h2 { color: var(--gl-ink) !important; }
/* slider controls: smoked glass discs, amber on hover */
#main .slider-active .slick-arrow {
  background: rgba(254, 249, 238, .1) !important;
  border-color: rgba(254, 249, 238, .26) !important;
  box-shadow: inset 0 1px 0 rgba(254, 249, 238, .2) !important;
  color: var(--gl-ink) !important;
}
#main .slider-active .slick-arrow:hover { background: var(--wift-amber) !important; border-color: var(--wift-amber) !important; color: var(--wift-navy) !important; }
#main .slider-active .slick-dots li button { background: rgba(254, 249, 238, .3) !important; }
#main .slider-active .slick-dots li.slick-active button { background: var(--wift-amber) !important; }

/* ==========================================================================
   9. PRELOADER — superseded by §18 (the sheet is paper now, not navy).
   Was: navy ground, light skyline mask, white crest, amber progress.
   ========================================================================== */
/* §18 owns these values; kept here only as the history of what was overridden. */

/* The banner photo is a near-white sky: at the old .5 navy scrim the title
   landed at 3.1:1. Darker so the whole band is glass, with the crane still
   reading through it.
   SUPERSEDED below in §15 — this dark pair was left live when the page went to
   paper and re-applied a navy veil over the cream one. Removed rather than
   overridden: two !important declarations for one pseudo-element is how the
   band ended up flickering between dark and light while its image loaded. */

/* ==========================================================================
   10. MID-TONE PANELS — wift.css:6083 gives cards inside a sheet a 55% white
   frost. On a dark sheet that lands at luminance .34, below the .42 the
   surface audit screens for, so it survived the sweep while its light copy
   failed contrast against it. All of them become the same dark glass.
   ========================================================================== */
#main :is(.blog-area .single-post2, .blog-area .single-post3, .wift-locations-panel,
          .pricing-box, .wift-council-grid .wc-item, .wift-faq-aside,
          .wift-ideas .wi-list li, .wift-promoter, .contact-bg02) {
  background: var(--gl-panel) !important;
  border: 1px solid var(--gl-panel-edge) !important;
  box-shadow: inset 0 1px 0 rgba(254, 249, 238, .2), 0 18px 44px -26px rgba(0, 0, 0, .7) !important;
}
#main .pricing-box.active {
  background: rgba(254, 249, 238, .14) !important;
  border-color: rgba(255, 200, 60, .5) !important;
}
/* the amber vision card is the one solid accent on the page: navy ink, as
   wift.css intended, since light copy on amber reads at 1.9:1 */
#main .newslater-area :is(h1, h2, h3, h4, h5, h6, p, li, span, small, strong, a):not(.btn2) {
  color: var(--wift-navy) !important;
}
#main .newslater-area .wift-vision-note { color: rgba(11, 31, 77, .78) !important; }
/* six-step slider captions are bare DIVs, so the tag-level inversion missed them */
#main :is(.day, .time) { color: var(--gl-ink-soft) !important; }
#main .day { color: var(--gl-ink) !important; }

/* amber chips and JS-built slider dots: both carry ink the tag-level
   inversion overrides, so re-pin them where the ground stays solid */
#main .locations-box li .button a { color: var(--wift-navy) !important; }
#main .locations-box li .button a:hover { color: #FEF9EE !important; }
#main .slider-active .slick-dots li button { color: var(--gl-ink) !important; }
#main .slider-active .slick-dots li.slick-active button { color: var(--wift-navy) !important; }

/* remaining amber-grounded controls: the id-level inversion outranked wift.css's
   navy-on-amber pins, so re-assert them */
#main .wift-subnav-links a[aria-current] { color: var(--wift-navy) !important; }
#main :is(.stage-no, .stage-no i) { color: var(--wift-navy) !important; }
#main .pricing-box.active :is(h3, .pricing-head h3) { color: var(--wift-navy) !important; }
/* FAQ answers are bare .card-body DIVs, outside the tag-level inversion */
#main .card-body { color: var(--gl-ink-soft) !important; }

/* ==========================================================================
   11. ARTICLE PAGES — wift.css:2580 paints the whole article band white and
   the sheet system never reached it because it is an <article>, not a
   <section>. It gets the same sheet as a band, and its inner chips the same
   dark glass as every other panel.
   ========================================================================== */
#main .wift-article { background: transparent !important; }
#main article.wift-article > .container {
  /* same box as a band sheet, so the article lines up with the nav, the CTA and
     every other band edge instead of running its own width */
  width: min(var(--gl-w), calc(100% - 2 * var(--gl-gut))) !important;
  max-width: none !important; margin-left: auto !important; margin-right: auto !important;
  background: var(--wift-glass-panel) !important;
  border: 1px solid var(--wift-sheet-edge, rgba(254, 249, 238, .2)) !important;
  border-radius: var(--wift-r-xl, 28px) !important;
  padding: var(--wift-sheet-pad) !important;
  box-shadow: inset 0 1px 0 rgba(254, 249, 238, .26), 0 26px 54px -30px rgba(0, 0, 0, .7) !important;
}
#main :is(.wift-article-stats li, .bsingle__content.news-text .admin, .post__tag .tag-cloud-link) {
  background: rgba(254, 249, 238, .1) !important;
  border: 1px solid rgba(254, 249, 238, .18) !important;
  color: var(--gl-ink-soft) !important;
}
#main .wift-article-stats li { border-top: 3px solid var(--wift-amber) !important; }
#main .wift-article-stats strong { color: var(--gl-ink) !important; }
#main .wift-share :is(a, button) {
  background: rgba(254, 249, 238, .1) !important;
  border: 1px solid rgba(254, 249, 238, .22) !important;
  color: var(--gl-ink) !important;
}
#main .wift-share :is(a, button):hover {
  background: var(--wift-amber) !important;
  border-color: var(--wift-amber) !important;
  color: var(--wift-navy) !important;
}
#main .edm-author img { background: transparent !important; }

/* ==========================================================================
   12. MOBILE PARITY — wift.css's ≤767px sheet override only matches sections,
   so the article band kept the desktop inset. Same padding and radius as a band.
   ========================================================================== */
@media (max-width: 767px) {
  #main article.wift-article > .container {
    padding: 24px 18px !important; border-radius: 22px !important;
  }
}

/* ==========================================================================
   13. PARTNER BAND — index.html's "Who We Partner With" is a <div>, so the
   section-level sheet rules skipped it: it ran on the bootstrap container with
   the older 44px inset. Same box, inset and gap as a band now.
   ========================================================================== */
/* Follows --ax-sec (css/apple.css §2) rather than a fixed 120px. This rule carries
   an id, so it outranked the rhythm change and left this band as the one outlier:
   measured at a 185px sheet-to-sheet gap against 131px everywhere else on index. */
#main > div.brand-area { padding-top: var(--ax-sec) !important; padding-bottom: var(--ax-sec) !important; }
#main > div.brand-area > .container {
  width: min(var(--gl-w), calc(100% - 2 * var(--gl-gut))) !important;
  max-width: none !important; margin-left: auto !important; margin-right: auto !important;
  padding: var(--wift-sheet-pad) !important;
  border-radius: var(--wift-r-xl, 28px) !important;
}
@media (max-width: 767px) {
  #main > div.brand-area { padding-top: 24px !important; padding-bottom: 24px !important; }
  #main > div.brand-area > .container { padding: 24px 18px !important; border-radius: 22px !important; }
}

/* ==========================================================================
   14. WHITE GROUND, BLUE SHEETS
   The canvas flips to light: html and the fixed ambient field go white with a
   faint blue wash. That leaves the sheets no blue to borrow, so §7 gives them
   their own solid blues and every panel that previously read through a navy
   ground — the footer, the nav, the outlined marquee headlines — gets a fill or
   an ink that is navy in its own right. Content ink stays light because it now
   lives on blue, not on the ground.
   ========================================================================== */
html { background: #FEF9EE !important; }
body { background-color: transparent !important; }
.wift-ambient { background: linear-gradient(180deg, #FCF4E1 0%, #F8EDD4 52%, #FCF4E1 100%) !important; }
/* fix.css paints these three blobs for the navy field; on white they are the
   only depth the canvas has left. The blues stay as a cool wash; the amber is
   cut to near-nothing because on white it reads as a stain, not as light. */
.wift-ambient i:nth-child(1) { background: radial-gradient(closest-side, rgba(240, 200, 120, .18), rgba(240, 200, 120, 0)) !important; }
.wift-ambient i:nth-child(2) { background: radial-gradient(closest-side, rgba(254, 249, 238, .07), rgba(254, 249, 238, 0)) !important; }
.wift-ambient i:nth-child(3) { background: radial-gradient(closest-side, rgba(226, 183, 107, .12), rgba(226, 183, 107, 0)) !important; }

/* sheets read as blue slabs on white now: the inner rim stays a glass highlight,
   the outer edge gets a navy hairline so a sheet never dissolves into the ground */
#main > section:not(.breadcrumb-area):not(.wift-edu-hero) > .container:not(.wift-edu-bg),
#main > section.about-area,
#main article.wift-article > .container {
  border-color: rgba(11, 31, 77, .5) !important;
  box-shadow: inset 0 1px 0 rgba(254, 249, 238, .28), 0 26px 54px -30px rgba(7, 21, 52, .55) !important;
}
main > section.wift-edu-hero { border-bottom-color: rgba(11, 31, 77, .45) !important; }

/* the amber chips that sit on the ground between sheets */
main > section > .scrollbox2 .section-t .wift-eyebrow { color: var(--wift-glass-panel) !important; }

/* the scroll hairline sat under the nav and the frosted bar blurred it into a
   wide amber smear over the white ground. It belongs above the bar instead: the
   nav now lives at 1800 (§17.4) so the progress rule rides on top of it. */
.wift-scroll-progress { z-index: 1900; }

/* leads.html and expenses.html run their own markup but share this canvas */
.lp-body, .lp-social-proof {
  background: var(--wift-glass-panel) !important;
  width: min(var(--gl-w), calc(100% - 2 * var(--gl-gut))) !important;
  margin-left: auto !important; margin-right: auto !important;
  border: 1px solid rgba(11, 31, 77, .5) !important;
  border-radius: var(--wift-r-xl, 28px) !important;
  box-shadow: inset 0 1px 0 rgba(254, 249, 238, .28), 0 26px 54px -30px rgba(7, 21, 52, .55) !important;
}
.lp-footer { background: var(--wift-glass-panel-dark) !important; }

/* the vendor footer pins its own navy ink at two classes (wift.css:1574/1593),
   which §7's one-class tag inversion cannot outrank — on a navy slab that ink
   was already invisible, and the white ground made it obvious. */
footer.footer-bg :is(.copyright-wrap, .footer-social, .f-widget, .footer-link, .footer-top) :is(p, span, li, small, div, i, a):not(.btn):not(.btn2) { color: var(--gl-ink-soft) !important; }
footer.footer-bg .copyright-wrap { color: var(--gl-ink-soft) !important; }
footer.footer-bg .footer-social span { color: var(--gl-ink-mute) !important; }
footer.footer-bg :is(.f-widget, .copyright-wrap, .footer-link) a:not(.btn):not(.btn2) { color: var(--gl-link) !important; }
footer.footer-bg :is(.f-widget, .copyright-wrap, .footer-link) a:not(.btn):not(.btn2):hover { color: var(--gl-amber) !important; }

/* post tags: a 12% white chip on a blue sheet lifts to #4B70A3, which light ink
   reads at 4.2:1. The chip becomes a pressed field instead. */
#main .wift-post-tag {
  background: rgba(7, 21, 52, .3) !important;
  border-color: rgba(254, 249, 238, .16) !important;
  color: var(--gl-ink) !important;
}


/* ==========================================================================
   15. WHOLE PAGE LIGHT
   §14 made the ground white and left the sheets blue. The reader asked for the
   sheets too: every band becomes a cream/white panel with navy ink, a hairline
   navy edge and amber accents. Because §7 drives all copy from the `--gl-*`
   tokens, flipping the tokens inverts the site's ink in one move — but it also
   invalidates every rule below that hard-coded an rgba(254, 249, 238,.x) *fill*
   or a light ink for a dark sheet. Those are re-pinned here, section by
   section, in the same order they appear earlier in this file.

   Amber is the one trap: #FFC72C as text on white is 1.6:1. So `--gl-amber`
   (always used as ink) becomes a dark gold, while `--wift-amber` (always used
   as a fill behind navy ink) keeps its brightness.
   ========================================================================== */
:root {
  --wift-glass-panel: #FCF5E6;
  --wift-glass-panel-blue: #FCF5E6;
  --wift-glass-panel-dark: #FCF5E6;
  --wift-cream: #FEF9EE;

  --gl-ink: #0B1F4D;
  --gl-ink-soft: rgba(11, 31, 77, .85);
  --gl-ink-mute: rgba(11, 31, 77, .62);
  --gl-link: #1E3A6C;
  --gl-amber: #8A5A00;

  --gl-fill: linear-gradient(145deg, rgba(254, 249, 238, .92) 0%, rgba(245, 240, 228, .8) 100%);
  --gl-tint: linear-gradient(145deg, rgba(210, 225, 252, .5) 0%, rgba(210, 225, 252, .22) 100%);
  --gl-rim: 1px solid rgba(11, 31, 77, .13);
  --gl-shadow: inset 0 1px 0 rgba(254, 249, 238, .95), inset 0 -1px 0 rgba(11, 31, 77, .05), 0 20px 40px -26px rgba(7, 21, 52, .3);

  --gl-panel: rgba(11, 31, 77, .045);
  --gl-panel-edge: rgba(11, 31, 77, .12);
  /* Drafting-sheet grid behind the hero's frost. Strengthened from .05 to .13 and
     given a second coarser ruling: at .05 the lines were erased by the blur and by
     the card's own fill, so "lines behind the glass" was invisible in practice.
     Only the intro band reads this token (grep `var(--gl-grid)`), so this does not
     re-draw any other sheet. */
  --gl-grid:
    linear-gradient(rgba(11, 31, 77, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 31, 77, .13) 1px, transparent 1px),
    linear-gradient(rgba(11, 31, 77, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 31, 77, .07) 1px, transparent 1px);
}
main > section { --wift-sheet-edge: rgba(11, 31, 77, .14); }
main > section:where(:nth-of-type(even)) { --wift-sheet-edge: rgba(11, 31, 77, .12); }

/* §14's edges were tuned so a blue sheet would not dissolve into white; a white
   sheet needs the opposite — a whisper of an edge plus a drop that separates. */
#main > section:not(.breadcrumb-area):not(.wift-edu-hero) > .container:not(.wift-edu-bg),
#main > section.about-area,
#main article.wift-article > .container {
  border-color: rgba(11, 31, 77, .13) !important;
  box-shadow: inset 0 1px 0 rgba(254, 249, 238, .95), 0 22px 46px -30px rgba(7, 21, 52, .32) !important;
}
main > section.wift-edu-hero { border-bottom-color: rgba(11, 31, 77, .12) !important; }
#main > div.brand-area > .container,
.lp-body, .lp-social-proof {
  border-color: rgba(11, 31, 77, .13) !important;
  box-shadow: inset 0 1px 0 rgba(254, 249, 238, .95), 0 22px 46px -30px rgba(7, 21, 52, .32) !important;
}

/* ---- 15.1 the page head ----------------------------------------------------
   The intro band is the "blue cream white" sheet: warm cream under the crest,
   cooling to pale blue at its base, so the first panel reads as paper rather
   than as a hole punched in the ambient wash. */
/* §20.1: the hero paints through its ::before (frost) and ::after (art)
   layers, so nothing may land on the section box itself. */
/* the breadcrumb banner is a photograph of a near-white sky; the scrim that
   lifted light copy off it now has to lift navy copy off it instead */
main > section.breadcrumb-area { background-color: var(--wift-cream) !important; }
#main .breadcrumb-area::before {
  background: linear-gradient(180deg,
    rgba(254, 249, 238, .9) 0%,
    rgba(246, 249, 254, .82) 45%,
    rgba(233, 240, 251, .92) 100%) !important;
}
#main .breadcrumb-area :is(h1, h2, h3, span, a, li) { color: var(--gl-ink) !important; }
#main .breadcrumb-area .bread-crumb-title { color: var(--gl-ink) !important; }

/* ---- 15.2 line art ---------------------------------------------------------
   Every band declares two drawings: `--wift-art` (navy strokes, for light
   grounds) and `--wift-art-light` (white strokes, for dark ones). §5 reads the
   light pair because every sheet was smoked; the grounds are paper now. */
/* §20.1: the hero paints through its ::before (frost) and ::after (art)
   layers, so nothing may land on the section box itself. */
/* §5 pairs each page's declaration into one shorthand: `--wift-art` is always
   the navy-line drawing and `--wift-art-light` its white-line twin, so a sheet
   that switches ground only has to switch which pair it reads. */
main > section > .container:not(.wift-edu-bg),
main > section.about-area,
main > section.wift-cta > .container:not(.wift-edu-bg),
main > section.wift-app-statement > .container:not(.wift-edu-bg),
main > section.contact-area > .container:not(.wift-edu-bg),
main > section.wift-ideas > .container:not(.wift-edu-bg) {
  background-image: var(--wift-art) !important;
}
main > section.wift-ideas > .container:not(.wift-edu-bg) {
  background-image: var(--wift-art), url("../img/edu/edu-vector-01-library.png") !important;
}
/* §5's shorthand also sets a position and size per layer; the hero carries three
   layers (page drawing, study icons, grid), so its list has to be re-declared. */
/* §20.1: the hero paints through its ::before (frost) and ::after (art)
   layers, so nothing may land on the section box itself. */
@media (max-width: 767px) {
  /* §20.1: the hero paints through its ::before (frost) and ::after (art)
   layers, so nothing may land on the section box itself. */
}
/* the technical dimension line under a centred heading (§5) is drawn in pale
   blue and disappears on paper */
.section-title.center-align h2::after, .section-title.text-center h2::after, .wift-band-head .section-title h2::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cg fill='none' stroke='%230B1F4D' stroke-opacity='.42' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M8 6h104M16 2L8 6l8 4M104 2l8 4-8 4M60 1v10'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- 15.3 the two feature panels ------------------------------------------
   §4 built these as smoked glass over the navy field. On paper they are the
   inverse: a pressed cream sheet with a navy rim, still blurred so the ambient
   wash reads through it as depth. */
main .wift-app-statement > .container, main .wift-cta > .container {
  background: linear-gradient(145deg, rgba(254, 249, 238, .94), rgba(236, 243, 252, .86)) !important;
  border: 1px solid rgba(11, 31, 77, .16) !important;
  box-shadow: inset 0 1px 0 rgba(254, 249, 238, .98), 0 26px 52px -30px rgba(7, 21, 52, .3) !important;
}
main .wift-app-statement .wift-band-link, main .wift-app-statement .wift-eyebrow { color: var(--gl-amber) !important; }
main .wift-app-statement h2 { color: var(--gl-ink) !important; }

/* ---- 15.4 controls ---------------------------------------------------------
   §7 pinned `.btn` (a white chip) to navy ink and made `.btn.ss-btn` a ghost
   with white ink — correct on a smoked sheet, invisible on paper.
   `.btn2` stays the filled navy primary; that contrast is the page's anchor. */
#main .btn, #main .btn3 {
  background: #FEF9EE !important;
  border: 1px solid rgba(11, 31, 77, .22) !important;
  color: var(--wift-navy) !important;
}
#main :is(.btn:hover, .btn3:hover) { background: var(--wift-navy) !important; border-color: var(--wift-navy) !important; color: #FEF9EE !important; }
#main .btn.ss-btn, #main .btn.ss-btn.active {
  background: rgba(254, 249, 238, .7) !important;
  border: 1px solid rgba(11, 31, 77, .28) !important;
  color: var(--wift-navy) !important;
}
#main :is(.btn.ss-btn:hover, .btn.ss-btn.active:hover) {
  background: var(--wift-amber) !important;
  border-color: var(--wift-amber) !important;
  color: var(--wift-navy) !important;
}
#main .pricing-box .btn.ss-btn {
  background: var(--wift-navy) !important;
  border-color: var(--wift-navy) !important;
  color: #FEF9EE !important;
}
#main .pricing-box .btn.ss-btn:hover {
  background: var(--wift-amber) !important;
  border-color: var(--wift-amber) !important;
  color: var(--wift-navy) !important;
}
#main .pricing-box.active .btn.ss-btn:hover {
  background: var(--wift-navy) !important;
  border-color: var(--wift-navy) !important;
  color: #FEF9EE !important;
}

/* chips and inner panels: §8 gave them white frost. On paper the frost is the
   shadow of a chip, not the chip — press them instead. */
#main :is(.contact-box, .wift-mod-tile, .wift-post, .wift-faq-aside, .wift-locations-panel,
          .wift-app-statement-art, .wift-council-grid .wc-item, .wc-item .wc-body,
          .about-area .tab-content .tab-pane > .container > .row) {
  box-shadow: inset 0 1px 0 rgba(254, 249, 238, .9), 0 16px 36px -26px rgba(7, 21, 52, .34) !important;
}
main .contact-bg02, main .wift-promoter,
#main :is(.blog-area .single-post2, .blog-area .single-post3, .pricing-box,
          .wift-ideas .wi-list li) {
  background: var(--gl-panel) !important;
  border: 1px solid var(--gl-panel-edge) !important;
  box-shadow: inset 0 1px 0 rgba(254, 249, 238, .9), 0 16px 36px -26px rgba(7, 21, 52, .3) !important;
}
#main .pricing-box.active {
  background: rgba(11, 31, 77, .06) !important;
  border-color: rgba(138, 90, 0, .45) !important;
}
#main :is(.wift-partner-pills li, .wift-post-tag, .faq-btn, .wift-edu-links a:not(.btn):not(.btn2)) {
  background: rgba(11, 31, 77, .06) !important;
  border: 1px solid rgba(11, 31, 77, .14) !important;
}
#main .wift-post-tag { color: var(--wift-navy) !important; }
#main :is(.wift-mod-shot, .wift-post-thumb, .wift-mod-gallery-in figure, .s-about-img) {
  background: rgba(11, 31, 77, .05) !important;
  border: 1px solid rgba(11, 31, 77, .12) !important;
}
#main :is(.wift-article-stats li, .bsingle__content.news-text .admin, .post__tag .tag-cloud-link) {
  background: rgba(11, 31, 77, .05) !important;
  border: 1px solid rgba(11, 31, 77, .12) !important;
}
#main .wift-share :is(a, button) {
  background: rgba(11, 31, 77, .06) !important;
  border: 1px solid rgba(11, 31, 77, .16) !important;
  color: var(--wift-navy) !important;
}
#main .wift-share :is(a, button):hover {
  background: var(--wift-navy) !important;
  border-color: var(--wift-navy) !important;
  color: #FEF9EE !important;
}
#main .edm-pill, .wift-mods-chips a, .wift-modrow-covers li {
  background: linear-gradient(145deg, rgba(254, 249, 238, .95), rgba(236, 243, 252, .8)) !important;
  border: 1px solid rgba(11, 31, 77, .14) !important;
  box-shadow: inset 0 1px 0 rgba(254, 249, 238, .95), 0 8px 18px -12px rgba(7, 21, 52, .25);
}

/* form fields: §7 sank them into the sheet at rgba(6,16,38,.5). Paper wants the
   opposite — a well cut into the panel, outlined in navy. */
#main :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), textarea, select) {
  background: rgba(254, 249, 238, .85) !important;
  border-color: rgba(11, 31, 77, .26) !important;
  color: var(--gl-ink) !important;
}
#main :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), textarea, select):focus {
  border-color: var(--wift-navy) !important;
  background: #FEF9EE !important;
}

/* slider chrome: arrows and dots were white-on-smoke */
#main .slider-active .slick-arrow {
  background: rgba(254, 249, 238, .85) !important;
  border-color: rgba(11, 31, 77, .22) !important;
  color: var(--wift-navy) !important;
}
#main .slider-active .slick-arrow:hover { background: var(--wift-navy) !important; border-color: var(--wift-navy) !important; color: #FEF9EE !important; }
#main .slider-active .slick-dots li button { background: rgba(11, 31, 77, .22) !important; color: transparent !important; }
#main .slider-active .slick-dots li.slick-active button { background: var(--wift-navy) !important; }

/* ---- 15.5 nav --------------------------------------------------------------
   Two bugs, both the same mistake in reverse. The sticky bar is id-pinned to a
   navy gradient, and §3 + fix.css §11 painted its wordmark and links white on
   top of it. The resting bar sat on the cream head with navy ink while its crest
   was filtered to white.

   One state now: paper frost, navy ink, in both.

   wift.css:3460 pins the resting bar at `.header-area .menu-area` — two classes,
   no `.sticky-menu` — so it outranks every class-level rule in this file, fix.css
   §10 and edm.css §NAV included; that is why the bar kept a dark ground with
   white ink while its sticky twin went white. Matched at three classes here,
   with the id form for the sticky state. */
#header-sticky.menu-area:not(.sticky-menu),
.header-area .menu-area:not(.sticky-menu) {
  background: rgba(254, 249, 238, .72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px) !important; backdrop-filter: saturate(180%) blur(22px) !important;
  border-bottom: 1px solid rgba(11, 31, 77, .12) !important;
  box-shadow: 0 12px 30px -20px rgba(7, 21, 52, .3) !important;
}
/* §3 gave the bar a navy gradient and a white rim at three classes; both states
   are paper now, so the rim has to be the navy hairline like every other sheet. */
.header-area .menu-area.sticky-menu,
.header-three .menu-area.sticky-menu,
.header-area.header-three .menu-area.sticky-menu,
.header-area .menu-area:not(.sticky-menu) {
  border: 1px solid rgba(11, 31, 77, .13) !important;
}
#header-sticky.menu-area.sticky-menu,
.header-area .menu-area.sticky-menu,
.header-three .menu-area.sticky-menu,
.header-area.header-three .menu-area.sticky-menu {
  background: rgba(254, 249, 238, .82) !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px) !important; backdrop-filter: saturate(180%) blur(22px) !important;
  border-bottom: 1px solid rgba(11, 31, 77, .14) !important;
  box-shadow: 0 1px 0 rgba(11, 31, 77, .04), 0 12px 30px -18px rgba(7, 21, 52, .35) !important;
}
.header-area .menu-area:not(.sticky-menu) {
  /* centred like the sticky bar and the content column, not pinned left */
  /* one token now: --gl-w is shared by both nav states, every sheet and the subnav */
  width: var(--gl-w) !important;
  max-width: none !important;
  /* explicit margins, not `auto`: the bar's containing block is .header-area
     (full viewport), while the subnav centres inside #main's padded column.
     Auto margins put the bar off-centre when both blocks disagree. Symmetric
     fixed gutters keep it centred in its own block.
     Top gap removed: it read as an empty strip above the bar on first paint,
     since the page ground shows through and the card has no border there. */
  margin: 0 auto !important; border-radius: 22px !important;
}
/* ---- crest vs row height: one uniform bar ---------------------------------
   wift.css reserves a min-height per tier (3743: 88px at 992+, 3771: 72px under
   1400, 3796: 80px) while fix.css:213 pins the crest at `height: 84px !important`
   and glass §15 re-pins it to 62px. Three sources, no agreement — so the tallest
   column either overflowed its reserved row or left slack in it, and with
   `align-items: center` that surplus split unevenly against the taller login
   column: measured 26px above the crest and 1px below it. "Top gap more, not
   uniform" was this, not a stray margin.

   Fix by construction: let the row size itself to its content (`min-height: 0`)
   and give the bar symmetric block padding. Whatever the crest ends up being,
   top and bottom gaps are then equal by definition, at every width, with no tier
   to keep in sync. */
@media (min-width: 992px) {
  /* --bs-gutter-y was still set on this row. edm.css turns it into a grid, where
     a row-gap of 28.8px between the four columns (the fourth is display:none) adds
     phantom height: measured row 86px against a 62px crest, with all of the extra
     landing above the mark. Zero it so the row equals its tallest column. */
  .header-area .second-menu > .row { min-height: 0 !important; --bs-gutter-y: 0; row-gap: 0 !important; }
  .header-area .second-menu .wift-logo img { height: 62px !important; width: 62px !important; }
  /* 13px + 62px crest + 13px = 88px, matching the height the bar had before.
     The padding goes on .second-menu (the frosted card itself); #header-sticky is
     `.menu-area`, an outer wrapper with no border or radius, so padding there is
     invisible and was silently doing nothing. */
  .header-area .menu-area:not(.sticky-menu) > .container > .second-menu {
    padding-top: 13px !important; padding-bottom: 13px !important;
  }
}
/* the ink, at the specificity wift.css uses to pin it white */
.header-area .second-menu .wift-logo-name,
.header-area .menu-area.sticky-menu .wift-logo-name,
.header-three .sticky-menu .wift-logo-name,
#header-sticky .wift-logo-name { color: var(--wift-navy) !important; }
/* both nav states are light now, so §3's white ink and §7's white-on-glass
   hamburger rules are the bug wherever they still reach. `.second-menu` is what
   wift.css:3504-3510 pins white at 0-3-1; matching that depth clears them. */
.header-area .second-menu .main-menu > nav > ul > li > a,
.header-area .second-menu .login .menu-tigger img,
.header-area .second-menu .login ul,
.header-area .menu-area .main-menu > nav > ul > li > a,
.header-area .menu-area .login .menu-tigger img {
  -webkit-filter: none !important; filter: none !important;
  opacity: 1 !important;
  color: rgba(11, 31, 77, .78) !important;
  border-color: rgba(11, 31, 77, .18) !important;
}
.header-area .second-menu .login .menu-tigger,
.header-area .menu-area .login .menu-tigger {
  background: rgba(11, 31, 77, .06) !important;
  border-color: rgba(11, 31, 77, .2) !important;
}
.header-area .second-menu .login .menu-tigger:hover,
.header-area .menu-area .login .menu-tigger:hover {
  background: var(--wift-amber) !important;
  border-color: var(--wift-amber) !important;
}
/* the hamburger is an <i>, not the <img> those rules name — style.css:618 keeps
   its ink white, so it has to be pinned on the anchor as well as the sticky bar */
.header-area .second-menu .login .menu-tigger i,
.header-area .menu-area .login .menu-tigger i,
.header-area .menu-area.sticky-menu .login .menu-tigger i,
.header-three .sticky-menu .login .menu-tigger i { color: var(--wift-navy) !important; }
.header-area .second-menu .main-menu > nav > ul > li:hover > a,
.header-area .menu-area .main-menu > nav > ul > li:hover > a { color: var(--wift-navy) !important; }
.header-area .second-menu .main-menu > nav > ul > li > a,
.header-area .menu-area.sticky-menu .main-menu > nav > ul > li > a,
.header-three .sticky-menu .main-menu > nav > ul > li > a { color: rgba(11, 31, 77, .78) !important; }
.header-area .menu-area.sticky-menu .main-menu > nav > ul > li:hover > a,
.header-area .menu-area.sticky-menu .main-menu > nav > ul > li.active > a,
.header-area .menu-area.sticky-menu .main-menu > nav > ul > li.current > a,
.header-three .sticky-menu .main-menu ul li a:hover,
#header-sticky .main-menu ul li a:hover { color: var(--wift-navy) !important; }
/* the crest: wift.css ships one navy artwork and filters it white for dark
   bars. On paper the filter is the bug — undo it and let the art be itself. */
.wift-logo-mark--dark { -webkit-filter: none !important; filter: none !important; }
.header-area .menu-area.sticky-menu .login .menu-tigger img,
.header-three .sticky-menu .login .menu-tigger img { filter: none !important; opacity: 1 !important; }
.header-area .menu-area.sticky-menu .login .menu-tigger,
.header-three .sticky-menu .login .menu-tigger { background: rgba(11, 31, 77, .06) !important; border-color: rgba(11, 31, 77, .2) !important; }
.header-area .menu-area.sticky-menu .login .menu-tigger:hover,
.header-three .sticky-menu .login .menu-tigger:hover { background: var(--wift-amber) !important; border-color: var(--wift-amber) !important; }
.header-area .menu-area.sticky-menu .login .menu-tigger i,
.header-three .sticky-menu .login .menu-tigger i { color: var(--wift-navy) !important; }
/* dropdowns hang off the bar onto the page: they keep their own paper */
.header-area .main-menu ul ul, .header-area .main-menu .sub-menu, .menu .sub-menu, .menu .children {
  background: #FEF9EE !important;
  border: 1px solid rgba(11, 31, 77, .14) !important;
  box-shadow: 0 18px 44px -18px rgba(7, 21, 52, .35) !important;
}
.header-area .main-menu ul ul li a { color: rgba(11, 31, 77, .8) !important; }
.header-area .main-menu ul ul li a:hover { color: var(--gl-amber) !important; }

/* the "on this page" pill: fix.css §10 gives it a navy gradient and glass.css
   §7 pins its labels light. It is a control strip on paper now, and only the
   current item keeps a filled ground. */
/* The strip is a control, not a band: it should read as a pill sitting in the
   content column, not as a full-width slab. It was 1240px — the nav bar's width —
   while every sheet below it is --gl-w (1120px), so it hung 60px proud on both
   sides and its blurred ground covered the copy underneath.

   Sizing goes on the inner element, which js/wift.js builds as
   `div.container.wift-subnav-in`. Bootstrap's responsive `.container` rules are
   fixed widths at each breakpoint, so `width: max-content` on the outer <nav> is
   moot — the child fills whatever the container grants it. Making that child
   shrink-to-fit is what actually narrows the visible bar. */
.wift-subnav, nav.wift-subnav {
  background: rgba(254, 249, 238, .58) !important;
  -webkit-backdrop-filter: saturate(165%) blur(22px) !important; backdrop-filter: saturate(165%) blur(22px) !important;
  border: 1px solid rgba(11, 31, 77, .13) !important;
  box-shadow: 0 16px 32px -20px rgba(7, 21, 52, .35) !important;
  /* Was 1240px — the nav bar's width — while every sheet below it is --gl-w
     (1120px), so the strip hung 60px proud on both sides. */
  width: min(var(--gl-w), calc(100% - 2 * var(--gl-gut))) !important;
  max-width: none !important;
  margin-left: auto !important; margin-right: auto !important;
  border-radius: 999px;
}
/* Shrink-to-fit where the labels allow it. js/wift.js builds the child as
   `div.container.wift-subnav-in`, and bootstrap pins `.container` to a fixed
   max-width per breakpoint — a block child fills that no matter its own width,
   which is why plain `max-content` did nothing. Flex makes it a fit-content item.
   Index has eight pills totalling ~1202px of natural width against a 1120px
   column, so this resolves to the cap there and the row scrolls (it already had
   overflow-x:auto); on the shorter pages it collapses to hug its contents. */
.wift-subnav { display: flex; justify-content: center; }
.wift-subnav > .wift-subnav-in {
  flex: 0 1 auto;
  width: max-content !important;
  max-width: 100% !important;
  padding-left: 24px !important; padding-right: 24px !important;
  padding-top: 8px !important; padding-bottom: 8px !important;
}
#main .wift-subnav-links a { color: rgba(11, 31, 77, .72) !important; }
#main .wift-subnav-links a:hover { color: var(--wift-navy) !important; }
#main .wift-subnav-lbl { color: var(--gl-amber) !important; }

/* the top utility strip sits on the cream head, not on the navy field */
.header-area .header-mid .wift-logo-name,
.header-three .header-mid .wift-logo .wift-logo-name { color: var(--wift-navy) !important; }
.header-area .header-mid .wift-logo-sub { color: rgba(11, 31, 77, .62) !important; }
.header-area .header-mid .header-cta .call-box .text span { color: rgba(11, 31, 77, .62) !important; }
.header-area .header-mid .header-cta .call-box .text strong { color: var(--wift-navy) !important; }
.header-area .header-mid .header-cta ul li .icon i { color: var(--wift-navy) !important; }
.header-area .header-mid .call-box .icon { border-color: rgba(11, 31, 77, .28) !important; }

/* ---- 15.6 footer -----------------------------------------------------------
   §7 made it the last smoked panel. It is now the last sheet: same paper as the
   bands above, separated by an edge rather than by darkness. */
footer.footer-bg, footer.footer-bg .footer-top, footer.footer-bg .copyright-wrap {
  background-color: #FEF9EE !important;
  border-top: 1px solid rgba(11, 31, 77, .14) !important;
}
footer.footer-bg .footer-top { border-bottom: 1px solid rgba(11, 31, 77, .08) !important; }
footer.footer-bg .copyright-wrap { border-top: 1px solid rgba(11, 31, 77, .08) !important; }
footer.footer-bg .wift-logo .wift-logo-name, footer.footer-bg .wift-logo .wift-logo-sub { color: var(--wift-navy) !important; }
/* The hairline between "WIFT" and the full institute name. wift.css:1553 sets it
   to `2px solid var(--wift-amber)`, but --wift-amber is #FEF9EE — the same cream as
   the footer ground — so the rule was invisible at that token value, and whatever
   painted there read as a stray dark stroke crowding the text. Match every other
   footer hairline (lines 959/961/962): 1px navy at low alpha, with room around it. */
@media (min-width: 992px) {
  footer.footer-bg .f-about .wift-logo .wift-logo-sub {
    border-left: 1px solid rgba(11, 31, 77, .14) !important;
    padding-left: 16px !important;
  }
}
footer.footer-bg .btn, footer.footer-bg .btn2 { color: #FEF9EE !important; }
.lp-footer { background: #FEF9EE !important; border-top: 1px solid rgba(11, 31, 77, .14) !important; }

/* ---- 15.7 surfaces outside the page flow ----------------------------------
   The cookie bar covers the page, so it stays dark to read as an overlay rather
   than content; its ink is already light. The drawer used to be in this group —
   §8 now keeps it paper, since its links are navy. The preloader belongs to §18. */
.wift-consent { background: rgba(9, 22, 51, .94) !important; }

/* ---- 15.8 amber as ink ------------------------------------------------------
   `--gl-amber` went to a dark gold because #FFC72C on paper is 1.6:1, but the
   vendor sheets and §4/§7 pin a long tail of elements to `var(--wift-amber)`
   directly — eyebrows, band links, seat icons, closing kickers. Those are all
   text, so they follow the token, not the brand fill. The fills (chips, hover
   grounds, dots) keep the bright colour with navy ink on them.
   ========================================================================== */
#main :is(.wift-eyebrow, .wift-band-link, .wift-seat i, .wift-closing blockquote,
          .wift-mod-skills .wift-mod-head .wift-eyebrow,
          main .contact-area .section-title h5, .services-hover .second-services-content a:hover,
          .s-single-services .h-service h5 a:hover, footer.footer-bg .footer-widget > a,
          .wift-motto-hero, .wift-modnav a) { color: var(--gl-amber) !important; }
/* Two of the headings above sit on genuinely DARK ground and must keep light ink:
   `.s-single-services` is navy-deep (wift.css:2138) with a dark scrim under its
   copy, and `.skill-area .skills-title h5` is a navy pill — wift.css:1400-1407
   gives it `background: var(--wift-navy)` with cream text. Both fall to 1.13:1 /
   2.69:1 once §15.8's unscoped `h5` reaches them.

   TWO earlier rules reached this element with a bare `h5` inside :is(): line 221 and
   line 992. Both are `#main :is(...)` at 1-0-1 with !important, so beating one of
   them is not enough. Rather than out-rank a blanket rule, `h5` has been removed
   from both selector lists — an unscoped heading-to-amber default is what broke
   every heading that sits on dark ground.

   Kept narrow on purpose: an earlier version also matched a bare `p`, which turned
   the skill band's body copy cream-on-cream. */
#skill .skills-title h5,
#main .skill-area .skills-title h5,
#main .s-single-services .h-service :is(h5, h5 a) { color: #FEF9EE !important; }

main .newslater-area :is(h1, h2, h3, h4, h5, h6, p, li, span, small, strong, a):not(.btn2) { color: var(--wift-navy) !important; }

/* ==========================================================================
   16. SPACING — the dead areas measured off the rendered boxes, not guessed
   probe_band.js read each band's children at 1440px and printed the biggest
   empty run inside it. Three causes turned out to be real; the padding itself
   was not one of them (every sheet runs 56/48 and no inner gap exceeds 14% of
   its column except the two below).
   ========================================================================== */

/* --- 16.1 a leftover from the tabs that no longer exist -------------------
   The about band used to carry its tab labels down a rotated rail on the left
   edge, with a "Scroll Down" link bolted to the same rail. wift.css:1344 made
   the tabs a horizontal row and gave them their own rule for the rail, but
   never undid style.css:1668's rotate(-90deg) on .scroll-btn — so index.html
   kept a 27x278 vertical strip pinned at left:50%, top:50% inside the sheet.
   On paper it is a visible line of ink running up the margin, and it pushes the
   optical centre of the band sideways. */
main > section.about-area .scroll-btn { display: none !important; }

/* --- 16.2 the roadmap list ends short of the panel it sits in -------------
   At 1440px the left column holds 950px of programme-at-a-glance and the right
   872px of model + photograph, so bootstrap's default `align-items: stretch`
   grows the shorter column and leaves 78px of blank glass under the sixth step.
   Centring the pair puts that slack half above and half below instead of all of
   it in one corner, which is what the eye reads as balanced. */
main > section.locations-area > .container > .row { align-items: center !important; }
@media (max-width: 991px) {
  /* stacked, the columns are meant to run one after the other */
  main > section.locations-area > .container > .row { align-items: flex-start !important; }
}

/* --- 16.3 hero band padding ------------------------------------------------
   The intro sheet carries 112px above and 72px below its own content while the
   nav card floats over it; every other band uses --wift-sheet-pad. Left alone:
   the head is the only band that has to clear a floating bar, and §15 gives it
   a cream ground rather than a sheet inset. */

/* ==========================================================================
   17. FROSTED WHITE NAV + LANGUAGE DROPDOWN + MOTION
   The reader asked for the bar to stop being blue-tinted and read as plain
   frosted glass, like a sheet of ground ice over the page. That is mostly a
   colour change — but it also changes what the blur can be asked to do: a navy
   bar needed no backdrop at all, a white one has to show the copy scrolling
   under it or it looks like a dead rectangle. So the blur goes up, the fill
   comes down, and the ink stays navy in both states.
   ========================================================================== */
/* frosted ice: translucent warm-white fill + real blur, so content scrolling
   under the bar reads through it. Opacity kept high enough that navy sections
   behind never drag the surface grey-blue. */
#header-sticky.menu-area:not(.sticky-menu),
#header-sticky.menu-area.sticky-menu,
.header-area .menu-area:not(.sticky-menu),
.header-area .menu-area.sticky-menu,
.header-three .menu-area.sticky-menu,
.header-area.header-three .menu-area.sticky-menu {
  background: rgba(254, 249, 238, .62) !important;
  -webkit-backdrop-filter: saturate(165%) blur(24px) brightness(1.02) !important;
  backdrop-filter: saturate(165%) blur(24px) brightness(1.02) !important;
  border: 1px solid rgba(11, 31, 77, .10) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 1px 0 rgba(11, 31, 77, .06), 0 18px 40px -24px rgba(7, 21, 52, .35) !important;
}
/* the top utility strip shares the same ice */
.header-area .header-mid { background: transparent !important; }

/* ---- 17.1 motion ----------------------------------------------------------
   Three moments only, so the bar feels built rather than painted:
   a) the links arrive once, left to right, when the page settles;
   b) hover draws an engineering dimension line under the label;
   c) the sticky state shrinks the crest and deepens the frost.
   Everything is gated on prefers-reduced-motion below. */
@keyframes wift-nav-in {
  from { opacity: 0; transform: translateY(-9px); }
  to   { opacity: 1; transform: none; }
}
#header-sticky .second-menu .main-menu > nav > ul > li,
#header-sticky .login > ul > li {
  animation: wift-nav-in .5s cubic-bezier(.22, .61, .36, 1) both;
}
#header-sticky .second-menu .main-menu > nav > ul > li:nth-child(1) { animation-delay: .05s; }
#header-sticky .second-menu .main-menu > nav > ul > li:nth-child(2) { animation-delay: .10s; }
#header-sticky .second-menu .main-menu > nav > ul > li:nth-child(3) { animation-delay: .15s; }
#header-sticky .second-menu .main-menu > nav > ul > li:nth-child(4) { animation-delay: .20s; }
#header-sticky .second-menu .main-menu > nav > ul > li:nth-child(5) { animation-delay: .25s; }
#header-sticky .second-menu .main-menu > nav > ul > li:nth-child(6) { animation-delay: .30s; }
#header-sticky .second-menu .main-menu > nav > ul > li:nth-child(7) { animation-delay: .35s; }
#header-sticky .login > ul > li:nth-child(1) { animation-delay: .40s; }
#header-sticky .login > ul > li:nth-child(2) { animation-delay: .45s; }
#header-sticky .login > ul > li:nth-child(3) { animation-delay: .50s; }

/* the underline sweeps out from the centre like a dimension line being drawn */
#header-sticky .main-menu > nav > ul > li > a { position: relative; }
#header-sticky .main-menu > nav > ul > li > a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 2px; height: 2px;
  background: var(--wift-amber); border-radius: 2px;
  transition: left .22s ease, right .22s ease;
}
#header-sticky .main-menu > nav > ul > li:hover > a::after,
#header-sticky .main-menu > nav > ul > li.current > a::after,
#header-sticky .main-menu > nav > ul > li.active > a::after { left: 0; right: 0; }

/* the bar tightens as it sticks: crest down, frost deeper */
#header-sticky .wift-logo img { transition: height .28s ease, filter .28s ease; }
#header-sticky.menu-area.sticky-menu .wift-logo img { height: 62px !important; }
#header-sticky.menu-area.sticky-menu {
  background: rgba(254, 249, 238, .74) !important;
  box-shadow: inset 0 1px 0 rgba(254, 249, 238, .95), 0 1px 0 rgba(11, 31, 77, .08), 0 22px 46px -26px rgba(7, 21, 52, .45) !important;
}
@media (max-width: 991px) {
  #header-sticky.menu-area.sticky-menu .wift-logo img { height: 50px !important; }
}

/* ---- 17.2 the language control -------------------------------------------
   A chip in the bar's own rhythm: globe, current code, caret. The panel is a
   scrollable list because twenty-two entries will not fit any viewport folded
   flat, so it scrolls inside a fixed column and keeps its header rule. */
.wift-lang { display: inline-block; position: relative; }
.wift-lang-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--wift-navy); background: rgba(254, 249, 238, .66);
  border: 1px solid rgba(11, 31, 77, .18); border-radius: 999px;
  padding: 8px 14px; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.wift-lang-btn:hover { background: var(--wift-amber); border-color: var(--wift-amber); }
.wift-lang-btn:focus-visible { outline: 2px solid var(--wift-navy); outline-offset: 3px; }
.wift-lang-btn i:first-child { font-size: 15px; }
.wift-lang-cur { min-width: 2ch; text-align: center; }
.wift-lang-caret { font-size: 10px; transition: transform .22s ease; }
.wift-lang.is-open .wift-lang-caret { transform: rotate(180deg); }
.wift-lang.is-open .wift-lang-btn { background: #FEF9EE; border-color: var(--wift-navy); }

.wift-lang-menu {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 1700;
  width: min(300px, calc(100vw - 32px)); max-height: min(60vh, 480px); overflow-y: auto;
  padding: 8px; border-radius: 20px;
  background: rgba(254, 249, 238, .82);
  -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid rgba(254, 249, 238, .8);
  box-shadow: inset 0 1px 0 rgba(254, 249, 238, .95), 0 26px 54px -24px rgba(7, 21, 52, .45);
  opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none;
  transition: opacity .2s ease, transform .22s cubic-bezier(.22, .61, .36, 1);
  scrollbar-width: thin;
}
.wift-lang.is-shown .wift-lang-menu { opacity: 1; transform: none; pointer-events: auto; }
.wift-lang-menu[hidden] { display: none; }
.wift-lang-menu [data-lang] {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; text-align: left; cursor: pointer;
  padding: 9px 12px; border-radius: 12px; border: 0; background: transparent;
  color: rgba(11, 31, 77, .86); transition: background .16s ease, color .16s ease;
}
.wift-lang-menu [data-lang]:hover { background: rgba(11, 31, 77, .07); color: var(--wift-navy); }
.wift-lang-menu [data-lang].is-on { background: var(--wift-amber); color: var(--wift-navy); font-weight: 600; }
.wift-lang-native { flex: 0 0 auto; font-size: 15px; line-height: 1.35; }
.wift-lang-en { flex: 1 1 auto; font-size: 12px; opacity: .62; letter-spacing: .02em; }
.wift-lang-tick { margin-left: auto; font-size: 12px; }
@media (max-width: 1199px) {
  /* the bar runs out of room before the language control does: keep the chip,
     drop the English gloss so the list still fits the column */
  .wift-lang-menu { width: min(248px, calc(100vw - 28px)); }
}

/* ---- 17.4 stacking --------------------------------------------------------
   style.css:675 gives .sticky-menu `z-index: 5 !important`, and wift.css:3391
   pins `.header-area` itself to `fixed !important; z-index: 1000`. So the bar is
   a fixed child inside a fixed parent, and the language panel — a descendant —
   cannot escape that context no matter what z-index it carries. The parent has
   to be raised, which is what puts the dropdown over the subnav strip below it. */
#header-sticky.menu-area, #header-sticky.menu-area.sticky-menu { z-index: 1800 !important; }
.header-area { z-index: 1800 !important; }
.wift-lang.is-open { z-index: 1900; position: relative; }

/* ---- 17.3 reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #header-sticky .second-menu .main-menu > nav > ul > li,
  #header-sticky .login > ul > li { animation: none !important; }
  main > section.wift-edu-hero .wift-reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
  #header-sticky .main-menu > nav > ul > li > a::after { transition: none; }
  #header-sticky .wift-logo img, .wift-lang-btn, .wift-lang-menu, .wift-lang-caret { transition: none !important; }
}

/* ---- 17.5 the head comes up with the bar ---------------------------------
   The nav links now stagger in (§17.1), and on index.html the crest, chip and
   headline under it were static — so the page read as a still photograph with a
   curtain drawn over the menu. The same curve carries the head up instead, each
   block a beat behind the one above it, all finishing before the first sheet. */
@keyframes wift-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
main > section.wift-edu-hero .wift-reveal:not(.wift-reveal-in) {
  animation: wift-rise .62s cubic-bezier(.22, .61, .36, 1) both;
}
main > section.wift-edu-hero .wift-reveal:nth-child(1) { animation-delay: .12s; }
main > section.wift-edu-hero .wift-reveal:nth-child(2) { animation-delay: .20s; }
main > section.wift-edu-hero .wift-reveal:nth-child(3) { animation-delay: .28s; }
main > section.wift-edu-hero .wift-reveal:nth-child(4) { animation-delay: .36s; }
main > section.wift-edu-hero .wift-reveal:nth-child(5) { animation-delay: .44s; }

/* ==========================================================================
   18. LOADING SCREEN — the WIFT crest, drawn
   The reader asked for a logo on the loading screen. It already had one, but two
   things were wrong with it: §9 and §15.7 both swapped in `wift-crest-white.png`
   over wift.css's colour seal, so a white silhouette floated on a navy field that
   no longer exists anywhere else on the site; and wift.css:847 parks #loading at
   `bottom: 36%`, which is only centred when the sheet is full height — measured
   here it sat 605px from the left edge of a 1440 viewport, i.e. off to one side.

   So: the real crest artwork (`img/logo/wift-crest-nav.png`, the same file every
   page header uses), centred by inset + margin:auto rather than by a bottom
   offset, on the cream ground the head now uses. The skyline mask comes back as
   navy ink at low opacity instead of white, and the counter under the seal is
   navy on paper. Entrance is a draw-on: the seal scales up and fades while the
   skyline wipes from the ground line, which is the metaphor the band was built
   around in the first place.
   ========================================================================== */
#preloader {
  background: var(--wift-cream) none !important;
}
/* the blueprint skyline behind the seal is now a real inline SVG that draws
   itself (§19); wift.css's masked PNG would double up under it, so it stands down */
#preloader::before { display: none !important; }
/* the seal: real crest, true centre, sized off the shorter viewport axis */
#loading {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: min(188px, 42vw, 34vh) !important;
  height: auto !important;
  aspect-ratio: 320 / 292;
  margin: auto !important;
  /* lifted a little so the seal sits optically centred above its own counter and
     the skyline, rather than dead-centre on a box whose floor is occupied */
  transform: translateY(-7%);
  background: url("../img/logo/wift-crest-nav.png") center / contain no-repeat !important;
  animation: wift-seal-draw .62s cubic-bezier(.22, .61, .36, 1) both !important;
}
/* main.js hangs the 0-100 readout off #loading's bottom edge; with the seal
   re-centred that edge is inside the sheet, so the gauge needs to clear it. */
#loading .wift-progress { top: calc(100% + 10px) !important; }
.wift-progress-num { color: rgba(11, 31, 77, .68) !important; }
.wift-progress-track { background: rgba(11, 31, 77, .14) !important; }
.wift-progress-track i { background: var(--wift-navy) !important; }

@keyframes wift-seal-draw {
  from { opacity: 0; transform: translateY(-7%) scale(.9); }
  to   { opacity: 1; transform: translateY(-7%) scale(1); }
}
/* the skyline wipe is wift.css's `wift-build`; give it room to finish before the
   sheet starts fading (main.js holds it for ~800ms) */
#preloader::before { animation-duration: .7s !important; animation-delay: .06s !important; }

@media (max-width: 575px) {
  #loading { width: min(150px, 46vw, 26vh) !important; }
  #preloader::before { opacity: .12 !important; }
}
@media (prefers-reduced-motion: reduce) {
  #loading { animation: none !important; }
  #preloader::before { animation: none !important; clip-path: none !important; }
}

/* ==========================================================================
   19. THE LOADING PLATE — a blueprint that inks itself on behind the crest
   img/wift-blueprint-plate.svg is inline markup, so its geometry is reachable
   from here and every stroke is currentColor. Three things make it read as a
   drawing being made rather than an image fading in:
     - `pathLength="1"` on every path normalises its length to 0..1, so one
       dash-offset keyframe draws shapes of any real length in the same time;
     - the groups are staggered grid -> axis -> marks -> bay -> dimensions ->
       crane, which is the order a plate is laid out in;
     - the fills (the mm labels) come up last, after their lines exist.
   The sheet's own timing budget is main.js's ~800ms, so the whole curve has to
   finish inside it; anything slower gets cut off mid-stroke.
   ========================================================================== */
.wift-preloader-art {
  position: absolute;
  left: 50%;
  bottom: 0;
  /* the plate is a drawing of a bay and a crane, so it belongs on the sheet's
     floor line; sized off viewport *height* rather than width keeps the whole
     470-unit canvas above the fold on any screen, which a width-driven box did
     not — at 1440x900 the dimensions were running off the bottom edge */
  width: auto;
  height: min(62vh, 470px);
  aspect-ratio: 900 / 470;
  transform: translateX(-50%);
  color: var(--wift-navy);
  opacity: .2;
  pointer-events: none;
}
.wift-preloader-art [pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: wpa-ink .62s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes wpa-ink { to { stroke-dashoffset: 0; } }
@keyframes wpa-fade { from { opacity: 0; } to { opacity: 1; } }

.wift-preloader-art .wpa-grid    > [pathLength] { animation-duration: .5s; animation-delay: 0s; }
.wift-preloader-art .wpa-axis    > [pathLength] { animation-delay: .10s; }
.wift-preloader-art .wpa-marks   > [pathLength] { animation-delay: .16s; }
.wift-preloader-art .wpa-bay     > [pathLength] { animation-delay: .22s; }
.wift-preloader-art .wpa-dim     > [pathLength] { animation-delay: .34s; }
.wift-preloader-art .wpa-crane   > [pathLength] { animation-delay: .30s; }
.wift-preloader-art .wpa-stack   > [pathLength] { animation-delay: .40s; }
.wift-preloader-art .wpa-text > text { opacity: 0; animation: wpa-fade .3s ease .5s forwards; }

/* the seal sits over the plate, so the ground behind it is frosted away: the
   drawing fades under the crest instead of competing with it. The frost has to be
   a square that contains the roundel — the artwork is 320x292 with transparent
   corners, so a tight box would let the lines cross the seal's own face.
   fix.css:180 runs `*, *::before, *::after { backdrop-filter: none !important }`
   to stop the whole page re-blurring a moving backdrop, which also killed this
   one. An id selector at the same weight as that universal reset is what clears
   it, and only this element gets the filter back. */
#preloader #loading {
  padding: 12%;
  background-clip: content-box;
  -webkit-backdrop-filter: blur(14px) saturate(140%) brightness(1.04) !important;
  backdrop-filter: blur(14px) saturate(140%) brightness(1.04) !important;
  border-radius: 34px;
}

@media (max-width: 575px) {
  .wift-preloader-art { opacity: .15; height: min(46vh, 300px); }
  #loading { border-radius: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  /* no draw-on: the finished plate, nothing half-inked */
  .wift-preloader-art [pathLength] { animation: none !important; stroke-dashoffset: 0 !important; }
  .wift-preloader-art .wpa-text > text { animation: none !important; opacity: 1 !important; }
  #preloader #loading { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* ==========================================================================
   20. WHITE AS THE ACCENT
   The reader pointed at the hero's own white — the chip behind "Industry-led ·
   Non-profit · Hands-on" — and asked for that white everywhere. It becomes the
   page's accent surface: sheets, cards, chips, both nav states and the loading
   plate all sit on it, with navy carrying the ink and amber only ever filling.
   A single token drives it, so a future tint change is one line.
   ========================================================================== */
:root {
  --gl-white: #FEF9EE;
  --gl-white-soft: rgba(254, 249, 238, .82);
  --gl-white-line: rgba(254, 249, 238, .9);
  --wift-glass-panel: #FCF5E6;
  --wift-glass-panel-blue: #FCF5E6;
  --wift-glass-panel-dark: #FCF5E6;
  --gl-fill: linear-gradient(145deg, #FEF9EE 0%, #F8F4EA 100%);
  --gl-tint: linear-gradient(145deg, #FEF9EE 0%, #FEF9EE 100%);
}
main > section { --wift-sheet: #FCF5E6; }
main > section:where(:nth-of-type(even)) { --wift-sheet: #FCF5E6; }
main > section.contact-area, main > section.wift-cta, main > section.wift-app-statement { --wift-sheet: #FCF5E6; }

/* Sheets are frosted glass, not painted board. Two things were blocking that:
   this rule set an OPAQUE fill, and css/fix.css:181 only admits blur on
   `section > .container` — so every band here did get a backdrop-filter, then
   had it hidden behind 100% coverage. Dropping the alpha to .72 lets the warm
   ambient ground read through the frost, which is what makes it legible as glass.

   Contrast holds: at .72 over the darkest point of the ground (#F8EDD4) the panel
   still lands at about #FEFAF0, so navy ink stays ~13:1. Going much lighter than
   .55 would take the frost away entirely; going much darker loses the see-through. */
#main > section:not(.breadcrumb-area):not(.wift-edu-hero) > .container:not(.wift-edu-bg),
#main > section.about-area,
#main article.wift-article > .container,
#main > div.brand-area > .container {
  background: linear-gradient(145deg, rgba(254, 249, 238, .78) 0%, rgba(250, 244, 231, .66) 100%) !important;
  -webkit-backdrop-filter: saturate(165%) blur(22px) !important; backdrop-filter: saturate(165%) blur(22px) !important;
  border: 1px solid rgba(11, 31, 77, .1) !important;
  box-shadow: inset 0 1px 0 var(--gl-white-line), 0 2px 0 rgba(11, 31, 77, .02), 0 26px 52px -28px rgba(7, 21, 52, .3) !important;
}
main > section:where(:nth-of-type(even)) > .container:not(.wift-edu-bg) {
  background: linear-gradient(145deg, rgba(254, 249, 238, .78) 0%, rgba(250, 244, 231, .66) 100%) !important;
}
/* inner panels keep a whisper of grey so they still read as raised off the sheet */
#main :is(.contact-box, .wift-mod-tile, .wift-post, .wift-faq-aside, .wift-locations-panel,
          .pricing-box, .wift-council-grid .wc-item, .wc-item .wc-body,
          .wift-ideas .wi-list li, .wift-promoter, .contact-bg02,
          .blog-area .single-post2, .blog-area .single-post3) {
  background: #FEF9EE !important;
  border: 1px solid rgba(11, 31, 77, .12) !important;
  box-shadow: inset 0 1px 0 var(--gl-white-line), 0 16px 34px -24px rgba(7, 21, 52, .28) !important;
}
#main .pricing-box.active {
  background: #FEF9EE !important;
  border-color: rgba(138, 90, 0, .5) !important;
  box-shadow: inset 0 1px 0 var(--gl-white-line), 0 0 0 2px rgba(254, 249, 238, .5), 0 18px 38px -24px rgba(7, 21, 52, .3) !important;
}
/* chips: white bodies with a navy hairline, amber kept for fills under navy ink */
#main :is(.wift-partner-pills li, .wift-post-tag, .faq-btn, .edm-pill,
          .wift-modrow-covers li, .wift-edu-links a:not(.btn):not(.btn2)) {
  background: #FEF9EE !important;
  border: 1px solid rgba(11, 31, 77, .16) !important;
  color: var(--wift-navy) !important;
  box-shadow: 0 8px 18px -14px rgba(7, 21, 52, .3) !important;
}
#main :is(.wift-article-stats li, .bsingle__content.news-text .admin, .post__tag .tag-cloud-link,
          .wift-share :is(a, button), .wift-mod-shot, .wift-post-thumb,
          .wift-mod-gallery-in figure, .s-about-img) {
  background: #FEF9EE !important;
  border: 1px solid rgba(11, 31, 77, .14) !important;
}
/* Ground tone across all pages: warm cream #FEF9EE with subtle ambient lighting */
.wift-ambient { background: linear-gradient(180deg, #FCF4E1 0%, #F8EDD4 52%, #FCF4E1 100%) !important; }
.wift-ambient i { display: block !important; }

/* ==========================================================================
   20.1 HERO = BLUEPRINT GROUND + FROSTED CARD + SHARP COPY
   Three layers, bottom to top. Getting them in this order is the whole fix.

   L1  the section paints the blueprint grid and the page's line-art as its own
       background. Unfiltered, so it has crisp structure for the glass to bend.
   L2  ::before is a translucent card floating over that drawing and carries the
       backdrop-filter. It blurs what is BEHIND the element — the grid and art —
       which is exactly the effect asked for.
   L3  > .container is lifted to z-index:1 so crest, headline and buttons stay
       sharp on top of the frost.

   Two failure modes this replaces, both from putting the filter on the wrong box:
   - filter on the SECTION blurred its own descendants (paint order puts children
     above the section background), giving an out-of-focus page;
   - the drawing on ::after, i.e. ABOVE the glass, so the blur had a flat fill to
     sample and appeared to do nothing at all.
   ========================================================================== */

/* L1 — blueprint ground on the band itself.
   Layer count matters: `--gl-grid` expands to FOUR gradients (fine ruling ×2 plus
   coarse ×2), so behind it sit the study-icons plate and the page's own line-art —
   seven layers total. repeat / position / size must list seven entries or they
   cycle from the start and mis-align the art. */
main > section.wift-edu-hero {
  position: relative;
  background-color: var(--wift-cream) !important;
  background-image: var(--gl-grid), url("../img/edu/edu-vector-04-site-learning.png"), var(--wift-art) !important;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0, 0 0, 0 0, 0 0, right 20px top 150px, left 12px bottom 26px, center top;
  background-size: 30px 30px, 30px 30px, 150px 150px, 150px 150px,
                   min(360px, 38%) auto, min(540px, 50%) auto, min(560px, 60%) auto;
  /* the section must NOT filter: see the note above */
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
@media (max-width: 767px) {
  main > section.wift-edu-hero {
    background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px,
                     min(220px, 55%) auto, min(300px, 70%) auto, min(320px, 80%) auto;
  }
}

/* L2 — the frosted card */
main > section.wift-edu-hero::before {
  content: "";
  position: absolute;
  top: clamp(14px, 2.2vw, 26px);
  bottom: clamp(14px, 2.2vw, 26px);
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--gl-w), calc(100% - 2 * var(--gl-gut)));
  z-index: 0;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, .78);
  /* Translucent on purpose. An ~.82 fill hid the blueprint lines entirely, so the
     only thing visible was a flat panel and the blur had nothing to refract.
     .34/.18 lets the grid read through while staying light enough that navy ink
     clears AA comfortably at every point of the card. */
  background: linear-gradient(145deg, rgba(255, 255, 255, .22) 0%, rgba(253, 247, 236, .10) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 30px 60px -34px rgba(7, 21, 52, .38),
    0 2px 6px rgba(7, 21, 52, .06);
  /* !important is required, not stylistic: css/fix.css:180 declares
     `*, *::before, *::after { backdrop-filter: none !important }` and scores 0-1-1
     against this rule's 0-1-0, so without the flag the frost silently never paints. */
  -webkit-backdrop-filter: saturate(1.6) blur(7px) brightness(1.02) !important;
  backdrop-filter: saturate(1.6) blur(7px) brightness(1.02) !important;
  pointer-events: none;
}

/* L3 — copy above the glass, and never painted over by the drawing layers */
main > section.wift-edu-hero > .container {
  position: relative;
  z-index: 1;
  background-image: none !important;
}

@media (max-width: 767px) {
  main > section.wift-edu-hero::before {
    top: 10px;
    bottom: 10px;
    border-radius: 22px;
  }
}

/* ==========================================================================
   21. NAV ROW FITS THE BAR (was: PARTNER WITH US painted outside the card)
   The nowrap flex row inside .second-menu measured 1111px against a 1040px
   content box at >=1280 — every column was `auto`, so nothing could shrink and
   the login cluster spilled past the bar's right edge. Give the links column
   all the slack (min-width:0 lets it compress) and pull the crest gap back.
   ========================================================================== */
@media (min-width: 992px) {
  /* THE ROW HAS FOUR CHILDREN, NOT THREE. index.html's .second-menu > .row is
     [logo col-lg-3.d-lg-none] [menu col-xl-8] [login col-xl-4] [col-12 spacer].
     wift.css:3587 un-hides the first one with `display:block !important` so the
     crest can live inside the bar, and bootstrap's `.d-lg-none` is what hides it
     below 992. Any nth-child map written against a three-column row is off by one:
     that is how "WIFT" ended up overlapping "Home" — the menu was being centred in
     a track assigned to the wrong column, and slid left under the logo. */
  .header-area .second-menu > .row { margin-left: 0 !important; margin-right: 0 !important; }
  /* logo hugs content | menu takes the slack and cannot go below its own width +
     a hard 24px gutter on each side | login hugs content | spacer is out of flow */
  /* logo | menu | login | (spacer out of flow).
     The menu fills its track and centres its OWN links with `margin-inline:auto`
     on the ul. It must not be given `justify-self: center`: that sizes the item to
     max-content inside a possibly-narrower track, and because `.main-menu ul` is a
     nowrap flex row the surplus then overflows the box symmetrically — measured at
     1280px as a 506px track against 526px of links, so "Home" painted 20px outside
     the column and touched the wordmark. Filling the track makes overflow one-way
     and visible instead. */
  .header-area .second-menu > .row {
    grid-template-columns: auto minmax(0, 1fr) auto 0 !important;
    column-gap: 24px !important;
  }
  .header-area .second-menu .row > div:nth-child(1) { justify-self: start; min-width: 0; }
  .header-area .second-menu .row > div:nth-child(2) { justify-self: stretch; min-width: 0; }
  .header-area .second-menu .row > div:nth-child(3) { justify-self: end; width: max-content; max-width: 100%; }
  .header-area .second-menu .row > div:nth-child(4) { display: none; }
  /* keep the link run centred within its column rather than pinned left */
  .header-area .second-menu .main-menu > nav > ul { margin-left: auto !important; margin-right: auto !important; width: max-content; max-width: 100%; }
  .header-area .second-menu .login { width: max-content; max-width: 100%; }
  /* tighten the desktop rhythm so all three columns fit */
  .header-area .second-menu .col-lg-3.col-md-12 { padding-right: 0 !important; }
  .second-menu .main-menu ul li { margin-right: 0 !important; }
  .second-menu .main-menu > nav > ul > li > a {
    font-size: 14px !important;
    padding-left: 11px !important; padding-right: 11px !important;
  }
  .header-area .second-menu .login ul { padding-left: 14px; gap: 10px; }
  .second-menu .login .menu-cta .btn2 { padding-left: 18px !important; padding-right: 18px !important; }
}
/* Below ~1350px the three clusters genuinely do not fit: measured at 1280 the row
   had 1063px of track against 198 (logo) + 495 (menu) + 349 (login) = 1042 plus two
   24px gutters. Rather than let the menu overflow into the wordmark, step the
   desktop type down until it does fit. */
@media (min-width: 1360px) and (max-width: 1519px) {
  .header-area .second-menu > .row { column-gap: 14px !important; }
  .second-menu .main-menu > nav > ul > li > a {
    font-size: 13px !important;
    padding-left: 8px !important; padding-right: 8px !important;
  }
  .header-area .second-menu .wift-logo img { height: 62px !important; }
  .header-area .second-menu .wift-logo-name { font-size: 22px !important; }
  .second-menu .login .menu-cta .btn2 {
    font-size: 12px !important;
    padding-left: 13px !important; padding-right: 13px !important;
  }
}
/* 992–1359px: no amount of type-shrinking makes seven links, a crest wordmark and
   a CTA share this width without touching — measured 28px of overlap at 1151 even
   after stepping the desktop type down. The bar's own hamburger already exists and
   opens the full menu, so hide the inline link run here rather than ship text
   colliding with text. edm.css:173 hides this trigger in exactly this range for the
   opposite reason, so it has to be brought back. */
@media (min-width: 992px) and (max-width: 1359px) {
  .header-area .second-menu .main-menu { display: none !important; }
  .header-area .second-menu > .row { grid-template-columns: auto 1fr auto 0 !important; }
  .header-area .second-menu .login .menu-tigger { display: grid !important; }
}

/* ==========================================================================
   22. THE GROUP PAGE — chairman card, outbound links, advantage list
   Built for winntus-canwinn.html. Everything sits on the paper palette: the
   portrait gets the same rim and inset highlight as the §9 panels so it reads
   as a plate on the sheet, not a sticker.
   ========================================================================== */
.wift-chairman {
  margin: 0; padding: 14px;
  background: var(--gl-panel) !important;
  border: 1px solid var(--gl-panel-edge) !important;
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(254, 249, 238, .9), 0 16px 36px -26px rgba(7, 21, 52, .34) !important;
}
.wift-chairman img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 12px; border: 1px solid rgba(11, 31, 77, .14);
}
.wift-chairman figcaption { padding: 16px 4px 4px; }
#main .wift-chairman figcaption strong {
  display: block; color: var(--gl-ink) !important;
  font-size: 20px; font-weight: 700; letter-spacing: .01em;
}
#main .wift-chairman figcaption span {
  display: block; margin-top: 2px; color: var(--gl-amber) !important;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.wift-chairman blockquote {
  margin: 12px 0 0; padding: 12px 0 0;
  border-top: 1px solid rgba(11, 31, 77, .14);
  color: var(--gl-ink-soft) !important; font-size: 15px; line-height: 1.6; font-style: italic;
}
.wift-org-links { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; }
#main .wift-org-links a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--wift-navy) !important; color: #FEF9EE !important;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
}
#main .wift-org-links a:hover { background: #1747B8 !important; }
.wift-org-links a i { font-size: 11px; }
.wift-adv {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px;
}
.wift-adv li {
  position: relative; padding: 8px 0 8px 30px;
  border-bottom: 1px solid rgba(11, 31, 77, .1);
  color: var(--gl-ink-soft) !important; font-size: 15px; line-height: 1.5;
}
.wift-adv li::before {
  content: ""; position: absolute; left: 2px; top: 14px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--gl-amber); border-bottom: 2px solid var(--gl-amber);
  transform: rotate(-45deg);
}
@media (max-width: 767px) { .wift-adv { grid-template-columns: 1fr; } }
#main .wift-pull {
  margin: 0; padding: 6px 0 6px 26px;
  background: none !important;
  border: 0; border-left: 3px solid var(--gl-amber);
}
#main .wift-pull p {
  margin: 0; color: var(--gl-ink) !important;
  font-size: clamp(19px, 2.2vw, 26px); line-height: 1.5; font-weight: 600; font-style: italic;
}
#main .wift-pull cite {
  display: block; margin-top: 12px; font-style: normal;
  color: var(--gl-amber) !important; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}

/* ==========================================================================
   23. THE TWO SOLID-GROUND BLOCKS THE PAPER INVERSION MISSED
   §4 repaints every descendant of #main navy-on-cream. Two blocks kept a dark
   ground from wift.css/style.css, so their copy inverted into invisibility:

   a) `.wift-article-cta` — wift.css:2596 paints it solid --wift-navy and asked
      for cream copy. The tag-level inversion won on specificity: h3 measured
      CR 1.00, p CR 1.00 and the closing link CR 2.69 against its own ground.
      The button's arrow chip was navy-on-navy as well.
   b) `.pricing-head h3` — style.css:5594 gives it a #222 chip with white text.
      The inversion repainted the ink navy but never the chip, so COLLEGE and
      INDUSTRY on partnerships.html both measured CR 1.00. Only the active WIFT
      tile escaped, because style.css:5693 sets `background: var(--wift-accent)`
      and --wift-accent resolves to cream, which knocked the chip out entirely.
      Both now get a chip from the paper palette instead of the template's #222.
   ========================================================================== */
#main .wift-article-cta { background: var(--wift-navy) !important; }
#main .wift-article-cta h3 { color: #FEF9EE !important; }
#main .wift-article-cta p { color: var(--wift-steel-hi, #D5DBEA) !important; }
#main .wift-article-cta .wift-article-link { color: #FFC83C !important; }
#main .wift-article-cta .wift-article-link:hover,
#main .wift-article-cta .wift-article-link:focus { color: #FEF9EE !important; }
#main .wift-article-cta .btn.ss-btn {
  background: transparent !important;
  border: 1px solid rgba(254, 249, 238, .55) !important;
  color: #FEF9EE !important;
}
#main .wift-article-cta .btn.ss-btn i {
  background: rgba(254, 249, 238, .18) !important;
  color: #FEF9EE !important;
}
#main .wift-article-cta .btn.ss-btn:hover {
  background: #FFC83C !important;
  border-color: #FFC83C !important;
  color: var(--wift-navy) !important;
}
#main .wift-article-cta .btn.ss-btn:hover i {
  background: var(--wift-navy) !important;
  color: #FFC83C !important;
}

#main .pricing-head h3 {
  background: var(--wift-navy) !important;
  color: #FEF9EE !important;
  border-radius: 999px;
  padding: 8px 22px;
}
#main .pricing-box.active .pricing-head h3 {
  background: var(--gl-amber) !important;
  color: #FEF9EE !important;
}