/* ===========================================================================
   IBC FINANCIAL NAVIGATION
   Implemented to the supplied specification. Values are the spec's values.
   =========================================================================== */
:root{
  --ibc-navy:#082556;
  --ibc-navy-2:#0E3574;
  --ibc-gold:#FCC600;
  /* The current page in a panel. Paler than the hover gold so the two states
     are told apart at a glance, and still 12.4:1 on the panel's navy. */
  --ibc-gold-pale:#FFE491;
  --ibc-ivory:#F7F4EE;
  --ibc-white:#FFFFFF;
  --ibc-ink:#1C252B;
  --ibc-slate:#667178;
  --ibc-stone:#DDD8CF;

  /* Section 4 is mandatory: the submenu is exactly 2px smaller than the main
     menu. Both are declared in px so no rem inheritance can shift them.

     Two settled values had drifted here and were reported from a screenshot.

     Size: the settled table is body 16px, navigation 20px. This token was
     16px, so the navigation was rendering at body size.

     Typeface: the settled rule is Georgia, one token, no webfont. This token
     named Montserrat, and nothing anywhere loads Montserrat: there is no
     @font-face and no font host in any stylesheet or template. Every menu on
     the site was therefore falling through to Arial, a sans-serif, on a serif
     site. It is now an alias of --font so there is genuinely one typeface
     token and a second one cannot drift away from it again. */
  /* SMALLER TYPE, TALLER LETTERS. Owner's instruction, 26 August 2026, with
     the original site's masthead as the reference: the words are set smaller
     and each character is stretched on the vertical axis, so the menu reads
     tall and narrow rather than large and wide. 17px at a 1.45 stretch gives
     a letter that stands taller than the old 20px while taking noticeably
     less width, which is what lets the bar itself come down. */
  --nav-font-size:17px;
  --nav-glyph-height:1.45;
  --submenu-font-size:18px;
  --nav-font:var(--font);
}

/* ==== 2. HEADER ========================================================== */
.site-head{
  background:var(--ibc-navy)!important;
  position:sticky;top:0;z-index:1000;
  transition:box-shadow .2s ease;
}
.site-head.is-stuck{box-shadow:0 4px 18px rgba(7,26,43,.16)}
/* The gold bar beneath the masthead was defined in site.css and switched off
   from here, which is the two-files fault again: one component, two
   stylesheets, and the later file winning. nav.css loads after site.css, so
   this single declaration hid the bar site-wide while the rule that draws it
   sat intact and apparently fine in the other file.
   The override is removed rather than inverted, so the bar has exactly one
   definition, in site.css, where the rest of the foil system lives.
   The live site draws this as a flat 3px #FCC600. The project's own token is
   a 4px foil gradient between --gold-deep and --gold, which is what has been
   restored, since it is the palette already settled here. */
.head-in,.site-head > .inner,.site-head > div{
  /* 82px, reduced to 68px on the owner's instruction of 26 August 2026: the
     bar was taller than the original site's. The logo comes down with it,
     because a 52px mark inside a 68px bar leaves no air above or below. */
  min-height:68px;
  display:flex;align-items:center;gap:2rem;
  max-width:var(--wrap,1440px);margin-inline:auto;
  padding-inline:clamp(1.25rem,3vw,2.5rem);
}
.site-head img{height:44px;width:auto;display:block}

/* ==== 3. MAIN MENU TYPE ================================================== */
/* The bar stretches to the full height of the masthead. Two things depend on
   it. The words centre against the masthead rather than against the list,
   which is why they sat eight pixels high, and a dropdown opened from the
   bottom of a list item now opens from the bottom of the header instead of
   halfway up it. */
.site-nav{margin-left:auto;align-self:stretch;display:flex}
.site-nav > ul{
  display:flex;align-items:stretch;gap:28px;      /* 23. spacing */
  margin:0;padding:0;list-style:none;
}
/* A list item is a flex item of the bar and a flex container for its own link.
   Left as a block it produced a line box, the inline-flex link sat on that
   line's baseline, and the descender space below pushed every menu word up. */
