/* ==========================================================================
   Nominate page (Figma: QF - BilAraby - WebsiteDesign-Concept-2, node
   40001286:71552 "Nominate Page"). Reuses the --hr-* tokens declared globally
   in layout-revamp.css and follows the same page-pattern established by
   podcasts-revamp.css / video-revamp.css: an "Innerpage-hero" (breadcrumb +
   diamond divider) on a flat "liquid" gradient wash, no photo banner.
   ========================================================================== */
.nominate-revamp .hr-accent { color: var(--hr-yellow-500); }

/* ---------- Hero ---------- */
.nominate-revamp {
    /* BIL-821: every section on this page shares the HEADER's container, so
       content starts on the BilAraby logo's edge and ends on the language
       pill's. .header-revamp .container-xl (layout-revamp.css) is a flat 160px
       inline padding with max-width:none from 992px up, and Bootstrap's own
       12px half-gutter below that - so this token is those two values, and the
       inners below carry max-width:none to match. Same change
       .partnership-revamp and .summit-listing-revamp made, for the same reason. */
    --nom-gutter: 12px;
    /* How far the paint outlives the band, i.e. how much ramp is left below the
       breadcrumb hairline, so the amber is spent before the "Be a Speaker at
       BilAraby Annual Gathering" heading below rather than sitting behind it.
       This page used to paint a flat `background-size: 100% 468px` on the page
       wrapper, which held ~28% alpha 210px past the hairline and put a pale
       orange haze behind that heading. Keep the 78.5% stop in the ramp below in
       step with this value - it is 256 / (256 + 70), the hairline's position in
       the paint box at the desktop band height. */
    --nom-wash-tail: 70px;
    /* Band height, 256 -> 200 -> 160 across the three breakpoints - the ramp
       the Blogs, Videos, Events, Speakers and Annual Gatherings
       breadcrumb-only heroes all take (see --blg-hero-h). It was a flat 256px
       at every width, and because the crumb is pinned to the band's bottom edge
       that left ~130px of empty amber between the header and the breadcrumb on
       a phone. The decor box and the corner wedges are positioned off the hero
       itself, so they follow it down without their own steps. */
    --nom-hero-h: 256px;
    position: relative;
    /* cream-500, sampled off the artboard (#f9f7e9 above and below the form).
       cream-400 (#faf9ed) is a shade lighter and less warm, which also lifted
       everything composited over it - the form panel and the cards both sat too
       white. */
    background: var(--hr-cream-500);
}

/* Matching the header's own breakpoint, so the two switch together. */
@media (min-width: 992px) {
    .nominate-revamp { --nom-gutter: 160px; }
}

.nom-hero {
    position: relative;
    /* 0, not 1: the wash box below hangs --nom-wash-tail past this section, and
       a positive index here would float that tail over .nom-intro instead of
       letting the next section paint over it. */
    z-index: 0;
    height: var(--nom-hero-h);
    display: flex;
    align-items: flex-end;
    padding: 0 var(--nom-gutter) 24px;
    /* app.css carries a blanket `section { overflow: hidden }`, which would clip
       the paint box below to this element's bottom edge - the ramp would be cut
       off mid-fade at whatever alpha it had reached on the hairline and hit cream
       in one step, a hard line across the band. Same trap the note at the top of
       blogs-revamp.css describes. */
    overflow: visible;
}

/* ---------- Wash + corner wedges ---------- */
/* One box for both: it carries the gradient and the grain, and it is also what
   crops the wedges to the band. Stretched past the hero's bottom edge by the
   tail, with the wedges pinned to that same offset so they stay on the band's
   real bottom edge rather than the wash's. Copied from
   .partnership-hero-decor - the two amber "Participate" heroes are the same
   band in Figma and now render from the same recipe. */
.nom-hero-decor {
    position: absolute;
    inset: 0 0 calc(-1 * var(--nom-wash-tail));
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    /* Figma paints this band with the shared "Innerpage-hero" fill, checked in
       as about-revamp/hero-banner.svg. That file is teal, so this page cannot
       link it, but its linear layer can be read off it: 89% opacity, with stop
       0.64 of the gradient's axis landing at y=5.58 of the 424px box, 0.86193
       at y=215.9 (half alpha) and 1.0 at y=346.7. The ramp is bent rather than
       straight so it keeps the asset's slope through the band, holds ~30% on the
       hairline at 78.5%, then spends the rest inside the tail. The asset's
       second layer - a black 17% radial vignette on the top edge - is dropped:
       over amber it turns the top of the band brown-olive. */
    background: linear-gradient(to bottom,
        rgba(217, 133, 0, .89) 0%,
        rgba(217, 133, 0, .89) 1.6%,
        rgba(217, 133, 0, .55) 50%,
        rgba(217, 133, 0, .30) 78.5%,
        rgba(217, 133, 0, 0) 100%);
}
/* Layer 3 of the fill: hero-banner.svg's grain, which is what keeps the band
   from reading as flat plastic. Same recipe as the asset's own filter - a
   fractalNoise turbulence at baseFrequency .714/.909 over 3 octaves, seed 6890,
   put through luminanceToAlpha and a discrete alpha transfer, then flooded with
   white; its rgba(255,255,255,.17) is carried here as opacity so the tile can
   stay pure white. The mask is the ramp's own alphas normalised against its .89
   start, matching the asset's `feComposite operator="in" in2="shape"`, so the
   grain cannot outlive the amber under it. This replaces the mid-grey noise the
   old decor blended through mix-blend-mode: overlay, which speckles dark as well
   as light and tints the whole band. */
.nom-hero-decor::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz48ZmlsdGVyIGlkPSdnJyB4PScwJyB5PScwJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC43MTQyODU3MyAwLjkwOTA5MDg4JyBudW1PY3RhdmVzPSczJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJyBzZWVkPSc2ODkwJyByZXN1bHQ9J24nLz48ZmVDb2xvck1hdHJpeCBpbj0nbicgdHlwZT0nbHVtaW5hbmNlVG9BbHBoYScgcmVzdWx0PSdhJy8+PGZlQ29tcG9uZW50VHJhbnNmZXIgaW49J2EnIHJlc3VsdD0nZCc+PGZlRnVuY0EgdHlwZT0nZGlzY3JldGUnIHRhYmxlVmFsdWVzPScxIDAnLz48L2ZlQ29tcG9uZW50VHJhbnNmZXI+PGZlRmxvb2QgZmxvb2QtY29sb3I9JyNmZmZmZmYnIHJlc3VsdD0ndycvPjxmZUNvbXBvc2l0ZSBvcGVyYXRvcj0naW4nIGluPSd3JyBpbjI9J2QnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9J3VybCgjZyknLz48L3N2Zz4=");
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: .17;
    -webkit-mask-image: linear-gradient(to bottom,
        rgba(0,0,0,1) 0%, rgba(0,0,0,1) 1.6%, rgba(0,0,0,.618) 50%,
        rgba(0,0,0,.337) 78.5%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom,
        rgba(0,0,0,1) 0%, rgba(0,0,0,1) 1.6%, rgba(0,0,0,.618) 50%,
        rgba(0,0,0,.337) 78.5%, rgba(0,0,0,0) 100%);
}
/* Pattern-01 / Pattern-02 from Figma's "Innerpage-hero" instance: angular cream
   wedges at 10% fill in the two bottom corners - two DISTINCT vectors, not one
   shape mirrored. Geometry from .partnership-hero-pattern / .blg-hero-pattern,
   the corrected set. */
