/* Fonts Section */

/* ExtraBold */
@font-face {
  font-family: 'Codec Cold';
  src: url('../fonts/Codec-Cold-ExtraBold-trial.ttf') format('truetype');
  font-weight: 800;
}

/* Bold */
@font-face {
  font-family: 'Codec Cold';
  src: url('../fonts/Codec-Cold-Bold-trial.ttf') format('truetype');
  font-weight: 700;
}

/* Light */
@font-face {
  font-family: 'Codec Cold';
  src: url('../fonts/Codec-Cold-Light-trial.ttf') format('truetype');
  font-weight: 300;
}

/* End Here */



*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

html{
scroll-behavior:smooth;
scroll-snap-type:y proximity;
overflow-y:scroll;
}


body{
background:#fcfcfc;
color:#111827;
line-height:1.6;
}

.container{
width:90%;
max-width:1280px;
margin:auto;
}

header{
position:fixed;
top:0;
left:0;
width:100%;
background:rgba(255,255,255,.96);
backdrop-filter:blur(0px);
transition:all .35s ease;
box-shadow:0 2px 15px rgba(0,0,0,.06);
z-index:1000;

}

/* ===================================================
   HEADER WHILE SCROLLING
=================================================== */

header.scrolled{

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

    backdrop-filter:blur(14px);

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

}



.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
}

/* Kornet Logo Section */
.logo {
display: flex;
align-items: center;
gap: 10px; 
padding-right:45px;
margin-right:45px;
border-right:2px solid #ececec;

}



.logo-img {
height: 55px;
width: auto;
}


.logo-text {
font-family: 'Codec Cold', sans-serif; 
font-size: 25px;
font-weight: 800;
color: #111827;
text-transform: uppercase;
}

/* End Here */







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

/* ---------- Main Navigation ---------- */

.menu{
    display:flex;
    align-items:center;
    list-style:none;
    gap:34px;
    margin:0;
    padding:0;
}

/* Each menu item */
.menu > li{
    position:relative;
}

/* Main navigation links */
.menu > li > a{

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

    padding:16px 0;

    text-decoration:none;

    color:#1f2937;

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

    transition:color .25s ease;

    
}

/* Hover color */
.menu > li > a::after{

content:"";

position:absolute;

left:0;

bottom:6px;

width:0;

height:2px;

background:#c1121f;

transition:.25s;

}

.menu > li > a:hover::after{

width:100%;

}



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

/*
    EASY CHANGES

    Width:
        width: 290px;

    Rounded Corners:
        border-radius:18px;

    Distance below navbar:
        top:calc(100% + 12px);

    Background:
        background:#fff;

*/

.dropdown{

    position:absolute;

    top:calc(100% + 12px);

    left:0;

    width:290px;

    margin:0;
    padding:14px;

    list-style:none;

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

    backdrop-filter:blur(18px);

    border-radius:18px;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:

    0 2px 4px rgba(0,0,0,.04),

    0 12px 32px rgba(0,0,0,.08);

    opacity:0;

    visibility:hidden;

    transform:

        translateY(12px)

        scale(.98);

    transition:

        opacity .25s ease,

        transform .25s ease,

        visibility .25s ease;

    z-index:9999;

}



/* Show Dropdown */

.has-dropdown:hover > .dropdown{

    opacity:1;

    visibility:visible;

    transform:

        translateY(0)

        scale(1);

}



/* ========================================================================== */
/*                           DROPDOWN ITEMS                                   */
/* ========================================================================== */

.dropdown li{

    list-style:none;

}



/*
    EASY CHANGES

    Padding:
        padding:14px 18px;

    Font Size:
        font-size:15px;

    Corner Radius:
        border-radius:12px;

*/

.dropdown a{

    display:block;

    padding:14px 18px;

    text-decoration:none;

    color:#4b5563;

    font-size:18px;

    font-weight:500;

    border-radius:12px;

    transition:

        background .20s ease,

        color .20s ease,

        padding-left .20s ease;

}



/* ========================================================================== */
/*                           HOVER EFFECT                                     */
/* ========================================================================== */

/*
    EASY CHANGES

    Hover Background:
        background:#f6f8fb;

    Hover Text:
        color:#c1121f;

*/

.dropdown a:hover{

    background:#f6f8fb;

    color:#c1121f;

    padding-left:24px;

}



/* ========================================================================== */
/*                           OPTIONAL LITTLE ARROW                            */
/* ========================================================================== */

/*
    Small floating arrow above dropdown.

    Remove this section if you don't want it.
*/

.dropdown::before{

    content:"";

    position:absolute;

    top:-8px;

    left:30px;

    width:16px;

    height:16px;

    background:white;

    transform:rotate(45deg);

    border-left:1px solid rgba(0,0,0,.05);

    border-top:1px solid rgba(0,0,0,.05);

}




.btn{
background:#c1121f;
color:white;
padding:14px 28px;
border-radius:6px;
text-decoration:none;
font-weight:600;
display:inline-block;
transition:.3s;
box-shadow:0 10px 20px rgba(193,18,31,.18);
}

.btn:hover{
background:#9b0d18;
transform:translateY(-2px);
}

/*
Main Page with Dynamic Video
*/
/* NEW VIDEO HERO STYLES */
.hero{
position:relative;
height:100vh;
display:flex;
align-items:center;
color:white;
overflow:hidden;
}

.hero-video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:0;
}

.hero-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.65); /* Darkens the video so text is easy to read */
z-index:1;
}

.hero .container{
position:relative;
z-index:2; /* Brings the text to the front */
}

.hero-content{
max-width:800px;
}

.hero h1{
font-size: 66px;
font-weight:1000;
line-height:1.1;
margin-bottom:20px;
margin-top: 400px;
margin-left: -150px;
}

