.section-title{
text-align:center;
margin-bottom:40px;
margin-top: 20px;
    position:relative;
    z-index:2;
}

.section-title h2{
font-size:42px;
color:#111827;
margin-bottom:15px;
}

.section-title p{
color:#6b7280;
}



/* ==========================================================
   PAGE LAYOUT
========================================================== */

html,
body{
    height:100%;
    margin:0;
}

body{
    display:flex;
    flex-direction:column;
    min-height:100vh;
}

.page-wrapper{
    display:flex;
    flex-direction:column;
    flex:1;
}

.page-content{
    flex:1;

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

    text-align:center;

    padding:80px 20px;
}

.page-content h1{
    font-size:52px;
    margin-bottom:20px;
}

.page-content p{
    font-size:20px;
    color:#666;
}

footer{
    background:#111;
    color:white;
    text-align:center;
    padding:20px 0;
}




/* ===========================================
   Organization Page
=========================================== */

.organization-page{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:50px 0;
}

.organization-chart{
    width:100%;
    max-width:1400px;
    height:auto;
    display:block;

    border-radius:18px;
    box-shadow:0 15px 40px rgba(0,0,0,.12);
}

/* ==========================================================
   CHAIRMAN MESSAGE CSS
========================================================== */

.chairman-hero{

    position:relative;

    min-height:85vh;

    display:flex;
    align-items:center;

    overflow:hidden;

    background:#171717;

}


/* ==========================================================
   BACKGROUND
========================================================== */

.chairman-background{

    position:absolute;
    inset:0;

    background-color:#171717;

    /*
        Update this path only if your image is stored elsewhere.
    */

    background-image:
        url("../../assets/pages/company/chairman-message.jpg");

    background-size:cover;

    /*
        Keeps the Chairman and podium visible on the left.
        The clean LED wall remains available for the card.
    */

    background-position:left center;
    background-size: 110%;
    background-repeat:no-repeat;

    z-index:0;

}


/* ==========================================================
   OVERLAY
========================================================== */

.chairman-overlay{

    position:absolute;
    inset:0;

    /*
        Light on the Chairman's side,
        darker behind the message panel.
    */

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.06) 0%,
            rgba(0,0,0,.10) 30%,
            rgba(0,0,0,.22) 50%,
            rgba(0,0,0,.42) 72%,
            rgba(0,0,0,.58) 100%
        );

    z-index:1;

}


/* ==========================================================
   LAYOUT
========================================================== */

.chairman-container{

    position:relative;
    z-index:2;

    width:100%;
    min-height:85vh;

    display:flex;

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

    padding:70px 7%;

}


/* ==========================================================
   GLASS CARD
========================================================== */

.chairman-message{

    width:100%;
    max-width:590px;

    margin-right:1%;

    padding:48px 50px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.91),
            rgba(247,248,250,.82)
        );

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

    border:1px solid rgba(255,255,255,.65);
    border-radius:24px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.85);

    opacity:0;
    transform:translateY(40px);

    animation:chairmanReveal .9s ease forwards;
    animation-delay:.3s;

}


/* ==========================================================
   SMALL LABEL
========================================================== */

.chairman-label{

    display:inline-block;

    padding:8px 16px;

    margin-bottom:18px;

    background:#c1121f;

    color:#fff;

    border-radius:50px;

    font-size:14px;
    font-weight:700;

    letter-spacing:.3px;

}


/* ==========================================================
   HEADING
========================================================== */

.chairman-message h1{

    margin:0 0 25px;

    color:#111827;

    font-size:clamp(34px,3vw,44px);
    line-height:1.18;

}


/* ==========================================================
   PARAGRAPHS
========================================================== */

.chairman-message p{

    margin:0 0 18px;

    color:#4b5563;

    font-size:16px;
    line-height:1.8;

}

.chairman-message p:first-of-type{

    color:#1f2937;

    font-weight:700;

}


/* ==========================================================
   SIGNATURE
========================================================== */

.chairman-signature{

    margin-top:34px;
    padding-top:22px;

    display:flex;
    flex-direction:column;

    gap:5px;

    border-top:1px solid rgba(17,24,39,.12);

}

.chairman-signature strong{

    color:#111827;

    font-size:20px;
    letter-spacing:.5px;

}

.chairman-signature span{

    color:#c1121f;

    font-weight:700;

}


/* ==========================================================
   ANIMATION
========================================================== */

@keyframes chairmanReveal{

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

@media (max-width:1100px){

    .chairman-background{

        background-position:28% center;

    }

    .chairman-container{

        padding:60px 5%;

    }

    .chairman-message{

        max-width:540px;

        padding:42px;

    }

}


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

@media (max-width:768px){

    .chairman-hero{

        min-height:auto;

        align-items:flex-end;

    }

    .chairman-background{

        background-position:25% center;

    }

    .chairman-overlay{

        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.04) 0%,
                rgba(0,0,0,.12) 38%,
                rgba(0,0,0,.58) 65%,
                rgba(0,0,0,.82) 100%
            );

    }

    .chairman-container{

        min-height:auto;

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

        padding:
            clamp(390px,67vh,600px)
            16px
            24px;

    }

    .chairman-message{

        max-width:none;

        margin-right:0;

        padding:30px 24px;

        border-radius:20px;

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

    }

    .chairman-message h1{

        font-size:clamp(29px,8vw,38px);

    }

    .chairman-message p{

        font-size:15px;
        line-height:1.7;

    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

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

    .chairman-message{

        opacity:1;
        transform:none;

        animation:none;

    }

}




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



/* ==========================================================
   GLOBAL SCROLL Credentials Area
========================================================== */

html{

    scroll-behavior:smooth;

    scroll-snap-type:y proximity;

}

body{

    overflow-y:auto;

}


/* ==========================================================
   PAGE SNAP SECTIONS
========================================================== */

.chairman-hero,
.credentials-hero,
.credentials-section,
.partners-section{

    min-height:100vh;

    display:flex;

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

    scroll-snap-align:start;

    padding:100px 0 40px;

    box-sizing:border-box;


}








.credentials-hero{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:100px 0 40px;

}

.credentials-hero .page-label{

display:inline-block;

padding:8px 18px;

background:#c1121f;

color:#fff;

border-radius:50px;

font-size:14px;

font-weight:700;

margin-bottom:20px;

}

.credentials-hero h1{

font-size:52px;

color:#132c58;

margin-bottom:20px;

}

