/* =============================================================================
   Public site chrome - every page that uses _PublicLayout.

   Header, top bar, navigation and drawer, search, news ticker, page bands, footer, the CMS
   prose column and the generic content blocks. Tokens, base element styles and the shared
   components come from theme.css, which loads first. The banner lives in banner.css and the
   home-page showcases in blocks.css; both load only on pages that render them.
   ============================================================================= */
:root {
    --header-ink: #0b1628;
    --header-panel: #0f1d33;
    --header-fg: #e3e9f1;
    --header-fg-muted: #a7b3c3;
    --header-rule: rgba(255, 255, 255, .12);
    --header-accent: #f5b73b;
    --header-accent-deep: #e6962b;
    --header-glow-teal: rgba(33, 138, 168, .34);
    --header-glow-violet: rgba(116, 66, 196, .30);
    --header-arc: rgba(245, 183, 59, .34);
    --header-arc-soft: rgba(245, 183, 59, .16);
    --header-radius: 0px;
    --header-gap: 0px;
    --header-pad-x: clamp(18px, 2.6vw, 44px);
    --header-gap-x: clamp(18px, 2vw, 32px);
    --nav-pad-x: 14px;
}
/* overflow-x:hidden here is load-bearing for .site-topbar's full-bleed breakout below: 100vw can
   run a scrollbar's width wider than the visible viewport, which would otherwise put a few pixels
   of horizontal scroll on the whole page. Only the X axis is touched, so position:sticky in the
   header is unaffected. */
body { overflow-x: hidden; }
body.nav-open { overflow: hidden; }
/* CMS HTML and banner documents may still name another family. Keep the public site on one. */
.prose *,
[class^="ql-font-"],
[class*=" ql-font-"] { font-family: inherit !important; }
/* Public content containers are governed by containers.css in the master layout. */

/* ---------------------------------------------------------------------------
   Site header: a seamless full-bleed strip (logo, menu, and the rows above it).

   The <header> is the one box site.js measures. It does not clip overflow -
   navigation panels hang below it. Nothing on the header may create a
   containing block for position:fixed descendants (no transform, filter or
   backdrop-filter, no containment): the drawer is fixed inside it and must
   resolve against the viewport.

   Rows pad themselves in from the edges; the chrome itself always spans the
   viewport so the top bar and the logo/menu bar read as one continuous band.
   --------------------------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 30;
    width: calc(100% - 2 * var(--header-gap));
    margin: var(--header-gap) auto 0;
    border-radius: var(--header-radius);
    color: var(--header-fg);
    /* EVERY light and every arc in the chrome is drawn here, on the one box that spans all of the
       rows. That is what makes the top strip and the navigation read as a single surface: a curve
       entering the strip leaves through the navigation row as the same unbroken line, and the
       violet and teal cross the seam without a step. The rows themselves paint no ground of their
       own beyond the tint the editor picked - see .site-topbar.

       The arcs are ring stops in a background layer rather than bordered pseudo-elements on
       purpose: the header must not clip its overflow - the navigation panels hang below it - and
       a background layer is clipped to the box for free, where a pseudo-element would need
       overflow:hidden to stay inside it.

       Vertical radii are given in % so the field stretches with whatever height the document asks
       for; a px radius tuned against a 132px bar goes blotchy the moment an editor makes it 96. */
    background:
        radial-gradient(circle at calc(63% + 260px) calc(100% + 64px), transparent 0 299px, var(--header-arc) 299px 300.4px, transparent 302px),
        radial-gradient(circle at calc(100% + 120px) 50%, transparent 0 200px, var(--header-arc) 200px 201.4px, transparent 203px),
        radial-gradient(circle at calc(100% + 120px) 50%, transparent 0 252px, var(--header-arc-soft) 252px 253.4px, transparent 255px),
        radial-gradient(circle at 0% 200%, transparent 0 198px, var(--header-arc-soft) 198px 199.4px, transparent 201px),
        radial-gradient(660px 190% at 46% 110%, var(--header-glow-teal), transparent 72%),
        radial-gradient(420px 150% at 103% 54%, var(--header-glow-violet), transparent 72%),
        radial-gradient(380px 150% at -3% 82%, var(--header-glow-violet), transparent 70%),
        var(--header-ink);
    box-shadow: 0 1px 0 var(--header-rule);
}
/* The top bar lays its own wash over the header, so it has to round with the card or it squares
   off the two corners the header just rounded. At --header-radius 0 this is the shape it had. */
.site-header > .site-topbar:first-child { border-radius: var(--header-radius) var(--header-radius) 0 0; }
.site-header .header-inner { max-width: none; padding-inline: var(--header-pad-x); }
/* topbar-inner is deliberately NOT in the rule above: the top bar breaks out to full width (see
   .site-topbar below) regardless of the card's own ContainerWidth, so its content stays on the
   plain .site-shell it already carries in the markup - the same centred column as the rest of the
   page - rather than the card's width. */
.header-inner { position: relative; min-height: calc(var(--header-min-h, 72px) - 16px); display: flex; align-items: center; justify-content: space-between; gap: var(--header-gap-x); }

.brand { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 14px; min-width: 0; color: inherit; text-decoration: none; }
/* The cap is a guard against a logo wide enough to crowd the menu, not a second size setting. At
   240px it was quietly overruling the editor: a 3:1 logo stopped growing at 80px however far the
   Logo height slider went, and the validator allows 120. 320px lets the slider mean what it says
   for any logo up to about 6:1, which is every wordmark, and still stops a banner. */
