:root{
  --blue:#003DA5; --blue-dark:#00237A; --blue-light:#1A56C7;
  --ink:#1A1A1A; --text:#333; --mid:#5A5A5A;
  --line:#E5E5E5; --bg:#FFFFFF; --bg-soft:#F4F4F4; --bg-cream:#FAF8F4;
  --accent:#FFC72C;
  --shadow: 0 2px 12px rgba(0,0,0,.06);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.10);
  --sans:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); color:var(--text); background:var(--bg);
  font-size:16px; line-height:1.55; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:var(--blue); text-decoration:none}
a:hover{color:var(--blue-dark)}
img{max-width:100%; display:block}
.container{max-width:1320px; margin:0 auto; padding:0 32px}
@media(max-width:768px){.container{padding:0 20px}}

/* NAV */
.topbar{background:var(--ink); color:#fff; font-size:12px; padding:8px 0; letter-spacing:.04em}
.topbar .container{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px}
.topbar a{color:#fff; opacity:.8; margin-left:18px; font-size:12px}
.topbar a:hover{opacity:1; color:var(--accent)}
nav.main{background:var(--bg); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:100; transition: box-shadow .3s}
nav.main.scrolled{box-shadow: 0 2px 12px rgba(0,0,0,.06)}
nav.main .row{display:flex; align-items:center; justify-content:space-between; padding:14px 32px; max-width:1500px; margin:0 auto}
nav.main .logo img{height:84px; width:auto}
nav.main ul.links{display:flex; gap:4px; list-style:none; align-items:center}
nav.main ul.links > li{position:relative}
nav.main ul.links > li > a{color:var(--ink); font-weight:500; font-size:14px; padding:10px 14px; display:block; transition: color .2s; letter-spacing:-.005em}
nav.main ul.links > li > a:hover, nav.main ul.links > li.active > a{color:var(--blue)}
nav.main .submenu{position:absolute; top:100%; left:0; background:var(--bg); border:1px solid var(--line); min-width:260px; padding:12px 0; box-shadow: var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(8px); transition: all .25s ease; list-style:none}
nav.main ul.links > li:hover .submenu{opacity:1; visibility:visible; transform:translateY(0)}
.submenu li a{display:block; padding:10px 22px; color:var(--text); font-size:14px; font-weight:400; transition: all .2s}
.submenu li a:hover{background:var(--bg-soft); color:var(--blue); padding-left:26px}
nav.main .cta{background:var(--blue); color:#fff; padding:11px 22px; font-size:13px; font-weight:600; border-radius:2px; transition: background .2s; margin-left:8px}
nav.main .cta:hover{background:var(--blue-dark); color:#fff}
.menu-btn{display:none; background:none; border:none; font-size:24px; cursor:pointer; color:var(--ink)}
@media(max-width:1200px){
  nav.main ul.links{display:none; position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column; padding:16px; border-bottom:1px solid var(--line); gap:0}
  nav.main ul.links.open{display:flex}
  nav.main ul.links > li{width:100%}
  nav.main ul.links > li > a{padding:14px 12px}
  .submenu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; padding-left:24px}
  .menu-btn{display:block}
}

/* HERO */
.hero{position:relative; min-height:560px; display:flex; align-items:flex-end; background:var(--ink); overflow:hidden; color:#fff}
.hero.tall{min-height:760px}
.hero .bg{position:absolute; inset:0; background-size:cover; background-position:center; z-index:0}
.hero .bg::after{content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.75) 100%); z-index:2}

/* Video hero — adds a darkening filter on the video itself so text stays readable */
.hero .bg video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
  /* dim video ~25% to keep text legible while video still reads cinematically */
  filter: brightness(0.7) contrast(1.05) saturate(0.95);
}
.hero.video-hero .bg::after{
  background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.8) 100%);
}

