/* =========================================================
   SCITECH 2027 / ICASE T-2027
   Chennai Hero Homepage
   ========================================================= */

:root {
    --navy: #031333;
    --navy-dark: #020d27;
    --blue: #073a9d;
    --blue-bright: #1265e8;
    --orange: #ff5b0a;
    --orange-light: #ff7c2c;
    --white: #ffffff;
    --muted: #000;
    --line: #dfe6f0;
    --soft: #f4f7fb;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Inter", sans-serif;
    color: #10213b;
    background: #fff;
}

h1,
h2,
h3,
h4 {
    font-family: "Sora", sans-serif;
}

a {
    transition: .25s ease;
}

/* =========================================================
   TOP STRIP
   ========================================================= */

.top-strip {
    background: #020d27;
    color: #b9c8dd;
    font-size: 11px;
    letter-spacing: .04em;
    padding: 4px 0;
}

.top-strip-inner {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.top-strip i {
    color: var(--orange);
}

.top-center {
    color: #fff;
    font-weight: 700;
}

.top-center span {
    display: inline-block;
    width: 28px;
    height: 1px;
    background: var(--orange);
    margin: 0 8px 3px;
}

/* Contact details on the left of the strip */

.top-contact {
    display: flex;
    align-items: center;
    gap: 18px;
}

.top-contact a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #b9c8dd;
    text-decoration: none;
    white-space: nowrap;
    transition: color .25s ease;
}

.top-contact a:hover {
    color: #fff;
}

/* Social links on the right of the strip */

.top-social {
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-social a {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    color: #b9c8dd;
    font-size: 12px;
    text-decoration: none;
    transition: .25s ease;
}

/* The strip paints every icon orange - the social glyphs follow their link instead */
.top-social a i {
    color: inherit;
}

.top-social a:hover {
    color: #fff;
    background: var(--orange);
    border-color: var(--orange);
}

/* =========================================================
   NAVIGATION
   ========================================================= */

.site-nav {
    background:rgb(246 248 253);
    padding: 6px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: .3s ease;
}

.site-nav.nav-scrolled {
    box-shadow: 0 12px 35px rgba(0, 0, 0, .25);
    backdrop-filter: blur(15px);
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff !important;
    text-decoration: none;
}

.brand-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--orange), #ff8c42);
    font: 800 23px "Sora";
    box-shadow: 0 8px 25px rgba(255, 91, 10, .28);
}

.brand-text strong {
    display: block;
    font: 800 19px "Sora";
}

.brand-text strong b {
    color: var(--orange);
}

.brand-text small {
    display: block;
    margin-top: 5px;
    color: #8fa3c1;
    font-size: 8px;
    letter-spacing: .22em;
}

.nav-link {
    color: #000 !important;
    font-size: 15px;
    font-weight: 600;
    padding: 9px 12px !important;
}

.nav-link:hover,
.nav-link.active {
    color: #ff5b0a !important;
}

.nav-register {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 7px;
    background: var(--orange);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}

.nav-register:hover {
    background: var(--orange-light);
    color: #fff;
    transform: translateY(-2px);
}

/* Dropdowns */

.nav-item.dropdown .nav-link:after {
    margin-left: 6px;
    vertical-align: 1px;
    border-top-color: currentColor;
}

.nav-dropdown {
    min-width: 246px;
    padding: 8px;
    margin-top:0px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    background: rgba(3,19,51,.98);
    backdrop-filter: blur(14px);
    box-shadow: 0 22px 48px rgba(0,0,0,.35);
}

.nav-dropdown .dropdown-item {
    padding: 10px 13px;
    border-radius: 8px;
    color: #bdcbe0;
    font-size: 13px;
    font-weight: 600;
    white-space: normal;
}

.nav-dropdown .dropdown-item:hover,
.nav-dropdown .dropdown-item:focus {
    background: rgba(255,91,10,.15);
    color: #fff;
}

/* Opens on hover at desktop widths, still clickable */
@media (min-width: 992px) {
    .nav-item.dropdown:hover > .nav-dropdown {
        display: block;
    }
}

/* Mobile */

.mobile-menu {
    background: var(--navy);
    color: #fff;
}

.mobile-group {
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.mobile-group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border: 0;
    background: none;
    color: #d5e0ef;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
}

.mobile-group-toggle i {
    color: var(--orange);
    font-size: 13px;
    transition: .3s ease;
}

.mobile-group-toggle:not(.collapsed) {
    color: #fff;
}

.mobile-group-toggle:not(.collapsed) i {
    transform: rotate(180deg);
}

.mobile-sub {
    padding: 2px 0 14px 14px;
    border-left: 1px solid rgba(255,91,10,.35);
    margin-left: 4px;
}

/* Not direct children of .offcanvas-body, so the base link styling misses them */
.mobile-menu .mobile-sub > a {
    display: block;
    padding: 10px 0;
    border-bottom: 0;
    color: #9db1cc;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.mobile-menu .mobile-sub > a:hover {
    color: var(--orange);
}

.mobile-brand {
    font: 800 20px "Sora";
}

.mobile-brand span {
    color: var(--orange);
}

.mobile-menu .offcanvas-body {
    display: flex;
    flex-direction: column;
}

.mobile-menu .offcanvas-body > a {
    color: #d5e0ef;
    text-decoration: none;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-weight: 700;
}

.mobile-register {
    background: var(--orange);
    border-radius: 8px;
    text-align: center;
    margin-top: 20px;
}

/* =========================================================
   HERO
   ========================================================= */

.chennai-hero {
    /* Shared by the ICASET card and the countdown under it - both are anchored
       to the same right edge, so a single width keeps them flush. */
    --side-card-w: 350px;
    position: relative;
    min-height: 845px;
    overflow: hidden;
    background: var(--navy);
    isolation: isolate;
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: -10;
    overflow: hidden;
}

.hero-background img {
    position: absolute;
    left: 0;
    /* The photo is only 1747x900, so every extra percent of box height is an
       extra percent of enlargement - which reads as blur. The box is sized to
       the parallax limit (110px each way) and no larger: 128% of an ~810px
       hero leaves the travel its room while holding the enlargement near 15%,
       down from the ~44% a 160% box forced. */
    top: -14%;
    width: 100%;
    height: 128%;
    object-fit: cover;
    object-position: center;
    /* translate carries the parallax; transform stays free for the zoom */
    translate: 0 var(--py, 0px);
    transform: scale(1.01);
    animation: bannerZoom 18s ease-in-out infinite alternate;
}

/* A gentler zoom, for the same reason */
@keyframes bannerZoom {
    0% {
        transform: scale(1.01);
    }

    100% {
        transform: scale(1.04);
    }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -8;
    background:
        linear-gradient(
            90deg,
            rgba(2, 14, 42, .38) 0%,
            rgba(2, 14, 42, .10) 50%,
            rgba(2, 14, 42, .30) 100%
        );
}

.hero-blue-glow {
    position: absolute;
    z-index: -7;
    width: 500px;
    height: 500px;
    right: -180px;
    top: -150px;
    border-radius: 50%;
    background: #1265e8;
    filter: blur(110px);
    opacity: .20;
    animation: blueMove 9s ease-in-out infinite;
}

.hero-orange-glow {
    position: absolute;
    z-index: -7;
    width: 350px;
    height: 350px;
    left: -160px;
    bottom: 60px;
    border-radius: 50%;
    background: var(--orange);
    filter: blur(110px);
    opacity: .18;
    animation: orangeMove 8s ease-in-out infinite;
}

@keyframes blueMove {
    50% {
        transform: translate(-70px, 50px);
        opacity: .32;
    }
}

@keyframes orangeMove {
    50% {
        transform: translate(70px, -50px);
        opacity: .28;
    }
}

/* Fine grid */

.hero-grid {
    position: absolute;
    inset: 0;
    z-index: -6;
    opacity: .12;
    background-image:
        linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
    background-size: 65px 65px;
    mask-image: linear-gradient(to right, #000, transparent 80%);
}

/* Particles */

.particles {
    position: absolute;
    inset: 0;
    z-index: -4;
    pointer-events: none;
}

.particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 14px rgba(50,140,255,.9);
    opacity: 0;
    animation: particleUp 8s linear infinite;
}

.particles span:nth-child(1) { left: 8%; top: 70%; animation-delay: 0s; }
.particles span:nth-child(2) { left: 17%; top: 45%; animation-delay: 1s; }
.particles span:nth-child(3) { left: 28%; top: 78%; animation-delay: 2s; }
.particles span:nth-child(4) { left: 37%; top: 25%; animation-delay: 3s; }
.particles span:nth-child(5) { left: 49%; top: 67%; animation-delay: 1.5s; }
.particles span:nth-child(6) { left: 57%; top: 35%; animation-delay: 4s; }
.particles span:nth-child(7) { left: 66%; top: 75%; animation-delay: 2.4s; }
.particles span:nth-child(8) { left: 74%; top: 27%; animation-delay: 5s; }
.particles span:nth-child(9) { left: 83%; top: 60%; animation-delay: 3.2s; }
.particles span:nth-child(10) { left: 91%; top: 42%; animation-delay: 6s; }
.particles span:nth-child(11) { left: 14%; top: 18%; animation-delay: 4.3s; }
.particles span:nth-child(12) { left: 43%; top: 53%; animation-delay: 2.1s; }
.particles span:nth-child(13) { left: 71%; top: 50%; animation-delay: 5.2s; }
.particles span:nth-child(14) { left: 94%; top: 78%; animation-delay: 1.8s; }
.particles span:nth-child(15) { left: 31%; top: 46%; animation-delay: 6.5s; }
.particles span:nth-child(16) { left: 60%; top: 15%; animation-delay: 3.8s; }

@keyframes particleUp {
    0% {
        transform: translateY(45px) scale(.4);
        opacity: 0;
    }

    25% {
        opacity: .7;
    }

    75% {
        opacity: .5;
    }

    100% {
        transform: translateY(-110px) scale(1.15);
        opacity: 0;
    }
}

/* Hero content */

.hero-container {
    position: relative;
    z-index: 3;
    min-height: 620px;
    display: flex;
    align-items: center;
}

.hero-content {
    max-width: 790px;
    padding: 65px 0 145px;
}

.hero-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}

.label-line {
    width: 35px;
    height: 2px;
    background: var(--orange);
}

.hero-date {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 25px;
    color: #fff;
}

.hero-date i {
    color: var(--orange);
    font-size: 26px;
}

.hero-date span {
    font: 800 26px "Sora";
}

.hero-date small {
    font-size: 10px;
    color: #a9b9d1;
    letter-spacing: .18em;
}

.hero-content h1 {
    margin: 10px 0 0;
    font: 800 clamp(72px, 5vw, 135px) / .86 "Sora";
    letter-spacing: -1.5px;
    color: #fff;
    text-shadow: 0 15px 50px rgba(0, 0, 0, .18);
    margin-top: 38px;
}

.hero-content h1 strong {
    color: var(--orange);
    font-weight: 800;
}

.hero-edition {
    margin-top: 23px;
    max-width: 790px;
    color: #fff;
    font: 700 23px/1.45 "Sora";
}

.hero-edition span {
    color: var(--orange);
}

.hero-theme {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-top: 28px;
}

.theme-icon {
    width: 55px;
    height: 55px;
    flex: 0 0 55px;
    border: 2px solid var(--orange);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--orange);
    font-size: 23px;
    animation: iconPulse 3s ease-in-out infinite;
}

@keyframes iconPulse {
    50% {
        box-shadow: 0 0 0 10px rgba(255,91,10,.08);
    }
}

.hero-theme small {
    display: block;
    color: var(--orange);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
}

.hero-theme strong {
    display: block;
    color: #fff;
    font-size: 17px;
    line-height: 1.35;
}

.hero-theme em {
    color: var(--orange);
    font-style: normal;
}

.hero-place {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 23px;
    color: #fff;
}

.hero-place i {
    color: var(--orange);
    font-size: 24px;
}

.hero-place strong {
    font-size: 20px;
}

.hero-place span {
    width: 40px;
    height: 2px;
    background: var(--orange);
}

.hero-place small {
    color: #b2c1d7;
    font-size: 10px;
    letter-spacing: .12em;
}

.hero-organiser {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    padding: 8px 15px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(3,19,51,.42);
    backdrop-filter: blur(8px);
    color: #cfdcf0;
    font-size: 12.5px;
}

.hero-organiser i { color: var(--orange); font-size: 14px; }

.hero-organiser strong {
    color: #fff;
    font: 700 13.5px "Sora", sans-serif;
}

/* Countdown to the first conference day */
.hero-countdown {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.hero-countdown > div {
    min-width: 72px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 12px;
    background: rgb(3 18 53);
    backdrop-filter: blur(10px);
    text-align: center;
}

.hero-countdown b {
    display: block;
    color: #fff;
    font: 800 24px/1 "Sora", sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.hero-countdown small {
    display: block;
    margin-top: 5px;
    color: #9fb3d0;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

@media (max-width: 575px) {
    .hero-countdown { gap: 7px; }

    .hero-countdown > div {
        flex: 1 1 0;
        min-width: 0;
        padding: 9px 6px;
    }

    .hero-countdown b { font-size: 19px; }
    .hero-countdown small { font-size: 8.5px; letter-spacing: .1em; }
}

.hero-actions {
    display: flex;
    gap: 10px;
    margin-top: 28px;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 20px;
    border-radius: 7px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    transition: .3s ease;
}

.hero-btn:hover {
    transform: translateY(-3px);
}

.hero-btn.primary {
    background: var(--orange);
    color: #fff;
    box-shadow: 0 12px 32px rgba(255,91,10,.32);
}

.hero-btn.primary:hover {
    background: var(--orange-light);
    color: #fff;
    box-shadow: 0 17px 38px rgba(255,91,10,.42);
}

.hero-btn.secondary {
    color: #fff;
    border: 1px solid rgba(255,255,255,.42);
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(8px);
}

.hero-btn.secondary:hover {
    background: #fff;
    color: var(--navy);
}

/* Right column: the ICASET card with the countdown under it. A flex item of
   .hero-container (display:flex; align-items:center), so it is centred
   vertically against the copy by the flexbox itself - no bottom offsets that
   have to be re-tuned whenever the banner height changes. */
.hero-side {
    flex: none;
    width: var(--side-card-w);
    margin-left: auto;
    /* .hero-content carries 65px of padding above its text and 145px below,
       so centring on the box would sit 40px low against the words. An 80px
       bottom margin lifts the centre onto the text itself. */
    margin-bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hero-side-card {
    position: relative;
    width: 100%;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px;
    background: rgba(3,19,51,.62);
    backdrop-filter: blur(16px);
    box-shadow: 0 25px 60px rgba(0,0,0,.30);
    color: #fff;
    animation: sideCardFloat 5s ease-in-out infinite;
}

/* Two copies of the countdown are rendered: one in the side column, one in
   the copy. The side one is the countdown from 992px up; below that the side
   column is hidden and the copy's takes over. */
.hero-countdown.is-side { display: none; }

@media (min-width: 992px) {
    .hero-countdown.is-inline { display: none; }

    .hero-countdown.is-side {
        display: flex;
        margin-top: 0;
        gap: 8px;
    }

    .hero-countdown.is-side > div {
        flex: 1 1 0;
        min-width: 0;
        padding: 10px 4px;
    }

    .hero-countdown.is-side b { font-size: 20px; }

    .hero-countdown.is-side small {
        margin-top: 5px;
        font-size: 8.5px;
        letter-spacing: .08em;
    }
}


@keyframes sideCardFloat {
    50% {
        transform: translateY(-9px);
    }
}

.side-card-top span,
.side-location small {
    display: block;
    color: #91a7c5;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .16em;
}

.side-card-top strong {
    display: block;
    margin-top: 5px;
    font: 800 19px "Sora";
}

.side-card-line {
    height: 1px;
    margin: 18px 0;
    background: rgba(255,255,255,.12);
}

.side-location {
    display: flex;
    gap: 12px;
    margin: 16px 0;
}

.side-location > i {
    color: var(--orange);
    font-size: 20px;
}

.side-location strong {
    display: block;
    font-size: 14px;
    line-height: 1.35;
}

.side-location span {
    display: block;
    margin-top: 4px;
    color: #9eb0c9;
    font-size: 10px;
    line-height: 1.55;
}

.side-card-bottom {
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: 15px;
    margin-top: 16px;
}

.side-card-bottom span {
    display: block;
    color: #fff;
    font-size: 8px;
    letter-spacing: .13em;
}

.side-card-bottom b {
    color: var(--orange);
    font-size: 11px;
}

/* Bottom ribbon */

.hero-ribbon {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 92px;
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr 1.2fr 1.15fr 1.4fr;
    background: rgba(2,17,52,.95);
    border-top: 1px solid rgba(255,255,255,.1);
    z-index: 6;
}

.ribbon-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #fff;
    border-right: 1px solid rgba(255,255,255,.12);
    position: relative;
    overflow: hidden;
}

.ribbon-item:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.08) 50%, transparent 80%);
    transform: translateX(-120%);
    animation: ribbonShine 7s ease-in-out infinite;
}

.ribbon-item:nth-child(2):after { animation-delay: 1s; }
.ribbon-item:nth-child(3):after { animation-delay: 2s; }
.ribbon-item:nth-child(4):after { animation-delay: 3s; }
.ribbon-item:nth-child(5):after { animation-delay: 4s; }

@keyframes ribbonShine {
    0%, 55%, 100% { transform: translateX(-120%); }
    75% { transform: translateX(120%); }
}

.ribbon-item.orange {
    background: linear-gradient(135deg, #ff5b0a, #ff6d14);
}

.ribbon-item i {
    font-size: 28px;
}

.ribbon-item span {
    font: 800 12px/1.2 "Sora";
}

.ribbon-message {
       display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 25px;
    background: #f5f6f8;
    border-bottom: 4px solid #061536;
}

.ribbon-message small {
    color: var(--navy);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.ribbon-message strong {
    color: var(--orange);
    font-size: 13px;
}

/* Progress */

.hero-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 12;
    background: rgba(255,255,255,.12);
}

.hero-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--orange), #ff9d68, var(--orange));
    box-shadow: 0 0 15px rgba(255,91,10,.8);
    animation: progress 9s linear infinite;
}

@keyframes progress {
    from { width: 0; }
    to { width: 100%; }
}

/* =========================================================
   QUICK INFO
   ========================================================= */

.quick-info {
    position: relative;
    z-index: 20;
    margin-top: -35px;
}

.quick-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(3,19,51,.13);
    overflow: hidden;
}

.quick-card {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 105px;
    padding: 18px 20px;
    border-right: 1px solid var(--line);
}

.quick-card:last-child {
    border-right: 0;
}

.quick-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff0e8;
    color: var(--orange);
}

.quick-card small {
    display: block;
    color: #8794a8;
    font-size: 8px;
    letter-spacing: .12em;
    font-weight: 800;
}

.quick-card strong {
    display: block;
    margin-top: 4px;
    color: var(--navy);
    font-size: 13px;
}

.quick-card.highlight {
    background: var(--orange);
    color: #fff;
    justify-content: space-between;
}

.quick-card.highlight small,
.quick-card.highlight strong {
    color: #fff;
}

.quick-card.highlight a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--orange);
    background: #fff;
    text-decoration: none;
}

/* =========================================================
   GENERAL CONTENT
   ========================================================= */

.content-section {
    padding: 70px 0 40px;
}

.section-heading {
    max-width: 850px;
    margin-bottom: 45px;
}

.section-heading > span {
    color: var(--orange);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .17em;
}

.section-heading h2 {
    margin: 12px 0;
    color: var(--navy);
    font: 800 clamp(37px, 3.5vw, 45px) / 1.05 "Sora";
    letter-spacing: -.02em;
    text-transform: uppercase;
}

.section-heading h2 em {
    color: var(--orange);
    font-style: normal;
}

.section-heading p {
    color: #000000;
    line-height: 1.8;
    font-size: 16px;
}

/* About */

.about-layout {
    display: grid;
    grid-template-columns: 1.5fr .7fr;
    border-radius: 20px;
    overflow: hidden;
    background: var(--soft);
}

.about-main-card {
    padding: 55px;
}

.card-number {
    color: #d8e1ec;
    font: 800 90px/.7 "Sora";
}

.about-main-card h3 {
    margin-top: 35px;
    color: var(--navy);
    font: 800 31px/1.15 "Sora";
}

.about-main-card p {
    max-width: 670px;
    color: var(--muted);
    line-height: 1.8;
}

.content-link {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-top: 15px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.content-link:hover {
    color: var(--orange);
}

.about-stats {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    background: var(--navy);
}

.about-stats div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.about-stats div:last-child {
    border-bottom: 0;
}

.about-stats strong {
    color: var(--orange);
    font: 800 43px "Sora";
}

.about-stats span {
    color: #c2d0e2;
    font-size: 11px;
    line-height: 1.35;
}

/* =========================================================
   WELCOME
   ========================================================= */

.welcome-section {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.welcome-inner {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 60px;
    align-items: center;
}

.eyebrow {
    display: inline-block;
    color: var(--orange);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .17em;
}

.welcome-copy h2 {
    margin: 12px 0 20px;
    color: var(--navy);
    font: 800 clamp(34px, 3.6vw, 50px)/1.08 "Sora";
    letter-spacing: -.045em;
}

.welcome-copy h2 em {
    color: var(--orange);
    font-style: normal;
}

.welcome-copy > p {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.85;
}

.welcome-copy strong {
    color: var(--navy);
    font-weight: 700;
}

.welcome-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 30px 0;
}

.welcome-points > div {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.welcome-points i {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff0e8;
    color: var(--orange);
    font-size: 16px;
}

.welcome-points span {
    color: var(--navy);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

/* Three narrow cards do not survive a phone - stack them */
@media (max-width: 575px) {
    .welcome-points { grid-template-columns: 1fr; }
}


/* Right visual */

.welcome-visual {
    position: relative;
    padding: 22px 22px 0 0;
}

.welcome-visual:before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 62%;
    height: 62%;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(18,101,232,.13), rgba(255,91,10,.13));
}

/* Speaker orb with stat pills floating around it */
.welcome-orb {
    position: relative;
    width: 78%;
    margin: 0 auto;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(160deg, var(--blue), #04102e);
    box-shadow: 0 26px 60px rgba(3,19,51,.22);
}

.welcome-orb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
}

.welcome-stat {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px 11px 12px;
    border-radius: 40px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(3,19,51,.16);
    white-space: nowrap;
}

.welcome-stat-icon {
    width: 38px;
    height: 38px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--orange);
    color: #fff;
    font-size: 16px;
}

.welcome-stat:nth-child(odd) .welcome-stat-icon {
    background: var(--blue);
}

.welcome-stat b {
    display: block;
    color: var(--navy);
    font: 800 19px/1 "Sora";
}

.welcome-stat small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

/* Two pills sit left, two right, staggered like the reference */
.welcome-stat.s1 { left: -6%;  top: 24%; }
.welcome-stat.s2 { left: 2%;   top: 58%; }
.welcome-stat.s3 { right: -6%; top: 41%; }
.welcome-stat.s4 { right: 1%;  top: 74%; }

.welcome-frame {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(3,19,51,.20);
}

.welcome-frame img {
    display: block;
    width: 100%;
    aspect-ratio: 16/11;
    object-fit: cover;
    transition: .6s ease;
}

.welcome-frame:hover img {
    transform: scale(1.05);
}

.welcome-frame-tag {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;
    background: rgba(3,19,51,.82);
    backdrop-filter: blur(10px);
    color: #fff;
}

.welcome-frame-tag i {
    color: var(--orange);
    font-size: 20px;
}

.welcome-frame-tag small {
    display: block;
    color: #93a7c2;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .14em;
}

.welcome-frame-tag strong {
    display: block;
    margin-top: 3px;
    font-size: 14px;
}

.welcome-badge {
    position: absolute;
    right: 0;
    top: 0;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    align-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--orange), #ff8c42);
    color: #fff;
    box-shadow: 0 14px 34px rgba(255,91,10,.35);
    animation: sideCardFloat 5s ease-in-out infinite;
}

.welcome-badge strong {
    font: 800 32px/1 "Sora";
}

.welcome-badge sup {
    font-size: 14px;
}

.welcome-badge span {
    margin-top: 4px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .16em;
}

.welcome-chip {
    position: absolute;
    left: -18px;
    bottom: -22px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(3,19,51,.14);
    color: var(--navy);
    font-size: 11px;
    font-weight: 800;
}

.welcome-chip i {
    color: var(--orange);
    font-size: 15px;
}

/* =========================================================
   ABOUT + OBJECTIVES
   ========================================================= */

.about-section {
    padding: 20px 0 0;
}

.about-section .section-heading {
    max-width: 87%;
    margin: 0 auto 55px;
    text-align: center;
}

.objectives-band {
    padding: 60px 0 70px;
    background:
        radial-gradient(circle at 12% 20%, rgba(18,101,232,.07), transparent 45%),
        radial-gradient(circle at 88% 80%, rgba(255,91,10,.07), transparent 45%),
        #eff4fd;
}

/* Heading sits beside its rule, not above it */
.objectives-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    margin-bottom: 55px;
}

.objectives-title h3 {
    margin: 0;
    color: var(--navy);
    font: 800 clamp(23px, 2.2vw, 29px) "Sora";
    letter-spacing: -.02em;
}

.objectives-rule {
    width: clamp(70px, 10vw, 130px);
    height: 2px;
    background: var(--orange);
}

.objectives-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.objective-item {
    --accent: var(--blue-bright);
    text-align: center;
        background: #ffffffa1;
    border-radius: 25px;
        padding: 1px 0 10px;
}

.objective-item.orange {
    --accent: var(--orange);
}

.objective-ring {
    position: relative;
    width: 95px;
    height: 95px;
    margin: 12px auto 12px;
    display: grid;
    place-items: center;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: #fff;
    color: var(--accent);
    transition: .3s ease;
}

.objective-ring svg {
    width: 52px;
    height: 52px;
}

.objective-item:hover .objective-ring {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(3,19,51,.14);
}

.objective-ring b {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: var(--accent);
    color: #fff;
    font: 800 12px "Sora";
    letter-spacing: .02em;
}

.objective-item p {
    max-width: 205px;
    margin: 0 auto;
    color: #233350;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.55;
}

/* =========================================================
   SDG ALIGNMENT
   ========================================================= */

.sdg-section {
    position: relative;
    padding: 90px 0 70px;
    overflow: hidden;
    isolation: isolate;
        background: radial-gradient(circle at 90% 10%, rgba(18, 101, 232, .25), transparent 30%), var(--navy);
    /* background: radial-gradient(circle at 15% 0%, rgba(18, 101, 232, .30), transparent 42%), radial-gradient(circle at 85% 100%, rgba(255, 91, 10, .16), transparent 40%), linear-gradient(180deg, #041a44, #020d27); */
    color: #fff;
    /* background:
        radial-gradient(circle at 15% 0%, rgba(18,101,232,.30), transparent 42%),
        radial-gradient(circle at 85% 100%, rgba(255,91,10,.16), transparent 40%),
        linear-gradient(180deg, #041a44, #020d27); */
    color: #fff;
}

/* ---- Light copy of the section ---- */

.sdg-section.light {
    background: #f6f8fd;
    color: var(--navy);
}

.sdg-section.light .sdg-wheel {
    opacity: .16;
}

.sdg-section.light .sdg-photo {
    opacity: .16;
    mix-blend-mode: normal;
}

.sdg-section.light .sdg-head h2 {
    color: var(--navy);
}

.sdg-section.light .sdg-head p {
    color: #000000;
}

.sdg-section.light .sdg-card {
    border-color: var(--line);
    background: radial-gradient(circle at 90% 10%, rgba(18,101,232,.25), transparent 30%),        var(--navy);
    box-shadow: 0 10px 30px rgba(3,19,51,.06);
}

.sdg-section.light .sdg-card:hover {
    box-shadow: 0 22px 50px rgba(3,19,51,.14);
}

.sdg-section.light .sdg-card h3 {
    color: #ffffff;
}

.sdg-section.light .sdg-arrow {
    border-color: var(--line);
    background: #fff;
    color: var(--navy);
}

.sdg-section.light .sdg-arrow:hover:not(:disabled) {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}

/* Optional photo backdrop, blended like the why-attend section */
.sdg-photo {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .32;
    mix-blend-mode: luminosity;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 22%, transparent 78%);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 22%, transparent 78%);
    pointer-events: none;
}

/* Fallback backdrop: the official 17-goal colour wheel, generated in PHP */
.sdg-wheel {
    position: absolute;
    z-index: -1;
    width: 560px;
    right: -150px;
    top: -140px;
    opacity: .12;
    pointer-events: none;
    animation: sdgSpin 90s linear infinite;
}

.sdg-wheel.small {
    width: 300px;
    right: auto;
    left: -90px;
    top: auto;
    bottom: -90px;
    opacity: .09;
    animation-duration: 70s;
    animation-direction: reverse;
}

.sdg-wheel svg {
    display: block;
    width: 100%;
    height: auto;
}

@keyframes sdgSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sdg-wheel {
        animation: none;
    }
}

.sdg-head {
    max-width: 1060px;
    margin: 0 auto 45px;
    text-align: center;
}

.sdg-head h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 0 16px;
    color: #fff;
    font: 800 clamp(26px, 3vw, 38px) "Sora";
    letter-spacing: -.02em;
}

.sdg-head h2 em {
    color: var(--orange);
    font-style: normal;
}

.sdg-leaf {
    width: .78em;
    height: .78em;
    flex: none;
    fill: #35c39a;
}

.sdg-leaf.flip {
    transform: scaleX(-1);
}

.sdg-head p {
    margin: 0;
    color: #a9bdd9;
    font-size: 15px;
    line-height: 1.8;
}

.sdg-rail-wrap {
    position: relative;
    padding: 0 60px;
}

.sdg-rail {
    display: flex;
    gap: 16px;
    padding: 6px 4px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.sdg-rail:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 6px;
    border-radius: 18px;
}

.sdg-rail.is-dragging {
    scroll-behavior: auto;
    cursor: grabbing;
    user-select: none;
}

.sdg-rail::-webkit-scrollbar {
    display: none;
}

.sdg-card {
    --accent: var(--blue-bright);
    position: relative;
    flex: 0 0 265px;
    display: flex;
    flex-direction: column;
    padding: 30px 20px 20px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: linear-gradient(165deg, rgba(11,44,102,.85), rgba(4,20,54,.85));
    scroll-snap-align: start;
    transition: .3s ease;
}

.sdg-card.orange {
    --accent: var(--orange);
}

.sdg-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow: 0 22px 50px rgba(0,0,0,.35);
}

.sdg-card-no {
    position: absolute;
    top: 0;
    left: 18px;
    min-width: 34px;
    padding: 6px 8px 7px;
    border-radius: 0 0 8px 8px;
    background: var(--accent);
    color: #fff;
    text-align: center;
    font: 800 12px "Sora";
}

.sdg-card-icon {
    display: block;
    margin: 14px 0 16px;
    color: var(--accent);
    font-size: 34px;
}

.sdg-card h3 {
    margin: 0 0 20px;
    color: #fff;
    font: 700 14.5px/1.45 "Sora";
}

.sdg-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: auto;
}

.sdg-tile {
    position: relative;
    flex: 1 1 52px;
    min-width: 0;
    min-height: 66px;
    padding: 7px 8px 9px;
    border-radius: 5px;
    background: var(--sdg-color);
    color: #fff;
    overflow: hidden;
}