.brand img { display: block; flex: 0 0 auto; width: auto; max-width: 320px; height: calc(var(--brand-logo-h, 40px) - 12px); object-fit: contain; object-position: left center; }
.brand-text { display: grid; gap: 3px; min-width: 0; line-height: 1.1; }
.brand-name { color: #fff; font-size: clamp(1.25rem, 1.9vw, 1.65rem); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.brand-tagline { color: var(--header-fg-muted); font-size: .78rem; font-weight: 500; white-space: nowrap; }
/* ---------------------------------------------------------------------------
   Primary navigation.

   Three open mechanisms live here and exactly one is ever in charge.

   Below 1201px the drawer opens submenus with .open, set by the "+" buttons.
   At 1201px and up the bar opens them on hover. The plain :hover rule is the
   no-script fallback only: once site.js starts it marks the nav .is-enhanced,
   takes ownership through .is-open, and animates a single shared card between
   triggers.

   Whichever is in charge, a panel is docked to the BOTTOM EDGE OF THE BAR and
   the trigger is stretched to reach it. The nav row is shorter than the bar -
   an editor can size the bar anywhere from 40px to 200px - so a panel offset
   from the list item instead leaves bare header between the two, and a pointer
   crossing that band drops :hover and closes the panel before it is reached.
   --------------------------------------------------------------------------- */
.public-nav > ul, .public-nav ul { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.public-nav > ul { flex-wrap: wrap; justify-content: flex-end; }
.public-nav a { display: block; padding: 10px 11px; color: var(--header-fg); font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .15s ease; }
.public-nav a:hover { color: #fff; }
.public-nav a[aria-current="page"] { color: var(--header-accent); }
.public-nav li { position: relative; }
.public-nav li.has-children { display: flex; align-items: center; }
.public-nav li > ul { display: none; position: absolute; top: 100%; left: 0; min-width: 230px; padding: 8px; background: var(--header-panel); border: 1px solid var(--header-rule); border-radius: 0; box-shadow: 0 28px 56px rgba(4, 10, 22, .5); }
.public-nav li > ul a { border-radius: 0; color: var(--header-fg-muted); }
.public-nav li > ul a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.public-nav li > ul a[aria-current="page"] { color: var(--header-accent); }
.public-nav li > ul li { width: 100%; }
.public-nav li > ul li.has-children { align-items: stretch; }
/* The script builds these two unconditionally. Outside the bar's range they
   have no rules of their own, so without this they sit in the drawer header as
   two extra zero-width flex items and eat two of .header-inner's 24px gaps. */
.nav-stage, .nav-pill { display: none; }
@media (min-width: 1201px) {
    /* Stretch the trigger to the full height of the bar so its bottom edge and
       the panel's top edge touch. This is what removes the dead band. */
    .public-nav { align-self: stretch; display: flex; align-items: stretch; padding-left: var(--header-gap-x); background: linear-gradient(var(--header-rule), var(--header-rule)) left center / 1px 52% no-repeat; }
    /* Deliberately NOT position:relative. The pill, the card and the panels are
       all placed by the script in .header-inner's coordinate space, and a
       positioned list here would silently re-anchor the panels to itself. */
    .public-nav > ul { align-items: stretch; align-content: stretch; }
    /* Stretched items are as tall as the bar, so the label has to re-centre
       itself. Items without children need this as much as parents do. */
    .public-nav > ul > li { display: flex; align-items: center; }

    /* Parents open on hover, focus or tap - never from a visible control, so
       the drawer's "+" button has no job on the bar. */
    .public-nav .submenu-toggle { display: none; }

    /* The bar reads brand | menu | actions. Both hairlines are backgrounds, not
       borders or pseudo-elements, so they stop short of the bar's full height
       without positioning the nav - see the note on .public-nav > ul below. */
    .header-actions { align-self: stretch; padding-left: var(--header-gap-x); background: linear-gradient(var(--header-rule), var(--header-rule)) left center / 1px 52% no-repeat; }
    .public-nav > ul > li > a { display: flex; align-items: center; gap: 9px; padding-inline: var(--nav-pad-x); font-size: .95rem; }
    /* Parents wear a chevron on the bar in place of the drawer's "+" button. */
    .public-nav > ul > li.has-children > a::after { content: ""; width: 6px; height: 6px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; opacity: .75; transform: rotate(45deg); transition: transform .2s ease, margin .2s ease; }
    .public-nav > ul > li.is-open > a::after { margin-top: 3px; transform: rotate(225deg); }
    /* A menu with no submenus never gets the moving underline below, so the bar draws its own -
       for the page you are on and, as the pill does, for whatever the pointer is over. */
    .public-nav:not(.is-enhanced) > ul > li > a[aria-current="page"],
    .public-nav:not(.is-enhanced) > ul > li > a:hover { background: linear-gradient(90deg, var(--header-accent), var(--header-accent-deep)) center bottom 2px / calc(100% - 2 * var(--nav-pad-x)) 3px no-repeat; }

    .public-nav li > ul li > ul { top: -9px; left: 100%; }
    .public-nav li:hover > ul, .public-nav li:focus-within > ul { display: block; }

    .public-nav > ul > li.mega { position: static; }
    .public-nav > ul > li.mega > ul { left: 0; right: 0; width: 100%; min-width: 0; padding: 22px 18px 18px; align-items: start; gap: 10px 22px; }
    .public-nav > ul > li.mega:hover > ul, .public-nav > ul > li.mega:focus-within > ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    .public-nav > ul > li.mega > ul > li { display: block; width: auto; }
    .public-nav > ul > li.mega > ul > li > a { padding: 4px 8px 10px; color: var(--header-accent); font-size: .92rem; font-weight: 400; letter-spacing: normal; text-transform: none; white-space: normal; }
    .public-nav > ul > li.mega > ul > li > ul { position: static; display: block; min-width: 0; padding: 0; border: 0; box-shadow: none; }
    .public-nav > ul > li.mega > ul > li > ul a { padding: 6px 8px; font-size: .92rem; font-weight: 400; letter-spacing: normal; text-transform: none; white-space: normal; }

    /* ---- Enhanced: the morphing spotlight panel ---------------------------
       Every rule below has to out-rank one of the :hover rules above it. Some
       win on specificity and some only on document order, so keep this block
       after those rules if you move anything.

       Panels stay laid out and are hidden with visibility rather than display,
       for two reasons: the script has to measure one before revealing it, and
       visibility:hidden still removes it from the accessibility tree and the
       tab order. They are absolutely positioned, so they never affect layout.

       The panels also give up their own background, border and shadow. That
       chrome is drawn once by .nav-stage__surface and animated between
       triggers, which is what makes the card appear to morph instead of one
       vanishing and another appearing.
       ---------------------------------------------------------------------- */
    /* Every panel resolves against .header-inner, not against its own list
       item, so the script can place them all on one coordinate system and so
       a 230px dropdown is measured against the shell rather than against a
       117px trigger. */
    .public-nav.is-enhanced > ul > li.has-children { position: static; }
    /* A static list item paints its label in the in-flow layer, underneath the
       pill. Lifting the label is what keeps it readable. */
    .public-nav.is-enhanced > ul > li > a { position: relative; z-index: 1; }
    /* Root panels only. A descendant selector here would also catch the column
       lists inside a mega panel, which are static, always shown, and would be
       hidden and made unclickable along with their parent. */
    .public-nav.is-enhanced > ul > li > ul {
        display: block;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        z-index: 2;
        left: var(--panel-x, 0px);
        max-height: calc(100vh - var(--header-offset, 72px) - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    }
    /* The entry offset is declared once, on the closed state only. Setting it
       on the panel and then cancelling it on .is-open leaves two competing
       transform declarations, which is one cascade surprise away from a panel
       stranded 6px below its own card. */
    .public-nav.is-enhanced > ul > li:not(.is-open) > ul { transform: translateY(6px); }
    .public-nav.is-enhanced > ul > li.mega > ul {
        display: grid;
        right: auto;
        width: 100%;
        max-width: 100%;
        grid-template-columns: repeat(var(--mega-cols, 3), minmax(180px, 1fr));
    }
    /* Switching between two triggers is a cross-fade only. The travel is the
       card's job, and a panel sliding at the same time reads as two things
       moving against each other. */
    .public-nav.is-enhanced > ul > li.is-open > ul {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transition: opacity .22s ease, transform .26s cubic-bezier(.22, 1, .36, 1);
    }

    .nav-stage { display: block; position: absolute; z-index: 1; top: 100%; right: 0; left: 0; height: 0; pointer-events: none; }
    .nav-stage__surface {
        position: absolute; top: 0; left: 0;
        width: var(--stage-w, 0px); height: var(--stage-h, 0px);
        background: var(--header-panel);
        border: 1px solid var(--header-rule);
        border-radius: 0;
        box-shadow: 0 28px 56px rgba(4, 10, 22, .5);
        transform: translateX(var(--stage-x, 0px));
        opacity: 0;
        visibility: hidden;
        transition: opacity .18s ease, visibility 0s linear .18s,
                    transform .3s cubic-bezier(.22, 1, .36, 1),
                    width .3s cubic-bezier(.22, 1, .36, 1),
                    height .3s cubic-bezier(.22, 1, .36, 1);
    }
    .nav-stage.is-open .nav-stage__surface { opacity: 1; visibility: visible; transition-delay: 0s; }
    /* First open of a run lands on the trigger instead of sliding in from
       wherever the previous run left the card. Geometry jumps; the fade that
       makes it look deliberate is kept. */
    .nav-stage.is-placing .nav-stage__surface { transition-property: opacity, visibility; }

    /* The "pill" is drawn as a gold underline beneath the label rather than a
       wash behind it. It keeps the pill's geometry and motion, so it still rests
       on the page you are on and slides to whatever the pointer is over. */
    .nav-pill {
        display: block;
        position: absolute; z-index: 0;
        top: var(--pill-y, 0px); left: 0;
        width: var(--pill-w, 0px); height: var(--pill-h, 0px);
        transform: translateX(var(--pill-x, 0px));
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease,
                    transform .26s cubic-bezier(.22, 1, .36, 1),
                    width .26s cubic-bezier(.22, 1, .36, 1);
    }
    .nav-pill::after { content: ""; position: absolute; right: var(--nav-pad-x); bottom: 2px; left: var(--nav-pad-x); height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--header-accent), var(--header-accent-deep)); }
    .nav-pill.is-on { opacity: 1; }
}
.submenu-toggle { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.submenu-toggle span { display: block; font-size: 1.2rem; line-height: 1; transition: transform .2s ease; }
.public-nav li.open > .submenu-toggle span { transform: rotate(45deg); }
.nav-toggle { display: none; width: 44px; height: 44px; padding: 9px; border: 1px solid var(--header-rule); border-radius: 12px; background: rgba(255, 255, 255, .04); color: var(--header-fg); cursor: pointer; }
/* The bars are drawn in the button's colour, so a header that recolours the button recolours the icon. */
.nav-toggle span { display: block; width: 22px; height: 2px; margin: 5px auto; background: currentColor; 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); }

.hero-band { min-height: min(680px, 82vh); display: flex; align-items: center; color: #fff; background: #12303a center/cover no-repeat; }
.hero-content { padding-block: 90px; }
.hero-content .hero-title { max-width: 850px; margin: .15em 0; font-size: clamp(2.7rem, 5.8vw, 5.3rem); font-weight: 700; line-height: 1.03; letter-spacing: -.03em; overflow-wrap: anywhere; }
.hero-content > p:not(.eyebrow) { max-width: 680px; font-size: 1.15rem; }
.eyebrow { color: var(--teal); font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero-band .eyebrow { color: var(--yellow); }
/* .button is the theme button (theme.css); content pages only set it a size larger. */
.button { min-height: 46px; padding: 10px 20px; font-size: var(--fs-md); }

.content-band { padding: 76px 0; }
.content-band h2, .cta-band h2 { margin: 0 0 18px; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.section-intro { max-width: 760px; margin: -6px 0 30px; color: var(--muted); font-size: 1.05rem; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose img, .media-block img { max-width: 100%; height: auto; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; vertical-align: top; }
.prose th { background: var(--mist); font-weight: 700; }
.prose iframe, .prose .ql-video, .prose video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; margin: 1.2em 0; background: #0d1519; }
/* The HTML editor's Indent button writes ql-indent-1..9 rather than a style, so the page has
   to say what the class means. Same steps the editor draws: 3em a level. */
.prose .ql-indent-1 { padding-inline-start: 3em; }
.prose .ql-indent-2 { padding-inline-start: 6em; }
.prose .ql-indent-3 { padding-inline-start: 9em; }
.prose .ql-indent-4 { padding-inline-start: 12em; }
.prose .ql-indent-5 { padding-inline-start: 15em; }
.prose .ql-indent-6 { padding-inline-start: 18em; }
.prose .ql-indent-7 { padding-inline-start: 21em; }
.prose .ql-indent-8 { padding-inline-start: 24em; }
.prose .ql-indent-9 { padding-inline-start: 27em; }

/* ---------------------------------------------------------------------------
   Image layout inside rich text. The HTML editor writes one cms-img-* class on
   the <img>; these rules are the whole of what that class means, and
   cms-html-editor.js carries the same set so Design and View match the page.
   "Through" also needs shape-outside naming the picture's own file, which the
   editor writes inline and CmsHtmlSanitizerService re-derives on save.
   --------------------------------------------------------------------------- */
.prose img.cms-img-wrap-left, .prose img.cms-img-through-left { float: left; margin: .25em 1.4em .8em 0; }
.prose img.cms-img-wrap-right, .prose img.cms-img-through-right { float: right; margin: .25em 0 .8em 1.4em; }
.prose img.cms-img-through-left, .prose img.cms-img-through-right { shape-margin: 14px; }
/* An image left at its natural size fills the column, and nothing can wrap beside it.
   A picture the author has sized keeps that size; only an unsized one is held back. */
.prose img[class*="cms-img-wrap-"]:not([width]):not([style*="width"]),
.prose img[class*="cms-img-through-"]:not([width]):not([style*="width"]) { max-width: 44%; }
.prose img.cms-img-break-left, .prose img.cms-img-break-center,
.prose img.cms-img-break-right, .prose img.cms-img-full { display: block; float: none; clear: both; margin-block: 1.2em; }
.prose img.cms-img-break-left { margin-inline: 0 auto; }
.prose img.cms-img-break-center { margin-inline: auto; }
.prose img.cms-img-break-right { margin-inline: auto 0; }
.prose img.cms-img-full { width: 100%; max-width: 100%; margin-inline: 0; }
/* A float must not reach past the block it was written in. Applied only when one is
   present, so the bespoke .prose layouts keep the box model they were built on. */
.prose:has(img[class*="cms-img-wrap-"])::after,
.prose:has(img[class*="cms-img-through-"])::after { content: ""; display: block; clear: both; }
@media (max-width: 640px) {
    /* A 44% float in a phone column leaves a gutter too narrow to read. */
    .prose img[class*="cms-img-wrap-"], .prose img[class*="cms-img-through-"] { float: none; margin-inline: 0; max-width: 100%; }
}
.media-block { padding-block: 40px; }
.media-block img { display: block; width: 100%; max-height: 720px; object-fit: cover; }
.media-block figcaption { padding-top: 8px; color: var(--muted); font-size: .9rem; }
.cta-band { padding: 56px 0; background: var(--yellow); }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.cta-inner p { margin-bottom: 0; }
.cta-band .button { flex: 0 0 auto; }

.cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.content-card { padding: 26px; border: 1px solid var(--line); border-top: 4px solid var(--teal); background: #fff; }
.content-card h3 { margin: 0 0 10px; font-size: 1.25rem; }
.content-card p { color: var(--muted); }
.text-link { color: var(--teal); font-weight: 700; }
.accordion-section { max-width: 900px; }
.accordion-section details { border-top: 1px solid var(--line); }
.accordion-section details:last-child { border-bottom: 1px solid var(--line); }
.accordion-section summary { position: relative; padding: 20px 46px 20px 0; font-weight: 700; cursor: pointer; list-style: none; }
.accordion-section summary::-webkit-details-marker { display: none; }
.accordion-section summary::after { content: "+"; position: absolute; right: 12px; font-size: 1.35rem; font-weight: 400; }
.accordion-section details[open] summary::after { content: "-"; }
.accordion-body { padding: 0 48px 22px 0; color: var(--muted); }

.video-block { max-width: 1000px; }
.video-frame { overflow: hidden; background: #0d1519; aspect-ratio: 16 / 9; }
.video-frame iframe, .video-frame video { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; }

.listing-page { padding-block: 90px; min-height: 60vh; }
.listing-page h1 { margin-top: 0; font-size: clamp(2.5rem, 5vw, 4.2rem); font-weight: 700; line-height: 1.1; letter-spacing: -.025em; overflow-wrap: anywhere; }

/* Public 404. Full-bleed navy stage using the same lights as the site header, then
   a compact hint row. The page keeps the site chrome (header/footer) around it. */
.not-found { background: var(--mist); }
.not-found__hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--header-fg);
    min-height: min(560px, calc(100vh - 180px));
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at calc(63% + 260px) calc(100% + 64px), transparent 0 299px, var(--header-arc) 299px 300.4px, transparent 302px),
        radial-gradient(circle at calc(100% + 80px) 42%, transparent 0 200px, var(--header-arc) 200px 201.4px, transparent 203px),
        radial-gradient(660px 190% at 46% 110%, var(--header-glow-teal), transparent 72%),
        radial-gradient(420px 150% at 103% 54%, var(--header-glow-violet), transparent 72%),
        radial-gradient(380px 150% at -3% 82%, var(--header-glow-violet), transparent 70%),
        var(--header-ink);
}
.not-found__hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr);
    align-items: center;
    gap: clamp(28px, 5vw, 72px);
    width: min(calc(100% - 40px), var(--max));
    padding-block: clamp(56px, 8vw, 96px);
}
.not-found__copy .eyebrow { margin: 0 0 18px; color: var(--header-accent); letter-spacing: .28em; }
.not-found__copy h1 {
    margin: 0 0 16px;
    max-width: 14ch;
    color: #fff;
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.03em;
}
.not-found__lead {
    max-width: 42ch;
    margin: 0 0 22px;
    color: var(--header-fg-muted);
    font-size: 1.05rem;
}
.not-found__path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 28px;
    color: var(--header-fg-muted);
    font-size: .82rem;
}
.not-found__path code {
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--header-rule);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-size: .84rem;
    overflow-wrap: anywhere;
}
.not-found__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.not-found .button { min-width: 148px; border-radius: var(--radius-lg); }
.not-found__button-ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .32);
}
.not-found__button-ghost:hover { background: rgba(255, 255, 255, .08); }
.not-found__visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 220px;
    color: var(--header-fg);
}
.not-found__digits {
    font-family: var(--font-sans);
    font-size: clamp(6.2rem, 14vw, 9.5rem);
    font-weight: 500;
    line-height: .8;
    letter-spacing: -.06em;
    color: transparent;
    background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(245, 183, 59, .38));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 1px rgba(245, 183, 59, .32);
}
.not-found__mark {
    position: absolute;
    width: min(280px, 70%);
    color: var(--header-fg);
    opacity: .9;
    pointer-events: none;
}
.not-found__panel { padding: 36px 0 64px; }
.not-found__hints {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.not-found__hint {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 4px;
    min-height: 100%;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 10px 24px -22px rgba(11, 22, 40, .5);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
a.not-found__hint:hover {
    border-color: color-mix(in srgb, var(--teal) 35%, var(--line));
    box-shadow: 0 18px 32px -24px rgba(11, 22, 40, .7);
    transform: translateY(-2px);
    text-decoration: none;
}
.not-found__hint.is-static { background: #fff; }
.not-found__hint-icon {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--teal) 10%, var(--paper));
    color: var(--teal);
}
.not-found__hint-icon svg { width: 20px; height: 20px; }
.not-found__hint strong { margin: 0; font-size: 1.02rem; }
.not-found__hint span:last-child { color: var(--muted); font-size: .9rem; line-height: 1.45; }
@media (max-width: 900px) {
    .not-found__hero-inner { grid-template-columns: 1fr; padding-block: 48px 40px; }
    .not-found__visual { order: -1; min-height: 160px; }
    .not-found__digits { font-size: clamp(5rem, 22vw, 7rem); }
    .not-found__copy h1 { max-width: none; }
    .not-found__hints { grid-template-columns: 1fr; }
}
.post-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 40px; border-top: 1px solid var(--line); }
.post-list article { padding: 30px 24px; border-bottom: 1px solid var(--line); }
.post-list article:nth-child(odd) { border-right: 1px solid var(--line); }
.post-list h2 { margin: 8px 0; font-size: 1.5rem; }
.post-list h2 a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.post-list time, .muted { color: var(--muted); }