.hero .container{position:relative; z-index:3; padding-top:80px; padding-bottom:80px}
.hero .eyebrow{font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:20px; opacity:0; animation: fadeUp .8s .2s forwards; text-shadow: 0 1px 4px rgba(0,0,0,.5)}
.hero h1{font-size: clamp(40px, 6vw, 88px); font-weight:600; line-height:1.05; letter-spacing:-.025em; max-width:1000px; margin-bottom:24px; opacity:0; animation: fadeUp .9s .35s forwards; text-shadow: 0 2px 12px rgba(0,0,0,.4)}
.hero p.lede{font-size: clamp(17px, 1.6vw, 22px); line-height:1.5; max-width:680px; font-weight:400; color:rgba(255,255,255,.95); opacity:0; animation: fadeUp .9s .5s forwards; text-shadow: 0 1px 6px rgba(0,0,0,.4)}
.hero .read-more{margin-top:36px; opacity:0; animation: fadeUp .9s .65s forwards}
@keyframes fadeUp{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:translateY(0)}}

/* Read-more link */
.read-more{display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:#fff; padding:14px 26px; background:var(--blue); border-radius:2px; transition: all .2s}
.read-more:hover{background:var(--blue-dark); color:#fff; gap:14px}
.read-more::after{content:'›'; font-size:18px; line-height:1}
.read-more.ghost{background:transparent; color:var(--blue); padding:0; border:none}
.read-more.ghost:hover{color:var(--blue-dark); gap:12px}
.read-more.light{background:#fff; color:var(--blue)}
.read-more.light:hover{background:var(--bg-soft)}

/* Section commons */
section{padding:80px 0; position:relative}
@media(max-width:768px){section{padding:56px 0}}
.section-head{margin-bottom:48px; max-width:840px}
.section-head .label{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); margin-bottom:14px}
.section-head h2{font-size: clamp(30px, 3.6vw, 52px); font-weight:600; line-height:1.1; letter-spacing:-.02em; color:var(--ink); margin-bottom:20px}
.section-head p{font-size:18px; color:var(--mid); line-height:1.55; max-width:680px}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center}
.section-head.center p{margin-left:auto; margin-right:auto}

/* Story cards */
.story-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:24px}
@media(max-width:1024px){.story-grid{grid-template-columns:repeat(2, 1fr)}}
@media(max-width:560px){.story-grid{grid-template-columns:1fr}}
.story{background:#fff; cursor:pointer; transition: transform .35s ease, box-shadow .35s ease}
.story:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.story .img{aspect-ratio: 16/11; background-size:cover; background-position:center; overflow:hidden}
.story .img-inner{width:100%; height:100%; background-size:cover; background-position:center; transition: transform .6s ease}
.story:hover .img-inner{transform:scale(1.04)}
.story .body{padding:22px 4px 8px}
.story .date{font-size:12px; color:var(--mid); font-weight:500; letter-spacing:.04em; margin-bottom:8px}
.story h3{font-size:18px; font-weight:600; line-height:1.3; color:var(--ink); margin-bottom:10px; letter-spacing:-.005em}
.story p{font-size:14px; color:var(--mid); line-height:1.5; margin-bottom:14px}
.story .read-more.ghost{font-size:14px}

/* Two-col */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center}
.two-col.flip{direction:rtl}
.two-col.flip > *{direction:ltr}
@media(max-width:900px){.two-col{grid-template-columns:1fr; gap:40px} .two-col.flip{direction:ltr}}
.two-col .img-block{aspect-ratio: 4/3; background-size:cover; background-position:center; border-radius:2px}
.two-col h2{font-size: clamp(28px, 3vw, 44px); font-weight:600; line-height:1.1; letter-spacing:-.02em; color:var(--ink); margin-bottom:20px}
.two-col p{font-size:17px; color:var(--text); line-height:1.6; margin-bottom:16px}
.two-col .label{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); margin-bottom:14px}