.hero p{
font-size:20px;
margin-bottom:35px;
opacity:.95;
margin-left: -150px;
}

/*
4 Keys of Kornet Section
*/

/* ==========================================================
   HOMEPAGE SNAP SECTIONS — HARD LOCKED

   Only elements carrying .home-snap-section receive the
   full-height snap layout. Nested sections and the global
   footer are not affected.
========================================================== */

.home-snap-section{
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:100px 0;
    scroll-snap-align:start;
}

.hero.home-snap-section{
    padding:0;
}

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

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

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

.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}



/* ==========================================================
   COMPANY NAVIGATION CARDS AREA
========================================================== */


.stats{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:25px;
margin-top:40px;
}


.stat{
position:relative;
overflow:hidden;
display:block;
text-decoration:none;
background:white;
padding:30px;
border-radius:18px;
box-shadow:0 8px 25px rgba(0,0,0,.05);
transition:
transform .35s ease,
box-shadow .35s ease;
color:#111827;
text-align:center;

}


.stat::before,
.stat::after{

content:"";

position:absolute;

top:0;

height:8px;

width:0%;

background:#c1121f;

transition:width .35s ease;

}

.stat::before{

left:50%;

}

.stat::after{

right:50%;

}

.stat:hover::before,
.stat:hover::after{

width:50%;

}

.stat h3{

font-size:42px;
color:#c1121f;
margin-bottom:8px;

}

.stat h4{

font-size:20px;
margin-bottom:12px;
font-weight:700;

}

.stat p{

color:#6b7280;
font-size:15px;
margin-bottom:18px;
line-height:1.6;

}

.stat span{

font-weight:700;
color:#c1121f;
transition:.3s;

}

.stat:hover span{

letter-spacing:1px;

}





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

/*
Services Section
*/


.services{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:22px;
max-width:1200px;
margin:30px auto 0;
position:relative;
z-index:2;
}

.service-link{
display:block;
min-width:0;
height:100%;
color:inherit;
text-decoration:none;
border-radius:16px;
}

.card{
position:relative;
isolation:isolate;
overflow:hidden;
min-height:190px;
height:100%;
padding:24px;
display:flex;
align-items:flex-end;
border:1px solid rgba(255,255,255,.22);
border-top:4px solid transparent;
border-radius:16px;
background-color:#e9edf3;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
box-shadow:0 8px 24px rgba(7,29,73,.10);
transition:
transform .32s ease,
border-color .32s ease,
box-shadow .32s ease;
cursor:pointer;
}

.card::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
background:
linear-gradient(
    180deg,
    rgba(0,0,0,.06) 10%,
    rgba(0,0,0,.24) 48%,
    rgba(0,0,0,.78) 100%
);
transition:background .32s ease;
}

.service-link:hover .card{
transform:translateY(-7px);
border-top-color:#c1121f;
box-shadow:0 24px 50px rgba(7,29,73,.20);
}

.service-link:hover .card::before{
background:
linear-gradient(
    180deg,
    rgba(0,0,0,.14) 5%,
    rgba(0,0,0,.38) 48%,
    rgba(0,0,0,.86) 100%
);
}

.service-link:focus-visible{
outline:3px solid rgba(193,18,31,.34);
outline-offset:5px;
}

.card:active{
transform:translateY(-3px) scale(.985);
}

.card-content{
position:relative;
z-index:2;
width:100%;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:7px;
}

.card-content h3{
margin:0;
color:#fff;
font-size:clamp(1.25rem,1.7vw,1.55rem);
font-weight:800;
line-height:1.15;
text-shadow:0 2px 12px rgba(0,0,0,.34);
}

.card-content p{
margin:0;
max-width:30ch;
color:rgba(255,255,255,.92);
font-size:.94rem;
line-height:1.5;
text-shadow:0 2px 10px rgba(0,0,0,.34);
}

.air{
background-image:url("../assets/services/air-freight.jpg");
}

.ocean{
background-image:url("../assets/services/ocean-freight.jpg");
}

.customs{
background-image:url("../assets/services/customs.jpg");
}

.warehouse{
background-image:url("../assets/services/warehousing.jpg");
}

.trucking{
background-image:url("../assets/services/trucking.jpg");
}

.project{
background-image:url("../assets/services/project.jpg");
}


/* ==========================================================
   SERVICES - THE 4 KEYS
========================================================== */

#services{
position:relative;
isolation:isolate;
overflow:hidden;
padding-top:108px;
padding-bottom:60px;
background:
linear-gradient(180deg,#fff 0%,#fbfcfe 58%,#f5f7fb 100%);
}

#services .container{
position:relative;
z-index:2;
}

#services .section-title{
margin-top:0;
margin-bottom:0;
margin-top: -100px;
}

#services .section-title h2{
margin-bottom:8px;
}


/*==========================================================
SERVICES BACKGROUND ACCENT
==========================================================*/

.services-bg{
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
background:
radial-gradient(circle at 12% 18%,rgba(193,18,31,.055),transparent 28%),
radial-gradient(circle at 88% 72%,rgba(19,44,88,.075),transparent 32%);
}


/*==========================================================
KORNET VALUES NAVIGATION — BOXED COMPACT CAROUSEL
----------------------------------------------------------
The first state shows all four Keys in separate clean boxes.
Detailed states show a red Key badge and a separate message
box while keeping the panel compact.

FOUR KEYS — EDIT HERE:
Search this phrase to adjust panel size, boxes, dots,
mobile layout, and carousel typography.
==========================================================*/