.credentials-hero p{

max-width:800px;

margin:0 auto;

font-size:18px;

line-height:1.8;

color:#6b7280;

}


/* ==========================================================
   ACCREDITATIONS
========================================================== */

.credentials-section{

padding:120px 0 80px;

}

.credentials-grid{

display:grid;

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

gap:30px;

margin-top:50px;

}


.credential-card{

position:relative;

height:270px;

border-radius:18px;

background:#ffffff;

overflow:hidden;

box-shadow:0 10px 35px rgba(0,0,0,.08);

transition:.35s ease;

cursor:pointer;

}

.credential-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 55px rgba(0,0,0,.18);

}


.credential-front{

height:100%;

padding:30px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

background:#ffffff;

}

.credential-badge{

display:inline-block;

padding:7px 16px;

background:#132c58;

color:white;

border-radius:30px;

font-size:13px;

font-weight:700;

margin-bottom:20px;

}


.credential-front h3{

font-size:24px;

color:#c1121f;

margin-bottom:12px;

}

.credential-front p{

font-size:15px;

line-height:1.7;

color:#6b7280;

}


.credential-back{

display:none;

}



/* ==========================================================
   FLIP CARD
========================================================== */

.credential-card{

position:relative;

height:280px;

perspective:1200px;

cursor:pointer;

}

.credential-inner{

position:relative;

width:100%;

height:100%;

transition:transform .7s ease;

transform-style:preserve-3d;

}

.credential-card:hover .credential-inner{

transform:rotateY(180deg);

}


.credential-front,
.credential-back{

position:absolute;

width:100%;

height:100%;

border-radius:18px;

overflow:hidden;

backface-visibility:hidden;

box-shadow:0 10px 35px rgba(0,0,0,.08);

}

.credential-front{

background:white;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

padding:30px;

text-align:center;

}


.credential-back{

transform:rotateY(180deg);

background-size:cover;

background-position:center;

background-repeat:no-repeat;

background-color:#d1d5db;

display:flex;

flex-direction:column;

justify-content:flex-end;

padding:25px;

position:absolute;

}


.credential-back::before{

content:"";

position:absolute;

inset:0;

background:rgba(0,0,0,.45);

}

.credential-back h4,
.credential-back p,
.credential-back span{

position:relative;

z-index:2;

color:white;

}

.credential-back h4{

margin-bottom:10px;

font-size:22px;

}

.credential-back p{

font-weight:700;

margin-bottom:10px;

}

.credential-back span{

line-height:1.6;

font-size:15px;

}

.credential-card:hover{

transform:translateY(-10px);

transition:.35s;

}



/* ==========================================================
   NVOCC (PSB)
========================================================== */

.nvocc .credential-back{

    background-image:url("../assets/Temporary1.jpg");

}


/* ==========================================================
   CAB
========================================================== */

.cab .credential-back{

    background-image:url("../assets/Temporary2.jpg");

}


/* ==========================================================
   PPA
========================================================== */

.ppa .credential-back{

    background-image:url("../assets/Temporary1.jpg");

}


/* ==========================================================
   ISO 9001
========================================================== */

.iso .credential-back{

    background-image:url("../assets/Temporary2.jpg");

}


/* ==========================================================
   IATA
========================================================== */

.iata .credential-back{

    background-image:url("../assets/Temporary1.jpg");

}


/* ==========================================================
   PISFA
========================================================== */

.pisfa .credential-back{

    background-image:url("../assets/Temporary2.jpg");

}


/* ==========================================================
   PMTLAI
========================================================== */

.pmtlai .credential-back{

    background-image:url("../assets/Temporary1.jpg");

}


/* ==========================================================
   AFPI
========================================================== */

.afpi .credential-back{

    background-image:url("../assets/Temporary2.jpg");

}

/* ==========================================================
PARTNERS
========================================================== */

.partners-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.partner-card{

background:#fff;

border-radius:22px;

overflow:hidden;

cursor:pointer;

transition:.35s;

box-shadow:0 10px 35px rgba(0,0,0,.08);

}

.partner-card:hover{

transform:translateY(-10px);

box-shadow:0 30px 60px rgba(0,0,0,.18);

}

.partner-image{

    height:230px;

    background:#d6d6d6;

    overflow:hidden;

}

.partner-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.35s;

}

.partner-card:hover .partner-image img{

    transform:scale(1.05);

}


.partner-image{

    height:230px;

    background:#d6d6d6;

    overflow:hidden;

}

.partner-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.35s;

}

.partner-card:hover .partner-image img{

    transform:scale(1.05);

}
.partner-content{

padding:30px;

}

.partner-content h3{

margin-bottom:15px;

color:#132c58;

}

.partner-content p{

color:#666;

line-height:1.8;

}

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

.partner-viewer {
    position: fixed;
    inset: 0;
    z-index: 9999;

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

    padding: 30px;

    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.partner-viewer.active {
    opacity: 1;
    visibility: visible;
}

.viewer-content {
    position: relative;

    width: min(780px, 92vw);

    max-height: 90vh;

    padding: 35px;

    background: #fff;
    border-radius: 22px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.28);

    overflow-y: auto;

    transform: scale(0.88);
    transition: transform 0.35s ease;
}

.partner-viewer.active .viewer-content {
    transform: scale(1);
}

.viewer-content h2 {
    margin: 0 45px 25px;
    text-align: center;
    color: #132c58;
}

.viewer-content img {
    display: block;

    width: min(650px, 100%);

    height: auto;
    max-height: 72vh;

    margin: 0 auto;

    object-fit: contain;
    border-radius: 15px;
    background: #f1f2f4;
}

.viewer-close {
    position: absolute;
    top: 15px;
    right: 20px;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    font-size: 30px;
    line-height: 1;

    color: #555;
    background: #f1f3f6;
    border: none;
    border-radius: 50%;

    cursor: pointer;
    transition: 0.25s ease;
}

.viewer-close:hover {
    color: #fff;
    background: #c1121f;
}

@media (max-width: 600px) {
    .partner-viewer {
        padding: 15px;
    }

    .viewer-content {
        width: 100%;
        padding: 28px 18px 20px;
        border-radius: 18px;
    }

    .viewer-content img {
        width: min(420px, 100%);
        max-height: 60vh;
    }
}



/* ==========================================================
   HISTORY PAGE — NORMAL DOCUMENT SCROLL
========================================================== */

