/*
Theme Name: DPA
Description: Digital Prosperity Awards website theme.
Version: 2.6.27
Text Domain: dpa
*/
/* 2.51.61: the scale unit is also defined here (same values as the Tailwind @theme blocks), so every plain-CSS calc(var(--u)*N)
   in the templates works even when the Tailwind browser compiler is late - without it those rules were invalid and the hero
   rendered with a giant arrow and unsized type. */
:root { --u: 1px; }
@media (width >= 90rem) { :root { --u: calc(1px + (min(100vw, 2560px) - 1440px) / 4320); } }

@font-face {
    font-family: "DIN Next W1G";
    src: url("assets/fonts/DINNextW1G-UltraLight.otf") format("opentype");
    font-style: normal;
    font-weight: 200;
    font-display: swap;
}
@font-face {
    font-family: "DIN Next W1G";
    src: url("assets/fonts/DINNextW1G-UltraLightIt.otf") format("opentype");
    font-style: italic;
    font-weight: 200;
    font-display: swap;
}
@font-face {
    font-family: "DIN Next W1G";
    src: url("assets/fonts/DINNextW1G-Light.otf") format("opentype");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: "DIN Next W1G";
    src: url("assets/fonts/DINNextW1G-LightItalic.otf") format("opentype");
    font-style: italic;
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: "DIN Next W1G";
    src: url("assets/fonts/DINNextW1G-Regular.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "DIN Next W1G";
    src: url("assets/fonts/DINNextW1G-Italic.otf") format("opentype");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "DIN Next W1G";
    src: url("assets/fonts/DINNextW1G-Medium.otf") format("opentype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "DIN Next W1G";
    src: url("assets/fonts/DINNextW1G-MediumItalic.otf") format("opentype");
    font-style: italic;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "DIN Next W1G";
    src: url("assets/fonts/DINNextW1G-Bold.otf") format("opentype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "DIN Next W1G";
    src: url("assets/fonts/DINNextW1G-BoldItalic.otf") format("opentype");
    font-style: italic;
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "DIN Next W1G";
    src: url("assets/fonts/DINNextW1G-Heavy.otf") format("opentype");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: "DIN Next W1G";
    src: url("assets/fonts/DINNextW1G-HeavyItalic.otf") format("opentype");
    font-style: italic;
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: "DIN Next W1G";
    src: url("assets/fonts/DINNextW1G-Black.otf") format("opentype");
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}
@font-face {
    font-family: "DIN Next W1G";
    src: url("assets/fonts/DINNextW1G-BlackItalic.otf") format("opentype");
    font-style: italic;
    font-weight: 900;
    font-display: swap;
}

/* Country-flag emoji for browsers without them (Windows Chrome/Edge). Only the regional-indicator
   flag characters use this font (unicode-range), so all other text stays DIN. Font: country-flag-emoji-polyfill
   (MIT), flag artwork Twemoji (CC-BY 4.0). */
@font-face {
    font-family: "Twemoji Country Flags";
    src: url("assets/fonts/TwemojiCountryFlags.woff2") format("woff2");
    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
    font-display: swap;
}

html,
body,
button,
input,
select,
option,
textarea {
    font-family: "Twemoji Country Flags", "DIN Next W1G", ui-sans-serif, system-ui, sans-serif;
}
body {
    font-synthesis: none;
}

/* 2.51.185: WordPress's global styles print `a:where(:not(.wp-element-button)) { text-decoration: underline; }`, which
   underlines the pill buttons. Only the buttons are reset; every other link keeps whatever underline it already had. */
html a.pill { text-decoration: none; }
/* 2.51.227: raised ordinal in "1st Edition" / "2nd Edition" (inc/helpers.php dpa_edition_labels) without changing the line height */
.dpa-ord { position: relative; top: -.4em; margin-left: .02em; font-size: .75em; line-height: 0; vertical-align: baseline; letter-spacing: .02em; text-transform: none; }

/* Shared directional mark, sourced from HomeAssets and tinted by text color. */
.eyebrow-arrow {
    display: inline-block;
    flex: 0 0 auto;
    width: 26px;
    height: 8px;
    background-color: currentColor;
    -webkit-mask: url("assets/images/arrow.svg") center / contain no-repeat;
    mask: url("assets/images/arrow.svg") center / contain no-repeat;
    transform: translateY(-.12em); /* DIN caps sit above the line-box centre; optical centring (measured in Chrome) */
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.screen-reader-text:focus {
    z-index: 100000;
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
    padding: 12px 16px;
    clip: auto;
    background: #fff;
    color: #753BBD;
}

/* Header layout must remain functional even if the Tailwind browser compiler is delayed. */
.dpa-site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9990;
    padding: 16px 0 0;
    pointer-events: none;
    isolation: isolate;
    transition: padding .55s cubic-bezier(.16, 1, .3, 1);
}
.dpa-header-glass {
    position: relative;
    width: 100%;
    margin-inline: auto;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: auto;
    transition: width .55s cubic-bezier(.16,1,.3,1), background-color .55s ease,
        border-color .55s ease, border-radius .55s cubic-bezier(.16,1,.3,1), box-shadow .55s cubic-bezier(.16,1,.3,1),
        backdrop-filter .55s ease, -webkit-backdrop-filter .55s ease;
}
.dpa-header-shell {
    min-height: 76px;
    padding-block: 6px !important;
    pointer-events: auto;
}
.dpa-header-shell > a:first-child img {
    height: 72px !important;
    width: auto;
}
.dpa-site-header.is-scrolled .dpa-header-glass {
    width: min(1200px, calc(100% - 40px));
    border-radius: 24px;
    border-color: rgba(255,255,255,.24);
    background-color: rgba(24,0,64,.82);
    box-shadow: 0 16px 46px rgba(13,0,40,.3), inset 0 1px 0 rgba(255,255,255,.12);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
}
@media (min-width: 90rem) {
    .dpa-site-header.is-scrolled .dpa-header-glass {
        width: min(calc(var(--u, 1px) * 1200), calc(100% - 40px));
    }
}
.dpa-site-header.is-scrolled .dpa-header-shell {
    padding-inline: 20px !important;
}
.dpa-header-spacer {
    height: 100px;
}
.dpa-desktop-nav,
.dpa-header-cta {
    display: none !important;
}
.dpa-mobile-toggle {
    display: inline-flex !important;
}
/* 2.51.239: menu button per the client's Figma Frame 1984081154: 44px glass circle (7% white, soft drop shadow, inner
   top highlight, 12px blur), no border, 24px three-line icon. */
html body .dpa-site-header .dpa-mobile-toggle {
    width: 44px;
    height: 44px;
    padding: 9px;
    border: 0;
    background: rgba(255,255,255,.07);
    box-shadow: 0 4px 12px rgba(0,0,0,.08), inset 0 5px 11px rgba(255,255,255,.45);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
}
html body .dpa-site-header .dpa-mobile-toggle svg { width: 24px; height: 24px; }
.dpa-desktop-nav > ul,
.dpa-mobile-panel > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.dpa-mobile-panel > ul {
    display: flex;
    flex-direction: column;
}
.dpa-mobile-panel {
    pointer-events: auto;
    box-shadow: 0 18px 46px rgba(13,0,40,.32);
}
.dpa-mobile-panel.hidden {
    display: none !important;
}
.dpa-site-header .nav-link {
    display: block;
    padding: 8px 10px;
    color: rgba(255, 255, 255, .88);
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    text-decoration: none;
    text-transform: uppercase;
}
.dpa-site-header .nav-link:hover,
.dpa-site-header .nav-link:focus-visible,
.dpa-site-header .current-menu-item > .nav-link,
.dpa-site-header .current_page_item > .nav-link,
.dpa-site-header .nav-link[aria-current="page"],
.dpa-site-header .nav-link.is-current {
    color: #D4AF37;
}
.dpa-site-header .nav-placeholder {
    cursor: default;
}
.dpa-submenu-toggle {
    display: inline-flex;
    width: 22px;
    height: 32px;
    align-items: center;
    justify-content: center;
    margin-left: -8px;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.65);
}
.dpa-submenu-toggle > span {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .25s ease;
}
.menu-item-has-children.is-submenu-open > .dpa-submenu-toggle > span {
    transform: translateY(2px) rotate(225deg);
}
.current-menu-item > .dpa-submenu-toggle,
.current_page_item > .dpa-submenu-toggle,
.nav-link.is-current + .dpa-submenu-toggle,
.nav-link[aria-current="page"] + .dpa-submenu-toggle {
    color: #f9b01f;
}
.dpa-site-header .menu-item-has-children {
    position: relative;
}
.dpa-site-header .sub-menu {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 8px;
    list-style: none;
}
.dpa-site-header .sub-menu .nav-link {
    box-sizing: border-box;
    display: flex;
    min-height: 50px;
    align-items: center;
    padding: 14.5px 20px;
    border: 1px solid transparent;
    border-radius: 16px;
    color: rgba(255,255,255,.75);
    font-size: 18px;
    line-height: 21px;
    font-weight: 500;
    text-transform: none; /* 2.51.72: submenu items show the menu text exactly as entered (was capitalize) */
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .25s cubic-bezier(.16,1,.3,1), box-shadow .2s ease;
}
/* Dropdown items (client, 2.48.64): no active/current state - the items link to sections of one page - and the
   former active look (gold label on a faint glass box) is now the hover/focus look. */
.dpa-site-header .sub-menu .nav-link:hover,
.dpa-site-header .sub-menu .nav-link:focus-visible {
    border-color: rgba(255,255,255,.05);
    background: rgba(255,255,255,.05);
    color: #D4AF37;
    transform: translateX(2px);
}
.dpa-site-header .sub-menu .current_page_item > .nav-link,
.dpa-site-header .sub-menu .current-menu-item > .nav-link,
.dpa-site-header .sub-menu .nav-link[aria-current="page"],
.dpa-site-header .sub-menu .nav-link[aria-current="location"],
.dpa-site-header .sub-menu .nav-link.is-current {
    border-color: transparent;
    background: transparent;
    color: rgba(255,255,255,.75);
    box-shadow: none;
}
.dpa-site-header .sub-menu .current_page_item > .nav-link:hover,
.dpa-site-header .sub-menu .current-menu-item > .nav-link:hover,
.dpa-site-header .sub-menu .nav-link[aria-current="page"]:hover,
.dpa-site-header .sub-menu .nav-link[aria-current="location"]:hover,
.dpa-site-header .sub-menu .nav-link.is-current:hover {
    border-color: rgba(255,255,255,.05);
    background: rgba(255,255,255,.05);
    color: #D4AF37;
}
.dpa-mobile-panel .menu-item-has-children {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
}
.dpa-mobile-panel .menu-item-has-children > .sub-menu {
    display: none;
    grid-column: 1 / -1;
    width: 100%;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    background: rgba(255,255,255,.08);
    box-shadow: 0 16px 36px rgba(13,0,40,.28);
    backdrop-filter: blur(18px);
}
.dpa-mobile-panel .menu-item-has-children.is-submenu-open > .sub-menu {
    display: flex;
}
.dpa-header-cta,
.dpa-mobile-cta {
    align-items: center;
    justify-content: center;
    border-radius: 36px;
    background: #753BBD;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
}
.dpa-header-cta {
    min-height: 50px;
    padding: 0 28px;
    white-space: nowrap;
}
.dpa-header-cta:hover,
.dpa-header-cta:focus-visible,
.dpa-mobile-cta:hover,
.dpa-mobile-cta:focus-visible {
    background: #5210c2;
}
@media (min-width: 48rem) {
    .dpa-header-cta {
        display: inline-flex !important;
    }
}
@media (min-width: 80rem) {
    .dpa-site-header { padding-top: 16px; }
    .dpa-desktop-nav {
        display: block !important;
    }
    .dpa-desktop-nav > ul {
        display: flex;
        align-items: center;
    }
    .dpa-desktop-nav .menu-item-has-children {
        display: flex;
        align-items: center;
    }
    .dpa-desktop-nav .sub-menu {
        position: absolute;
        top: calc(100% + var(--dd-gap, 14px));
        left: 50%;
        z-index: 40;
        width: max-content;
        min-width: 207px;
        gap: 5px;
        border: 0;
        border-radius: 20px;
        background: rgba(255,255,255,.1);
        box-shadow: 0 4px 20px rgba(0,0,0,.2);
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transform: translate(-50%,10px);
        -webkit-backdrop-filter: blur(26px) saturate(135%);
        backdrop-filter: blur(26px) saturate(135%);
        transition: opacity .25s ease,transform .35s cubic-bezier(.16,1,.3,1),visibility .25s;
    }
    .dpa-desktop-nav .sub-menu::before {
        content: "";
        position: absolute;
        right: 0;
        bottom: 100%;
        left: 0;
        height: var(--dd-gap, 14px);
    }
    .dpa-desktop-nav .menu-item-has-children:hover > .sub-menu,
    .dpa-desktop-nav .menu-item-has-children:focus-within > .sub-menu,
    .dpa-desktop-nav .menu-item-has-children.is-submenu-open > .sub-menu {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: translate(-50%,0);
    }
    /* 2.51.55: hovering another parent closes the one kept open by click focus / is-submenu-open, so two dropdowns never overlap */
    .dpa-desktop-nav:has(.menu-item-has-children:hover) .menu-item-has-children:not(:hover) > .sub-menu {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transform: translate(-50%,10px);
        transition-duration: 0s;
    }
    .dpa-mobile-toggle,
    .dpa-mobile-panel {
        display: none !important;
    }
}

/* Keep every large decorative DCO mark centered when the viewport exceeds the 1440px artboard. */
@media (min-width: 1441px) {
    img[src*="DCOLogoIconBlue"],
    img[src*="DCOLogoIconWhite"] {
        position: absolute !important;
        inset: 50% auto auto 50% !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        transform: translate(-50%,-50%) !important;
        object-fit: cover !important;
        object-position: center !important;
    }
    .stories-featured::before,
    .jury-panel::before,
    .jury-process::before,
    .sponsor-opportunities::before,
    .hall-categories::before {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-position: center !important;
        background-size: cover !important;
        transform: none !important;
    }
}
@media (max-width: 47.99rem) {
    .dpa-site-header { padding: 8px 0; }
    .dpa-header-shell { min-height: 60px; padding-block: 4px !important; }
    .dpa-header-shell > a:first-child img { height: 56px !important; }
    .dpa-site-header.is-scrolled .dpa-header-glass { width: calc(100% - 16px); border-radius: 19px; }
    .dpa-site-header.is-scrolled .dpa-header-shell { padding-inline: 14px !important; }
    .dpa-header-spacer { height: 76px; }
}
@media (prefers-reduced-motion: reduce) {
    .dpa-site-header, .dpa-header-glass { transition: none !important; }
}

.dpa-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}
.application-field select,
.application-field select option {
    font-family: "DIN Next W1G", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.dpa-consent-field label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}
.dpa-consent-field input {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    flex: 0 0 auto;
}
.dpa-consent-field a {
    color: #00e2ff;
    text-decoration: underline;
}

/* Three Pillars section (Home, Awards, Hall of Fame) — design "Frame 1984080723". */
.dpa-pillars .eyebrow { color: #753BBD; }
.dpa-pillars .h-section { color: #0D0028; }
.dpa-pillars .h-section em { color: #753BBD; }
.dpa-pillars .pillar-card > img { object-position: center; }
/* Pillar cards are 423px tall everywhere (Home, Awards, Sponsor, Hall of Fame) per the client (2.48.65); the Tailwind
   per-page rules say the same, this is the single source if one of them drifts. */
@media (min-width: 48rem) { .dpa-pillars .pillar-card { height: 423px; } }
/* Mobile (client, 2.49.33): the cards grow with their copy instead of clipping it. The 440px/423px of the per-page
   rules becomes a minimum, and a top band keeps the picture visible when the copy is taller than that. */
@media (max-width: 47.99rem) {
    .dpa-pillars .pillar-card, .jpl .jpl-card { height: auto; min-height: 440px; padding-top: 96px; }
}
@media (min-width: 90rem) { .dpa-pillars .pillar-card { height: calc(var(--u) * 423); } }
.dpa-pillars .pillar-card--enablers::before { background: linear-gradient(180deg, rgba(117,59,189,0) 0%, #753BBD 89.8%); }
.dpa-pillars .pillar-card--innovation::before { background: linear-gradient(180deg, rgba(0,122,255,0) 0%, #007AFF 90.15%); }
.dpa-pillars .pillar-card--society::before { background: linear-gradient(180deg, rgba(0,179,115,0) 0%, #00B373 90.35%); }
.dpa-pillars .pillar-card .pillar-text { color: rgba(255,255,255,.8); }
@media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
    .dpa-pillars .pillar-card--enablers:hover, .dpa-pillars .pillar-card--enablers:focus-within { filter: drop-shadow(0 4px 24px rgba(117,59,189,.45)); }
    .dpa-pillars .pillar-card--innovation:hover, .dpa-pillars .pillar-card--innovation:focus-within { filter: drop-shadow(0 4px 24px rgba(0,122,255,.4)); }
    .dpa-pillars .pillar-card--society:hover, .dpa-pillars .pillar-card--society:focus-within { filter: drop-shadow(0 4px 24px rgba(0,179,115,.4)); }
}

/* Hidden for now on the client's instruction (2.48.51): the homepage "Edition 1 - Winners" spotlight (#hall-of-fame) and the
   "Backed by institutions shaping the digital future" partners section (#partners, Home + Sponsor). Markup, data and scripts
   are kept - delete this rule to show them again. */
section#hall-of-fame.dpa-spotlight, section#partners { display: none !important; }

/* DPA Categories pillar filter (Home, Sponsor, Awards) — design segmented control (2.48.27): a 48px #753BBD pill ring with
   a 2px lighter halo, the active tab a white 40px pill with purple text, the others white 75% text on the purple.
   Replaces the underlined text tabs; the markup (.category-tabs > .tab[aria-selected]) and the filter JS are unchanged. */
.category-tabs {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 4px;
    border-radius: 999px;
    background: #753BBD;
    box-shadow: 0 0 0 2px rgba(117,59,189,.45);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.category-tabs::-webkit-scrollbar { display: none; }
.category-tabs .tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255,255,255,.75);
    font-size: 16px;
    line-height: 19px;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.category-tabs .tab[data-filter="all"] { min-width: 136px; }
.category-tabs .tab:hover,
.category-tabs .tab:focus-visible { color: #fff; }
.category-tabs .tab[aria-selected="true"] {
    background: #fff;
    color: #753BBD;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(13,0,40,.1);
}
@media (min-width: 90rem) {
    .category-tabs { padding: calc(var(--u) * 4); box-shadow: 0 0 0 calc(var(--u) * 2) rgba(117,59,189,.45); }
    .category-tabs .tab { min-height: calc(var(--u) * 40); padding: 0 calc(var(--u) * 24); font-size: calc(var(--u) * 16); line-height: calc(var(--u) * 19); }
    .category-tabs .tab[data-filter="all"] { min-width: calc(var(--u) * 136); }
}
@media (max-width: 39.99rem) {
    .category-tabs .tab { min-height: 36px; padding: 0 16px; font-size: 14px; }
    .category-tabs .tab[data-filter="all"] { min-width: 88px; }
}

/* DPA Categories cards (Home, Awards/Sponsor) - design "Component 30" (Frame 1984081144):
   #0D0028 -> #007AFF gradient, the DCO mark at 4% (baked into images/cat-card-mark.png) at -7/-128.67 520x639,
   a #9A4DDB glow centred on the left edge and a #00B373 glow above the top-right corner. */
.cat-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 20px;
    background: url(assets/images/cat-card-mark.png) -7px -128.67px / 520px 639px no-repeat,
        linear-gradient(141.46deg, #0D0028 37.8%, #007AFF 153.45%), #0D0028;
}
.cat-card::before,
.cat-card::after {
    content: "";
    position: absolute !important;
    z-index: -1 !important;
    right: auto !important;
    width: 220px !important;
    height: 220px !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none;
}
.cat-card::before { left: -117px !important; top: 70px !important; background: #9A4DDB !important; filter: blur(110px) !important; }
.cat-card::after { left: calc(50% + 23.5px) !important; top: -202px !important; background: #00B373 !important; filter: blur(112px) !important; }
/* Hover never moves the card or its glows (the icon and the link grow, see assets/ui/site-ui.css). */
.cat-card, .cat-card:hover, .cat-card:focus-within { transform: none !important; box-shadow: none !important; }
.cat-card .text-link { border-bottom-color: rgba(255,255,255,.2); }
.cat-card--design { min-height: 330px; }
.cat-card--design .cat-title { letter-spacing: -.5px; }
.cat-card--design .cat-text { color: #fff; }
@media (min-width: 90rem) {
    .cat-card { background-position: calc(var(--u) * -7) calc(var(--u) * -128.67), 0 0, 0 0; background-size: calc(var(--u) * 520) calc(var(--u) * 639), auto, auto; }
    .cat-card::before, .cat-card::after { width: calc(var(--u) * 220) !important; height: calc(var(--u) * 220) !important; }
    .cat-card::before { left: calc(var(--u) * -117) !important; top: calc(var(--u) * 70) !important; }
    .cat-card::after { left: calc(50% + var(--u) * 23.5) !important; top: calc(var(--u) * -202) !important; }
    .cat-card--design { min-height: calc(var(--u) * 330); }
}

/* "Ready" CTA card (Jurey "Trust Built Into Every Decision", Stories, Hall of Fame) — design Frame 1984080750. */
section.jury-ready .jury-ready-card,
section.hall-ready .hall-ready-card {
    background:
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(180deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(180deg, #753BBD 16.91%, rgba(117,59,189,.32) 130.3%),
        #FFFFFF;
    box-shadow: 0 20px 50px rgba(117,59,189,.14);
}
section.jury-ready h2 em,
section.hall-ready h2 em { color: #D4AF37; }
section.jury-ready .jury-ready-action .pill,
section.hall-ready .hall-ready-primary { background: #fff; color: #753BBD; box-shadow: 0 4px 20px rgba(117,59,189,.32); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
section.jury-ready .jury-ready-action .pill:hover,
section.hall-ready .hall-ready-primary:hover { background: rgba(255,255,255,.9); }

/* Dropdown (design Frame 1984080982): white glass over the hero; darker glass once the header floats over page content.
   Active item = gold text on the quiet .05 glass (design); hover = brighter .14 glass + white text, so the two read differently.
   5px gap between items so neighbouring borders never merge on hover. */
.dpa-site-header .sub-menu { gap: 5px; }
@media (min-width: 80rem) {
    .dpa-site-header.is-scrolled .dpa-desktop-nav .sub-menu { background: rgba(42,10,75,.9); }
    /* Floating header: the glass bar's bottom edge is ~24px below the menu item, so the panel needs a bigger offset
       to clear it - 12px of air below the bar (2.48.99). --dd-gap also sizes the invisible hover bridge above the panel. */
    .dpa-site-header.is-scrolled .dpa-desktop-nav { --dd-gap: 36px; }
}
.dpa-site-header .sub-menu .nav-link:hover,
.dpa-site-header .sub-menu .nav-link:focus-visible { transform: none; }
.dpa-mobile-panel .menu-item-has-children { cursor: pointer; }
.dpa-mobile-panel .menu-item-has-children > .sub-menu { padding: 8px; }

/* 2.51.35: in-page links (#section ids) glide to their section instead of jumping */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------------------------------------------------------------------------
   Page transition (cross-document View Transitions API, pure CSS).
   Every same-origin navigation (link click, back/forward) animates between the
   two pages in Chrome/Edge 126+ and Safari 18.2+; other browsers load normally.
   Only the root snapshot animates: nothing else carries a view-transition-name.
   2.51.38: the old page lifts 24px and fades over 0.35s; the new page rises 32px
   into place over 0.7s from 0.2s, transform/opacity only (compositor) for smoothness. `both` fill-mode
   keeps the old page hidden after its exit and the new one hidden during the
   delay. Front-end only: style.css is enqueued on the public site, never in wp-admin.

   --------------------------------------------------------------------------- */
@view-transition {
    navigation: auto;
}

::view-transition { background-color: #0D0028; } /* brand dark behind the hand-off, never a white flash */

::view-transition-old(*),
::view-transition-new(*) {
    mix-blend-mode: normal;
    backface-visibility: hidden;
}

@keyframes page-exit {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to { opacity: 0; transform: translate3d(0, -24px, 0); }
}

@keyframes page-enter {
    from { opacity: 0; transform: translate3d(0, 32px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

::view-transition-old(root) {
    animation: page-exit 0.35s cubic-bezier(0.4, 0, 1, 1) both; /* 2.51.38: short, GPU-only (no mask repaint) */
    will-change: opacity, transform;
}

::view-transition-new(root) {
    animation: page-enter 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; /* overlaps the exit's last 0.15s for a seamless hand-off */
    will-change: opacity, transform;
}

@media (prefers-reduced-motion) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* 2.51.37: main menu hover roll - the label slides up out of view and the same label rises in from below (desktop only) */
.dpa-site-header .nav-roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; padding-block: .08em; margin-block: -.08em; }
.dpa-site-header .nav-roll-inner { position: relative; display: inline-block; transition: transform .5s cubic-bezier(.65, 0, .35, 1); }
.dpa-site-header .nav-roll-inner::after { content: attr(data-text); position: absolute; left: 0; top: calc(100% + .08em); white-space: nowrap; }
@media (hover: hover) and (min-width: 80rem) {
  .dpa-site-header .nav-link:hover .nav-roll-inner,
  .dpa-site-header .nav-link:focus-visible .nav-roll-inner { transform: translateY(calc(-100% - .08em)); }
}
@media (prefers-reduced-motion: reduce) { .dpa-site-header .nav-roll-inner { transition: none; } }

/* 2.51.42: pillar cards' "Explore →" link hidden for now on every page; delete this rule to bring it back */
.pillar-card > a.text-link, .pillar-card .text-link[href] { display: none !important; }

/* ---------------------------------------------------------------------------
   Mobile menu drawer (2.51.93, Figma "Menu screen" 375x812): 300px glass panel from the left, rounded on the right,
   over a dimmed, blurred page; MENU head with close, 24px between top-level items, sub-items 20px apart, button 52px
   from the bottom. Same #mobile-menu markup and page toggles, so every page script keeps working.
   --------------------------------------------------------------------------- */
@media (max-width: 47.99rem) {
    #mobile-menu.dpa-mobile-panel {
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 2;
        box-sizing: border-box; display: flex; flex-direction: column;
        width: min(300px, calc(100vw - 48px)); height: 100dvh; margin: 0; padding: 50px 16px 52px;
        overflow-y: auto; overscroll-behavior: contain;
        border: 0; border-right: 1px solid rgba(255,255,255,.12); border-radius: 0 20px 20px 0;
        background: rgba(255,255,255,.1);
        box-shadow: 8px 0 24px rgba(0,0,0,.24);
        -webkit-backdrop-filter: blur(37px); backdrop-filter: blur(37px);
        animation: dpa-drawer-in .35s cubic-bezier(.16,1,.3,1);
    }
    #mobile-menu.dpa-mobile-panel.hidden { display: none !important; }
    .dpa-drawer-backdrop { display: none; position: fixed; inset: 0; z-index: 1; background: rgba(20,33,61,.32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: auto; }
    #mobile-menu:not(.hidden) + .dpa-drawer-backdrop { display: block; animation: dpa-drawer-fade .3s ease; }
    .dpa-drawer-head { display: flex; flex: none; align-items: center; justify-content: space-between; height: 20px; padding-bottom: 12px; margin-bottom: 52px; border-bottom: 1px solid rgba(255,255,255,.05); box-sizing: content-box; }
    .dpa-drawer-title { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-size: 14px; line-height: 17px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
    .dpa-drawer-title svg { width: 18px; height: 18px; }
    .dpa-drawer-close { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
    .dpa-drawer-close svg { width: 20px; height: 20px; }
    #mobile-menu > ul { gap: 24px; }
    #mobile-menu > ul > li > .nav-link { padding: 0; color: #fff; font-size: 16px; line-height: 19px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }
    #mobile-menu .menu-item-has-children { row-gap: 0; }
    #mobile-menu .menu-item-has-children > .sub-menu { gap: 20px; margin-top: 20px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
    #mobile-menu .sub-menu .nav-link { min-height: 0; padding: 0; border: 0; border-radius: 0; color: rgba(255,255,255,.75); font-size: 16px; line-height: 19px; font-weight: 400; letter-spacing: -.5px; text-transform: none; transform: none; }
    #mobile-menu .sub-menu .nav-link:hover, #mobile-menu .sub-menu .nav-link:focus-visible { background: none; color: #D4AF37; }
    #mobile-menu .dpa-mobile-cta { display: flex; align-items: center; justify-content: center; flex: none; height: 44px; min-height: 44px; margin-top: auto; padding: 0 24px; background: #fff; color: #753BBD; box-shadow: 0 4px 20px rgba(62,0,152,.32); font-size: 14px; line-height: 17px; }
    #mobile-menu .dpa-mobile-cta:hover, #mobile-menu .dpa-mobile-cta:focus-visible { background: rgba(255,255,255,.9); }
    #mobile-menu > ul { margin-bottom: 40px; }
    #mobile-menu .dpa-submenu-toggle { width: 20px; height: 20px; margin: 0; color: #fff; }
    #mobile-menu .dpa-submenu-toggle > span { width: 8px; height: 8px; }
}
@keyframes dpa-drawer-in { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes dpa-drawer-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #mobile-menu.dpa-mobile-panel, .dpa-drawer-backdrop { animation: none !important; } }
@media (min-width: 48rem) { .dpa-drawer-head, .dpa-drawer-backdrop { display: none !important; } }

/* Footer (2.51.98, client): soft vertical hairline between the DPA logo and the "Powered by" DCO logo, fading out at both ends */
.dpa-footer-logo-divider { align-self: stretch; flex: none; width: 1px; margin-block: 6px; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 30%, rgba(255,255,255,.28) 70%, rgba(255,255,255,0) 100%); }
@media (min-width: 90rem) { .dpa-footer-logo-divider { margin-block: calc(var(--u,1px)*6); } }

/* Hero DCO mark (2.51.109, Figma "Group" in every hero frame): the white DCO mark at 4%, 2183.72x2687.36 at -775/-995.98,
   clipped to the hero by its wrapper so it never widens the page. */
.dpa-hero-mark-wrap { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.dpa-hero-mark { position: absolute; left: calc(var(--u,1px) * -775); top: calc(var(--u,1px) * -995.98); width: calc(var(--u,1px) * 2183.72); height: auto; max-width: none; opacity: .04; user-select: none; }

/* Pillar cards (2.51.116, client: match Figma): the v4 pillar art already carries its colour fade (Figma "Rectangle 21"),
   so the extra coloured gradient on top is dropped everywhere the cards appear (Home, Awards, Hall of Fame, Judging). */
.pillar-card::before, .jpl-card::before { display: none !important; }

/* ==== iOS Safari stability (2.51.171) ====
   iPhone reports: whole sections blank (dark/purple), the header logo a black square, sections that were fine disappearing
   when scrolling back. WebKit throws painted tiles away when compositing memory runs out and does not always repaint them,
   and its content-visibility:auto can leave a section unpainted after it scrolls back into view. */
/* content-visibility:auto (.cv) only saved some layout work - off everywhere, so nothing is ever skipped. */
html .cv { content-visibility: visible; contain-intrinsic-size: none; }
/* iPhone/iPad only (html.dpa-ios, set in header.php): */
/* the fixed header re-blurs the whole page under it on every scroll frame - a solid tint looks the same */
html.dpa-ios .dpa-site-header .dpa-header-glass,
html.dpa-ios .dpa-site-header.is-scrolled .dpa-header-glass,
html.dpa-ios .dpa-mobile-toggle,
html.dpa-ios .dpa-mobile-panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.dpa-ios .dpa-site-header.is-scrolled .dpa-header-glass { background-color: rgba(24,0,64,.96); }
html.dpa-ios .dpa-mobile-panel { background-color: rgba(22,0,47,.98) !important; }
/* decorative glows drawn with huge blur() filters become enormous GPU layers - the same soft glow as a gradient */
html.dpa-ios :is(.dpa-prizes-glow, .dpa-spotlight-glow, .mp-glow) { filter: none !important; background: radial-gradient(closest-side, rgba(208,0,111,.32), rgba(208,0,111,0)) !important; transform: scale(2.4); }
html.dpa-ios .cat-card::before { filter: none !important; background: radial-gradient(closest-side, rgba(154,77,219,.55), rgba(154,77,219,0)) !important; }
html.dpa-ios .cat-card::after { filter: none !important; background: radial-gradient(closest-side, rgba(0,179,115,.5), rgba(0,179,115,0)) !important; }
html.dpa-ios :is(.sponsor-option-cta, .nomination-categories)::before,
html.dpa-ios :is(.sponsor-option-cta, .nomination-categories)::after { filter: none !important; }
/* nothing waits on the entrance animation */
html.dpa-ios [data-motion-pending], html.dpa-ios .motion-card { opacity: 1 !important; }

/* 2.51.241: phone type scale for section heads on every page, the same as the client's phone frames (375): eyebrow 14/17
   with a 28px arrow, section title 32/38. Banners keep their own (assets/ui/hero-align.css). Text unchanged. */
@media (max-width: 39.99rem) {
    html body main section:not([class*="hero"]) :is(.eyebrow, .stories-impact-eyebrow, .in-eyebrow, .nomination-eyebrow) { gap: 8px; font-size: 14px; line-height: 17px; letter-spacing: 1px; }
    html body main section:not([class*="hero"]) :is(.eyebrow, .stories-impact-eyebrow, .in-eyebrow, .nomination-eyebrow) .eyebrow-arrow { width: 28px; }
    html body main section:not([class*="hero"]) :is(.h-section, .nomination-heading),
    html body main section#impact.stories-impact h2, html body main section.jury-ready h2 { font-size: 32px; line-height: 38px; letter-spacing: -.5px; }
}
/* 2.51.241: every in-page button on phones is the client's 44px pill (14/17, 24px sides), as in all the phone frames;
   the Partner enquiry form gets the Contact form's phone fields (14/17 labels, 44px pills with 16px padding). */
@media (max-width: 39.99rem) {
    html body main .pill.pill { min-height: 44px; height: 44px; padding-top: 0; padding-bottom: 0; padding-inline: 24px; font-size: 14px; line-height: 17px; }
    html body .sponsor-inquiry-field label { margin-bottom: 8px; font-size: 14px; line-height: 17px; }
    html body .sponsor-inquiry-field :is(input, select) { height: 44px; padding-left: 16px; padding-right: 16px; font-size: 16px; }
    html body .sponsor-inquiry-field :is(input, textarea)::placeholder { font-size: 14px; }
    html body .sponsor-inquiry-field textarea { padding: 12px 16px; }
    html body .sponsor-inquiry-field select { padding-right: 40px; background-position: right 16px center; }
    html body .sponsor-inquiry-field .dpa-dd-button { height: 44px; padding: 0 40px 0 16px; background-position: right 16px center; font-size: 14px; line-height: 17px; }
    html body .sponsor-inquiry-field .cf-phone { height: 44px; }
}
/* 2.51.241: "Intro" block (Nominate) on phones: links 16px under the label on one row, without the divider. */
@media (max-width: 39.99rem) {
    html body #intro .intro-links { margin-top: 16px; column-gap: 16px; row-gap: 8px; }
    html body #intro .intro-links > span[aria-hidden="true"] { display: none; }
}

/* 2.6.23: client: on phones and tablets the floating header covered the title of any section opened
   from a menu or footer link (/page#section). Every anchor target stops below it instead: 96px on phones, 116px on
   tablets (header bottom ~102px). Elements other than these (list options, form fields) keep their own scrolling. */
@media (max-width: 63.99rem) {
  html body :is(section, div, span, article, aside, main, h1, h2, h3, h4, p)[id] { scroll-margin-top: 116px !important; }
}
@media (max-width: 39.99rem) {
  html body :is(section, div, span, article, aside, main, h1, h2, h3, h4, p)[id] { scroll-margin-top: 96px !important; }
}