:root {
  --menu-width: 32vw;
  --menu-top: clamp(14px, 1.2vw, 22px);
  --menu-left: var(--menu-top);
  --menu-height: clamp(118px, 8.4vw, 164px);
  --menu-logo: clamp(64px, 4.2vw, 76px);
  --menu-rule: color-mix(in srgb, var(--ink) 31%, transparent);
  --menu-inset: clamp(18px, 1.35vw, 26px);
  --menu-brand-column: 27%;
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --menu-open-duration: 640ms;
  --menu-close-duration: 560ms;
}
.editorial-header,
.editorial-header.is-scrolled {
  inset: var(--menu-top) auto auto var(--menu-left);
  width: var(--menu-width);
  padding: 0;
  background: none;
  color: var(--ink);
  z-index: 80;
}
.editorial-header .menu-plaque {
  position: relative;
  display: grid;
  grid-template-columns: 78% 22%;
  align-items: stretch;
  width: 100%;
  height: var(--menu-height);
  min-height: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  border: 0;
  border-radius: 5px;
  overflow: hidden;
  clip-path: none;
}
/* Keep the stationary plaque painted under the top-layer panel. It remains
   inert while open, but never blinks back into place at the end of closing. */
.editorial-header.is-menu-open { pointer-events: none; }
.editorial-header{transition:transform 250ms var(--ease-out),opacity 250ms var(--ease-out)}
.editorial-header.is-scroll-hidden:not(:focus-within):not(.is-menu-open){transform:translateY(calc(-100% - var(--menu-top) - 8px));opacity:0;pointer-events:none}
.editorial-header[data-compact=true],.editorial-menu[data-compact=true]{--menu-height:90px}
.editorial-header[data-compact=true] .menu-brand-copy,.editorial-menu[data-compact=true] .menu-brand-copy{justify-content:flex-start;gap:9px}
@media(prefers-reduced-motion:reduce){.editorial-header{transition:none}}
.menu-brand {
  display: grid;
  grid-template-columns: var(--menu-logo) 1fr;
  align-items: start;
  gap: clamp(16px, 2.2vw, 42px);
  width: 100%;
  height: var(--menu-height);
  min-width: 0;
  padding: 12px 0 16px var(--menu-inset);
}
.menu-brand img { width: var(--menu-logo); height: var(--menu-logo); object-fit: contain; }
.menu-logo-link { display: block; width: var(--menu-logo); height: var(--menu-logo); }
.menu-brand-copy { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding-top: 2px; }
.menu-brand-copy strong { font-size: clamp(13px, .95vw, 17px); line-height: 1.15; font-weight: 550; letter-spacing: -.025em; white-space: nowrap; }
.menu-brand-copy > span { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: clamp(11px, .85vw, 15px); font-weight: 650; line-height: 1.16; letter-spacing: -.025em; text-transform: uppercase; }
.menu-trigger,
.menu-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--menu-height);
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
}
.menu-trigger { border-left: 1px dashed var(--menu-rule); }
.menu-trigger:active,.menu-dismiss:active { transform: none; }
.menu-strokes { display: flex; flex-direction: column; justify-content: space-between; width: clamp(30px, 2.25vw, 40px); height: clamp(10px, .675vw, 12px); flex: none; }
.menu-strokes > span { display: block; width: 100%; height: 1px; background: currentColor; }
.menu-trigger svg,
.menu-dismiss svg { width: clamp(36px, 2.7vw, 48px); height: 48px; stroke-width: 1; }
.menu-logo-link:focus-visible,
.menu-trigger:focus-visible,
.menu-dismiss:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }

/* The plaque and open panel share an origin. The clipping boundary extends;
   the brand never slides to another position. */