/* Stat strip */
.stat-strip{background:var(--blue); color:#fff; padding:64px 0}
.stat-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:32px}
@media(max-width:768px){.stat-grid{grid-template-columns:repeat(2, 1fr); gap:24px}}
.stat .k{font-size: clamp(34px, 4.2vw, 52px); font-weight:600; line-height:1; letter-spacing:-.02em; margin-bottom:8px; white-space:nowrap}
.stat .k small{font-size:.5em; opacity:.7; font-weight:500}
.stat .l{font-size:13px; opacity:.85; line-height:1.4; letter-spacing:.03em}

/* Feature tiles */
.tile-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:24px}
@media(max-width:1024px){.tile-grid{grid-template-columns:repeat(2, 1fr)}}
@media(max-width:560px){.tile-grid{grid-template-columns:1fr}}
.tile{position:relative; aspect-ratio: 4/5; background-size:cover; background-position:center; overflow:hidden; cursor:pointer; display:flex; align-items:flex-end; padding:32px; color:#fff}
.tile::after{content:''; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(0,0,0,.0) 30%, rgba(0,0,0,.85) 100%)}
.tile .tile-content{position:relative; z-index:2; width:100%}
.tile .tile-label{font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--accent); margin-bottom:10px}
.tile h3{font-size:24px; font-weight:600; line-height:1.15; letter-spacing:-.01em; margin-bottom:10px}
.tile p{font-size:13px; opacity:.9; line-height:1.5; margin-bottom:14px}
.tile .read-more.light{background:rgba(255,255,255,.95); color:var(--blue); padding:9px 16px; font-size:12px}
.tile-img{position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; transition: transform .7s ease}
.tile:hover .tile-img{transform:scale(1.06)}
.tile.upcoming::before{content:'COMING SOON'; position:absolute; top:18px; right:18px; z-index:3; background:var(--accent); color:var(--ink); padding:6px 12px; font-size:10px; font-weight:700; letter-spacing:.1em}