/* margin:0 is not cosmetic here. site.css sets p,li{margin:0 0 1.05rem} for
   prose, and that 16.8px sat under every menu item, so the item stretched to
   the masthead's top edge and stopped 16.8px short of the bottom. The words
   then centred in the short box and sat eight pixels high, and the dropdown
   opened from the short box's lower edge rather than from the masthead's. */
.site-nav > ul > li{position:relative;display:flex;align-items:center;
  align-self:stretch;margin:0}
.main-nav-link,.sub-toggle{
  font-family:var(--nav-font);
  font-size:var(--nav-font-size)!important;
  font-weight:600;line-height:1.25;letter-spacing:.01em;
  /* Gold at rest, white on hover and on the current page. 9.38:1 resting and
     14.90:1 on the two lit states, both on the navy header. The 2px rule
     underneath stays gold, so the current page is still marked by something
     other than colour alone. */
  color:var(--ibc-gold)!important;
  text-decoration:none;background:none;border:0;cursor:pointer;
  padding:.5rem 0;position:relative;
  display:inline-flex;align-items:center;gap:7px;   /* 19. chevron gap */
  transition:color 180ms ease;
}
.main-nav-link:hover,.sub-toggle:hover,
.main-nav-link:focus-visible,.sub-toggle:focus-visible{
  color:var(--ibc-white)!important}

/* ==== 5. the 2px gold indicator ========================================== */
.main-nav-link::after,.sub-toggle::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--ibc-gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform 180ms ease;
}
.main-nav-link:hover::after,
.main-nav-link:focus-visible::after,
.main-nav-link[aria-current="page"]::after,
.sub-toggle:hover::after,
.sub-toggle:focus-visible::after,
.sub-toggle[aria-expanded="true"]::after{transform:scaleX(1)}
.main-nav-link[aria-current="page"]{color:var(--ibc-white)!important}  /* 18. */

/* ==== 19. CHEVRON ======================================================== */
.chev{width:8px;height:8px;flex:none;box-sizing:border-box;font-size:0;line-height:0;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform 180ms ease}
[aria-expanded="true"] .chev{transform:rotate(-135deg) translateY(-2px)}

/* ==== 6, 7, 22. DROPDOWN ================================================= */
.submenu{
  /* Opened from the bottom edge of the masthead. The list item now stretches
     the full height of the bar, and the header's own vertical padding is
     added back so the panel clears the gold rule rather than sitting under
     it. A pointer crossing that padding is caught by the bridge below. */
  position:absolute;top:100%;left:0;z-index:1200;
  /* 340px, not 280px. The longest label, The Infinite Banking Concept with
     its registered mark, measured within a few pixels of the old width and
     wrapped to a second line on any machine whose Georgia is a shade wider. */
  min-width:340px;max-width:420px;width:340px;
  background:var(--ibc-navy-2);
  border:1px solid var(--ibc-gold);
  border-radius:6px;
  box-shadow:0 18px 45px rgba(7,26,43,.24),0 4px 12px rgba(7,26,43,.16);
  margin:0;padding:0;list-style:none;
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity 180ms ease,transform 180ms ease;
  overflow:hidden;
}
/* No bridge is needed. The list item now reaches the bottom edge of the
   masthead, so the panel is flush against it and there is no gap for the
   pointer to fall through. */
.nav-parent:has([aria-expanded="true"]) ~ .submenu,
[aria-expanded="true"] + .submenu{opacity:1;transform:translateY(0);
  pointer-events:auto}
/* The wide panel is centred with translateX(-50%), and the open state above
   set transform to translateY(0) alone, which threw the centring away. The
   panel opened half a screen to the right of where it belongs. Both parts of
   the transform have to be written together, because transform is one
   property and the last declaration wins the whole of it. */
.nav-parent:has([aria-expanded="true"]) ~ .submenu--mega,
[aria-expanded="true"] + .submenu--mega{transform:translateX(-50%) translateY(0)}
.submenu--mega{
  width:min(900px,calc(100vw - 3rem));
  /* Absolute, not fixed: fixed detaches it from the parent so the hover bridge
     cannot reach it and the menu closes as the pointer moves down. */
  left:auto;right:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;padding:1.25rem;
}