.nom-hero-pattern {
    position: absolute;
    /* The band's bottom edge, not the paint's - the tail hangs below it - so the
       wedges land on the breadcrumb hairline. */
    bottom: var(--nom-wash-tail);
    z-index: 1;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* Softens the vector edges to match how the wedges read in Figma's own
       render, where the 10% gradient dissolves into the band instead of showing
       a hard diagonal. */
    filter: blur(1.5px);
}
.nom-hero-pattern-start {
    inset-inline-start: 0;
    width: 305.329px;
    height: 160.658px;
    background-image: url("../images/innerpage-hero/hero-pattern-nobanner-left.svg");
}
/* Figma puts mix-blend-mode:overlay on this one's container, not inside the
   SVG - as a background-image the blend has to be applied here, or it would
   composite against the SVG's own transparency and do nothing. */
.nom-hero-pattern-end {
    inset-inline-end: 0;
    width: 305.29px;
    height: 204.731px;
    background-image: url("../images/innerpage-hero/hero-pattern-nobanner-right.svg");
    mix-blend-mode: overlay;
}
/* Flip the pair under RTL so each wedge keeps its own visual side. */
[dir="rtl"] .nom-hero-pattern { transform: scaleX(-1); }

/* ---------- Breadcrumb ---------- */
.nom-hero-inner { position: relative; z-index: 1; max-width: none; width: 100%; margin-inline: auto; }
.nom-breadcrumb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    /* So the diamond cluster drops below the trail rather than squeezing it. */
    flex-wrap: wrap;
}
/* 22px between crumbs and a 28px line box, from .partnership-breadcrumb /
   .blg-breadcrumb / .abt-breadcrumb. The gap was 12px and there was no
   line-height, so the crumbs sat in Bootstrap's 1.5 (a 30px box) - tighter
   horizontally and 2px taller than every sibling hero. Type and gap scale with
   the viewport instead of holding 20px/22px, which keeps a three-crumb trail on
   one line down to ~440px; both clamps top out at the desktop values, so
   nothing changes above that. */
.nom-breadcrumb {
    display: flex;
    align-items: center;
    gap: clamp(8px, 2.2vw, 22px);
    row-gap: 4px;
    flex-wrap: wrap;
    min-width: 0;
    font-size: clamp(13px, calc(5vw - 3px), 20px);
    line-height: 28px;
    color: var(--hr-cream-500);
    text-transform: uppercase;
}
/* Full strength per Figma's Breadcrumb component - only font weight marks the
   current crumb, there is no resting opacity on the others. Full note in
   press-releases-revamp.css. */
.nom-breadcrumb a,
.nom-breadcrumb span:not(.nom-breadcrumb-sep) { opacity: 1; }
.nom-breadcrumb a { flex-shrink: 0; color: inherit; text-decoration: none; transition: opacity .2s ease; }
.nom-breadcrumb a:hover { opacity: 1; color: inherit; text-decoration: underline; }
.nom-breadcrumb-current { font-weight: 700; opacity: 1 !important; }
.nom-breadcrumb-sep { width: 1px; height: 16px; background: rgba(249, 247, 234, .5); }
.nom-hero-divider { display: none; }
@media (min-width: 1200px) {
    .nom-hero-divider {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        width: 280px;
        /* Bleeds the rule out to the viewport edge. Just the gutter now: the
           inner is no longer capped at 1600px, so there is no extra centring
           offset to cancel - the old `- max(0px, (100vw - 1920px) / 2)` term
           would overshoot the edge on a wide monitor and, since 100vw counts
           the scrollbar, take a horizontal scrollbar with it. */
        margin-inline-end: calc(-1 * var(--nom-gutter));
    }
    .nom-hero-divider .nom-diamond {
        /* 20 * (sqrt(2) - 1) / 2. A rotated 20px square is 28.28px wide visually
           but still occupies a 20px layout box, so the 4.142px overhang per side
           would make neighbours merge into one continuous zigzag. This margin
           separates the boxes by exactly that overhang, so adjacent tips just
           touch - corner to corner, 0px visible gap, no merge. Carried on the
           diamond rather than as a `gap` on the row so the last one also spaces
           itself off the line. Matches .abt-diamond / .tnc-diamond / .sml-*. */
        width: 20px;
        height: 20px;
        margin-inline: 4.142px;
        transform: rotate(45deg);
        background: var(--hr-cream-500);
        flex-shrink: 0;
    }
    .nom-hero-divider-line {
        flex: 1 1 auto;
        height: 1px;
        background: rgba(249, 247, 234, .5);
        /* The last diamond's own 4.142px slot margin supplies the gap now, so a
           negative offset here would eat into it. */
        margin-inline-start: 0;
    }
}
/* No [dir="rtl"] override for the divider's bleed: margin-inline-end already
   mirrors. */
.nom-hero::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: rgba(249, 247, 234, .35);
}

/* ---------- Intro ---------- */
.nom-intro { position: relative; z-index: 1; padding: 120px var(--nom-gutter) 0; }
.nom-intro-inner { max-width: none; margin-inline: auto; display: flex; flex-direction: column; gap: 16px; }
/* Figma Headings/H1/Bold, 64/72 on the 1922 frame (node 40001286:71559), where
   the heading is ONE line in a 1600px box. It was a flat 64px with a 48px step
   below 1200 and 36px below 768, so between ~1050 and 1600 it wrapped to two
   lines - "Gathering" alone on the second - and then jumped a whole 16px at the
   breakpoint rather than ramping.

   The middle term is the string's own geometry rather than a hand-picked vw
   slope: "Be a Speaker at BilAraby Annual Gathering" measures 19.7x its
   font-size in Almarai Bold, and the content column is 100vw - 320px (the two
   160px gutters), so dividing the column by 20.2 keeps the line inside it with
   ~2.5% to spare for another platform's metrics and reaches the design's 64px
   at ~1613px. Leading is the 72/64 ratio, not a flat 72px box, so the line box
   tracks the type as it comes down.

   The 36px floor is reached at ~1047px, which is also about where a 36px line
   stops fitting (the gutter drops to 12px at 992, so the column widens again);
   below that the heading wraps, as it does on Figma's phone board. */