/* Tables */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); background:#fff}
table.data{width:100%; border-collapse:collapse; font-size:14px}
table.data thead th{background:var(--ink); color:#fff; text-align:left; padding:14px 16px; font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
table.data td{padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--text)}
table.data tbody tr:hover{background:var(--bg-soft)}
table.data tbody tr:last-child td{border-bottom:none}
table.data td.num{font-variant-numeric: tabular-nums; color:var(--mid); width:60px}
table.data td.right{text-align:right; font-variant-numeric: tabular-nums}
table.data .badge{display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; letter-spacing:.04em; background:#E8F0FF; color:var(--blue)}
table.data .badge.green{background:#E5F5E8; color:#16793E}
table.data .badge.gold{background:#FFF4D6; color:#8B5A00}

/* Logo strip */
.logo-strip{display:grid; grid-template-columns:repeat(6, 1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
@media(max-width:900px){.logo-strip{grid-template-columns:repeat(3, 1fr)}}
@media(max-width:560px){.logo-strip{grid-template-columns:repeat(2, 1fr)}}
.logo-cell{background:#fff; min-height:120px; padding:24px; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--ink); transition: all .3s; text-align:center; flex-direction:column}
.logo-cell:hover{background:var(--bg-soft); color:var(--blue)}
.logo-cell span{font-weight:400; color:var(--mid); display:block; font-size:11px; letter-spacing:.04em; margin-top:4px}

/* Locations */
.loc-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:24px}
@media(max-width:1024px){.loc-grid{grid-template-columns:repeat(3, 1fr)}}
@media(max-width:600px){.loc-grid{grid-template-columns:repeat(2, 1fr)}}
.loc-card{background:#fff; border:1px solid var(--line); padding:28px 24px; cursor:pointer; transition: all .3s; position:relative}
.loc-card::before{content:''; position:absolute; left:0; top:0; height:3px; width:0; background:var(--blue); transition: width .3s}
.loc-card:hover{border-color:var(--blue); transform:translateY(-2px); box-shadow:var(--shadow)}
.loc-card:hover::before{width:100%}
.loc-card .pin{width:36px; height:36px; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--blue); margin-bottom:20px; transition: all .3s}
.loc-card:hover .pin{background:var(--blue); color:#fff}
.loc-card h3{font-size:22px; font-weight:600; color:var(--ink); margin-bottom:6px; letter-spacing:-.01em}
.loc-card .state{font-size:13px; color:var(--mid); margin-bottom:14px}
.loc-card .activity{font-size:13px; color:var(--text); line-height:1.5}

/* Mosaic */
.mosaic{display:grid; gap:12px; grid-template-columns:repeat(4, 1fr); grid-auto-rows: 240px}
@media(max-width:900px){.mosaic{grid-template-columns:repeat(2, 1fr); grid-auto-rows:200px}}
.mosaic .m{background-size:cover; background-position:center; position:relative; overflow:hidden; cursor:pointer; transition: transform .35s}
.mosaic .m:hover{transform:scale(.98)}
.mosaic .m::after{content:attr(data-cap); position:absolute; left:16px; bottom:16px; right:16px; font-size:12px; font-weight:600; color:#fff; background:rgba(0,0,0,.78); padding:6px 12px; border-radius:2px; opacity:0; transition: opacity .3s}
.mosaic .m:hover::after{opacity:1}
.mosaic .big{grid-column:span 2; grid-row:span 2}
.mosaic .wide{grid-column:span 2}

/* Leadership */
.lead-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:32px}
@media(max-width:900px){.lead-grid{grid-template-columns:1fr}}
.lead-card{background:#fff; border:1px solid var(--line); padding:32px; transition: box-shadow .3s, border-color .3s}
.lead-card:hover{box-shadow:var(--shadow-lg); border-color:var(--blue)}
.lead-card .av{width:96px; height:96px; border-radius:50%; background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%); color:#fff; display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:600; margin-bottom:24px}
.lead-card h3{font-size:22px; font-weight:600; color:var(--ink); margin-bottom:4px; letter-spacing:-.01em}
.lead-card .role{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin-bottom:16px}
.lead-card p{font-size:15px; line-height:1.55; color:var(--mid)}

/* CTA */
.cta-band{background:var(--blue); color:#fff; padding:80px 0; text-align:center}
.cta-band h2{font-size: clamp(28px, 3vw, 44px); font-weight:600; line-height:1.15; letter-spacing:-.02em; margin-bottom:20px; max-width:800px; margin-left:auto; margin-right:auto}
.cta-band p{font-size:17px; opacity:.9; max-width:600px; margin:0 auto 32px}
.cta-band .read-more{background:#fff; color:var(--blue)}
.cta-band .read-more:hover{background:var(--accent); color:var(--ink)}

/* Footer */
footer{background:#fff; padding:64px 0 24px; border-top:1px solid var(--line)}
.foot-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px}
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr; gap:32px}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr}}
.foot-top .brand img{height:64px; margin-bottom:18px}
.foot-top .brand p{font-size:14px; color:var(--mid); line-height:1.55; max-width:280px}
.foot-col h5{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin-bottom:16px}
.foot-col ul{list-style:none}
.foot-col ul li{margin-bottom:10px}
.foot-col ul a{font-size:14px; color:var(--mid); transition: color .2s}
.foot-col ul a:hover{color:var(--blue)}
.foot-bot{padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; font-size:12px; color:var(--mid)}
.foot-bot .socials{display:flex; gap:14px}
.foot-bot .socials a{width:36px; height:36px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--mid); border-radius:50%; transition: all .2s}
.foot-bot .socials a:hover{background:var(--blue); color:#fff; border-color:var(--blue)}

/* Page head */
.page-head{background:var(--bg-soft); padding:64px 0 56px; border-bottom:1px solid var(--line)}
.page-head .crumbs{font-size:12px; color:var(--mid); margin-bottom:16px; letter-spacing:.04em; text-transform:uppercase; font-weight:500}
.page-head .crumbs a{color:var(--mid)}
.page-head .crumbs a:hover{color:var(--blue)}
.page-head h1{font-size: clamp(36px, 5vw, 64px); font-weight:600; line-height:1.05; letter-spacing:-.025em; color:var(--ink); margin-bottom:20px}
.page-head p{font-size:19px; color:var(--mid); line-height:1.55; max-width:780px}

/* Utility */
.bg-soft{background:var(--bg-soft)}
.bg-cream{background:var(--bg-cream)}
.center{text-align:center}
.mt-32{margin-top:32px}
.reveal{opacity:0; transform:translateY(24px); transition: opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1; transform:translateY(0)}

/* Services */
.svc-list{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
@media(max-width:768px){.svc-list{grid-template-columns:1fr}}
.svc-item{background:#fff; padding:24px; transition: background .2s}
.svc-item:hover{background:var(--bg-soft)}
.svc-item h4{font-size:16px; font-weight:600; color:var(--ink); margin-bottom:6px}
.svc-item p{font-size:13px; color:var(--mid); line-height:1.5}

/* Quote */
.quote{background:var(--bg-cream); padding:64px 48px; border-left:4px solid var(--blue); margin:48px 0}
.quote p{font-size:24px; line-height:1.4; font-weight:500; color:var(--ink); letter-spacing:-.005em; margin-bottom:20px}
.quote .by{font-size:14px; color:var(--mid); font-weight:600}


/* --- Added: photo page-head --- */
.page-head.photo{background-color:var(--ink); background-size:cover !important; background-position:center !important; border-bottom:none}
.page-head.photo h1{color:#fff}
.page-head.photo p{color:rgba(255,255,255,.92)}
.page-head.photo .crumbs, .page-head.photo .crumbs a{color:rgba(255,255,255,.8)}

/* --- Added: category photo cards (engineering products) --- */
.svc-item.photo{position:relative; min-height:160px; background-size:cover; background-position:center; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end}
.svc-item.photo::before{content:''; position:absolute; inset:0; background:rgba(0,0,0,.55); transition:background .3s; z-index:0}
.svc-item.photo:hover{background-color:transparent}
.svc-item.photo:hover::before{background:rgba(0,0,0,.4)}
.svc-item.photo > *{position:relative; z-index:1}
.svc-item.photo h4{color:#fff}
.svc-item.photo p{color:rgba(255,255,255,.9)}


/* --- Added V2: six locations on one line --- */
.loc-grid.oneline{grid-template-columns:repeat(6,1fr)}
@media(max-width:1024px){.loc-grid.oneline{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.loc-grid.oneline{grid-template-columns:repeat(2,1fr)}}


/* ===== V3 additions ===== */
/* Premium service verticals (home) */
.vtiles{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
@media(max-width:1024px){.vtiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.vtiles{grid-template-columns:1fr}}
.vtile{position:relative; display:block; padding:36px 28px 30px; min-height:300px; border-radius:8px; overflow:hidden; color:#fff; background:linear-gradient(160deg,#00237A 0%,#003DA5 62%,#0A2E8C 100%); transition:transform .35s ease, box-shadow .35s ease}
.vtile::before{content:''; position:absolute; left:0; top:0; height:3px; width:0; background:var(--accent); transition:width .45s ease; z-index:3}
.vtile:hover{transform:translateY(-6px); box-shadow:0 24px 50px rgba(0,35,122,.35)}
.vtile:hover::before{width:100%}
.vtile .vnum{position:absolute; right:16px; top:0; font-size:104px; font-weight:800; line-height:1; color:rgba(255,255,255,.07); letter-spacing:-.04em; z-index:0}
.vtile .vbody{position:relative; z-index:1}
.vtile .vlabel{font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:14px}
.vtile h3{font-size:23px; font-weight:600; line-height:1.16; letter-spacing:-.01em; margin-bottom:12px}
.vtile p{font-size:14px; color:rgba(255,255,255,.82); line-height:1.55; margin-bottom:22px; min-height:44px}
.vtile .vlink{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#fff}
.vtile .vlink::after{content:'›'; font-size:16px; line-height:1}
.vtile:hover .vlink{gap:14px; color:var(--accent)}
.vtile.new{background:linear-gradient(160deg,#0A0A0A 0%,#1A1A1A 52%,#003DA5 135%)}
.vtile .vbadge{position:absolute; top:18px; right:18px; z-index:3; background:var(--accent); color:var(--ink); font-size:10px; font-weight:700; letter-spacing:.1em; padding:5px 10px; border-radius:3px}

/* Tidy grids (no grey blocks) */
.logo-strip.tidy{background:transparent; border:none; gap:16px}
.logo-strip.tidy .logo-cell{border:1px solid var(--line); border-radius:6px}
.svc-list.tidy{background:transparent; border:none; gap:16px}
.svc-list.tidy .svc-item{border:1px solid var(--line); border-radius:8px}
.svc-list.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.svc-list.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-list.cols-4{grid-template-columns:1fr}}

/* About hero slideshow */
.page-head.slides-head{position:relative; overflow:hidden; background:var(--ink); min-height:440px; display:flex; align-items:center}
.page-head.slides-head .slides{position:absolute; inset:0; z-index:0}
.page-head.slides-head .slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.4s ease}
.page-head.slides-head .slide.active{opacity:1}
.page-head.slides-head .slides-overlay{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(0,12,40,.45) 0%,rgba(0,12,40,.78) 100%)}
.page-head.slides-head .container{position:relative; z-index:2; width:100%}

/* Premium automobile brand cards */
.story-grid.premium .story{background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:var(--shadow); transition:transform .35s ease, box-shadow .35s ease, border-color .3s}
.story-grid.premium .story:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--blue)}
.story-grid.premium .story .body{padding:20px 20px 24px}
.story-grid.premium .story .date{display:inline-block; color:var(--blue); font-weight:700; text-transform:uppercase; letter-spacing:.07em; font-size:10.5px; background:#E8F0FF; padding:4px 10px; border-radius:20px; margin-bottom:12px}
.story-grid.premium .story h3{font-size:19px}


/* ===== V4 ===== */
/* Nav "Get in touch" button — force white text (was hard to read) */
nav.main ul.links > li > a.cta,
nav.main ul.links > li > a.cta:hover,
nav.main .cta, nav.main .cta:hover{color:#fff !important}

/* Verticals: more premium + text camouflages into bg on hover */
.vtile{background:linear-gradient(155deg,#011A5B 0%,#00237A 46%,#003DA5 100%); box-shadow:0 12px 32px rgba(0,20,70,.20)}
.vtile.new{background:linear-gradient(155deg,#070708 0%,#17171C 50%,#022a73 135%)}
.vtile .vlabel{position:relative; padding-bottom:12px}
.vtile .vlabel::after{content:''; position:absolute; left:0; bottom:0; width:26px; height:2px; background:var(--accent); transition:width .45s ease}
.vtile:hover .vlabel::after{width:60px}
.vtile .vlabel,.vtile h3,.vtile p{transition:color .5s ease, opacity .5s ease}



.vtile:hover .vnum{color:rgba(255,255,255,.17)}
.vtile .vlink{transition:gap .3s ease, color .3s ease}
.vtile:hover .vlink{color:var(--accent); gap:14px}


/* ===== V5: verticals text stays white on hover ===== */
.vtile .vlabel{color:var(--accent)}
.vtile h3, .vtile p{color:#fff}
.vtile p{color:rgba(255,255,255,.82)}
.vtile:hover .vlabel{color:var(--accent)}
.vtile:hover h3{color:#fff}
.vtile:hover p{color:rgba(255,255,255,.82); opacity:1}