/* =========================================================
   GYTIS 2026
   GHANA–YORKSHIRE TRADE & INVESTMENT SUMMIT
   SHOFT — INDIVIDUAL PROJECT PAGE
   ========================================================= */


/* =========================================================
   01 — VARIABLES
   ========================================================= */

:root {

    --gytis-navy:
        #111a40;

    --gytis-navy-dark:
        #0c1432;
    --gytis-navy-deep:
        #0c1432;
    --gytis-navy-mid:
        #1c285e;

    --gytis-gold:
        #c9a227;

    --gytis-gold-light:
        #dfc35b;

    --gytis-gold-soft:
        #f3e8bd;

    --gytis-white:
        #ffffff;

    --gytis-off-white:
        #f8f9fc;

    --gytis-soft:
        #f2f4f8;

    --gytis-text:
        #1b1d24;

    --gytis-muted:
        #687080;

    --gytis-border:
        rgba(17, 26, 64, 0.12);

    --gytis-radius-sm:
        10px;

    --gytis-radius-md:
        18px;

    --gytis-radius-lg:
        28px;

    --gytis-shadow:
        0 20px 60px rgba(16, 25, 62, 0.10);

    --gytis-shadow-heavy:
        0 30px 90px rgba(12, 21, 58, 0.18);

    --gytis-container:
        1240px;

    --gytis-transition:
        280ms cubic-bezier(.2,.7,.2,1);

}


/* =========================================================
   02 — BASE
   ========================================================= */

.gytis-page {
    overflow-x:
        hidden;
}


.gytis-section,
.gytis-hero,
.gytis-purpose,
.gytis-closing,
.gytis-cta,
.gytis-event,
.gytis-connection {
    position:
        relative;

    overflow:
        hidden;
}


.gytis-section *,
.gytis-hero *,
.gytis-purpose *,
.gytis-closing *,
.gytis-cta *,
.gytis-event *,
.gytis-connection * {
    box-sizing:
        border-box;
}


.gytis-section img,
.gytis-hero img {
    display:
        block;

    width:
        100%;
}


.gytis-page a {
    text-decoration:
        none;
}


/* =========================================================
   03 — CONTAINER
   ========================================================= */

.gytis-section > .container,
.gytis-hero > .container,
.gytis-purpose > .container,
.gytis-closing > .container,
.gytis-cta > .container,
.gytis-event > .container,
.gytis-connection > .container {

    width:
        min(
            calc(100% - 48px),
            var(--gytis-container)
        );

    margin-inline:
        auto;
}


/* =========================================================
   04 — EYEBROW
   ========================================================= */

.gytis-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        22px;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.18em;

    line-height:
        1.3;

    text-transform:
        uppercase;

    color:
        var(--gytis-navy);
}


.gytis-eyebrow::before {

    content:
        "";

    width:
        28px;

    height:
        2px;

    flex:
        0 0 28px;

    background:
        var(--gytis-gold);
}


.gytis-eyebrow--light {

    color:
        rgba(255,255,255,0.82);
}


.gytis-eyebrow--light::before {

    background:
        var(--gytis-gold-light);
}


/* =========================================================
   05 — HERO
   ========================================================= */

.gytis-hero {

    min-height:
        780px;

    display:
        flex;

    align-items:
        center;

    isolation:
        isolate;

    background:
        var(--gytis-navy);
}


.gytis-hero__glow {

    position:
        absolute;

    width:
        720px;

    height:
        720px;

    right:
        -260px;

    bottom:
        -360px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(201,162,39,0.20),
            transparent 68%
        );

    z-index:
        -1;
}


.gytis-hero__grid {

    position:
        absolute;

    inset:
        0;

    z-index:
        -2;

    opacity:
        0.35;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.045) 1px,
            transparent 1px
        );

    background-size:
        80px 80px;

    mask-image:
        linear-gradient(
            90deg,
            black,
            transparent 88%
        );
}


.gytis-hero__inner {

    display:
        grid;

    grid-template-columns:
        minmax(0,0.95fr)
        minmax(420px,0.78fr);

    align-items:
        center;

    gap:
        clamp(48px,7vw,105px);

    padding-block:
        92px;

}


.gytis-hero__content {

    position:
        relative;

    z-index:
        2;
}


.gytis-hero h1 {

    margin:
        0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            4rem,
            7.5vw,
            7.5rem
        );

    font-weight:
        800;

    line-height:
        0.86;

    letter-spacing:
        -0.075em;

    color:
        var(--gytis-white);
}


.gytis-hero h1 span {

    display:
        block;

    color:
        var(--gytis-gold-light);
}


.gytis-hero__title-line {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    margin-top:
        27px;

}


.gytis-hero__title-line span {

    width:
        48px;

    height:
        1px;

    background:
        var(--gytis-gold);
}


.gytis-hero__title-line strong {

    font-family:
        "Inter",
        sans-serif;

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.18em;

    color:
        var(--gytis-gold-light);
}


.gytis-hero__lead {

    max-width:
        650px;

    margin:
        30px 0 0;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        clamp(
            1.02rem,
            1.3vw,
            1.2rem
        );

    line-height:
        1.85;

    color:
        rgba(255,255,255,0.78);
}


.gytis-hero__tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-top:
        29px;
}


.gytis-hero__tags span {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        36px;

    padding:
        7px 14px;

    border:
        1px solid
        rgba(255,255,255,0.16);

    border-radius:
        999px;

    background:
        rgba(255,255,255,0.055);

    backdrop-filter:
        blur(12px);

    font-family:
        "Inter",
        sans-serif;

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.02em;

    color:
        rgba(255,255,255,0.86);
}


.gytis-hero__actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        13px;

    margin-top:
        37px;
}


.gytis-btn {

    min-height:
        52px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;

    padding:
        0 22px;

    border:
        1px solid transparent;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        0.78rem;

    font-weight:
        800;

    transition:
        transform var(--gytis-transition),
        background var(--gytis-transition),
        color var(--gytis-transition),
        border-color var(--gytis-transition),
        box-shadow var(--gytis-transition);
}


.gytis-btn:hover {

    transform:
        translateY(-3px);
}


.gytis-btn--gold {

    background:
        var(--gytis-gold);

    color:
        var(--gytis-navy);

    box-shadow:
        0 14px 35px rgba(201,162,39,0.20);
}


.gytis-btn--gold:hover {

    background:
        var(--gytis-gold-light);

    color:
        var(--gytis-navy);
}


.gytis-btn--outline {

    border-color:
        rgba(255,255,255,0.28);

    background:
        rgba(255,255,255,0.035);

    color:
        var(--gytis-white);
}


.gytis-btn--outline:hover {

    border-color:
        var(--gytis-gold);

    color:
        var(--gytis-gold-light);
}


.gytis-hero__media {

    position:
        relative;

    margin:
        0;

    min-width:
        0;
}


.gytis-hero__media-frame {

    position:
        relative;

    padding:
        15px;

    border:
        1px solid
        rgba(201,162,39,0.35);

    border-radius:
        var(--gytis-radius-lg);

    background:
        rgba(255,255,255,0.025);
}


.gytis-hero__media-frame::before {

    content:
        "";

    position:
        absolute;

    inset:
        -15px 15px 15px -15px;

    border:
        1px solid
        rgba(201,162,39,0.38);

    border-radius:
        var(--gytis-radius-lg);

    pointer-events:
        none;
}


.gytis-hero__media img {

    position:
        relative;

    aspect-ratio:
        4 / 5;

    object-fit:
        cover;

    border-radius:
        20px;

    box-shadow:
        var(--gytis-shadow-heavy);
}