/* ==== 8, 9, 10. SUBMENU CELLS ============================================ */
/* Every cell is white. The page you are on is gold. Nothing else changes
   colour, including the cell under the pointer, because a gold fill under the
   pointer read as a second selected item and made the panel look as though it
   had two current pages at once. Hover is carried by a gold edge and a lighter
   ground, both of which leave the word white. */
.submenu-link{
  display:flex;align-items:center;
  min-height:44px;padding:9px 18px;
  font-family:var(--nav-font);
  font-size:var(--submenu-font-size)!important;
  font-weight:700;line-height:1.3;
  background:var(--ibc-navy-2);
  color:var(--ibc-white);
  border-left:3px solid transparent;
  border-bottom:1px solid rgba(184,155,103,.38);
  text-decoration:none;white-space:nowrap;
  transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease;
}
/* Three columns inside a fixed 720px panel cannot hold a label on one line.
   The rule above exists for the single-column panels, where wrapping was the
   reported fault. */
.submenu--mega .submenu-link{white-space:normal}
.submenu li:last-child .submenu-link{border-bottom:0}
/* Three states, and no fourth.
     rest    white
     hover   gold
     current a paler gold, so the page you are on is still marked when the
             pointer is somewhere else on the list. */
.submenu-link:hover,.submenu-link:focus-visible{
  background:#164486;
  color:var(--ibc-gold)!important;
  border-left-color:var(--ibc-gold);
}
.submenu-link[aria-current="page"],
.submenu-link[aria-current="page"]:hover,
.submenu-link[aria-current="page"]:visited{
  background:var(--ibc-navy-2);
  color:var(--ibc-gold-pale)!important;
  font-weight:700;
  border-left-color:var(--ibc-gold-pale);
}
/* Superseded by the rule in the closing section of this file, which is the
   one that applies. Left here as an empty marker would only invite the pair
   to drift apart again, so the declarations are removed outright. */

/* ==== 12, 13. RESOURCES MEGA MENU ======================================== */
.submenu--mega{
  width:900px;max-width:calc(100vw - 3rem);
  /* Anchored to the header, not to the parent item. A 720px panel hung off a
     mid-bar item overflows the viewport on the side it opens toward.
     top had been inherited as 100 percent from .submenu, and on a fixed
     element that resolves against the VIEWPORT, so the panel was placed one
     full screen height down and never appeared. --head-h is the masthead's
     measured height, published by the header script. */
  position:fixed;
  top:var(--head-h,87px);margin-top:0;
  left:50%;transform:translateX(-50%) translateY(6px);
  right:auto;
  display:grid;grid-template-columns:1.18fr 1fr 1fr;
  gap:0;padding:1.25rem;
}
.mega-col{padding:0 .75rem}
.mega-col h3{
  font-family:var(--nav-font);
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ibc-gold);margin:0 0 .6rem;
}
.mega-col ul{margin:0;padding:0;list-style:none}
.submenu--mega .submenu-link{
  min-height:38px;padding:8px 10px;border-bottom:0;border-radius:3px}
.mega-foot{grid-column:1/-1;margin-top:.75rem;padding:0 .75rem}
.mega-foot a{
  display:flex;align-items:center;justify-content:center;min-height:44px;
  font-family:var(--nav-font);font-size:var(--submenu-font-size);font-weight:700;
  border:2px solid var(--ibc-gold);border-radius:4px;
  background:var(--ibc-navy);color:var(--ibc-white);text-decoration:none;
  transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease;
}
.mega-foot a:hover{background:var(--ibc-gold);color:var(--ibc-navy);
  border-color:var(--ibc-navy)}

/* ==== 17. LANGUAGE SWITCHER ============================================== */
.site-nav .lang{margin-left:14px;padding-left:14px;
  border-left:1px solid rgba(252,251,248,.25)}
.site-nav .lang a,.lang-off{
  font-family:var(--nav-font);font-size:var(--nav-font-size)!important;
  font-weight:700;text-decoration:none}
/* Gold is the colour this site gives to something a reader can act on, so it
   belongs to the live control and to nothing else. */