.sdg-tile b {
    display: block;
    padding-right: 18px;
    font: 800 15px/1 "Sora";
}

.sdg-tile span {
    display: block;
    margin-top: 4px;
    font-size: 7px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sdg-tile i {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 14px;
    opacity: .55;
}

/* Hidden until the rail is hovered, so the resting state matches the artwork */
.sdg-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    background: rgba(3,19,51,.85);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 19px;
    cursor: pointer;
    opacity: 0;
    transition: .25s ease;
}

.sdg-rail-wrap:hover .sdg-arrow,
.sdg-rail-wrap:focus-within .sdg-arrow {
    opacity: 1;
}

.sdg-arrow.prev {
    left: 8px;
}

.sdg-arrow.next {
    right: 8px;
}

.sdg-arrow:hover:not(:disabled) {
    background: var(--orange);
    border-color: var(--orange);
}

.sdg-rail-wrap:hover .sdg-arrow:disabled,
.sdg-rail-wrap:focus-within .sdg-arrow:disabled {
    opacity: .25;
    cursor: default;
}

/* =========================================================
   DATES
   ========================================================= */

.dates-section {
    padding: 100px 0;
    background:
        radial-gradient(circle at 90% 10%, rgba(18,101,232,.25), transparent 30%),
        var(--navy);
    color: #fff;
    margin-bottom: 50px;
}

.section-heading.light h2 {
    color: #fff;
}

.section-heading.light p {
    color: #aebed4;
}

.dates-section {
    position: relative;
    overflow: hidden;
}

.dates-section:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 260px;
    height: 100%;
    opacity: .30;
    background-image: radial-gradient(rgba(255,255,255,.42) 1.4px, transparent 1.4px);
    background-size: 18px 18px;
    mask-image: linear-gradient(to right, #000, transparent);
}

.dates-head {
    position: relative;
    margin-bottom: 60px;
    text-align: center;
}

.dates-head h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin: 0 0 12px;
    color: #ffffff;
    font: 800 clamp(28px, 3.4vw, 38px) "Sora";
    letter-spacing: -.01em;
}

.dates-head h2 em {
    color: var(--orange);
    font-style: normal;
}

.head-line {
    position: relative;
    width: clamp(60px, 12vw, 150px);
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--orange));
}

.head-line:after {
    content: "";
    position: absolute;
    right: -3px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange);
}

.dates-head h2 .head-line:last-child {
    transform: scaleX(-1);
}

.dates-head p {
    margin: 0;
    color: #b6c7de;
    font-size: 15px;
}

.dates-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Icons are centred on their card, so the line spans centre-to-centre:
   a column is (100% - 3 gaps) / 4, and each end stops half a column in. */
.dates-timeline:before {
    content: "";
    position: absolute;
    top: 13px;
    left: calc((100% - 72px) / 8);
    right: calc((100% - 72px) / 8);
    border-top: 2px dotted rgb(255 255 255);
}

.date-node {
    position: relative;
}

.date-node:not(:last-child):after {
    content: "";
       position: absolute;
    top: 6px;
    right: -19px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 4px rgba(255, 91, 10, .18);
}

.date-icon {
    position: relative;
    z-index: 2;
    width: 74px;
    height: 74px;
    margin: 0 auto;
    display: grid;
    place-items: center;
    border: 2px solid var(--orange);
    border-radius: 50%;
    background: #ffffff;
    color: var(--orange);
    font-size: 30px;
    transition: .3s ease;
    position: relative;
    top: -20px;
}

.date-card {
    position: relative;
    margin-top: -30px;
    padding: 46px 22px 22px;
    border: 1px solid rgb(164 164 164);
    border-radius: 16px;
    background: rgba(255,255,255,.045);
    transition: .3s ease;
}

.date-node:hover .date-card {
    border-color: rgba(255,91,10,.55);
    background: rgba(255,255,255,.07);
}

.date-node:hover .date-icon {
    box-shadow: 0 0 0 8px rgba(255,91,10,.10);
}

.date-card-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.date-card-head b {
    color: var(--orange);
    font: 800 38px/.85 "Sora";
    letter-spacing: -.04em;
}

.date-card-head h3 {
    margin: 0;
    color: #ffffff;
    font: 800 15px/1.35 "Sora";
    letter-spacing: .01em;
    text-transform: uppercase;
}

.date-rule {
    display: block;
    width: 52px;
    height: 3px;
    margin: 14px 0 20px;
    border-radius: 3px;
    background: var(--orange);
}

.date-when {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #ffffff;
    font-size: 15px;
}

.date-when i {
    color: #ff5b0a;
    font-size: 20px;
}

/* =========================================================
   CALL FOR PAPERS
   ========================================================= */

.cfp-section {
    position: relative;
    padding: 10px 0 50px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 100%, rgba(18,101,232,.08), transparent 55%),
        #f7f9fe;
}

.cfp-section:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 240px;
    opacity: .5;
    background-image: radial-gradient(rgba(7,58,157,.20) 1.2px, transparent 1.2px);
    background-size: 16px 16px;
    mask-image: linear-gradient(to top, #000, transparent);
}

.cfp-section .container {
    position: relative;
    z-index: 1;
}

.cfp-head {
    max-width: 1000px;
    margin: 0 auto 45px;
    text-align: center;
}

/* CALL FOR PAPERS now outsizes the line under it, so it reads as the section
   title and 'Explore. Innovate. Make an Impact.' as its subtitle. At this size
   the wide eyebrow tracking is far too loose, hence the tighter letter-spacing
   and the longer flanking rules. */
.cfp-eyebrow {
    position: relative;
    display: inline-block;
    padding: 0 52px;
    color: var(--orange);
    font: 800 clamp(30px, 3.0vw, 58px)/1.1 "Sora", sans-serif;
    letter-spacing: -.01em;
}

.cfp-eyebrow:before,
.cfp-eyebrow:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 38px;
    height: 2px;
    background: var(--orange);
}

.cfp-eyebrow:before {
    left: 0;
}

.cfp-eyebrow:after {
    right: 0;
}

.cfp-head h2 {
    margin: 14px 0 0;
    color: var(--navy);
    font: 800 clamp(21px, 2.1vw, 32px) / 1.25 "Sora";
    letter-spacing: -0.02em;
}

.cfp-head h2 em {
    color: var(--orange);
    font-style: normal;
}

.cfp-rule {
    display: inline-block;
    width: 96px;
    height: 4px;
    margin: 22px 0 20px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--blue) 50%, var(--orange) 50%);
}

.cfp-head p {
    max-width: 760px;
    margin: 0 auto;
    color: #55637a;
    font-size: 16px;
    line-height: 1.7;
}

/* At its floor size the heading plus both flanking rules no longer fit a phone,
   so the rules shorten before the words are allowed to wrap. */
@media (max-width: 575px) {
    .cfp-eyebrow { padding: 0 30px; }

    .cfp-eyebrow:before,
    .cfp-eyebrow:after { width: 20px; }
}

.cfp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    gap: 16px 40px;
}

.cfp-item {
    --hex: var(--navy);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(3,19,51,.07);
    text-decoration: none;
    transition: .3s ease;
}

.cfp-item.orange {
    --hex: var(--orange);
}

.cfp-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(3,19,51,.13);
}

.cfp-hex {
    position: relative;
    flex: 0 0 56px;
    width: 56px;
    height: 62px;
    display: grid;
    place-items: center;
    background: var(--hex);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    color: #fff;
    font-size: 24px;
}

.cfp-item h3 {
    flex: 1;
    margin: 0;
    padding-left: 20px;
    border-left: 1px solid #e2e9f4;
    color: var(--navy);
    font: 700 17px/1.4 "Sora";
}

.cfp-go {
    color: var(--orange);
    font-size: 20px;
    transition: .3s ease;
}

.cfp-item:hover .cfp-go {
    transform: translateX(4px);
}

.cfp-more {
    margin-top: 40px;
    text-align: center;
}

.cfp-more a {
    display: inline-flex;
    align-items: stretch;
    border-radius: 6px;
    overflow: hidden;
    background: var(--navy);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 14px 30px rgba(3,19,51,.20);
}

.cfp-more a b {
    padding: 18px 30px;
    font: 800 15px/1.4 "Sora";
    letter-spacing: .06em;
}

.cfp-more a > span {
    display: grid;
    place-items: center;
    padding: 0 26px 0 34px;
    margin-left: -18px;
    background: var(--orange);
    clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%);
    font-size: 20px;
}

.cfp-more a:hover {
    color: #fff;
    transform: translateY(-3px);
}

.cfp-more a:hover > span {
    background: var(--orange-light);
}

/* =========================================================
   WHY ATTEND
   ========================================================= */

/* No overflow:hidden here - it would create a scroll container and stop
   .why-side from sticking. The backgrounds are gradients, nothing overflows. */
.why-section {
    position: relative;
    padding: 100px 0;
    isolation: isolate;
    background:
        radial-gradient(circle at 12% 0%, rgba(18,101,232,.28), transparent 42%),
        radial-gradient(circle at 90% 100%, rgba(255,91,10,.16), transparent 42%),
        linear-gradient(180deg, #041a44, #020d27);
    color: #fff;
}

/* Conference photo dissolved into the navy: luminosity blend takes the section's
   own hue, the radial mask fades every edge so there is no visible image box. */
.why-section:before {
    content: "";
    position: absolute;
    left: 0;
    top: -10%;
    bottom: -10%;
    width: 58%;
    z-index: -1;
    translate: 0 var(--py, 0px);
    /* background-image is emitted by index.php so the path resolves correctly */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .45;
    mix-blend-mode: luminosity;
    -webkit-mask-image: radial-gradient(ellipse 58% 70% at 28% 62%, #000 22%, transparent 74%);
    mask-image: radial-gradient(ellipse 58% 70% at 28% 62%, #000 22%, transparent 74%);
    pointer-events: none;
}

.why-layout {
    display: grid;
    grid-template-columns: .85fr 1.5fr;
    gap: 70px;
    align-items: start;
}

/* align-items:start above keeps this column its natural height, so it can stick */
.why-side {
    position: sticky;
    top: 100px;
}

.why-side h2 {
    margin: 14px 0 26px;
    color: #fff;
    font: 800 clamp(30px, 3.4vw, 44px)/1.12 "Sora";
    letter-spacing: -.04em;
    font-size: 42px;
}

.why-side h2 em {
    color: var(--orange);
    font-style: normal;
}

.why-item {
    display: grid;
    grid-template-columns: 78px 1fr;
    padding: 30px 0;
    border-top: 1px solid rgba(255,255,255,.12);
    transition: .3s ease;
}

.why-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.why-item:hover {
    padding-left: 8px;
}

.why-no {
    color: rgba(255,255,255,.24);
    font: 800 32px/1 "Sora";
    letter-spacing: -.04em;
    transition: .3s ease;
}

.why-item:hover .why-no {
    color: var(--orange);
}

.why-item h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: #fff;
    font: 800 20px "Sora";
}

.why-item h3 i {
    flex: none;
    color: var(--orange);
    font-size: 19px;
}

.why-item p {
    margin: 10px 0 0;
    color: #a9bdd9;
    font-size: 15px;
    line-height: 1.75;
}

.why-points {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 9px;
}

.why-points li {
    display: flex;
    gap: 10px;
    color: #cbd8ea;
    font-size: 14px;
    line-height: 1.55;
}

.why-points i {
    flex: none;
    margin-top: 2px;
    color: var(--orange);
    font-size: 14px;
}

/* =========================================================
   GET INVOLVED SLIDER
   ========================================================= */

.involve-section {
    padding: 95px 0;
    background: #fff;
}

.involve-heading {
    max-width: 780px;
    margin: 0 auto 40px;
    text-align: center;
}

.involve-slider {
    position: relative;
    padding: 52px 55px 30px;
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 12%, rgba(255,91,10,.35), transparent 34%),
        linear-gradient(120deg, #031333, #073a9d);
    box-shadow: 0 25px 65px rgba(3,19,51,.22);
}

.involve-slide {
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 45px;
    align-items: center;
    min-height: 310px;
}

.involve-copy {
    max-width: 680px;
}

.involve-tag {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 30px;
    background: rgba(255,91,10,.16);
    border: 1px solid rgba(255,91,10,.45);
    color: var(--orange);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.involve-copy h3 {
    margin: 18px 0 0;
    color: #fff;
    font: 800 clamp(26px, 3vw, 38px)/1.15 "Sora";
    letter-spacing: -.03em;
}

.involve-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
}

.involve-pills span {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.involve-pills span:not(:last-child):after {
    content: "";
    width: 1px;
    height: 15px;
    background: rgba(255,255,255,.35);
}

.involve-copy p {
    margin: 16px 0 0;
    color: #b7c7dc;
    font-size: 15px;
    line-height: 1.8;
}

/* Kept below (and equally specific to) .involve-copy p so it wins */
.involve-copy p.involve-lead {
    margin-top: 16px;
    color: var(--orange);
    font: 700 19px/1.4 "Sora";
}

.involve-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding: 14px 24px;
    border: 0;
    border-radius: 8px;
    background: var(--orange);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 32px rgba(255,91,10,.32);
    transition: .3s ease;
}

.involve-btn:hover {
    transform: translateY(-3px);
    background: var(--orange-light);
    color: #fff;
    box-shadow: 0 17px 38px rgba(255,91,10,.42);
}

.involve-visual {
    position: relative;
    width: 210px;
    height: 210px;
    margin-left: auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.05);
    color: var(--orange);
    font-size: 76px;
}

.involve-visual:before,
.involve-visual:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.10);
}

.involve-visual:before {
    inset: -18px;
}

.involve-visual:after {
    inset: -38px;
    border-style: dashed;
    animation: involveSpin 26s linear infinite;
}

@keyframes involveSpin {
    to { transform: rotate(360deg); }
}

.involve-nav {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.12);
}

/* Bootstrap positions indicators absolutely - keep them in the nav row */
.involve-dots {
    position: static;
    margin: 0;
    justify-content: flex-start;
}

.involve-dots button {
    width: 26px;
    height: 4px;
    margin: 0 6px 0 0;
    border: 0;
    border-radius: 4px;
    background: rgba(255,255,255,.28);
    opacity: 1;
    transition: .3s ease;
}

.involve-dots button.active {
    width: 44px;
    background: var(--orange);
}

.involve-arrows {
    display: flex;
    gap: 9px;
}

.involve-arrow {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    transition: .25s ease;
}

.involve-arrow:hover {
    background: var(--orange);
    border-color: var(--orange);
}

/* Speaker pop-up */

.involve-modal .modal-content {
    position: relative;
    padding: 46px 40px 40px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    background:
        radial-gradient(circle at 85% 8%, rgba(255,91,10,.30), transparent 40%),
        linear-gradient(140deg, #031333, #073a9d);
    text-align: center;
    color: #fff;
}

.involve-modal .btn-close {
    position: absolute;
    top: 16px;
    right: 16px;
    filter: invert(1) grayscale(1) brightness(2);
    opacity: .65;
}

.involve-modal-icon {
    width: 66px;
    height: 66px;
    margin: 0 auto 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,91,10,.15);
    border: 1px solid rgba(255,91,10,.45);
    color: var(--orange);
    font-size: 27px;
}

.involve-modal h4 {
    margin: 0;
    font: 800 24px "Sora";
}

.involve-modal p {
    margin: 10px 0 0;
    color: #b7c7dc;
    font-size: 14px;
}

.involve-modal-mail {
    display: inline-block;
    margin-top: 14px;
    padding: 13px 26px;
    border-radius: 8px;
    background: var(--orange);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    word-break: break-all;
}

.involve-modal-mail:hover {
    background: var(--orange-light);
    color: #fff;
}

/* =========================================================
   SERVICES
   ========================================================= */

.services-section {
    padding: 5px 0 100px;
    background: #f6f8fd;
}

.services-head {
    max-width: 880px;
    margin: 0 auto 45px;
    text-align: center;
}

.services-head h2 {
    margin: 14px 0 0;
    color: var(--navy);
    font: 800 clamp(30px, 3.6vw, 40px)/1.15 "Sora";
    letter-spacing: -.035em;
}

.services-head h2 em {
    color: var(--orange);
    font-style: normal;
}

.services-head p {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

/* Element-qualified so it outranks .services-head p above */
.services-head p.services-lead {
    margin-top: 18px;
    color: var(--navy);
    font: 600 18px/1.55 "Inter", sans-serif;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.service-card {
    display: flex;
    flex-direction: column;
    padding: 14px 14px 28px;
    border-radius: 22px;
    background: linear-gradient(165deg, #093a86, #041b45);
    text-align: center;
    color: #fff;
    transition: .3s ease;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 45px rgba(3,19,51,.25);
}

/* White panel with the speech-bubble tail underneath */
.service-head {
    position: relative;
    margin-bottom: 30px;
    padding: 30px 18px 26px;
    border-radius: 16px;
    background: #fff;
}

.service-head:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 13px solid transparent;
    border-bottom: 0;
    border-top-color: #fff;
}

.service-head i {
    display: block;
    color: var(--orange);
    font-size: 40px;
    line-height: 1;
}

.service-head h3 {
    margin: 18px 0 0;
    color: var(--navy);
    font: 800 20px/1.25 "Sora";
    letter-spacing: -.01em;
}

.service-card p {
    margin: 0;
    padding: 0 10px;
    color: #b7c7dc;
    font-size: 14px;
    line-height: 1.6;
}

.service-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 20px;
    color: var(--orange);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.service-link:hover {
    color: var(--orange-light);
}

.service-link i {
    transition: .3s ease;
}

.service-link:hover i {
    transform: translateX(5px);
}

/* =========================================================
   VENUE
   ========================================================= */

.venue-section {
    padding: 15px 0;
    background: #f5f8fc;
}

.venue-head {
    max-width: 820px;
    margin: 0 auto 45px;
    text-align: center;
}

.venue-head h2 {
    margin: 14px 0 16px;
    color: var(--navy);
    font: 800 clamp(30px, 3.6vw, 46px)/1.15 "Sora";
    letter-spacing: -.035em;
}

.venue-head h2 em {
    color: var(--orange);
    font-style: normal;
}

.venue-head p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
}

/* The photo is absolute so the copy block drives the stage height */
.venue-stage {
    position: relative;
    min-height: 560px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 28px 65px rgba(3,19,51,.20);
}

.venue-stage img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .8s ease;
}

.venue-stage:hover img {
    transform: scale(1.04);
}

/* Angled scrim - a nod to the reference's cut panels without copying the strip */
.venue-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(103deg, rgba(3,19,51,.94) 0%, rgba(3,19,51,.88) 38%, rgba(3,19,51,.35) 56%, transparent 72%);
    pointer-events: none;
}

.venue-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 540px) 1fr;
    align-items: center;
    min-height: 560px;
    padding: 54px 52px;
}

.venue-card {
    text-align: center;
    color: #fff;
}

.venue-eyebrow,
.venue-country {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #f0b64a;
    font-weight: 800;
}

.venue-eyebrow {
    font-size: 22px;
    letter-spacing: .42em;
    text-indent: .42em;
}

.venue-country {
    font-size: 17px;
    letter-spacing: .46em;
    text-indent: .46em;
}

.venue-rule {
    width: 34px;
    height: 1px;
    background: #f0b64a;
}

.venue-script {
    display: block;
    margin: 6px 0 10px;
    color: #fff;
    font: 400 clamp(52px, 5.6vw, 74px)/1.1 "Kaushan Script", cursive;
}

.venue-card p {
    max-width: 470px;
    margin: 24px auto 0;
    color: #d7e2f0;
    font-size: 14px;
    line-height: 1.85;
}

.venue-points {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 30px;
}

/* Fixed icon row so the bootstrap glyphs and the inline SVG share a baseline */
.venue-points > div {
    padding: 0 8px;
    border-left: 1px solid rgba(255,255,255,.22);
}

.venue-points > div:first-child {
    border-left: 0;
}

.venue-points i,
.venue-points svg {
    display: grid;
    place-items: center;
    width: 100%;
    height: 34px;
    color: #fff;
}

.venue-points i {
    font-size: 25px;
}

.venue-points svg {
    width: 36px;
    margin: 0 auto;
}

.venue-points span {
    display: block;
    margin-top: 10px;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.venue-note {
    display: block;
    margin-top: 26px;
    color: #9db1cc;
    font-size: 12px;
}

.venue-explore {
    position: absolute;
    right: 34px;
    bottom: 42px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 15px 24px;
    border-radius: 8px;
    background: var(--orange);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 14px 32px rgba(255,91,10,.35);
    transition: .3s ease;
}

.venue-explore:hover {
    transform: translateY(-3px);
    background: var(--orange-light);
    color: #fff;
}

/* Watercolour banner - artwork is 1983x793, copy sits in its blank left third */
/* Confirmed venue card, between the section heading and the city banner */

.venue-hotel {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: stretch;
    gap: 0;
    margin-top: 26px;
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 22px 55px rgba(3,19,51,.10);
}

/* No photo on disk - the copy takes the whole card rather than half of it */
.venue-hotel.is-textonly { grid-template-columns: 1fr; }

.venue-hotel-shot {
    position: relative;
    min-height: 300px;
    background: #0b1733;
}

.venue-hotel-shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.venue-hotel-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 44px;
}

.venue-hotel-tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    padding: 7px 15px;
    border-radius: 999px;
    background: rgba(255,91,10,.10);
    color: #b8460a;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .14em;
}

.venue-hotel-copy h3 {
    margin: 18px 0 0;
    color: var(--navy);
    font: 800 clamp(26px, 2.6vw, 36px)/1.15 "Sora", sans-serif;
    letter-spacing: -.03em;
}

.venue-hotel-copy p {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.8;
}

.venue-hotel-copy p strong { color: var(--navy); }

.venue-hotel-address {
    display: flex;
    gap: 9px;
    margin-top: 10px !important;
    color: var(--navy) !important;
    font-size: 14.5px !important;
    font-weight: 600;
}

.venue-hotel-address i { flex: none; margin-top: 3px; color: var(--orange); }

/* The venue name block on venue.php carries the street address under it */
.vp-venue-name em {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 13.5px;
    font-style: normal;
    line-height: 1.55;
}

.venue-hotel-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 26px;
    margin-top: 26px;
}

.venue-hotel-actions .content-link { margin-top: 0; }

@media (max-width: 860px) {
    .venue-hotel { grid-template-columns: 1fr; }
    .venue-hotel-shot { min-height: 0; aspect-ratio: 16/9; }
    .venue-hotel-copy { padding: 30px 24px 34px; }
}

.venue-banner {
    position: relative;
    margin-top: 22px;
    aspect-ratio: 1983/793;
    border-radius: 20px;
    overflow: hidden;
    background: url("../images/venue-bg.png") center/cover no-repeat, #f6f8fd;
    box-shadow: 0 22px 55px rgba(3,19,51,.12);
}

.venue-banner-copy {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 46%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 24px 0 52px;
}

.venue-eyebrow.dark,
.venue-eyebrow.dark .venue-rule {
    color: var(--orange);
}

.venue-eyebrow.dark .venue-rule {
    background: var(--orange);
}

.venue-banner-copy h3 {
    margin: 12px 0 0;
    color: var(--navy);
    font: 800 clamp(26px, 3.2vw, 46px)/1 "Sora";
    letter-spacing: -.04em;
    text-transform: uppercase;
}

.venue-banner-copy h3 em {
    color: var(--orange);
    font-style: italic;
}

.venue-banner-copy p {
    max-width: 470px;
    margin: 16px 0 0;
    color: #46566f;
    font-size: clamp(11px, .95vw, 14px);
    line-height: 1.75;
}

.venue-banner-points {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 470px;
    margin-top: 20px;
}

.venue-banner-points > div {
    text-align: center;
}

.venue-banner-points i {
    display: block;
    color: var(--blue-bright);
    font-size: clamp(16px, 1.7vw, 24px);
}

.venue-banner-points span {
    display: block;
    margin-top: 7px;
    color: var(--navy);
    font-size: clamp(7px, .62vw, 9px);
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.venue-banner-more {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 12px 26px;
    border-radius: 30px;
    background: linear-gradient(120deg, var(--blue), var(--blue-bright));
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-decoration: none;
    box-shadow: 0 12px 26px rgba(7,58,157,.30);
    transition: .3s ease;
}

.venue-banner-more:hover {
    transform: translateY(-3px);
    color: #fff;
    box-shadow: 0 16px 32px rgba(7,58,157,.40);
}

.venue-banner-more i {
    transition: .3s ease;
}

.venue-banner-more:hover i {
    transform: translateX(4px);
}

/* =========================================================
   GALLERY + REVIEWS
   ========================================================= */

.section-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 30px;
    background: #fff3ec;
    color: var(--orange);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
}

.gallery-section {
    padding: 95px 0;
    background: #f6f8fd;
}

.reviews-section {
    padding: 5px 0;
    background: #fff;
}

.gallery-head,
.reviews-head {
    max-width: 780px;
    margin: 0 auto 45px;
    text-align: center;
}

.gallery-head h2,
.reviews-head h2 {
    margin: 16px 0 0;
    color: var(--navy);
    font: 800 clamp(28px, 3.4vw, 42px)/1.15 "Sora";
    letter-spacing: -.035em;
}

.gallery-head h2 em,
.reviews-head h2 em {
    color: var(--orange);
    font-style: normal;
}

.gallery-head p,
.reviews-head p {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

/* Gallery */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.gallery-item {
    position: relative;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #e7edf8;
    box-shadow: 0 12px 32px rgba(3,19,51,.09);
}

.gallery-item img,
.gallery-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 10/7;
    object-fit: cover;
    transition: .6s ease;
}

/* Mosaic: one 2x2 hero, four single tiles, two wide tiles - fits 7 exactly */
.gallery-grid.mosaic {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.gallery-grid.mosaic .gallery-item img,
.gallery-grid.mosaic .gallery-placeholder {
    aspect-ratio: 16/11;
}

.gallery-item.feature {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-item.feature img,
.gallery-item.feature .gallery-placeholder {
    aspect-ratio: auto;
    min-height: 100%;
}

.gallery-item.wide {
    grid-column: span 2;
}

.gallery-item.wide img,
.gallery-item.wide .gallery-placeholder {
    aspect-ratio: 16/6.4;
    /* Bias the crop upward so faces survive the letterbox */
    object-position: center 28%;
}

.gallery-item:hover img {
    transform: scale(1.06);
}

/* Shown until a real photo is dropped into assets/images/gallery */
.gallery-placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, #dce6f6, #eef3fc);
    color: #9fb3d1;
    font-size: 40px;
}

.gallery-item figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 32px 18px 16px;
    background: linear-gradient(to top, rgba(3,19,51,.92), transparent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.gallery-more {
    margin-top: 38px;
    text-align: center;
}

.gallery-more a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    border: 1px solid var(--navy);
    border-radius: 40px;
    color: var(--navy);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: .3s ease;
}

.gallery-more a:hover {
    background: var(--navy);
    color: #fff;
    transform: translateY(-3px);
}

.gallery-more i {
    transition: .3s ease;
}

.gallery-more a:hover i {
    transform: translateX(4px);
}

/* Reviews */

.reviews-rail-wrap { position: relative; }

/* Horizontal rail. Flex stretch keeps every card the height of the tallest,
   which is what the grid needed grid-auto-rows for. */
.reviews-rail {
    display: flex;
    align-items: stretch;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 4px 6px;
    margin: -4px -4px -6px;
    scrollbar-width: none;
}

.reviews-rail::-webkit-scrollbar { display: none; }

.reviews-rail:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

.reviews-rail .review-card {
    flex: 0 0 calc((100% - 48px) / 3);
    scroll-snap-align: start;
}

/* Arrows sit under the rail, clear of the cards */
.reviews-nav {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 26px;
}

.reviews-arrow {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    font-size: 18px;
    box-shadow: 0 8px 20px rgba(3, 19, 51, .08);
    transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}

.reviews-arrow:hover:not(:disabled) {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}

.reviews-arrow:disabled { opacity: .4; cursor: default; }

.review-card {
    display: flex;
    flex-direction: column;
    padding: 30px 28px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    transition: .3s ease;
}

.review-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,91,10,.45);
    box-shadow: 0 20px 44px rgba(3,19,51,.10);
}

.review-quote {
    display: block;
    color: var(--orange);
    font-size: 26px;
    line-height: 1;
}

/* Clamped to a fixed number of lines, which is what keeps every card the
   same height. .is-open lifts the clamp for that card only. */
.review-body {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 16px 0 0;
}

.review-body.is-open {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
}

.review-card p {
    margin: 0 0 12px;
    color: #3d4d68;
    font-size: 15px;
    line-height: 1.7;
}

.review-card p:last-child { margin-bottom: 0; }

/* Hidden until main.js finds the text actually overflows */
.review-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    margin: 14px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: #b8460a;
    font: 700 13.5px "Sora", sans-serif;
    cursor: pointer;
}

.review-more[hidden] { display: none; }

.review-more:hover { color: var(--navy); }

.review-more i { font-size: 12px; transition: transform .2s ease; }

.review-more[aria-expanded="true"] i { transform: rotate(180deg); }

.review-person {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: auto;
    padding-top: 22px;
}

.review-avatar {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font: 800 17px "Sora";
}

.review-person strong {
    display: block;
    color: var(--navy);
    font: 800 15px "Sora";
    line-height: 1.35;
}

@media (max-width: 980px) {
    .reviews-rail .review-card { flex-basis: calc((100% - 24px) / 2); }
}

@media (max-width: 640px) {
    .reviews-rail .review-card { flex-basis: 100%; }
}

/* =========================================================
   REGISTER
   ========================================================= */

.join-section {
    padding: 90px 0 20px;
    background: #fff;
}

.join-panel {
    padding: 62px 40px 66px;
    border-radius: 16px;
    text-align: center;
    background:
        radial-gradient(circle at 88% 14%, rgba(255,91,10,.30), transparent 34%),
        radial-gradient(circle at 8% 92%, rgba(18,101,232,.30), transparent 40%),
        linear-gradient(115deg, #04102e, #0a2d6b);
    box-shadow: 0 28px 65px rgba(3,19,51,.22);
}

.join-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 30px;
    background: #fff3ec;
    color: var(--orange);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}

.join-panel h2 {
    max-width: 720px;
    margin: 26px auto 0;
    color: #fff;
    font: 800 clamp(28px, 3.4vw, 42px)/1.25 "Sora";
    letter-spacing: -.03em;
}

.join-panel p {
    max-width: 620px;
    margin: 20px auto 0;
    color: #b7c7dc;
    font-size: 15px;
    line-height: 1.7;
}

.join-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 34px;
}

.join-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 40px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: .3s ease;
}

.join-btn.primary {
    background: var(--orange);
    color: #fff;
    box-shadow: 0 14px 34px rgba(255,91,10,.40);
}

.join-btn.primary:hover {
    background: var(--orange-light);
    color: #fff;
    transform: translateY(-3px);
}

.join-btn.ghost {
    border: 1px solid rgba(255,255,255,.45);
    color: #fff;
}

.join-btn.ghost:hover {
    background: #fff;
    border-color: #fff;
    color: var(--navy);
    transform: translateY(-3px);
}

/* =========================================================
   FAQ
   ========================================================= */

.faq-section {
    padding: 55px 0 90px;
    background: #fff;
}

.faq-title {
    margin: 0 0 26px;
    color: var(--navy);
    text-align: center;
    font: 800 clamp(22px, 2.2vw, 28px) "Sora";
    letter-spacing: -.02em;
}