.history-page{
    --history-red:#c1121f;
    --history-red-dark:#950d17;

    --history-navy:#132c58;
    --history-heading:#111827;

    --history-text:#4b5563;
    --history-muted:#6b7280;

    --history-light:#f4f5f7;
    --history-border:rgba(17,24,39,.10);

    --history-shadow:
        0 30px 90px rgba(15,23,42,.16);

    display:block;

    min-height:100vh;

    overflow-x:hidden;
    overflow-y:auto;

    background:#f5f5f5;
    color:var(--history-text);
}

.history-page main{
    display:block;

    width:100%;

    flex:none;

    overflow:visible;
}
/* ==========================================================
   HISTORY HERO
========================================================== */

.history-hero{

    position:relative;

    min-height:92vh;

    display:flex;
    align-items:center;

    isolation:isolate;

    overflow:hidden;

    padding:
        clamp(130px,16vh,180px)
        0
        clamp(90px,12vh,140px);

    background:#101820;

}


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

.history-hero-background{

    position:absolute;

    inset:-3%;

    z-index:-3;

    background-image:
        url("../assets/pages/company/history/history-hero.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    transform:scale(1.04);

    animation:historyHeroZoom 14s ease-out forwards;

}


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

.history-hero-overlay{

    position:absolute;

    inset:0;

    z-index:-2;

    background:

        linear-gradient(
            90deg,
            rgba(5,13,27,.90) 0%,
            rgba(8,18,35,.78) 43%,
            rgba(8,18,35,.42) 72%,
            rgba(8,18,35,.25) 100%
        ),

        linear-gradient(
            180deg,
            rgba(0,0,0,.24) 0%,
            rgba(0,0,0,.08) 55%,
            rgba(0,0,0,.45) 100%
        );

}


.history-hero::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:160px;

    z-index:-1;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0,0,0,.28)
        );

}


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

.history-hero-content{

    position:relative;

    z-index:2;

    width:100%;

    max-width:1280px;

    margin:0 auto;

    color:#fff;


}


.history-label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:22px;

    padding:9px 18px;

    border:1px solid rgba(255,255,255,.34);

    border-radius:999px;

    background:rgba(255,255,255,.12);

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

    color:#fff;

    font-size:14px;
    font-weight:800;

    letter-spacing:.08em;
    text-transform:uppercase;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25);

}


.history-label::before{

    content:"";

    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--history-red);

    box-shadow:
        0 0 0 5px rgba(193,18,31,.22);

}


.history-hero h1{

    max-width:850px;

    margin:0 0 24px;

    color:#fff;

    font-size:
        clamp(48px,7vw,92px);

    line-height:.98;

    letter-spacing:-.05em;

    text-shadow:
        0 12px 40px rgba(0,0,0,.30);

}


.history-hero p{

    max-width:720px;

    margin:0 0 38px;

    color:rgba(255,255,255,.84);

    font-size:
        clamp(17px,1.7vw,21px);

    line-height:1.8;

}


.history-scroll-button{

    display:inline-flex;

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

    gap:14px;

    min-height:54px;

    padding:14px 24px;

    border:1px solid rgba(255,255,255,.28);

    border-radius:999px;

    background:#fff;

    color:var(--history-heading);

    text-decoration:none;

    font-size:15px;
    font-weight:800;

    box-shadow:
        0 18px 45px rgba(0,0,0,.24);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease,
        color .3s ease;

}


.history-scroll-button span{

    display:grid;

    place-items:center;

    width:28px;
    height:28px;

    border-radius:50%;

    background:var(--history-red);

    color:#fff;

    font-size:16px;

    transition:transform .3s ease;

}


.history-scroll-button:hover{

    transform:translateY(-4px);

    background:var(--history-red);

    color:#fff;

    box-shadow:
        0 24px 55px rgba(0,0,0,.30);

}


.history-scroll-button:hover span{

    background:#fff;

    color:var(--history-red);

    transform:translateY(3px);

}



/* ==========================================================
   STORY SECTION
========================================================== */

.history-story-section{

    position:relative;

    isolation:isolate;

    padding:
        clamp(90px,10vw,150px)
        0;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 8% 18%,
            rgba(193,18,31,.08),
            transparent 28%
        ),

        radial-gradient(
            circle at 92% 78%,
            rgba(19,44,88,.10),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #eceff3 0%,
            #f7f7f8 42%,
            #eceff2 100%
        );

}


.history-story-section::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-3;

    opacity:.55;

    pointer-events:none;

    background-image:

        linear-gradient(
            rgba(17,24,39,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(17,24,39,.035) 1px,
            transparent 1px
        );

    background-size:48px 48px;

}


/* ==========================================================
   DECORATIVE BACKGROUND PHOTO COLLAGE
========================================================== */

.history-photo-collage{

    position:absolute;

    inset:0;

    z-index:-2;

    pointer-events:none;

}


.history-photo{

    position:absolute;

    overflow:hidden;

    border:8px solid rgba(255,255,255,.82);

    border-radius:22px;

    background-color:#d1d5db;

    background-size:cover;

    background-position:center;

    box-shadow:
        0 25px 70px rgba(15,23,42,.20);

    opacity:.78;

    filter:
        saturate(.72)
        contrast(.95);

}


.history-photo::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            145deg,
            rgba(19,44,88,.07),
            rgba(193,18,31,.10)
        );

}


.history-photo-one{

    top:7%;

    left:-60px;

    width:310px;
    height:390px;

    transform:rotate(-7deg);

    background-image:
        url("../assets/pages/company/history/history-background-01.jpg");

}


.history-photo-two{

    top:22%;

    right:-80px;

    width:350px;
    height:280px;

    transform:rotate(6deg);

    background-image:
        url("../assets/pages/company/history/history-background-02.jpg");

}


.history-photo-three{

    bottom:22%;

    left:-70px;

    width:340px;
    height:270px;

    transform:rotate(5deg);

    background-image:
        url("../assets/pages/company/history/history-background-03.jpg");

}


.history-photo-four{

    right:-65px;

    bottom:5%;

    width:300px;
    height:390px;

    transform:rotate(-6deg);

    background-image:
        url("../assets/pages/company/history/history-background-04.jpg");

}



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

.history-story-container{

    position:relative;

    z-index:2;

    max-width:1320px;

    margin:0 auto;

}



/* ==========================================================
   PREMIUM WHITE STORY PANEL
========================================================== */

.history-story-panel{

    position:relative;

    width:min(1120px,100%);

    margin:0 auto;

    padding:
        clamp(44px,6vw,82px);

    overflow:hidden;

    border:1px solid rgba(255,255,255,.95);

    border-radius:
        clamp(24px,3vw,38px);

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(250,250,251,.95)
        );

    box-shadow:
        var(--history-shadow);

}