.gytis-hero__media figcaption {

    position:
        absolute;

    right:
        30px;

    bottom:
        30px;

    left:
        30px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    padding:
        16px 17px;

    border:
        1px solid
        rgba(255,255,255,0.15);

    border-radius:
        14px;

    background:
        rgba(14,21,49,0.78);

    backdrop-filter:
        blur(18px);

}


.gytis-hero__media figcaption strong {

    font-family:
        "Inter",
        sans-serif;

    font-size:
        0.68rem;

    letter-spacing:
        0.14em;

    color:
        var(--gytis-gold-light);
}


.gytis-hero__media figcaption span {

    font-family:
        "Inter",
        sans-serif;

    font-size:
        0.78rem;

    line-height:
        1.5;

    color:
        rgba(255,255,255,0.78);
}


.gytis-hero__bottom {

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    left:
        0;

    border-top:
        1px solid
        rgba(255,255,255,0.08);

    background:
        rgba(8,15,36,0.35);

    backdrop-filter:
        blur(12px);
}


.gytis-hero__bottom .container {

    min-height:
        56px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    width:
        min(
            calc(100% - 48px),
            var(--gytis-container)
        );

    margin-inline:
        auto;

    color:
        rgba(255,255,255,0.50);

    font-size:
        0.62rem;

    font-weight:
        800;

    letter-spacing:
        0.16em;
}


.gytis-hero__bottom i {

    width:
        4px;

    height:
        4px;

    flex:
        0 0 4px;

    border-radius:
        50%;

    background:
        var(--gytis-gold);
}


/* =========================================================
   06 — GENERAL TYPOGRAPHY
   ========================================================= */

.gytis-section {

    padding-block:
        clamp(
            90px,
            10vw,
            150px
        );
}


.gytis-context {

    background:
        var(--gytis-white);
}


.gytis-soft {

    background:
        var(--gytis-soft);
}


.gytis-content h2,
.gytis-heading h2,
.gytis-purpose-content h2,
.gytis-closing h2,
.gytis-cta h2,
.gytis-event-content h2 {

    margin:
        0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            2.35rem,
            4.2vw,
            4.35rem
        );

    font-weight:
        800;

    line-height:
        1.02;

    letter-spacing:
        -0.05em;

    color:
        var(--gytis-text);
}


.gytis-content h2 span,
.gytis-heading h2 span,
.gytis-event-content h2 span {

    color:
        var(--gytis-navy);
}


.gytis-content p {

    max-width:
        760px;

    margin:
        20px 0 0;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        1rem;

    line-height:
        1.85;

    color:
        var(--gytis-muted);
}


.gytis-content .gytis-lead {

    margin-top:
        27px;

    font-size:
        clamp(
            1.05rem,
            1.35vw,
            1.2rem
        );

    line-height:
        1.75;

    color:
        #343947;
}


.gytis-light-text {

    color:
        rgba(255,255,255,0.74) !important;
}


.gytis-heading {

    max-width:
        820px;

    margin-bottom:
        55px;
}


.gytis-heading > p {

    max-width:
        720px;

    margin:
        25px 0 0;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        1rem;

    line-height:
        1.85;

    color:
        var(--gytis-muted);
}


.gytis-heading--center {

    margin-inline:
        auto;

    text-align:
        center;
}


.gytis-heading--center > p {

    margin-inline:
        auto;
}


/* =========================================================
   07 — SPLIT
   ========================================================= */

.gytis-split {

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    align-items:
        center;

    gap:
        clamp(
            50px,
            7vw,
            105px
        );
}


.gytis-split--dark {

    align-items:
        start;
}


/* =========================================================
   08 — HIGHLIGHT
   ========================================================= */

.gytis-highlight {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    margin-top:
        34px;

    padding:
        22px 24px;

    border-left:
        3px solid
        var(--gytis-gold);

    background:
        linear-gradient(
            90deg,
            rgba(201,162,39,0.08),
            transparent
        );
}


.gytis-highlight strong {

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        1rem;

    line-height:
        1.5;

    color:
        var(--gytis-navy);
}


.gytis-highlight span {

    font-size:
        0.86rem;

    line-height:
        1.6;

    color:
        var(--gytis-muted);
}


/* =========================================================
   09 — MAP VISUAL
   ========================================================= */

.gytis-photo {

    position:
        relative;

    margin:
        0;

    min-width:
        0;
}


.gytis-photo__visual {

    position:
        relative;

    min-height:
        520px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border-radius:
        var(--gytis-radius-lg);

    background:
        linear-gradient(
            135deg,
            #f5f6f9,
            #e8ebf1
        );

    box-shadow:
        var(--gytis-shadow);
}


.gytis-photo::after {

    content:
        "";

    position:
        absolute;

    width:
        100px;

    height:
        100px;

    right:
        -18px;

    bottom:
        -18px;

    border-right:
        2px solid
        var(--gytis-gold);

    border-bottom:
        2px solid
        var(--gytis-gold);

    border-radius:
        0 0 18px 0;
}


.gytis-photo--border::before {

    content:
        "";

    position:
        absolute;

    top:
        17px;

    left:
        -17px;

    width:
        110px;

    height:
        110px;

    border-left:
        2px solid
        var(--gytis-gold);

    border-top:
        2px solid
        var(--gytis-gold);

    border-radius:
        18px 0 0 0;
}


.gytis-map {

    position:
        relative;

    width:
        390px;

    height:
        390px;

    border:
        1px solid
        rgba(17,26,64,0.10);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(201,162,39,0.10),
            transparent 64%
        );
}


.gytis-map::before,
.gytis-map::after {

    content:
        "";

    position:
        absolute;

    border:
        1px solid
        rgba(17,26,64,0.08);

    border-radius:
        50%;

}


.gytis-map::before {

    inset:
        45px;
}


.gytis-map::after {

    inset:
        95px;
}


.gytis-map__line {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        170px;

    height:
        1px;

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            var(--gytis-gold),
            rgba(201,162,39,0)
        );

}


.gytis-map__line--one {

    transform:
        rotate(
            -25deg
        );
}


.gytis-map__line--two {

    transform:
        rotate(
            25deg
        );
}


.gytis-map__line--three {

    transform:
        rotate(
            0deg
        );
}


.gytis-map__node {

    position:
        absolute;

    z-index:
        4;

    width:
        78px;

    height:
        78px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(201,162,39,0.45);

    border-radius:
        50%;

    background:
        var(--gytis-navy);

    color:
        var(--gytis-gold-light);

    box-shadow:
        0 12px 30px
        rgba(17,26,64,0.16);
}


.gytis-map__node span {

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.10em;
}


.gytis-map__node--ghana {

    top:
        52px;

    left:
        30px;
}


.gytis-map__node--yorkshire {

    right:
        30px;

    bottom:
        52px;
}


.gytis-map__centre {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    z-index:
        5;

    width:
        108px;

    height:
        108px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    transform:
        translate(
            -50%,
            -50%
        );

    border:
        1px solid
        var(--gytis-gold);

    border-radius:
        50%;

    background:
        var(--gytis-white);

    box-shadow:
        0 15px 40px
        rgba(17,26,64,0.12);
}


.gytis-map__centre strong {

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        1.25rem;

    letter-spacing:
        -0.03em;

    color:
        var(--gytis-navy);
}


.gytis-map__centre small {

    margin-top:
        3px;

    font-size:
        0.62rem;

    font-weight:
        800;

    letter-spacing:
        0.15em;

    color:
        var(--gytis-gold);
}