.faq-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

.faq-tab {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    border: 1px solid var(--line);
    border-radius: 40px;
    background: #fff;
    color: var(--navy);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: .25s ease;
}

.faq-tab i {
    color: var(--orange);
    font-size: 17px;
    transition: .25s ease;
}

.faq-tab-go {
    font-size: 15px;
}

.faq-tab:hover {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(3,19,51,.16);
}

.faq-tab:hover .faq-tab-go {
    transform: translateX(4px);
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    padding: 60px 0 25px;
    background: #020d27;
    color: #91a5c2;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.15fr;
    gap: 50px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.footer-mark {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--orange), #ff8c42);
    color: #fff;
}

.footer-mark .atom-svg {
    width: 26px;
    height: 26px;
}

.ribbon-item .atom-svg {
    width: 30px;
    height: 30px;
}

.footer-brand strong {
    display: block;
    font: 800 22px "Sora";
}

.footer-brand strong b {
    color: var(--orange);
}

.footer-brand small {
    display: block;
    margin-top: 4px;
    color: #8fa3c1;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .2em;
}

.footer-about p {
    max-width: 380px;
    margin-top: 22px;
    color: #93a8c6;
    font-size: 14px;
    line-height: 1.85;
}

.footer-about p strong {
    color: #fff;
    font-weight: 700;
}

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

.footer-social a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    transition: .25s ease;
}

.footer-social a:hover {
    background: var(--orange);
    border-color: var(--orange);
    transform: translateY(-3px);
}

/* Heading with the short orange underline */
.footer-col h4 {
    position: relative;
    margin: 0 0 26px;
    padding-bottom: 12px;
    color: #fff;
    font: 800 17px "Sora";
}

.footer-col h4:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    background: var(--orange);
}

.footer-links,
.footer-contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-links li + li {
    margin-top: 13px;
}

.footer-links a {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #93a8c6;
    font-size: 14px;
    text-decoration: none;
}

.footer-links i {
    color: var(--orange);
    font-size: 11px;
}

.footer-links a:hover {
    color: var(--orange);
}

.footer-contact li {
    display: flex;
    gap: 13px;
}

.footer-contact li + li {
    margin-top: 20px;
}

.footer-contact > li > i {
    flex: none;
    margin-top: 3px;
    color: var(--orange);
    font-size: 16px;
}

.footer-contact small {
    display: block;
    color: #7f95b4;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.footer-contact a {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}

.footer-contact a:hover {
    color: var(--orange);
}

.footer-alert {
    margin-top: 55px;
    padding: 22px 26px;
    border: 1px solid rgba(255,91,10,.35);
    border-radius: 10px;
    background: rgba(255,91,10,.05);
}

.footer-alert strong {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--orange);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
}

.footer-alert p {
    margin: 12px 0 0;
    color: #a9bdd9;
    font-size: 13px;
    line-height: 1.75;
}

.footer-alert a {
    color: var(--orange);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.08);
    color: #7f93b1;
    font-size: 13px;
}

.footer-legal {
    display: flex;
    gap: 22px;
}

.footer-legal a {
    color: #7f93b1;
    text-decoration: none;
}

.footer-legal a:hover {
    color: var(--orange);
}

/* Back to top */

.to-top {
    position: fixed;
    right: 20px;
    bottom: 78px;
    z-index: 2000;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--orange);
    color: #fff;
    font-size: 19px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    box-shadow: 0 12px 30px rgba(255,91,10,.35);
    transition: .3s ease;
}

.to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.to-top:hover {
    background: var(--orange-light);
}

/* Left edge, opposite the join buttons and the back-to-top control. The label
   is revealed on hover, so the resting state is still a single round button. */
.whatsapp-button {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 2000;
    height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 15px;
    border-radius: 999px;
    background: #20bf63;
    color: #fff;
    text-decoration: none;
    font: 700 13.5px "Inter", sans-serif;
    white-space: nowrap;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
    transition: transform .25s ease, box-shadow .25s ease;
}

.whatsapp-button i {
    flex: none;
    font-size: 22px;
}

/* max-width rather than display, so the label can animate open */
.whatsapp-button span {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width .3s ease, opacity .3s ease;
}

.whatsapp-button:hover,
.whatsapp-button:focus-visible {
    transform: translateY(-3px);
    color: #fff;
}

.whatsapp-button:hover span,
.whatsapp-button:focus-visible span {
    max-width: 120px;
    opacity: 1;
}

/* Join as Presenter / Listener, along the foot of the window. Centred so they
   sit between the WhatsApp button on the left and the back-to-top control on
   the right rather than stacking on top of either. */
.join-float {
    position: fixed;
    left: 50%;
    bottom: 20px;
    translate: -50% 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #e6efff;
    padding: 7px;
    border-radius: 50px;
}

.join-float-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    border-radius: 999px;
    color: #fff;
    font: 700 13px "Inter", sans-serif;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 12px 30px rgba(3,19,51,.28);
    transition: transform .25s ease, filter .25s ease;
}

.join-float-btn i { font-size: 15px; }

.join-float-btn.presenter { background: var(--orange); }

/* Navy on the navy banner needs an edge of its own to stay legible */
.join-float-btn.listener {
    background: var(--navy);
    box-shadow: 0 12px 30px rgba(3,19,51,.28), inset 0 0 0 1px rgba(255,255,255,.38);
}

.join-float-btn:hover,
.join-float-btn:focus-visible {
    transform: translateY(-3px);
    filter: brightness(1.08);
    color: #fff;
}

/* On a phone the two labels eat the screen - the icons carry them instead */
@media (max-width: 767px) {
    .join-float { gap: 8px; }

    .join-float-btn {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
    }

    .join-float-btn i { font-size: 17px; }
    .join-float-btn span { display: none; }

    .whatsapp-button {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
    }

    .whatsapp-button span { display: none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1199px) {

    .chennai-hero { --side-card-w: 230px; }

    .dates-timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 24px;
    }

    .dates-timeline:before {
        display: none;
    }

    .date-node:nth-child(2n):after {
        display: none;
    }

    .hero-ribbon {
        grid-template-columns: repeat(3, 1fr);
    }

    .ribbon-message {
        display: none;
    }

    .objectives-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 35px 20px;
    }
}

@media (max-width: 991px) {

    .top-center,
    .top-contact .top-place {
        display: none;
    }

    .top-strip-inner {
        justify-content: space-between;
    }

    .top-contact {
        gap: 14px;
    }

    .chennai-hero {
        min-height: 880px;
    }

    .hero-container {
        min-height: 660px;
    }

    .hero-content {
        padding-bottom: 180px;
    }

    .hero-side {
        display: none;
    }

    .hero-content h1 {
        font-size: clamp(65px, 11vw, 100px);
    }

    .quick-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-card {
        border-bottom: 1px solid var(--line);
    }

    .about-layout,
    .welcome-inner {
        grid-template-columns: 1fr;
    }

    /* Artwork becomes a cropped band on top with the copy stacked beneath */
    .venue-banner {
        aspect-ratio: auto;
        background: #f6f8fd;
    }

    .venue-banner:before {
        content: "";
        display: block;
        aspect-ratio: 16/7;
        background: url("../images/venue-bg.png") right center / cover no-repeat;
    }

    .venue-banner-copy {
        position: static;
        width: auto;
        padding: 28px 26px 32px;
    }

    .venue-banner-copy p,
    .venue-banner-points {
        max-width: none;
    }

    /* Copy takes the full width; the scrim covers the whole photo instead */
    .venue-inner {
        grid-template-columns: 1fr;
        padding: 48px 34px 96px;
    }

    .venue-scrim {
        background: linear-gradient(180deg, rgba(3,19,51,.92), rgba(3,19,51,.88));
    }

    .venue-explore {
        right: 24px;
        bottom: 28px;
    }

    .why-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .why-side {
        position: static;
    }

    /* Stacked: keep the photo behind the heading only, and lighter, so it never
       sits under body copy */
    .why-section:before {
        width: 100%;
        opacity: .26;
        -webkit-mask-image: radial-gradient(ellipse 105% 20% at 50% 14%, #000 18%, transparent 72%);
        mask-image: radial-gradient(ellipse 105% 20% at 50% 14%, #000 18%, transparent 72%);
    }

    .services-grid,
    .gallery-grid,
    .gallery-grid.mosaic {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Hero stops spanning two rows once there are only two columns */
    .gallery-item.feature {
        grid-row: auto;
    }

    .gallery-item.feature img,
    .gallery-item.feature .gallery-placeholder {
        aspect-ratio: 16/9;
        min-height: 0;
    }

    .involve-slider {
        padding: 42px 35px 26px;
    }

    .involve-slide {
        grid-template-columns: 1fr;
        gap: 32px;
        min-height: 0;
    }

    .involve-visual {
        order: -1;
        width: 150px;
        height: 150px;
        margin: 0 auto;
        font-size: 54px;
    }

    .involve-visual:after {
        inset: -26px;
    }

    .welcome-inner {
        gap: 45px;
    }

    .welcome-visual {
        max-width: 620px;
    }

    .sdg-rail-wrap {
        padding: 0 20px;
    }

    .sdg-arrow {
        display: none;
    }

    .about-stats {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
    }

    .about-stats div {
        min-height: 110px;
        border-right: 1px solid rgba(255,255,255,.1);
        border-bottom: 0;
    }

    .date-node:after {
        display: none;
    }

    .cfp-grid {
        gap: 14px 20px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {

    /* Phone and email only - the social row would not survive the wrap */
    .top-strip-inner {
        justify-content: center;
        min-height: 30px;
    }

    .top-social {
        display: none;
    }

    .top-contact {
        gap: 16px;
        font-size: 10px;
    }

    .chennai-hero {
        min-height: 980px;
    }

    .hero-background img {
        object-position: 57% center;
    }

    .hero-container {
        min-height: 700px;
        align-items: flex-start;
    }

    .hero-content {
        padding: 60px 0 220px;
    }

    .hero-label {
        font-size: 9px;
    }

    .hero-date {
        margin-top: 22px;
    }

    .hero-content h1 {
        font-size: 68px;
        margin-top: 12px;
    }

    .hero-edition {
        font-size: 17px;
    }

    .hero-theme strong {
        font-size: 14px;
    }

    .hero-place {
        flex-wrap: wrap;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        max-width: 330px;
    }

    .hero-ribbon {
        min-height: 112px;
        grid-template-columns: repeat(3, 1fr);
    }

    .ribbon-item {
        min-height: 56px;
    }

    .ribbon-item i {
        font-size: 19px;
    }

    .ribbon-item span {
        font-size: 9px;
    }

    .quick-info {
        margin-top: -20px;
    }

    .quick-info-grid {
        grid-template-columns: 1fr;
    }

    .quick-card {
        border-right: 0;
    }

    .content-section,
    .dates-section,
    .venue-section {
        padding: 75px 0;
    }

    /* Stack the card above the button inside a taller stage */
    .venue-stage img {
        aspect-ratio: 4/3.6;
    }

    .venue-scrim {
        background: linear-gradient(to top, rgba(3,19,51,.92) 0%, rgba(3,19,51,.58) 46%, rgba(3,19,51,.12) 100%);
    }

    .venue-card {
        left: 22px;
        right: 22px;
        bottom: 96px;
        max-width: none;
    }

    .venue-explore {
        left: 22px;
        right: auto;
        bottom: 26px;
    }

    .venue-banner-points {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 10px;
    }

    .venue-points {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px 0;
    }

    .venue-points > div:nth-child(odd) {
        border-left: 0;
    }

    .venue-script {
        font-size: 46px;
    }

    .venue-eyebrow {
        font-size: 17px;
    }

    .venue-country {
        font-size: 14px;
    }

    .welcome-badge {
        width: 74px;
        height: 74px;
    }

    .welcome-badge strong {
        font-size: 25px;
    }

    .welcome-chip {
        left: 0;
    }

    .about-section .section-heading {
        margin-bottom: 40px;
        text-align: left;
    }

    .objectives-band {
        padding: 50px 0 55px;
    }

    .objectives-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sdg-section {
        padding: 70px 0 60px;
    }

    /* The wheel swamps a phone-width section - shrink it and drop the second */
    .sdg-wheel {
        width: 320px;
        right: -130px;
        top: -100px;
        opacity: .085;
    }

    .sdg-wheel.small {
        display: none;
    }

    .sdg-head h2 i {
        display: none;
    }

    .sdg-card {
        flex-basis: 218px;
    }

    .about-main-card {
        padding: 32px;
    }

    .about-stats {
        grid-template-columns: 1fr;
    }

    .about-stats div {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.1);
    }

    .dates-section:before {
        width: 110px;
    }

    .dates-timeline {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .date-icon {
        width: 64px;
        height: 64px;
        font-size: 26px;
    }

    .date-card {
        padding: 42px 20px 20px;
    }

    .date-card-head b {
        font-size: 40px;
    }

    .cfp-section,
    .involve-section,
    .why-section,
    .services-section,
    .gallery-section,
    .reviews-section {
        padding: 75px 0;
    }

    .gallery-grid,
    .gallery-grid.mosaic {
        grid-template-columns: 1fr;
        max-width: 440px;
        margin: 0 auto;
    }

    .gallery-item.feature,
    .gallery-item.wide {
        grid-column: span 1;
    }

    .gallery-grid.mosaic .gallery-item img,
    .gallery-grid.mosaic .gallery-placeholder {
        aspect-ratio: 16/11;
        min-height: 0;
    }

    /* Two columns get too narrow to read below this - stack instead */
    .services-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .why-item {
        grid-template-columns: 54px 1fr;
        padding: 24px 0;
    }

    .why-no {
        font-size: 26px;
    }

    .why-item h3 {
        font-size: 18px;
    }

    .involve-slider {
        padding: 34px 24px 22px;
        border-radius: 18px;
    }

    .involve-nav {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 18px;
    }

    .involve-arrows {
        justify-content: center;
    }

    .involve-dots {
        justify-content: center;
    }

    .cfp-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
    }

    /* Stacked into one column the PHP parity no longer alternates — redo it here */
    .cfp-item:nth-child(odd) {
        --hex: var(--navy);
    }

    .cfp-item:nth-child(even) {
        --hex: var(--orange);
    }

    .cfp-item h3 {
        font-size: 15px;
    }

    .join-panel {
        padding: 44px 22px 48px;
    }

    .join-actions {
        display: grid;
        gap: 12px;
    }

    .join-btn {
        justify-content: center;
    }

    .faq-tabs {
        gap: 10px;
    }

    .faq-tab {
        padding: 12px 18px;
        font-size: 14px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-about p {
        max-width: none;
    }

    .footer-alert {
        margin-top: 40px;
        padding: 20px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        font-size: 12px;
    }

    .footer-legal {
        flex-wrap: wrap;
        gap: 16px;
    }
}

@media (max-width: 480px) {

    .chennai-hero {
        min-height: 800px;
    }

    .hero-background img {
        object-position: 61% center;
    }

    .hero-content {
        padding-top: 48px;
    }

    .hero-content h1 {
        font-size: 58px;
    }

    .hero-edition {
        font-size: 15px;
    }

    .hero-theme {
        align-items: flex-start;
    }

    .theme-icon {
        width: 45px;
        height: 45px;
        flex-basis: 45px;
    }

    .hero-place span {
        display: none;
    }

    .hero-ribbon {
        grid-template-columns: repeat(2, 1fr);
    }

    .ribbon-item:nth-child(3) {
        display: none;
    }

    .cfp-item {
        gap: 14px;
        padding: 14px 16px;
    }

    .cfp-hex {
        flex-basis: 46px;
        width: 46px;
        height: 51px;
        font-size: 20px;
    }

    .cfp-item h3 {
        padding-left: 14px;
    }

    .welcome-points i {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .objectives-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .objective-ring {
        width: 104px;
        height: 104px;
        font-size: 35px;
    }

    .objective-item p {
        max-width: 260px;
    }

    .sdg-card {
        flex-basis: 84%;
    }

    .section-heading h2 {
        font-size: 37px;
    }
}

/* =========================================================
   SUB-PAGE HERO + FAQ PAGE
   ========================================================= */

/* One banner ground for every page: the About Conference gradient, with the
   Chennai photo laid over it by the :before rule further down (image set in
   header.php). Layout stays per-hero - only the ground is shared. */
.page-hero,
.about-hero,
.td-hero,
.hist-top {
    background:
        radial-gradient(circle at 10% 10%, rgba(18,101,232,.55), transparent 45%),
        radial-gradient(circle at 88% 20%, rgba(255,91,10,.55), transparent 45%),
        radial-gradient(circle at 60% 100%, rgba(124,58,237,.40), transparent 50%),
        linear-gradient(120deg, #041a44, #0a2d6b 55%, #7a2f12);
}

.page-hero {
    position: relative;
    padding: 70px 0 62px;
    overflow: hidden;
    color: #fff;
    text-align: left;
}

.page-hero .section-pill {
    background: rgba(255,91,10,.14);
    border: 1px solid rgba(255,91,10,.45);
}

.page-hero h1 {
    margin: 18px 0 0;
    color: #fff;
    font: 800 clamp(32px, 4vw, 50px)/1.1 "Sora";
    letter-spacing: -.04em;
}

.page-hero h1 em {
    color: var(--orange);
    font-style: normal;
}

.page-crumb {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 18px;
    color: #93a7c2;
    font-size: 13px;
    font-weight: 600;
}

.page-crumb a {
    color: #fff;
    text-decoration: none;
}

.page-crumb a:hover {
    color: var(--orange);
}

.page-crumb i {
    color: var(--orange);
    font-size: 11px;
}

.faqp-section {
    padding: 80px 0 95px;
    background: #fff;
}

.faqp-title {
    margin: 0 0 34px;
    color: var(--navy);
    text-align: center;
    font: 800 clamp(24px, 2.6vw, 32px) "Sora";
    letter-spacing: -.02em;
}

.faqp-list {
    max-width: 920px;
    margin: 0 auto;
}

.faqp-list .accordion-item {
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: 14px !important;
    overflow: hidden;
    background: #fff;
    transition: .3s ease;
}

.faqp-list .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: rgba(255,91,10,.5);
    box-shadow: 0 16px 40px rgba(3,19,51,.10);
}

.faqp-list .accordion-button {
    gap: 14px;
    padding: 22px 24px;
    background: #fff;
    color: var(--navy);
    font: 700 16px/1.5 "Sora";
    box-shadow: none;
}

.faqp-list .accordion-button:not(.collapsed) {
    background: #fff;
    color: var(--navy);
}

.faqp-list .accordion-button:focus {
    box-shadow: none;
}

.faqp-list .accordion-button:after {
    content: "\F282";
    width: auto;
    height: auto;
    background-image: none;
    color: var(--orange);
    font-family: "bootstrap-icons";
    font-size: 14px;
}

.faqp-no {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fff0e8;
    color: var(--orange);
    font: 800 13px "Sora";
}

.faqp-list .accordion-button:not(.collapsed) .faqp-no {
    background: var(--orange);
    color: #fff;
}

.faqp-list .accordion-body {
    padding: 0 24px 24px 76px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}

.faqp-list .accordion-body p {
    margin: 0;
}

.faqp-points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.faqp-points li {
    display: flex;
    gap: 11px;
    color: var(--muted);
    font-size: 15px;
}

.faqp-points i {
    flex: none;
    margin-top: 4px;
    color: var(--orange);
    font-size: 14px;
}

.faqp-points strong {
    color: var(--navy);
    font-weight: 700;
}

.faqp-cta {
    margin-top: 45px;
    text-align: center;
}

.faqp-cta p {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 15px;
}

@media (max-width: 767px) {
    .page-hero {
        padding: 55px 0 48px;
    }

    .faqp-section {
        padding: 60px 0 70px;
    }

    .faqp-list .accordion-button {
        padding: 18px 18px;
        font-size: 15px;
    }

    .faqp-list .accordion-body {
        padding: 0 18px 20px 18px;
    }
}

/* =========================================================
   MODE OF PRESENTATION
   ========================================================= */

.modes-section {
    padding: 75px 0 90px;
    background: #fff;
}

.modes-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 40px;
}

.modes-tab {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 15px 28px;
    border: 1px solid var(--line);
    border-radius: 40px;
    background: #fff;
    color: var(--navy);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: .25s ease;
}

.modes-tab i {
    color: var(--orange);
    font-size: 17px;
    transition: .25s ease;
}

.modes-tab:hover {
    border-color: var(--orange);
}

.modes-tab.active {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.modes-panel {
    max-width: 940px;
    margin: 0 auto;
    padding: 42px 44px 46px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 46px rgba(3,19,51,.08);
}

.modes-panel h2 {
    margin: 0 0 18px;
    color: var(--navy);
    font: 800 clamp(24px, 2.6vw, 32px) "Sora";
    letter-spacing: -.025em;
}

.modes-panel p {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.85;
}

.modes-types {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0 0;
}

.modes-types span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border-radius: 30px;
    background: #fff3ec;
    color: var(--navy);
    font-size: 14px;
    font-weight: 700;
}

.modes-types i {
    color: var(--orange);
    font-size: 15px;
}

.modes-sub {
    margin: 34px 0 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    color: var(--navy);
    font: 800 20px "Sora";
}

.modes-group {
    margin: 26px 0 0;
    color: var(--orange);
    font: 800 15px "Sora";
    letter-spacing: .02em;
}

.modes-list {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 13px;
}

.modes-list > li {
    display: flex;
    gap: 12px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

.modes-list > li > i {
    flex: none;
    margin-top: 5px;
    color: var(--orange);
    font-size: 14px;
}

.modes-sublist {
    margin: 10px 0 0;
    padding: 0 0 0 2px;
    list-style: none;
    display: grid;
    gap: 8px;
}

.modes-sublist li {
    position: relative;
    padding-left: 18px;
    color: var(--navy);
    font-size: 14px;
    font-weight: 600;
}

.modes-sublist li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange);
}

@media (max-width: 767px) {
    .modes-section {
        padding: 55px 0 70px;
    }

    .modes-tabs {
        gap: 10px;
    }

    .modes-tab {
        padding: 12px 18px;
        font-size: 14px;
    }

    .modes-panel {
        padding: 28px 22px 32px;
    }
}

/* =========================================================
   NOTICE BOX (submission guidelines)
   ========================================================= */

.notice-box {
    max-width: 940px;
    margin: 34px auto 0;
    padding: 32px 36px 34px;
    border: 1px solid rgba(255,91,10,.35);
    border-radius: 18px;
    background: rgba(255,91,10,.05);
}

.notice-box h3 {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 20px;
    color: var(--navy);
    font: 800 20px "Sora";
    letter-spacing: -.01em;
}

.notice-box h3 i {
    color: var(--orange);
    font-size: 21px;
}

.notice-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 15px;
}

.notice-box li {
    display: flex;
    gap: 13px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}

.notice-box li > i {
    flex: none;
    margin-top: 4px;
    width: 20px;
    color: var(--orange);
    font-size: 15px;
}

.notice-box strong {
    color: var(--navy);
    font-weight: 700;
}

.notice-box a {
    color: var(--orange);
    font-weight: 700;
    word-break: break-word;
}

@media (max-width: 767px) {
    .notice-box {
        padding: 24px 20px 26px;
    }

    .notice-box h3 {
        font-size: 18px;
    }
}

/* =========================================================
   SUBMISSION FORM
   ========================================================= */

.submit-section {
    padding: 70px 0 90px;
    background: #fff;
}

.submit-intro {
    max-width: 880px;
    margin: 0 auto 34px;
    text-align: center;
}

.submit-intro p {
    margin: 0 0 14px;
    color: #000;
    font-size: 16px;
    line-height: 1.85;
}

.submit-intro a {
    color: var(--orange);
    font-weight: 700;
}

.submit-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin: 0 0 34px;
}

.submit-meta > div {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f9fbff;
}

.submit-meta i {
    flex: none;
    margin-top: 2px;
    color: var(--orange);
    font-size: 20px;
}

.submit-meta small {
    display: block;
    color: #8794a8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

.submit-meta strong {
    display: block;
    margin-top: 6px;
    color: var(--navy);
    font: 700 14px/1.5 "Sora";
}

.submit-form {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 42px 44px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 46px rgba(3,19,51,.08);
}

.submit-legend {
    margin: 0 0 26px;
    scroll-margin-top: 90px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    color: var(--navy);
    font: 800 22px "Sora";
    letter-spacing: -.02em;
}

.submit-meta + .submit-legend {
    margin-top: 4px;
}

.submit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 24px;
}

.field-full {
    grid-column: 1 / -1;
}

.field label {
    display: block;
    margin-bottom: 8px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;
}

.field label span {
    color: var(--orange);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--navy);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    transition: .25s ease;
}

.field textarea {
    resize: vertical;
    min-height: 96px;
}

.field input::placeholder,
.field textarea::placeholder {
    color: #a4b2c6;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: 0;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(255,91,10,.12);
}

/* Only styles once the browser has flagged the value, not on first paint */
/* .field input:not(:placeholder-shown):invalid,
.field select:invalid:not(:focus):not([value=""]) {
    border-color: rgba(214,48,48,.55);
} */

/* File drop zone - the real input is hidden and driven by this label.
   Qualified with .field so it outranks the generic `.field label` rule. */
.field label.submit-drop {
    display: grid;
    place-items: center;
    gap: 6px;
    padding: 30px 20px;
    border: 2px dashed var(--line);
    border-radius: 14px;
    background: #f9fbff;
    cursor: pointer;
    text-align: center;
    transition: .25s ease;
}

.field label.submit-drop:hover {
    border-color: var(--orange);
    background: #fff6f1;
}

.field label.submit-drop i {
    color: var(--orange);
    font-size: 30px;
}

/* Qualified so it beats the required-asterisk rule `.field label span` */
.field label .submit-drop-text {
    color: var(--navy);
    font-size: 15px;
    font-weight: 700;
}

.field label.submit-drop small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

.submit-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px 26px;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.submit-note {
    flex: 1;
    min-width: 260px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.submit-note span {
    color: var(--orange);
    font-weight: 800;
}

@media (max-width: 991px) {
    .submit-meta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .submit-section {
        padding: 55px 0 70px;
    }

    .submit-form {
        padding: 26px 20px 30px;
    }

    .submit-grid {
        grid-template-columns: 1fr;
    }

    .submit-legend {
        font-size: 19px;
    }
}

/* Phone / WhatsApp: dialling-code select joined to the number input */
.field-phone {
    display: flex;
}

.field-phone .code-select {
    width: 108px;
    flex: none;
    border-radius: 10px 0 0 10px;
    border-right-color: transparent;
    padding-left: 12px;
    padding-right: 4px;
    font-size: 13px;
}

.field-phone input {
    border-radius: 0 10px 10px 0;
}

/* Keep the focus ring on top of the neighbouring control's border */
.field-phone .code-select:focus,
.field-phone input:focus {
    position: relative;
    z-index: 1;
}

@media (max-width: 400px) {
    .field-phone .code-select {
        width: 92px;
    }
}

/* =========================================================
   ABOUT CONFERENCE PAGE
   ========================================================= */

.about-hero {
    position: relative;
    padding: 80px 0 130px;
    overflow: hidden;
    text-align: center;
    color: #fff;
}

.about-hero h1 {
    margin: 0;
    color: #fff;
    font: 800 clamp(32px, 4.4vw, 56px)/1.1 "Sora", sans-serif;
    letter-spacing: -.03em;
    text-transform: uppercase;
}

.about-hero h1 em {
    color: #ffd9c4;
    font-style: normal;
}

/* This hero is centred, unlike the .page-hero the breadcrumb was written for */
.about-hero .page-crumb { justify-content: center; }

.about-hero > .container > p {
    max-width: 720px;
    margin: 16px auto 0;
    color: rgba(255,255,255,.86);
    font-size: 17px;
    line-height: 1.6;
}

.about-hero .page-crumb {
    margin-top: 20px;
    color: rgba(255,255,255,.72);
}

.about-hero .page-crumb i {
    color: #ffd9c4;
}

/* Cards ride up over the hero, like the reference */
.about-body {
    padding: 0 0 90px;
    background: #f6f8fd;
}

.about-body > .container {
    margin-top: -80px;
}

.about-card {
    padding: 38px 40px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 22px 55px rgba(3,19,51,.10);
}

.about-card + .about-card,
.about-card + .about-duo,
.about-duo + .about-card,
.about-duo + .about-trio,
.about-card + .about-trio {
    margin-top: 24px;
}

.about-card h2 {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 18px;
    color: var(--navy);
    font: 800 clamp(21px, 2.2vw, 27px)/1.3 "Sora", sans-serif;
    letter-spacing: -.02em;
}

.about-card h2 i {
    color: var(--orange);
    font-size: .9em;
}

.about-card p {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.85;
}

.about-card p:last-child {
    margin-bottom: 0;
}

.about-card strong {
    color: var(--navy);
    font-weight: 700;
}

/* Intro: photo beside the copy */
.about-intro {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 40px;
    align-items: center;
}

.about-shot {
    border-radius: 16px;
    overflow: hidden;
    background: #e7edf8;
}

.about-shot img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3.4;
    object-fit: cover;
    transition: .6s ease;
        transform: scale(1.05);
}

.about-intro:hover .about-shot img {
    transform: scale(1.05);
}

.about-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.about-facts > div {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    border-radius: 30px;
    background: #fff3ec;
    color: var(--navy);
    font-size: 13.5px;
    font-weight: 700;
}

.about-facts i {
    color: var(--orange);
    font-size: 15px;
}

.about-duo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.about-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.about-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 13px;
}