.history-story-panel::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:7px;

    background:
        linear-gradient(
            90deg,
            var(--history-red),
            #e21d2d,
            var(--history-navy)
        );

}


.history-story-panel::after{

    content:"25";

    position:absolute;

    top:30px;
    right:44px;

    z-index:0;

    color:rgba(17,24,39,.025);

    font-size:
        clamp(120px,18vw,240px);

    font-weight:900;

    line-height:1;

    letter-spacing:-.1em;

    pointer-events:none;

}



/* ==========================================================
   RESET INNER SEMANTIC HEADER
========================================================== */

.history-page .history-story-header{

    position:relative;

    inset:auto;

    z-index:2;

    width:auto;
    height:auto;

    margin:0;

    padding:0;

    background:transparent;

    box-shadow:none;

    backdrop-filter:none;
    -webkit-backdrop-filter:none;

    text-align:center;

}



/* ==========================================================
   STORY INTRODUCTION
========================================================== */

.history-section-label{

    display:inline-block;

    margin-bottom:14px;

    color:var(--history-red);

    font-size:13px;
    font-weight:900;

    letter-spacing:.13em;
    text-transform:uppercase;

}


.history-story-header h2{

    max-width:780px;

    margin:0 auto 18px;

    color:var(--history-heading);

    font-size:
        clamp(38px,5vw,62px);

    line-height:1.08;

    letter-spacing:-.045em;

}


.history-story-header p{

    max-width:690px;

    margin:0 auto;

    color:var(--history-muted);

    font-size:
        clamp(16px,1.6vw,19px);

    line-height:1.8;

}


.history-divider{

    position:relative;

    width:100%;

    height:1px;

    margin:
        clamp(40px,6vw,70px)
        0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(17,24,39,.16),
            transparent
        );

}


.history-divider::after{

    content:"";

    position:absolute;

    top:50%;
    left:50%;

    width:12px;
    height:12px;

    border:3px solid #fff;

    border-radius:50%;

    background:var(--history-red);

    box-shadow:
        0 0 0 1px rgba(193,18,31,.25);

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

}



/* ==========================================================
   HISTORY SCRIPT / TIMELINE
========================================================== */

.history-script{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:0 auto;

}


.history-script::before{

    content:"";

    position:absolute;

    top:26px;
    bottom:26px;
    left:34px;

    width:2px;

    background:
        linear-gradient(
            180deg,
            rgba(193,18,31,.20),
            rgba(19,44,88,.20),
            rgba(193,18,31,.12)
        );

}


.history-chapter{

    position:relative;

    display:grid;

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

    gap:34px;

    padding-bottom:
        clamp(45px,6vw,70px);

}


.history-chapter:last-child{

    padding-bottom:0;

}


.history-chapter-number{

    position:relative;

    z-index:2;

    display:grid;

    place-items:center;

    width:70px;
    height:70px;

    border:8px solid #fff;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            var(--history-red),
            var(--history-red-dark)
        );

    color:#fff;

    font-size:15px;
    font-weight:900;

    box-shadow:
        0 12px 32px rgba(193,18,31,.25);

}


.history-chapter-content{

    padding-top:4px;

}


.history-year{

    display:inline-flex;

    align-items:center;

    min-height:31px;

    margin-bottom:12px;

    padding:6px 13px;

    border-radius:999px;

    background:rgba(19,44,88,.08);

    color:var(--history-navy);

    font-size:12px;
    font-weight:900;

    letter-spacing:.08em;
    text-transform:uppercase;

}


.history-chapter-content h3{

    margin:0 0 17px;

    color:var(--history-heading);

    font-size:
        clamp(25px,3vw,34px);

    line-height:1.2;

    letter-spacing:-.025em;

}


.history-chapter-content p{

    margin:0 0 16px;

    color:var(--history-text);

    font-size:
        clamp(16px,1.5vw,18px);

    line-height:1.9;

}


.history-chapter-content p:last-child{

    margin-bottom:0;

}



/* ==========================================================
   FEATURED HISTORY QUOTE
========================================================== */

.history-quote{

    position:relative;

    max-width:800px;

    margin:
        10px auto
        clamp(55px,7vw,85px);

    padding:
        clamp(34px,5vw,54px)
        clamp(28px,6vw,70px);

    overflow:hidden;

    border-left:6px solid var(--history-red);

    border-radius:4px 24px 24px 4px;

    background:

        linear-gradient(
            135deg,
            rgba(19,44,88,.97),
            rgba(9,26,53,.98)
        );

    box-shadow:
        0 24px 55px rgba(19,44,88,.20);

}


.history-quote::after{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    right:-90px;
    bottom:-120px;

    border-radius:50%;

    background:rgba(255,255,255,.06);

}


.history-quote-mark{

    position:absolute;

    top:-22px;
    left:20px;

    color:rgba(255,255,255,.11);

    font-family:Georgia,serif;

    font-size:145px;
    line-height:1;

}


.history-quote p{

    position:relative;

    z-index:2;

    margin:0;

    color:#fff;

    font-family:Georgia,serif;

    font-size:
        clamp(20px,2.8vw,30px);

    font-weight:500;

    font-style:italic;

    line-height:1.65;

}



/* ==========================================================
   HISTORY GALLERY
========================================================== */

.history-gallery{

    position:relative;

    z-index:2;

    margin-top:
        clamp(75px,9vw,110px);

    padding-top:
        clamp(55px,7vw,80px);

    border-top:1px solid var(--history-border);

}


.history-gallery-heading{

    max-width:700px;

    margin:0 auto 38px;

    text-align:center;

}


.history-gallery-heading h3{

    margin:0;

    color:var(--history-heading);

    font-size:
        clamp(30px,4vw,44px);

    line-height:1.2;

    letter-spacing:-.035em;

}


.history-gallery-grid{

    display:grid;

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

    gap:22px;

}


.history-gallery-card{

    position:relative;

    min-height:350px;

    margin:0;

    overflow:hidden;

    border-radius:20px;

    background:#d1d5db;

    box-shadow:
        0 14px 35px rgba(15,23,42,.13);

}


.history-gallery-card:nth-child(2){

    transform:translateY(24px);

}


.history-gallery-card img{

    width:100%;
    height:100%;

    min-height:350px;

    display:block;

    object-fit:cover;

    transition:
        transform .6s ease,
        filter .6s ease;

}