.gytis-photo figcaption {

    position:
        absolute;

    left:
        22px;

    bottom:
        22px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    padding:
        14px 17px;

    border:
        1px solid
        rgba(255,255,255,0.16);

    border-radius:
        13px;

    background:
        rgba(16,24,58,0.78);

    backdrop-filter:
        blur(14px);
}


.gytis-photo figcaption strong {

    font-size:
        0.68rem;

    letter-spacing:
        0.14em;

    color:
        var(--gytis-gold-light);
}


.gytis-photo figcaption span {

    font-size:
        0.8rem;

    color:
        rgba(255,255,255,0.76);
}


/* =========================================================
   10 — FOCUS CARDS
   ========================================================= */

.gytis-focus-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:
        16px;
}


.gytis-focus-card {

    min-height:
        310px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    padding:
        30px 27px;

    border:
        1px solid
        var(--gytis-border);

    border-radius:
        var(--gytis-radius-md);

    background:
        var(--gytis-white);

    box-shadow:
        0 12px 35px
        rgba(20,30,75,0.055);

    opacity:
        0;

    transform:
        translateY(24px);

    transition:
        transform 700ms cubic-bezier(.2,.65,.25,1),
        opacity 700ms cubic-bezier(.2,.65,.25,1),
        box-shadow var(--gytis-transition),
        border-color var(--gytis-transition);
}


.gytis-focus-card.is-visible {

    opacity:
        1;

    transform:
        translateY(0);
}


.gytis-focus-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(201,162,39,0.42);

    box-shadow:
        var(--gytis-shadow);
}


.gytis-focus-card > span {

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.15em;

    color:
        var(--gytis-gold);
}


.gytis-focus-card h3 {

    margin:
        0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        1.42rem;

    line-height:
        1.15;

    color:
        var(--gytis-navy);
}


.gytis-focus-card p {

    margin:
        14px 0 0;

    font-size:
        0.88rem;

    line-height:
        1.7;

    color:
        var(--gytis-muted);
}


/* =========================================================
   11 — DARK SECTION
   ========================================================= */

.gytis-dark {

    background:
        var(--gytis-navy);
}


.gytis-dark .gytis-content h2 {

    color:
        var(--gytis-white);
}


.gytis-dark .gytis-content h2 span {

    color:
        var(--gytis-gold-light);
}


.gytis-dark-statement {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    margin-top:
        35px;

    padding:
        24px 25px;

    border:
        1px solid
        rgba(201,162,39,0.25);

    border-radius:
        15px;

    background:
        rgba(255,255,255,0.035);
}


.gytis-dark-statement span {

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.17em;

    color:
        var(--gytis-gold-light);
}


.gytis-dark-statement strong {

    max-width:
        600px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            1.15rem,
            1.8vw,
            1.45rem
        );

    line-height:
        1.45;

    color:
        var(--gytis-white);
}


/* =========================================================
   12 — ATTENDEE GRID
   ========================================================= */

.gytis-attendee-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:
        12px;
}


.gytis-attendee-grid article {

    min-height:
        150px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    padding:
        20px;

    border:
        1px solid
        rgba(255,255,255,0.10);

    background:
        rgba(255,255,255,0.035);

    transition:
        transform var(--gytis-transition),
        border-color var(--gytis-transition),
        background var(--gytis-transition);
}


.gytis-attendee-grid article:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(201,162,39,0.40);

    background:
        rgba(201,162,39,0.06);
}


.gytis-attendee-grid span {

    font-size:
        0.63rem;

    font-weight:
        800;

    letter-spacing:
        0.14em;

    color:
        var(--gytis-gold-light);
}


.gytis-attendee-grid strong {

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        0.95rem;

    line-height:
        1.35;

    color:
        var(--gytis-white);
}


/* =========================================================
   13 — WHY ATTEND
   ========================================================= */

.gytis-benefit-layout {

    display:
        grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(300px,0.85fr);

    gap:
        70px;

    align-items:
        stretch;
}


.gytis-benefit-main {

    min-height:
        470px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

    padding:
        50px;

    border-radius:
        var(--gytis-radius-lg);

    background:
        linear-gradient(
            135deg,
            var(--gytis-navy),
            var(--gytis-navy-mid)
        );

    box-shadow:
        var(--gytis-shadow-heavy);

    opacity:
        0;

    transform:
        translateY(24px);

    transition:
        opacity 700ms cubic-bezier(.2,.65,.25,1),
        transform 700ms cubic-bezier(.2,.65,.25,1);
}


.gytis-benefit-main.is-visible {

    opacity:
        1;

    transform:
        translateY(0);
}


.gytis-benefit-number {

    margin-bottom:
        auto;

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.15em;

    color:
        var(--gytis-gold-light);
}


.gytis-benefit-main h3 {

    margin:
        0 0 15px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            2rem,
            4vw,
            3.7rem
        );

    line-height:
        1;

    letter-spacing:
        -0.045em;

    color:
        var(--gytis-white);
}


.gytis-benefit-main p {

    max-width:
        570px;

    margin:
        0;

    font-size:
        0.98rem;

    line-height:
        1.8;

    color:
        rgba(255,255,255,0.72);
}


.gytis-benefit-side {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;
}


.gytis-benefit-side article {

    padding:
        24px 0;

    border-bottom:
        1px solid
        var(--gytis-border);

    opacity:
        0;

    transform:
        translateY(18px);

    transition:
        opacity 650ms cubic-bezier(.2,.65,.25,1),
        transform 650ms cubic-bezier(.2,.65,.25,1);
}


.gytis-benefit-side article.is-visible {

    opacity:
        1;

    transform:
        translateY(0);
}


.gytis-benefit-side article:first-child {

    padding-top:
        0;
}


.gytis-benefit-side article:last-child {

    border-bottom:
        0;
}


.gytis-benefit-side span {

    display:
        block;

    margin-bottom:
        8px;

    font-size:
        0.67rem;

    font-weight:
        800;

    letter-spacing:
        0.15em;

    color:
        var(--gytis-gold);
}


.gytis-benefit-side strong {

    display:
        block;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        1.18rem;

    line-height:
        1.45;

    color:
        var(--gytis-navy);
}


.gytis-benefit-side p {

    margin:
        9px 0 0;

    font-size:
        0.84rem;

    line-height:
        1.65;

    color:
        var(--gytis-muted);
}


/* =========================================================
   14 — WHAT TO EXPECT
   ========================================================= */

.gytis-expect-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0,1fr)
        );

    gap:
        16px;
}


.gytis-expect-grid article {

    min-height:
        285px;

    padding:
        28px 24px;

    border:
        1px solid
        var(--gytis-border);

    border-radius:
        var(--gytis-radius-md);

    background:
        var(--gytis-white);

    opacity:
        0;

    transform:
        translateY(24px);

    transition:
        opacity 700ms cubic-bezier(.2,.65,.25,1),
        transform 700ms cubic-bezier(.2,.65,.25,1),
        border-color var(--gytis-transition),
        box-shadow var(--gytis-transition);
}


.gytis-expect-grid article.is-visible {

    opacity:
        1;

    transform:
        translateY(0);
}


.gytis-expect-grid article:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(201,162,39,0.40);

    box-shadow:
        var(--gytis-shadow);
}


.gytis-expect-grid span {

    display:
        block;

    margin-bottom:
        48px;

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.15em;

    color:
        var(--gytis-gold);
}