.about-list li {
    display: flex;
    gap: 11px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

.about-list i {
    flex: none;
    margin-top: 5px;
    color: var(--orange);
    font-size: 14px;
}

/* Theme block sits dark to break up the run of white cards */
.about-theme {
    background:
        radial-gradient(circle at 90% 8%, rgba(255,91,10,.28), transparent 40%),
        linear-gradient(125deg, #041a44, #0a2d6b);
    color: #fff;
    text-align: center;
}

/* Larger than the site-wide pill: this one heads a full-width band rather than
   labelling a column, so 11px reads as a stray caption on it. */
.about-theme .section-pill {
    padding: 10px 24px;
    font-size: 14px;
    letter-spacing: .12em;
}

.about-theme .section-pill i { font-size: 16px; }

.about-theme h2 {
    justify-content: center;
    margin: 18px 0 20px;
    color: #fff;
    font-size: clamp(24px, 2.8vw, 34px);
}

.about-theme p {
    max-width: 900px;
    margin: 0 auto 14px;
    color: #b7c7dc;
}

.about-theme p:last-child {
    margin-bottom: 0;
}

.about-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 26px;
    margin-top: 34px;
}

@media (max-width: 1199px) {
    .about-trio {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .about-intro,
    .about-duo {
        grid-template-columns: 1fr;
    }

    .about-card {
        padding: 30px 26px;
    }
}

@media (max-width: 767px) {
    .about-hero {
        padding: 58px 0 110px;
    }

    .about-body {
        padding-bottom: 65px;
    }

    .about-card {
        padding: 26px 22px;
    }
}

/* Conference theme panel backdrop */
.about-theme {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.about-theme > * {
    position: relative;
    z-index: 1;
}

/* Drawn circuit-and-leaf motif, used until a licensed photo is supplied */
.about-theme-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 45%, #000 20%, transparent 80%);
    mask-image: radial-gradient(ellipse 90% 90% at 50% 45%, #000 20%, transparent 80%);
}

.about-theme-art svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Optional photo, blended so the copy stays readable */
.about-theme-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .30;
    mix-blend-mode: luminosity;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 88% 88% at 50% 45%, #000 18%, transparent 78%);
    mask-image: radial-gradient(ellipse 88% 88% at 50% 45%, #000 18%, transparent 78%);
}

/* Breadcrumb banner backdrop - image sits under the existing gradients,
   dimmed and blurred at the edges so the title and crumb stay readable.
   background-image itself is emitted by header.php. */
.page-hero:before,
.about-hero:before,
.td-hero:before,
.hist-top:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .22;
    mix-blend-mode: luminosity;
    pointer-events: none;
}

.page-hero > .container,
.about-hero > .container {
    position: relative;
    z-index: 1;
}

/* =========================================================
   VENUE PAGE
   ========================================================= */

.vp-location {
    padding: 80px 0 0;
    background: #fff;
}

.vp-loc-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.vp-loc-copy h2 {
    margin: 18px 0 16px;
    color: var(--navy);
    font: 800 clamp(30px, 3.8vw, 48px)/1.1 "Sora", sans-serif;
    letter-spacing: -.04em;
}

.vp-loc-copy p {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.85;
}

.vp-loc-copy strong { color: var(--navy); }

.vp-tba {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border: 1px solid rgba(255,91,10,.35);
    border-radius: 10px;
    background: rgba(255,91,10,.06);
    color: var(--navy) !important;
    font-size: 14px !important;
}

.vp-tba i { color: var(--orange); font-size: 17px; }

/* The confirmed venue, in the slot the "announced soon" notice used to hold */
.vp-venue-name {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border: 1px solid rgba(255,91,10,.35);
    border-radius: 12px;
    background: rgba(255,91,10,.06);
}

.vp-venue-name i { flex: none; color: var(--orange); font-size: 22px; }

.vp-venue-name small {
    display: block;
    color: #b8460a;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .16em;
}

.vp-venue-name strong {
    display: block;
    margin-top: 4px;
    color: var(--navy);
    font: 800 19px/1.25 "Sora", sans-serif;
    letter-spacing: -.02em;
}

.vp-loc-shot {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(3,19,51,.16);
}

.vp-loc-shot img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: .6s ease;
}

.vp-loc-shot:hover img { transform: scale(1.05); }

/* Places */

.vp-places {
    padding: 90px 0;
    background: #fff;
}

.vp-head {
    max-width: 800px;
    margin: 0 auto 46px;
    text-align: center;
}

.vp-head h2 {
    margin: 16px 0 0;
    color: var(--navy);
    font: 800 clamp(28px, 3.4vw, 42px)/1.15 "Sora", sans-serif;
    letter-spacing: -.035em;
}

.vp-head h2 em { color: var(--orange); font-style: normal; }

.vp-head p {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
}

.vp-head.light h2 { color: #fff; }
.vp-head.light p  { color: #a9bdd9; }

.vp-place-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Photo card with the copy laid over it */
.vp-place {
    position: relative;
    display: block;
    aspect-ratio: 10 / 11;
    border-radius: 20px;
    overflow: hidden;
    background: var(--navy);
    box-shadow: 0 16px 36px rgba(3, 19, 51, .12);
    transition: transform .25s ease;
}

.vp-place:hover { transform: translateY(-5px); }

.vp-place > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.vp-place:hover > img { transform: scale(1.06); }

/* Shown when a slug has no photo yet */
.vp-place-ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .3);
    font-size: 46px;
}

.vp-place-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(3, 12, 33, .93) 8%,
        rgba(3, 12, 33, .62) 42%,
        rgba(3, 12, 33, .05) 78%);
}

.vp-place-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(3, 12, 33, .62);
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.vp-place-body {
    position: absolute;
    inset: auto 0 0 0;
    padding: 22px 22px 24px;
    color: #fff;
}

.vp-place-body h3 {
    margin: 0 0 8px;
    color: #fff;
    font: 700 19px/1.3 "Sora", sans-serif;
    letter-spacing: -.01em;
}

.vp-place-body p {
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-size: 14px;
    line-height: 1.65;
}

@media (max-width: 991px) {
    .vp-place-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .vp-place-grid { grid-template-columns: 1fr; }
    .vp-place { aspect-ratio: 4 / 3; }
}


/* Contact */