.history-gallery-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent 40%,
            rgba(4,11,22,.88) 100%
        );

    pointer-events:none;

}


.history-gallery-card figcaption{

    position:absolute;

    left:22px;
    right:22px;
    bottom:20px;

    z-index:2;

    color:#fff;

    font-size:17px;
    font-weight:800;

    letter-spacing:.01em;

}


.history-gallery-card:hover img{

    transform:scale(1.075);

    filter:saturate(1.06);

}



/* ==========================================================
   VIDEO SECTION
========================================================== */

.history-video-section{

    position:relative;

    z-index:2;

    margin-top:
        clamp(100px,11vw,140px);

    padding-top:
        clamp(55px,7vw,80px);

    border-top:1px solid var(--history-border);

}


.history-video-copy{

    max-width:720px;

    margin:0 auto 38px;

    text-align:center;

}


.history-video-copy h3{

    margin:0 0 17px;

    color:var(--history-heading);

    font-size:
        clamp(34px,5vw,52px);

    line-height:1.12;

    letter-spacing:-.04em;

}


.history-video-copy p{

    margin:0;

    color:var(--history-muted);

    font-size:
        clamp(16px,1.6vw,18px);

    line-height:1.8;

}



/* ==========================================================
   VIDEO PREVIEW CARD
========================================================== */

.history-video-card{

    position:relative;

    width:100%;

    min-height:
        clamp(380px,52vw,590px);

    display:block;

    margin:0;

    padding:0;

    overflow:hidden;

    border:0;

    border-radius:
        clamp(22px,3vw,32px);

    background:#111827;

    cursor:pointer;

    box-shadow:
        0 28px 70px rgba(15,23,42,.23);

    font:inherit;

    text-align:left;

    isolation:isolate;

}


.history-video-cover{

    position:absolute;

    inset:0;

    z-index:-3;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .7s ease,
        filter .7s ease;

}


.history-video-shade{

    position:absolute;

    inset:0;

    z-index:-2;

    background:

        linear-gradient(
            90deg,
            rgba(4,11,22,.80) 0%,
            rgba(4,11,22,.42) 50%,
            rgba(4,11,22,.17) 100%
        ),

        linear-gradient(
            180deg,
            transparent 42%,
            rgba(4,11,22,.80) 100%
        );

    transition:background .45s ease;

}


.history-play-button{

    position:absolute;

    top:50%;
    left:50%;

    z-index:3;

    display:grid;

    place-items:center;

    width:
        clamp(76px,9vw,108px);

    height:
        clamp(76px,9vw,108px);

    border:2px solid rgba(255,255,255,.68);

    border-radius:50%;

    background:rgba(255,255,255,.16);

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

    box-shadow:
        0 18px 50px rgba(0,0,0,.30);

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

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease;

}


.history-play-button::before{

    content:"";

    position:absolute;

    inset:-11px;

    border:1px solid rgba(255,255,255,.22);

    border-radius:50%;

    animation:
        historyPlayPulse 2.4s ease-out infinite;

}


.history-play-icon{

    margin-left:5px;

    color:#fff;

    font-size:
        clamp(27px,3vw,37px);

}


.history-video-details{

    position:absolute;

    left:
        clamp(24px,5vw,58px);

    right:
        clamp(24px,5vw,58px);

    bottom:
        clamp(25px,5vw,55px);

    z-index:3;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    color:#fff;

}


.history-video-details small{

    margin-bottom:8px;

    color:rgba(255,255,255,.72);

    font-size:13px;
    font-weight:800;

    letter-spacing:.11em;
    text-transform:uppercase;

}


.history-video-details strong{

    margin-bottom:8px;

    color:#fff;

    font-size:
        clamp(28px,4vw,48px);

    line-height:1.1;

    letter-spacing:-.035em;

}


.history-video-details > span{

    color:rgba(255,255,255,.82);

    font-size:15px;
    font-weight:700;

}


.history-video-card:hover .history-video-cover{

    transform:scale(1.055);

    filter:saturate(1.05);

}


.history-video-card:hover .history-play-button{

    border-color:#fff;

    background:var(--history-red);

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

}


.history-video-card:focus-visible{

    outline:4px solid rgba(193,18,31,.42);

    outline-offset:5px;

}



/* ==========================================================
   VIDEO MODAL
========================================================== */

.history-video-modal{

    position:fixed;

    inset:0;

    z-index:15000;

    display:flex;

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

    padding:
        clamp(16px,4vw,44px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .35s ease,
        visibility .35s ease;

}


.history-video-modal.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


.history-video-backdrop{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    border:0;

    background:rgba(2,7,16,.86);

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

    cursor:pointer;

}


.history-video-dialog{

    position:relative;

    z-index:2;

    width:min(1180px,96vw);

    max-height:94vh;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.16);

    border-radius:
        clamp(18px,2vw,28px);

    background:#0a101d;

    box-shadow:
        0 38px 100px rgba(0,0,0,.65);

    transform:
        translateY(35px)
        scale(.94);

    transition:
        transform .4s
        cubic-bezier(.2,.8,.2,1);

}


.history-video-modal.active .history-video-dialog{

    transform:
        translateY(0)
        scale(1);

}



/* ==========================================================
   VIDEO MODAL HEADER
========================================================== */

.history-video-header{

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:24px;

    padding:
        clamp(18px,3vw,28px)
        clamp(20px,4vw,38px);

    border-bottom:1px solid rgba(255,255,255,.10);

    background:
        linear-gradient(
            90deg,
            rgba(19,44,88,.75),
            rgba(10,16,29,.96)
        );

}


.history-video-header span{

    display:block;

    margin-bottom:4px;

    color:rgba(255,255,255,.58);

    font-size:11px;
    font-weight:900;

    letter-spacing:.12em;
    text-transform:uppercase;

}


.history-video-header h2{

    margin:0;

    color:#fff;

    font-size:
        clamp(19px,3vw,28px);

    line-height:1.25;

}


.history-video-close{

    flex:0 0 auto;

    display:grid;

    place-items:center;

    width:46px;
    height:46px;

    padding:0;

    border:1px solid rgba(255,255,255,.18);

    border-radius:50%;

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:32px;
    line-height:1;

    cursor:pointer;

    transition:
        background .25s ease,
        transform .25s ease,
        border-color .25s ease;

}


.history-video-close:hover{

    border-color:rgba(255,255,255,.45);

    background:var(--history-red);

    transform:rotate(90deg);

}