.site-nav .lang a{color:var(--ibc-gold)!important}
/* The unavailable state is still text a reader has to read, so it is measured
   rather than merely dimmed. Opacity used to be the whole signal, and gold at
   .7 composites to #B3961A on the navy header: a gold button turned down a
   little, which readers clicked. It now takes a desaturated slate, #8FA0B2,
   measured at 5.56:1 on the navy header, above the 4.5:1 minimum and clearly
   quieter than the live control at 9.38:1.
   Colour is not the only difference, because it must not be: the two letters
   are struck through, which is the signal that survives a monochrome screen,
   and the pointer says not-allowed. The frame and shadow are dropped in the
   block further down this file, where the live control's are set. */
.lang-off{
  color:#8FA0B2!important;
  opacity:1;
  cursor:not-allowed;
  text-decoration:line-through;
  text-decoration-thickness:1px;
}
.site-nav .lang a:hover,.site-nav .lang a:focus-visible{
  color:var(--ibc-white)!important;
  text-decoration:underline;text-underline-offset:3px}

/* ==== 11. CTA ============================================================ */
.btn-cta,.site-head .btn-primary{
  font-family:var(--nav-font);font-size:15px;font-weight:700;
  background:var(--ibc-gold);color:var(--ibc-navy)!important;
  border:2px solid var(--ibc-gold);border-radius:4px;
  padding:11px 18px;text-decoration:none;white-space:nowrap;
  transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease;
}
.btn-cta:hover,.site-head .btn-primary:hover{
  background:var(--ibc-white);border-color:var(--ibc-white);
  color:var(--ibc-navy)!important}

/* ==== 20. FOCUS ========================================================== */
.main-nav-link:focus-visible,.sub-toggle:focus-visible,
.submenu-link:focus-visible,.btn-cta:focus-visible,.mega-foot a:focus-visible{
  outline:3px solid var(--ibc-gold);outline-offset:3px}
.submenu-link:focus-visible,.mega-foot a:focus-visible{
  outline-color:var(--ibc-navy)}    /* on the gold hover fill */

/* ==== 24, 25, 26. MOBILE ================================================= */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;
  margin-left:auto;padding:.6rem;color:var(--ibc-white)}
.nav-toggle span{display:block;width:26px;height:2px;background:currentColor;
  margin:5px 0;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:960px){
  .nav-toggle{display:block}
  .site-nav{position:absolute;top:100%;left:0;right:0;
    background:var(--ibc-navy);margin:0;display:none;
    box-shadow:0 18px 45px rgba(7,26,43,.3);max-height:80vh;overflow-y:auto}
  .site-nav.is-open{display:block}
  .site-nav > ul{flex-direction:column;align-items:stretch;gap:0}
  /* On a narrow screen a menu item is a stack, not a row. The desktop rule
     makes each item a flex ROW so the word centres against the masthead, and
     left in place here it put the open panel BESIDE its parent instead of
     under it, running off the right edge of the screen. */
  .site-nav > ul > li{border-top:1px solid rgba(184,155,103,.45);
    display:block;align-self:auto}
  /* And a label may wrap. The one-line rule exists for the desktop panel,
     which is 340px wide; here the panel is the width of the phone. */
  .submenu-link{white-space:normal}
  .main-nav-link,.sub-toggle{
    min-height:44px;padding:.75rem 1.25rem;width:100%;justify-content:space-between}
  .main-nav-link::after,.sub-toggle::after{display:none}
  .submenu,.submenu--mega{
    position:static;width:auto;max-width:none;opacity:1;transform:none;
    pointer-events:auto;border:0;border-radius:0;box-shadow:none;
    background:var(--ibc-navy-2);display:none;grid-template-columns:1fr;padding:0}
  .nav-parent:has([aria-expanded="true"]) ~ .submenu,
.nav-parent:has([aria-expanded="true"]) ~ .submenu{display:block}
  .submenu-link{border-top:1px solid rgba(184,155,103,.45);border-bottom:0;
    padding-left:2rem}
  /* An open toggle is a lit state, so it takes white like hover and the
     current page. Left gold, it would be the one item on the site that
     contradicts the rule. */
  .sub-toggle[aria-expanded="true"]{color:var(--ibc-white)!important}
  .mega-col{padding:.75rem 0}
  .mega-col h3{padding-left:2rem}
  .site-head .btn-primary,.btn-cta{
    display:block;margin:1rem 1.25rem;text-align:center}
  .site-nav .lang{margin:0;padding:.75rem 1.25rem;border-left:0;
    border-top:1px solid rgba(184,155,103,.45)}
}