.gytis-expect-grid h3 {

    margin:
        0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        1.15rem;

    line-height:
        1.3;

    color:
        var(--gytis-navy);
}


.gytis-expect-grid p {

    margin:
        13px 0 0;

    font-size:
        0.82rem;

    line-height:
        1.65;

    color:
        var(--gytis-muted);
}


/* =========================================================
   15 — CONNECTION
   ========================================================= */

.gytis-connection {

    background:
        var(--gytis-navy-deep);
}


.gytis-connection-inner {

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(360px,0.8fr);

    align-items:
        center;

    gap:
        clamp(
            55px,
            8vw,
            110px
        );
}


.gytis-connection-content h2 {

    margin:
        0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            2.5rem,
            4.5vw,
            4.7rem
        );

    line-height:
        1;

    letter-spacing:
        -0.05em;

    color:
        var(--gytis-white);
}


.gytis-connection-content h2 span {

    color:
        var(--gytis-gold-light);
}


.gytis-connection-content p {

    max-width:
        730px;

    margin:
        25px 0 0;

    font-size:
        1rem;

    line-height:
        1.85;

    color:
        rgba(255,255,255,0.72);
}


.gytis-connection-visual {

    position:
        relative;

    min-height:
        470px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.gytis-orbit {

    position:
        absolute;

    border:
        1px solid
        rgba(201,162,39,0.22);

    border-radius:
        50%;

    transform:
        rotate(-18deg);
}


.gytis-orbit--one {

    width:
        300px;

    height:
        150px;
}


.gytis-orbit--two {

    width:
        390px;

    height:
        200px;

    transform:
        rotate(42deg);
}


.gytis-orbit--three {

    width:
        450px;

    height:
        250px;

    transform:
        rotate(-58deg);

    opacity:
        0.55;
}


.gytis-connection-centre {

    position:
        relative;

    z-index:
        5;

    width:
        125px;

    height:
        125px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        var(--gytis-gold);

    border-radius:
        50%;

    background:
        var(--gytis-white);

    box-shadow:
        0 20px 60px
        rgba(0,0,0,0.22);
}


.gytis-connection-centre strong {

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        1.5rem;

    color:
        var(--gytis-navy);
}


.gytis-connection-centre span {

    margin-top:
        3px;

    font-size:
        0.63rem;

    font-weight:
        800;

    letter-spacing:
        0.14em;

    color:
        var(--gytis-gold);
}


.gytis-connection-node {

    position:
        absolute;

    z-index:
        6;

    width:
        86px;

    height:
        86px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(201,162,39,0.45);

    border-radius:
        50%;

    background:
        rgba(255,255,255,0.045);

    backdrop-filter:
        blur(12px);
}


.gytis-connection-node strong {

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        0.95rem;

    color:
        var(--gytis-gold-light);
}


.gytis-connection-node span {

    margin-top:
        4px;

    font-size:
        0.58rem;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    color:
        rgba(255,255,255,0.62);
}


.gytis-connection-node--ghana {

    top:
        45px;

    left:
        20px;
}


.gytis-connection-node--yorkshire {

    right:
        10px;

    bottom:
        45px;
}


/* =========================================================
   16 — PARTNERS
   ========================================================= */

.gytis-partners {

    background:
        var(--gytis-white);
}


.gytis-partner-layout {

    display:
        grid;

    grid-template-columns:
        minmax(0,0.9fr)
        minmax(0,1.1fr);

    gap:
        60px;

    align-items:
        stretch;
}


.gytis-partner-feature {

    min-height:
        420px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

    padding:
        45px;

    border-radius:
        var(--gytis-radius-lg);

    background:
        linear-gradient(
            135deg,
            var(--gytis-navy-deep),
            var(--gytis-navy)
        );

    box-shadow:
        var(--gytis-shadow-heavy);

    opacity:
        0;

    transform:
        translateY(24px);

    transition:
        opacity 700ms cubic-bezier(.2,.65,.25,1),
        transform 700ms cubic-bezier(.2,.65,.25,1);
}


.gytis-partner-feature.is-visible {

    opacity:
        1;

    transform:
        translateY(0);
}


.gytis-partner-feature > span {

    margin-bottom:
        auto;

    font-size:
        0.70rem;

    font-weight:
        800;

    letter-spacing:
        0.15em;

    color:
        var(--gytis-gold-light);
}


.gytis-partner-feature strong {

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            1.8rem,
            3vw,
            3rem
        );

    line-height:
        1.05;

    letter-spacing:
        -0.04em;

    color:
        var(--gytis-white);
}


.gytis-partner-feature small {

    margin-top:
        12px;

    font-size:
        0.70rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

    color:
        rgba(255,255,255,0.55);
}


.gytis-partner-list {

    display:
        flex;

    flex-direction:
        column;
}


.gytis-partner-list article {

    min-height:
        105px;

    display:
        grid;

    grid-template-columns:
        55px 1fr;

    align-items:
        center;

    gap:
        15px;

    border-bottom:
        1px solid
        var(--gytis-border);

    opacity:
        0;

    transform:
        translateY(18px);

    transition:
        opacity 650ms cubic-bezier(.2,.65,.25,1),
        transform 650ms cubic-bezier(.2,.65,.25,1);
}


.gytis-partner-list article.is-visible {

    opacity:
        1;

    transform:
        translateY(0);
}


.gytis-partner-list article span {

    font-size:
        0.67rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    color:
        var(--gytis-gold);
}


.gytis-partner-list article strong {

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        1.12rem;

    line-height:
        1.4;

    color:
        var(--gytis-navy);
}


/* =========================================================
   17 — EVENT
   ========================================================= */

.gytis-event {

    background:
        var(--gytis-soft);
}


.gytis-event-inner {

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(360px,0.75fr);

    gap:
        80px;

    align-items:
        center;
}


.gytis-event-content h2 span {

    color:
        var(--gytis-gold);
}


.gytis-event-content > p {

    max-width:
        700px;

    margin:
        25px 0 0;

    font-size:
        1rem;

    line-height:
        1.85;

    color:
        var(--gytis-muted);
}


.gytis-event-details {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:
        15px;

    margin-top:
        38px;
}


.gytis-event-details div {

    padding:
        20px;

    border:
        1px solid
        var(--gytis-border);

    background:
        var(--gytis-white);
}


.gytis-event-details span {

    display:
        block;

    margin-bottom:
        10px;

    font-size:
        0.62rem;

    font-weight:
        800;

    letter-spacing:
        0.15em;

    color:
        var(--gytis-gold);
}


.gytis-event-details strong {

    display:
        block;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        0.86rem;

    line-height:
        1.45;

    color:
        var(--gytis-navy);
}


.gytis-event-card {

    min-height:
        420px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    padding:
        35px;

    border:
        1px solid
        rgba(201,162,39,0.35);

    border-radius:
        var(--gytis-radius-lg);

    background:
        var(--gytis-navy);

    box-shadow:
        var(--gytis-shadow-heavy);
}


.gytis-event-card__top,
.gytis-event-card__bottom {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        12px;

    font-size:
        0.64rem;

    font-weight:
        800;

    letter-spacing:
        0.15em;

    color:
        var(--gytis-gold-light);
}


.gytis-event-card__middle {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        17px;
}


.gytis-event-card__middle strong {

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            1.45rem,
            3vw,
            2.4rem
        );

    letter-spacing:
        -0.05em;

    color:
        var(--gytis-white);
}


.gytis-event-card__middle i {

    font-style:
        normal;

    font-size:
        1.5rem;

    color:
        var(--gytis-gold);
}