.history-video-close:focus-visible{

    outline:3px solid rgba(255,255,255,.45);

    outline-offset:3px;

}



/* ==========================================================
   VIDEO PLAYER
========================================================== */

.history-video-player{

    position:relative;

    width:100%;

    background:#000;

    aspect-ratio:16 / 9;

}


/* ==========================================================
   HISTORY YOUTUBE PLAYER
   ----------------------------------------------------------
   GREY EDIT GUIDE:
   Keep the iframe at 100% width and height so it follows the
   existing responsive 16:9 .history-video-player container.
========================================================== */

.history-video-player iframe{

    width:100%;
    height:100%;

    display:block;

    border:0;

    background:#000;

}



/* ==========================================================
   BODY LOCK WHEN MODAL IS OPEN
========================================================== */

body.history-video-open{

    overflow:hidden;

}



/* ==========================================================
   HISTORY ANIMATIONS
========================================================== */

@keyframes historyHeroZoom{

    from{

        transform:scale(1.09);

    }

    to{

        transform:scale(1.04);

    }

}


@keyframes historyPlayPulse{

    0%{

        opacity:.8;

        transform:scale(.94);

    }

    70%{

        opacity:0;

        transform:scale(1.25);

    }

    100%{

        opacity:0;

        transform:scale(1.25);

    }

}



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

@media (max-width:1200px){

    .history-photo-one,
    .history-photo-three{

        left:-135px;

    }


    .history-photo-two,
    .history-photo-four{

        right:-145px;

    }


    .history-story-panel{

        width:calc(100% - 50px);

    }

}



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

@media (max-width:900px){

    .history-hero{

        min-height:82vh;

    }


    .history-hero-background{

        background-position:58% center;

    }


    .history-hero-overlay{

        background:

            linear-gradient(
                90deg,
                rgba(5,13,27,.91) 0%,
                rgba(5,13,27,.72) 72%,
                rgba(5,13,27,.50) 100%
            );

    }


    .history-photo{

        opacity:.40;

    }


    .history-photo-one{

        top:6%;

        left:-175px;

    }


    .history-photo-two{

        top:30%;

        right:-185px;

    }


    .history-photo-three{

        bottom:25%;

        left:-185px;

    }


    .history-photo-four{

        right:-180px;

        bottom:5%;

    }


    .history-story-panel{

        width:calc(100% - 32px);

    }


    .history-gallery-grid{

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

    }


    .history-gallery-card:nth-child(2){

        transform:none;

    }


    .history-gallery-card:last-child{

        grid-column:1 / -1;

        min-height:400px;

    }


    .history-gallery-card:last-child img{

        min-height:400px;

    }

}



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

@media (max-width:680px){

    .history-hero{

        min-height:82vh;

        align-items:flex-end;

        padding:
            150px
            0
            72px;

    }


    .history-hero-background{

        background-position:64% center;

    }


    .history-hero-overlay{

        background:

            linear-gradient(
                180deg,
                rgba(4,11,22,.26) 0%,
                rgba(4,11,22,.56) 42%,
                rgba(4,11,22,.94) 100%
            );

    }


    .history-hero h1{

        max-width:560px;

        font-size:
            clamp(43px,14vw,65px);

    }


    .history-hero p{

        font-size:16px;
        line-height:1.7;

    }


    .history-scroll-button{

        width:100%;

    }


    .history-story-section{

        padding:
            70px
            0;

    }


    .history-photo-collage{

        opacity:.38;

    }


    .history-story-panel{

        width:calc(100% - 22px);

        padding:
            42px
            22px
            48px;

        border-radius:24px;

    }


    .history-story-panel::after{

        top:26px;
        right:20px;

        font-size:120px;

    }


    .history-story-header h2{

        font-size:
            clamp(34px,11vw,46px);

    }


    .history-divider{

        margin:42px 0;

    }


    .history-script::before{

        left:25px;

    }


    .history-chapter{

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

        gap:18px;

        padding-bottom:50px;

    }


    .history-chapter-number{

        width:50px;
        height:50px;

        border-width:6px;

        font-size:12px;

    }


    .history-year{

        margin-bottom:10px;

        font-size:10px;

    }


    .history-chapter-content h3{

        font-size:
            clamp(23px,7vw,29px);

    }


    .history-chapter-content p{

        font-size:15px;

        line-height:1.8;

    }


    .history-quote{

        margin-bottom:60px;

        padding:
            36px
            24px;

        border-left-width:5px;

        border-radius:4px 18px 18px 4px;

    }


    .history-quote p{

        font-size:
            clamp(19px,6vw,24px);

    }


    .history-gallery{

        margin-top:65px;

        padding-top:50px;

    }


    .history-gallery-grid{

        grid-template-columns:1fr;

    }


    .history-gallery-card,
    .history-gallery-card:last-child{

        grid-column:auto;

        min-height:320px;

    }


    .history-gallery-card img,
    .history-gallery-card:last-child img{

        min-height:320px;

    }


    .history-video-section{

        margin-top:75px;

        padding-top:50px;

    }


    .history-video-card{

        min-height:460px;

    }


    .history-video-shade{

        background:

            linear-gradient(
                180deg,
                rgba(4,11,22,.12) 0%,
                rgba(4,11,22,.42) 45%,
                rgba(4,11,22,.94) 100%
            );

    }


    .history-play-button{

        top:43%;

    }


    .history-video-details{

        left:22px;
        right:22px;
        bottom:25px;

    }


    .history-video-details strong{

        font-size:
            clamp(27px,9vw,38px);

    }


    .history-video-modal{

        padding:10px;

    }


    .history-video-dialog{

        width:100%;

        border-radius:17px;

    }


    .history-video-header{

        padding:16px 17px;

    }


    .history-video-header h2{

        font-size:18px;

    }


    .history-video-close{

        width:40px;
        height:40px;

        font-size:28px;

    }

}



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

@media (max-width:420px){

    .history-label{

        font-size:11px;

    }


    .history-hero h1{

        font-size:
            clamp(39px,14vw,54px);

    }


    .history-story-panel{

        padding:
            38px
            18px
            42px;

    }


    .history-chapter{

        gap:14px;

    }


    .history-chapter-content h3{

        font-size:22px;

    }


    .history-video-card{

        min-height:410px;

    }

}