.nom-intro-inner h1 {
    font-size: clamp(36px, calc((100vw - 320px) / 20.2), 64px);
    line-height: 1.125;
    font-weight: 700;
    color: var(--hr-brown-500);
    margin: 0;
}
/* Figma Body/Body Medium 24/32. Ramped on its own string geometry, exactly as
   the heading above: this sentence measures 44.9x its font-size, so the column
   over 45.9 holds it on one line with ~2% to spare, keeps the design's 24px
   down to ~1422px and floors at 16px around 1054px (by which point the gutter
   has dropped to 12px, so 16px still fits on one line well below 992).

   No max-width: Figma's text box is the full 1600 and the sentence is 1077px at
   24px, i.e. a single line by design - the 900px cap that was here broke it in
   two at EVERY width, including 1920. */
.nom-intro-inner p {
    font-size: clamp(16px, calc((100vw - 320px) / 45.9), 24px);
    line-height: 1.3333;
    color: var(--hr-brown-300);
    margin: 0;
}

/* ---------- Tabs + form card ---------- */
/* 80 above / 120 below, off the Form node's own box in Figma's inspector
   (1600x1296 with 160px side margins, 80 top, 120 bottom). It was 40/100. The
   intro above it already lands on the artboard's line, so only these two moved. */
.nom-form-wrap { position: relative; z-index: 1; padding: 80px var(--nom-gutter) 120px; }
.nom-form-inner { max-width: none; margin-inline: auto; }
/* ---------- Tabs ---------- */
/* Figma: tab row 40001205:92917, tab component 40000481:22690 (Default) /
   40000481:22692 (Active). The component is THREE parts - a 24x56 leading cap,
   the Button body at 16/24 padding, and a 24x56 trailing cap - and each cap is a
   full rect split on its diagonal:

     leading cap   trailing cap
     +--------+    +--------+
     |     ／ |    | ＼     |     face = the tab's own colour
     |  ／ face|   |face ＼ |     fold = a darker wedge, leading cap only
     |／ fold  |   |     ＼ |     (the trailing cap has no fold)
     +--------+    +--------+

   so the silhouette is a trapezoid: a straight leading edge, and a top edge that
   stops 24px short of the bottom edge's trailing corner. Rebuilt here as one
   clipped element plus a pseudo for the fold rather than three background SVGs -
   same geometry, and the three states can recolour it.

   What this replaces: `polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%)`,
   which is the MIRROR of the design (the slant leaned onto the leading edge
   instead of the trailing one), 16px instead of 24, no fold wedge, no shadow,
   and the inactive tab in bold. */
.nom-tabs {
    display: flex;
    /* Figma puts the first tab at x=40 in the row frame. Was 8px. */
    padding-inline-start: 40px;
}
.nom-tab {
    /* Default / "not reached yet": cream-100 face, and a fold that is just white
       at 30% - over the page it reads as the faintest crease, which is what
       Figma draws. */
    /* Figma calls this cream/cream-100; layout-revamp.css has no token for it
       (its cream-50 is #fefefd), so it is the literal, as in translate-revamp.css. */
    --nom-tab-face: #fdfdf8;
    --nom-tab-fold: rgba(255, 255, 255, .3);
    --nom-tab-slant: 24px;
    position: relative;
    appearance: none;
    border: 0;
    /* MUST be explicit. The face is painted by ::before below, not by this
       element, and with no background of its own a <button> falls back to the
       UA's `buttonface` - #efefef in Chrome - painted across its whole
       RECTANGLE. That grey filled the notch between the two tabs and ran under
       the amber tab, which is what made the pair read as one collapsed slab:
       the notch measured #efefef where the design has page cream #f9f7e9 at the
       top of the wedge, darkening to #edece3 as the amber tab's shadow reaches
       it. `appearance: none` does not clear it. */
    background: none;
    cursor: pointer;
    /* 16px/48px: the text is inset 24px inside the Button body, which itself
       starts one 24px cap in from the silhouette, so 48 on each side. 16px top
       and bottom over a 24px line box is Figma's 56px tall tab. */
    padding: 16px 48px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--hr-brown-300, #66655c);
    white-space: nowrap;
    /* 12px of overlap, per Figma's mr-[-12px] on the leading tab. */
    margin-inline-start: -12px;
    /* Figma's Button shadow, as drop-shadow rather than box-shadow so it follows
       the slanted silhouette instead of the element's rectangle. The ramp opens
       with two layers at alpha 0 (7px 63px and 4px 40px) which paint nothing, so
       they are documented, not emitted; the three that do paint carry Figma's
       own offsets, blurs and alphas.

       This is what shades the NOTCH between the two tabs - the artboard runs it
       from page cream at the top of the wedge down to ~#edece4 where the amber
       tab's edge is closest. It must not also land on the panel below; that is
       the .nom-card z-index note. */
    filter: drop-shadow(2px 23px 14px rgba(0, 0, 0, .02))
            drop-shadow(1px 10px 10px rgba(0, 0, 0, .03))
            drop-shadow(0 3px 6px rgba(0, 0, 0, .03));
    transition: background-color .2s ease, color .2s ease;
    /* Figma stacks the row leading-tab-first (z-2 on the first, z-1 on the
       second), so the overlap always shows the earlier tab's trailing slant on
       top - independent of which step is active. */
    z-index: 1;
}
.nom-tab:first-child { margin-inline-start: 0; z-index: 2; }
/* The face: a true PARALLELOGRAM, both edges slanted - top-leading corner at 0,
   bottom-leading corner one slant in, and the same pair mirrored on the trailing
   edge. Painted as a layer behind the label rather than as the button's own
   background, because the fold below has to sit OUTSIDE it and a clip-path on
   the button itself would take the fold with it.

   This is the fix for the missing shade between the tabs. The face used to run
   all the way to the bottom-leading corner - polygon(0 0, 100%-24 0, 100% 100%,
   0 100%), a trapezoid - with the fold repainted on top of it. For the amber tab
   that looks identical, because its fold (#9a5e00) is opaque. For the cream tab
   it is not: Figma's fold there is white at 30%, i.e. TRANSLUCENT, and painting
   it over an opaque cream face made it white-on-white - invisible - and, worse,
   left the cream tab opaque right through the 12px it overlaps the amber one.
   That flattened the junction: the notch between the two faces, where the amber
   tab's shadow pools, was covered by cream. In Figma's own render that notch
   measures #eeece4 against a #f9f7e9 page, a soft band roughly 15px wide that
   widens toward the bottom - the "centre shade". With the face clipped to the
   real parallelogram the notch is open again and the shadow shows in it. */