/* =========================================================
   18 — PURPOSE
   ========================================================= */

.gytis-purpose {

    background:
        var(--gytis-navy-deep);
}


.gytis-purpose-inner {

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(280px,0.55fr);

    gap:
        90px;

    align-items:
        center;
}


.gytis-purpose-content h2 {

    color:
        var(--gytis-white);
}


.gytis-purpose-content h2 span {

    color:
        var(--gytis-gold-light);
}


.gytis-purpose-content p {

    max-width:
        730px;

    margin:
        25px 0 0;

    font-size:
        1rem;

    line-height:
        1.85;
}


.gytis-purpose-visual {

    min-height:
        430px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(201,162,39,0.18);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(201,162,39,0.12),
            transparent 65%
        );
}


.gytis-purpose-word {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    transform:
        rotate(-7deg);
}


.gytis-purpose-word span {

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            1.65rem,
            3vw,
            3rem
        );

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        -0.05em;

    color:
        rgba(255,255,255,0.15);
}


.gytis-purpose-word span:nth-child(2) {

    color:
        rgba(201,162,39,0.80);
}


.gytis-purpose-word span:nth-child(3) {

    color:
        rgba(255,255,255,0.65);
}


/* =========================================================
   19 — CLOSING
   ========================================================= */

.gytis-closing {

    padding-block:
        clamp(
            110px,
            13vw,
            190px
        );

    text-align:
        center;

    background:
        var(--gytis-soft);
}


.gytis-closing .gytis-eyebrow {

    justify-content:
        center;
}


.gytis-closing .gytis-eyebrow::before {

    display:
        none;
}


.gytis-closing h2 {

    max-width:
        950px;

    margin:
        0 auto;

    font-size:
        clamp(
            3.2rem,
            7vw,
            7rem
        );

    line-height:
        0.94;
}


.gytis-closing h2 span {

    color:
        var(--gytis-navy);
}


.gytis-closing p {

    max-width:
        760px;

    margin:
        32px auto 0;

    font-size:
        1.05rem;

    line-height:
        1.85;

    color:
        var(--gytis-muted);
}


/* =========================================================
   20 — FINAL CTA
   ========================================================= */

.gytis-cta {

    padding-block:
        clamp(
            70px,
            8vw,
            110px
        );

    background:
        var(--gytis-navy);
}


.gytis-cta-inner {

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    align-items:
        center;

    gap:
        60px;
}


.gytis-cta h2 {

    color:
        var(--gytis-white);
}


.gytis-cta h2 span {

    color:
        var(--gytis-gold-light);
}


.gytis-cta p {

    max-width:
        680px;

    margin:
        24px 0 0;

    font-size:
        0.98rem;

    line-height:
        1.8;

    color:
        rgba(255,255,255,0.72);
}


.gytis-cta-actions {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

    min-width:
        210px;
}


.gytis-cta-actions .gytis-btn {

    width:
        100%;
}


/* =========================================================
   21 — RESPONSIVE LARGE TABLET
   ========================================================= */

@media (max-width:1100px) {

    .gytis-hero__inner {

        grid-template-columns:
            minmax(0,1fr)
            minmax(350px,0.75fr);

        gap:
            55px;
    }


    .gytis-focus-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }


    .gytis-expect-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }


    .gytis-attendee-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


/* =========================================================
   22 — TABLET
   ========================================================= */

@media (max-width:900px) {

    .gytis-hero {

        min-height:
            auto;
    }


    .gytis-hero__inner {

        grid-template-columns:
            1fr;

        padding-block:
            75px 95px;
    }


    .gytis-hero__content {

        max-width:
            760px;
    }


    .gytis-hero__media {

        width:
            min(
                100%,
                620px
            );

        margin-inline:
            auto;
    }


    /*
       IMPORTANT:
       Content always appears before the visual
       when a split becomes one column.
    */

    .gytis-split,
    .gytis-split--dark {

        grid-template-columns:
            1fr;

        gap:
            55px;
    }


    .gytis-split .gytis-content,
    .gytis-split--dark .gytis-content {

        order:
            1;
    }


    .gytis-split .gytis-photo,
    .gytis-split--dark .gytis-attendee-grid {

        order:
            2;
    }


    .gytis-benefit-layout {

        grid-template-columns:
            1fr;

        gap:
            45px;
    }


    .gytis-connection-inner {

        grid-template-columns:
            1fr;

        gap:
            55px;
    }


    .gytis-connection-visual {

        width:
            min(
                100%,
                520px
            );

        margin-inline:
            auto;
    }


    .gytis-partner-layout {

        grid-template-columns:
            1fr;

        gap:
            45px;
    }


    .gytis-event-inner {

        grid-template-columns:
            1fr;

        gap:
            55px;
    }


    .gytis-event-card {

        width:
            min(
                100%,
                540px
            );

        margin-inline:
            auto;
    }


    .gytis-purpose-inner {

        grid-template-columns:
            1fr;

        gap:
            55px;
    }


    .gytis-purpose-visual {

        width:
            min(
                100%,
                440px
            );

        min-height:
            440px;

        margin-inline:
            auto;
    }


    .gytis-cta-inner {

        grid-template-columns:
            1fr;

        gap:
            40px;
    }


    .gytis-cta-actions {

        flex-direction:
            row;

        flex-wrap:
            wrap;

        min-width:
            0;
    }


    .gytis-cta-actions .gytis-btn {

        width:
            auto;
    }

}


/* =========================================================
   23 — MOBILE
   ========================================================= */