/* ==========================================================
   REDUCED MOTION
========================================================== */

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

    .history-hero-background,
    .history-play-button::before{

        animation:none;

    }


    .history-scroll-button,
    .history-scroll-button span,
    .history-gallery-card img,
    .history-video-cover,
    .history-play-button,
    .history-video-dialog,
    .history-video-modal{

        transition:none;

    }

}


/* ==========================================================
   HISTORY STORY IMAGES
========================================================== */

.history-story-image{

    position:relative;

    margin:30px 0 10px;

    overflow:hidden;

    border-radius:20px;

    background:#d1d5db;

    box-shadow:
        0 18px 45px rgba(15,23,42,.16);

}


.history-story-image img{

    width:100%;
    height:300px;

    display:block;

    object-fit:cover;

    transition:
        transform .6s ease,
        filter .6s ease;

}


.history-story-image figcaption{

    padding:14px 18px;

    border-top:1px solid rgba(17,24,39,.08);

    background:#fff;

    color:#6b7280;

    font-size:13px;
    font-weight:700;

    line-height:1.5;

}


.history-story-image:hover img{

    transform:scale(1.045);

    filter:saturate(1.06);

}


/* Wide milestone image */

.history-story-image-wide img{

    height:
        clamp(300px,40vw,440px);

}


/* Important milestone image */

.history-story-image-feature{

    max-width:720px;

}


.history-story-image-feature img{

    height:
        clamp(300px,38vw,420px);

}


/* Anniversary image */

.history-story-image-anniversary{

    border:5px solid rgba(193,18,31,.10);

}


.history-story-image-anniversary img{

    height:
        clamp(340px,45vw,500px);

}


/* Two images beside one another */

.history-story-image-pair{

    display:grid;

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

    gap:20px;

    margin-top:30px;

}


.history-story-image-pair .history-story-image{

    margin:0;

}


.history-story-image-pair img{

    height:
        clamp(260px,29vw,360px);

}


/* Mobile */

@media (max-width:680px){

    .history-story-image-pair{

        grid-template-columns:1fr;

    }


    .history-story-image img,
    .history-story-image-wide img,
    .history-story-image-feature img,
    .history-story-image-anniversary img,
    .history-story-image-pair img{

        height:280px;

    }

}

/* ==========================================================
   HISTORY — BRANCH IMAGE CAROUSEL
========================================================== */

.history-page .history-branch-carousel{

    width:100%;

    margin:
        clamp(34px,5vw,60px)
        0
        0;

    overflow:hidden;

    background:#ffffff;

    border:1px solid rgba(15,23,42,.10);
    border-radius:24px;

    box-shadow:
        0 22px 55px rgba(15,23,42,.14);

}


/* ==========================================================
   IMAGE STAGE
========================================================== */

.history-page .history-branch-stage{

    position:relative;

    width:100%;

    aspect-ratio:16 / 9;
    min-height:360px;

    overflow:hidden;

    background:#111827;

}


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

.history-page .history-branch-slide{

    position:absolute;
    inset:0;

    opacity:0;
    visibility:hidden;

    transform:scale(1.055);

    transition:
        opacity .8s ease,
        visibility .8s ease,
        transform 1.4s ease;

}

.history-page .history-branch-slide.is-active{

    opacity:1;
    visibility:visible;

    transform:scale(1);

}

.history-page .history-branch-slide img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center;

}


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

.history-page .history-branch-shade{

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(5,15,30,.05) 25%,
            rgba(5,15,30,.22) 55%,
            rgba(5,15,30,.90) 100%
        );

    z-index:2;

}


/* ==========================================================
   BRANCH INFORMATION
========================================================== */

.history-page .history-branch-information{

    position:absolute;

    left:clamp(22px,4vw,48px);
    bottom:clamp(24px,4vw,44px);

    z-index:3;

    display:flex;
    flex-direction:column;

    max-width:70%;

}

.history-page .history-branch-information > span{

    width:max-content;

    margin-bottom:8px;
    padding:7px 14px;

    color:#ffffff;
    background:#c1121f;

    border-radius:999px;

    font-size:13px;
    font-weight:800;

    letter-spacing:.8px;

}

.history-page .history-branch-information strong{

    color:#ffffff;

    font-size:clamp(27px,4vw,46px);
    line-height:1.1;

    text-shadow:
        0 4px 18px rgba(0,0,0,.45);

}

.history-page .history-branch-information small{

    margin-top:8px;

    color:rgba(255,255,255,.84);

    font-size:clamp(14px,1.7vw,18px);
    font-weight:600;

}


/* ==========================================================
   PREVIOUS AND NEXT CONTROLS
========================================================== */

.history-page .history-branch-controls{

    position:absolute;

    right:clamp(18px,3vw,34px);
    bottom:clamp(24px,4vw,42px);

    z-index:4;

    display:flex;
    gap:10px;

}

.history-page .history-branch-arrow{

    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    padding:0;

    color:#ffffff;
    background:rgba(255,255,255,.14);

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

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

    cursor:pointer;

    font-size:30px;
    line-height:1;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;

}

.history-page .history-branch-arrow:hover{

    background:#c1121f;
    border-color:#c1121f;

    transform:translateY(-2px);

}

.history-page .history-branch-arrow:focus-visible{

    outline:3px solid rgba(255,255,255,.85);
    outline-offset:3px;

}


/* ==========================================================
   CAPTION AND DOTS
========================================================== */

.history-page .history-branch-caption{

    min-height:72px;

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

    gap:24px;

    padding:18px 24px;

    color:#475569;
    background:#ffffff;

    font-size:14px;
    font-weight:600;

}

.history-page .history-branch-dots{

    display:flex;
    align-items:center;

    gap:8px;

}

.history-page .history-branch-dot{

    width:9px;
    height:9px;

    padding:0;

    background:#cbd5e1;

    border:0;
    border-radius:999px;

    cursor:pointer;

    transition:
        width .3s ease,
        background .3s ease,
        transform .3s ease;

}

.history-page .history-branch-dot:hover{

    transform:scale(1.2);

}

.history-page .history-branch-dot.is-active{

    width:28px;

    background:#c1121f;

}

.history-page .history-branch-dot:focus-visible{

    outline:2px solid #c1121f;
    outline-offset:3px;

}


/* ==========================================================
   TABLET AND MOBILE
========================================================== */