.service-nav{
position:relative;
z-index:2;
width:100%;
max-width:1200px;

/*
   FOUR KEYS — EDIT HERE:
   Distance between the service cards and the blue panel.
*/
margin:34px auto 0;

/*
   FOUR KEYS — EDIT HERE:
   Compact panel height and spacing.
*/
min-height:132px;
padding:17px 26px 15px;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;

overflow:hidden;

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

background:
radial-gradient(
    circle at 12% 50%,
    rgba(193,18,31,.13),
    transparent 28%
),
linear-gradient(
    120deg,
    #102b59 0%,
    #173d75 68%,
    #102b59 100%
);

box-shadow:
0 18px 42px
rgba(7,29,73,.16);
}

.service-nav::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;

background:
linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,.055) 48%,
    transparent 64%
);

transform:translateX(-110%);
animation:fourKeysSoftSweep 12s ease-in-out infinite;
}

.service-nav-title{
position:relative;
z-index:1;

color:#fff;

font-size:
clamp(
    1.22rem,
    2vw,
    1.62rem
);

font-weight:800;
line-height:1.2;
text-align:center;
}


/* ==========================================================
   FOUR KEYS BOXED STAGE
========================================================== */

.service-key-stage{
position:relative;
z-index:1;

width:100%;
min-height:42px;

display:grid;
place-items:center;
}

.service-key-panel{
grid-area:1 / 1;

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

opacity:0;
visibility:hidden;
transform:translateY(5px);

transition:
opacity .22s ease,
transform .22s ease,
visibility .22s ease;
}

.service-key-panel.is-active{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.service-key-stage.is-changing .service-key-panel.is-active{
opacity:0;
transform:translateY(5px);
}


/* ==========================================================
   OVERVIEW — FOUR SEPARATE BOXES
========================================================== */

.service-key-overview{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:9px;
}

.service-key-chip{
min-height:38px;

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

padding:8px 16px;

color:#fff;
background:rgba(255,255,255,.075);

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

border-radius:10px;

font-size:
clamp(
    .82rem,
    1vw,
    .94rem
);

font-weight:800;
line-height:1.1;
text-align:center;

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


/* ==========================================================
   DETAIL — RED KEY BOX + DESCRIPTION BOX
========================================================== */

.service-key-detail{
display:grid;
grid-template-columns:max-content minmax(0,1fr);
align-items:center;
justify-content:center;
gap:9px;

margin:0;
}

.service-key-detail-name{
min-height:38px;

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

padding:8px 16px;

color:#fff;
background:#d31322;

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

border-radius:10px;

font-size:
clamp(
    .82rem,
    1vw,
    .94rem
);

font-weight:850;
line-height:1.1;
letter-spacing:.025em;
text-align:center;
text-transform:uppercase;

box-shadow:
0 8px 20px
rgba(193,18,31,.24);
}

.service-key-detail-description{
min-height:38px;

display:flex;
align-items:center;

padding:8px 15px;

color:rgba(255,255,255,.9);
background:rgba(255,255,255,.065);

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

border-radius:10px;

font-size:
clamp(
    .84rem,
    1.06vw,
    .96rem
);

font-weight:540;
line-height:1.35;
text-align:left;
}


/* ==========================================================
   FIVE CAROUSEL DOTS
========================================================== */

.service-key-dots{
position:relative;
z-index:1;

display:flex;
align-items:center;
justify-content:center;
gap:8px;

min-height:15px;
}

.service-key-dot{
width:10px;
height:10px;

display:grid;
place-items:center;

padding:0;
border:0;
border-radius:999px;

background:transparent;

cursor:pointer;
}

.service-key-dot span{
display:block;

width:8px;
height:8px;

border-radius:999px;

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

transition:
width .24s ease,
background .24s ease,
box-shadow .24s ease,
transform .24s ease;
}

.service-key-dot:hover span{
background:
rgba(255,255,255,.72);

transform:scale(1.15);
}

.service-key-dot.is-active span,
.service-key-dot[aria-pressed="true"] span{
width:25px;

background:#e11827;

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

.service-key-dot.is-active,
.service-key-dot[aria-pressed="true"]{
width:27px;
}

.service-key-dot:focus-visible{
outline:
3px solid
rgba(255,255,255,.46);

outline-offset:4px;
}


/* ==========================================================
   SUBTLE KORNET PANEL MOTION
========================================================== */

@keyframes fourKeysSoftSweep{

0%,
68%{
    transform:translateX(-110%);
}

82%,
100%{
    transform:translateX(110%);
}

}


/* ==========================================================
   FOUR KEYS — TABLET / MOBILE
========================================================== */

@media(max-width:760px){

.service-nav{
    min-height:148px;
    margin-top:22px;
    padding:18px 15px 16px;
    gap:10px;
    border-radius:19px;
}

.service-nav-title{
    font-size:
    clamp(
        1.12rem,
        5.6vw,
        1.38rem
    );
}

.service-key-stage{
    min-height:62px;
}

.service-key-overview{
    display:grid;
    grid-template-columns:
    repeat(
        2,
        minmax(0,1fr)
    );

    gap:8px;
}

.service-key-chip{
    width:100%;
    min-height:39px;
    padding:8px 9px;
}

.service-key-detail{
    grid-template-columns:1fr;
    gap:7px;
}

.service-key-detail-name,
.service-key-detail-description{
    width:100%;
    min-height:37px;
    justify-content:center;
    text-align:center;
}

.service-key-detail-description{
    padding:8px 12px;
}

.service-key-dots{
    gap:9px;
}

}


@media(max-width:430px){

.service-nav{
    min-height:158px;
    padding:
    17px
    12px
    15px;
}

.service-key-stage{
    min-height:72px;
}

.service-key-chip,
.service-key-detail-name,
.service-key-detail-description{
    font-size:.81rem;
}

}


/* ==========================================================
   FOUR KEYS — REDUCED MOTION
========================================================== */

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

.service-nav::before{
    animation:none;
}

.service-key-panel,
.service-key-dot span{
    transition:none;
}

}


/* ==========================================================
   FLOATING VALUES STRIP
========================================================== */

.values-strip{

    position:sticky;
    bottom:20px;

    width:90%;
    max-width:1100px;

    margin:-50px auto 80px;

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

    padding:20px 35px;

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

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

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

    border-radius:20px;

    box-shadow:
        0 12px 40px rgba(0,0,0,.10);

    z-index:100;
}

.value-item{

    flex:1;
    text-align:center;

    cursor:pointer;

    transition:.35s ease;

}

.value-item span{

    display:block;

    color:#c1121f;

    font-size:13px;

    letter-spacing:3px;

    margin-bottom:10px;

}


.value-item h4{

    font-size:18px;

    color:#111827;

    transition:.3s;

}


.value-item:hover{

    transform:translateY(-5px);

}

.value-item:hover h4{

    color:#c1121f;

}



.values-strip{

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

    transition:
        opacity .45s ease,
        transform .45s ease;

}



/* ==========================================================
   SERVICE VALUES STRIP
========================================================== */

.service-values{

margin-top:70px;

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

padding:22px 30px;

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

backdrop-filter:blur(18px);

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

border-radius:22px;

box-shadow:
0 20px 50px rgba(0,0,0,.08);

}

.value-item{

flex:1;
text-align:center;

}

.value-item h4{

margin-bottom:8px;

font-size:20px;

color:#111827;

}

.value-item p{

font-size:14px;

color:#6b7280;

}















.why{
background:#0f172a;
color:white;
}

.why h2{
color:white;
}

.keys{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
margin-top:50px;
}

.key{
text-align:center;
padding:20px;
background:rgba(255,255,255,.06);
border-radius:14px;
display:grid;
}

.key h3{
font-size:24px;
margin-top:15px;
}

.network{
background:#f8fafc;
}

.branches{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:40px;
}

.branch{
background:white;
padding:20px;
border-radius:10px;
text-align:center;
font-weight:600;
}

.certs{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:20px;
}

.cert{
padding:20px 35px;
border:1px solid #e5e7eb;
border-radius:10px;
font-weight:700;
}

.contact{
background:#111827;
color:white;
}

.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
}

.contact-form input,
.contact-form textarea{
width:100%;
padding:15px;
margin-bottom:15px;
border:none;
border-radius:6px;
}

.contact-form button{
border:none;
cursor:pointer;
}

@media(max-width:992px){


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

.services{
grid-template-columns:1fr;
}

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

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

.menu{
display:none;
}
}

/* ==========================================================
   HOMEPAGE NEWSROOM QUICK ACCESS
========================================================== */

.home-newsroom{
position:relative;
isolation:isolate;
overflow:hidden;
padding-top:112px;
padding-bottom:72px;
background:
radial-gradient(circle at 86% 12%,rgba(193,18,31,.085),transparent 27%),
linear-gradient(145deg,#f8fafc 0%,#ffffff 50%,#f4f6fa 100%);
}

.home-newsroom::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
opacity:.36;
background-image:
linear-gradient(rgba(7,29,73,.035) 1px,transparent 1px),
linear-gradient(90deg,rgba(7,29,73,.035) 1px,transparent 1px);
background-size:48px 48px;
mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 78%,transparent);
}