@media (max-width:640px) {

    .gytis-section > .container,
    .gytis-hero > .container,
    .gytis-purpose > .container,
    .gytis-closing > .container,
    .gytis-cta > .container,
    .gytis-event > .container,
    .gytis-connection > .container {

        width:
            min(
                calc(100% - 32px),
                var(--gytis-container)
            );
    }


    .gytis-section {

        padding-block:
            76px;
    }


    /* HERO */

    .gytis-hero__inner {

        gap:
            52px;

        padding-block:
            58px 82px;
    }


    .gytis-hero h1 {

        font-size:
            clamp(
                3.25rem,
                17vw,
                5rem
            );

        letter-spacing:
            -0.075em;
    }


    .gytis-hero__lead {

        margin-top:
            24px;

        font-size:
            0.96rem;

        line-height:
            1.75;
    }


    .gytis-hero__tags {

        margin-top:
            23px;
    }


    .gytis-hero__tags span {

        min-height:
            32px;

        padding:
            6px 11px;

        font-size:
            0.63rem;
    }


    .gytis-hero__actions {

        margin-top:
            29px;

        flex-direction:
            column;

        align-items:
            stretch;
    }


    .gytis-hero__actions .gytis-btn {

        width:
            100%;
    }


    .gytis-hero__media {

        width:
            calc(100% - 14px);

        margin-left:
            14px;
    }


    .gytis-hero__media-frame {

        padding:
            10px;
    }


    .gytis-hero__media img {

        aspect-ratio:
            4 / 4.8;

        border-radius:
            18px;
    }


    .gytis-hero__media figcaption {

        right:
            17px;

        bottom:
            17px;

        left:
            17px;

        padding:
            11px 12px;
    }


    .gytis-hero__media figcaption strong {

        font-size:
            0.59rem;
    }


    .gytis-hero__media figcaption span {

        font-size:
            0.70rem;
    }


    .gytis-hero__bottom .container {

        min-height:
            48px;

        width:
            min(
                calc(100% - 32px),
                var(--gytis-container)
            );

        overflow:
            hidden;

        white-space:
            nowrap;
    }


    .gytis-hero__bottom span {

        font-size:
            0.50rem;
    }


    .gytis-hero__bottom i {

        width:
            3px;

        height:
            3px;
    }


    /* TYPOGRAPHY */

    .gytis-eyebrow {

        margin-bottom:
            17px;

        font-size:
            0.62rem;

        letter-spacing:
            0.15em;
    }


    .gytis-content h2,
    .gytis-heading h2,
    .gytis-event-content h2 {

        font-size:
            clamp(
                2.25rem,
                11vw,
                3.35rem
            );

        line-height:
            1;
    }


    .gytis-content p,
    .gytis-heading > p {

        font-size:
            0.93rem;

        line-height:
            1.78;
    }


    .gytis-content .gytis-lead {

        margin-top:
            21px;

        font-size:
            1rem;
    }


    /* MAP */

    .gytis-photo__visual {

        min-height:
            360px;

        border-radius:
            20px;
    }


    .gytis-map {

        width:
            275px;

        height:
            275px;
    }


    .gytis-map__node {

        width:
            60px;

        height:
            60px;
    }


    .gytis-map__node--ghana {

        top:
            30px;

        left:
            14px;
    }


    .gytis-map__node--yorkshire {

        right:
            14px;

        bottom:
            30px;
    }


    .gytis-map__centre {

        width:
            88px;

        height:
            88px;
    }


    .gytis-map__centre strong {

        font-size:
            1rem;
    }


    .gytis-map__line {

        width:
            115px;
    }


    .gytis-photo::after {

        width:
            65px;

        height:
            65px;

        right:
            -10px;

        bottom:
            -10px;
    }


    .gytis-photo--border::before {

        width:
            70px;

        height:
            70px;

        top:
            10px;

        left:
            -10px;
    }


    .gytis-photo figcaption {

        left:
            12px;

        bottom:
            12px;

        padding:
            11px 12px;
    }


    .gytis-photo figcaption strong {

        font-size:
            0.59rem;
    }


    .gytis-photo figcaption span {

        font-size:
            0.69rem;
    }


    /* HIGHLIGHT */

    .gytis-highlight {

        margin-top:
            27px;

        padding:
            18px;
    }


    /* FOCUS */

    .gytis-focus-grid {

        grid-template-columns:
            1fr;

        gap:
            12px;
    }


    .gytis-focus-card {

        min-height:
            235px;

        padding:
            25px 22px;
    }


    /* ATTENDEES */

    .gytis-attendee-grid {

        grid-template-columns:
            1fr;

        gap:
            10px;
    }


    .gytis-attendee-grid article {

        min-height:
            105px;

        padding:
            18px;
    }


    /* BENEFITS */

    .gytis-benefit-main {

        min-height:
            360px;

        padding:
            30px 25px;
    }


    .gytis-benefit-main h3 {

        font-size:
            2.4rem;
    }


    .gytis-benefit-side article {

        padding:
            20px 0;
    }


    /* EXPECT */

    .gytis-heading {

        margin-bottom:
            36px;
    }


    .gytis-expect-grid {

        grid-template-columns:
            1fr;

        gap:
            12px;
    }


    .gytis-expect-grid article {

        min-height:
            auto;

        padding:
            25px 22px;
    }


    .gytis-expect-grid span {

        margin-bottom:
            28px;
    }


    /* CONNECTION */

    .gytis-connection-visual {

        min-height:
            350px;
    }


    .gytis-orbit--one {

        width:
            220px;

        height:
            110px;
    }


    .gytis-orbit--two {

        width:
            285px;

        height:
            145px;
    }


    .gytis-orbit--three {

        width:
            330px;

        height:
            180px;
    }


    .gytis-connection-centre {

        width:
            100px;

        height:
            100px;
    }


    .gytis-connection-centre strong {

        font-size:
            1.2rem;
    }


    .gytis-connection-node {

        width:
            68px;

        height:
            68px;
    }


    .gytis-connection-node--ghana {

        top:
            32px;

        left:
            4px;
    }


    .gytis-connection-node--yorkshire {

        right:
            0;

        bottom:
            32px;
    }


    /* PARTNERS */

    .gytis-partner-feature {

        min-height:
            330px;

        padding:
            30px;
    }


    .gytis-partner-list article {

        min-height:
            90px;
    }


    .gytis-partner-list article strong {

        font-size:
            1rem;
    }


    /* EVENT */

    .gytis-event-details {

        grid-template-columns:
            1fr;

        gap:
            10px;
    }


    .gytis-event-card {

        min-height:
            320px;

        padding:
            25px;
    }


    .gytis-event-card__middle strong {

        font-size:
            1.35rem;
    }


    /* PURPOSE */

    .gytis-purpose-inner {

        gap:
            45px;
    }


    .gytis-purpose-content h2 {

        font-size:
            clamp(
                2.4rem,
                11vw,
                3.6rem
            );
    }


    .gytis-purpose-visual {

        min-height:
            330px;

        width:
            330px;

        max-width:
            100%;
    }


    .gytis-purpose-word span {

        font-size:
            2rem;
    }


    /* CLOSING */

    .gytis-closing {

        padding-block:
            90px;
    }


    .gytis-closing h2 {

        font-size:
            clamp(
                2.8rem,
                13vw,
                4.2rem
            );
    }


    .gytis-closing p {

        font-size:
            0.93rem;
    }


    /* CTA */

    .gytis-cta-inner {

        gap:
            35px;
    }


    .gytis-cta h2 {

        font-size:
            clamp(
                2.35rem,
                11vw,
                3.5rem
            );
    }


    .gytis-cta-actions {

        flex-direction:
            column;
    }


    .gytis-cta-actions .gytis-btn {

        width:
            100%;
    }

}


/* =========================================================
   24 — VERY SMALL DEVICES
   ========================================================= */

@media (max-width:420px) {

    .gytis-section > .container,
    .gytis-hero > .container,
    .gytis-purpose > .container,
    .gytis-closing > .container,
    .gytis-cta > .container,
    .gytis-event > .container,
    .gytis-connection > .container {

        width:
            calc(100% - 28px);
    }


    .gytis-hero__title-line {

        gap:
            9px;
    }


    .gytis-hero__title-line span {

        width:
            32px;
    }


    .gytis-hero__title-line strong {

        font-size:
            0.61rem;
    }


    .gytis-photo__visual {

        min-height:
            320px;
    }


    .gytis-map {

        width:
            245px;

        height:
            245px;
    }


    .gytis-purpose-visual {

        width:
            285px;

        min-height:
            285px;
    }


    .gytis-purpose-word span {

        font-size:
            1.72rem;
    }


    .gytis-event-card__middle {

        gap:
            10px;
    }


    .gytis-event-card__middle strong {

        font-size:
            1.08rem;
    }

}


/* =========================================================
   25 — FOCUS STATES
   ========================================================= */

.gytis-page a:focus-visible,
.gytis-page button:focus-visible {

    outline:
        2px solid
        var(--gytis-gold-light);

    outline-offset:
        4px;
}


/* =========================================================
   26 — SELECTION
   ========================================================= */

.gytis-page ::selection {

    background:
        var(--gytis-gold);

    color:
        var(--gytis-navy);
}


/* =========================================================
   27 — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }


    .gytis-focus-card,
    .gytis-benefit-main,
    .gytis-benefit-side article,
    .gytis-expect-grid article,
    .gytis-partner-feature,
    .gytis-partner-list article {

        opacity:
            1;

        transform:
            none;
    }

}

/* =========================================================
   SHOFT / GYTIS — TOP ANNOUNCEMENT BAR
   ========================================================= */