.editorial-menu {
  position: fixed;
  /* display stays flex during the discrete exit, after :popover-open is lost.
     Keep its column layout too, or the header/contact reflow side by side. */
  flex-direction: column;
  inset: var(--menu-top) auto auto var(--menu-left);
  margin: 0;
  width: var(--menu-width);
  max-width: calc(100% - var(--menu-left) * 2);
  height: calc(100dvh - var(--menu-top) * 2);
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  opacity: 1;
  transform: none;
  transform-origin: top left;
  clip-path: inset(0 0 calc(100% - var(--menu-height)) 0 round 5px);
  transition: clip-path var(--menu-close-duration) var(--ease-drawer), display var(--menu-close-duration) allow-discrete, overlay var(--menu-close-duration) allow-discrete;
}
.editorial-menu:popover-open { display: flex; clip-path: inset(0 round 5px); transition-duration: var(--menu-open-duration); transition-timing-function: var(--ease-drawer); }
.editorial-menu::backdrop { background: rgba(var(--sbi-ink-rgb),.24); backdrop-filter: blur(7px); opacity: 0; transition: opacity var(--menu-close-duration) var(--ease-out), display var(--menu-close-duration) allow-discrete, overlay var(--menu-close-duration) allow-discrete; }
.editorial-menu:popover-open::backdrop { opacity: 1; transition-duration: 300ms; }
.menu-open-head { display: grid; grid-template-columns: 78% 22%; flex: 0 0 max(var(--menu-height), 25%); min-height: var(--menu-height); }
.menu-dismiss svg { opacity: 0; transform: rotate(-30deg); transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out); }
.editorial-menu:popover-open .menu-dismiss svg { opacity: 1; transform: rotate(0); transition-duration: 320ms; transition-delay: 60ms; }
.editorial-menu .menu-nav { flex: 1 1 auto; min-height: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.menu-nav > :nth-child(1) { --menu-order: 0; }
.menu-nav > :nth-child(2) { --menu-order: 1; }
.menu-nav > :nth-child(3) { --menu-order: 2; }
.editorial-menu .menu-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--menu-brand-column) 1fr 23px;
  align-items: center;
  gap: 0;
  min-height: clamp(54px, 4vw, 74px);
  padding: 13px var(--menu-inset);
  border: 0;
  font-size: clamp(25px, 1.75vw, 33px);
  line-height: 1.15;
  font-weight: 450;
  letter-spacing: -.035em;
}
.editorial-menu .menu-row::before { content: ''; position: absolute; inset: 0 0 auto; border-top: 1px dashed var(--menu-rule); transform: scaleX(0); transform-origin: left; transition: transform 180ms var(--ease-out); }
.editorial-menu .menu-number { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: clamp(11px, .85vw, 15px); line-height: 1.4; letter-spacing: -.03em; font-variant-numeric: tabular-nums; font-weight: 400; }
.editorial-menu .menu-row > :is(.scramble-label,.menu-number,.menu-plus) { display: block; opacity: 0; transform: translateY(10px); transition: transform 240ms var(--ease-out), opacity 240ms var(--ease-out); }
.editorial-menu:popover-open .menu-row::before { transform: scaleX(1); transition-duration: 380ms; transition-delay: calc(140ms + var(--menu-order,0) * 80ms); }
.editorial-menu:popover-open .menu-row > :is(.scramble-label,.menu-number,.menu-plus) { opacity: 1; transform: translateY(0); transition-duration: 360ms; transition-delay: calc(200ms + var(--menu-order,0) * 80ms); }
.editorial-menu .menu-row svg { width: 21px; height: 21px; opacity: 0; transform: translateX(-3px); transition: transform 160ms var(--ease-out), opacity 160ms ease; }
.editorial-menu .menu-plus { position: relative; justify-self: center; width: 15px; height: 15px; font-size: 0; line-height: 1; }
.editorial-menu .menu-plus::before,.editorial-menu .menu-plus::after { content: ''; position: absolute; background: currentColor; }
.editorial-menu .menu-plus::before { left: 0; top: 7px; width: 15px; height: 1px; }
.editorial-menu .menu-plus::after { left: 7px; top: 0; width: 1px; height: 15px; transition: transform 200ms var(--ease-out); }
.editorial-menu .menu-services[open] .menu-plus { transform: none; }
.editorial-menu .menu-services[open] .menu-plus::after { transform: scaleY(0); }
.editorial-menu .menu-services[data-expanded=false] .menu-plus::after { transform: scaleY(1); }
.menu-services-content { overflow: hidden; }
.editorial-menu .menu-subnav { display: grid; gap: 0; padding: 8px var(--menu-inset) 28px calc(var(--menu-inset) + (100% - var(--menu-inset) * 2) * .27); font-size: clamp(20px, 1.55vw, 28px); line-height: 1.25; }
.editorial-menu .menu-subnav a { padding: 10px 0; min-height: 46px; line-height: inherit; letter-spacing: -.025em; }
.editorial-menu .menu-contact {
  display: grid;
  grid-template-columns: 27% 51% 22%;
  align-items: stretch;
  gap: 0;
  flex: 0 0 clamp(128px, 8.5vw, 160px);
  min-height: 128px;
  margin: 0;
  padding: 0;
  background: var(--hero-bg, var(--hero-coral));
  color: var(--hero-ink, var(--ink));
  border: 0;
}
.menu-contact-caption { padding: 15px 0 0 var(--menu-inset); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: clamp(10px, .8vw, 14px); line-height: 1.4; letter-spacing: -.04em; }
.editorial-menu .menu-contact > span { opacity: 0; transform: translateY(14px); transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }
.editorial-menu:popover-open .menu-contact > span { opacity: 1; transform: translateY(0); transition-duration: 360ms; transition-delay: 420ms; }
.editorial-menu:popover-open .menu-contact > span:nth-child(2) { transition-delay: 460ms; }
.editorial-menu:popover-open .menu-contact > span:nth-child(3) { transition-delay: 500ms; }
.menu-contact-caption .menu-number { display: block; }
.menu-contact-copy { display: flex; flex-direction: column; justify-content: space-between; padding: 16px 8px 20px 0; }
.editorial-menu .menu-contact strong { display: block; margin: 0; font-size: clamp(27px, 1.8vw, 34px); line-height: 1; font-weight: 450; letter-spacing: -.035em; }
.menu-contact-copy > span { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: clamp(10px, .72vw, 13px); line-height: 1.3; }
.menu-contact-arrow { display: flex; align-items: center; justify-content: center; border-left: 1px dashed currentColor; }
.editorial-menu .menu-contact svg { width: clamp(36px, 3vw, 52px); height: clamp(36px, 3vw, 52px); stroke-width: 1; transition: transform 160ms var(--ease-out); }
.editorial-menu a:focus-visible,
.editorial-menu summary:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
@starting-style {
  .editorial-menu:popover-open { clip-path: inset(0 0 calc(100% - var(--menu-height)) 0 round 5px); }
  .editorial-menu:popover-open::backdrop { opacity: 0; }
  .editorial-menu:popover-open .menu-row::before { transform: scaleX(0); }
  .editorial-menu:popover-open .menu-row > :is(.scramble-label,.menu-number,.menu-plus) { opacity: 0; transform: translateY(10px); }
  .editorial-menu:popover-open .menu-contact > span { opacity: 0; transform: translateY(14px); }
  .editorial-menu:popover-open .menu-dismiss svg { opacity: 0; transform: rotate(-30deg); }
}
.editorial-menu[data-instant="true"],
.editorial-menu[data-instant="true"]::backdrop,
.editorial-menu[data-instant="true"] *,
.editorial-menu[data-instant="true"] *::before,
.editorial-menu[data-instant="true"] *::after { transition: none; }
@media (hover: hover) and (pointer: fine) {
  .menu-trigger:hover,
  .menu-dismiss:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
  .editorial-menu .menu-row:hover svg { opacity: 1; transform: translateX(0); }
  .editorial-menu .menu-contact:hover svg { transform: translateX(4px); }
}
@media (max-width: 900px) {
  :root { --menu-width: 380px; }
}
@media (max-width: 700px) {
  :root { --menu-top: 14px; --menu-left: 14px; --menu-width: calc(100% - 28px); --menu-height: 112px; --menu-logo: 60px; --menu-inset: 18px; }
  .menu-brand { gap: 20px; }
  .menu-brand-copy strong { font-size: 15px; }
  .menu-brand-copy > span { font-size: 11px; }
  .menu-open-head { flex-basis: max(var(--menu-height), 23%); }
  .editorial-menu .menu-row { min-height: 59px; font-size: 26px; }
  .editorial-menu .menu-subnav { font-size: 21px; padding-top: 4px; padding-bottom: 22px; }
  .editorial-menu .menu-contact { flex-basis: 134px; }
  .menu-contact-copy > span { max-width: 130px; }
}
@media (max-height: 650px) {
  .menu-open-head { flex-basis: var(--menu-height); }
  .editorial-menu .menu-row { min-height: 50px; padding-top: 10px; padding-bottom: 10px; }
  .editorial-menu .menu-subnav { padding-bottom: 8px; }
  .editorial-menu .menu-subnav a { padding: 8px 0; }
  .editorial-menu .menu-contact { flex-basis: 112px; min-height: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .editorial-menu,
  .editorial-menu::backdrop,
  .editorial-menu *,
  .editorial-menu *::before,
  .editorial-menu *::after { transition: none; }
}

/* Approved two-piece plaque, shared by every route. */
.editorial-header,.editorial-menu{--menu-height:90px}
.editorial-header .menu-plaque{grid-template-columns:minmax(0,1fr) 20%;gap:8px;background:transparent;border-radius:0;overflow:visible}
.editorial-header :is(.menu-brand,.menu-trigger){background:var(--sbi-gray-2);color:var(--sbi-ink)}
.editorial-header :is(.menu-brand,.menu-trigger){border-radius:5px}
.editorial-header .menu-trigger{position:relative;border:0}
.editorial-header .menu-trigger::after{content:'';position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:16px;height:2px;background:var(--sbi-brand);pointer-events:none}
:is(.editorial-header,.editorial-menu) .menu-brand-copy{justify-content:flex-start;gap:9px}
:is(.editorial-header,.editorial-menu) .menu-brand-copy :is(strong,span){font-weight:500}
:is(.editorial-header,.editorial-menu) :is(.menu-brand-copy strong,.menu-row,.menu-subnav a,.menu-contact-copy strong){font-family:EditorialSans,Helvetica,Arial,sans-serif}

/* Approved B layout: identity, navigation and contact share the 8px joint. */
.editorial-menu{--menu-current-ink:var(--sbi-brand-text);background:transparent;gap:8px;overflow:hidden}
.editorial-menu .menu-open-head{position:relative;grid-template-columns:minmax(0,1fr) 20%;gap:8px;isolation:isolate;flex:0 0 var(--menu-height);min-height:var(--menu-height)}
.editorial-menu .menu-open-head>.menu-brand{background:var(--sbi-gray-2);border-radius:5px;position:relative;z-index:1}
.editorial-menu .menu-dismiss{height:var(--menu-height);min-height:var(--menu-height);align-self:start;background:var(--sbi-gray-2);border-radius:5px;position:relative;z-index:1}
.editorial-menu .menu-nav{border-radius:5px;background:var(--sbi-gray-2);padding-top:24px}
.editorial-menu .menu-nav>.menu-services>summary::before{display:none}
.editorial-menu .menu-contact{border-radius:5px;overflow:hidden;flex-shrink:0;background:var(--sbi-brand)}
.editorial-menu .menu-nav a[aria-current=page],.editorial-menu .menu-services:has(a[aria-current=page])>summary{color:var(--menu-current-ink);text-decoration:none}
@media(hover:hover) and (pointer:fine){.editorial-menu .menu-dismiss:hover{background:var(--sbi-brand)}}
@media(max-height:650px){.editorial-menu .menu-nav{padding-top:8px}}

/* Immediate readable menu state: keyboard/reduced motion never waits on a
   starting-style transition to expose the labels. Pointer choreography stays. */
.editorial-menu[data-open="true"][data-instant="true"] .menu-row > :is(.scramble-label,.menu-number,.menu-plus),
.editorial-menu[data-open="true"][data-instant="true"] .menu-contact > span{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
 .editorial-menu[data-open="true"] .menu-row > :is(.scramble-label,.menu-number,.menu-plus),
 .editorial-menu[data-open="true"] .menu-contact > span{opacity:1;transform:none}
}