/* A visited menu link keeps the menu's own colour.

   This said color:inherit, and inherit on a menu cell resolves to the colour
   of the list it sits in, which is the page's body colour, a dark navy. So
   every menu entry the reader had ALREADY VISITED turned near black on a navy
   panel and was all but unreadable. That is the dark text reported in the
   Services panel, in the wide resources panel, and on the View All Resources
   button. Named colours now, not inherit.

   :visited accepts only a handful of properties and colour is one of them, so
   these have to be written as their own rule rather than folded into the
   rules above. */
.submenu-link:visited{color:var(--ibc-white)}
.submenu-link:hover:visited,.submenu-link:focus-visible:visited{
  color:var(--ibc-gold)}
.main-nav-link:visited{color:var(--ibc-gold)}
.main-nav-link:hover:visited,.main-nav-link:focus-visible:visited,
.main-nav-link[aria-current="page"]:visited{color:var(--ibc-white)}
.mega-foot a:visited{color:var(--ibc-white)}
.mega-foot a:hover:visited{color:var(--ibc-navy)}

/* 3. The overview cell was a bordered box that read as a heading rather than a
   link. It is now a normal cell carrying a gold left edge, and it follows the
   same rule as every other cell: white at rest, white on hover, gold only when
   it is the page you are on. */
.submenu-item--featured .submenu-link{
  border:0;border-left:3px solid var(--ibc-gold);
  background:var(--ibc-navy-2);color:var(--ibc-white);
  font-weight:700;margin:0;border-radius:0;
  border-bottom:1px solid rgba(252,198,0,.55);
}
.submenu-item--featured .submenu-link:hover,
.submenu-item--featured .submenu-link:focus-visible{
  background:#164486;color:var(--ibc-gold)!important;
  border-left-color:var(--ibc-gold)}
.submenu-item--featured .submenu-link[aria-current="page"]{
  background:var(--ibc-navy-2);color:var(--ibc-gold-pale)!important}


/* The parent is a link and a toggle side by side: the words navigate, the
   chevron opens the menu. A button alone could not navigate at all, which is
   why clicking Services did nothing. */
.nav-parent{display:inline-flex;align-items:center;gap:2px}
.nav-parent .sub-toggle{padding:.5rem .25rem;min-width:22px}
.nav-parent .sub-toggle::after{display:none}
/* A section whose landing page has not been written in the page's language
   renders its WORD as the disclosure control, so there is one control and no
   link to a page that is not there. It is then the only child of .nav-parent,
   and the rule directly above, written for the chevron button that sits
   BESIDE a link, would take the 2px indicator away from the word itself. */
.nav-parent > .sub-toggle:only-child::after{display:block}
.nav-parent:has([aria-expanded="true"]) .main-nav-link::after{transform:scaleX(1)}
@media (max-width:960px){
  .nav-parent{display:flex;width:100%;justify-content:space-between}
  .nav-parent .main-nav-link{flex:1}
  .nav-parent .sub-toggle{padding:.75rem 1.25rem}
}

/* ==== 27. SHINE ==========================================================
   A single sweep of light across the logo and the language button on hover
   and on keyboard focus.

   Both live here rather than in site.css because both belong to the header,
   and the header has already been broken twice by being described in two
   files at once: the gold bar was drawn in one and switched off in the other,
   and the logo height was set in both at different values.

   Nothing sweeps on its own. Movement a reader did not ask for and cannot
   stop is a barrier, and the same rule already governs the seminar carousel.
   Under prefers-reduced-motion the sweep is removed entirely rather than
   shortened, and the hover states that carry meaning stay exactly as they are.
   ======================================================================== */

.brand{position:relative;display:inline-flex;overflow:hidden;border-radius:4px}
.brand::after,
.site-nav .lang a::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 35%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.10) 65%,
    rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);
  pointer-events:none;
  transition:left 720ms cubic-bezier(.22,.61,.36,1);
}
.brand:hover::after,.brand:focus-visible::after,
.site-nav .lang a:hover::after,.site-nav .lang a:focus-visible::after{left:120%}