.home-newsroom-heading{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:50px;
margin-bottom:34px;
margin-top: -100px;
}

.home-newsroom-heading > div:first-child{
max-width:780px;
}

.home-newsroom-kicker{
margin:0 0 10px;
color:#c1121f;
font-size:.78rem;
font-weight:850;
letter-spacing:.16em;
text-transform:uppercase;
}

.home-newsroom-heading h2{
margin:0;
color:#071d49;
font-family:"Codec Cold",Inter,sans-serif;
font-size:clamp(2.35rem,4.3vw,4.5rem);
line-height:.98;
letter-spacing:-.045em;
}

.home-newsroom-heading > div:first-child > p:last-child{
max-width:720px;
margin:20px 0 0;
color:#657084;
font-size:1rem;
line-height:1.75;
}

.home-newsroom-status{
max-width:300px;
padding:11px 15px;
border:1px solid #dfe4ec;
border-radius:999px;
color:#667085;
background:rgba(255,255,255,.78);
box-shadow:0 10px 28px rgba(7,29,73,.07);
font-size:.78rem;
font-weight:750;
line-height:1.4;
text-align:center;
}

.home-newsroom-status.is-live{
color:#12704a;
border-color:rgba(18,112,74,.20);
background:#eefaf4;
}

.home-newsroom-status.is-fallback{
color:#7a5a12;
border-color:rgba(166,121,18,.20);
background:#fff9e9;
}

.home-newsroom-list{
overflow:hidden;
border:1px solid rgba(7,29,73,.10);
border-radius:24px;
background:rgba(255,255,255,.96);
box-shadow:0 24px 65px rgba(7,29,73,.12);
}

.home-newsroom-item{
position:relative;
display:grid;
grid-template-columns:minmax(145px,.72fr) minmax(120px,.62fr) minmax(0,2.4fr) auto;
align-items:center;
gap:24px;
min-height:126px;
padding:24px 28px;
color:#111827;
text-decoration:none;
border-bottom:1px solid #e5e9f0;
transition:
background .25s ease,
transform .25s ease,
box-shadow .25s ease;
}

.home-newsroom-item:last-child{
border-bottom:0;
}

.home-newsroom-item::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:5px;
background:#c1121f;
transform:scaleY(0);
transform-origin:center;
transition:transform .25s ease;
}

.home-newsroom-item:hover{
z-index:2;
background:#f8fafc;
box-shadow:0 16px 34px rgba(7,29,73,.10);
transform:translateX(4px);
}