.cms-public-form { display: grid; gap: 1rem; max-width: 720px; }
.form-field { display: grid; gap: .4rem; }
.form-field label { font-weight: 700; }
.form-field input, .form-field textarea, .form-field select { width: 100%; padding: .75rem; border: 1px solid #9eacb2; background: #fff; color: var(--ink); }
.form-field textarea { min-height: 130px; resize: vertical; }
.cms-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-message { max-width: 720px; margin-bottom: 1rem; padding: .85rem 1rem; border-left: 4px solid; }
.form-message.success { border-color: #16834b; background: #edf8f2; }
.form-message.error { border-color: #bd2c2c; background: #fff1f1; }
@media (max-width: 900px) {
    .cards-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* The drawer breakpoint. A full menu and a call to action do not fit a bar
   narrower than this, so below it the menu moves into the drawer. site.js reads
   drawer mode from .nav-toggle's computed display rather than repeating the
   number; the other navigation queries in this file use the same 1200/1201px.
   Page content keeps its own 900px step. */

@media (max-width: 1200px) {
    .nav-toggle { display: block; }
    /* Height, not bottom:0. Even after the filter is dropped above, a
       transform/filter on the header would re-create a containing block and
       pin bottom to the header's own edge. 100dvh is the viewport, so the
       open drawer always runs from the measured header bottom to the screen
       bottom. --header-offset is the VISIBLE bottom (see measureHeader): a
       sticky bar with a top strip pins at -topbar-h, so the visible chrome
       is shorter once that strip has scrolled away. */
    .public-nav { display: none; position: fixed; top: var(--header-offset, 72px); right: 0; left: 0; height: calc(100vh - var(--header-offset, 72px)); height: calc(100dvh - var(--header-offset, 72px)); overflow-y: auto; padding: 14px 20px 34px; background: var(--header-ink); border-top: 1px solid var(--header-rule); }
    .public-nav.open { display: block; }
    .public-nav > ul, .public-nav ul { display: block; }
    .public-nav li.has-children { display: grid; grid-template-columns: 1fr 44px; align-items: center; }
    .public-nav li > ul, .public-nav li > ul li > ul { position: static; grid-column: 1 / -1; padding: 0 0 6px 14px; margin-left: 12px; border: 0; border-left: 2px solid var(--header-rule); border-radius: 0; background: none; box-shadow: none; }
    /* Nothing to cancel here any more: hover, the shared card and the pill all
       live inside (min-width: 1201px), so the drawer is the only mechanism in
       range and .open is the only thing that opens a panel. */
    .public-nav li.open > ul { display: block; }
    .public-nav > ul > li.mega > ul > li > ul { display: none; }
    .public-nav > ul > li.mega > ul > li.open > ul { display: block; }
    .public-nav > ul > li.mega > ul > li > a { padding: 12px; color: inherit; font-size: .92rem; font-weight: 400; letter-spacing: normal; text-transform: none; }
    .public-nav a { padding: 12px; }
}

@media (max-width: 640px) {
    .hero-band { min-height: 590px; }
    .hero-content { padding-block: 70px; }
    .hero-content .hero-title { font-size: clamp(2.5rem, 13vw, 4rem); }
    .content-band { padding: 58px 0; }
    .cta-inner { display: block; }
    .cta-inner .button { margin-top: 24px; }
    .cards-grid, .post-list { grid-template-columns: 1fr; }
    .post-list article:nth-child(odd) { border-right: 0; }
}



.site-header:not(.is-sticky) { position: static; }

/* Hide the pinned bar while the visitor scrolls down; slide it back on scroll up.
   Transform only — the layout box stays put, so the page does not jump. */
.site-header.is-sticky,
.site-header.is-transparent { transition: transform .28s ease; }
.site-header.is-away {
    transform: translate3d(0, calc(-100% - var(--header-gap, 0px) - 12px), 0);
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .site-header.is-sticky,
    .site-header.is-transparent { transition: none; }
}
/* ShowBorderBottom is the hairline between the top bar and the navigation. */
.site-header.has-border > .site-topbar { box-shadow: inset 0 -1px 0 var(--header-rule); }

/* Transparency is opt-in AND script-confirmed. The default here is opaque, so a
   visitor without JavaScript never lands on unreadable text over a pale hero.
   The card's text is light either way, so only its ground changes. */
.site-header.is-transparent { position: fixed; inset-inline: 0; top: 0; background: var(--header-overlay, rgba(0,0,0,.45)); box-shadow: none; }
.site-header.is-transparent.is-opaque { position: sticky; background: var(--header-ink); box-shadow: 0 1px 0 var(--header-rule); }

.header-actions { display: flex; align-items: center; gap: 12px; }
.header-action { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 18px; border-radius: 6px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.header-action svg.icon { width: 1.15em; height: 1.15em; transition: transform .2s ease; }
.header-action.action-primary { background: var(--accent, #12333f); color: #fff; }
.header-action.action-outline { border: 1px solid currentColor; }
.header-action.action-text { padding-inline: 4px; text-decoration: underline; text-underline-offset: 4px; }
/* Signed-in job seekers get a POST sign-out button in place of the login link. */
.portal-logout { display: contents; }
button.header-action { border: 0; font: inherit; cursor: pointer; }
.drawer-actions { display: none; }

/* In the site header the actions are pills and the primary one is the gold call to action - the
   shared gold button in theme.css, which every other gold button on the site copies. The page
   footer band reuses .header-action and keeps its own look. */
.site-header .header-action.action-outline { border-color: var(--header-rule); }
.site-header .header-action.action-outline:hover { border-color: var(--header-accent); }
.site-header .header-action.action-text { color: var(--header-fg); }
.site-header .header-action:hover svg.icon-arrow-right { transform: translateX(3px); }

.site-header.preset-logocentred .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
.site-header.preset-logocentred .brand { grid-column: 2; justify-self: center; }
@media (min-width: 1201px) {
    /* Centred arrangements give the menu the room between the two hairlines and centre it there. */
    .site-header.preset-logoleftmenucentre .public-nav,
    .site-header.preset-logoleftmenucentrecta .public-nav { flex: 1 1 auto; }
    .site-header.preset-logoleftmenucentre .public-nav > ul,
    .site-header.preset-logoleftmenucentrecta .public-nav > ul { justify-content: center; }
    .site-header.preset-logocentred .public-nav { padding-left: 0; background: none; }
}
/* These three restate full width so a boxed preset's max-width cannot apply. They must restate
   the card inset with it, or setting --header-gap would move every preset but these. */
.site-header.width-wide,
.site-header.width-inherit,
.site-header.width-full { width: calc(100% - 2 * var(--header-gap)); border-radius: var(--header-radius); }

.footer-social { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.footer-social a { display: inline-flex; align-items: center; gap: 8px; }
.footer-social.style-icon a { width: 38px; height: 38px; justify-content: center; border: 1px solid #304047; border-radius: 50%; }
@media (max-width: 1200px) {
    /* Header actions move into the drawer, where the document asks for it. */
    .header-actions { display: none; }
    .drawer-actions { display: grid; gap: 10px; margin-top: 18px; }
    .site-header.preset-logocentred .header-inner { display: flex; }

    /* A transparent header must not stay fixed over an open drawer. */
    .site-header.is-transparent { position: sticky; background: var(--header-ink); }

    /* The document's bar height is a desktop hint; a phone bar needs no more than the default. */
    .header-inner { min-height: min(calc(var(--header-min-h, 72px) - 16px), 64px); }
}

/* ---------------------------------------------------------------------------
   Page bands.

   A band sits INSIDE the page content, above and below the body - not in the
   site chrome, which is identical everywhere. Its colours and background vary
   per page, so each band writes them inline on its own element; only the
   structural rules live here.

   --band-pad is set inline from the design's PaddingY.
   --------------------------------------------------------------------------- */

.page-band { display: block; }
.page-band-inner { padding-block: var(--band-pad, 34px); }
.page-band h1, .page-band h2 { margin: 0; line-height: 1.15; }
.page-band--header h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
.page-band--footer h2 { font-size: clamp(1.3rem, 3vw, 1.9rem); }
.page-band .band-subtitle { margin: 10px 0 0; max-width: 70ch; opacity: .85; }

.band-breadcrumb { margin-bottom: 10px; font-size: .84rem; opacity: .8; }
.band-breadcrumb a { color: inherit; }
.band-breadcrumb span { margin-inline: 6px; }
.band-breadcrumb span[aria-current] { margin-inline: 0; }

.page-band.align-centre .page-band-inner { text-align: center; }
.page-band.align-centre .band-subtitle { margin-inline: auto; }
.page-band.align-right .page-band-inner { text-align: right; }
.page-band.align-right .band-subtitle { margin-inline-start: auto; }

/* Legacy band width values remain readable, but content always uses site-shell. */

/* The footer band pairs copy with one button, so it needs a row rather than a stack. */
.band-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.page-band--footer .band-copy { min-width: 0; }
.page-band--footer .header-action.action-primary { background: #fff; color: #12333f; }
.page-band--footer .header-action.action-outline { border-color: currentColor; color: inherit; }
.page-band--footer .header-action.action-text { color: inherit; }
.page-band--footer.align-centre .band-cta-inner { flex-direction: column; text-align: center; }
.page-band--footer.align-right .band-cta-inner { flex-direction: row-reverse; }

/* The Hero and blog headings step down to h2 when a band owns the page h1. Their existing
   rules were retargeted from the element to a .hero-title class above, so both levels look
   identical - the change is semantic, not visual. */

@media (max-width: 640px) {
    .band-cta-inner { flex-direction: column; align-items: stretch; text-align: center; }
    .band-cta-inner .header-action { text-align: center; }
}

/* ---------------------------------------------------------------------------
   Top bar.

   A slim utility strip inside <header>, above the announcement. Its colours
   come from the header document as --topbar-bg and --topbar-fg; separators and
   hover washes are mixed from currentColor, so a light strip an editor picks
   works as well as the default dark one.

   It is a row of the header, not a box on top of it. The header paints one
   field of light across every row and the strip lays the editor's colour over
   it as a wash, so the glows and the gold curve cross the seam unbroken.

   A sticky header pins at minus the strip's height, which scrolls the strip
   away and keeps the navigation. --topbar-h is measured by site.js; without it
   the offset is 0 and the whole header simply stays pinned.

   The strip is edge to edge with the logo/menu bar: the header itself is already
   full-bleed, so this row is just another 100% child of it.
   --------------------------------------------------------------------------- */

svg.icon { display: inline-block; flex: 0 0 auto; width: 1em; height: 1em; vertical-align: -.125em; }

.site-header.is-sticky.has-topbar:not(.is-transparent),
.site-header.is-transparent.is-opaque.has-topbar { top: calc(-1 * var(--topbar-h, 0px)); }

.site-topbar { position: relative; overflow: hidden; width: 100%; line-height: 1.35; }
.topbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; min-height: 36px; padding-block: 3px; }
.site-topbar svg.icon { width: 15px; height: 15px; }

.topbar-actions { display: flex; align-items: center; gap: 8px 14px; margin-left: auto; }
.footer-social svg.icon { width: 18px; height: 18px; }
@media (max-width: 1400px) {
    /* The bar tightens before it would wrap: the tagline goes first, then the spacing comes in. */
    .brand-tagline { display: none; }
    .site-header { --nav-pad-x: 10px; --header-gap-x: 16px; }
    .public-nav > ul > li > a { font-size: .9rem; }
    .site-header .header-action { padding-inline: 20px; }
}
@media (min-width: 1201px) {
    /* A header kept to the content width never has room for the roomy bar, so it is always tight. */
    .site-header.width-inherit { --nav-pad-x: 10px; --header-gap-x: 16px; }
    .site-header.width-inherit .brand-tagline { display: none; }
    .site-header.width-inherit .public-nav > ul > li > a { font-size: .9rem; }
    .site-header.width-inherit .header-action { padding-inline: 20px; }
}
@media (max-width: 1100px) {
    .site-topbar::after { display: none; }
}
@media (max-width: 1200px) {
    /* The drawer takes the menu off the bar, which leaves room for the tagline again. */
    .brand-tagline { display: block; }
    /* Below the drawer breakpoint a transparent header is sticky too, so it scrolls the strip away as well. */
    .site-header.is-transparent.has-topbar { top: calc(-1 * var(--topbar-h, 0px)); }
}
@media (max-width: 640px) {
    .topbar-inner { gap: 6px 10px; }
}
@media (max-width: 420px) {
    .brand-tagline { display: none; }
}

/* ==========================================================================
   Rojgaar Sangam public portal chrome

   The CMS still owns every piece of editorial content: logo, brand fallback,
   menus, job-seeker action labels/URLs, moving news, and banner art.
   These rules provide the shared royal-blue / gold presentation only.
   ========================================================================== */

#main-content { min-height: 1000px; }

.site-header,
.site-header.width-inherit,
.site-header.width-wide,
.site-header.width-full {
    --header-ink: var(--color-blue);
    --header-panel: var(--color-blue-dark);
    --header-fg: #fff;
    --header-fg-muted: #dce9f7;
    --header-rule: rgba(255, 255, 255, .24);
    --header-accent: #ecb82e;
    --header-accent-deep: #dca517;
    width: 100%;
    margin: 0;
    border-radius: 0;
    color: var(--color-navy);
    background: #fff;
    box-shadow: 0 1px 12px rgba(10, 40, 87, .12);
}

/* The first row takes the whole white band. The row gap the old header rule gives .header-inner
   (var(--header-gap-x)) used to sit between it and the menu bar, which left the logo, search and
   buttons 15px under the top bar but 44px above the menu. The band is the same height; its
   content is now centred in it. */
.site-header .header-inner {
    --header-control-h: calc(52px * 0.9);
    --header-search-max: 450px;
    --header-guest-side-space: 980px;
    width: min(calc(100% - 2 * var(--page-gutter)), var(--page-max));
    min-height: calc(134px - 48px * 0.16);
    margin-inline: auto;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 450px) minmax(0, 1fr);
    grid-template-rows: calc(86px + var(--header-gap-x)) calc(48px * 0.84);
    row-gap: 0;
    column-gap: 14px;
}

/* Registration labels need more room than signed-in account controls. Reserve equal
   space on both sides so they cannot push the search away from the centre. */
@media (min-width: 1201px) {
    .site-header .header-inner:has(.header-actions .action-primary) {
        grid-template-columns: minmax(0, 1fr) minmax(250px, min(var(--header-search-max), calc(100% - var(--header-guest-side-space)))) minmax(0, 1fr);
    }
}

.site-header .brand { grid-column: 1; grid-row: 1; align-self: center; color: var(--color-navy); }
.site-header .brand img { max-width: min(100%, 330px); height: var(--brand-logo-h, 54px); }
.site-header .brand-name { color: var(--color-navy); font-size: clamp(1.65rem, 2.3vw, 2.35rem); font-weight: 700; }
.site-header .brand-tagline { color: var(--color-blue); font-size: .95rem; text-align: right; }

.portal-search {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    height: var(--header-control-h);
    border: 1px solid #aec8e4;
    border-radius: 7px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 7px rgba(22, 78, 138, .08);
}
.portal-search__icon { display: grid; place-items: center; color: #45698f; }
.portal-search__icon .icon { width: 21px; height: 21px; }
.portal-search input { min-width: 0; padding: 0 8px 0 0; border: 0; outline: 0; color: var(--color-navy); background: transparent; font-weight: 400; text-overflow: ellipsis; }
.portal-search input::placeholder { color: #7187a5; opacity: 1; }
.portal-search button {
    min-width: 88px;
    padding: 0 20px;
    border: 0;
    color: #fff;
    background: linear-gradient(120deg, var(--color-blue), #0763a6);
    font-weight: 400;
    cursor: pointer;
}
.portal-search:focus-within { border-color: var(--color-blue); box-shadow: 0 0 0 3px rgba(22, 78, 138, .16); }

.site-header .header-actions {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    padding-left: 0;
    background: none;
    gap: 12px;
}
.site-header .header-action { height: var(--header-control-h); min-height: var(--header-control-h); padding: 8px 22px; border-radius: 9px; font-size: .95rem; font-weight: 400; }
.site-header .header-action.action-outline { border: 1px solid #9fc6ee; color: #0b3d79; background: #f7fbff; }
.site-header .header-action svg.icon { width: 24px; height: 24px; }

/* Keep the destination explicit; the account name is supporting information. */
.site-header .portal-dashboard {
    display: inline-flex;
    min-width: 200px;
    gap: 10px;
    padding-inline: 14px;
    border: 1px solid #164e8a;
    color: #fff;
    background: #164e8a;
    box-shadow: 0 3px 8px rgba(22, 78, 138, .16);
}
.site-header .portal-dashboard:hover { color: #fff; background: #103b6a; border-color: #103b6a; }
.portal-dashboard__copy { display: grid; gap: 2px; min-width: 0; text-align: left; line-height: 1.2; }
.portal-dashboard__label { font-size: .88rem; font-weight: 600; }
.portal-dashboard__name { max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; color: #dce9f7; }
.site-header .portal-dashboard > .icon { flex-shrink: 0; width: 20px; height: 20px; }
.site-header .portal-dashboard > .icon-arrow-right { width: 16px; height: 16px; margin-left: auto; }
.site-header .header-action.portal-signout {
    height: 36px;
    min-height: 36px;
    padding: 6px 10px;
    gap: 6px;
    border-color: #efbdb7;
    color: #a12b25;
    background: #fff1ef;
    font-size: .78rem;
}
.site-header .header-action.portal-signout svg.icon { width: 16px; height: 16px; }
.site-header .header-action.portal-signout:hover { color: #84221d; background: #ffe1dd; border-color: #d9877e; }
.site-header :is(.portal-dashboard, .portal-signout):focus-visible { outline: 3px solid #ecb82e; outline-offset: 3px; }
.high-contrast .site-header :is(.portal-dashboard, .portal-signout) { border: 2px solid #fff; }
@media (max-width: 1200px) {
    .site-header .drawer-actions .portal-dashboard { width: 100%; min-width: 0; height: auto; min-height: 56px; padding: 10px 14px; border-color: #9fc6ee; }
    .site-header .drawer-actions .portal-signout { width: auto; min-height: 44px; height: auto; justify-self: start; }
    .site-header .drawer-actions .portal-dashboard__name { max-width: min(24ch, 45vw); }
}

.site-header .public-nav { color: #fff; }
/* The blue bar is the desktop menu only. Below 1201px this element is the drawer, which the drawer
   rules near the top of this file place and paint (fixed under the header, padded, on --header-ink).
   If the bar's placement, padding or ground reach it, the drawer drops into the header's grid as a
   see-through box - white links on the white header - and its height feeds the header height that
   site.js measures to place it. */
@media (min-width: 1201px) {
    .site-header .public-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        position: relative;
        align-self: stretch;
        justify-self: stretch;
        padding: 0;
        background: none;
    }
    .site-header .public-nav::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 100vw;
        transform: translateX(-50%);
        background: linear-gradient(90deg, var(--color-blue), #075e9f 72%, var(--color-blue));
    }
    .site-header .public-nav > ul { height: 100%; justify-content: space-around; }
    .site-header .public-nav > ul > li > a { height: 100%; padding: 0 clamp(12px, 2vw, 28px); }
}
.site-header .public-nav > ul a {
    font-family: var(--font-sans);
    font-size: .92rem;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
}
.site-header .public-nav > ul > li > a { color: #fff; }
/* li > a: the drawer also holds the header actions, and site.js marks the one for the page you are
   on (Job Seeker Login on the sign-in page) current too - it must keep its own button colours. */
.site-header .public-nav li > a[aria-current="page"] { color: #fff; }
.site-header .public-nav:not(.is-enhanced) > ul > li > a[aria-current="page"],
.site-header .public-nav:not(.is-enhanced) > ul > li > a:hover { background: linear-gradient(var(--color-gold), var(--color-gold)) center bottom / calc(100% - 24px) 4px no-repeat; }

.site-topbar {
    min-height: calc(42px * 0.7);
    color: #fff;
    background: linear-gradient(90deg, #17191b, #242728 55%, #17191b);
    font-size: .82rem;
}
.site-topbar .topbar-inner { min-height: calc(42px * 0.7); padding: 0; gap: 18px; }
.accessibility-tools, .topbar-actions { display: flex; align-items: center; gap: 18px; }
.accessibility-tools button, .contrast-control, .reader-control {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
}
.accessibility-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.accessibility-tools .icon, .language-choice .icon { width: 20px; height: 20px; }
.accessibility-divider, .language-separator { width: 1px; height: 20px; background: rgba(255,255,255,.28); }
.text-size-controls { display: flex; align-items: center; gap: 1px; }
.text-size-controls button { min-width: 31px; min-height: 31px; justify-content: center; font-weight: 700; }
.text-size-controls button:hover, .accessibility-tools > button:hover, .accessibility-link:hover,
.language-hindi:hover { color: var(--color-gold); }
.language-choice { display: inline-flex; align-items: center; gap: 8px; }
.language-hindi { color: #fff; text-decoration: none; }

@keyframes websiteNewsMove {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - 40px)); }
}
.website-news {
    position: relative;
    z-index: 3;
    min-height: 46px;
    display: flex;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(90deg, #075e9f, var(--color-blue));
}
.website-news__label {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0 34px;
    color: #092957;
    background: var(--color-gold);
    white-space: nowrap;
}
.website-news__label::after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    border-block: 23px solid transparent;
    border-left: 16px solid var(--color-gold);
}
.website-news__label .icon { width: 24px; height: 24px; }
.website-news__viewport { flex: 1; min-width: 0; overflow: hidden; }
.website-news__track {
    width: max-content;
    min-width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 80px;
    animation: websiteNewsMove 28s linear infinite;
    will-change: transform;
}
.website-news__content { flex: 0 0 auto; display: flex; align-items: center; gap: 26px; white-space: nowrap; }
.website-news__content > span { width: 9px; height: 9px; margin-left: 34px; border-radius: 50%; background: var(--color-gold); }
.website-news__content :is(p, ul, ol) { display: inline-flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; }
.website-news__content li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 12px; border-radius: 50%; background: var(--color-gold); }
.website-news__content a { color: #fff; text-decoration: none; }
.website-news__content a:hover { text-decoration: underline; text-underline-offset: 4px; }
.website-news:hover .website-news__track,
.website-news:focus-within .website-news__track { animation-play-state: paused; }

.public-search-page { min-height: 55vh; padding: clamp(58px, 8vw, 100px) 0; background: var(--color-surface-alt); }
.public-search-page h1 { margin: 0 0 30px; color: var(--color-navy); font-size: clamp(2rem, 4vw, 3.5rem); }
.public-search-page .eyebrow { margin: 0 0 6px; color: var(--color-blue); font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.public-search-form { max-width: 820px; }
.public-search-form label { display: block; margin-bottom: 9px; color: var(--color-navy); font-weight: 650; }
.public-search-form > div { display: flex; }
.public-search-form input { flex: 1; min-width: 0; min-height: 52px; padding: 0 17px; border: 1px solid #aec8e4; border-radius: 7px 0 0 7px; }
.public-search-form button { min-width: 120px; border: 0; border-radius: 0 7px 7px 0; color: #fff; background: var(--color-blue); font-weight: 700; }
.search-feedback { margin: 34px 0 18px; }
.search-results { max-width: 900px; margin: 0; padding: 0; list-style: none; }
.search-results li { padding: 24px 0; border-top: 1px solid var(--color-line); }
.search-results li > span { color: #b17e00; font-size: .78rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.search-results h2 { margin: 3px 0 6px; font-size: 1.25rem; }
.search-results h2 a { color: var(--color-blue); text-underline-offset: 4px; }
.search-results p { margin: 0; color: var(--color-muted); }

.public-info-page .public-search-form { margin-bottom: 22px; }
.public-info-filter > div { flex-wrap: wrap; gap: 0; }
.public-info-filter select {
    min-height: 52px;
    padding: 0 12px;
    border: 1px solid #aec8e4;
    border-left: 0;
    background: #fff;
}
.public-info-chips,
.public-info-summary,
.public-info-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 0 0 22px;
    align-items: center;
}
.public-info-chips a,
.public-info-summary a {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    padding: 0 14px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    color: var(--color-blue);
    text-decoration: none;
    font-weight: 650;
}
.public-info-chips a.is-active,
.public-info-summary a.is-active {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: #fff;
}
.public-info-pager { margin-top: 28px; }
.public-info-pager a { color: var(--color-blue); font-weight: 700; }
.public-info-cta {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    padding: 0 20px;
    background: var(--color-blue);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
    border-radius: 7px;
}
.high-contrast .site-header, .high-contrast .site-topbar, .high-contrast .site-header .public-nav,
.high-contrast .site-header .public-nav::before, .high-contrast .website-news { background: #000 !important; color: #fff !important; }
/* The brand wordmark and the menu button carry their own navy and blue, which would vanish on the
   black high-contrast bar. */
.high-contrast .site-header :is(.brand, .brand-name, .brand-tagline, .nav-toggle) { color: #fff !important; }
@media (min-width: 1201px) and (max-width: 1380px) {
    .site-header .header-inner {
        --header-search-max: 350px;
        --header-guest-side-space: 900px;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 350px) minmax(0, 1fr);
        column-gap: 9px;
    }
    .site-header .header-actions { gap: 7px; }
    .site-header .header-action { height: var(--header-control-h); min-height: var(--header-control-h); padding-inline: 12px; font-size: .8rem; }
    .site-header .header-action svg.icon { width: 20px; height: 20px; }
}
@media (max-width: 1200px) {
    .site-header .header-inner { min-height: 88px; grid-template-columns: minmax(200px, 1fr) minmax(300px, 480px) auto; grid-template-rows: 88px; gap: 12px; }
    .site-header .brand { grid-column: 1; grid-row: 1; }
    .portal-search { grid-column: 2; grid-row: 1; }
    .site-header .nav-toggle { grid-column: 3; grid-row: 1; color: var(--color-blue); }
    .accessibility-tools { gap: 12px; }
    .reader-control { display: none !important; }
}
@media (max-width: 820px) {
    .site-header .header-inner { min-height: 142px; grid-template-columns: 1fr auto; grid-template-rows: 76px 54px; }
    .site-header .brand { grid-column: 1; grid-row: 1; }
    .site-header .nav-toggle { grid-column: 2; grid-row: 1; }
    .portal-search { grid-column: 1 / -1; grid-row: 2; align-self: start; }
    .contrast-control span, .accessibility-link span { display: none; }
}
@media (max-width: 560px) {
    .site-header .brand img { max-width: 220px; }
    .site-header .brand-name { font-size: 1.4rem; }
    .portal-search { grid-template-columns: 38px minmax(0, 1fr) auto; height: var(--header-control-h); }
    .portal-search button { min-width: 48px; padding: 0 12px; font-size: 0; }
    .portal-search button::after { content: "Go"; font-size: .85rem; }
    .accessibility-tools { gap: 7px; }
    .accessibility-divider, .language-separator, .language-hindi { display: none; }
    .text-size-controls button { min-width: 27px; }
    .language-choice > span { display: none; }
    .public-search-form button { min-width: 86px; }
    .website-news__label { padding: 0 18px; }
    .website-news__label span { display: none; }
    .website-news__content > span { margin-left: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .website-news__track { width: 100%; animation: none; }
    .website-news__content[aria-hidden="true"] { display: none; }
    .website-news__content { white-space: normal; padding-block: 10px; }
}

/* ========================================================================== 
   Rojgaar Sangam civic footer
   ========================================================================== */
/* Same 8px blue band the homepage used to draw as a trailing Text block. It belongs above
   "Opportunities in Your Hands" on every page. */
.site-footer-rule { height: 8px; background: var(--color-blue); }
/* The Services skyline without its little flag: repeated across the strip, the flag landed behind
   the "in Your Hands" heading. Like the footer, the strip is rendered when it nears the viewport
   (content-visibility), not during page load. */
.app-promo-strip {
    width: 100%;
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: auto 200px;
    background:
        url('/cms-assets/app-promo-skyline.a2f58e275caa.svg') center bottom / auto 130px repeat-x,
        /* Beyond ~1570px the map follows the page column, staying behind the "Skilled youth" caption. */
        url('/images/app-promo-up-map.svg') right max(5%, calc(50vw - 716px)) center / auto 92% no-repeat,
        radial-gradient(300px 160px at 72% 45%, rgba(236, 184, 46, .2), transparent 70%),
        linear-gradient(180deg, #f3f8fd 0%, #f7fbff 100%);
}
.app-promo-strip img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}
.app-promo {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, .9fr) 150px 150px;
    align-items: center;
    gap: 10px 32px;
    width: min(calc(100% - 2 * var(--page-gutter)), var(--page-max));
    margin: 0 auto;
    padding: 16px 0 26px;
    color: #12315f;
}
.app-promo__brand { margin: 0 0 4px; font-size: .78rem; font-weight: 600; letter-spacing: .14em; }
.app-promo__title {
    margin: 0;
    max-width: 12ch;
    color: #102a56;
    font-size: clamp(1.8rem, 2.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
}
.app-promo__accent { color: #e0ad1d; }
.app-promo__meta { margin: 8px 0 0; font-size: .8rem; font-weight: 500; letter-spacing: .04em; }
.app-promo__script {
    display: flex;
    gap: .3em;
    width: max-content;
    margin: 8px 0 0;
    color: #163e86;
    font-family: var(--font-script);
    font-size: clamp(1.05rem, 1.4vw, 1.35rem);
    line-height: 1;
    transform: rotate(-4deg);
}
/* Above the phone's yellow disc, which reaches into this column on tablets and hid "Build Your Future". */
.app-promo__offer { position: relative; z-index: 2; text-align: left; }
.app-promo__download {
    margin: 0;
    max-width: 17ch;
    color: #16356f;
    font-size: clamp(1.25rem, 1.7vw, 1.6rem);
    font-weight: 700;
    line-height: 1.15;
}
.app-promo__features { margin: 6px 0 10px; font-size: .78rem; font-weight: 500; }
.app-promo__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.app-promo__store {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 4px 12px 4px 9px;
    border-radius: 8px;
    background: #111;
    color: #fff;
    text-decoration: none;
}
.app-promo__store:hover { color: #fff; background: #000; }
.app-promo__store-mark {
    width: 22px;
    height: 22px;
    background: center / contain no-repeat;
}
.app-promo__store--play .app-promo__store-mark {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M3 20.5v-17L14.5 12z'/%3E%3Cpath fill='%2334A853' d='M3 20.5 14.5 12 18 15.2 6.2 21.8z'/%3E%3Cpath fill='%23FBBC04' d='M3 3.5 6.2 2.2 18 8.8 14.5 12z'/%3E%3Cpath fill='%23EA4335' d='m14.5 12 3.5-3.2 3.2 1.8c.8.5.8 1.6 0 2.1L18 15.2z'/%3E%3C/svg%3E");
}
.app-promo__store--apple .app-promo__store-mark {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M16.4 12.6c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.2-2.8.8-3.5.8s-1.8-.8-3-.8c-1.5 0-3 .9-3.8 2.3-1.6 2.8-.4 7 1.2 9.3.8 1.1 1.7 2.3 2.9 2.3 1.2 0 1.6-.7 3-.7s1.8.7 3 .7 2-.1 2.9-2.2c.7-1.1 1-2.2 1-2.3-.1 0-2.3-.9-2.3-3.1zM14.5 6.2c.6-.8 1.1-1.9.9-3-1 .1-2.1.7-2.8 1.5-.6.7-1.2 1.8-.9 2.9 1.1.1 2.1-.5 2.8-1.4z'/%3E%3C/svg%3E");
}
.app-promo__store-copy { display: grid; line-height: 1.05; text-align: left; }
/* "GET IT ON" is capitals, so 11px; "Download on the" is sentence case, so the 12px minimum. */
.app-promo__store-copy small { font-size: .6875rem; font-weight: 500; letter-spacing: .04em; }
.app-promo__store--apple .app-promo__store-copy small { font-size: .75rem; letter-spacing: 0; }
.app-promo__store-copy strong { font-size: 1rem; font-weight: 600; }
.app-promo__phone {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 96px;
    min-height: 176px;
    margin-block: -6px -14px;
    padding: 20px 8px 10px;
    text-align: center;
    transform: rotate(10deg);
}
.app-promo__phone::before {
    content: "";
    position: absolute;
    z-index: -2;
    top: 6px;
    right: 26px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: #f0c43a;
}
.app-promo__phone::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border: 4px solid #1c1c1c;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(16, 42, 86, .16);
}
.app-promo__phone img {
    position: relative;
    z-index: 1;
    width: 70px;
    height: auto;
    margin: 0;
}
.app-promo__phone-caption {
    position: relative;
    z-index: 1;
    display: grid;
    margin: 10px 0 0;
    color: #1a4f93;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
}
.app-promo__aside {
    position: relative;
    z-index: 1;
    width: 9.5em;
    margin: 0;
    color: #7f95b3;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .18em;
    line-height: 1.6;
    text-transform: uppercase;
}
.app-promo__aside::after {
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    margin-top: 8px;
    background: #e0ad1d;
}
@media (max-width: 1100px) {
    .app-promo { grid-template-columns: 1fr 1fr 130px; padding-bottom: 40px; }
    .app-promo__aside { display: none; }
}
@media (max-width: 720px) {
    .app-promo { grid-template-columns: 1fr; }
    .app-promo__title { max-width: none; }
    .app-promo__script { margin-bottom: 36px; }
    .app-promo__offer { margin-top: 8px; }
    .app-promo__phone { grid-column: auto; grid-row: auto; margin: 18px auto 0; }
}

.rojgaar-footer {
    --rf-blue: #164e8a;
    --rf-deep: #063b78;
    --rf-gold: #ecb82e;
    --rf-ink: #092957;
    color: var(--rf-ink);
    background: #fff;
    /* Laid out and painted when it nears the viewport rather than during page load; "auto" keeps its
       real height once it has rendered. */
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
}
@media (max-width: 760px) { .rojgaar-footer { contain-intrinsic-size: auto 2100px; } }
.rojgaar-footer.has-top-border { border-top: 1px solid #dbe6f1; }
.rojgaar-footer a { color: inherit; text-decoration: none; }
.rojgaar-footer a:hover { color: var(--rf-blue); }
.rojgaar-footer ul { margin: 0; padding: 0; list-style: none; }
.rojgaar-footer__main {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(500px 250px at 88% 7%, rgba(236, 184, 46, .1), transparent 72%),
        linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}
/* The two scenes cut from the footer reference (transparent webps): Lucknow's riverside on the left,
   and the monument skyline under the help cards, kept clear of the "Uttar Pradesh leads" quote.
   Both keep the reference's proportions and never grow past their source size. */
.rojgaar-footer__main::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
    left: 0;
    background:
        url('/images/footer-scene-left.webp') left bottom / min(32.8vw, 548px) auto no-repeat,
        url('/images/footer-scene-right.webp') right calc(max(36px, (100% - 1510px) / 2) + 160px) bottom / min(24.5vw, 410px) auto no-repeat;
    pointer-events: none;
}
.rojgaar-footer__grid {
    width: min(calc(100% - 2 * var(--page-gutter)), var(--page-max));
    display: grid;
    align-items: start;
}
.rojgaar-footer__identity {
    min-width: 0;
    border-right: 1px solid #d6dee8;
}
.rojgaar-footer__logo { display: block; object-fit: contain; object-position: left center; }
.rojgaar-footer__promise { display: flex; margin: 18px 0 0; color: var(--rf-ink); letter-spacing: .04em; white-space: nowrap; }
.rojgaar-footer__promise span + span::before { content: ""; display: inline-block; margin: 0 18px 1px 0; border-radius: 50%; background: var(--rf-gold); }
.rojgaar-footer__description { margin: 25px 0 0; color: #284d7e; }
.rojgaar-footer__script { display: grid; width: max-content; margin: 0; color: #09448a; font-family: var(--font-sans); font-size: clamp(1.45rem, 2.3vw, 2.25rem); line-height: .98; transform: rotate(-7deg); }
.rojgaar-footer__navigation { min-width: 0; }
.rojgaar-footer__menus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rojgaar-footer__menu h2, .rojgaar-footer__follow h2 {
    margin: 0 0 23px;
    color: var(--rf-ink);
    font-family: var(--font-sans);
    font-size: clamp(1.25rem, 1.7vw, 1.72rem);
    line-height: 1.15;
}
.rojgaar-footer__menu h2::after, .rojgaar-footer__follow h2::after { content: ""; display: block; width: 34px; height: 3px; margin-top: 12px; background: var(--rf-gold); }
.rojgaar-footer__menu nav > ul { display: grid; }
.rojgaar-footer__menu li { margin: 0; }
.rojgaar-footer__menu li ul { display: grid; gap: 9px; margin: 10px 0 0 18px; }
.rojgaar-footer__menu .submenu-toggle { display: none; }
.rojgaar-footer__menu a { position: relative; display: inline-flex; align-items: center; gap: 9px; color: #123f79; line-height: 1.4; white-space: nowrap; }
.rojgaar-footer__menu a::before { content: "›"; color: var(--rf-gold); font-size: 1.7em; line-height: .6; }
.rojgaar-footer__menu a:hover { color: #0061a7; transform: translateX(2px); }
.rojgaar-footer__follow h2 { margin-bottom: 18px; font-size: 1.08rem; }
.rojgaar-footer__follow .footer-social { display: flex; flex-wrap: wrap; gap: 13px; }
.rojgaar-footer__follow .footer-social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: var(--rf-blue); }
.rojgaar-footer__follow .footer-social li:nth-child(1) a { background: #e3131b; }
.rojgaar-footer__follow .footer-social li:nth-child(2) a { background: #060606; }
.rojgaar-footer__follow .footer-social li:nth-child(3) a { background: #2377d8; }
.rojgaar-footer__follow .footer-social li:nth-child(4) a { background: linear-gradient(135deg, #6e31bc, #ef2867 55%, #ffbe38); }
.rojgaar-footer__follow .footer-social a:hover { color: #fff; filter: brightness(1.1); transform: translateY(-2px); }
.rojgaar-footer__follow .footer-social .icon { width: 20px; height: 20px; }
.rojgaar-footer__follow .footer-social span { display: none; }
.rojgaar-footer__support { min-width: 0; }
.rojgaar-footer__help { border: 1px solid #f2e8cf; border-radius: 16px; background: linear-gradient(120deg, #fffaf0, #fff4d9); box-shadow: 0 12px 30px rgba(22, 78, 138, .06); }
.rojgaar-footer__help-heading { display: flex; align-items: center; gap: 18px; }
.rojgaar-footer__help-heading > span:last-child { display: grid; gap: 2px; }
.rojgaar-footer__help-heading strong { color: var(--rf-ink); font-family: var(--font-sans); font-size: 1.35rem; }
.rojgaar-footer__help-heading small { color: #315984; font-size: .88rem; }
.rojgaar-footer__round-icon { display: grid; place-items: center; flex: 0 0 58px; border-radius: 50%; color: var(--rf-ink); background: linear-gradient(135deg, #ffd45d, var(--rf-gold)); }
.rojgaar-footer__round-icon .icon { width: 29px; height: 29px; }
.rojgaar-footer__help-details { display: grid; }
.rojgaar-footer__help-details a { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rojgaar-footer__contact-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: var(--rf-blue); }
.rojgaar-footer__contact-icon .icon { width: 17px; height: 17px; }
.rojgaar-footer__help-details a > span:last-child { display: grid; }
/* The email breaks at the <wbr> after "@" (see _FooterMenu), so "anywhere" only splits a word on a
   screen too narrow for "rojgaarsangam.up.gov.in" itself - and it keeps the card's minimum width
   small, which the service cards beside it need. */
.rojgaar-footer__help-details strong { overflow-wrap: anywhere; color: var(--rf-ink); }
.rojgaar-footer__help-details small { color: #45698f; font-size: .75rem; }
.rojgaar-footer__services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.rojgaar-footer__service {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "mark title arrow" "copy copy copy";
    align-items: center;
    column-gap: 8px;
    row-gap: 3px;
    border: 1px solid #bed8f0;
    border-radius: 13px;
    background: linear-gradient(125deg, #eef7ff, #f8fbff);
}
.rojgaar-footer__service:nth-child(2) { border-color: #f0dfb8; background: linear-gradient(125deg, #fffaf0, #fff7e7); }
.rojgaar-footer__service > span { grid-area: mark; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--rf-blue); background: #cfe7ff; }
.rojgaar-footer__service:nth-child(2) > span { color: var(--rf-ink); background: #ffd65f; }
.rojgaar-footer__service > span .icon { width: 13px; height: 13px; }
.rojgaar-footer__service > .icon { grid-area: arrow; width: 16px; height: 16px; color: var(--rf-blue); }
.rojgaar-footer__service strong { grid-area: title; min-width: 0; color: var(--rf-ink); font-family: var(--font-sans); font-size: 1rem; line-height: 1.15; }
.rojgaar-footer__service small { grid-area: copy; color: #42648a; font-size: .77rem; line-height: 1.25; }
.rojgaar-footer__quote { max-width: 23ch; margin: 24px 0 0 auto; color: #315984; letter-spacing: .22em; line-height: 1.7; text-transform: uppercase; }
/* Clipped: the skewed gold caps hang past both ends of the bar, and on a phone the right one widens the
   layout viewport - the menu drawer, which is fixed to that viewport, then runs off the screen. */
.rojgaar-footer__bottom { position: relative; overflow: hidden; color: #fff; background: linear-gradient(100deg, #075c9f, #063b78 62%, #075c9f); }
.rojgaar-footer__bottom::before, .rojgaar-footer__bottom::after { content: ""; position: absolute; top: 0; bottom: 0; width: 34px; background: var(--rf-gold); transform: skewX(29deg); }
.rojgaar-footer__bottom::before { left: -18px; }
.rojgaar-footer__bottom::after { right: -18px; }
.rojgaar-footer__bottom-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto; align-items: center; gap: 30px; }
.rojgaar-footer__legal > ul { display: flex; flex-wrap: wrap; gap: 8px 0; }
.rojgaar-footer__legal li { margin: 0; }
.rojgaar-footer__legal li + li { margin-left: 17px; padding-left: 17px; border-left: 1px solid rgba(255,255,255,.55); }
.rojgaar-footer__legal .submenu-toggle, .rojgaar-footer__legal li ul { display: none; }
.rojgaar-footer__legal a { color: #fff; font-size: .82rem; }
.rojgaar-footer__legal a:hover { color: #ffe29a; }
.rojgaar-footer__government { display: flex; align-items: center; gap: 16px; padding-left: 30px; border-left: 1px solid rgba(255,255,255,.4); font-size: .8rem; }
.rojgaar-footer__government > span:last-child { display: grid; gap: 5px; }
.rojgaar-footer__government small { font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; }
.rojgaar-footer__back-top { display: grid; justify-items: center; gap: 3px; color: #fff !important; white-space: nowrap; }
.rojgaar-footer__back-top > span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--rf-gold); border-radius: 50%; color: var(--rf-gold); font-size: 1.35rem; line-height: 1; }
.rojgaar-footer__back-top small { font-size: .75rem; }
@media (max-width: 1380px) {
    .rojgaar-footer__quote { grid-column: 2; }
    .rojgaar-footer__bottom-inner { grid-template-columns: 1fr auto; padding-block: 18px; }
    .rojgaar-footer__government { grid-row: 2; padding-left: 0; border-left: 0; }
    .rojgaar-footer__back-top { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 760px) {
    .rojgaar-footer__main { padding-bottom: 74px; }
    .rojgaar-footer__identity { padding: 0 0 34px; border-right: 0; border-bottom: 1px solid #d6dee8; }
    .rojgaar-footer__quote { grid-column: auto; }
    .rojgaar-footer__bottom-inner { grid-template-columns: 1fr auto; gap: 20px; }
    .rojgaar-footer__government { display: none; }
    .rojgaar-footer__back-top { grid-column: 2; grid-row: 1; }
    /* The bar is several rows tall here, so the skewed left stripe swept across the legal links. */
    .rojgaar-footer__bottom::before { display: none; }
}
@media (max-width: 480px) {
    .rojgaar-footer__menus, .rojgaar-footer__services { grid-template-columns: 1fr; }
    .rojgaar-footer__legal > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rojgaar-footer__legal li + li { margin-left: 0; padding-left: 0; border-left: 0; }
}

/* Reference-locked footer composition. Legacy CMS content cannot alter these proportions. */
.rojgaar-footer__main { min-height: 0; padding: 36px 0 66px; }
.rojgaar-footer__main::after { height: 160px; }
.rojgaar-footer__grid {
    /* 36fr for the "Need Help?" column (was 43): the wider card read as too heavy; the width goes
       back to the identity and menu columns. */
    grid-template-columns: minmax(0, 34fr) minmax(0, 30fr) minmax(0, 36fr);
    gap: clamp(28px, 3vw, 46px);
}
.rojgaar-footer__identity { padding-right: clamp(24px, 3vw, 50px); }
.rojgaar-footer__logo { width: min(100%, 375px); max-width: none; height: 145px; }
.rojgaar-footer__promise { flex-wrap: nowrap; gap: 0; margin-top: 3px; font-size: .86rem; }
.rojgaar-footer__promise span + span::before { width: 6px; height: 6px; margin-inline: 14px; }
.rojgaar-footer__description { max-width: 45ch; margin-top: 28px; font-size: .86rem; line-height: 1.55; }
.rojgaar-footer__identity > .rojgaar-footer__script { margin-top: 25px; font-size: clamp(1.55rem, 2.1vw, 2.25rem); }
.rojgaar-footer__identity > .rojgaar-footer__script::after {
    content: "";
    width: 96px;
    height: 3px;
    margin: 8px 0 0 65px;
    background: var(--rf-gold);
    transform: rotate(-7deg);
}
.rojgaar-footer__menus { gap: clamp(28px, 3vw, 48px); }
.rojgaar-footer__menu h2 { margin-bottom: 20px; font-size: clamp(1.25rem, 1.6vw, 1.6rem); }
.rojgaar-footer__menu nav > ul { gap: 11px; }
.rojgaar-footer__menu a { font-size: .86rem; }
.rojgaar-footer__portal-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.rojgaar-footer__portal-row > span:first-child {
    color: #123f79;
    font-size: .86rem;
    line-height: 1.4;
    min-width: 0;
}
.rojgaar-footer__portal-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.rojgaar-footer__menu .rojgaar-footer__portal-actions a::before { content: none; }
.rojgaar-footer__follow { margin-top: 46px; }
.rojgaar-footer__follow .footer-social a,
.rojgaar-footer__follow .footer-social .social-placeholder {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    background: var(--rf-blue);
}
.rojgaar-footer__follow .footer-social span.social-placeholder { display: grid; }
.rojgaar-footer__follow .footer-social li:nth-child(1) :is(a, .social-placeholder) { background: #e3131b; }
.rojgaar-footer__follow .footer-social li:nth-child(2) :is(a, .social-placeholder) { background: #060606; }
.rojgaar-footer__follow .footer-social li:nth-child(3) :is(a, .social-placeholder) { background: #2377d8; }
.rojgaar-footer__follow .footer-social li:nth-child(4) :is(a, .social-placeholder) { background: linear-gradient(135deg, #6e31bc, #ef2867 55%, #ffbe38); }
.rojgaar-footer__follow .footer-social li:nth-child(5) :is(a, .social-placeholder) { background: #0b5ca8; }
.rojgaar-footer__follow .social-placeholder .icon { width: 20px; height: 20px; }
.rojgaar-footer__help {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px;
    gap: 16px;
    min-height: 204px;
    padding: 20px;
}
.rojgaar-footer__help-content { min-width: 0; }
.rojgaar-footer__help-heading { padding-bottom: 10px; border-bottom: 0; }
.rojgaar-footer__round-icon { flex-basis: 54px; width: 54px; height: 54px; }
.rojgaar-footer__help-details { gap: 9px; padding-top: 3px; }
.rojgaar-footer__help-details strong { font-size: .97rem; }
.rojgaar-footer__answer-script {
    display: grid;
    align-content: center;
    justify-items: center;
    margin: 0;
    padding-left: 20px;
    border-left: 1px solid rgba(202, 155, 34, .55);
    color: #10478c;
    font-family: var(--font-sans);
    font-size: clamp(1.35rem, 1.75vw, 1.85rem);
    line-height: 1;
    text-align: center;
    transform: rotate(-7deg);
}
.rojgaar-footer__answer-script::after { content: ""; width: 90px; height: 3px; margin-top: 11px; background: var(--rf-gold); transform: rotate(-7deg); }
.rojgaar-footer__services { gap: 8px; margin-top: 18px; }
.rojgaar-footer__service { padding: 8px 12px; }
.rojgaar-footer__quote { margin-top: 23px; font-size: .6875rem; }
.rojgaar-footer__bottom-inner { min-height: 76px; }
.rojgaar-footer__government-emblem { display: grid; place-items: center; width: 44px; font-size: 1.65rem; }
@media (max-width: 1380px) {
    .rojgaar-footer__grid { grid-template-columns: minmax(250px, .8fr) minmax(360px, 1.2fr); }
    .rojgaar-footer__support { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; }
    .rojgaar-footer__services { margin-top: 0; }
}
/* Tablets: the help card takes the row and the two service cards sit under it. Three cards in one
   row broke the phone number, the email and "Sewayojan.nic.in" over several lines, and the motto
   line ran on under the menus beside it. */
@media (max-width: 1100px) {
    .rojgaar-footer__support { grid-template-columns: 1fr; }
    .rojgaar-footer__quote { grid-column: auto; }
    .rojgaar-footer__promise { flex-wrap: wrap; row-gap: 6px; white-space: normal; }
}
@media (max-width: 760px) {
    .rojgaar-footer__grid { grid-template-columns: 1fr; }
    .rojgaar-footer__promise { flex-wrap: wrap; white-space: normal; }
    .rojgaar-footer__support { grid-column: auto; display: block; }
    .rojgaar-footer__help { grid-template-columns: 1fr; }
    .rojgaar-footer__answer-script { display: none; }
    .rojgaar-footer__services { margin-top: 16px; }
    /* One scene fits a phone: the riverside, no taller than the bottom padding so it stays under the text. */
    .rojgaar-footer__main::after { background: url('/images/footer-scene-left.webp') left bottom / auto 72px no-repeat; }
}
/* Legal and public-information pages (_LegalLayout). Wrapper inside the public layout's <main>; the site header/footer come from _PublicLayout. */
.legal-body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
}

.legal-main {
    padding-block: 1.5rem 3rem;
}

.legal-main h1 {
    font-size: 1.75rem;
    margin: 0 0 1rem;
}

.legal-main h2 {
    font-size: 1.15rem;
    margin: 1.5rem 0 0.5rem;
}

.legal-main p,
.legal-main li {
    line-height: 1.6;
}

.legal-main img { height: auto; }

/* CMS edit bar (_EditBar.cshtml): a floating link from a live page to its editor, drawn only for a
   signed-in user who may edit it. */
.cms-edit-bar {
    position: fixed;
    left: var(--space-5);
    bottom: var(--space-5);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: calc(100vw - (2 * var(--space-5)));
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--color-navy);
    color: #fff;
    box-shadow: 0 8px 24px rgba(11, 22, 40, .28);
    font-family: var(--font-sans);
    font-size: .8125rem;
    line-height: 1.2;
}
.cms-edit-bar-label { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.cms-edit-bar-kind { color: var(--color-gold); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cms-edit-bar-title { max-width: 30ch; overflow: hidden; color: rgba(255, 255, 255, .78); text-overflow: ellipsis; white-space: nowrap; }
.cms-edit-bar-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-min-target);
    padding: 0 var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--color-gold);
    color: var(--color-navy);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.cms-edit-bar-action:hover,
.cms-edit-bar-action:focus-visible { background: var(--color-gold-deep); color: var(--color-navy); }
.cms-edit-bar-action .icon { width: 16px; height: 16px; flex: none; }
/* The bar belongs to the screen only: it is not part of the page being edited. */
@media print { .cms-edit-bar { display: none; } }
/* On a phone the title would crowd out the button it exists to explain. */
@media (max-width: 600px) {
    .cms-edit-bar { left: var(--space-3); bottom: var(--space-3); }
    .cms-edit-bar-title { display: none; }
}