/* ==========================================================
   KORNET EXPRESS — LOCATIONS LOCAL / OVERSEAS GATEWAY
   ----------------------------------------------------------
   Used by:
   - locations.html
   - locations-overseas.html

   Existing branch cards and filters remain in Company.css.
   Search "LOCATIONS — EDIT HERE" for future adjustments.
========================================================== */

.locations-page{
    --loc-navy:#071d49;
    --loc-navy-deep:#031127;
    --loc-red:#c1121f;
    --loc-white:#fff;
    --loc-muted:rgba(255,255,255,.74);
    --loc-line:rgba(255,255,255,.16);
}

/* ==========================================================
   NEWSROOM-STYLE HERO
========================================================== */

.locations-page .locations-network-hero{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding:clamp(62px,7vw,88px) 0 clamp(56px,6vw,76px);
    color:var(--loc-white);
    background:
        radial-gradient(circle at 84% 18%,rgba(193,18,31,.42),transparent 28%),
        linear-gradient(118deg,var(--loc-navy-deep) 0%,#082657 58%,var(--loc-navy) 100%);
}

.locations-page .locations-network-hero::after{
    content:"";
    position:absolute;
    inset:auto -8% -47% 36%;
    z-index:-1;
    height:350px;
    border-radius:50%;
    background:rgba(255,255,255,.045);
    transform:rotate(-8deg);
}

.locations-page .locations-network-pattern{
    position:absolute;
    inset:0;
    z-index:-2;
    opacity:.15;
    background-image:
        linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
    background-size:52px 52px;
    mask-image:linear-gradient(to right,transparent,#000 35%,#000);
}

.locations-page .locations-network-inner{
    width:min(1280px,92%);
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr);
    align-items:end;
    gap:clamp(38px,6vw,76px);
}

.locations-page .locations-network-kicker{
    margin:0 0 12px;
    color:#ff6c76;
    font-size:.78rem;
    font-weight:900;
    letter-spacing:.16em;
    text-transform:uppercase;
}

/* ==========================================================
   LOCATIONS — EDIT HERE: HERO TITLE
   ----------------------------------------------------------
   Desktop stays on one line.
   Mobile may wrap naturally to prevent overflow.
========================================================== */

.locations-page .locations-network-copy h1 {
    /*
       LOCATIONS — EDIT HERE:
       Mobile can wrap because one line would become too small.
    */
    white-space: normal;

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

    line-height: .95;
}

.locations-page .locations-network-copy>p{
    max-width:730px;
    margin:26px 0 0;
    color:var(--loc-muted);
    font-size:clamp(1rem,1.25vw,1.13rem);
    line-height:1.78;
}

/* ==========================================================
   LOCAL / OVERSEAS BARS
========================================================== */

.locations-page .locations-network-nav{
    display:grid;
    gap:10px;
}

.locations-page .locations-network-nav a{
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:14px 18px;
    color:rgba(255,255,255,.86);
    background:rgba(255,255,255,.055);
    border:1px solid var(--loc-line);
    border-radius:13px;
    font-size:.92rem;
    font-weight:800;
    text-decoration:none;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transition:color .24s ease,background .24s ease,border-color .24s ease,transform .24s ease;
}

.locations-page .locations-network-nav a::after{
    content:"↗";
    font-size:1rem;
}

.locations-page .locations-network-nav a:hover,
.locations-page .locations-network-nav a:focus-visible,
.locations-page .locations-network-nav a.is-active{
    color:#fff;
    background:rgba(255,255,255,.13);
    border-color:rgba(255,255,255,.42);
    outline:none;
    transform:translateX(4px);
}

.locations-page .locations-network-nav a.is-active{
    border-left:4px solid #f33b48;
}

/* ==========================================================
   QUICK BRANCH LINKS
========================================================== */

.locations-page .locations-network-hero .quick-nav{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:26px;
}

.locations-page .locations-network-hero .quick-nav a{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:7px 11px;
    color:rgba(255,255,255,.82);
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.13);
    border-radius:999px;
    font-size:.76rem;
    font-weight:750;
    text-decoration:none;
}

.locations-page .locations-network-hero .quick-nav a:hover,
.locations-page .locations-network-hero .quick-nav a:focus-visible{
    color:#fff;
    background:rgba(193,18,31,.72);
    outline:none;
}

/* ==========================================================
   CONTENT REFINEMENTS
========================================================== */

.locations-page .section{
    padding-top:clamp(62px,7vw,92px);
    padding-bottom:clamp(72px,8vw,110px);
}

.locations-page .section-head{
    align-items:flex-end;
}

.locations-page .section-head>div:first-child>p{
    max-width:690px;
}

.locations-page .branch-card{
    scroll-margin-top:112px;
}

.locations-page--overseas .branch-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
}

.locations-page--overseas .branch-card{
    height:100%;
}

.locations-page .overseas-network-note{
    max-width:860px;
    margin:0 0 30px;
    padding:18px 20px;
    color:#526075;
    background:linear-gradient(90deg,rgba(193,18,31,.055),rgba(7,29,73,.045));
    border:1px solid rgba(7,29,73,.09);
    border-left:4px solid var(--loc-red);
    border-radius:14px;
    line-height:1.7;
}

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

@media(max-width:980px){
    .locations-page .locations-network-inner{
        grid-template-columns:1fr;
        align-items:start;
        gap:34px;
    }
    .locations-page .locations-network-nav{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .locations-page .locations-network-nav a{
        align-items:flex-start;
        min-height:72px;
    }
}

@media(max-width:800px){
    .locations-page .locations-network-hero{
        padding:48px 0 44px;
    }
    .locations-page .locations-network-copy h1{
        /* LOCATIONS — EDIT HERE: mobile title size */
        font-size:clamp(3rem,15vw,4.5rem);
    }
    .locations-page .locations-network-copy>p{
        margin-top:20px;
        font-size:.97rem;
    }
    .locations-page .locations-network-nav{
        grid-template-columns:1fr;
    }
    .locations-page .locations-network-nav a{
        min-height:52px;
    }
    .locations-page .section{
        padding-top:56px;
        padding-bottom:76px;
    }
    .locations-page--overseas .branch-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:480px) {

    .locations-page .locations-network-inner {
        width: min(100% - 28px, 1280px);
    }

    .locations-page .locations-network-copy h1 {
        white-space: normal;

        /* LOCATIONS — EDIT HERE: small-phone title size */
        font-size:
            clamp(
                2.75rem,
                14vw,
                3.8rem
            );
    }

}

@media(prefers-reduced-motion:reduce){
    .locations-page .locations-network-nav a{
        transition:none;
    }
}