.top-bar {
    position: relative;
    width: 100%;
    height: 42px;
    overflow: hidden;
    background: #0d1040;
    color: #ffffff;
    display: flex;
    align-items: center;
    z-index: 1000;
}

.top-bar__track {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.top-bar__scroll {
    display: inline-flex;
    width: max-content;
    align-items: center;

    animation:
        shoftAnnouncementScroll
        34s
        linear
        infinite;

    will-change: transform;
}

.top-bar__scroll span {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;

    padding-right: 90px;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
}

.top-bar__scroll span::first-letter {
    color: #f6ad3b;
}

@keyframes shoftAnnouncementScroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-33.333333%);
    }

}

.top-bar:hover .top-bar__scroll {
    animation-play-state: paused;
}

@media (max-width: 768px) {

    .top-bar {
        height: 44px;
    }

    .top-bar__scroll {
        animation-duration: 30s;
    }

    .top-bar__scroll span {
        padding-right: 70px;
        font-size: 12px;
        font-weight: 600;
    }

}

@media (max-width: 480px) {

    .top-bar {
        height: 44px;
    }

    .top-bar__scroll {
        animation-duration: 28s;
    }

    .top-bar__scroll span {
        padding-right: 60px;
        font-size: 11.5px;
    }

}

@media (prefers-reduced-motion: reduce) {

    .top-bar__scroll {
        animation: none;
        transform: none;
    }

    .top-bar__scroll span:not(:first-child) {
        display: none;
    }

}

/* =========================================================
   GYTIS 2026 — MOBILE TAGS ONLY
   Does NOT modify the hero container or hero image
   ========================================================= */

@media (max-width: 767px) {

    .gytis-hero__tags > span {
        white-space: nowrap;
        flex: 0 0 auto;
        font-size: 10px;
        line-height: 1;
        padding-left: 10px;
        padding-right: 10px;
    }

    .gytis-hero__tags {
        white-space: nowrap;
        flex-wrap: nowrap;
    }

}

/* =========================================================
   GYTIS 2026 — ULTRA PREMIUM PRE-SUMMIT GALLERY
   SCOPED ONLY TO #gallery.gytis-gallery
   ========================================================= */

#gallery.gytis-gallery {
    --gytis-navy: #0b1538;
    --gytis-navy-deep: #070f2a;
    --gytis-gold: #d9b83f;
    --gytis-gold-soft: #ead36d;
    --gytis-white: #ffffff;
    --gytis-muted: #aeb7cd;
    --gytis-border: rgba(255, 255, 255, 0.12);

    position: relative;
    width: 100%;
    padding: 130px 0 140px;
    background: #f5f5f2;
    overflow: hidden;
}


/* =========================================================
   CONTAINER
   ========================================================= */

#gallery.gytis-gallery .gytis-gallery__container {
    width: min(1380px, calc(100% - 64px));
    margin: 0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

#gallery.gytis-gallery .gytis-gallery__header {
    max-width: 820px;
    margin: 0 auto 65px;
    text-align: center;
}

#gallery.gytis-gallery .gytis-gallery__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;

    color: var(--gytis-navy);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

#gallery.gytis-gallery .gytis-gallery__eyebrow span {
    width: 42px;
    height: 2px;
    display: block;
    background: var(--gytis-gold);
}

#gallery.gytis-gallery .gytis-gallery__header h2 {
    margin: 0;
    color: var(--gytis-navy);
    font-size: clamp(3rem, 6vw, 6.5rem);
    font-weight: 700;
    line-height: 0.94;
    letter-spacing: -0.055em;
}

#gallery.gytis-gallery .gytis-gallery__header h2 em {
    display: block;
    margin-top: 8px;
    color: var(--gytis-gold);
    font-style: normal;
}

#gallery.gytis-gallery .gytis-gallery__header p {
    max-width: 680px;
    margin: 30px auto 0;
    color: #5f6470;
    font-size: 1.05rem;
    line-height: 1.85;
}


/* =========================================================
   CAROUSEL
   ========================================================= */

#gallery.gytis-gallery .gytis-gallery__carousel {
    position: relative;
    width: 100%;
    outline: none;
}

#gallery.gytis-gallery .gytis-gallery__carousel:focus-visible {
    outline: 2px solid var(--gytis-gold);
    outline-offset: 10px;
}


/* =========================================================
   MAIN VIEWER
   ========================================================= */

#gallery.gytis-gallery .gytis-gallery__viewer {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(340px, 0.7fr);
    min-height: 650px;
    background: var(--gytis-navy);
    box-shadow:
        0 30px 80px rgba(11, 21, 56, 0.16);
}


/* =========================================================
   IMAGE SIDE
   ========================================================= */

#gallery.gytis-gallery .gytis-gallery__visual {
    position: relative;
    min-width: 0;
    min-height: 650px;
    overflow: hidden;
    background: #090909;
}

#gallery.gytis-gallery .gytis-gallery__image-wrap {
    position: absolute;
    inset: 0;
}


/* =========================================================
   SLIDES
   ========================================================= */

#gallery.gytis-gallery .gytis-gallery__slide {
    position: absolute;
    inset: 0;

    margin: 0;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: scale(1.025);

    transition:
        opacity 0.65s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.65s ease;
}

#gallery.gytis-gallery .gytis-gallery__slide.is-active {
    z-index: 2;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: scale(1);
}

#gallery.gytis-gallery .gytis-gallery__slide img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================================
   SUBTLE IMAGE OVERLAY
   ========================================================= */

#gallery.gytis-gallery .gytis-gallery__visual::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.08),
            transparent 55%
        );
}


/* =========================================================
   IMAGE COUNTER
   ========================================================= */

#gallery.gytis-gallery .gytis-gallery__counter {
    position: absolute;

    top: 28px;
    right: 30px;

    z-index: 12;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 11px 15px;

    color: #fff;

    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.15em;

    background: rgba(7, 15, 42, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.18);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

#gallery.gytis-gallery .gytis-gallery__counter-line {
    width: 22px;
    height: 1px;
    background: rgba(255, 255, 255, 0.45);
}


/* =========================================================
   ARROWS
   ========================================================= */

#gallery.gytis-gallery .gytis-gallery__arrow {
    position: absolute;

    top: 50%;
    z-index: 15;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;

    background: rgba(7, 15, 42, 0.68);

    color: #fff;

    font-size: 1.25rem;

    cursor: pointer;

    transform: translateY(-50%);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.3s ease;
}

#gallery.gytis-gallery .gytis-gallery__arrow:hover {
    background: var(--gytis-gold);
    border-color: var(--gytis-gold);

    color: var(--gytis-navy);

    transform: translateY(-50%) scale(1.06);
}

#gallery.gytis-gallery .gytis-gallery__arrow:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

#gallery.gytis-gallery .gytis-gallery__arrow--prev {
    left: 25px;
}

#gallery.gytis-gallery .gytis-gallery__arrow--next {
    right: 25px;
}


/* =========================================================
   PREMIUM INFORMATION PANEL
   ========================================================= */

#gallery.gytis-gallery .gytis-gallery__info {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-width: 0;

    padding: 52px 48px 42px;

    color: #fff;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(217, 184, 63, 0.13),
            transparent 40%
        ),
        var(--gytis-navy);
}


/* =========================================================
   INFO TOP
   ========================================================= */