.home-newsroom-item:hover::before,
.home-newsroom-item:focus-visible::before{
transform:scaleY(1);
}

.home-newsroom-item:focus-visible{
outline:3px solid rgba(193,18,31,.22);
outline-offset:-3px;
}

.home-newsroom-category{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
min-height:34px;
padding:8px 12px;
border-radius:999px;
color:#fff;
background:#071d49;
font-size:.72rem;
font-weight:850;
letter-spacing:.075em;
text-transform:uppercase;
}

.home-newsroom-item[data-category="social-activities"] .home-newsroom-category{
background:#9d1420;
}

.home-newsroom-item[data-category="industry-update"] .home-newsroom-category{
background:#1f5c7a;
}

.home-newsroom-date{
color:#c1121f;
font-size:.78rem;
font-weight:850;
letter-spacing:.055em;
text-transform:uppercase;
}

.home-newsroom-copy{
min-width:0;
display:grid;
gap:7px;
}

.home-newsroom-copy strong{
overflow:hidden;
color:#071d49;
font-family:"Codec Cold",Inter,sans-serif;
font-size:clamp(1.08rem,1.55vw,1.45rem);
line-height:1.22;
text-overflow:ellipsis;
}

.home-newsroom-copy > span{
display:-webkit-box;
overflow:hidden;
color:#697386;
font-size:.9rem;
line-height:1.55;
line-clamp:2;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}

.home-newsroom-action{
white-space:nowrap;
color:#c1121f;
font-size:.86rem;
font-weight:850;
transition:transform .22s ease;
}

.home-newsroom-item:hover .home-newsroom-action{
transform:translateX(4px);
}

.home-newsroom-item.is-fallback{
background:rgba(249,250,252,.82);
}

.home-newsroom-item.is-fallback .home-newsroom-date{
color:#7a8496;
}

#company,
#services,
#newsroom,
#contact{
scroll-margin-top:88px;
}

.contact .section-title h2{
color:#fff;
}

/* ==========================================================
   HOMEPAGE RESPONSIVE REFINEMENTS
========================================================== */

@media(max-width:1100px){

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

    .home-newsroom-item{
        grid-template-columns:minmax(145px,.8fr) minmax(0,2.5fr) auto;
    }

    .home-newsroom-date{
        grid-column:1;
        grid-row:2;
    }

    .home-newsroom-copy{
        grid-column:2;
        grid-row:1 / span 2;
    }

    .home-newsroom-action{
        grid-column:3;
        grid-row:1 / span 2;
    }
}

@media(max-width:760px){

    html{
        scroll-snap-type:y proximity;
    }

    .home-snap-section{
        min-height:auto;
    }

    #services,
    .home-newsroom{
        padding-top:96px;
        padding-bottom:64px;
    }

    .services{
        grid-template-columns:1fr;
        gap:16px;
        margin-top:26px;
    }

    .card{
        min-height:205px;
    }

    .service-nav{
        margin-top:26px;
        padding:18px;
    }
.home-newsroom-heading{
        display:grid;
        gap:20px;
        margin-bottom:24px;
    }

    .home-newsroom-status{
        max-width:none;
        width:max-content;
    }

    .home-newsroom-item{
        grid-template-columns:1fr;
        gap:10px;
        min-height:0;
        padding:22px;
    }

    .home-newsroom-date,
    .home-newsroom-copy,
    .home-newsroom-action{
        grid-column:auto;
        grid-row:auto;
    }

    .home-newsroom-action{
        margin-top:5px;
    }
}

@media(max-width:480px){
.home-newsroom-status{
        width:100%;
    }
}


/* ==========================================================
   PHASE 1 — RESPONSIVE HOMEPAGE FOUNDATION
   Added July 28, 2026

   This block intentionally lives at the end of Home.css so it
   can repair older desktop-only rules without destabilizing the
   established visual design.
========================================================== */

:root {
    --home-header-height: 96px;
    --home-mobile-gutter: 18px;
}

html {
    overflow-x: clip;
}

body {
    min-width: 0;
    overflow-x: clip;
}

body.mobile-nav-open {
    overflow: hidden;
}

img,
video {
    max-width: 100%;
}

/* ==========================================================
   DESKTOP HERO NORMALIZATION + BACKEND-READY MEDIA LAYERS
========================================================== */

.hero {
    min-height: 100svh;
    height: auto;
    padding-top: var(--home-header-height);
}

.hero-media,
.hero-media-item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-media {
    z-index: 0;
    overflow: hidden;
    background: #071d49;
}

.hero-media-item {
    display: block;
    object-fit: cover;
    opacity: 0;
    visibility: hidden;
    transition: opacity 420ms ease, visibility 420ms ease;
}

.hero-media-item.is-active {
    opacity: 1;
    visibility: visible;
}

.hero-media-item[hidden] {
    display: none !important;
}

.hero .container {
    position: relative;
    z-index: 2;
    min-height: calc(100svh - var(--home-header-height));
    display: flex;
    align-items: flex-end;
    padding-top: 72px;
    padding-bottom: clamp(74px, 11vh, 138px);
}

.hero-content {
    width: min(800px, 72vw);
    margin: 0;
}