@media (max-width:768px){

    .history-page .history-branch-stage{

        aspect-ratio:4 / 3;
        min-height:320px;

    }

    .history-page .history-branch-information{

        right:20px;
        bottom:82px;

        max-width:none;

    }

    .history-page .history-branch-information strong{

        font-size:clamp(25px,8vw,36px);

    }

    .history-page .history-branch-controls{

        left:20px;
        right:auto;
        bottom:22px;

    }

    .history-page .history-branch-arrow{

        width:43px;
        height:43px;

        font-size:27px;

    }

    .history-page .history-branch-caption{

        align-items:flex-start;
        flex-direction:column;

        gap:14px;

    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

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

    .history-page .history-branch-slide{

        transition:none;
        transform:none;

    }

    .history-page .history-branch-arrow,
    .history-page .history-branch-dot{

        transition:none;

    }

}


.history-page .history-video-modal{

    position:fixed;
    inset:0;

    z-index:9999;

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

    transition:
        opacity .3s ease,
        visibility .3s ease;

}

.history-page .history-video-modal.is-open{

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

}

body.modal-open{

    overflow:hidden;

}


/* ==========================================================
   HISTORY OPENING PAGE — FULL VIEWPORT SNAP
========================================================== */

/*
   Makes the History hero occupy one complete browser viewport.
   This rule is placed last so it overrides the earlier
   92vh desktop and 82vh mobile settings.
*/

.history-page .history-hero {
    min-height: 100svh;

    scroll-snap-align: start;
    scroll-snap-stop: always;
}


/*
   The beginning of the full History story becomes the
   second snap destination.
*/

.history-page .history-story-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}


/*
   Prevents the fixed navigation header from covering
   the beginning of the story after snapping.
*/

.history-page #our-story {
    scroll-margin-top: 90px;
}



/* ==========================================================
   KORNET EXPRESS — CHAIRMAN MESSAGE MOBILE FIX
   ----------------------------------------------------------
   INSTALLATION:
   Paste this entire block at the VERY BOTTOM of Company.css.

   Why it must be last:
   Company.css currently contains a later shared rule that gives
   .chairman-hero a 100vh minimum height and large top padding.
   This final scoped block overrides that conflict safely.

   GREY EDIT GUIDE:
   Search "CHAIRMAN MOBILE — EDIT HERE" in VS Code.
========================================================== */


/* ==========================================================
   MOBILE CHAIRMAN COMPOSITION
   ----------------------------------------------------------
   New mobile layout:
   1. Dedicated image area directly below the fixed header
   2. Message card overlaps the image slightly
   3. No giant black empty space
   4. Normal document scrolling
========================================================== */

@media (max-width: 768px) {

    .chairman-hero {
        /*
           CHAIRMAN MOBILE — EDIT HERE:
           Overall section background below the image.
        */
        min-height: 0 !important;

        display: block !important;

        padding:
            0
            0
            28px !important;

        overflow: hidden;

        background:
            linear-gradient(
                180deg,
                #eef2f7 0%,
                #f7f9fc 100%
            );

        scroll-snap-align: none;
    }


    /* ======================================================
       CHAIRMAN IMAGE AREA
    ====================================================== */

 .chairman-background {
    position: relative;
    inset: auto;

    width: 100%;

    height:
        clamp(
            315px,
            78vw,
            390px
        );

    /*
       CHAIRMAN MOBILE — EDIT HERE:
       Zoom is now based on image HEIGHT, not width.
       This creates a much more noticeable portrait crop.
    */
    background-size: auto 145%;

    /*
       CHAIRMAN MOBILE — EDIT HERE:
       Lower first value = moves image toward the Chairman.
    */
    background-position: 14% 22%;
    background-repeat: no-repeat;
}


    /* ======================================================
       IMAGE DARKENING OVERLAY
       ------------------------------------------------------
       This overlay affects only the photograph, not the card.
    ====================================================== */

    .chairman-overlay {
        inset:
            0 0 auto;

        /*
           Keep this identical to .chairman-background height.
        */
        height:
            clamp(
                315px,
                78vw,
                390px
            );

        background:
            linear-gradient(
                180deg,
                rgba(7, 29, 73, 0.04) 0%,
                rgba(7, 29, 73, 0.14) 48%,
                rgba(7, 29, 73, 0.66) 100%
            );
    }


    /* ======================================================
       MESSAGE CARD POSITION
    ====================================================== */

    .chairman-container {
        min-height: 0 !important;

        display: block;

        padding:
            0
            14px
            0 !important;

        /*
           CHAIRMAN MOBILE — EDIT HERE:
           Negative margin controls how far the card overlaps
           the bottom of the photograph.
        */
        margin-top: -62px;
    }


    /* ======================================================
       GLASS MESSAGE CARD
    ====================================================== */

    .chairman-message {
        width: 100%;
        max-width: none;

        margin: 0;

        /*
           CHAIRMAN MOBILE — EDIT HERE:
           Card inner spacing.
        */
        padding:
            27px
            22px;

        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, 0.97),
                rgba(245, 247, 250, 0.94)
            );

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

        border-radius: 21px;

        box-shadow:
            0 22px 54px
            rgba(7, 29, 73, 0.18),
            inset 0 1px 0
            rgba(255, 255, 255, 0.95);

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


    /* ======================================================
       LABEL
    ====================================================== */

    .chairman-label {
        margin-bottom: 16px;

        padding:
            7px
            14px;

        font-size: 12px;
    }


    /* ======================================================
       HEADING
    ====================================================== */

    .chairman-message h1 {
        margin-bottom: 22px;

        /*
           CHAIRMAN MOBILE — EDIT HERE:
           Mobile title size.
        */
        font-size:
            clamp(
                28px,
                7.6vw,
                36px
            );

        line-height: 1.13;
    }


    /* ======================================================
       MESSAGE COPY
    ====================================================== */

    .chairman-message p {
        margin-bottom: 17px;

        font-size: 14px;
        line-height: 1.72;
    }


    /* ======================================================
       SIGNATURE
    ====================================================== */

    .chairman-signature {
        margin-top: 26px;
        padding-top: 19px;
    }

    .chairman-signature strong {
        font-size: 18px;
    }

}


/* ==========================================================
   VERY SMALL PHONES
========================================================== */

@media (max-width: 420px) {

  .chairman-background,
    .chairman-overlay {
        height:
            clamp(
                290px,
                82vw,
                345px
            );
    }

    .chairman-background {
        background-size: auto 155%;
        background-position: 12% 20%;
    }

    .chairman-container {
        margin-top: -52px;

        padding:
            0
            12px
            0 !important;
    }

    .chairman-message {
        padding:
            24px
            20px;

        border-radius: 19px;
    }

}