/* The logo sweeps on its own, once every five seconds, as asked.

   Movement nobody asked for is normally a barrier, and this file previously
   said so and refused to animate anything. The accommodation is the standard
   one: readers who have asked their operating system for reduced motion get
   no sweep at all, and the block at the foot of this file removes it. The
   sweep carries no information, so nothing is lost when it is removed. It is
   a highlight passing over a picture, not a blink, a scroll or a flash, and
   at 0.9 seconds in every 5 it is at rest for four fifths of the time. */
@keyframes brand-sheen{
  0%   {left:-60%}
  18%  {left:120%}
  100% {left:120%}
}
.brand::after{animation:brand-sheen 5s linear infinite}
/* Hover still sweeps on demand. The transition and the animation would fight
   over the same property, so the animation stands down while the pointer is
   on the logo. */
.brand:hover::after,.brand:focus-visible::after{animation:none}

/* The language switch reads as a control rather than as one more menu word.
   Gold border and gold text at rest, white on hover and focus, matching the
   rule the rest of the menu follows. 9.38:1 at rest, 14.90:1 lit. */
.site-nav .lang a{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;min-width:48px;padding:.25rem .75rem;
  border:2px solid var(--ibc-gold);border-radius:4px;
  box-shadow:0 2px 6px rgba(7,26,43,.35),0 0 0 1px rgba(252,198,0,.18);
  transition:color 180ms ease,border-color 180ms ease,
             background-color 180ms ease,box-shadow 180ms ease;
}
.site-nav .lang a:hover,.site-nav .lang a:focus-visible{
  box-shadow:0 4px 12px rgba(7,26,43,.45),0 0 0 1px rgba(255,255,255,.25)}
.site-nav .lang a:hover,.site-nav .lang a:focus-visible{
  color:var(--ibc-white)!important;
  border-color:var(--ibc-white);
  background-color:rgba(255,255,255,.08);
  text-decoration:none;
}
/* The inert side keeps the same OUTER BOX so the header does not shift by a
   pixel between a page that has a twin and one that does not, and it keeps
   nothing else.

   Two earlier attempts are why this is written out. A thin dashed border at 45
   percent opacity read on screen as the border having disappeared. Replacing
   it with the live button's own 2px gold frame and shadow went the other way
   and produced the fault that was reported: a gold-framed FR that a reader
   clicks and that does nothing, separated from the working control by opacity
   alone. A dead control must not be drawn as a live one.

   So the frame and the shadow go. What is left is a single muted hairline that
   states where the box is without claiming to be a button, no shadow at all,
   and the struck-through slate text set further up this file. Every dimension
   is fixed rather than minimum, at the 55 by 46 the live control measures at
   the settled 20px navigation type, so the smallest side stays above the 44
   pixel target whatever the border weight. box-sizing is border-box site-wide,
   so these numbers are the rendered box. */
.lang-off{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;min-width:55px;padding:.25rem .75rem;
  border:1px solid rgba(252,251,248,.30);border-radius:4px;
  background:transparent;
  box-shadow:none;
}

@media (prefers-reduced-motion:reduce){
  .brand::after,.site-nav .lang a::after{display:none;animation:none}
  .brand,.site-nav .lang a{transition:none}
}

/* ==== 23. LETTER HEIGHT ==================================================
   TALLER CHARACTERS AT THE SAME SIZE. Owner's instruction, 26 August 2026,
   with the original site's navigation as the reference: the letters stand
   taller without the words growing wider or the row needing more room.

   font-size is left at the settled 20px and the label alone is scaled on the
   vertical axis. Because a transform does not change the layout box, the
   masthead height, the spacing between items and the click target all stay
   exactly where they were, and nothing wraps at any width. The chevron sits
   OUTSIDE the scaled span, so it stays a true 45 degree corner rather than
   being stretched into a lopsided one, which is the reason the label carries
   its own element at all. */
.nav-label{
  display:inline-block;
  transform:scaleY(var(--nav-glyph-height));
  transform-origin:center center;
}
/* The language box and the submenu headings take the same treatment, so the
   whole masthead reads at one letter height rather than two. */
.lang a,.lang .lang-off,.submenu-title{
  display:inline-block;
  transform:scaleY(var(--nav-glyph-height));
  transform-origin:center center;
}