.hero h1 {
    margin: 0 0 20px;
    font-size: clamp(3.4rem, 5.2vw, 5.4rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.hero p {
    max-width: 760px;
    margin: 0;
    font-size: clamp(1rem, 1.35vw, 1.24rem);
    line-height: 1.75;
}

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

.mobile-nav-toggle,
.mobile-nav-backdrop,
.mobile-nav-drawer {
    display: none;
}

/* ==========================================================
   HOMEPAGE HAMBURGER — CLEAN WHITE VERSION
   ----------------------------------------------------------
   GREY EDIT GUIDE:
   Search "HAMBURGER — EDIT HERE" for quick adjustments.
========================================================== */

.mobile-nav-toggle {
    position: relative;

    /* HAMBURGER — EDIT HERE: button size */
    width: 48px;
    height: 48px;

    padding: 0;
    border: 1px solid #dce2eb;

    /* HAMBURGER — EDIT HERE: corner roundness */
    border-radius: 13px;

    place-items: center;

    color: #071d49;
    background: #ffffff;

    box-shadow: 0 5px 16px rgba(7, 29, 73, 0.08);

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.mobile-nav-toggle:hover,
.mobile-nav-toggle:focus-visible {
    background: #f8fafc;
    border-color: rgba(7, 29, 73, 0.20);
    box-shadow: 0 8px 20px rgba(7, 29, 73, 0.12);
    outline: none;
}

.mobile-nav-toggle:focus-visible {
    outline: 3px solid rgba(193, 18, 31, 0.18);
    outline-offset: 3px;
}

.mobile-nav-toggle:active {
    transform: scale(.96);
}

.mobile-nav-toggle span {
    display: block;

    /* HAMBURGER — EDIT HERE: line width */
    width: 22px;

    /* HAMBURGER — EDIT HERE: line thickness */
    height: 2px;

    margin: 3px auto;
    border-radius: 99px;
    background: #071d49;

    transform-origin: center;

    transition:
        transform .24s ease,
        opacity .18s ease;
}

/* Turns the three lines into a navy X while open. */
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

.mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

.mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1990;
    border: 0;
    opacity: 0;
    background: rgba(2, 9, 22, 0.62);
    transition: opacity 240ms ease;
}

.mobile-nav-backdrop.is-open {
    opacity: 1;
}

.mobile-nav-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 2000;
    width: min(88vw, 390px);
    height: 100dvh;
    padding: 18px;
    flex-direction: column;
    color: #111827;
    background: #fff;
    box-shadow: -28px 0 70px rgba(2, 9, 22, 0.24);
    transform: translateX(104%);
    visibility: hidden;
    transition: transform 260ms cubic-bezier(.22, 1, .36, 1), visibility 260ms ease;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mobile-nav-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
}

.mobile-nav-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 4px 2px 18px;
    border-bottom: 1px solid #e8ebf0;
}

.mobile-nav-drawer__head img {
    display: block;
    width: 148px;
    height: auto;
}

.mobile-nav-close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: #c1121f;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}

.mobile-nav-menu {
    display: grid;
    gap: 7px;
    padding: 18px 0;
}

.mobile-nav-group {
    border: 1px solid #e5e9f0;
    border-radius: 15px;
    background: #fbfcfe;
    overflow: hidden;
}

.mobile-nav-accordion,
.mobile-nav-direct {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 15px;
    border: 0;
    color: #071d49;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.mobile-nav-accordion > span:last-child {
    color: #c1121f;
    font-size: 1.35rem;
    line-height: 1;
}

.mobile-nav-submenu {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 230ms ease;
}

.mobile-nav-submenu.is-open {
    grid-template-rows: 1fr;
}

.mobile-nav-submenu > div {
    min-height: 0;
    overflow: hidden;
}

.mobile-nav-submenu a {
    min-height: 45px;
    display: flex;
    align-items: center;
    padding: 11px 16px 11px 25px;
    color: #596579;
    border-top: 1px solid #eceff4;
    font-size: .92rem;
    font-weight: 650;
    text-decoration: none;
}

.mobile-nav-direct {
    border: 1px solid #e5e9f0;
    border-radius: 15px;
    background: #fbfcfe;
}

.mobile-nav-contact {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    padding: 12px 18px;
    color: #fff;
    border-radius: 13px;
    background: #c1121f;
    box-shadow: 0 12px 25px rgba(193, 18, 31, .2);
    font-weight: 800;
    text-decoration: none;
}

.mobile-nav-drawer__note {
    margin: auto 0 0;
    padding: 18px 3px 6px;
    color: #7a8494;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
}

/* ==========================================================
   SERVICES CAROUSEL SHELL
========================================================== */

.services-carousel {
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
}

.services-carousel-arrow,
.services-carousel-dots {
    display: none;
}

/* ==========================================================
   LAPTOP / TABLET SCALING
========================================================== */

@media (max-width: 1180px) {
    .menu {
        gap: 22px;
    }

    .menu > li > a {
        font-size: 18px;
    }

    .logo {
        padding-right: 28px;
        margin-right: 28px;
    }
}

@media (max-width: 980px) {
    :root {
        --home-header-height: 78px;
    }

    header .menu,
    header .nav-contact-button {
        display: none;
    }

    .mobile-nav-toggle,
    .mobile-nav-drawer {
        display: flex;
    }

    .mobile-nav-toggle {
        display: grid;
    }

    .mobile-nav-backdrop:not([hidden]) {
        display: block;
    }

    .nav {
        min-height: var(--home-header-height);
        padding: 10px 0;
    }

    .logo {
        padding: 0;
        margin: 0;
        border-right: 0;
    }

    .logo-img {
        height: 48px;
    }

    .hero .container {
        min-height: calc(100svh - var(--home-header-height));
    }

    .about-grid {
        gap: 42px;
    }
}

/* ==========================================================
   MOBILE HOMEPAGE COMPOSITION
========================================================== */