#gallery.gytis-gallery .gytis-gallery__info-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 24px;

    border-bottom: 1px solid var(--gytis-border);
}

#gallery.gytis-gallery .gytis-gallery__info-number {
    color: var(--gytis-gold);

    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

#gallery.gytis-gallery .gytis-gallery__info-category {
    max-width: 170px;

    color: var(--gytis-muted);

    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.15em;
    text-align: right;
}


/* =========================================================
   INFO CONTENT
   ========================================================= */

#gallery.gytis-gallery .gytis-gallery__info-content {
    padding: 45px 0;
}

#gallery.gytis-gallery .gytis-gallery__info-label {
    display: block;

    margin-bottom: 17px;

    color: var(--gytis-gold);

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

#gallery.gytis-gallery .gytis-gallery__info h3 {
    max-width: 480px;

    margin: 0;

    color: #fff;

    font-size: clamp(1.8rem, 2.6vw, 3rem);
    font-weight: 650;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

#gallery.gytis-gallery .gytis-gallery__info h3::after {
    content: "";

    display: block;

    width: 46px;
    height: 3px;

    margin: 28px 0;

    background: var(--gytis-gold);
}

#gallery.gytis-gallery .gytis-gallery__info p {
    max-width: 440px;

    margin: 0;

    color: #c3c9d7;

    font-size: 0.98rem;
    line-height: 1.85;
}


/* =========================================================
   INFO BOTTOM
   ========================================================= */

#gallery.gytis-gallery .gytis-gallery__info-bottom {
    padding-top: 25px;

    border-top: 1px solid var(--gytis-border);
}

#gallery.gytis-gallery .gytis-gallery__meta {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 22px;

    color: #c3c9d7;

    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    line-height: 1.5;
}

#gallery.gytis-gallery .gytis-gallery__meta-line {
    width: 24px;
    height: 1px;
    flex: 0 0 auto;

    background: var(--gytis-gold);
}

#gallery.gytis-gallery .gytis-gallery__progress {
    width: 100%;
    height: 2px;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.12);
}

#gallery.gytis-gallery .gytis-gallery__progress span {
    display: block;

    height: 100%;

    background: var(--gytis-gold);

    transition: width 0.55s ease;
}


/* =========================================================
   THUMBNAILS
   ========================================================= */

#gallery.gytis-gallery .gytis-gallery__thumbnails {
    display: flex;
    gap: 10px;

    margin-top: 20px;

    padding: 0 2px 8px;

    overflow-x: auto;

    scrollbar-width: thin;
    scrollbar-color: #b7b7b7 transparent;
}

#gallery.gytis-gallery .gytis-gallery__thumbnails::-webkit-scrollbar {
    height: 4px;
}

#gallery.gytis-gallery .gytis-gallery__thumbnails::-webkit-scrollbar-track {
    background: transparent;
}

#gallery.gytis-gallery .gytis-gallery__thumbnails::-webkit-scrollbar-thumb {
    background: #b7b7b7;
}


/* =========================================================
   THUMBNAIL BUTTON
   ========================================================= */

#gallery.gytis-gallery .gytis-gallery__thumbnail {
    position: relative;

    flex: 0 0 112px;

    width: 112px;
    height: 78px;

    padding: 0;

    overflow: hidden;

    border: 2px solid transparent;

    background: #ddd;

    cursor: pointer;

    opacity: 0.48;

    transition:
        opacity 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

#gallery.gytis-gallery .gytis-gallery__thumbnail:hover {
    opacity: 0.82;
    transform: translateY(-3px);
}

#gallery.gytis-gallery .gytis-gallery__thumbnail.is-active {
    opacity: 1;

    border-color: var(--gytis-gold);

    transform: translateY(-3px);
}

#gallery.gytis-gallery .gytis-gallery__thumbnail:focus-visible {
    outline: 2px solid var(--gytis-navy);
    outline-offset: 3px;
}

#gallery.gytis-gallery .gytis-gallery__thumbnail img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================================
   THUMBNAIL NUMBER
   ========================================================= */

#gallery.gytis-gallery .gytis-gallery__thumbnail span {
    position: absolute;

    top: 7px;
    left: 7px;

    z-index: 3;

    min-width: 24px;

    padding: 4px 6px;

    color: #fff;

    background: rgba(7, 15, 42, 0.78);

    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    #gallery.gytis-gallery {
        padding: 105px 0 110px;
    }

    #gallery.gytis-gallery .gytis-gallery__container {
        width: min(100% - 40px, 900px);
    }

    #gallery.gytis-gallery .gytis-gallery__viewer {
        grid-template-columns: 1fr;
    }

    #gallery.gytis-gallery .gytis-gallery__visual {
        min-height: 600px;
    }

    #gallery.gytis-gallery .gytis-gallery__info {
        min-height: 420px;
        padding: 42px;
    }

    #gallery.gytis-gallery .gytis-gallery__info-content {
        padding: 35px 0;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    #gallery.gytis-gallery {
        padding: 80px 0 90px;
    }

    #gallery.gytis-gallery .gytis-gallery__container {
        width: calc(100% - 30px);
    }

    #gallery.gytis-gallery .gytis-gallery__header {
        margin-bottom: 40px;
        text-align: left;
    }

    #gallery.gytis-gallery .gytis-gallery__eyebrow {
        font-size: 0.62rem;
    }

    #gallery.gytis-gallery .gytis-gallery__header h2 {
        font-size: clamp(2.7rem, 13vw, 4rem);
    }

    #gallery.gytis-gallery .gytis-gallery__header p {
        margin-top: 22px;

        font-size: 0.93rem;
        line-height: 1.75;
    }

    #gallery.gytis-gallery .gytis-gallery__visual {
        min-height: 70vw;
        aspect-ratio: 4 / 3;
    }

    #gallery.gytis-gallery .gytis-gallery__counter {
        top: 15px;
        right: 15px;
    }

    #gallery.gytis-gallery .gytis-gallery__arrow {
        width: 46px;
        height: 46px;
    }

    #gallery.gytis-gallery .gytis-gallery__arrow--prev {
        left: 13px;
    }

    #gallery.gytis-gallery .gytis-gallery__arrow--next {
        right: 13px;
    }

    #gallery.gytis-gallery .gytis-gallery__info {
        min-height: auto;
        padding: 32px 25px 28px;
    }

    #gallery.gytis-gallery .gytis-gallery__info-content {
        padding: 30px 0 35px;
    }

    #gallery.gytis-gallery .gytis-gallery__info h3 {
        font-size: 1.8rem;
    }

    #gallery.gytis-gallery .gytis-gallery__info p {
        font-size: 0.9rem;
        line-height: 1.75;
    }

    #gallery.gytis-gallery .gytis-gallery__thumbnail {
        flex-basis: 82px;
        width: 82px;
        height: 60px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    #gallery.gytis-gallery {
        padding: 65px 0 75px;
    }

    #gallery.gytis-gallery .gytis-gallery__container {
        width: calc(100% - 22px);
    }

    #gallery.gytis-gallery .gytis-gallery__visual {
        min-height: 72vw;
    }

    #gallery.gytis-gallery .gytis-gallery__info {
        padding: 27px 20px 24px;
    }

    #gallery.gytis-gallery .gytis-gallery__info-category {
        max-width: 130px;
        font-size: 0.55rem;
    }

    #gallery.gytis-gallery .gytis-gallery__info h3 {
        font-size: 1.55rem;
    }

    #gallery.gytis-gallery .gytis-gallery__info p {
        font-size: 0.86rem;
    }

}