.vp-contact {
    padding: 90px 0;
    background:
        radial-gradient(circle at 12% 0%, rgba(18,101,232,.30), transparent 44%),
        radial-gradient(circle at 88% 100%, rgba(255,91,10,.18), transparent 42%),
        linear-gradient(180deg, #041a44, #020d27);
}

.vp-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.vp-contact-card {
    padding: 30px 26px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    background: rgba(255,255,255,.05);
    text-align: center;
    transition: .3s ease;
}

.vp-contact-card:hover {
    border-color: var(--orange);
    background: rgba(255,255,255,.08);
}

.vp-contact-card > i {
    display: block;
    color: var(--orange);
    font-size: 26px;
}

.vp-contact-card small {
    display: block;
    margin: 16px 0 8px;
    color: #8fa3c1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.vp-contact-card a,
.vp-contact-card span {
    display: block;
    color: #fff;
    font: 700 15px/1.6 "Sora", sans-serif;
    text-decoration: none;
    word-break: break-word;
}

.vp-contact-card a:hover { color: var(--orange); }

/* The line under each channel saying what it is for */
.vp-contact-note {
    margin: 12px 0 0;
    color: #9eb0c9;
    font-size: 14px;
    line-height: 1.7;
}

/* Office hours apply to all three, so they sit under the row, not in it */
.vp-contact-hours {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-top: 20px;
    padding: 16px 22px;
    border: 1px dashed rgba(255,255,255,.22);
    border-radius: 14px;
    color: #d5deee;
    font-size: 15px;
}

.vp-contact-hours i { color: var(--orange); font-size: 17px; }
.vp-contact-hours strong { color: #fff; }

@media (max-width: 991px) {
    .vp-loc-card      { grid-template-columns: 1fr; gap: 34px; }
    .vp-place-grid    { grid-template-columns: repeat(2, 1fr); }
    .vp-contact-grid  { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .vp-location   { padding-top: 55px; }
    .vp-places,
    .vp-contact    { padding: 60px 0; }
    .vp-place-grid,
    .vp-contact-grid { grid-template-columns: 1fr; }
    .vp-place-body { padding: 20px 20px 24px; }
}

/* =========================================================
   TENTATIVE PROGRAMME
   ========================================================= */

.tp-section {
    padding: 60px 0 90px;
    background: #f6f8fd;
}

.tp-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    max-width: 900px;
    margin: 0 auto 34px;
    padding: 16px 20px;
    border: 1px solid rgba(255,91,10,.32);
    border-radius: 12px;
    background: rgba(255,91,10,.06);
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

.tp-note i {
    flex: none;
    margin-top: 3px;
    color: var(--orange);
    font-size: 16px;
}

.tp-note a {
    color: var(--orange);
    font-weight: 700;
}

/* Day switcher */

.tp-days {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 34px;
}

.tp-day {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 22px 12px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--navy);
    text-align: left;
    cursor: pointer;
    transition: .25s ease;
}

.tp-day:hover { border-color: var(--orange); }

.tp-day-no {
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--navy);
    color: #fff;
    font: 800 13px "Sora", sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: .25s ease;
}

.tp-day-when strong {
    display: block;
    font: 800 17px "Sora", sans-serif;
    text-transform: uppercase;
}

.tp-day-when small {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    opacity: .8;
}

.tp-day.active {
    border-color: transparent;
    background: linear-gradient(120deg, var(--orange), #ff8c42);
    color: #fff;
    box-shadow: 0 14px 32px rgba(255,91,10,.30);
}

.tp-day.active .tp-day-no {
    background: rgba(255,255,255,.25);
}

/* Schedule rows */

.tp-row {
    display: grid;
    grid-template-columns: 210px 1fr;
    margin-bottom: 16px;
    border: 1px dashed #9e9e9e;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    transition: .25s ease;
        margin-bottom: 33px;
}

.tp-row:hover {
    border-color: rgba(255,91,10,.5);
    box-shadow: 0 16px 38px rgba(3,19,51,.08);
}

.tp-when {
    padding: 22px 20px;
    border-right: 1px solid var(--line);
    background: #fbfcfe;
}

.tp-time {
    display: block;
    padding: 9px 12px;
    border-radius: 7px;
    background: var(--orange);
    color: #fff;
    text-align: center;
    font: 800 13px "Sora", sans-serif;
    white-space: nowrap;
}

.tp-dur {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
}

.tp-dur i { color: var(--navy); font-size: 15px; }

.tp-body {
    padding: 22px 26px 24px;
    /* Sits left of the orange border accent */
    border-left: 3px solid var(--orange);
}

.tp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tp-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 30px;
    background: #64748b;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.tp-tag i { font-size: 12px; }

.tp-tag.open {
    background: #1d6ef5;
}

.tp-body h3 {
    margin: 14px 0 0;
    color: var(--navy);
    font: 800 19px/1.35 "Sora", sans-serif;
    text-transform: uppercase;
    letter-spacing: -.01em;
}

.tp-body > p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.8;
}

.tp-apply {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--orange);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.tp-apply:hover { color: var(--orange-light); }

/* Open slots read lighter than confirmed sessions */
.tp-row.is-slot {
    border-style: dashed;
    background: #fcfdff;
}

.tp-row.is-slot .tp-time {
    background: #64748b;
}

.tp-row.is-slot .tp-body {
    border-left-color: #cbd5e1;
}

/* Speakers */

.tp-speakers-head {
    margin: 22px 0 14px;
    color: var(--navy);
    font: 800 15px "Sora", sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tp-speaker {
    display: flex;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fbfcfe;
}

.tp-avatar {
    width: 54px;
    height: 54px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font: 800 20px "Sora", sans-serif;
}

.tp-speaker strong {
    display: block;
    color: var(--navy);
    font: 800 16px "Sora", sans-serif;
}

.tp-speaker small {
    display: block;
    margin-top: 3px;
    font-size: 13px;
}

.tp-role { color: var(--muted); }
.tp-org  { color: var(--orange); font-weight: 700; }

.tp-note-line {
    margin-top: 8px !important;
    color: var(--navy);
    font-weight: 600;
}

.tp-bio {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.75;
}

@media (max-width: 767px) {
    .tp-section { padding: 45px 0 65px; }

    .tp-days { gap: 12px; }

    .tp-day {
        flex: 1 1 100%;
        justify-content: flex-start;
    }

    .tp-row { grid-template-columns: 1fr; }

    .tp-when {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 16px 18px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .tp-dur { margin-top: 0; }

    .tp-body {
        padding: 18px 18px 20px;
        border-left: 0;
        border-top: 3px solid var(--orange);
    }

    .tp-row.is-slot .tp-body { border-top-color: #cbd5e1; }

    .tp-speaker { flex-direction: column; }
}

/* Publication FAQ additions (reuses .faqp-* from the submission FAQ) */

.faqp-intro {
    max-width: 900px;
    margin: 0 auto 34px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
    text-align: center;
}

.faqp-intro a {
    color: var(--orange);
    font-weight: 700;
    white-space: nowrap;
}

.faqp-help {
    max-width: 920px;
    margin: 45px auto 0;
    padding: 32px 36px;
    border: 1px solid rgba(255,91,10,.32);
    border-radius: 18px;
    background: rgba(255,91,10,.05);
    text-align: center;
}

.faqp-help h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin: 0 0 10px;
    color: var(--navy);
    font: 800 20px "Sora", sans-serif;
}

.faqp-help h3 i { color: var(--orange); }

.faqp-help p {
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 15px;
}

.faqp-help-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

.faqp-help-links a {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 16px 26px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    transition: .25s ease;
}

.faqp-help-links a:hover {
    transform: translateY(-3px);
    border-color: var(--orange);
    box-shadow: 0 14px 32px rgba(3,19,51,.10);
}

.faqp-help-links i {
    color: var(--orange);
    font-size: 20px;
}

.faqp-help-links small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.faqp-help-links strong {
    display: block;
    margin-top: 3px;
    color: var(--navy);
    font: 800 15px "Sora", sans-serif;
}

@media (max-width: 767px) {
    .faqp-help { padding: 24px 20px; }
    .faqp-help-links a { width: 100%; justify-content: center; }
}
/* =========================================================
   PLAGIARISM POLICY PAGE
   ========================================================= */

.pol-section {
    padding: 68px 0 90px;
    background: #f6f8fd;
}

/* ---- The two rule sets ---- */
.pol-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
    max-width: 1080px;
    margin: 0 auto;
}

.pol-doc {
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(3, 19, 51, .07);
    overflow: hidden;
}

.pol-doc-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 118px;
    padding: 22px 26px;
    background: linear-gradient(105deg, #eef3fd 0%, #f7f9fe 58%, #fff 100%);
}

.pol-doc-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    font-size: 24px;
    color: #fff;
}

.pol-doc-icon.navy   { background: linear-gradient(145deg, #1b3d8f, #0d245e); }
.pol-doc-icon.orange { background: linear-gradient(145deg, #ff7c2c, #ff5b0a); }

/* Element-qualified so it beats nothing and is beaten by nothing */
.pol-doc-head h2 {
    position: relative;
    z-index: 1;
    margin: 0;
    font: 700 clamp(19px, 2.1vw, 23px)/1.25 "Sora", sans-serif;
    color: var(--navy, #031333);
}

.pol-doc-head h2:after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 10px;
    border-radius: 2px;
    background: var(--orange, #ff5b0a);
}

.pol-doc-art {
    position: absolute;
    right: 14px;
    bottom: 0;
    width: 148px;
    height: 94px;
    opacity: .9;
    pointer-events: none;
}

.pol-list {
    list-style: none;
    margin: 0;
    padding: 6px 26px 24px;
}

.pol-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px solid #eef1f7;
}

.pol-list li:last-child { border-bottom: 0; }

.pol-list li i {
    flex: none;
    margin-top: 2px;
    color: var(--orange, #ff5b0a);
    font-size: 16px;
}

.pol-list li span {
    color: #4d5b73;
    font-size: 15px;
    line-height: 1.68;
}

/* ---- Closing band ---- */
.pol-cta {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    align-items: center;
    gap: 26px;
    max-width: 1080px;
    margin: 30px auto 0;
    padding: 26px 34px;
    border-radius: 18px;
    background: linear-gradient(120deg, #eef2fd, #f4f6fe 62%, #eaf0fd);
    border: 1px solid #e2e9f8;
}

.pol-cta-art {
    width: 120px;
    height: 110px;
}

.pol-cta-copy h2 {
    margin: 0 0 8px;
    font: 700 clamp(18px, 2.2vw, 22px)/1.42 "Sora", sans-serif;
    color: var(--navy, #031333);
}

.pol-cta-copy h2 em {
    font-style: normal;
    color: var(--orange, #ff5b0a);
}

.pol-cta-copy p {
    margin: 0;
    max-width: 420px;
    color: #5b6b85;
    font-size: 14.5px;
    line-height: 1.7;
}

.pol-cta-links {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ---- Reflow ---- */
@media (max-width: 991px) {
    .pol-grid { grid-template-columns: 1fr; }

    .pol-cta {
        grid-template-columns: 100px 1fr;
        row-gap: 20px;
    }

    .pol-cta-art { width: 100px; height: 92px; }

    .pol-cta-links { grid-column: 1 / -1; }
}

@media (max-width: 575px) {
    .pol-section { padding: 52px 0 70px; }

    .pol-doc-head { min-height: 0; }

    /* The art would sit under the title once the header wraps */
    .pol-doc-art { display: none; }

    .pol-cta {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding: 26px 22px;
    }

    .pol-cta-copy p { max-width: none; }

    .pol-cta-links { flex-direction: column; align-self: stretch; }
    .pol-cta-links > * { justify-content: center; width: 100%; }
}


/* =========================================================
   SESSION & TRACKS
   Ported from the scitech-session-tracks prototype.
   ========================================================= */

.tracks-section {
    position: relative;
    padding: 20px 0 90px;
    color: #fff;
}

.tracks-head {
    max-width: 720px;
    margin: 0 auto 42px;
    text-align: center;
}

.tracks-eyebrow {
    display: inline-block;
    color: var(--orange);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.tracks-head h2,
.bottom-cta h2 {
        margin: 10px 0;
    color: #05255e;
    font: 900 clamp(30px, 4vw, 48px) / 1.15 "Sora", sans-serif;
    letter-spacing: -.03em;
}

.tracks-head h2 span,
.bottom-cta h2 span {
    color: var(--orange);
}

.tracks-head p {
    margin: 0;
    color: #000;
    line-height: 1.7;
}

.tracks-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.track-card {
    /* now an <a> - kill the link underline it brings with it */
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    aspect-ratio: 2/3;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 18px;
    background: #101a35;
    box-shadow: 0 22px 50px rgba(0,0,0,.28);
    opacity: 0;
    translate: 0 24px;
    animation: trackReveal .7s ease forwards;
    animation-delay: var(--delay);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

@keyframes trackReveal {
    to { opacity: 1; translate: 0 0; }
}

/* Cards must stay visible when animation is suppressed */
@media (prefers-reduced-motion: reduce) {
    .track-card {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

.track-card:hover {
    transform: translateY(-9px) scale(1.015);
    border-color: rgba(255,101,15,.65);
    box-shadow: 0 28px 70px rgba(0,0,0,.48);
}

.track-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.track-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(0,0,0,.04) 25%, rgba(0,0,0,.12) 40%, rgba(0,0,0,.90) 100%);
}

.track-content {
    cursor: pointer;
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
}

.track-number {
    color: var(--orange);
    font: 900 27px/1 "Sora", sans-serif;
}

.track-line {
    width: 38px;
    height: 4px;
    margin-top: 8px;
    border-radius: 10px;
    background: var(--orange);
}

.track-content h3 {
       margin: auto 0 3px;
    color: #fff;
    font: 500 clamp(16px, 16px, 22px) / 1.25 "Sora", sans-serif;
    text-shadow: 0 2px 10px #000;
    line-height: 26px;
}

/* Mapped SDGs, on the foot of each track card - the official UN tiles.
   The caption baked into each tile is unreadable at this size by design; the
   colour, number and pictogram carry it, and alt/title give the full name. */

.track-sdgs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.track-sdgs li {
    display: block;
    width: 46px;
    height: 46px;
    border-radius: 6px;
    overflow: hidden;
    /* The cards are photographs - a hairline lifts the darker goals off them */
    box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.22);
}

.track-sdgs img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback when a tile file is missing: the goal's colour and number */
.track-sdgs li.is-plain {
    display: grid;
    place-items: center;
    background: var(--goal);
    color: #fff;
}

.track-sdgs b {
    font: 800 15px/1 "Sora", sans-serif;
}

.track-arrow {
    position: absolute;
    right: 15px;
    top: 17px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    color: #fff;
    /* opacity: 0; */
    transition: .3s ease;
}

.track-card:hover .track-arrow {
    opacity: 1;
    background: var(--orange);
}

.bottom-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 70px;
    padding: 35px 42px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    background: linear-gradient(110deg, #0a1b45, #111938);
    box-shadow: 0 20px 60px rgba(0,0,0,.22);
}

.bottom-cta h2 {
    margin: 7px 0;
    color: #fff;
    font-size: clamp(24px, 3vw, 38px);
}

.bottom-cta p {
    margin: 0;
    color: #9eacc8;
}

.btn-orange {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    padding: 14px 26px;
    border: 1px solid var(--orange);
    border-radius: 8px;
    background: var(--orange);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(255,101,15,.20);
    transition: .25s ease;
}

.btn-orange:hover {
    background: #ff7b2d;
    border-color: #ff7b2d;
    color: #fff;
    transform: translateY(-2px);
}

/* Secondary action on the navy CTA panel - same shape as .btn-orange, outlined */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    padding: 14px 26px;
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    color: #fff;
    font: 700 14px/1 "Inter", sans-serif;
    text-decoration: none;
    transition: .25s ease;
}

.btn-ghost:hover {
    border-color: rgba(255,255,255,.65);
    background: rgba(255,255,255,.12);
    color: #fff;
    transform: translateY(-2px);
}

/* Nothing to download yet - reads as a statement, not a button */
.btn-ghost.is-waiting {
    border-style: dashed;
    background: none;
    color: #9eacc8;
    cursor: default;
}

.btn-ghost.is-waiting:hover {
    border-color: rgba(255,255,255,.30);
    background: none;
    transform: none;
}

/* The three actions sit as one centred block against the copy, so a wrapped
   third button lines up under the pair rather than hanging off the left. */
.tracks-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* The Zoho form sets its own width, so the modal just gives it room */
.brochure-modal .modal-body {
    padding: 8px 12px 18px;
    overflow-x: auto;
}

.brochure-modal iframe {
    display: block;
    width: 100%;
    min-height: 520px;
    border: 0;
}

@media (max-width: 767px) {
    .tracks-cta-actions { width: 100%; }

    .tracks-cta-actions > * {
        flex: 1 1 100%;
        justify-content: center;
    }
}

@media (max-width: 1399px) {
    .tracks-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1099px) {
    .tracks-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
    .tracks-section { padding: 55px 0 70px; }
    .tracks-head    { margin-bottom: 30px; }

    .tracks-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .track-card      { aspect-ratio: 3/4; border-radius: 14px; }
    .track-content   { padding: 15px; }
    .track-content h3 { font-size: 16px; }
    .track-number    { font-size: 23px; }
    .track-arrow     { opacity: 1; }

    .track-sdgs      { gap: 5px; margin-top: 8px; }
    .track-sdgs li   { width: 38px; height: 38px; }

    .bottom-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 26px;
    }
}

/* =========================================================
   PAYMENT METHODS
   ========================================================= */

.pay-section {
    padding: 75px 0 90px;
    background: #f6f8fd;
}

.pay-head {
    max-width: 820px;
    margin: 0 auto 44px;
    text-align: center;
}

.pay-head h2 {
    margin: 0 0 14px;
    color: var(--navy);
    font: 800 clamp(28px, 3.4vw, 42px)/1.15 "Sora", sans-serif;
    letter-spacing: -.035em;
}

.pay-head h2 em { color: var(--orange); font-style: normal; }

.pay-head p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
}

.pay-methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 1000px;
    margin: 0 auto;
}

.pay-method {
    position: relative;
    padding: 34px 30px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    text-align: center;
    transition: .3s ease;
}

.pay-method:hover {
    transform: translateY(-6px);
    border-color: var(--orange);
    box-shadow: 0 20px 46px rgba(3,19,51,.10);
}

.pay-method-no {
    position: absolute;
    top: 18px;
    left: 22px;
    color: #d3ddec;
    font: 800 20px "Sora", sans-serif;
}

.pay-method > i {
    display: block;
    color: var(--orange);
    font-size: 34px;
}

.pay-method h3 {
    margin: 18px 0 6px;
    color: var(--navy);
    font: 800 19px "Sora", sans-serif;
}

.pay-method p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

/* Verify-before-paying notice */
.pay-verify {
    display: flex;
    gap: 16px;
    max-width: 1000px;
    margin: 26px auto 0;
    padding: 24px 28px;
    border: 1px solid rgba(255,91,10,.40);
    border-radius: 16px;
    background: rgba(255,91,10,.06);
}

.pay-verify > i {
    flex: none;
    margin-top: 2px;
    color: var(--orange);
    font-size: 24px;
}

.pay-verify strong {
    display: block;
    color: var(--navy);
    font: 800 17px "Sora", sans-serif;
}

.pay-verify p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}

.pay-verify a {
    color: var(--orange);
    font-weight: 800;
    white-space: nowrap;
}

/* Payment advisory. Navy rather than the orange notice above it - this is the
   standing security policy, not a step in the flow, and the two must not read
   as the same kind of message. */
.pay-advisory {
    max-width: 1000px;
    margin: 26px auto 0;
    padding: 34px 36px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 92% 6%, rgba(255,91,10,.20), transparent 46%),
        linear-gradient(140deg, #0a1b45, #111938);
    box-shadow: 0 22px 55px rgba(3,19,51,.20);
    color: #d5deee;
}

.pay-advisory-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffb083;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .16em;
}

.pay-advisory-head h2 {
    margin: 12px 0 0;
    color: #fff;
    font: 800 clamp(24px, 2.6vw, 32px)/1.15 "Sora", sans-serif;
    letter-spacing: -.03em;
}

.pay-advisory-head h2 em { color: var(--orange); font-style: normal; }

/* The two rules, stated before the paragraph that explains them */
.pay-advisory-flags {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 24px;
}

.pay-advisory-flags > div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.pay-advisory-flags i { flex: none; font-size: 21px; }
.pay-advisory-flags .is-yes i { color: #4ade80; }
.pay-advisory-flags .is-no  i { color: #ff6b6b; }

.pay-advisory > p {
    margin: 24px 0 0;
    font-size: 15px;
    line-height: 1.85;
}

.pay-advisory > p strong { color: #fff; }

.pay-advisory-contact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.14);
}

.pay-advisory-contact a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    text-decoration: none;
    transition: .25s ease;
}

.pay-advisory-contact a:hover {
    border-color: var(--orange);
    background: rgba(255,91,10,.10);
}

.pay-advisory-contact i {
    flex: none;
    color: var(--orange);
    font-size: 20px;
}

.pay-advisory-contact small {
    display: block;
    color: #9eb0c9;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.pay-advisory-contact strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font: 700 16px "Sora", sans-serif;
    word-break: break-word;
}

@media (max-width: 767px) {
    .pay-advisory { padding: 26px 22px; }

    .pay-advisory-flags,
    .pay-advisory-contact { grid-template-columns: 1fr; }
}

/* Bank details */
.pay-bank {
    max-width: 1000px;
    margin: 26px auto 0;
    padding: 36px 40px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 92% 10%, rgba(255,91,10,.24), transparent 42%),
        linear-gradient(125deg, #041a44, #0a2d6b);
    color: #fff;
}

.pay-bank h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 26px;
    color: #fff;
    font: 800 24px "Sora", sans-serif;
}

.pay-bank h2 i { color: var(--orange); }

.pay-bank-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    margin: 0;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.14);
}

.pay-bank-list > div {
    padding: 20px 24px;
    background: #041a44;
}

.pay-bank-list dt {
    color: #8fa3c1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.pay-bank-list dd {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 0;
    color: #fff;
    font: 700 17px "Sora", sans-serif;
    word-break: break-word;
}

.pay-copy {
    flex: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: .2s ease;
}

.pay-copy:hover {
    background: var(--orange);
    border-color: var(--orange);
}

.pay-copy.is-copied {
    background: #16a34a;
    border-color: #16a34a;
}

/* After payment */
.pay-next {
    max-width: 1000px;
    margin: 26px auto 0;
    padding: 36px 40px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    text-align: center;
}

.pay-next h2 {
    margin: 0 0 26px;
    color: var(--navy);
    font: 800 24px "Sora", sans-serif;
}

.pay-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
    text-align: left;
}

.pay-steps li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fbfcfe;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

.pay-steps span {
    flex: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--orange);
    color: #fff;
    font: 800 14px "Sora", sans-serif;
}

.pay-steps a { color: var(--orange); font-weight: 700; word-break: break-word; }

.pay-charges {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 24px;
    color: var(--navy);
    font-size: 14px;
    font-weight: 600;
}

.pay-charges i { color: var(--orange); font-size: 16px; }

.pay-form-soon {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.pay-form-soon i { color: var(--orange); }

@media (max-width: 991px) {
    .pay-methods,
    .pay-steps      { grid-template-columns: 1fr; }
    .pay-bank-list  { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .pay-section { padding: 55px 0 70px; }
    .pay-bank,
    .pay-next    { padding: 26px 22px; }
    .pay-verify  { padding: 20px; }
}

/* =========================================================
   REGISTRATION GUIDELINES
   ========================================================= */

.rg-section {
    padding: 75px 0 90px;
    background: #f6f8fd;
}

.rg-head {
    max-width: 820px;
    margin: 0 auto 34px;
    text-align: center;
}

.rg-head:not(:first-child) { margin-top: 60px; }

.rg-head h2 {
    margin: 0;
    color: var(--navy);
    font: 800 clamp(26px, 3.2vw, 40px)/1.15 "Sora", sans-serif;
    letter-spacing: -.035em;
}

.rg-head h2 em { color: var(--orange); font-style: normal; }

.rg-head p {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
}

/* Process steps */
.rg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.rg-step {
    position: relative;
    padding: 30px 28px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    transition: .3s ease;
}

.rg-step:hover {
    transform: translateY(-5px);
    border-color: var(--orange);
    box-shadow: 0 18px 42px rgba(3,19,51,.10);
}

.rg-step-no {
    position: absolute;
    top: 20px;
    right: 24px;
    color: #d3ddec;
    font: 800 22px "Sora", sans-serif;
}

.rg-step > i {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #fff0e8;
    color: var(--orange);
    font-size: 21px;
}

.rg-step h3 {
    margin: 18px 0 8px;
    padding-right: 34px;
    color: var(--navy);
    font: 800 18px/1.35 "Sora", sans-serif;
}

.rg-step p {
    margin: 0;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.75;
}

.rg-step a { color: var(--orange); font-weight: 700; word-break: break-word; }

.rg-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 22px 0 0;
    padding: 18px 24px;
    border: 1px solid rgba(255,91,10,.35);
    border-radius: 12px;
    background: rgba(255,91,10,.06);
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

.rg-note i { flex: none; margin-top: 3px; color: var(--orange); font-size: 18px; }
.rg-note strong { color: var(--navy); }

/* Deliverables */
.rg-deliverables {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.rg-deliverable {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 24px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--navy);
    font-size: 15px;
    font-weight: 700;
    transition: .25s ease;
}

.rg-deliverable:hover { border-color: var(--orange); transform: translateY(-3px); }
.rg-deliverable i { flex: none; color: var(--orange); font-size: 21px; }

/* Refund tiers */
.rg-refunds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.rg-refund {
    padding: 30px 28px;
    border-radius: 18px;
    color: #fff;
    text-align: center;
}

.rg-refund.good { background: linear-gradient(140deg, #15803d, #22a355); }
.rg-refund.mid  { background: linear-gradient(140deg, #b45309, #e08a1e); }
.rg-refund.none { background: linear-gradient(140deg, #7f1d1d, #b02c2c); }

.rg-refund b {
    display: block;
    font: 800 clamp(34px, 4vw, 48px)/1 "Sora", sans-serif;
    letter-spacing: -.04em;
}

.rg-refund span {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .9;
}

.rg-refund p {
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.28);
    font-size: 14.5px;
    line-height: 1.7;
}

/* Transfer + processing */
.rg-duo {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 22px;
    margin-top: 22px;
}

.rg-panel {
    padding: 30px 32px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.rg-panel h3 {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 18px;
    color: var(--navy);
    font: 800 19px "Sora", sans-serif;
}

.rg-panel h3 i { color: var(--orange); }

.rg-panel-text {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}

.rg-panel-text strong { color: var(--navy); }

.rg-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.rg-list li {
    display: flex;
    gap: 11px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

.rg-list i { flex: none; margin-top: 5px; color: var(--orange); font-size: 14px; }

/* Visa */
.rg-visa {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.rg-visa-card {
    padding: 30px 28px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    background:
        radial-gradient(circle at 90% 8%, rgba(255,91,10,.22), transparent 45%),
        linear-gradient(140deg, #041a44, #0a2d6b);
    color: #fff;
}

.rg-visa-card > i { color: var(--orange); font-size: 26px; }

.rg-visa-card h3 {
    margin: 16px 0 8px;
    color: #fff;
    font: 800 18px "Sora", sans-serif;
}

.rg-visa-card p {
    margin: 0;
    color: #b7c7dc;
    font-size: 14.5px;
    line-height: 1.75;
}

.rg-visa-card strong { color: #fff; }

.rg-help {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px 26px;
    margin-top: 40px;
}

.rg-help p { margin: 0; color: var(--muted); font-size: 15px; }

/* Volunteer roles and requirements (volunteer-guidelines.php). A fixed three
   columns rather than auto-fit, so a trailing odd panel keeps a third of the
   row instead of stretching across it. */
.vg-roles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 22px;
}

/* Four requirement panels read better two-up than 3 + 1 */
.vg-roles-duo { grid-template-columns: repeat(2, 1fr); }

.vg-closing {
    max-width: 760px;
    margin: 56px auto 0;
    padding-top: 40px;
    border-top: 1px solid var(--line);
    text-align: center;
}

.vg-closing h2 {
    margin: 0;
    color: var(--navy);
    font: 800 clamp(24px, 2.8vw, 34px)/1.2 "Sora", sans-serif;
    letter-spacing: -.035em;
}

.vg-closing h2 em { color: var(--orange); font-style: normal; }

.vg-closing p {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
}

@media (max-width: 1199px) {
    .vg-roles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
    .rg-grid,
    .rg-deliverables,
    .rg-refunds,
    .rg-visa,
    .rg-duo,
    .vg-roles,
    .vg-roles-duo { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .rg-section { padding: 55px 0 70px; }
    .rg-head:not(:first-child) { margin-top: 45px; }
    .rg-panel { padding: 24px 22px; }
    .vg-closing { margin-top: 44px; padding-top: 32px; }
}

/* Refund tiles inside an FAQ answer (compact form of .rg-refund) */
.faqp-refunds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 4px;
}

.faqp-refund {
    padding: 18px 20px;
    border-radius: 12px;
    color: #fff;
    text-align: center;
}

.faqp-refund.good { background: linear-gradient(140deg, #15803d, #22a355); }
.faqp-refund.mid  { background: linear-gradient(140deg, #b45309, #e08a1e); }
.faqp-refund.none { background: linear-gradient(140deg, #7f1d1d, #b02c2c); }

.faqp-refund b {
    display: block;
    font: 800 28px/1 "Sora", sans-serif;
    letter-spacing: -.03em;
}

.faqp-refund span {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .9;
}

.faqp-refund small {
    display: block;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.28);
    font-size: 13px;
    line-height: 1.5;
}

.faqp-more {
    margin: 16px 0 0 !important;
    font-size: 14px !important;
}

.faqp-more a { color: var(--orange); font-weight: 700; }

@media (max-width: 767px) {
    .faqp-refunds { grid-template-columns: 1fr; }
}

/* =========================================================
   JOURNALS & PUBLICATIONS
   ========================================================= */

.jp-head {
    max-width: 860px;
    margin: 0 auto 34px;
    text-align: center;
}

.jp-head h2 {
    margin: 0;
    color: var(--navy);
    font: 800 clamp(27px, 3.3vw, 42px)/1.15 "Sora", sans-serif;
    letter-spacing: -.035em;
}

.jp-head h2 em { color: var(--orange); font-style: normal; }

.jp-head p {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
}

.jp-head.light h2 { color: #fff; }

/* Intro */

.jp-intro {
    padding: 68px 0 72px;
    background: #fff7f2;
}

/* The pill replaces the old h2 - the section names itself */
.jp-tagline {
    margin-bottom: 26px;
    text-align: center;
}

.jp-tag {
    display: inline-block;
    padding: 11px 24px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #ffd9c2;
    color: var(--orange);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.jp-duo {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 20px;
    align-items: stretch;
}

.jp-quote {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: 36px 34px;
    border-radius: 24px;
    border: 0;
    background: linear-gradient(150deg, #ffe6d5, #ffd3b6);
}

.jp-quote i {
    display: block;
    margin-bottom: 10px;
    color: var(--orange);
    font-size: 34px;
    line-height: 1;
}

.jp-quote p {
    margin: 0;
    color: #7a3708;
    font: 600 20px/1.55 "Sora", sans-serif;
}

.jp-body {
    display: flex;
    align-items: center;
    padding: 34px 34px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(3, 19, 51, .05);
}

.jp-body p {
    margin: 0;
    color: #111111;
    font-size: 15.5px;
    line-height: 1.85;
}

.jp-indexing {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-top: 20px;
    padding: 26px 30px;
    border-radius: 24px;
    border: 0;
    background: #fff;
    box-shadow: 0 14px 34px rgba(3, 19, 51, .05);
}

.jp-indexing-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #e6f6ec;
    color: #16a34a;
    font-size: 22px;
}

.jp-indexing strong {
    display: block;
    margin-bottom: 6px;
    color: var(--navy);
    font: 700 16.5px/1.3 "Sora", sans-serif;
}

.jp-indexing p {
    margin: 0;
    color: #001e50;
    font-size: 15px;
    line-height: 1.75;
}

/* Qualified so it beats the block-level `.jp-indexing strong` rule above */
.jp-indexing p strong {
    display: inline;
    margin: 0;
    font: inherit;
    font-weight: 700;
    color: var(--navy);
}

@media (max-width: 991px) {
    .jp-duo { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .jp-intro { padding: 52px 0 56px; }
    .jp-quote { padding: 28px 24px; }
    .jp-quote p { font-size: 18px; }
    .jp-body { padding: 26px 24px; }
    .jp-indexing { flex-direction: column; padding: 24px 22px; }
}


/* Research journey */

.jp-journey {
    padding: 85px 0;
    background:
        radial-gradient(circle at 12% 0%, rgba(18,101,232,.28), transparent 44%),
        linear-gradient(180deg, #041a44, #020d27);
}

.jp-journey-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.jp-journey-quote {
    margin: 0;
    padding: 30px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    background: rgba(255,255,255,.05);
}

.jp-journey-quote i {
    color: var(--orange);
    font-size: 30px;
}

.jp-journey-quote p {
    margin: 10px 0 0;
    color: #cbd8ea;
    font-size: 15px;
    line-height: 1.85;
}

.jp-step {
    --tone: var(--orange);
    position: relative;
    padding: 30px 28px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: rgba(255,255,255,.04);
    transition: .3s ease;
}

.jp-step.amber  { --tone: #f5b301; }
.jp-step.blue   { --tone: #1d6ef5; }
.jp-step.purple { --tone: #a734d6; }
.jp-step.green  { --tone: #22a355; }
.jp-step.red    { --tone: #e0344a; }
.jp-step.orange { --tone: #ff7a18; }

.jp-step:hover {
    transform: translateY(-6px);
    border-color: var(--tone);
    background: rgba(255,255,255,.07);
}

.jp-step-no {
    position: absolute;
    top: 22px;
    right: 24px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--tone);
    color: #fff;
    font: 800 15px "Sora", sans-serif;
}

.jp-step > i {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--tone);
    color: #fff;
    font-size: 22px;
}

.jp-step h3 {
    margin: 18px 0 10px;
    padding-right: 40px;
    color: #fff;
    font: 800 19px/1.35 "Sora", sans-serif;
}

.jp-step p {
    margin: 0;
    color: #a9bdd9;
    font-size: 14.5px;
    line-height: 1.75;
}

.jp-journey-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 40px;
}

.jp-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: .25s ease;
}

.jp-btn-ghost:hover {
    background: #fff;
    border-color: #fff;
    color: var(--navy);
    transform: translateY(-2px);
}

/* Journals */

.jp-journals {
    padding: 0px 0;
    background: #fff;
}

.jp-journal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Pastel tiles: no border, no shadow - the fill carries the card */
.jp-journal {
    display: flex;
    flex-direction: column;
    padding: 30px 26px 28px;
    border-radius: 20px;
    background: var(--tint);
    transition: transform .2s ease;
}

.jp-journal.t1 { --tint: #fdeee2; --key: #ff5b0a; }
.jp-journal.t2 { --tint: #e9effb; --key: #2f7ff0; }
.jp-journal.t3 { --tint: #efeafc; --key: var(--orange); }
.jp-journal.t4 { --tint: #e8f5ec; --key: #22a04a; }

.jp-journal:hover { transform: translateY(-5px); }

.jp-journal-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--key);
    font-size: 23px;
}

.jp-journal h3 {
    margin: 24px 0 12px;
    color: var(--navy);
    font: 800 19px/1.32 "Sora", sans-serif;
    letter-spacing: -.01em;
}

.jp-journal p {
    margin: 0 0 18px;
    color: #111111;
    font-size: 14.5px;
    line-height: 1.72;
}

/* Issue types as pills; they wrap to their own lines in a narrow card */
.jp-types {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 20px;
    padding: 0;
}

.jp-types span {
    padding: 7px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #46536b;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.jp-register {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--orange);
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    transition: gap .2s ease;
}

.jp-register:hover {
    gap: 12px;
    background: none;
    color: #e04e05;
}

/* Research guidance */

.jp-guidance {
    padding: 85px 0 0;
    background: #fff;
}

.jp-guidance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    align-items: stretch;
}

/* Accent is per card - the middle one runs orange, the outer two navy */
.jp-guide {
    --accent: var(--navy);
    --accent-wash: #eef2fb;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(3, 19, 51, .09);
}

.jp-guide.is-orange {
    --accent: var(--orange);
    --accent-wash: #fff1e7;
}

/* Wedge behind the badge, and its small counterpart bottom-right */
.jp-guide-corner {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 90px;
    background: var(--accent);
    border-bottom-right-radius: 100% 100%;
}

.jp-guide-nub {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 56px;
    height: 56px;
    background: var(--accent);
    border-top-left-radius: 100% 100%;
}

.jp-guide-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 18px 24px 0;
}

.jp-guide-badge {
    flex: none;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    color: var(--accent);
    font-size: 25px;
    box-shadow: 0 8px 20px rgba(3, 19, 51, .18);
}

.jp-guide-top h3 {
    margin: 0;
    color: var(--navy);
    font: 700 20px/1.22 "Sora", sans-serif;
    letter-spacing: -.02em;
}

/* Short rule under the title, in the card's accent */
.jp-guide-top h3::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 9px;
    border-radius: 2px;
    background: var(--accent);
}

.jp-guide-list {
    position: relative;
    z-index: 1;
    flex: 1;
    align-content: start;
    margin: 0;
    padding:18px 24px 30px;
    list-style: none;
    display: grid;
    gap: 9px;
}

.jp-guide-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: #2c3a55;
    font-size: 14.8px;
    line-height: 1.38;
}

.jp-guide-list li i {
    flex: none;
    margin-top: 2px;
    color: var(--accent);
    font-size: 15px;
}

/* Foot of the card. A supplied illustration replaces the drawn wash. */
/* The art is a backdrop, not a band: taking it out of flow keeps the card
   height to the header plus the list, and the long top fade dissolves it
   into the white so the upper list rows still read cleanly. */
.jp-guide-art,
.jp-guide-art-ph {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    display: block;
    width: 100%;
}

.jp-guide-art {
          height: 24%;
    max-height: 240px;
    object-fit: cover;
    object-position: center;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 58%);
    mask-image: linear-gradient(to bottom, #ffffff00 0, #000000 58%);
    opacity: 0.1;
}

.jp-guide-art-ph {
    height: 45%;
    background-image:
        radial-gradient(rgba(3, 19, 51, .07) 1.5px, transparent 1.5px),
        linear-gradient(180deg, rgba(255, 255, 255, 0), var(--accent-wash));
    background-size: 15px 15px, 100% 100%;
}

@media (max-width: 991px) {
    .jp-guidance-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .jp-guidance-grid { grid-template-columns: 1fr; }
    .jp-guide-top { gap: 40px; }
    .jp-guide-badge { width: 54px; height: 54px; font-size: 23px; }
    .jp-guide-corner { width: 106px; height: 80px; }
    .jp-guide-art { height: 54%; min-height: 190px; max-height: 300px; }
    /* One wide column makes the art taller, so the rows need more clearance */
    .jp-guide-list { padding-bottom: 172px; }
}

/* Contact */

.jp-contact {
    padding: 0 0 0px;
    background: #fff;
}

.jp-contact-card {
    padding: 46px 44px;
    border-radius: 22px;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(circle at 88% 12%, rgba(255,91,10,.32), transparent 42%),
        linear-gradient(120deg, #041a44, #0a2d6b);
}

.jp-contact-card h2 {
    margin: 0 0 14px;
    color: #fff;
    font: 800 clamp(26px, 3vw, 36px) "Sora", sans-serif;
    letter-spacing: -.03em;
}

.jp-contact-card p {
    max-width: 720px;
    margin: 0 auto 26px;
    color: #b7c7dc;
    font-size: 15.5px;
    line-height: 1.8;
}

@media (max-width: 1199px) {
    .jp-journal-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
    .jp-journey-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .jp-intro,
    .jp-journey,
    .jp-journals,
    .jp-guidance { padding: 55px 0; }

    .jp-contact { padding-bottom: 65px; }

    .jp-journal-grid { grid-template-columns: 1fr; }

    .jp-quote { padding: 22px 22px 22px 58px; }
    .jp-quote p { font-size: 17px; }

    .jp-contact-card { padding: 30px 24px; }
}


/* =====================================================
   PUBLICATION PROCESS (publication-process.php)
===================================================== */
.pp-section {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    background: var(--bg-soft, #f6f8fc);
}

.pp-head {
    max-width: 760px;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.pp-head h2 {
    font-family: "Sora", sans-serif;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    font-weight: 700;
    color: var(--ink, #0b1f3a);
    margin-bottom: .9rem;
}

.pp-head h2 em {
    font-style: normal;
    color: var(--brand, #f26522);
}

.pp-head p {
    color: var(--ink-soft, #000);
    font-size: 1.02rem;
    line-height: 1.75;
    margin: 0;
}

/* Jump list */
.pp-overview {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .6rem;
    padding: 0;
    margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
}

.pp-overview a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .9rem;
    border: 1px solid rgba(11, 31, 58, .1);
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.pp-overview a:hover {
    border-color: var(--brand, #f26522);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(11, 31, 58, .08);
}

.pp-overview a b {
    font-family: "Sora", sans-serif;
    font-size: .78rem;
    font-weight: 700;
    color: var(--brand, #f26522);
    background: rgba(242, 101, 34, .1);
    border-radius: 8px;
    padding: .3rem .45rem;
    flex: none;
}

.pp-overview a span {
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink, #0b1f3a);
    line-height: 1.4;
}

.pp-overview a span em {
    font-style: normal;
    font-weight: 500;
    color: var(--ink-soft, #000);
}

/* Timeline */
.pp-timeline {
    position: relative;
    display: grid;
    gap: 1.1rem;
}

.pp-stage {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 1.1rem;
    align-items: start;
    scroll-margin-top: 120px;
}

/* The spine, drawn behind the numbers */
.pp-node {
    position: relative;
    display: flex;
    justify-content: center;
    align-self: stretch;
}

.pp-node:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: -1.1rem;
    width: 2px;
    background: linear-gradient(180deg, rgba(242, 101, 34, .35), rgba(242, 101, 34, .12));
}

.pp-stage:last-child .pp-node:before { display: none; }

.pp-no {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    font-family: "Sora", sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(140deg, #f8863f, #e2551a);
    box-shadow: 0 8px 20px rgba(226, 85, 26, .3);
}

.pp-card {
    background: #fff;
    border: 1px solid rgba(11, 31, 58, .08);
    border-radius: 16px;
    padding: clamp(1.15rem, 2.4vw, 1.6rem);
    box-shadow: 0 12px 28px rgba(11, 31, 58, .05);
}

.pp-card h3 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem;
    font-family: "Sora", sans-serif;
    font-size: clamp(1.05rem, 2vw, 1.24rem);
    font-weight: 700;
    color: var(--ink, #0b1f3a);
    margin: 0 0 .85rem;
}

.pp-card h3 > i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 1.06rem;
    color: var(--brand, #f26522);
    background: rgba(242, 101, 34, .1);
    flex: none;
}

.pp-optional {
    font-family: "Inter", sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1d6fb8;
    background: rgba(29, 111, 184, .1);
    border-radius: 999px;
    padding: .25rem .6rem;
}

.pp-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .55rem;
}

.pp-points li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
}

.pp-points li i {
    color: var(--brand, #f26522);
    font-size: .92rem;
    margin-top: .28rem;
    flex: none;
}

.pp-points li span {
    color: #000;
    font-size: .95rem;
    line-height: 1.7;
}

.pp-action {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: 1rem;
    padding: .5rem .95rem;
    border: 1px solid rgba(242, 101, 34, .35);
    border-radius: 999px;
    font-size: .87rem;
    font-weight: 600;
    color: var(--brand, #f26522);
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.pp-action:hover {
    background: var(--brand, #f26522);
    color: #fff;
}

.pp-help {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding: clamp(1.6rem, 3.4vw, 2.4rem);
    border-radius: 18px;
    background: linear-gradient(135deg, #0b1f3a, #143b6b);
    color: #fff;
    text-align: center;
}

.pp-help h3 {
    font-family: "Sora", sans-serif;
    font-size: clamp(1.15rem, 2.4vw, 1.45rem);
    font-weight: 700;
    margin: 0 0 .7rem;
}

.pp-help h3 i { color: #f8863f; margin-right: .45rem; }

.pp-help p {
    max-width: 560px;
    margin: 0 auto 1.4rem;
    color: rgba(255, 255, 255, .78);
    font-size: .97rem;
    line-height: 1.7;
}

.pp-help-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .8rem 1.4rem;
}

.pp-help-links .content-link { color: #ffd0b3; }
.pp-help-links .content-link:hover { color: #fff; }

@media (max-width: 575.98px) {
    .pp-stage { grid-template-columns: 46px 1fr; gap: .8rem; }
    .pp-no { width: 42px; height: 42px; font-size: .88rem; }
}


/* =====================================================
   ETHICS AND PUBLICATION MALPRACTICE (plagiarism-policy.php)
===================================================== */
.eth-head {
    max-width: 780px;
    margin: clamp(2.5rem, 5vw, 3.5rem) auto clamp(1.6rem, 3vw, 2.2rem);
    text-align: center;
}

.eth-head .section-pill { margin-bottom: 1rem; }

.eth-head h2 {
    font-family: "Sora", sans-serif;
    font-size: clamp(1.5rem, 3.2vw, 2.2rem);
    font-weight: 700;
    color: var(--ink, #0b1f3a);
    margin-bottom: .9rem;
}

.eth-head h2 em {
    font-style: normal;
    color: var(--brand, #f26522);
}

.eth-head p {
    color: #000;
    font-size: 1rem;
    line-height: 1.78;
    margin: 0;
}

.eth-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: "Sora", sans-serif;
    font-size: clamp(1.1rem, 2.2vw, 1.32rem);
    font-weight: 700;
    color: var(--ink, #0b1f3a);
    margin: clamp(1.8rem, 3.4vw, 2.6rem) 0 1.1rem;
    padding-bottom: .7rem;
    border-bottom: 2px solid rgba(11, 31, 58, .08);
}

.eth-title i { color: var(--brand, #f26522); }
.eth-title.warn i { color: #c8371f; }

/* All six guideline names, including the three with no body copy yet */
.eth-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    padding: 0;
    margin: 0 0 1.4rem;
}

.eth-chips li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .85rem;
    border-radius: 999px;
    font-size: .87rem;
    font-weight: 600;
    color: #0b1f3a;
    background: rgba(242, 101, 34, .1);
    border: 1px solid transparent;
}

.eth-chips li.is-outline {
    background: transparent;
    border-color: rgba(11, 31, 58, .16);
    color: var(--ink-soft, #000);
}

.eth-chips li i { color: var(--brand, #f26522); font-size: .92rem; }
.eth-chips li.is-outline i { color: #8b96ab; }

.eth-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1rem;
}

.eth-card {
    background: #fff;
    border: 1px solid rgba(11, 31, 58, .08);
    border-left: 4px solid var(--brand, #f26522);
    border-radius: 14px;
    padding: 1.2rem 1.3rem;
    box-shadow: 0 10px 24px rgba(11, 31, 58, .05);
}

.eth-card.warn { border-left-color: #c8371f; }

.eth-card h4 {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: "Sora", sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ink, #0b1f3a);
    margin: 0 0 .8rem;
}

.eth-card h4 i {
    color: var(--brand, #f26522);
    font-size: 1.06rem;
    flex: none;
}

.eth-card.warn h4 i { color: #c8371f; }

.eth-card .about-list li i { color: var(--brand, #f26522); }
.eth-card.warn .about-list li i { color: #c8371f; }

.eth-close {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    margin: clamp(1.8rem, 3.4vw, 2.4rem) 0 0;
    padding: 1.2rem 1.4rem;
    border-radius: 14px;
    background: rgba(11, 31, 58, .04);
    border: 1px dashed rgba(11, 31, 58, .16);
}

.eth-close i {
    color: var(--brand, #f26522);
    font-size: 1.3rem;
    margin-top: .15rem;
    flex: none;
}

.eth-close span {
    color: var(--ink-soft, #000);
    font-size: .96rem;
    line-height: 1.75;
}

/* The shared ethics block on the journals page: it follows the light guidance
   section, so give it a tint to separate the two. The .eth-head top margin is
   already supplied by the include. */
.jp-ethics {
    padding: 0 0 clamp(3rem, 6vw, 4.5rem);
    background: var(--bg-soft, #f6f8fc);
}

/* The publication process runs between the intro and the journal cards on
   journals-publications.php; tint it so the two white bands separate. */
.jp-process {
    padding: clamp(3rem, 6vw, 4.5rem) 0;
    background: #f6f8fd;
}

.jp-process .pp-head { margin-top: 0; }

/* The help block closes the process section, which now sits at the page foot.
   Keep it light: the footer directly below is dark navy, so a dark panel here
   would merge into it. */
.jp-process .pp-help {
    margin-top: 18px;
    background: #f6f8fd;
    border: 1px solid #e6ecf7;
    color: var(--navy, #031333);
}

.jp-process .pp-help h3 { color: var(--navy, #031333); }
.jp-process .pp-help h3 i { color: var(--orange, #ff5b0a); }
.jp-process .pp-help p { color: #5b6b85; }
.jp-process .pp-help .content-link { color: var(--orange, #ff5b0a); }
.jp-process .pp-help .content-link:hover { color: #e04e05; }

/* =====================================================
   PUBLICATION MALPRACTICE PREVENTION
   Eight cards arranged around a central integrity emblem.
   Markup lives in includes/ethics-section.php.
===================================================== */
.mal {
    --mal-gap: 34px;
    margin-top: clamp(2.4rem, 4.6vw, 3.4rem);
}

.mal-head {
    max-width: 760px;
    margin: 0 auto clamp(1.8rem, 3.4vw, 2.6rem);
    text-align: center;
}

.mal-head h3 {
    margin: 0;
    font: 700 clamp(24px, 3.4vw, 38px)/1.2 "Sora", sans-serif;
    color: #16305e;
    letter-spacing: -.02em;
}

/* Rule - dot - rule under the title */
.mal-divider {
    display: block;
    position: relative;
    width: 220px;
    height: 10px;
    margin: 16px auto 14px;
}

.mal-divider:before,
.mal-divider:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 92px;
    border-top: 2px solid var(--orange, #ff5b0a);
    opacity: .55;
}

.mal-divider:before { left: 0; }
.mal-divider:after  { right: 0; }

/* the dot between the two rules */
.mal-divider {
    background:
        radial-gradient(circle at 50% 50%, var(--orange, #ff5b0a) 0 4.5px, transparent 4.6px);
}

.mal-head p {
    margin: 0;
    color: #6b7a94;
    font-size: clamp(14.5px, 1.6vw, 17px);
    line-height: 1.7;
}

/* ---- The arrangement ---- */
.mal-grid {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 320px) 1fr;
    gap: var(--mal-gap);
    align-items: center;
}

.mal-col {
    display: grid;
    gap: 16px;
    align-content: center;
}

/* ---- Cards ---- */
.mal-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0;
    border:1px solid #bababa;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(3, 19, 51, .05);
}

/* Number tab, flush to the card's outer edge */
.mal-no {
    flex: none;
    align-self: stretch;
    display: grid;
    place-items: center;
    width: 58px;
    background: var(--tone);
    color: #fff;
    font: 800 22px/1 "Sora", sans-serif;
    letter-spacing: -.02em;
}

.mal-col.left  .mal-no { border-radius: 15px 0 0 15px; }
.mal-col.right .mal-no { border-radius: 0 15px 15px 0; order: 3; }

.mal-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tone) 12%, #fff);
    color: var(--tone);
    font-size: 26px;
}

.mal-col.right .mal-icon { order: 1; margin-left: 14px; }

.mal-copy { padding: 18px 20px 18px 0; }
.mal-col.right .mal-copy { order: 2; padding: 18px 0 18px 0; }

.mal-copy h4 {
    margin: 0 0 8px;
    font: 700 17px/1.3 "Sora", sans-serif;
    color: #16305e;
}

.mal-copy ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 7px;
}

.mal-copy li {
    position: relative;
    padding-left: 16px;
    color: #000;
    font-size: 14.5px;
    line-height: 1.62;
}

.mal-copy li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tone);
}

/* Spokes: a hairline from each card to a ring dot beside the emblem */
.mal-card:after {
    content: "";
    position: absolute;
    top: 50%;
    width: var(--mal-gap);
    border-top: 1.5px dashed #c2cfe3;
}

.mal-card:before {
    content: "";
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--tone);
    transform: translateY(-50%);
    z-index: 1;
}

.mal-col.left  .mal-card:after { left: 100%; }
.mal-col.right .mal-card:after { right: 100%; }

.mal-col.left  .mal-card:before { left: calc(100% + var(--mal-gap) - 5px); }
.mal-col.right .mal-card:before { right: calc(100% + var(--mal-gap) - 5px); }

/* ---- Central emblem ---- */
.mal-hub {
    align-self: center;
    display: grid;
    place-items: center;
    padding: 10px;
}

.mal-hub-ring {
    position: relative;
    display: grid;
    place-items: center;
    width: min(300px, 100%);
    aspect-ratio: 1;
    padding: 26px;
    border-radius: 50%;
    text-align: center;
    background: #fff;
    border: 1px solid #d7d7d7;
    box-shadow:
        0 0 0 12px #f4f7fc,
        0 18px 40px rgba(3, 19, 51, .08);
}

.mal-emblem {
    width: 134px;
    height: 134px;
    margin-bottom: 2px;
}

.mal-hub-ring strong {
    font: 700 15px/1.3 "Sora", sans-serif;
    color: #16305e;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.mal-hub-ring span {
    margin-top: 5px;
    color: #8b96ab;
    font-size: 13px;
}

/* ---- Closing band ---- */
.mal-foot {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 0;
    margin-top: clamp(1.8rem, 3.4vw, 2.6rem);
    border-radius: 16px;
    background: #f5f8fe;
    border: 1px solid #e3eaf7;
    overflow: hidden;
}

.mal-foot-note,
.mal-foot-warn {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 28px;
}

.mal-foot-warn { border-left: 1px solid #dde5f4; }

.mal-foot-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #16305e;
    color: #fff;
    font-size: 23px;
}

.mal-warn-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--orange, #ff5b0a);
    color: #fff;
    font-size: 21px;
}

.mal-foot-note p {
    margin: 0;
    color: #46536b;
    font-size: 15px;
    line-height: 1.72;
}

.mal-foot-warn p {
    margin: 0;
    color: #e04a08;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.66;
}

/* ---- Reflow ---- */
@media (max-width: 1199px) {
    .mal-grid { grid-template-columns: 1fr minmax(220px, 260px) 1fr; --mal-gap: 24px; }
    .mal-icon { width: 54px; height: 54px; font-size: 22px; }
    .mal-no { width: 50px; font-size: 19px; }
}

@media (max-width: 991px) {
    .mal-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    /* Emblem leads, then all eight cards in numeric order. display:contents
       lifts the cards out of their columns so 02 can follow 01 - otherwise the
       stack reads 01,03,05,07 then 02,04,06,08. */
    .mal-col { display: contents; }
    .mal-hub { order: 0; }
    .mal-card { order: var(--n); }

    /* Spokes have nothing to point at once the columns stack */
    .mal-card:after,
    .mal-card:before { display: none; }

    /* Right-hand cards adopt the left-hand layout */
    .mal-col.right .mal-no   { order: 0; border-radius: 15px 0 0 15px; }
    .mal-col.right .mal-icon { order: 0; margin-left: 0; }
    .mal-col.right .mal-copy { order: 0; padding: 18px 20px 18px 0; }

    .mal-foot { grid-template-columns: 1fr; }
    .mal-foot-warn { border-left: 0; border-top: 1px solid #dde5f4; }
}

@media (max-width: 575px) {
    .mal-card {
        flex-wrap: wrap;
        padding-bottom: 4px;
    }

    .mal-no { width: 46px; font-size: 17px; }
    .mal-icon { width: 46px; height: 46px; font-size: 19px; margin: 14px 0 0 14px; }
    .mal-col.right .mal-icon { margin: 14px 0 0 14px; }

    .mal-copy,
    .mal-col.right .mal-copy {
        flex: 1 1 100%;
        padding: 12px 18px 16px;
    }

    .mal-foot-note,
    .mal-foot-warn { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* =========================================================
   COMMITTEE PAGE (committee.php)
   ========================================================= */

.cm-head {
    max-width: 760px;
    margin: 0 auto 32px;
    text-align: center;
}

.cm-head .section-pill { margin-bottom: 14px; }

.cm-head h2 {
    margin: 0 0 12px;
    font: 700 clamp(23px, 3vw, 33px)/1.26 "Sora", sans-serif;
    color: var(--navy, #031333);
    letter-spacing: -.02em;
}

.cm-head h2 em { font-style: normal; color: var(--orange, #ff5b0a); }

.cm-head p {
    margin: 0;
    color: #000;
    font-size: 15.5px;
    line-height: 1.8;
}

/* ---- Roster (empty until the names arrive) ---- */
/* Last section on committee-members.php, so it carries its own bottom padding */
.cm-roster { padding: 68px 0 90px; background: #fff; }

.cm-members {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.cm-member {
    padding: 22px 24px;
    border: 1px solid #e9edf6;
    border-radius: 14px;
    background: #fff;
}

.cm-member h3 { margin: 0 0 6px; font: 700 17px/1.3 "Sora", sans-serif; color: var(--navy, #031333); }
.cm-member p  { margin: 0; color: #000; font-size: 14.5px; }

.cm-pending {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    max-width: 820px;
    margin: 0 auto;
    padding: 26px 30px;
    border-radius: 16px;
    background: #f6f8fd;
    border: 1px dashed #cfdaee;
}

.cm-pending > i {
    flex: none;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    color: var(--orange, #ff5b0a);
    font-size: 22px;
}

.cm-pending strong {
    display: block;
    margin-bottom: 6px;
    font: 700 17px/1.3 "Sora", sans-serif;
    color: var(--navy, #031333);
}

.cm-pending p { margin: 0; color: #000; font-size: 15px; line-height: 1.75; }

/* ---- Join / eligibility / responsibilities ---- */
.cm-join { padding: 68px 0 80px; background: #fff; }

.cm-duo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    align-items: start;
}

.cm-panel {
    padding: 30px 30px 32px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e9edf6;
    box-shadow: 0 12px 30px rgba(3, 19, 51, .05);
}

.cm-panel h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font: 700 19px/1.3 "Sora", sans-serif;
    color: var(--navy, #031333);
}

.cm-panel h3 i { color: var(--orange, #ff5b0a); font-size: 20px; }

.cm-panel-note {
    margin: 0 0 20px;
    color: #8b96ab;
    font-size: 14px;
}

.cm-elig, .cm-roles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.cm-elig li {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cm-elig-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #fff3ea;
    color: var(--orange, #ff5b0a);
    font-size: 18px;
}

.cm-elig li > span:last-child {
    color: #000;
    font-size: 15px;
    line-height: 1.6;
}

.cm-elig strong { color: var(--navy, #031333); font-weight: 700; }

.cm-roles li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.cm-role-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #eef3fd;
    color: #1b3d8f;
    font-size: 18px;
}

.cm-roles strong {
    display: block;
    margin-bottom: 3px;
    font: 700 15.5px/1.35 "Sora", sans-serif;
    color: var(--navy, #031333);
}

.cm-roles li span {
    color: #4d5b73;
    font-size: 14.5px;
    line-height: 1.65;
}

/* ---- Closing call to action ---- */
.cm-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 26px;
    padding: 32px 36px;
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 14%, rgba(255, 91, 10, .32), transparent 44%),
        linear-gradient(120deg, #041a44, #0a2d6b);
}

.cm-cta h3 {
    margin: 0 0 8px;
    font: 700 clamp(20px, 2.4vw, 26px)/1.28 "Sora", sans-serif;
    letter-spacing: -.02em;
}

.cm-cta p { margin: 0; max-width: 560px; color: #b7c7dc; font-size: 15px; line-height: 1.72; }

/* ---- Yes / No choice in the form ---- */
.cm-choice {
    display: flex;
    gap: 10px;
}

/* Qualified so it beats the blanket `.field label { display: block }` rule */
.cm-choice label.cm-opt,
.cm-choice > label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    margin: 0;
    padding: 12px 18px;
    border: 1px solid #dbe3f3;
    border-radius: 10px;
    background: #fff;
    color: var(--navy, #031333);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.cm-choice > label:hover { border-color: var(--orange, #ff5b0a); }

.cm-choice input[type="radio"] {
    width: 17px;
    height: 17px;
    accent-color: var(--orange, #ff5b0a);
    margin: 0;
}

.cm-choice > label:has(input:checked) {
    border-color: var(--orange, #ff5b0a);
    background: #fff6f0;
}

@media (max-width: 991px) {
    .cm-duo { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .cm-roster { padding: 52px 0 64px; }
    .cm-join { padding: 52px 0 64px; }
    .cm-pending { flex-direction: column; }
    .cm-cta { padding: 26px 22px; }
    .cm-cta .hero-btn { width: 100%; justify-content: center; }
    .cm-choice { flex-direction: column; }
}

/* committee.php puts a heading inside .submit-intro; abstract-submission.php has
   only a paragraph there, so the h2 had no rule and fell back to a plain italic em. */
.submit-intro h2 {
    margin: 0 0 12px;
    font: 700 clamp(23px, 3vw, 33px)/1.26 "Sora", sans-serif;
    color: var(--navy, #031333);
    letter-spacing: -.02em;
}

.submit-intro h2 em {
    font-style: normal;
    color: var(--orange, #ff5b0a);
}

/* Tab strip shared by the three committee pages (includes/committee-nav.php) */
.cm-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 auto 38px;
}

.cm-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border: 1px solid #e3e9f5;
    border-radius: 999px;
    background: #fff;
    color: #000;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.cm-tabs a i { font-size: 15px; color: #9aa8c0; }

.cm-tabs a:hover {
    border-color: var(--orange, #ff5b0a);
    color: var(--orange, #ff5b0a);
}

.cm-tabs a:hover i { color: var(--orange, #ff5b0a); }

.cm-tabs a.is-on {
    background: var(--orange, #ff5b0a);
    border-color: var(--orange, #ff5b0a);
    color: #fff;
}

.cm-tabs a.is-on i { color: #fff; }

/* The nomination form sits in .submit-section, which starts flush; give the
   strip room there. */
.submit-section .cm-tabs { margin-top: 4px; }

@media (max-width: 575px) {
    .cm-tabs a { flex: 1 1 100%; justify-content: center; }
}

/* =========================================================
   THIRD-LEVEL MENU
   Explore > About Us > ... and Explore > Committee > ...
   Bootstrap has no nested dropdown, so the flyout is CSS-only:
   shown on hover and on keyboard focus within the parent item.
   ========================================================= */

.nav-subdrop {
    position: relative;
}

/* The parent row keeps its chevron pushed to the right edge */
.nav-subdrop > .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.nav-subdrop > .dropdown-item > i {
    flex: none;
    font-size: 11px;
    opacity: .7;
    transition: transform .18s ease;
}

.nav-subdrop-menu {
    display: block;              /* not Bootstrap-toggled - visibility does the work */
    position: absolute;
    top: -8px;                   /* line the first item up with the parent row */
    left: 100%;
    margin: 0 0 0 6px;
    min-width: 250px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    pointer-events: none;
}

.nav-subdrop:hover > .nav-subdrop-menu,
.nav-subdrop:focus-within > .nav-subdrop-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

.nav-subdrop:hover > .dropdown-item > i,
.nav-subdrop:focus-within > .dropdown-item > i {
    transform: translateX(2px);
}

.nav-subdrop:hover > .dropdown-item,
.nav-subdrop:focus-within > .dropdown-item {
    background: rgba(255, 91, 10, .15);
    color: #fff;
}

/* A bridge across the 6px gap, so the pointer can travel to the flyout
   without passing over dead space and closing it */
.nav-subdrop > .nav-subdrop-menu:before {
    content: "";
    position: absolute;
    top: 0;
    right: 100%;
    width: 10px;
    height: 100%;
}

/* Near the right edge of the viewport the flyout would run off-screen;
   flip it to the left of the parent menu instead. */
.nav-subdrop.flip-left > .nav-subdrop-menu {
    left: auto;
    right: 100%;
    margin: 0 6px 0 0;
    transform: translateX(6px);
}

.nav-subdrop.flip-left:hover > .nav-subdrop-menu,
.nav-subdrop.flip-left:focus-within > .nav-subdrop-menu {
    transform: translateX(0);
}

.nav-subdrop.flip-left > .nav-subdrop-menu:before {
    right: auto;
    left: 100%;
}

/* ---- Mobile: a collapse nested inside the parent collapse ---- */
.mobile-subgroup-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border: 0;
    background: none;
    color: #9db1cc;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

.mobile-subgroup-toggle i {
    flex: none;
    color: var(--orange);
    font-size: 11px;
    transition: transform .3s ease;
}

.mobile-subgroup-toggle:not(.collapsed) { color: #fff; }
.mobile-subgroup-toggle:not(.collapsed) i { transform: rotate(180deg); }

.mobile-subsub {
    padding: 2px 0 8px 14px;
    border-left: 1px solid rgba(255, 91, 10, .22);
    margin-left: 2px;
}

/* Two levels down, so the .mobile-sub > a rule does not reach them */
.mobile-menu .mobile-subsub > a {
    display: block;
    padding: 9px 0;
    border-bottom: 0;
    color: #8ba0bd;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
}

.mobile-menu .mobile-subsub > a:hover { color: var(--orange); }

/* Below the navbar breakpoint the desktop dropdown collapses into the
   offcanvas, so the flyout must not linger. */
@media (max-width: 991.98px) {
    .nav-subdrop-menu { display: none; }
}

/* =========================================================
   PAST CONFERENCE SPEAKERS (past-conference-speakers.php)
   ========================================================= */
.pcs-section {
    padding: 68px 0 90px;
    background: #f6f8fd;
}

.pcs-head {
    max-width: 760px;
    margin: 0 auto 36px;
    text-align: center;
}

.pcs-head h2 {
    margin: 0 0 12px;
    font: 700 clamp(23px, 3vw, 33px)/1.26 "Sora", sans-serif;
    color: var(--navy);
    letter-spacing: -.02em;
}

.pcs-head h2 em { font-style: normal; color: var(--orange); }

.pcs-head p {
    margin: 0;
    color: #000;
    font-size: 15.5px;
    line-height: 1.8;
}

.pcs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: start;
}

.pcs-board {
    padding: 22px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(3, 19, 51, .06);
}

.pcs-board h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font: 700 19px/1.3 "Sora", sans-serif;
    color: var(--navy);
}

.pcs-board h3 i { color: var(--orange); font-size: 20px; }

/* The frame keeps the poster's aspect ratio, so the space is reserved before
   the image arrives and nothing below it jumps. */
.pcs-frame {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    background: #eef2f9;
    text-decoration: none;
}

.pcs-frame img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .35s ease;
}

.pcs-frame:hover img { transform: scale(1.015); }

.pcs-zoom {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 999px;
    background: rgba(3, 19, 51, .82);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
}

.pcs-frame:hover .pcs-zoom,
.pcs-frame:focus-visible .pcs-zoom {
    opacity: 1;
    transform: translateY(0);
}

/* Touch has no hover, so keep the hint on permanently there */
@media (hover: none) {
    .pcs-zoom { opacity: 1; transform: none; }
}

.pcs-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-top: 30px;
    padding: 30px 34px;
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 14%, rgba(255, 91, 10, .32), transparent 44%),
        linear-gradient(120deg, #041a44, #0a2d6b);
}

.pcs-cta h3 {
    margin: 0 0 7px;
    font: 700 clamp(19px, 2.3vw, 24px)/1.3 "Sora", sans-serif;
    letter-spacing: -.02em;
}

.pcs-cta p { margin: 0; color: #b7c7dc; font-size: 15px; line-height: 1.7; }

@media (max-width: 991px) {
    .pcs-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .pcs-section { padding: 52px 0 70px; }
    .pcs-board { padding: 16px; }
    .pcs-cta { padding: 26px 22px; }
    .pcs-cta .hero-btn { width: 100%; justify-content: center; }
}

/* =========================================================
   ABOUT IFERP (about-iferp.php)
   ========================================================= */

/* ---- Intro ---- */
.ai-intro { padding: 58px 0 46px; background: #faf8ff; }

.ai-split {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 56px;
    align-items: center;
}

/* Two frames, the smaller one overlapping the larger */
.ai-stack {
    position: relative;
    padding: 0 0 78px 0;
}

.ai-stack figure { margin: 0; }

.ai-stack img {
    display: block;
    width: 100%;
    height: auto;
}

.ai-stack-a {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(3, 19, 51, .14);
}

.ai-stack-b {
    position: absolute;
    right: -18px;
    bottom: 0;
    width: 54%;
    border-radius: 18px;
    overflow: hidden;
    border: 6px solid #faf8ff;
    box-shadow: 0 16px 36px rgba(3, 19, 51, .16);
}

.ai-stack-tag {
    position: absolute;
    left: -14px;
    bottom: 104px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(3, 19, 51, .14);
    color: var(--navy);
    font: 700 13.5px/1 "Sora", sans-serif;
    letter-spacing: .02em;
}

.ai-stack-tag i { color: #6d4bc4; font-size: 16px; }

/* Statements as an editorial list, not cards - the page below is card-heavy */
.ai-lead {
    list-style: none;
    counter-reset: lead;
    margin: 0;
    padding: 0;
}

.ai-lead li {
    counter-increment: lead;
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid #e9e1f6;
}

.ai-lead li:first-child { padding-top: 0; }
.ai-lead li:last-child { border-bottom: 0; padding-bottom: 0; }

.ai-lead li i {
    grid-row: 1;
    align-self: start;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f3ecff;
    color: #6d4bc4;
    font-size: 19px;
}

/* The counter sits beside the copy as a small marker */
.ai-lead li p {
    margin: 0;
    color: #46536b;
    font-size: 15.4px;
    line-height: 1.8;
}

.ai-lead li p:before {
    content: "0" counter(lead);
    display: block;
    margin-bottom: 6px;
    font: 800 11.5px/1 "Sora", sans-serif;
    color: #a898c9;
    letter-spacing: .16em;
}

@media (max-width: 991px) {
    .ai-split { grid-template-columns: 1fr; gap: 34px; }
    .ai-stack { max-width: 560px; margin: 0 auto; }
    .ai-stack-tag { left: 8px; }
}

@media (max-width: 575px) {
    .ai-stack { padding-bottom: 58px; }
    .ai-stack-b { right: 0; width: 58%; }
    .ai-stack-tag { bottom: auto; top: -14px; left: 8px; padding: 10px 16px; font-size: 12.5px; }
    .ai-lead li { grid-template-columns: 38px 1fr; gap: 14px; }
    .ai-lead li i { width: 38px; height: 38px; font-size: 16px; }
}

/* ---- What IFERP does ---- */
.ai-does { padding: 24px 0 62px; background: #faf8ff; }

.ai-card {
    padding: clamp(24px, 3.4vw, 40px);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(3, 19, 51, .06);
}

.ai-card h2 {
    margin: 0 0 14px;
    font: 700 clamp(20px, 2.5vw, 26px)/1.3 "Sora", sans-serif;
    color: var(--navy);
    letter-spacing: -.02em;
}

.ai-card-lead {
    margin: 0 0 26px;
    color: #000;
    font-size: 15.5px;
    line-height: 1.78;
}

.ai-activities { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }

.ai-activities li { display: flex; gap: 14px; align-items: flex-start; }

.ai-activities li > i {
    flex: none;
    margin-top: 2px;
    color: var(--tone);
    font-size: 19px;
}

.ai-activities strong {
    display: block;
    margin-bottom: 5px;
    font: 700 16px/1.35 "Sora", sans-serif;
    color: var(--navy);
}

.ai-activities p {
    margin: 0;
    color: #000;
    font-size: 15px;
    line-height: 1.72;
}

.ai-activities p strong { display: inline; margin: 0; font: inherit; font-weight: 700; color: var(--navy); }

/* ---- The six facets around the mark ---- */
.ai-facets {
    --ai-gap: 34px;
    padding: 62px 0;
    background: #fff;
}

.ai-grid {
    display: grid;
    grid-template-columns: 1fr minmax(210px, 260px) 1fr;
    gap: var(--ai-gap);
    align-items: center;
}

.ai-col { display: grid; gap: 18px; align-content: center; }

.ai-facet {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 22px 22px;
    border-radius: 18px;
    background: #fff;
    border: 1px dashed #6e6e6e;
    border-top: 3px solid var(--tone);
    box-shadow: 0 12px 30px rgba(3, 19, 51, .06);
}

.ai-facet-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tone) 14%, #fff);
    color: var(--tone);
    font-size: 19px;
}

.ai-facet h3 {
    margin: 0 0 7px;
    font: 700 15.5px/1.32 "Sora", sans-serif;
    color: var(--tone);
}

.ai-facet p {
    margin: 0;
    color: #000;
    font-size: 14px;
    line-height: 1.66;
}

/* Spokes to the central mark */
.ai-facet:after {
    content: "";
    position: absolute;
    top: 50%;
    width: var(--ai-gap);
    border-top: 1.5px dashed #6e6e6e;
}

.ai-facet:before {
    content: "";
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--tone);
    transform: translateY(-50%);
    z-index: 1;
}

.ai-col.left  .ai-facet:after { left: 100%; }
.ai-col.right .ai-facet:after { right: 100%; }
.ai-col.left  .ai-facet:before { left: calc(100% + var(--ai-gap) - 5px); }
.ai-col.right .ai-facet:before { right: calc(100% + var(--ai-gap) - 5px); }

.ai-hub { display: grid; place-items: center; }

.ai-hub-mark {
    display: grid;
    place-content: center;
    width: min(230px, 100%);
    aspect-ratio: 1;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    background: linear-gradient(150deg, #0c2a5e, #041a44);
    box-shadow: 0 0 0 10px #f3f6fc, 0 18px 40px rgba(3, 19, 51, .18);
}

.ai-hub-mark strong {
    display: block;
    font: 700 clamp(22px, 2.6vw, 30px)/1.15 "Sora", sans-serif;
    letter-spacing: -.02em;
}

.ai-hub-mark span {
    display: block;
    font: 700 clamp(22px, 2.6vw, 30px)/1.15 "Sora", sans-serif;
    color: #ff9c5b;
    letter-spacing: -.02em;
}

/* ---- Mission & vision ---- */
.ai-mission { padding: 62px 0 84px; background: #faf8ff; }

.ai-mission-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 44px;
    align-items: center;
}

.ai-mission-copy h2 {
    margin: 0 0 18px;
    font: 800 clamp(26px, 3.4vw, 38px)/1.2 "Sora", sans-serif;
    color: var(--navy);
    letter-spacing: -.03em;
}

.ai-mission-copy p {
    margin: 0 0 14px;
    color: #000;
    font-size: 15.5px;
    line-height: 1.8;
}

.ai-mission-copy strong { color: var(--navy); font-weight: 700; }

.ai-pillars { display: grid; gap: 16px; }

.ai-pillar {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-radius: 999px 18px 18px 999px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(3, 19, 51, .07);
    overflow: hidden;
}

.ai-pillar-badge {
    flex: none;
    width: 132px;
    display: grid;
    place-items: center;
    gap: 4px;
    padding: 18px 10px;
    color: #fff;
    background: linear-gradient(140deg, var(--from), var(--to));
    border-radius: 999px 40px 40px 999px;
}

.ai-pillar-badge i { font-size: 26px; }

.ai-pillar-badge b {
    font: 700 14px/1 "Sora", sans-serif;
    letter-spacing: .01em;
}

.ai-pillar > div { padding: 16px 22px 16px 20px; }

.ai-pillar-no {
    display: block;
    margin-bottom: 2px;
    font: 800 12px/1 "Sora", sans-serif;
    color: #9aa8c0;
    letter-spacing: .1em;
}

.ai-pillar h3 {
    margin: 0 0 5px;
    font: 700 15px/1.3 "Sora", sans-serif;
    color: var(--to);
}

.ai-pillar p {
    margin: 0;
    color: #000;
    font-size: 13.5px;
    line-height: 1.6;
}

/* ---- External links ---- */
.ai-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 44px;
}

.ai-links a {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px 12px;
    padding: 18px 22px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e9e3f6;
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease;
}

.ai-links a:hover { border-color: var(--orange); transform: translateY(-2px); }

.ai-links span {
    grid-column: 1;
    font: 700 13px/1 "Sora", sans-serif;
    color: var(--navy);
}

.ai-links b {
    grid-column: 1;
    font-size: 13px;
    font-weight: 500;
    color: #7b8aa5;
    /* break only when the URL genuinely overflows, not eagerly mid-word */
    overflow-wrap: anywhere;
}

.ai-links i {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: var(--orange);
    font-size: 15px;
}

/* ---- Reflow ---- */
@media (max-width: 1199px) {
    .ai-facets { --ai-gap: 22px; }
    .ai-grid { grid-template-columns: 1fr minmax(180px, 210px) 1fr; }
}

@media (max-width: 991px) {
    .ai-split { grid-template-columns: 1fr; gap: 28px; }
    .ai-photo { max-width: 340px; margin: 0 auto; }

    .ai-grid { grid-template-columns: 1fr; gap: 20px; }
    .ai-hub { order: -1; }
    .ai-facet:after, .ai-facet:before { display: none; }

    .ai-mission-grid { grid-template-columns: 1fr; gap: 26px; }
    .ai-links { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .ai-intro { padding: 46px 0 30px; }
    .ai-does { padding: 20px 0 46px; }
    .ai-facets, .ai-mission { padding: 46px 0 56px; }

    .ai-pillar { flex-direction: column; border-radius: 18px; }
    .ai-pillar-badge {
        width: 100%;
        flex-direction: row;
        justify-content: center;
        grid-auto-flow: column;
        border-radius: 18px 18px 0 0;
        padding: 12px;
    }
    .ai-pillar > div { padding: 16px 18px 18px; }
}

/* =========================================================
   HISTORY (history.php)
   ========================================================= */
/* Ground shared with .page-hero - see the rule by .page-hero */
.hist-top {
    position: relative;
    overflow: hidden;
    color: #fff;
}

/* No max-width: the photo column has to reach the viewport edge. The left
   padding still lines the copy up with the container used elsewhere. */
.hist-top-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    padding-left: max(24px, calc((100vw - 1320px) / 2 + 24px));
}

.hist-intro { padding: 56px 0; }

.hist-pill {
    display: inline-block;
    margin-bottom: 20px;
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.24);
    color: #ff5b0a;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hist-intro h1 {
    margin: 0 0 18px;
    font: 800 clamp(28px, 3.8vw, 42px)/1.18 "Sora", sans-serif;
    color: #fff;
    letter-spacing: -.03em;
}

.hist-intro h1 em {
    font-style: normal;
    /* lifted off the dark ground - the original violet was unreadable here */
    background: linear-gradient(92deg, #ffd5c0, #ff3d00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hist-rule {
    display: block;
    width: 64px;
    height: 3px;
    margin-bottom: 20px;
    border-radius: 2px;
    background: linear-gradient(90deg, #ff5b0a, #ff5b0a);
}

.hist-intro p {
    margin: 0;
    max-width: 420px;
    color: rgba(255,255,255,.86);
    font-size: 15px;
    line-height: 1.75;
}

/* The photo runs off the right edge, as in the reference */
.hist-shot {
       position: relative;
    align-self: stretch;
    min-height: 300px;
    width: 100%;
    margin: 9px -4px;
    background: #ffffff3d;
    border-radius: 30px;
}

/* Collage: four square-ish tiles either side of one tall feature */
.hist-collage {
    position: absolute;
    inset: 0;
    display: grid;
    /* minmax(0,...) or the rows inherit each image's min-content height and
       the tiles overflow the panel at narrow widths */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    padding: 0;
    border-radius: 26px 0 0 26px;
    overflow: hidden;
    background: rgba(255,255,255,.10);
}

.hist-collage img {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
    display: block;
}

/* The feature holds the middle column across both rows */
.hist-collage .is-feature {
    grid-column: 2;
    grid-row: 1 / span 2;
}

/* Tiles fill around it: a,b left column; c,d right column */
.hist-collage img:nth-of-type(2) { grid-column: 1; grid-row: 1; }
.hist-collage img:nth-of-type(3) { grid-column: 1; grid-row: 2; }
.hist-collage img:nth-of-type(4) { grid-column: 3; grid-row: 1; }
.hist-collage img:nth-of-type(5) { grid-column: 3; grid-row: 2; }

/* Dot grid over the photo's left edge */
.hist-dots {
    position: absolute;
    left: -34px;
    top: 18px;
    bottom: 18px;
    width: 120px;
    z-index: 1;
    background-image: radial-gradient(rgba(255,255,255,.55) 1.7px, transparent 1.8px);
    background-size: 12px 12px;
    -webkit-mask-image: linear-gradient(90deg, #000 35%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 35%, transparent 100%);
    pointer-events: none;
}

/* ---- The editions ---- */
.hist-list { padding: 44px 0 84px; background: #fdfbff; }

.hist-card {
    position: relative;
    display: grid;
    grid-template-columns: 116px 1fr 380px;
    gap: 8px 26px;
    align-items: center;
    margin-bottom: 22px;
    padding: 26px 28px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(3, 19, 51, .06);
}

.hist-card:last-of-type { margin-bottom: 30px; }

/* Badge and the connector running down the card */
.hist-marker {
    align-self: stretch;
    position: relative;
    display: flex;
    justify-content: center;
}

.hist-marker:before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 0;
    width: 2px;
    background: #ece6f8;
}

.hist-badge {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: var(--tone);
    color: #fff;
    font: 800 30px/1 "Sora", sans-serif;
    letter-spacing: -.03em;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--tone) 34%, transparent);
}

/* The wrapper keeps number and suffix in one inline run; `top` needs
   position:relative on sup, so vertical-align does the lifting instead. */
.hist-badge b { font: inherit; }
.hist-badge sup { font-size: .48em; font-weight: 700; vertical-align: super; }

.hist-dot {
    position: absolute;
    top: 104px;
    left: 50%;
    width: 13px;
    height: 13px;
    margin-left: -6.5px;
    border-radius: 50%;
    background: var(--tone);
}

.hist-body { align-self: center; }

.hist-body h2 {
    margin: 0 0 18px;
    max-width: 30ch;
    font: 700 clamp(17px, 1.9vw, 21px)/1.36 "Sora", sans-serif;
    color: var(--navy);
    letter-spacing: -.01em;
}

.hist-meta {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: grid;
    gap: 10px;
}

.hist-meta li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #000;
    font-size: 14.5px;
}

.hist-meta li i { color: var(--tone); font-size: 15px; }

.hist-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 8px;
    background: var(--tone);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: filter .18s ease, gap .18s ease;
}

.hist-btn:hover { filter: brightness(.92); gap: 14px; color: #fff; }

.hist-image {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.hist-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Closing band ---- */
.hist-legacy {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 22px;
    padding: 26px 30px;
    border-radius: 18px;
        background: linear-gradient(115deg, #d9e4ff, #ffc8ad);
    border: 1px solid #cacaca;
}

.hist-legacy-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(120deg, #ff5b0a, #ff5b0a);
    color: #fff;
    font-size: 24px;
}

.hist-legacy h3 {
       margin: 0 0 6px;
    font: 700 19px / 1.3 "Sora", sans-serif;
    /* background: linear-gradient(92deg, #7c3aed, #c026a3); */
    /* -webkit-background-clip: text; */
    /* background-clip: text; */
    color: #020d27;
}


.hist-legacy p { margin: 0; max-width: 560px; color: #000; font-size: 14.5px; line-height: 1.7; }

.hist-legacy-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: 10px;
    background: #fff;
       border: 1px solid #ffad84;
    color: #ff5b0a;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .18s ease, gap .18s ease;
}

.hist-legacy-btn:hover { border-color: #7c3aed; gap: 14px; color: #7c3aed; }

/* ---- Reflow ---- */
@media (max-width: 1199px) {
    .hist-card { grid-template-columns: 100px 1fr 300px; }
    .hist-badge { width: 64px; height: 64px; font-size: 26px; }
    .hist-dot { top: 92px; }
}

@media (max-width: 991px) {
    .hist-top-inner {
        grid-template-columns: 1fr;
        gap: 0;
        padding-left: 0;
    }

    .hist-intro { padding: 46px 24px 34px; }
    .hist-intro p { max-width: none; }
    .hist-shot { min-height: 320px; }
    .hist-collage { border-radius: 0; }
    .hist-dots { display: none; }

    .hist-card {
        grid-template-columns: 92px 1fr;
        gap: 18px;
    }

    /* The photo drops below the copy and spans the text column */
    .hist-image { grid-column: 2; }

    .hist-legacy { grid-template-columns: auto 1fr; }
    .hist-legacy-btn { grid-column: 1 / -1; justify-content: center; }
}

@media (max-width: 575px) {
    .hist-list { padding: 32px 0 64px; }

    .hist-card {
        grid-template-columns: 1fr;
        padding: 20px;
        gap: 16px;
    }

    .hist-marker { justify-content: flex-start; }
    .hist-marker:before, .hist-dot { display: none; }
    .hist-image { grid-column: 1; }

    .hist-legacy { grid-template-columns: 1fr; justify-items: start; }
    .hist-legacy-btn { width: 100%; }
}

/* =========================================================
   OTHER SERVICES BY IFERP (other-services.php)
   ========================================================= */
.os-section { padding: 68px 0 90px; background: #f6f8fd; }

.os-head {
    max-width: 780px;
    margin: 0 auto 30px;
    text-align: center;
}

.os-head h2 {
    margin: 0 0 12px;
    font: 700 clamp(23px, 3vw, 33px)/1.26 "Sora", sans-serif;
    color: var(--navy);
    letter-spacing: -.02em;
}

.os-head h2 em { font-style: normal; color: var(--orange); }

.os-head p {
    margin: 0;
    color: #000;
    font-size: 15.5px;
    line-height: 1.8;
}

/* Quick index */
.os-index {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 0;
    margin: 0 0 34px;
}

.os-index a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e6ecf7;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease;
}

.os-index a i { color: var(--tone); font-size: 15px; }

.os-index a:hover { border-color: var(--tone); color: var(--navy); }

/* Cards */
.os-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.os-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 30px 28px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e9edf6;
    box-shadow: 0 12px 32px rgba(3, 19, 51, .05);
    scroll-margin-top: 120px;
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease;
}

/* Tinted wash in the corner, in the card's own colour */
.os-card:before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tone) 10%, transparent);
    pointer-events: none;
}

.os-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--tone) 45%, #fff);
}

.os-no {
    position: absolute;
    top: 20px;
    right: 24px;
    font: 800 30px/1 "Sora", sans-serif;
    color: color-mix(in srgb, var(--tone) 22%, transparent);
    letter-spacing: -.04em;
}

.os-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 20px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--tone) 12%, #fff);
    color: var(--tone);
    font-size: 24px;
}

.os-card h3 {
    position: relative;
    margin: 0 0 10px;
    font: 700 20px/1.3 "Sora", sans-serif;
    color: var(--navy);
}

.os-card p {
    position: relative;
    margin: 0 0 22px;
    color: #000;
    font-size: 15px;
    line-height: 1.75;
}

.os-link {
    position: relative;
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 22px;
    border-radius: 999px;
    background: var(--tone);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: gap .18s ease, filter .18s ease;
}

.os-link:hover { gap: 13px; filter: brightness(.93); color: #fff; }

/* Closing band */
.os-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-top: 28px;
    padding: 30px 34px;
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 14%, rgba(255, 91, 10, .32), transparent 44%),
        linear-gradient(120deg, #041a44, #0a2d6b);
}

.os-cta h3 {
    margin: 0 0 7px;
    font: 700 clamp(19px, 2.3vw, 24px)/1.3 "Sora", sans-serif;
    letter-spacing: -.02em;
}

.os-cta p { margin: 0; color: #b7c7dc; font-size: 15px; line-height: 1.7; }

@media (max-width: 767px) {
    .os-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .os-section { padding: 52px 0 70px; }
    .os-card { padding: 24px 22px; }
    .os-cta { padding: 26px 22px; }
    .os-cta .hero-btn { width: 100%; justify-content: center; }
}

/* =========================================================
   CONTACT US (contact.php)
   ========================================================= */
.ct-section { padding: 68px 0 90px; background: #f6f8fd; }

.ct-head {
    max-width: 700px;
    margin: 0 auto 36px;
    text-align: center;
}

.ct-head h2 {
    margin: 0 0 12px;
    font: 700 clamp(23px, 3vw, 33px)/1.26 "Sora", sans-serif;
    color: var(--navy);
    letter-spacing: -.02em;
}

.ct-head h2 em { font-style: normal; color: var(--orange); }

.ct-head p {
    margin: 0;
    color: #000;
    font-size: 15.5px;
    line-height: 1.8;
}

.ct-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ct-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 34px 28px 30px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e9edf6;
    box-shadow: 0 12px 32px rgba(3, 19, 51, .05);
    transition: transform .2s ease, border-color .2s ease;
}

.ct-card:hover { transform: translateY(-4px); border-color: #ffd0b3; }

.ct-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #fff3ea;
    color: var(--orange);
    font-size: 25px;
}

.ct-card h3 {
    margin: 0 0 10px;
    font: 700 12px/1.3 "Sora", sans-serif;
    color: #8b96ab;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ct-value {
    display: block;
    margin-bottom: 12px;
    font: 700 clamp(16px, 1.9vw, 19px)/1.5 "Sora", sans-serif;
    color: var(--navy);
    text-decoration: none;
    overflow-wrap: anywhere;
}

a.ct-value:hover { color: var(--orange); }

.ct-card p {
    margin: 0;
    color: #000;
    font-size: 14.5px;
    line-height: 1.7;
}

.ct-hours {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    padding: 16px 22px;
    border-radius: 14px;
    background: #fff;
    border: 1px dashed #cfdaee;
    color: #000;
    font-size: 14.5px;
}

.ct-hours i { color: var(--orange); font-size: 17px; }
.ct-hours strong { color: var(--navy); font-weight: 700; }

.ct-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-top: 28px;
    padding: 30px 34px;
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 14%, rgba(255, 91, 10, .32), transparent 44%),
        linear-gradient(120deg, #041a44, #0a2d6b);
}

.ct-cta h3 {
    margin: 0 0 7px;
    font: 700 clamp(19px, 2.3vw, 24px)/1.3 "Sora", sans-serif;
    letter-spacing: -.02em;
}

.ct-cta p { margin: 0; color: #b7c7dc; font-size: 15px; line-height: 1.7; }

.ct-cta-links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.ct-ghost {
    display: inline-flex;
    align-items: center;
    padding: 15px 26px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.ct-ghost:hover { border-color: #ff9c5b; color: #ff9c5b; }

@media (max-width: 900px) {
    .ct-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .ct-section { padding: 52px 0 70px; }
    .ct-cta { padding: 26px 22px; }
    .ct-cta-links { width: 100%; }
    .ct-cta-links > * { width: 100%; justify-content: center; }
}

/* Track icons - the supplied SVGs are inlined so they inherit colour.
   Sits top-left, opposite the arrow. */
.track-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(4px);
    color: #fff;
    transition: background .3s ease, color .3s ease, transform .3s ease;
}

.track-icon svg {
    width: 26px;
    height: 26px;
    display: block;
}

.track-card:hover .track-icon {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 575px) {
    .track-icon { width: 40px; height: 40px; margin-bottom: 10px; }
    .track-icon svg { width: 22px; height: 22px; }
}

/* The homepage tracks section sits on a light band and carries a link through
   to the full page; the standalone page has no such button. */
.tracks-more {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

/* =========================================================
   SESSION TRACK DETAIL (track.php)
   ========================================================= */
/* Ground shared with .page-hero / .about-hero - see the rule by .page-hero */
.td-hero {
    position: relative;
    padding: 74px 0 62px;
    overflow: hidden;
    color: #fff;
}

.td-hero > .container { position: relative; z-index: 1; }

.td-hero .page-crumb { margin-bottom: 26px; color: rgba(255, 255, 255, .74); }
.td-hero .page-crumb a { color: rgba(255, 255, 255, .74); }
.td-hero .page-crumb a:hover { color: #fff; }
.td-hero .page-crumb i { color: var(--orange); }

.td-hero-main {
    display: flex;
    align-items: center;
    gap: 22px;
}

.td-hero-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
}

.td-hero-icon svg { width: 40px; height: 40px; display: block; }

.td-hero-no {
    display: block;
    margin-bottom: 8px;
    color: var(--orange);
    font: 800 12px/1 "Sora", sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.td-hero h1 {
    margin: 0;
    max-width: 22ch;
    font: 800 clamp(25px, 3.4vw, 42px)/1.18 "Sora", sans-serif;
    letter-spacing: -.02em;
}

/* ---- Body ---- */
.td-body { padding: 60px 0 84px; background: #f6f8fd; }

.td-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

.td-main { display: grid; gap: 18px; }

.td-block {
    padding: 28px 30px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e9edf6;
    box-shadow: 0 12px 30px rgba(3, 19, 51, .05);
}

.td-block h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font: 700 19px/1.3 "Sora", sans-serif;
    color: var(--navy);
}

.td-block h2 i { color: var(--orange); font-size: 19px; }

.td-block p {
    margin: 0;
    color: #4d5b73;
    font-size: 15.5px;
    line-height: 1.8;
}

.td-core {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: core;
    display: grid;
    gap: 12px;
}

.td-core li {
    counter-increment: core;
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 12px;
    align-items: start;
    color: #4d5b73;
    font-size: 15.2px;
    line-height: 1.7;
}

.td-core li:before {
    content: counter(core);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #fff3ea;
    color: var(--orange);
    font: 800 13px/1 "Sora", sans-serif;
}

.td-outcome {
    border-left: 4px solid var(--orange);
    background: linear-gradient(120deg, #fff, #fff8f3);
}

/* ---- Sidebar ---- */
.td-side { display: grid; gap: 18px; position: sticky; top: 110px; }

.td-card {
    padding: 24px 24px 26px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e9edf6;
    box-shadow: 0 12px 30px rgba(3, 19, 51, .05);
}

.td-card h3 {
    margin: 0 0 16px;
    font: 700 12px/1.3 "Sora", sans-serif;
    color: #8b96ab;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.td-sdgs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.td-sdgs li {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #eef1f7;
}

.td-sdg-tile {
    flex: none;
    display: block;
    width: 58px;
    height: 58px;
    object-fit: cover;
}

.td-sdg-no {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    background: var(--goal);
    color: #fff;
    font: 800 18px/1 "Sora", sans-serif;
}

.td-sdg-copy {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    color: var(--navy);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.td-sdg-copy i { color: var(--goal); font-size: 15px; flex: none; }

.td-focus { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.td-focus li {
    padding: 7px 14px;
    border-radius: 999px;
    background: #f2f5fb;
    color: #4d5b73;
    font-size: 13.5px;
    font-weight: 600;
}

.td-cta {
    color: #fff;
    border: 0;
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 91, 10, .32), transparent 46%),
        linear-gradient(120deg, #041a44, #0a2d6b);
}

.td-cta h3 { color: rgba(255, 255, 255, .62); }
.td-cta p { margin: 0 0 18px; color: #b7c7dc; font-size: 14.5px; line-height: 1.7; }

/* ---- Pending state ---- */
.td-pending {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 30px 32px;
    border-radius: 18px;
    background: #fff;
    border: 1px dashed #cfdaee;
}

.td-pending > i {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f6f8fd;
    color: var(--orange);
    font-size: 22px;
}

.td-pending strong {
    display: block;
    margin-bottom: 7px;
    font: 700 17px/1.3 "Sora", sans-serif;
    color: var(--navy);
}

.td-pending p { margin: 0; color: #000; font-size: 15px; line-height: 1.75; }

/* ---- Prev / next ---- */
.td-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid #e3e9f5;
}

.td-nav a { text-decoration: none; }

.td-nav-prev,
.td-nav-next {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e9edf6;
    color: var(--navy);
    transition: border-color .18s ease;
}

.td-nav-next { justify-content: flex-end; text-align: right; }

.td-nav-prev:hover,
.td-nav-next:hover { border-color: var(--orange); color: var(--navy); }

.td-nav-prev i,
.td-nav-next i { color: var(--orange); font-size: 17px; flex: none; }

.td-nav span {
    display: block;
    font: 600 14.5px/1.4 "Sora", sans-serif;
}

.td-nav small {
    display: block;
    margin-bottom: 3px;
    color: #8b96ab;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.td-nav-all {
    padding: 14px 22px;
    border-radius: 999px;
    background: var(--navy);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.td-nav-all:hover { background: var(--orange); color: #fff; }

@media (max-width: 991px) {
    .td-grid { grid-template-columns: 1fr; }
    .td-side { position: static; }
}

@media (max-width: 767px) {
    .td-nav { grid-template-columns: 1fr; }
    .td-nav-next { justify-content: flex-start; text-align: left; flex-direction: row-reverse; }
    .td-nav-all { text-align: center; }
}

@media (max-width: 575px) {
    .td-hero { padding: 54px 0 46px; }
    .td-hero-main { flex-direction: column; align-items: flex-start; gap: 16px; }
    .td-hero-icon { width: 60px; height: 60px; }
    .td-hero-icon svg { width: 30px; height: 30px; }
    .td-body { padding: 44px 0 64px; }
    .td-block { padding: 22px 20px; }
    .td-pending { flex-direction: column; }
}

/* =========================================================
   REGISTRATION OFFER CARDS + MODALS (index.php #register)
   ========================================================= */
.offer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 22px;
}

/* Filled cards on a single row: icon, copy, button. The page below is a run of
   white panels, so these carry their colour rather than a tinted border. */
.offer-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 24px 26px;
    border-radius: 18px;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 16px 36px rgba(3, 19, 51, .14);
    transition: transform .2s ease, box-shadow .2s ease;
}

/* Stops chosen so the LIGHTEST end still clears 4.5:1 against white text -
   the first attempt bottomed out at 1.95:1 on the gold. */
.offer-card.gold {
    --key: #7a2a02;
    --soft: #ffd9c2;
    background: linear-gradient(118deg, #7a2a02 0%, #a33703 58%, #c44304 100%);
}

.offer-card.sky {
    --key: #031333;
    --soft: #bcd4ff;
    background: linear-gradient(118deg, #031333 0%, #073a9d 62%, #0a4bc4 100%);
}

/* A soft light source in the top-right, so the fill is not flat */
.offer-card:before {
    content: "";
    position: absolute;
    top: -70px;
    right: -50px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    pointer-events: none;
}

.offer-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 46px rgba(3, 19, 51, .2);
}

.offer-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    font-size: 25px;
}

.offer-copy { position: relative; }

.offer-tag {
    display: inline-block;
    margin-bottom: 9px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.offer-copy h3 {
    margin: 0;
    max-width: 34ch;
    font: 700 17px/1.45 "Sora", sans-serif;
    color: #fff;
}

.offer-copy h3 strong { color: var(--soft); font-weight: 800; }

.offer-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 22px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--key);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: gap .18s ease, background .18s ease;
}

.offer-btn:hover { gap: 13px; background: var(--soft); }

@media (max-width: 1199px) {
    .offer-card { grid-template-columns: auto 1fr; row-gap: 16px; }
    .offer-btn { grid-column: 2; justify-self: start; }
}

@media (max-width: 991px) {
    .offer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .offer-card { grid-template-columns: 1fr; gap: 14px; padding: 22px; }
    .offer-btn { grid-column: 1; width: 100%; justify-content: center; }
}

/* ---- Modals ---- */
.offer-modal .modal-content {
    border: 0;
    border-radius: 20px;
    overflow: hidden;
}

.offer-modal-head {
    position: relative;
    padding: 30px 34px 26px;
    color: #fff;
}

.offer-modal-head.gold {
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 140, 66, .38), transparent 46%),
        linear-gradient(120deg, #7a2a02, #b53d03);
}

.offer-modal-head.sky {
    background:
        radial-gradient(circle at 88% 12%, rgba(18, 101, 232, .42), transparent 46%),
        linear-gradient(120deg, #031333, #073a9d);
}

.offer-modal-head .btn-close {
    position: absolute;
    top: 18px;
    right: 20px;
    filter: invert(1) grayscale(1) brightness(2);
    opacity: .8;
}

.offer-modal-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 14px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .24);
    font-size: 24px;
}

.offer-modal-head h4 {
    margin: 0;
    font: 700 clamp(19px, 2.4vw, 25px)/1.3 "Sora", sans-serif;
    letter-spacing: -.02em;
}

.offer-modal .modal-body { padding: 26px 34px 6px; }

.offer-modal-lead {
    margin: 0 0 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eef1f7;
    color: #000;
    font-size: 15px;
    line-height: 1.8;
}

.offer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.offer-list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.offer-list li i {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #f4f7fd;
    color: var(--orange);
    font-size: 15px;
}

.offer-list li span {
    color: #4d5b73;
    font-size: 15px;
    line-height: 1.7;
}

.offer-list.titled li span strong {
    display: block;
    margin-bottom: 2px;
    color: var(--navy);
    font: 700 15.5px/1.4 "Sora", sans-serif;
}

.offer-modal-foot {
    justify-content: flex-start;
    gap: 12px;
    padding: 20px 34px 26px;
    border-top: 1px solid #eef1f7;
}

.offer-modal-close {
    padding: 14px 22px;
    border: 1px solid #dbe3f3;
    border-radius: 10px;
    background: #fff;
    color: var(--navy);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.offer-modal-close:hover { border-color: var(--orange); color: var(--orange); }

@media (max-width: 991px) {
    .offer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .offer-card { grid-template-columns: 1fr; gap: 14px; }
    .offer-icon { grid-row: auto; }
    .offer-btn { grid-column: 1; width: 100%; justify-content: center; }
    .offer-modal-head { padding: 24px 22px 20px; }
    .offer-modal .modal-body { padding: 22px 22px 4px; }
    .offer-modal-foot { padding: 18px 22px 22px; flex-direction: column; align-items: stretch; }
    .offer-modal-foot > * { width: 100%; justify-content: center; text-align: center; }
}

/* =========================================================
   CONFERENCE REGISTRATION (conference-registration.php)
   ========================================================= */
.cr-section { padding: 68px 0 90px; background: #f6f8fd; }

/* The join panel is borrowed from the homepage; on its own page it needs the
   bottom margin the homepage section used to supply. */
.cr-section .join-panel { margin-bottom: 22px; }

.cr-next {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 22px;
}

.cr-next-card {
    position: relative;
    display: block;
    padding: 26px 26px 24px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e9edf6;
    box-shadow: 0 12px 30px rgba(3, 19, 51, .05);
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease;
}

.cr-next-card:hover { border-color: var(--orange); transform: translateY(-3px); }

.cr-next-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 13px;
    background: #fff3ea;
    color: var(--orange);
    font-size: 20px;
}

.cr-next-card strong {
    display: block;
    margin-bottom: 6px;
    font: 700 16.5px/1.3 "Sora", sans-serif;
    color: var(--navy);
}

.cr-next-card > span:last-of-type {
    display: block;
    color: #000;
    font-size: 14.5px;
    line-height: 1.7;
}

.cr-next-go {
    position: absolute;
    top: 28px;
    right: 26px;
    color: #c3cede;
    font-size: 17px;
    transition: color .18s ease;
}

.cr-next-card:hover .cr-next-go { color: var(--orange); }

@media (max-width: 991px) {
    .cr-next { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .cr-section { padding: 52px 0 70px; }
}

/* =========================================================
   REGISTRATION FEES (conference-registration.php)
   ========================================================= */
.fee-block { margin-top: 22px; }

.fee-head {
    max-width: 700px;
    margin: 0 auto 24px;
    text-align: center;
}

.fee-head h2 {
    margin: 0 0 10px;
    font: 700 clamp(22px, 2.8vw, 30px)/1.28 "Sora", sans-serif;
    color: var(--navy);
    letter-spacing: -.02em;
}

.fee-head h2 em { font-style: normal; color: var(--orange); }
.fee-head p { margin: 0; color: #000; font-size: 15px; line-height: 1.7; }

/* Tabs */
.fee-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    margin: 0 auto 20px;
    border-radius: 999px;
    background: #eaeff8;
    /* .nav is a flex container by default; centre the pill group */
    justify-content: center;
    width: auto;
}

.fee-block > .fee-tabs { display: flex; max-width: max-content; }

.fee-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 22px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #000;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.fee-tab i { font-size: 15px; }

.fee-tab.active {
    background: #05255f;
    color: #fff;
    box-shadow: 0 4px 14px rgba(3, 19, 51, .1);
}

.fee-tab.active i { color: var(--orange); }

/* Column legend - desktop only, the chips repeat the labels below that */
.fee-legend {
       display: grid;
    grid-template-columns: 1.35fr repeat(4, 1fr);
    gap: 10px;
    padding: 10px 26px 10px;
    background: #eaeff8;
}

.fee-legend > span {
    text-align: center;
    color: var(--navy);
    font: 700 12.5px/1.3 "Sora", sans-serif;
}

.fee-legend > span small {
    display: block;
    margin-bottom: 2px;
    color: #8b96ab;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Rows */
.fee-row {
    display: grid;
    grid-template-columns: 1.35fr 4fr;
    align-items: center;
    gap: 18px;
    margin-bottom: 12px;
    padding: 20px 26px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e9edf6;
    box-shadow: 0 10px 26px rgba(3, 19, 51, .05);
    transition: border-color .18s ease;
}

.fee-row:hover { border-color: #ffd0b3; }

.fee-cat {
    display: flex;
    align-items: center;
    gap: 13px;
}

.fee-cat-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff3ea;
    color: var(--orange);
    font-size: 19px;
}

.fee-cat h3 {
    margin: 0;
    font: 700 16.5px/1.35 "Sora", sans-serif;
    color: var(--navy);
}

.fee-prices {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.fee-price {
    padding: 12px 10px;
    border: 1px solid #d7dfee;
    border-radius: 12px;
    background: #f4f7fd;
    text-align: center;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.fee-price.abroad {
    border-color: #f2d9c6;
    background: #fff6f0;
}

.fee-price:hover {
    border-color: var(--orange);
    background: #fff;
}

.fee-price:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

.fee-price small {
    display: block;
    margin-bottom: 5px;
    color: #8b96ab;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.3;
}

.fee-price b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 800 18px/1 "Sora", sans-serif;
    color: var(--navy);
    letter-spacing: -.02em;
}

/* Empty ring at rest, filled dot once picked */
.fee-price b::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    border: 2px solid #b4c1d8;
    border-radius: 50%;
    background: #fff;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.fee-price.abroad b { color: #d84a00; }
.fee-price.abroad b::before { border-color: #d8b49c; }

.fee-price:hover b::before { border-color: var(--orange); }

.fee-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 0;
    padding: 14px 20px;
    border-radius: 12px;
    background: #fff;
    border: 1px dashed #cfdaee;
    color: #000;
    font-size: 14.5px;
}

.fee-note i { color: var(--orange); font-size: 16px; flex: none; }

/* Wide screens show the legend; narrower ones rely on each chip's own label */
@media (min-width: 992px) {
    .fee-price small { display: none; }
}

@media (max-width: 991px) {
    .fee-legend { display: none; }
    .fee-row { grid-template-columns: 1fr; gap: 16px; }
    .fee-prices { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    .fee-row { padding: 18px; }
    .fee-prices { grid-template-columns: 1fr; }
    .fee-price { display: flex; align-items: center; justify-content: space-between; text-align: left; }
    .fee-price small { margin: 0; }
    .fee-tabs { width: 100%; max-width: none; }
    .fee-tab { flex: 1; justify-content: center; padding: 11px 12px; font-size: 13.5px; }
}

/* =========================================================
   ORDER SUMMARY + PERSONAL DETAILS (conference-registration.php)
   ========================================================= */
.fee-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 22px;
    align-items: start;
    margin-top: 22px;
}

.step-no {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 15px;
    border-radius: 999px;
    background: #eef1f9;
    color: #000;
    font: 800 11px/1 "Sora", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.fee-block { margin-top: 0; }
.fee-block .fee-head { margin-left: 0; margin-right: 0; text-align: left; }
.fee-block .fee-tabs { margin-left: 0; }

/* ---- Summary ---- */
.sum-wrap { position: sticky; top: 110px; display: grid; gap: 14px; }

.sum-card {
    padding: 24px 24px 26px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e9edf6;
    box-shadow: 0 12px 30px rgba(3, 19, 51, .06);
}

.sum-card h3 {
    margin: 0 0 18px;
    font: 700 18px/1.3 "Sora", sans-serif;
    color: var(--navy);
}

.sum-list { margin: 0 0 4px; }

.sum-list > div {
    padding: 12px 0;
    border-bottom: 1px solid #eef1f7;
}

.sum-list dt {
    margin-bottom: 4px;
    color: #8b96ab;
    font-size: 12.5px;
    font-weight: 600;
}

.sum-list dd {
    margin: 0;
    /* --orange is only 3.11:1 on white; this reads at 15px bold */
    color: #073999;
    font: 700 15px/1.4 "Sora", sans-serif;
}

.sum-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #eef1f7;
    color: var(--navy);
    font-size: 14.5px;
}

.sum-line b { font: 800 17px/1 "Sora", sans-serif; color: var(--navy); }
.sum-line.muted { color: #8b96ab; }
.sum-line.muted b { font-size: 14.5px; font-weight: 700; color: #000; }

/* Premium upsell */
.sum-upsell {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 16px 0;
    padding: 14px 16px;
    border: 1px solid #ffd9c2;
    border-radius: 14px;
    background: #fff3ea;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease;
}

.sum-upsell:hover { border-color: var(--orange); }

.sum-upsell-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #c44304;
    color: #fff;
    font-size: 15px;
}

.sum-upsell-copy strong {
    display: block;
    color: #b8460a;
    font: 700 13.5px/1.35 "Sora", sans-serif;
}

.sum-upsell-copy small {
    display: block;
    margin-top: 3px;
    color: #8b96ab;
    font-size: 12px;
    line-height: 1.5;
}

.sum-upsell > i { color: var(--orange); font-size: 16px; }

.sum-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0 18px;
    color: var(--navy);
    font: 700 16px/1 "Sora", sans-serif;
}

.sum-total b { font: 800 24px/1 "Sora", sans-serif; color: #d84a00; letter-spacing: -.02em; }

.sum-go {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    border-radius: 12px;
    /* white label on this fill: 5.06:1 */
    background: #d84a00;
    color: #fff;
    font: 700 14.5px/1 "Sora", sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .18s ease, gap .18s ease;
}

.sum-go:hover { background: #e04e05; color: #fff; gap: 14px; }

/* Help card */
.sum-help {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 20px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e9edf6;
}

.sum-help-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff3ea;
    color: #b8460a;
    font-size: 17px;
}

.sum-help strong { display: block; margin-bottom: 5px; font: 700 15px/1.3 "Sora", sans-serif; color: var(--navy); }
.sum-help p { margin: 0 0 6px; color: #000; font-size: 13.5px; line-height: 1.6; }
.sum-help a { color: #b8460a; font-size: 13.5px; font-weight: 600; }

/* ---- Chip becomes a control ---- */
.fee-price {
    border: 2px solid transparent;
    cursor: pointer;
    font: inherit;
    transition: border-color .18s ease, transform .18s ease;
}

.fee-price:hover { border-color: #ffd0b3; }

.fee-price.is-picked {
    border-color: var(--orange);
    background: #fff4ec;
    box-shadow: 0 6px 18px rgba(255, 91, 10, .18);
}

.fee-price.is-picked b { color: #b8460a; }

.fee-price.is-picked b::before {
    border-color: var(--orange);
    background: var(--orange);
    /* White ring inside the fill - a dot rather than a solid disc */
    box-shadow: inset 0 0 0 2.5px #fff;
}

/* ---- Step 2 ---- */
.pd-block {
    margin-top: 26px;
    padding: clamp(24px, 3.4vw, 38px);
    border-radius: 20px;
    background: #eaeff8;
    border: 1px solid #e9edf6;
    box-shadow: 0 12px 30px rgba(3, 19, 51, .05);
    scroll-margin-top: 110px;
}

.pd-head { margin-bottom: 24px; }

.pd-head h2 {
    margin: 0 0 8px;
    font: 700 clamp(22px, 2.8vw, 30px)/1.28 "Sora", sans-serif;
    color: var(--navy);
    letter-spacing: -.02em;
}

.pd-head h2 em { font-style: normal; color: var(--orange); }
.pd-head p { margin: 0; color: #000; font-size: 15px; line-height: 1.7; }

/* The form borrows .submit-form; on a card it needs no panel of its own */
.pd-form { padding: 0; background: none; border: 0; box-shadow: none; }

.pd-form input[readonly] {
    background: #f6f8fd;
    color: var(--navy);
    font-weight: 700;
    cursor: default;
}

/* Qualified so it beats the blanket `.field label` rule */
.pd-hint {
    display: block;
    margin-top: 7px;
    color: #8b96ab;
    font-size: 12.5px;
}

@media (max-width: 1199px) {
    .fee-layout { grid-template-columns: 1fr 300px; }
}

@media (max-width: 991px) {
    .fee-layout { grid-template-columns: 1fr; }
    .sum-wrap { position: static; }
}

/* The payment section reused inside conference-registration.php. On its own
   page .pay-section supplies the padding and background; here it sits on a card
   inside the existing section, so the head aligns left like the other steps. */
.pay-block {
    margin-top: 26px;
    padding: clamp(24px, 3.4vw, 38px);
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e9edf6;
    box-shadow: 0 12px 30px rgba(3, 19, 51, .05);
}

.pay-block .pay-head {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

/* Prompt shown while the Order Summary is still empty */
.sum-hint {
    margin: -8px 0 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fff3ea;
    color: #b8460a;
    font-size: 13px;
    line-height: 1.5;
}

.sum-card.has-pick .sum-hint { display: none; }

/* =========================================================
   REDEFINE YOUR RESEARCH JOURNEY (journals-publications.php)
   Ported from icmhsi; buttons re-coloured onto this site's palette.
   ========================================================= */
.rj-section { padding: 62px 0 70px; background: #fff; }

.rj-head {
    max-width: 820px;
    margin: 0 auto 10px;
    text-align: center;
}

.rj-head h2 {
    margin: 0;
    font: 700 clamp(23px, 3vw, 34px)/1.28 "Sora", sans-serif;
    color: var(--navy);
    letter-spacing: -.02em;
}

.rj-head h2 em { font-style: normal; color: var(--orange); }

/* Matches the Lottie artboard (2100x1080) so the height is reserved before
   the animation loads and nothing below it jumps. */
.rj-stage {
    max-width: 1100px;
    margin: 0 auto;
    aspect-ratio: 2100 / 1080;
}

.rj-anim { width: 100%; height: 100%; }

.rj-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
}

.rj-btn-primary,
.rj-btn-talk {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border: 0;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: filter .25s ease, transform .25s ease;
}

/* White label needs the deeper orange - --orange alone is 3.11:1 */
.rj-btn-primary { background: #c44304; color: #fff; }
.rj-btn-talk    { background: var(--navy); color: #fff; }

.rj-btn-primary:hover,
.rj-btn-talk:hover { filter: brightness(1.12); transform: translateY(-2px); color: #fff; }

.rj-btn-talk i { font-size: 17px; }

/* ---- Talk to us modal ---- */
.rj-modal .modal-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
}

.rj-modal .modal-header {
    padding: 20px 26px;
    border-bottom: 1px solid #eef1f7;
}

.rj-modal .modal-title {
    font: 700 19px/1.3 "Sora", sans-serif;
    color: var(--navy);
}

.rj-modal .modal-body { padding: 24px 26px 26px; }

/* The form reuses .submit-grid / .field, which carry their own panel padding
   on the standalone forms - not wanted inside a modal. */
.rj-modal .submit-grid { padding: 0; }

.rj-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 6px;
}

/* flatpickr renders into the body, so it must clear the modal */
.flatpickr-calendar { z-index: 1070; }

@media (max-width: 575px) {
    .rj-section { padding: 46px 0 54px; }
    .rj-actions > * { width: 100%; justify-content: center; }
    .rj-modal-actions > * { width: 100%; justify-content: center; }
}

/* =========================================================
   REGISTRATION INSTRUCTIONS (conference-registration.php)
   Ported from icmhsi. The peach band matches the reference.
   ========================================================= */
.ri-block {
    margin-top: 22px;
    padding: clamp(26px, 3.4vw, 40px) clamp(20px, 3vw, 40px);
    border-radius: 20px;
    background: #fff3ea;
    border: 1px solid #ffe0cb;
}

.ri-head {
    margin-bottom: clamp(18px, 2.6vw, 28px);
    text-align: center;
}

.ri-head h2 {
    margin: 0;
    font: 700 clamp(22px, 2.8vw, 30px)/1.28 "Sora", sans-serif;
    color: var(--navy);
    letter-spacing: -.02em;
}

.ri-head h2 em { font-style: normal; color: var(--orange); }

/* The artwork carries its own text as vector paths, so it is scaled as one
   piece rather than reflowed. */
.ri-steps {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;
    margin: 0 auto;
}

/* Below ~640px the four steps become unreadable at full width; let the strip
   scroll rather than shrink the labels into illegibility. */
@media (max-width: 640px) {
    .ri-block { padding-left: 0; padding-right: 0; }

    .ri-scroll,
    .ri-block > .ri-steps { max-width: none; }

    .ri-block {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ri-steps {
        min-width: 620px;
        margin: 0 20px;
    }
}

/* Indexing-body logos under the Indexing Database note. All six source files
   are 120x62, so a fixed tile keeps them optically even. */
.jp-index-logos {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
}

.jp-index-logos li {
    display: grid;
    place-items: center;
    width: 124px;
    height: 64px;
    padding: 6px 10px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e6ecf7;
    transition: border-color .18s ease, transform .18s ease;
}

.jp-index-logos li:hover {
    border-color: var(--orange);
    transform: translateY(-2px);
}

.jp-index-logos img {
    max-width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 575px) {
    .jp-index-logos { justify-content: center; gap: 8px; }
    .jp-index-logos li { width: calc(50% - 4px); height: 58px; }
}

/* The group in gall-3 stands high in the frame, so the default centred crop cuts
   the row of faces off. Anchor the crop near the top instead. */
.gallery-item img[src$="gall-3.png"] { object-position: 50% 12%; }

/* Institution logo strip (index, below the indexing strip) */

.logo-strip {
    /* No bottom border: Quick Downloads continues the same soft band */
    padding: 26px 0 30px;
    background: var(--soft);
}

.logo-inner {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 36px;
    align-items: center;
}

.logo-eyebrow {
    display: block;
    margin-bottom: 9px;
    color: #b8460a;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.logo-label h2 {
    margin: 0;
    color: var(--navy);
    font: 700 17px/1.32 "Sora", sans-serif;
    letter-spacing: -.02em;
}

.logo-marquee {
    position: relative;
    overflow: hidden;
    /* Long fade right, a short one left so the first tile is not hard-cut */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 88%, transparent 100%);
}

.logo-track {
    display: flex;
    width: max-content;
    /* one copy is ~10.7k px, so this is roughly 71px per second */
    animation: logoScroll 150s linear infinite;
}

/* Hovering holds the strip so a logo can be looked at */
.logo-strip:hover .logo-track,
.logo-strip:focus-within .logo-track {
    animation-play-state: paused;
}

.logo-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 6px 8px 6px 0;
    list-style: none;
}

/* A card per logo: many of these are JPEGs with a baked-in white
   background, which reads as deliberate on a tile and accidental without one. */
.logo-card {
        flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 99px;
    height: 70px;
    padding: 14px;
    /* border: 1px solid var(--line); */
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(3, 19, 51, .05);
}

.logo-card img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 52px;
    object-fit: contain;
}

@keyframes logoScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (max-width: 860px) {
    .logo-inner { grid-template-columns: 1fr; gap: 22px; }
    .logo-marquee {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 92%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 92%, transparent 100%);
    }
    .logo-row { padding-left: 8px; }
}

@media (max-width: 640px) {
    .logo-strip { padding: 38px 0; }
    .logo-card { width: 130px; height: 78px; padding: 11px; }
    .logo-card img { height: 42px; }
}

/* Stand the strip still and let it be scrolled by hand instead */
@media (prefers-reduced-motion: reduce) {
    .logo-track { animation: none; }
    .logo-marquee { overflow-x: auto; }
}


/* Available indexing databases (index, on the banner)
   Five fixed logos, so this is a plain row - no marquee. */

.index-strip {
    padding: 26px 0;
    background: var(--soft);
    border-top: 1px solid var(--line);
}

.index-inner {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 36px;
    align-items: center;
}

.index-eyebrow {
    display: block;
    margin-bottom: 9px;
    color: #b8460a;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.index-label h2 {
    margin: 0;
    color: var(--navy);
    font: 700 17px/1.32 "Sora", sans-serif;
    letter-spacing: -.02em;
}

.index-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.index-card {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 70px;
    padding: 14px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(3, 19, 51, .05);
}

.index-card img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 42px;
    object-fit: contain;
}

@media (max-width: 860px) {
    .index-inner { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 640px) {
    .index-strip { padding: 34px 0; }
    .index-row { justify-content: center; gap: 12px; }
    .index-card { width: calc(50% - 6px); max-width: 150px; height: 66px; }
}


/* From tablet up the indexing strip rides on the hero's lower edge rather than
   sitting in its own band. Below 861px the label stacks above the logos, which
   makes the strip too tall to overlay without covering the hero buttons, so
   there it stays in flow exactly as before. */
@media (min-width: 861px) {
    .index-strip {
        --strip-h: 132px;
        --ribbon-h: 92px;
        position: relative;
        z-index: 3;
        display: flex;
        align-items: center;
        height: var(--strip-h);
        /* Pull up past the ribbon as well, so it sits above it - then give
           the ribbon's height back at the bottom, or everything after the
           strip rides up under the ribbon too. */
        margin-top: calc(-1 * (var(--strip-h) + var(--ribbon-h)));
        margin-bottom: var(--ribbon-h);
        padding: 0;
        border-top: 0;
        background: transparent;
    }

    .index-strip > .container { width: 100%; }

    .index-label h2 { color: #fff; }

    /* The band orange is far too dark on this ground */
    .index-eyebrow { color: #ffb083; }

    /* The row must not wrap over the hero - it has one line to work with, so
       the cards share it rather than each holding a fixed width. */
    .index-row {
        flex-wrap: nowrap;
        gap: 14px;
    }

    .index-card {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: 132px;
        padding: 12px 10px;
    }

    /* Both bands live at the hero foot: the ribbon keeps its pinned slot and
       the strip stacks directly above it. The hero grows to make room so
       neither reaches the hero buttons. */
    .chennai-hero { min-height: 930px; }
}

@media (min-width: 992px) {
    .chennai-hero { min-height: 860px; }
}


/* Quick Downloads (index) - shares the soft band with the logo strip above it,
   so the two read as one block rather than two stacked stripes. */

.dl-section {
    padding: 30px 0 58px;
    background: var(--soft);
    border-bottom: 1px solid var(--line);
}

.dl-head { margin-bottom: 26px; }

.dl-eyebrow {
    display: block;
    margin-bottom: 9px;
    color: #b8460a;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.dl-head h2 {
    margin: 0;
    color: var(--navy);
    font: 700 clamp(22px, 2.6vw, 30px)/1.26 "Sora", sans-serif;
    letter-spacing: -.02em;
}

.dl-head h2 em { font-style: normal; color: var(--orange); }

.dl-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

/* Tiles alternate orange / blue, the same two-colour rhythm the objectives
   strip uses, so the row carries colour without introducing a third hue. */
.dl-tile {
    --accent: #c44304;
    --accent-soft: #fff1e7;
    --accent-glow: rgba(255, 91, 10, .26);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 26px 14px 18px;
    /* A shade darker than var(--line): the tiles are white on an off-white
       band, where --line does not read at all. The border is the same at rest
       and on hover, so it stays visible either way. */
    border: 1px solid #ccd8ea;
    border-radius: 16px;
    background: #fff;
    text-align: center;
    text-decoration: none;
    /* translate (not transform) for the entrance, so it is not fighting the
       hover transition below */
    opacity: 0;
    translate: 0 18px;
    animation: dlReveal .55s ease forwards;
    animation-delay: var(--delay, 0s);
    transition: background .24s ease, box-shadow .24s ease;
}

.dl-tile:nth-child(even) {
    --accent: #0b46b4;
    --accent-soft: #e9f0fd;
    --accent-glow: rgba(18, 101, 232, .26);
}

@keyframes dlReveal {
    to { opacity: 1; translate: 0 0; }
}

a.dl-tile:hover {
    background: var(--accent-soft);
    box-shadow: 0 18px 34px var(--accent-glow);
}

/* Format flag in the corner instead of a line of meta text */
.dl-flag {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .07em;
    transition: background .24s ease, color .24s ease;
}

a.dl-tile:hover .dl-flag { background: var(--accent); color: #fff; }

.dl-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 20px;
    transition: background .24s ease, color .24s ease, transform .24s ease;
}

a.dl-tile:hover .dl-icon {
    background: var(--accent);
    color: #fff;
}

.dl-name {
    color: var(--navy);
    font: 700 13.5px/1.35 "Sora", sans-serif;
}

.dl-meta {
    margin-top: 5px;
    color: var(--muted);
    font-size: 11.5px;
}

/* Not yet supplied: colour drops away and the flag reads SOON */
.dl-tile.is-waiting {
    background: color-mix(in srgb, #fff 58%, var(--soft));
}

.dl-tile.is-waiting .dl-icon,
.dl-tile.is-waiting .dl-flag {
    background: #eef2fb;
    color: #6b7a95;
}

.dl-tile.is-waiting .dl-name { color: #56637d; }

@media (max-width: 1100px) {
    .dl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .dl-section { padding: 26px 0 46px; }
    .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* No entrance animation. Hover only recolours, so nothing else to suppress. */
@media (prefers-reduced-motion: reduce) {
    .dl-tile {
        opacity: 1;
        translate: none;
        animation: none;
    }
}

/* Journal Publication Support Program (index) */

.jps-section {
    padding: 88px 0;
    background: #fff;
}

.jps-head {
    max-width: 700px;
    margin: 0 auto 44px;
    text-align: center;
}

.jps-head h2 {
    margin: 16px 0 0;
    color: var(--navy);
    font: 700 clamp(24px, 3vw, 34px)/1.26 "Sora", sans-serif;
    letter-spacing: -.02em;
}

.jps-head h2 em { font-style: normal; color: var(--orange); }

.jps-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    /* Room above for the badge pill, which sits on the card's top edge */
    padding-top: 16px;
}

.jps-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 34px 22px 30px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(3, 19, 51, .07);
    text-align: center;
    /* translate, not transform, so the hover lift is not pinned by fill-mode */
    opacity: 0;
    translate: 0 20px;
    animation: jpsReveal .55s ease forwards;
    animation-delay: var(--delay, 0s);
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

@keyframes jpsReveal {
    to { opacity: 1; translate: 0 0; }
}

.jps-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--orange) 40%, var(--line));
    box-shadow: 0 22px 44px rgba(3, 19, 51, .13);
}

.jps-card.is-flagged {
    border-color: color-mix(in srgb, var(--orange) 55%, var(--line));
    box-shadow: 0 18px 40px rgba(255, 91, 10, .16);
}

.jps-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    translate: -50% 0;
    padding: 7px 16px;
    border-radius: 999px;
    background: #c44304;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(255, 91, 10, .32);
}

/* Big quartile numeral - decorative, so the readable label sits below it */
.jps-tier {
    display: block;
    margin-bottom: 14px;
    color: var(--navy);
    font: 700 46px/1 "Sora", sans-serif;
    letter-spacing: -.03em;
}

.jps-tier b { color: var(--orange); font-weight: 700; }

.jps-kind {
    display: block;
    margin-bottom: 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.jps-card h3 {
    margin: 0;
    color: var(--navy);
    font: 700 19px/1.32 "Sora", sans-serif;
    letter-spacing: -.01em;
}

.jps-rule {
    display: block;
    width: 46px;
    height: 3px;
    margin-top: 16px;
    border-radius: 2px;
    background: var(--line);
    transition: background .24s ease, width .24s ease;
}

.jps-card.is-flagged .jps-rule { background: var(--orange); }
.jps-card:hover .jps-rule { width: 64px; background: var(--orange); }

@media (max-width: 900px) {
    .jps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
}

@media (max-width: 520px) {
    .jps-section { padding: 64px 0; }
    .jps-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .jps-card {
        opacity: 1;
        translate: none;
        animation: none;
    }

    .jps-card:hover { transform: none; }
}

/* Proof of Scopus Indexing (index) */

.sx-section {
    position: relative;
    z-index: 0;
    overflow: hidden;
    padding: 88px 0;
    background: var(--soft);
}

/* Blurred journal backdrop. background-image is emitted by index.php so the
   path resolves whichever file is present. The pseudo-element is inset past
   the section edges because blur bleeds inward and would otherwise leave a
   soft, lighter rim on all four sides. */
.sx-section:before {
    content: "";
    position: absolute;
    inset: -60px;
    z-index: -1;
    /* Gradient over the photo. At 317deg the white end lands top-left,
       under the copy, while the photo stays visible bottom-right behind
       the cards - so it doubles as the readability wash. */
       background: linear-gradient(317deg, #ffffffcf 24.99%, #ffffffcf 100%), url(../images/journal-book.webp);
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    translate: 0 var(--py, 0px);
    filter: blur(7px);
}


.sx-inner {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 38px;
    align-items: start;
}

.sx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border-radius: 999px;
    background: #fff1e7;
    color: #b8460a;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sx-copy h2 {
    margin: 16px 0 12px;
    color: var(--navy);
    font: 700 clamp(24px, 3vw, 34px)/1.26 "Sora", sans-serif;
    letter-spacing: -.02em;
}

.sx-copy h2 em { font-style: normal; color: var(--orange); }

.sx-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.78;
}

.sx-tagline {
    margin: 24px 0 0;
    padding: 18px 22px;
    border-left: 3px solid var(--orange);
    border-radius: 0 12px 12px 0;
    background: #fff6f0;
    color: var(--navy);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.7;
}

/* Two records share the slide; the odd one out is centred, not left hanging */
.sx-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.sx-pair.is-single {
    grid-template-columns: minmax(0, 1fr);
    max-width: calc(50% - 8px);
    margin: 0 auto;
}

.sx-slide {
    margin: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(3, 19, 51, .1);
}

.sx-slide img {
    display: block;
    width: 100%;
    height: auto;
}

.sx-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 22px;
}

.sx-btn {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--navy);
    font-size: 18px;
    box-shadow: 0 8px 20px rgba(3, 19, 51, .1);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.sx-btn:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}

/* Dots sit inline between the arrows rather than over the slide */
.sx-slider .sx-dots {
    position: static;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.sx-slider .sx-dots button {
    width: 9px;
    height: 9px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: #c3cfe2;
    opacity: 1;
    transition: background .2s ease, width .2s ease;
}

.sx-slider .sx-dots button.active {
    width: 26px;
    border-radius: 999px;
    background: var(--orange);
}

@media (max-width: 980px) {
    .sx-inner { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 760px) {
    .sx-pair { grid-template-columns: minmax(0, 1fr); }
    .sx-pair.is-single { max-width: 100%; }
}

@media (max-width: 640px) {
    .sx-section { padding: 64px 0; }
    .sx-slide { padding: 14px; }
    .sx-btn { width: 38px; height: 38px; }
}

/* Scholarship + Subscribe (index) - one band, two columns */

.duo-section {
    padding: 88px 0;
    background: var(--soft);
}

.duo-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: 46px;
    align-items: start;
}

.duo-copy h2 {
    margin: 16px 0 8px;
    color: var(--navy);
    font: 700 clamp(23px, 2.7vw, 31px)/1.26 "Sora", sans-serif;
    letter-spacing: -.02em;
}

.duo-copy h2 em { font-style: normal; color: var(--orange); }

/* Qualified so it beats .duo-copy p - a bare class would lose */
.duo-copy .duo-sub {
    margin: 0 0 16px;
    color: #b8460a;
    font: 600 15.5px/1.5 "Sora", sans-serif;
}

.duo-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.78;
}

.duo-list {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.duo-list li {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    color: var(--navy);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.45;
}

/* Alternates orange / blue, the two-colour rhythm used elsewhere on the page */
.duo-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #fff1e7;
    color: #c44304;
    font-size: 17px;
}

.duo-list li:nth-child(even) .duo-ico { background: #e9f0fd; color: #0b46b4; }

.duo-copy .duo-covers {
    margin: 20px 0 0;
    padding: 15px 18px;
    border-left: 3px solid var(--orange);
    border-radius: 0 12px 12px 0;
    background: #fff6f0;
    color: var(--navy);
    font-size: 14.5px;
    font-weight: 600;
}

.duo-covers strong { color: #c44304; }

.duo-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    padding: 13px 26px;
    border-radius: 999px;
    background: #c44304;
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 12px 26px rgba(255, 91, 10, .3);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.duo-btn:hover {
    transform: translateY(-2px);
    background: var(--navy);
    color: #fff;
    box-shadow: 0 16px 32px rgba(3, 19, 51, .26);
}

/* Right column */
.duo-form-card {
    padding: 30px 30px 28px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(3, 19, 51, .08);
}

.duo-form-head { margin-bottom: 22px; }

.duo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border-radius: 999px;
    background: #fff1e7;
    color: #b8460a;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.duo-form-head h3 {
    margin: 14px 0 0;
    color: var(--navy);
    font: 700 clamp(20px, 2.2vw, 25px)/1.28 "Sora", sans-serif;
    letter-spacing: -.02em;
}

.duo-form-head h3 em { font-style: normal; color: var(--orange); }

/* Flattened: the outer .duo-form-card is the card */
.duo-form-card .duo-form {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.duo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.duo-wide { grid-column: 1 / -1; }

.duo-submit {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    padding: 13px 30px;
    border: 0;
    border-radius: 999px;
    background: #c44304;
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    box-shadow: 0 12px 26px rgba(255, 91, 10, .3);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.duo-submit:hover {
    transform: translateY(-2px);
    background: var(--navy);
    box-shadow: 0 16px 32px rgba(3, 19, 51, .26);
}

@media (max-width: 960px) {
    .duo-inner { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 560px) {
    .duo-section { padding: 64px 0; }
    .duo-form-card { padding: 24px 20px 22px; }
    .duo-grid { grid-template-columns: 1fr; }
}

/* Proceedings & Publications (index) */

.pp-section {
    padding: 8px 0 70px;
    background: var(--soft);
}

/* The whole block sits on a deep panel, so the white logo tiles and the
   note read as objects laid on it. */
.pp-panel {
    padding: 54px 44px 50px;
    border-radius: 28px;
    background:
        radial-gradient(120% 150% at 82% 12%, #1a3a7d 0%, rgba(7, 27, 69, 0) 58%),
        linear-gradient(140deg, #051639 0%, #0a2358 52%, #030f2e 100%);
    box-shadow: 0 30px 70px rgba(3, 19, 51, .28);
}

/* .pp-head is shared with the publication-process block on
   journals-publications.php, which sits on a light band - so everything that
   assumes the dark ground is scoped to .pp-panel, or it paints that one white
   on near-white. */
.pp-panel .pp-head {
    max-width: 700px;
    margin: 0 auto 34px;
    text-align: center;
}

.pp-panel .pp-head h2 {
    margin: 16px 0 0;
    color: #fff;
    font: 700 clamp(24px, 3vw, 34px)/1.26 "Sora", sans-serif;
    letter-spacing: -.02em;
}

.pp-panel .pp-head h2 em { font-style: normal; color: var(--orange); }

.pp-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Each on its own white tile: these logos carry their own backgrounds and
   would otherwise sit unevenly on the tinted band. */
.pp-logos li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 186px;
    height: 104px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(3, 19, 51, .06);
    transition: transform .2s ease, box-shadow .2s ease;
}

.pp-logos li:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(3, 19, 51, .12);
}

.pp-logos img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 62px;
    object-fit: contain;
}

.pp-note {
    max-width: 760px;
    margin: 32px auto 0;
    padding: 18px 24px;
    border-left: 3px solid var(--orange);
    border-radius: 0 12px 12px 0;
    background: #fff;
    color: var(--navy);
    font-size: 14.5px;
    line-height: 1.75;
    text-align: left;
}

.pp-note strong { color: #b8460a; }

@media (max-width: 620px) {
    .pp-panel { padding: 36px 20px 34px; border-radius: 22px; }
}

@media (max-width: 620px) {
    .pp-section { padding: 62px 0; }
    .pp-logos { gap: 14px; }
    .pp-logos li { width: 152px; height: 90px; padding: 14px; }
    .pp-logos img { max-height: 52px; }
}

/* Submission Guidelines (submission-guidelines.php) */

.sg-section {
    padding: 70px 0 90px;
    background: var(--soft);
}

/* Tab bar: one rounded strip, active tab filled navy with an orange underline */
.sg-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 26px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(3, 19, 51, .07);
    overflow: hidden;
}

.sg-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 16px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--navy);
    font: 700 15px "Sora", sans-serif;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.sg-tab + .sg-tab { border-left: 1px solid var(--line); }

.sg-tab i { color: #c44304; font-size: 17px; transition: color .2s ease; }

.sg-tab:hover { background: color-mix(in srgb, #fff1e7 55%, #fff); }

.sg-tab.active {
    background: var(--navy);
    border-bottom-color: var(--orange);
    color: #fff;
}

.sg-tab.active i { color: var(--orange); }

/* Key facts strip */
.sg-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    padding: 24px 26px;
    margin-bottom: 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(3, 19, 51, .06);
}

.sg-fact { display: flex; gap: 14px; }

.sg-fact-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #fff1e7;
    color: #c44304;
    font-size: 19px;
}

.sg-fact:nth-child(even) .sg-fact-ico { background: #e9f0fd; color: #0b46b4; }

.sg-fact strong {
    display: block;
    margin-bottom: 4px;
    color: var(--navy);
    font: 700 15.5px "Sora", sans-serif;
}

.sg-fact p {
    margin: 0;
    color: var(--muted);
    font-size: 13.8px;
    line-height: 1.6;
}

/* The two requirement cards */
.sg-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.sg-card {
    padding: 28px 28px 26px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(3, 19, 51, .06);
}

.sg-card h2 {
    margin: 0 0 18px;
    color: var(--navy);
    font: 700 clamp(19px, 2.1vw, 23px)/1.3 "Sora", sans-serif;
    letter-spacing: -.02em;
}

.sg-card h2 em { font-style: normal; color: var(--orange); }

.sg-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
}

.sg-list > li {
    display: flex;
    gap: 12px;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.7;
}

.sg-list > li > i {
    flex: none;
    margin-top: 4px;
    color: #c44304;
    font-size: 14px;
}

.sg-list strong { color: var(--navy); }

.sg-sublist {
    margin: 9px 0 0;
    padding: 0 0 0 16px;
    display: grid;
    gap: 7px;
    list-style: none;
}

.sg-sublist li {
    position: relative;
    padding-left: 15px;
    font-size: 14px;
    line-height: 1.65;
}

.sg-sublist li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--orange) 55%, #fff);
}

/* Template download strip */
.sg-template {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding: 22px 26px;
    border: 1px solid color-mix(in srgb, var(--orange) 30%, var(--line));
    border-radius: 16px;
    background: #fff6f0;
}

.sg-template strong {
    display: block;
    margin-bottom: 4px;
    color: var(--navy);
    font: 700 16px "Sora", sans-serif;
}

.sg-template p {
    margin: 0;
    color: var(--muted);
    font-size: 13.8px;
    line-height: 1.6;
}

.sg-dl {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: 999px;
    background: #c44304;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .2s ease, background .2s ease;
}

a.sg-dl:hover { transform: translateY(-2px); background: var(--navy); color: #fff; }

/* No file supplied yet: muted, and plainly not a button */
.sg-dl.is-waiting {
    background: #eef2fb;
    color: #6b7a95;
}

@media (max-width: 900px) {
    .sg-facts { grid-template-columns: 1fr; gap: 18px; }
    .sg-cols { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .sg-section { padding: 54px 0 70px; }
    .sg-tabs { grid-template-columns: 1fr; }
    .sg-tab + .sg-tab { border-left: 0; border-top: 1px solid var(--line); }
    .sg-tab { justify-content: flex-start; }
    .sg-template { flex-direction: column; align-items: stretch; }
    .sg-dl { justify-content: center; }
}

/* Scroll reveal - JS adds .will-reveal on load and .is-revealed on entry.
   Only opacity and translate move, so it never fights a transform animation
   and the compositor can do the whole thing. */
.will-reveal {
    opacity: 0;
    translate: 0 26px;
    transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
                translate .6s cubic-bezier(.22, .61, .36, 1);
}

.will-reveal.is-revealed {
    opacity: 1;
    translate: 0 0;
}

/* If the observer never runs (JS off, or an error), nothing must stay hidden */
@media (prefers-reduced-motion: reduce) {
    .will-reveal {
        opacity: 1;
        translate: none;
        transition: none;
    }
}

/* Banner entrance - the hero's own blocks rise in on load, one after another.
   translate + opacity only, so it never collides with the photo's zoom. */
.hero-content > *,
.hero-side-card,
.hero-side .hero-countdown,
.hero-ribbon .ribbon-item {
    opacity: 0;
    translate: 0 22px;
    animation: heroRise .75s cubic-bezier(.22, .61, .36, 1) forwards;
}

@keyframes heroRise {
    to { opacity: 1; translate: 0 0; }
}

.hero-content > *:nth-child(1) { animation-delay: .10s; }
.hero-content > *:nth-child(2) { animation-delay: .18s; }
.hero-content > *:nth-child(3) { animation-delay: .26s; }
.hero-content > *:nth-child(4) { animation-delay: .34s; }
.hero-content > *:nth-child(5) { animation-delay: .42s; }
.hero-content > *:nth-child(6) { animation-delay: .50s; }
.hero-content > *:nth-child(7) { animation-delay: .58s; }
.hero-content > *:nth-child(8) { animation-delay: .66s; }
.hero-content > *:nth-child(9) { animation-delay: .74s; }

.hero-side-card { animation-delay: .40s; }
.hero-side .hero-countdown { animation-delay: .52s; }

.hero-ribbon .ribbon-item:nth-child(1) { animation-delay: .62s; }
.hero-ribbon .ribbon-item:nth-child(2) { animation-delay: .68s; }
.hero-ribbon .ribbon-item:nth-child(3) { animation-delay: .74s; }
.hero-ribbon .ribbon-item:nth-child(4) { animation-delay: .80s; }
.hero-ribbon .ribbon-item:nth-child(5) { animation-delay: .86s; }
.hero-ribbon .ribbon-item:nth-child(6) { animation-delay: .92s; }

/* Scroll-linked: the banner copy fades and lifts away as you leave it.
   --heroFade is written by main.js. */
.hero-content,
.hero-side {
    opacity: var(--heroFade, 1);
}

/* Nothing may stay invisible if motion is switched off */
@media (prefers-reduced-motion: reduce) {
    .hero-content > *,
    .hero-side-card,
    .hero-side .hero-countdown,
    .hero-ribbon .ribbon-item {
        opacity: 1;
        translate: none;
        animation: none;
    }

    .hero-content,
    .hero-side { opacity: 1; }
}

/* =========================================================
   WHAT TO SUBMIT (session-tracks.php)
   The abstract and full paper requirements, under the tracks.
   ========================================================= */

.ws-section {
    padding: 78px 0 90px;
    background: #f6f8fd;
}

.ws-head {
    max-width: 780px;
    margin: 0 auto 36px;
    text-align: center;
}

/* Deliberately larger than .section-pill: this heads a full section rather
   than labelling a column. */
.ws-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 22px;
    border-radius: 999px;
    background: rgba(255,91,10,.10);
    color: #b8460a;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .12em;
}

.ws-eyebrow i { font-size: 16px; }

.ws-head h2 {
    margin: 18px 0 0;
    color: var(--navy);
    font: 800 clamp(28px, 3.4vw, 42px)/1.15 "Sora", sans-serif;
    letter-spacing: -.035em;
}

.ws-head h2 em { color: var(--orange); font-style: normal; }

.ws-head p {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
}

.ws-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    gap: 24px;
}

.ws-card {
    padding: 32px 34px 34px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(3,19,51,.06);
}

.ws-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.ws-card-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: rgba(255,91,10,.10);
    color: var(--orange);
    font-size: 21px;
}

.ws-card-head h3 {
    margin: 0;
    color: var(--navy);
    font: 800 20px/1.3 "Sora", sans-serif;
    letter-spacing: -.02em;
}

/* The three numbers an author checks first */
.ws-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.ws-facts li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #f2f5fb;
    color: var(--navy);
    font-size: 12.5px;
    font-weight: 700;
}

.ws-facts i { color: var(--orange); font-size: 13px; }

.ws-group { margin-top: 24px; }

.ws-group h4 {
    margin: 0 0 12px;
    color: var(--navy);
    font: 800 13px "Inter", sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ws-list,
.ws-sublist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ws-list {
    display: grid;
    gap: 11px;
}

.ws-list > li {
    display: flex;
    gap: 11px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

.ws-list > li > i {
    flex: none;
    margin-top: 5px;
    color: var(--orange);
    font-size: 13px;
}

.ws-list strong { color: var(--navy); }

/* Nested steps under "Body" / "Main Body" */
.ws-sublist {
    display: grid;
    gap: 8px;
    margin-top: 9px;
    padding-left: 15px;
    border-left: 2px solid var(--line);
}

.ws-sublist li {
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.65;
}

@media (max-width: 991px) {
    .ws-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .ws-section { padding: 56px 0 70px; }
    .ws-card { padding: 26px 22px 28px; }
    .ws-eyebrow { font-size: 12.5px; padding: 8px 18px; }
}

/* =========================================================
   VENUE DETAILS + GETTING HERE (venue.php)
   ========================================================= */

.vd-section {
    padding: 80px 0 40px;
    background: #fff;
}

.vd-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 0;
}

.vd-fact {
    display: flex;
    gap: 15px;
    padding: 24px 26px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(3,19,51,.05);
    transition: border-color .25s ease, transform .25s ease;
}

.vd-fact:hover {
    border-color: var(--orange);
    transform: translateY(-3px);
}

.vd-fact-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255,91,10,.10);
    color: var(--orange);
    font-size: 20px;
}

.vd-fact dt {
    color: #b8460a;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.vd-fact dd {
    margin: 7px 0 0;
    color: var(--navy);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
}

.vd-fact dd strong { color: var(--orange); }

/* ---- Getting here ---- */

.vd-routes {
    padding: 50px 0 90px;
    background: #fff;
}

.vd-route-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 20px;
}

.vd-route {
    position: relative;
    padding: 30px 28px 32px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(3,19,51,.05);
}

/* The route delegates should take reads first, whatever its position */
.vd-route.is-best {
    border-color: rgba(255,91,10,.45);
    background: linear-gradient(180deg, #fff7f2, #fff 42%);
}

.vd-route-flag {
    position: absolute;
    top: -11px;
    left: 28px;
    padding: 4px 13px;
    border-radius: 999px;
    background: var(--orange);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.vd-route header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.vd-route-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: rgba(255,91,10,.10);
    color: var(--orange);
    font-size: 22px;
}

.vd-route h3 {
    margin: 0;
    color: var(--navy);
    font: 800 18px/1.25 "Sora", sans-serif;
    letter-spacing: -.02em;
}

.vd-route-time {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.vd-route-time i { color: var(--orange); }

/* Numbered, because the order of the steps is the point */
.vd-route-steps {
    margin: 20px 0 0;
    padding-left: 0;
    list-style: none;
    counter-reset: vdstep;
    display: grid;
    gap: 13px;
}

.vd-route-steps li {
    position: relative;
    padding-left: 32px;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.7;
    counter-increment: vdstep;
}

.vd-route-steps li:before {
    content: counter(vdstep);
    position: absolute;
    left: 0;
    top: 1px;
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #f2f5fb;
    color: var(--navy);
    font: 800 11px "Sora", sans-serif;
}

.vd-route-steps strong { color: var(--navy); }

.vd-route-note {
    display: flex;
    gap: 15px;
    margin-top: 22px;
    padding: 22px 26px;
    border: 1px dashed rgba(255,91,10,.45);
    border-radius: 16px;
    background: rgba(255,91,10,.05);
}

.vd-route-note i {
    flex: none;
    margin-top: 2px;
    color: var(--orange);
    font-size: 21px;
}

.vd-route-note p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}

.vd-route-note strong { color: var(--navy); }

.vd-route-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px 28px;
    margin-top: 32px;
}

.vd-route-links .content-link { margin-top: 0; }

@media (max-width: 991px) {
    .vd-facts,
    .vd-route-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .vd-section { padding: 56px 0 30px; }
    .vd-routes  { padding: 34px 0 66px; }
    .vd-route   { padding: 26px 22px 28px; }
    .vd-fact    { padding: 20px 20px; }
}

/* =========================================================
   THE 17 GLOBAL GOALS (index, inside the SDG section)
   ========================================================= */

.gg-panel {
    padding: clamp(26px, 3vw, 40px);
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 22px 55px rgba(3,19,51,.07);
}

.gg-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 22px 30px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}

.gg-intro h3 {
    margin: 0;
    color: var(--navy);
    font: 800 clamp(22px, 2.4vw, 30px)/1.2 "Sora", sans-serif;
    letter-spacing: -.03em;
}

.gg-intro p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 15px;
}

/* Counters read off the data, so they cannot drift from the grid */
.gg-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 34px;
    margin: 0;
}

.gg-counts dt {
    color: var(--navy);
    font: 800 clamp(26px, 2.6vw, 34px)/1 "Sora", sans-serif;
    letter-spacing: -.04em;
}

.gg-counts dd {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
}

/* 9 across on desktop, so the seventeen fall as 9 + 8 like the UN sheet */
.gg-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    align-items: start;
    gap: 16px 12px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.gg-goal {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.gg-goal img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    /* The tiles are flat colour - a hairline keeps the pale ones off the card */
    box-shadow: inset 0 0 0 1px rgba(3,19,51,.10);
    transition: transform .25s ease, box-shadow .25s ease;
}

.gg-goal:hover img {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(3,19,51,.18);
}

/* No tile file for this goal - its number still reads */
.gg-goal-ph {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 8px;
    background: #eef2fb;
    color: #6b7a95;
    font: 800 22px "Sora", sans-serif;
}

.gg-goal-name {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

/* The goals this conference actually maps a track to */
.gg-goal.is-priority .gg-goal-name {
    color: var(--navy);
    font-weight: 800;
}

.gg-goal.is-priority img {
    box-shadow: inset 0 0 0 1px rgba(3,19,51,.10), 0 0 0 2px rgba(255,91,10,.55);
}

.gg-actions {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

@media (max-width: 1199px) {
    .gg-grid { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 767px) {
    .gg-top { align-items: flex-start; }
    .gg-counts { gap: 12px 24px; }
    .gg-grid { grid-template-columns: repeat(4, 1fr); gap: 14px 10px; }
    .gg-goal-name { font-size: 10px; }
}

@media (max-width: 480px) {
    .gg-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Publication Queries modal (journals-publications.php). The form itself reuses
   .submit-grid / .field; only its heading and footnote are new. */

.pq-intro {
    margin-bottom: 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.pq-intro h4 {
    margin: 0;
    color: var(--navy);
    font: 800 clamp(20px, 2.2vw, 26px)/1.25 "Sora", sans-serif;
    letter-spacing: -.02em;
}

.pq-intro span {
    display: block;
    margin-top: 8px;
    color: var(--orange);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
}

.pq-note {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.7;
}

.pq-note span { color: var(--orange); font-weight: 800; }
.pq-note a { color: var(--orange); font-weight: 700; }

/* Header logo - was an inline width on the <img> */
.site-logo {
    display: block;
    width: 155px;
    height: auto;
}

.pq-intro h4 em { color: var(--orange); font-style: normal; }