.nom-tab::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--nom-tab-face);
    clip-path: polygon(0 0, calc(100% - var(--nom-tab-slant)) 0, 100% 100%, var(--nom-tab-slant) 100%);
    /* Figma's Button also carries a white inset highlight along its top edge;
       the clip keeps it inside the parallelogram. */
    box-shadow: inset 0 4px 6.1px rgba(255, 255, 255, .23);
}
/* The leading cap's fold wedge - the lower triangle of that 24px column, which
   is what gives the tab its folded-ribbon corner. Behind the face, so the two
   meet on the face's leading diagonal instead of the fold covering it. Under the
   amber tab it is opaque #9a5e00; under the cream one it is white at 30% and
   whatever is behind the tab reads through it, which is exactly what Figma
   draws. */
.nom-tab::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--nom-tab-slant);
    z-index: -2;
    background: var(--nom-tab-fold);
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}
/* Active step. Fold #9a5e00 is the cap SVG's own second fill - yellow-500 at
   71% lightness. */
.nom-tab.is-active {
    --nom-tab-face: var(--hr-yellow-500, #d98500);
    --nom-tab-fold: #9a5e00;
    color: var(--hr-cream-500, #f9f7e9);
    font-weight: 700;
}
/* A step already completed - the state the Nominee Details step shows for
   Requirements behind it. blue-400, the same accent this page's first
   requirement card and its bullets carry, with the fold taken down by the same
   71% the amber cap uses (#33739f -> #245271). */
.nom-tab.is-done {
    --nom-tab-face: var(--hr-blue-400, #33739f);
    --nom-tab-fold: #245271;
    color: var(--hr-cream-500, #f9f7e9);
    font-weight: 700;
}
/* Mirror both slants under RTL so the tabs fold the other way, the direction the
   row itself already runs. The fold's own column flips with inset-inline-start,
   but its triangle has to be mirrored too. */
[dir="rtl"] .nom-tab::before { clip-path: polygon(var(--nom-tab-slant) 0, 100% 0, calc(100% - var(--nom-tab-slant)) 100%, 0 100%); }
[dir="rtl"] .nom-tab::after { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.nom-card {
    position: relative;
    /* Above the tabs (z-index 1, and 2 on the leading one), so the panel paints
       OVER their drop shadow the way Figma's does - there the panel is a later
       sibling of the tab row, so the shadow only ever shows in the notch between
       the tabs and never on the panel's face. At z-index 0 the tabs sat on top
       and laid a grey band across the panel's top edge. Removing the shadow
       cleared the band but flattened the notch with it, which is the wrong half
       of the fix. */
    z-index: 3;
    /* Clips the corner flourish below to the card's rounded corner. */
    overflow: hidden;
    background: rgba(255, 255, 255, .7);
    border-radius: 8px;
    padding: 56px 0;
}
/* Figma node 40004073:54739 - the curved band with two diamonds hanging under
   it, in the card's trailing corner. Same asset, geometry and mirroring as
   .partnership-card-flourish, which carries the full note: the artwork is drawn
   tapering to its own right, and the design wants it full-depth against the
   card's trailing edge tapering away from it, so the element sits in the corner
   and the image turns over. This card had no flourish at all. */
.nom-card-flourish {
    position: absolute;
    top: 0;
    right: 0;
    width: 273.302px;
    height: 160px;
    /* Colour lives in the file - #338A81 at 10%, matching the Become a
       Translator card's own corner motif, so Nominate, Partnership and
       Translator all carry the same teal. */
    background: url("../images/partnership-revamp/form-corner-flourish.svg?v=2") no-repeat top right;
    background-size: 273.302px 160px;
    transform: scaleX(-1);
    pointer-events: none;
}
[dir="rtl"] .nom-card-flourish { right: auto; left: 0; transform: none; }
/* Lead-in for the header row - title, bar and "Step n" together, since they
   share one flex row. 84px puts the row's centre 108px below the card's top,
   i.e. just above the flourish's two diamonds (their top edge is at 119px).
   Set against the artboard rather than derived: it started at 115px (centred on
   the diamonds) and was brought up from there.
   Desktop only: below ~1270px the header wraps the indicator onto its own line,
   where it clears the flourish on its own and the 56px lead-in still applies. */
@media (min-width: 1200px) {
    .nom-card { padding-top: 84px; }
}
/* position/z-index so the header and body clear the flourish behind them. */
.nom-card-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0 80px 24px;
}
.nom-card-title { font-size: 40px; font-weight: 700; color: var(--hr-brown-500); margin: 0; }
.nom-card-title .hr-accent { color: var(--hr-yellow-500); }
/* 32px, not 16: measured off the artboard against the flourish's diamonds, the
   label starts ~34px after the track ends. With the track at 300px that also
   lands the track's right end on the diamonds' leading edge (1275 against 1270
   at 1600px), which is where the artboard puts it. */
/* 24px between the bar and its "Step n", per Figma (node 40001205:92929). */
.nom-step-indicator { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
/* 300px. At 220 the track was a third short, so it stopped ~28px INSIDE the
   diamonds instead of meeting them. Same 50% fill, same 8px bar.

   No border. It carried `1px solid rgba(27,25,12,.15)`, which is not in the
   design and was the dark hairline around the bar: drawn outside a rounded rect
   over a near-white card it reads as an outline, and it also made the bar 10px
   tall instead of 8. Checked against the design's own render, where a vertical
   scan through the track is 8 rows of flat #f9f7e9 with the card's #fcfcf8
   immediately above and below - no darker row on either edge. The track is
   meant to be barely there: cream-500 on the white card, with only the purple
   fill carrying any weight. */
.nom-progress-track { width: 300px; height: 8px; border-radius: 24px; background: var(--hr-cream-500); overflow: hidden; }
.nom-progress-fill { height: 100%; border-radius: 24px; background: var(--hr-purple-500); transition: width .2s ease; }
/* Figma Body/Body Medium 20/28, brown-400. Was 18px with no leading. */
.nom-step-label { font-size: 20px; line-height: 28px; color: var(--hr-brown-400, #49473d); white-space: nowrap; }

/* 48px under the header, not 40: the card is a gap-48 column (header, the form
   column, the consents, the actions) while the form column INSIDE it is gap-40.
   Both were 40 here, so every one of those four seams was 8px tight. */
.nom-card-body { position: relative; z-index: 1; padding: 48px 80px 0; }
.nom-card-body > * + * { margin-top: 40px; }
/* The consents and the actions are the card's own children in the artboard, so
   they take its 48px rather than the form column's 40. */
.nom-card-body > .nom-consent-stack { margin-top: 48px; }
.nom-consent-stack { display: flex; flex-direction: column; gap: 24px; }
/* Figma Body/Body Medium 20/28 brown-400, 24px above whatever the group holds
   (nodes 40001205:95406 / 95241 / 93068 all set gap-24 inside the group). */
.nom-section-lead { font-size: 20px; line-height: 28px; color: var(--hr-brown-400, #49473d); margin: 0 0 24px; }
/* "Tell us what drives you to join this project" is NOT inside its questions'
   group in the artboard - it is a sibling of the group in the form's own
   gap-40 column (nodes 40001205:93035 and 93036), so it stands 40px off the
   first question, not 24. */
.nom-section-lead--spaced { margin-bottom: 40px; }
/* 24px between the five questions (node 40001205:93036). */
.nom-question-stack { display: flex; flex-direction: column; gap: 24px; }
/* The required star is 16/24 next to a 20/28 lead (node 40001205:95441), not
   the lead's own 20px. */
.nom-section-lead .nom-req-mark { font-size: 16px; line-height: 24px; }
/* #e8e8e7 - the stroke on Figma's own Line 11479, checked in the export. It was
   rgba(27,25,12,.08), a warm 8% brown that composites ~#f1f0ee on this card:
   half the contrast of the design's line. Each rule is its own item in the
   form's gap-40 column, so it always sits 40px clear of the blocks either side. */
.nom-divider { height: 1px; border: 0; background: #e8e8e7; margin: 0; }
/* The 40px ABOVE each rule. `.nom-card-body > * + *` supplies it to every other
   child, but `.nom-divider`'s own `margin: 0` - there to kill the UA's `hr`
   margins - has the same specificity and comes later, so it silently won and
   the rules sat right on the block above them (0px, or 6px where an empty
   error span was holding its margin). Explicit and specific, so the reset and
   the rhythm can't fight again. */
.nom-card-body > .nom-divider { margin-top: 40px; }
/* An empty `.error-message` still applies its 6px top margin, which pushed
   whatever followed a field off the design's spacing until a validator filled
   it in. */
.nominate-revamp .error-message:empty { display: none; }

/* Application type */
.nom-radio-row { display: flex; flex-wrap: wrap; gap: 16px; }
.nom-radio-option {
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    gap: 12px;
    /* 56px tall with the padding as inline-only: the artboard's option is
       h-56 AND p-16, which its own 28px line box overflows (16+28+16 = 60), so
       the fixed height is what it actually renders at. */
    height: 56px;
    padding: 0 16px;
    border-radius: 8px;
    background: rgba(236, 230, 211, .4);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}
.nom-radio-option:has(input:checked) {
    background: #ece6d3;
    border-color: var(--hr-yellow-500);
}
.nom-radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
/* radio.svg: a 21.75px ring inside a 24px box, 2.25px stroke - #b1afa5 unset
   over the option's own fill, #d98500 with a cream-500 centre once selected,
   and a 12px dot. The unset ring used to carry the cream fill too, which
   lightened it against the option behind it. */
.nom-radio-dot {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2.25px solid var(--hr-cream-700, #b1afa5);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nom-radio-option input:checked ~ .nom-radio-dot { border-color: var(--hr-yellow-500); background: var(--hr-cream-500); }
.nom-radio-dot::after {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--hr-yellow-500);
    opacity: 0;
    transition: opacity .2s ease;
}
.nom-radio-option input:checked ~ .nom-radio-dot::after { opacity: 1; }
.nom-radio-text { font-size: 18px; line-height: 28px; color: var(--hr-brown-500); }

/* Fields */
.nom-field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.nom-field { display: flex; flex-direction: column; gap: 8px; }
.nom-field-full { grid-column: 1 / -1; }
/* Figma's field label row (node 40000165:17900): Almarai Regular 16/24,
   brown-400, centred against its 16/24 red star with a 4px gap, and 8px above
   the control. The leading was implicit before, so it sat in Bootstrap's 1.5
   (24.5px) - a hair taller than the design's box and enough to shift every
   field below it. */
.nom-field label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    line-height: 24px;
    color: var(--hr-brown-400, #49473d);
}
.nom-req-mark { color: #ee3b33; }
/* Figma's control (node 40000165:17895): rgba(236,230,211,.4), radius 8,
   16px padding on a 24px line box - 56px tall. The height was implicit and came
   out 53-55px depending on the font's own metrics, so the controls sat a couple
   of pixels short of the design and off the 56px radio row beside them. The
   1px transparent border is ours, so :focus can colour a rim without resizing
   the box; the design has no focus state. */
.nom-input,
.nom-select,
.nom-textarea {
    width: 100%;
    background: rgba(236, 230, 211, .4);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 16px;
    font-size: 16px;
    line-height: 24px;
    color: var(--hr-brown-500);
    transition: border-color .2s ease;
}
.nom-input,
.nom-select { height: 56px; }
.nom-input:focus,
.nom-select:focus,
.nom-textarea:focus { outline: none; border-color: var(--hr-yellow-500); }
/* brown-300 at 50%, the artboard's own placeholder opacity (it was .7). */
.nom-input::placeholder,
.nom-textarea::placeholder { color: var(--hr-brown-300); opacity: .5; }
/* app.css has a sitewide, unscoped `input:-webkit-autofill` rule (written for
   a dark-green newsletter field elsewhere) that paints a solid green inset
   background behind autofilled text on EVERY input, including these. Override
   it here — same fix as .pod-search in podcasts-revamp.css. */
.nom-input:-webkit-autofill,
.nom-input:-webkit-autofill:hover,
.nom-input:-webkit-autofill:focus,
.nom-input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--hr-brown-500) !important;
    box-shadow: 0 0 0 1000px rgba(236, 230, 211, .4) inset !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(236, 230, 211, .4) inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}
/* 128px: the artboard's message control is a 96px text box inside the same
   16px padding (node 40000165:19292), and 160 is the height of the WHOLE field
   including its 24px label and the 8px gap - which is what this was set to, so
   every question box ran 32px tall. */
.nom-textarea { height: 128px; min-height: 128px; resize: vertical; }
/* The artboard's own DOWN glyph, 16px at #66655c stroke - checked in from the
   node's export. It was the Press Releases chevron drawn at 11px, a different
   vector two thirds the size. 40px of trailing padding is the design's
   16 + 16 icon + 8 gap. */
.nom-select {
    appearance: none;
    background-image: url("../images/nominate-revamp/icon-chevron-down.svg");
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: right 16px center;
    padding-inline-end: 40px;
    cursor: pointer;
}
[dir="rtl"] .nom-select { background-position: left 16px center; padding-inline-end: 16px; padding-inline-start: 40px; }
/* --------------------------------------------------------------------------
   Dropdowns
   -------------------------------------------------------------------------- */
/* The four selects render through <x-front.select>, so the list is a DOM panel
   anchored under the field - the shared component every other dropdown on the
   site uses (js/select2-revamp.js + css/select2-revamp.css) - instead of the
   browser's own popup, which the OS places wherever it likes: it was opening
   over the phone field, several fields away from the control that owns it.

   What is deliberately NOT inherited is the CLOSED control. That shared skin
   dresses it as the 48px, 61px-radius filter pill with a hairline rim and a
   bold label once set - Contact Us's Topic field is exactly that pill - and
   these four sit in a column of 56px/8px form fields, so every one of the
   pill's geometry and state rules is put back to the control the artboard
   draws. Only the panel is shared.
   -------------------------------------------------------------------------- */
.nominate-revamp .nom-field .ba-select2-field { width: 100%; }
.nominate-revamp .nom-field .ba-select2-container.select2-container { width: 100% !important; }
.nominate-revamp .nom-field .ba-select2-container.select2-container .select2-selection {
    height: 56px;
    padding: 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: rgba(236, 230, 211, .4);
    box-shadow: none;
}
/* Placeholder and chosen value are both 16/24 regular. The shared skin bolds a
   value (weight is how the pill says "a value is set"), which would make these
   read differently from the text inputs beside them - and is the same jump the
   legacy custom.js inline styles used to cause. */
.nominate-revamp .nom-field .ba-select2-container.select2-container .select2-selection .select2-selection__rendered {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--hr-brown-500, #1b190c);
}
.nominate-revamp .nom-field .ba-select2-container.ba-select2--has-value .select2-selection .select2-selection__rendered { font-weight: 400; }
.nominate-revamp .nom-field .ba-select2-container.select2-container .select2-selection .select2-selection__placeholder { color: rgba(102, 101, 92, .5); }
/* Set, open and focused all keep the field's own fill - the pill swaps to
   cream-50 and then white - with the amber rim the inputs already use for
   focus. */
.nominate-revamp .nom-field .ba-select2-container.ba-select2--has-value .select2-selection {
    background: rgba(236, 230, 211, .4);
    border-color: transparent;
    box-shadow: none;
}
.nominate-revamp .nom-field .ba-select2-container.select2-container--open .select2-selection,
.nominate-revamp .nom-field .ba-select2-container.select2-container--focus .select2-selection {
    background: rgba(236, 230, 211, .4);
    border-color: var(--hr-yellow-500, #d98500);
    box-shadow: none;
}
/* The artboard's own 16px glyph, at the size the native control uses - not the
   pill's 11x6 Press Releases chevron, which also thickens on select. */
.nominate-revamp .nom-field .ba-select2-container.select2-container .select2-selection .select2-selection__arrow,
.nominate-revamp .nom-field .ba-select2-container.ba-select2--has-value .select2-selection .select2-selection__arrow {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-inline-start: 8px;
    background: url("../images/nominate-revamp/icon-chevron-down.svg") no-repeat center / 16px 16px;
}

/* The panel itself, on this page only. The shared one is a 16px-radius
   rounded card; here it takes the 8px of the control it hangs off, so the two
   read as one piece and the corners stay sharp rather than curved.

   Scoped through :has() on the body rather than under .nominate-revamp,
   because select2 re-parents the panel to <body> - it is not a descendant of
   the page wrapper by the time it is drawn. Every other page keeps the 16px
   card. */
body:has(.nominate-revamp) .ba-select2-dropdown.select2-dropdown { border-radius: 8px; }

/* A select showing its placeholder option reads like a placeholder, i.e. the
   same brown-300 at 50% the text inputs use - not the brown-500 a chosen value
   gets. :invalid is the state: every one of these is `required` and its
   placeholder option carries no value, so it holds until something real is
   picked. (The fields used to have an EMPTY placeholder option, so they just
   rendered blank; the artboard gives each one its own "Select country" /
   "Select language" / "Select city" text.) */
.nom-select:invalid { color: rgba(102, 101, 92, .5); }
/* Video link: the artboard puts a 16px link glyph inside the control, before
   the placeholder (node 40001205:95778). */
.nom-input--link {
    background-image: url("../images/nominate-revamp/icon-link.svg");
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: left 16px center;
    padding-inline-start: 40px;
}
[dir="rtl"] .nom-input--link { background-position: right 16px center; padding-inline-start: 16px; padding-inline-end: 40px; }
/* intl-tel-input plugin markup mounted on #contact_number */
.nominate-revamp .iti { width: 100%; }
/* intl-tel-input sets an inline padding-left on init, measured from the
   flag+dial-code box's width at that moment. Once the Almarai webfont swaps
   in, "+974" renders wider than the fallback font it measured against, so the
   box grows past that fixed padding and the first digits render underneath
   it. Override with a fixed value comfortably wider than any dial code. */
.nominate-revamp .iti input.nom-input {
    width: 100%;
    padding-inline-start: 130px !important;
}

/* Consent checkboxes */
.nom-consent-row { display: flex; align-items: flex-start; gap: 12px; }
/* The artboard's second consent line is a single centred row (node
   40001205:95805), where the first is a wrapped paragraph the box sits at the
   top of. */
.nom-consent-row--center { align-items: center; }
.nom-consent-row--center .nom-checkbox { margin-top: 0; }
.nom-consent-row label {
    font-size: 20px;
    line-height: 28px;
    color: var(--hr-brown-400, #49473d);
    cursor: pointer;
}
/* 4px of lead-in, per the artboard's pt-4 on the box's own wrapper. */
.nom-checkbox {
    flex-shrink: 0;
    position: relative;
    width: 24px;
    height: 24px;
    margin-top: 4px;
}
.nom-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
/* The unchecked box is the artboard's own tick-square glyph (node
   40000491:25623), checked in from its export: a 20px rounded square inside the
   24px frame WITH its tick, both stroked 1.5px round-capped at #b1afa5 50%.
   Drawn from the file rather than approximated in CSS, so the corner radius and
   the tick's geometry are the design's own - a border + a hand-placed tick got
   neither. It replaced a 2px FULL-strength #b1afa5 rim on a cream fill, which
   read as a much heavier box.

   Checked keeps the amber fill and the white tick below - Figma ships only the
   Default variant of this component, so that state is ours. */
.nom-checkbox-box {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 0;
    background: url("../images/nominate-revamp/icon-checkbox.svg") 50% / 24px 24px no-repeat;
    pointer-events: none;
}
.nom-checkbox input:checked ~ .nom-checkbox-box {
    /* Off with the glyph, or its grey tick would show through under the white
       one. */
    background-image: none;
    background-color: var(--hr-yellow-500);
}
/* The white tick for the checked state, at the glyph's own 1.5px stroke weight
   (it was 2px, visibly heavier than the grey tick it replaces on click). Its
   4/8px legs are the export's - (7.75,12) to (10.58,14.83) to (16.25,9.17) -
   though a border-drawn tick cannot round its caps the way the SVG does. */
.nom-checkbox-box::after {
    content: "";
    position: absolute;
    top: 5px;
    inset-inline-start: 8px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(40deg);
    opacity: 0;
}
.nom-checkbox input:checked ~ .nom-checkbox-box::after { opacity: 1; }

/* Actions */
.nom-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 0 80px; margin-top: 48px; }
.nom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 24px;
    border-radius: 61px;
    font-size: 16px;
    font-weight: 700;
    /* No border here: it used to be `1.5px solid transparent` on the shared
       .nom-btn, and since this file loads after layout-revamp.css it beat the
       2px outset glass rim the primary now inherits from the shared
       Button/primary list. The ghost carries its own below. */
    cursor: pointer;
    text-decoration: none;
    transition: transform .2s ease;
}
.nom-btn:hover { transform: translateY(-2px); text-decoration: none; }
/* The glass pill, same as .trn-btn-ghost - which is the same component in
   Figma (node 40001205:95846): white 20% fill, a 1.5px translucent rim, the
   inset highlight and the ambient ramp. position/overflow, the masked glass
   ring and the hover bloom all come from the shared lists in
   layout-revamp.css, which this now joins, so nothing here can drift from the
   other pages. It had a white-50% fill behind a DARK rgba(27,25,12,.18) rim and
   none of the glass.

   148px is the artboard's own width for this button. */
.nom-btn-ghost {
    min-width: 148px;
    background: rgba(255, 255, 255, .2);
    border: 1.5px solid transparent;
    color: var(--hr-brown-900);
    box-shadow:
        inset 0 4px 6.1px rgba(255, 255, 255, .23),
        2px 23px 14px rgba(0, 0, 0, .02),
        1px 10px 10px rgba(0, 0, 0, .03),
        0 3px 6px rgba(0, 0, 0, .03);
}
.nom-btn-ghost:hover { color: var(--hr-brown-900); background: rgba(255, 255, 255, .3); }
/* Fill, rim, inset highlight, ambient shadow and hover bloom all come from the
   shared Button/primary lists in layout-revamp.css, which this now joins - the
   same treatment the footer's Subscribe and the Partnership form's "Send
   inquiry" wear. Nothing restated here, so the three cannot drift; the page
   loads after layout-revamp.css, so a fill declared here would silently win. */
.nom-btn-primary { color: var(--hr-cream-50); }
.nom-btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ---------- Step 1: Requirements ---------- */
.nom-req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
/* Figma node I40001286:71561;40001220:96386. The card is a glass panel, not the
   flat cream fill it carried: a white rim over a near-white gradient on a heavy
   backdrop blur, lifted by the drop shadow the artboard gives all three cards.

   Figma's shadow ramp opens with two layers at alpha 0 (4px 40px 8px and
   7px 63px 9px) which paint nothing, so they are documented rather than
   emitted - the same convention .blg-card and the filter pills follow.

   Each card also carries its own accent, set once here and read by both the tag
   and the list markers below so the two can never drift apart. The default is
   the blue pair; the modifiers are per the artboard. */
.nom-req-card {
    --nom-req-tag: var(--hr-blue-400);
    --nom-req-mark: var(--hr-blue-400);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px;
    border: 1px solid #fff;
    border-radius: 20px;
    /* #f6f6f4, read off the artboard itself rather than from the Tailwind its
       exporter emits. That code describes a 45-60% WHITE gradient over a blur,
       which composites LIGHTER than the panel behind it (~#fefefd here) - but
       the artboard renders these cards at a flat #f6f6f4 against a #fcfcf8
       panel, i.e. a few units DARKER and more neutral than the cream around
       them. That contrast is the whole read of the card: white-on-white made
       them dissolve into the form.
       Flat, and no backdrop-filter: the render shows no gradient across the
       card, and with an opaque fill on an already-uniform panel the blur costs a
       compositing layer and paints nothing. */
    background: #f6f6f4;
    /* Blurs are 14/10/6, NOT the 7/5/3 the Figma exporter emits. Its Tailwind
       output writes these as `drop-shadow(2px 23px 7px ...)`, halving Figma's
       own blur values the way an SVG std-deviation would - but a CSS blur radius
       (box-shadow and drop-shadow alike) is the unhalved number, so half the
       radius makes the shadow both too tight and too dark right at the rim.
       Measured on the design's render: the darkest row under a card is #edede9,
       where 7/5/3 gave #e9e9e5. Same three layers as --pts-pill-shadow on the
       Partnership page, which carries Figma's real numbers. */
    box-shadow:
        inset 0 4px 6.1px rgba(255, 255, 255, .23),
        2px 23px 14px rgba(0, 0, 0, .02),
        1px 10px 10px rgba(0, 0, 0, .03),
        0 3px 6px rgba(0, 0, 0, .03);
}
/* "If you have" - green tag, but the markers are the DEEPER green-500, not the
   tag's own green-400. Straight off the artboard. */
.nom-req-card--green { --nom-req-tag: var(--hr-green-400); --nom-req-mark: var(--hr-green-500); }
/* "Inspire us... in Arabic" - green tag with PURPLE markers. Also the artboard's
   own pairing, and the one place the two genuinely differ. */
.nom-req-card--purple { --nom-req-tag: var(--hr-green-400); --nom-req-mark: var(--hr-purple-500); }
.nom-req-badge {
    display: inline-flex;
    align-self: flex-start;
    padding: 8px 16px;
    border: 1px solid rgba(177, 175, 165, .5);
    border-radius: 8px;
    background: var(--nom-req-tag);
    color: #e6f0ef;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}
.nom-req-card h3 { font-size: 20px; font-weight: 700; color: var(--hr-brown-500); margin: 0; }
/* No gap on the list: the artboard spaces the points with 12px of padding on
   each item (24px between two of them), not a gap - so the first and last also
   sit off the block above and below them. It was an 8px gap, a third of that.
   Text indent is 32px: a 16px marker box plus the 16px gap the artboard puts
   between the marker and the copy. */
.nom-req-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nom-req-list li {
    position: relative;
    padding-block: 12px;
    padding-inline-start: 32px;
    font-size: 16px;
    line-height: 24px;
    color: var(--hr-brown-400, #49473d);
}
/* 11.314px square rotated 45deg - an 16px diagonal, which is the size the
   artboard's marker occupies. It was an 8px square (11.3px diagonal). Colour
   comes from the card's own accent, so a card's markers always match whatever
   its modifier sets. */
.nom-req-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    /* Centres the diamond on the first line: 12px of item padding + half the
       24px line box, less half the marker's own 11.314px. */
    top: 18px;
    width: 11.314px;
    height: 11.314px;
    background: var(--nom-req-mark);
    transform: rotate(45deg);
}
.nom-req-note { font-size: 16px; line-height: 24px; color: var(--hr-brown-300); margin: 8px 0 0; }
/* Heading + standfirst as one block, 8px apart (artboard node 40001220:98420).
   Loose in the card they took the card's 16px gap plus the note's own 8px top
   margin - 24px, three times the design's. */
.nom-req-head { display: flex; flex-direction: column; gap: 8px; }
.nom-req-head .nom-req-note { margin-top: 0; }
.nom-req-actions { display: flex; justify-content: flex-end; margin-top: 48px; }

/* ---------- Closed state ---------- */
.nom-closed {
    position: relative;
    z-index: 1;
    max-width: none;
    margin-inline: auto;
    padding: 120px var(--nom-gutter);
    text-align: center;
}
.nom-closed h3 { font-size: 32px; font-weight: 700; color: var(--hr-yellow-500); margin-bottom: 16px; }
.nom-closed p { font-size: 18px; color: var(--hr-brown-300); margin: 0; }

@media (max-width: 1199.98px) {
    /* No padding-inline step for .nom-hero / .nom-intro / .nom-form-wrap /
       .nom-closed: --nom-gutter follows the header's own 160 -> 12px switch at
       992px, and the old 40px here put this page 120px inside the header
       between 992 and 1200. */
    .nom-card-header,
    .nom-card-body,
    .nom-actions { padding-inline: 40px; }
}
@media (max-width: 991.98px) {
    .nominate-revamp {
        --nom-hero-h: 200px;
        /* Tail held at the band's own 27.4%, so the hairline still lands on the
           ramp's 78.5% stop (200 * .274 = 55). */
        --nom-wash-tail: 55px;
    }
    .nom-req-grid { grid-template-columns: 1fr; }
    .nom-field-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .nominate-revamp {
        --nom-hero-h: 160px;
        /* The band is shorter here, so the tail comes down with it to keep the
           hairline on the ramp's 78.5% stop. */
        --nom-wash-tail: 48px;
    }
    /* Kept on phones rather than dropped - see .evt-hero-pattern. Scaled, the
       pair is 100px and 128px tall; each sits `bottom: var(--nom-wash-tail)` up from
       the paint's edge, so it still lands on the breadcrumb hairline and stays
       inside the decor box the way it does at full size. */
    .nom-hero-pattern-start {
        width: min(190px, 44%);
        height: auto;
        aspect-ratio: 305.329 / 160.658;
    }
    .nom-hero-pattern-end {
        width: min(190px, 44%);
        height: auto;
        aspect-ratio: 305.29 / 204.731;
    }
    /* Title and standfirst centred, a step down the ramp - the phone treatment
       About Us (.abt-title-row h1 / .abt-intro-desc) and Partnership
       (.partnership-hero-top) both carry, so all three pages read the same:
       32/40 and 16/24, centred, where the desktop pair is leading-edge
       aligned. The clamps above floor at 36/16, so the sizes are restated
       here along with the alignment. */
    .nom-intro-inner { text-align: center; }
    .nom-intro-inner h1 { font-size: 32px; line-height: 40px; }
    .nom-intro-inner p { font-size: 16px; line-height: 24px; }
    /* The phone had the desktop's own lead-ins - 120px under the hero and
       80px/120px around the form - so the band, the title and the tabs each sat
       a screenful apart. The siblings' phone figures: About Us takes its intro
       down to 60px (.abt-intro), Partnership runs 70px from the hero hairline
       to the first heading and pads its form block 60px top and bottom
       (.partnership-ways / .partnership-form). Same three numbers here, with
       the intro-to-tabs gap kept at the desktop 40px since the form follows its
       own standfirst with no divider between them. */
    .nom-intro { padding-top: 70px; }
    .nom-form-wrap { padding-block: 40px 60px; }

    .nom-card-header,
    .nom-card-body,
    .nom-actions { padding-inline: 24px; }
    /* Leading-edge, NOT centred, and the title keeps its 40px: only the PAGE
       title and standfirst centre on the phone. .partnership-card-header is the
       same - left-aligned with a 40/48 title over a left-aligned section lead -
       and the two forms are meant to read alike. */
    .nom-card-header { flex-direction: column; align-items: flex-start; }
    /* The step indicator did not fit: a FIXED 300px track plus a 24px gap plus
       "Step n" needs ~370px, against the 318px between this header's 24px
       paddings at 390px - so the bar ran out past the card and the label was
       clipped to "St". Full-width row with the track taking whatever is left of
       it, which is the only part of this component that has to be fluid. */
    .nom-step-indicator { width: 100%; gap: 12px; }
    .nom-progress-track { width: auto; flex: 1 1 auto; min-width: 0; }
    .nom-actions { flex-direction: column-reverse; align-items: stretch; }
    /* Step 1's lone "Proceed" stretches too, so both steps' buttons are the
       same full-width block .ptn-actions gives the Partnership form. It was
       right-aligned at every width. */
    .nom-req-actions .nom-btn { flex: 1 1 auto; }
    /* Narrower body padding and a shorter slant so both tabs still fit on one
       line at 375px; the row's own inset comes down with them. */
    .nom-tabs { padding-inline-start: 16px; }
    .nom-tab { --nom-tab-slant: 16px; padding: 14px 30px; font-size: 14px; }

    /* ---------- Form type, phone step ----------
       The sibling Become a Translator form (.trn-card-title / .trn-step-label
       in translate-revamp.css) is the reference: the two forms are the same
       component, but only that one carried a phone step for its card head, so
       this one kept its DESKTOP type on a 375px screen - a 40px title over
       16px fields, with the step label as large as the section lead under it.

       Field type is already identical between the two pages at this width
       (labels, inputs, selects and textareas all 16/24, the section lead
       20/28, the primary button 16/24 bold), so only the head and the radio
       option text move here.

       The tabs are deliberately NOT taken from .trn-tab's 10/12: that size is
       what fits THREE tabs across a phone on the translator form. This form
       has two, which measure 312px of a 351px row at 14px, so shrinking them
       would only make them harder to hit. */
    .nom-card-title { font-size: 20px; line-height: 28px; }
    /* Section lead, phone step. At 20/28 it matched the title exactly once the
       title came down to 20, so it read as the largest thing in the card. It
       keeps the design's regular weight and steps down to the body size, which
       leaves it sharing the labels' size and colour - the space above it is
       what separates the two on a phone. */
    .nom-section-lead { font-size: 16px; line-height: 24px; }
    .nom-step-label { font-size: 12px; line-height: normal; font-weight: 400; }
    /* Down to the size every other piece of field text on both forms uses.
       18px made the two options the largest thing in the fieldset, over their
       own 16px "Application Type" label. */
    .nom-radio-text { font-size: 16px; line-height: 24px; }

    /* One breadcrumb size site-wide on the phone, taken from the Events
       listing (.evt-breadcrumb in events-revamp.css): 12px type, 8px gaps,
       a 12px separator. This page had no phone step at all. */
    .nom-breadcrumb { font-size: 12px; gap: 8px; }
    .nom-breadcrumb-sep { height: 12px; }
}

/* No [dir="rtl"] overrides for the list: padding-inline-start and
   inset-inline-start already mirror on their own. The pair that used to sit
   here flipped them a SECOND time, so in Arabic the marker stayed on the left
   with the text indented from the left - the LTR arrangement - and kept the old
   20px indent the base rule has since moved off. */