@media (max-width: 760px) {
    html {
        scroll-snap-type: none;
        scroll-padding-top: var(--home-header-height);
    }

    .container {
        width: calc(100% - (var(--home-mobile-gutter) * 2));
    }

    .home-snap-section {
        min-height: auto;
        padding: 78px 0;
        scroll-snap-align: none;
    }

    .section-title {
        margin: 0 0 30px;
    }

    .section-title h2 {
        margin-bottom: 8px;
        font-size: clamp(2rem, 9vw, 2.8rem);
        line-height: 1.08;
    }

    .section-title p {
        font-size: .95rem;
    }

    /* Hero */
    .hero.home-snap-section {
        min-height: 100svh;
        padding: var(--home-header-height) 0 0;
    }

    .hero .container {
        min-height: calc(100svh - var(--home-header-height));
        align-items: flex-end;
        padding: 60px 0 max(58px, env(safe-area-inset-bottom));
    }

    .hero-content {
        width: 100%;
    }

    .hero h1 {
        margin-bottom: 16px;
        font-size: clamp(2.65rem, 13vw, 4rem);
        line-height: .98;
    }

    .hero p {
        max-width: 38rem;
        font-size: .98rem;
        line-height: 1.65;
    }

    .hero-overlay {
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, .35) 0%,
            rgba(0, 0, 0, .45) 38%,
            rgba(0, 0, 0, .82) 100%
        );
    }

    /* About: intentionally staggered rather than physically overlapping. */
    #company {
        padding-top: 82px;
        padding-bottom: 86px;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .about-grid > div:first-child {
        padding: 0 4px;
        font-size: .98rem;
        line-height: 1.75;
    }

    .about-grid > div:first-child .btn {
        width: 100%;
        min-height: 50px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .stats {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 0;
    }

    .stat {
        min-height: 220px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 27px 25px;
        text-align: left;
    }

    .stat:nth-child(odd) {
        margin-right: 28px;
    }

    .stat:nth-child(even) {
        margin-left: 28px;
    }

    .stat h3 {
        font-size: clamp(2.15rem, 10vw, 3rem);
    }

    .stat h4 {
        font-size: 1.08rem;
    }

    .stat p {
        max-width: 31rem;
    }

    /* Services: one large native swipe card at a time. */
    #services {
        padding-top: 82px;
        padding-bottom: 70px;
    }

    .services-carousel {
        margin-inline: calc(var(--home-mobile-gutter) * -1);
    }

    .services {
        display: flex;
        grid-template-columns: none;
        gap: 16px;
        max-width: none;
        margin: 25px 0 0;
        padding: 4px var(--home-mobile-gutter) 17px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-padding-inline: var(--home-mobile-gutter);
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .services::-webkit-scrollbar {
        display: none;
    }

    .service-link {
        flex: 0 0 min(86vw, 390px);
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .card {
        min-height: 360px;
        padding: 25px;
        border-radius: 21px;
    }

    .card-content h3 {
        font-size: 1.55rem;
    }

    .card-content p {
        font-size: .96rem;
    }

    .services-carousel-arrow {
        position: absolute;
        z-index: 5;
        top: calc(50% + 10px);
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        padding: 0;
        color: #fff;
        border: 1px solid rgba(255, 255, 255, .22);
        border-radius: 50%;
        background: rgba(7, 29, 73, .88);
        box-shadow: 0 10px 24px rgba(7, 29, 73, .22);
        transform: translateY(-50%);
        cursor: pointer;
    }

    .services-carousel-arrow--previous {
        left: 7px;
    }

    .services-carousel-arrow--next {
        right: 7px;
    }

    .services-carousel-arrow:disabled {
        opacity: .32;
        cursor: default;
    }

    .services-carousel-dots {
        min-height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin-top: 6px;
    }

    .services-carousel-dot {
        width: 8px;
        height: 8px;
        padding: 0;
        border: 0;
        border-radius: 99px;
        background: rgba(7, 29, 73, .22);
        cursor: pointer;
        transition: width .22s ease, background .22s ease;
    }

    .services-carousel-dot.is-active {
        width: 27px;
        background: #c1121f;
    }

    .service-nav {
        margin-top: 22px;
        padding: 20px 17px;
        border-radius: 19px;
    }
/* Newsroom */
    .home-newsroom-heading h2 {
        font-size: clamp(2.25rem, 11vw, 3.2rem);
    }

    .home-newsroom-item {
        padding: 22px 19px;
    }

    /* Contact */
    .contact {
        padding-top: 80px;
        padding-bottom: 82px;
    }

    .contact-grid {
        gap: 34px;
    }

    .contact-form input,
    .contact-form textarea {
        min-height: 50px;
        font-size: 16px;
    }

    .contact-form button {
        width: 100%;
        min-height: 50px;
    }
}

@media (max-width: 480px) {
    :root {
        --home-mobile-gutter: 14px;
    }

    .mobile-nav-drawer {
        width: 92vw;
        padding: 14px;
    }

    .logo-img {
        height: 43px;
    }

    .hero h1 {
        font-size: clamp(2.45rem, 13.6vw, 3.45rem);
    }

    .stat:nth-child(odd) {
        margin-right: 16px;
    }

    .stat:nth-child(even) {
        margin-left: 16px;
    }

    .service-link {
        flex-basis: 88vw;
    }

    .card {
        min-height: 330px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-media-item,
    .mobile-nav-drawer,
    .mobile-nav-backdrop,
    .mobile-nav-submenu {
        transition: none;
    }

    .services {
        scroll-behavior: auto;
    }
}


/* ==========================================================
   HOMEPAGE HAMBURGER — SMALL PHONE REFINEMENT
========================================================== */

@media (max-width: 480px) {
    .mobile-nav-toggle {
        /* HAMBURGER — EDIT HERE: compact phone size */
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .mobile-nav-toggle span {
        width: 21px;
    }
}

/* ==========================================================
   HOMEPAGE SECTION HEADING POSITION FIX
   ----------------------------------------------------------
   The desktop negative offsets are kept for the centered PC
   composition, but they are disabled when the global mobile
   header activates.

   Why:
   - #services .section-title has stronger specificity than the
     older mobile .section-title reset.
   - .home-newsroom-heading retained its -100px margin because
     the mobile rule changed only margin-bottom.

   GREY EDIT GUIDE:
   Search "SECTION POSITION — EDIT HERE".
========================================================== */

:root {
    /*
       SECTION POSITION — EDIT HERE:
       Desktop-only upward adjustment.

       Use 0px for natural positioning.
       Use a smaller negative value such as -40px if the sections
       appear too high on shorter desktop screens.
    */
    --services-heading-desktop-offset: -100px;
    --newsroom-heading-desktop-offset: -100px;
}


/* ==========================================================
   DESKTOP / LARGE LAPTOP POSITION
========================================================== */

@media (min-width: 981px) {

    #services .section-title {
        /* SECTION POSITION — EDIT HERE: Services desktop offset */
        margin-top: var(--services-heading-desktop-offset);
    }

    .home-newsroom-heading {
        /* SECTION POSITION — EDIT HERE: Newsroom desktop offset */
        margin-top: var(--newsroom-heading-desktop-offset);
    }

}


/* ==========================================================
   TABLET AND MOBILE SAFETY
   ----------------------------------------------------------
   The headings return to normal document flow so the fixed
   header cannot cover or crop them.
========================================================== */

@media (max-width: 980px) {

    #services .section-title {
        margin-top: 0;
    }

    .home-newsroom-heading {
        margin-top: 0;
    }

}

/* ==========================================================
   FOUR KEYS — ADAPTIVE CENTERING HOTFIX
   ----------------------------------------------------------
   Keep this block at the absolute bottom of Home.css.

   The previous detail layout used a flexible 1fr description
   column, which forced the description box to occupy nearly
   the entire available width. This version lets both boxes
   size themselves from their content, then centers the whole
   group inside the blue panel.

   FOUR KEYS — EDIT HERE:
   Adjust the description maximum width below if needed.
========================================================== */


/* ==========================================================
   DESKTOP / TABLET DETAIL STATE
========================================================== */

.service-key-detail {
    /*
       FOUR KEYS — EDIT HERE:
       The complete red-label + description group now shrinks
       to its actual content instead of filling the panel.
    */
    width: fit-content;
    max-width: 100%;

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

    gap: 9px;

    margin:
        0
        auto;
}


.service-key-detail-name {
    flex:
        0
        0
        auto;
}


.service-key-detail-description {
    /*
       FOUR KEYS — EDIT HERE:
       Maximum width before a long future sentence wraps.
    */
    width: fit-content;
    max-width:
        min(
            720px,
            68vw
        );

    flex:
        0
        1
        auto;

    justify-content: center;

    text-align: center;
}


/* Keep the overview boxes centered as one compact group. */

.service-key-overview {
    width: fit-content;
    max-width: 100%;

    margin:
        0
        auto;
}


/* ==========================================================
   MOBILE SAFETY
   ----------------------------------------------------------
   On phones, the label and description stack and use the
   available width for comfortable reading.
========================================================== */

@media (max-width: 760px) {

    .service-key-detail {
        width: 100%;

        flex-direction: column;

        gap: 7px;
    }


    .service-key-detail-name,
    .service-key-detail-description {
        width: 100%;
        max-width: none;
    }


    .service-key-overview {
        width: 100%;
    }

}

/* ==========================================================
   HOMEPAGE CONTACT FORM — SECURE SUBMISSION UI
   ----------------------------------------------------------
   HOME CONTACT — EDIT HERE:
   Search this phrase for future spacing, status, CAPTCHA,
   and button-state adjustments.
========================================================== */

.contact-form{
    position:relative;
}

.contact-form-field{
    display:grid;
    gap:7px;
    margin-bottom:15px;
}

.contact-form-field label{
    color:rgba(255,255,255,.9);
    font-size:.86rem;
    font-weight:700;
}

.contact-form-field label span{
    color:rgba(255,255,255,.58);
    font-size:.76rem;
    font-weight:600;
}

.contact-form input,
.contact-form textarea{
    margin-bottom:0;
    border:1px solid transparent;
    outline:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus{
    border-color:rgba(193,18,31,.72);
    box-shadow:0 0 0 4px rgba(193,18,31,.14);
}

.contact-form input:user-invalid,
.contact-form textarea:user-invalid{
    border-color:#ef6a74;
}

.contact-form textarea{
    resize:vertical;
    min-height:120px;
}

.contact-form-honeypot{
    position:absolute !important;
    left:-10000px !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}

.contact-form-captcha{
    /*
       HOME CONTACT — EDIT HERE:
       Space above the hCaptcha widget.
    */
    min-height:78px;
    display:flex;
    align-items:center;
    margin-top:4px;
    overflow:visible;
}

.contact-form-security-note{
    max-width:520px;
    margin:7px 0 0;
    color:rgba(255,255,255,.62);
    font-size:.76rem;
    line-height:1.55;
}

.contact-form-status{
    min-height:24px;
    margin:10px 0 0;
    padding:0;
    color:rgba(255,255,255,.82);
    font-size:.85rem;
    font-weight:700;
    line-height:1.5;
}

.contact-form-status.is-success{
    color:#8cf0bd;
}

.contact-form-status.is-error{
    color:#ff9ea6;
}

.contact-form-status.is-info{
    color:#cbd8f2;
}

.contact-form-submit{
    min-width:142px;
    margin-top:10px;
    border:0;
}

.contact-form-submit:disabled{
    cursor:not-allowed;
    opacity:.68;
    transform:none;
    box-shadow:none;
}

@media(max-width:760px){

    .contact-form-captcha{
        min-height:74px;
    }

    .contact-form-security-note,
    .contact-form-status{
        font-size:.79rem;
    }

}