/* VEL-CAP-0542 W3b: the wayfinding of next/deck-nav.js (pages with <html data-nav="v2">). Ported from the approved sample's ux-layer.css and rv-layer.css. */
.dn-rail button,.nav .dn-sw{-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:0;box-shadow:none;margin:0;text-transform:none;letter-spacing:normal;font-family:inherit;cursor:pointer}

/* ── roadmap: one dot per slide (the current one shows its number). From 1780 px wide it stands to the right of the left arrow, centred on the arrow's line (see the end of this section);
   narrower, it stays in the left margin below the arrow (the arrow is at most 56 px, so 50% + 28 px; the roadmap starts 34 px or more below it) ── */
.dn-rail{position:fixed;left:calc(4px + clamp(36px,calc(var(--gut) - 14px),56px) / 2 - 20px);top:calc(50% + 62px);z-index:90;color:var(--fg,#F7F4ED);transition:color .5s ease,opacity .3s ease,visibility 0s linear .3s}   /* below the arrow: the column (40 px wide) is centred under the arrow. The colour follows the slide's tone (--fg flips in one frame when the next slide's ground takes over) over .5 s, like the arrows (overhaul.css section 17), so the dots fade with the background instead of snapping */
.dn-rail ol{list-style:none;display:flex;flex-direction:column;align-items:center;gap:2px;margin:0;padding:0;position:relative}
.dn-rail button{position:relative;display:flex;align-items:center;justify-content:center;min-height:28px;min-width:40px;padding:0;color:inherit}
.dn-rail button i{font-style:normal;font:600 12px/1 Inter,sans-serif;letter-spacing:.04em;font-variant-numeric:tabular-nums;opacity:.7;background-color:transparent;padding:3px 0;transition:font-size .35s cubic-bezier(.2,.8,.2,1),opacity .35s ease,background-color .35s ease}   /* a dot's colour is inherited from the roadmap, which fades (above): no colour transition of its own, or it would trail the parent's */
.dn-rail button[aria-current] i{font-size:32px;opacity:1;color:var(--accent-text,#F2A900);transition:font-size .35s cubic-bezier(.2,.8,.2,1),opacity .35s ease,background-color .35s ease,color .5s ease}
body:not(.sak):not(.sv-page):not([data-tone=vermilion]) .dn-rail button[aria-current] i{color:#E5483F}   /* Frae pages: Vermilion (large text, 3:1 or more on Paper and Ink); Saksham and Samanvay keep their own accent.
   NOT on the Vermilion ground (the closing slide, b16): Vermilion on Vermilion is the same colour, and the number vanished (CEO, 20 Oct 2026). There the rule above
   applies instead and --accent-text is Ink (base.css, body[data-tone=vermilion]), which is 4.5:1 on the Vermilion ground — this override was the only thing defeating it. */
.dn-rail button:not([aria-current]) i{font-size:0;width:10px;height:10px;padding:0;margin:0;border-radius:50%;background-color:currentColor}   /* every slide but the current one is a dot */
.dn-rail button:hover i{opacity:1}
.dn-rail button span{position:absolute;left:44px;top:50%;transform:translate(-6px,-50%);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;background:#F7F4ED;color:#171717;border:1px solid #E3DED2;border-radius:4px;padding:3px 9px;font:600 13px/1.3 Inter,sans-serif;letter-spacing:.04em;white-space:nowrap}
.dn-rail button:hover span,.dn-rail button:focus-visible span{opacity:1;transform:translate(0,-50%)}
.dn-rail button:focus-visible{outline:2px solid var(--accent-text,#F2A900);outline-offset:2px}
.dn-rail--long button{min-height:22px}.dn-rail--long button[aria-current] i{font-size:28px}
body.at-first .dn-rail,body.to-first .dn-rail{opacity:0;visibility:hidden;pointer-events:none}   /* on the cover, and from the first frame of a move to it (deck.js sets to-first), fading out (above) */
body:not(.at-first):not(.to-first) .dn-rail{transition-delay:0s,.12s,0s}                              /* coming back: it is visible at once and fades in a moment after the move has begun */
html.is-loading .dn-rail{display:none!important}
/* short screens: tighter rows, so the roadmap never reaches the footer; it stays 24 px or more below the arrow. The rows are under 24 px here: the arrows,
   the keys and the swipe do the same (WCAG 2.5.8, equivalent control) */
@media (max-height:760px){.dn-rail{top:calc(50% + 48px)}.dn-rail button{min-height:19px}.dn-rail button i{font-size:11px}.dn-rail button[aria-current] i{font-size:24px}}
/* long decks (the Frae home, 12 slides) on short screens: tighter rows. The 12 rows at full size are 298 px tall and start 62 px below the middle, so they reach the footer (58 px) below about 840 px of height:
   measured on 1366x768, the most common laptop, the last dot touched the footer's first line (gap -2 px); the tight rows fit from 760 px up to there as well */
@media (max-height:840px){
  .dn-rail--long{top:calc(50% + 52px)}
  .dn-rail--long ol{gap:0}
  .dn-rail--long button{min-height:12px}
  .dn-rail--long button[aria-current] i{font-size:24px}
  .dn-rail--long button:not([aria-current]) i{width:8px;height:8px}
}
/* wide screens: to the right of the left arrow (.arw--prev, overhaul.css section 17: left 4px, width clamp(36px, var(--gut) - 14px, 56px), centred on 50%), centred on the arrow's line.
   The column is centred between the arrow's tail (the arrow's width - 2 px) and the text. The text's left edge is the page's content column, centred and never nearer than --gut: 1440 px wide on the
   Frae home (240 px on a 1920 screen), 1200 px on Saksham (360 px on 1920). The margin (--gut) stops growing at 96 px, from 1778 px wide, and only from there is there room beside the arrow (below that
   the text is at --gut or a little more: 78 px on 1440, 69 on 1280). Narrower, the roadmap stays below the arrow, as above, on every page. */
@media (min-width:1780px){
  .dn-rail{--dn-text:max(var(--gut),calc((100vw - 1440px) / 2));left:calc((clamp(36px,calc(var(--gut) - 14px),56px) - 2px + var(--dn-text)) / 2 - 20px);top:50%;transform:translateY(-50%)}
  body.sak .dn-rail{--dn-text:max(var(--gut),calc((100vw - 1200px) / 2))}
}
/* phones and tablets: no roadmap on any page (design 15.1); Saksham shows the progress bar, the Frae home keeps its n/12 counter */
@media (max-width:900px){.dn-rail{display:none!important}}

/* ── Saksham: breadcrumb, Frae logo (home) › Saksham ▾ (switcher) › the current section; hidden on the cover ── */
.nav .dn-sw{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-left:2px;font-size:14px;line-height:1;color:var(--fg,#F7F4ED);border-radius:6px}
.nav .dn-sw:hover,.nav .dn-sw[aria-expanded="true"]{background:rgba(247,244,237,.14)}
.nav .dn-sw:focus-visible{outline:2px solid var(--accent-text,#F2A900);outline-offset:2px}
.nav .dn-now{pointer-events:none;display:inline-flex;align-items:center;gap:10px;white-space:nowrap;margin-left:2px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg,#F7F4ED)}
.nav .dn-now::before{content:"›";font-size:16px;letter-spacing:0;opacity:.7}
body.at-first .nav .dn-sw,body.at-first .nav .dn-now{display:none}
.dn-menu{position:fixed;z-index:140;min-width:250px;background:#F7F4ED;color:#171717;border:1px solid #E3DED2;border-radius:10px;padding:8px;box-shadow:0 14px 36px rgba(23,23,23,.28)}
.dn-menu[hidden]{display:none}
.dn-menu a{display:flex;justify-content:space-between;gap:18px;align-items:center;min-height:44px;padding:8px 12px;border-radius:6px;text-decoration:none;color:inherit;font-size:15px;font-weight:500}
.dn-menu a span{font-size:14px;color:#57544D;font-weight:400}
.dn-menu a:hover,.dn-menu a:focus-visible{background:#E3DED2}
.dn-menu a:focus-visible{outline:2px solid #7A1F5B;outline-offset:-2px}
.dn-menu a[aria-current]{color:#7A1F5B;font-weight:600}
.dn-menu hr{border:0;height:1px;background:#E3DED2;margin:6px 4px}
@media (max-width:600px){.nav .dn-now{display:none}}   /* phones: the switcher stays, the section name would crowd the bar (the progress bar shows where you are) */

/* ── phones: a 3 px progress bar under the top bar (Saksham) ── */
.dn-prog{display:none}
@media (max-width:900px){.dn-prog{display:block;position:fixed;left:0;top:0;height:3px;z-index:120;background:var(--sak-gold,#F2A900);transition:width .5s cubic-bezier(.2,.8,.2,1)}}
@media (prefers-reduced-motion:reduce){.dn-rail button i,.dn-prog{transition:none}}

/* ── the floating "Request a proposal" hides on the last slide (the slide already asks) ── */
html[data-nav="v2"] body.at-last .pcta{opacity:0!important;pointer-events:none!important;visibility:hidden!important}