/* =========================
   Modern UI Upgrade Pack
   Paste at END of styles.css
   ========================= */

/* Slightly smoother global rendering */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Better container rhythm */
.section { padding: 64px 0; }
@media (max-width: 980px){ .section{ padding: 44px 0; } }
@media (max-width: 640px){ .section{ padding: 28px 0; } }

/* Softer, more premium cards */
.card{
  border-radius: 18px;
  border: 1px solid rgba(23,46,134,.10);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 45px rgba(23,46,134,.10);
}

/* Alternate section background becomes subtle + modern */
.section.alt{
  background: rgba(211,221,236,.45);
}

/* Headings feel more modern */
h1,h2,h3,h4{
  letter-spacing: -0.02em;
}
h1{ font-size: 46px; }
h2{ font-size: 32px; }
h3{ font-size: 22px; }
@media (max-width: 980px){
  h1{font-size:36px}
  h2{font-size:26px}
}
@media (max-width: 640px){
  h1{font-size:30px}
  h2{font-size:22px}
}

/* Buttons: modern gradient + hover lift */
.btn{
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn-primary{
  background: linear-gradient(135deg, var(--clay), #2fb3f0);
  box-shadow: 0 14px 30px rgba(6,148,214,.25);
}
.btn-secondary{
  background: rgba(255,255,255,.70);
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(23,46,134,.16);
}

/* Links: subtle underline on hover */
a:hover{
  opacity:1;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(6,148,214,.55);
}

/* Header: cleaner, more premium */
.site-header{
  background: rgba(247,250,253,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(23,46,134,.10);
  box-shadow: 0 14px 35px rgba(23,46,134,.10);
}

/* Brand tagline slightly cleaner */
.brand-tagline{
  color: rgba(23,46,134,.78);
}

/* Inputs on contact/capability pages: modern */
input, select, textarea{
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(6,148,214,.45) !important;
  box-shadow: 0 0 0 5px rgba(6,148,214,.16);
}

/* Subtle “section separator” feel (optional): add class="rule" to any hr */
.rule{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(23,46,134,.18), transparent);
  border:0;
  margin: 22px 0;
}

/* Card hover for service blocks (nice effect without JS) */
.card:hover{
  transform: translateY(-2px);
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 22px 55px rgba(23,46,134,.14);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}
/* Service icon pill */
.icon-pill{
  width:42px; height:42px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(6,148,214,.18), rgba(23,46,134,.10));
  border: 1px solid rgba(23,46,134,.10);
  box-shadow: 0 10px 22px rgba(23,46,134,.08);
  margin-bottom:12px;
}
.icon-pill svg{ width:22px; height:22px; fill: var(--charcoal); opacity:.92; }

/* Tighter card copy */
.card p{ max-width: 70ch; }
/* =========================
   Technip-style Layout Pack
   Paste at END of styles.css
   ========================= */

/* Full-bleed hero with media */
.hero{
  padding: 88px 0 54px 0;
  position: relative;
  overflow: hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 500px at 15% 15%, rgba(6,148,214,.22), transparent 60%),
    radial-gradient(800px 520px at 85% 20%, rgba(23,46,134,.20), transparent 62%),
    linear-gradient(to bottom, rgba(247,250,253,.88), rgba(247,250,253,.96));
  pointer-events:none;
}
.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns: 1.25fr .85fr;
  gap:18px;
  align-items:stretch;
}
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero{ padding: 74px 0 40px 0; }
}

/* Hero media card (video/visual) */
.hero-media{
  border-radius: 18px;
  border: 1px solid rgba(23,46,134,.10);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 55px rgba(23,46,134,.14);
  overflow:hidden;
  position:relative;
  min-height: 260px;
}
.hero-media .thumb{
  position:absolute; inset:0;
  background:
    linear-gradient(135deg, rgba(23,46,134,.92), rgba(6,148,214,.55)),
    url("assets/img/hero.jpeg");
  background-size: cover;
  background-position: center;
  filter: saturate(1.1);
}
.hero-media .overlay{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(23,46,134,.70), rgba(23,46,134,.05));
}
.hero-media .meta{
  position:absolute; left:16px; right:16px; bottom:14px;
  color:#fff;
}
.kicker{
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(23,46,134,.70);
}
.kicker.light{ color: rgba(255,255,255,.85); }

/* Pills like “How can we help you today?” */
.pill-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(23,46,134,.12);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  font-size:14px;
  font-weight:600;
}
.pill:hover{
  text-decoration:none;
  transform: translateY(-1px);
}
.pill-dot{
  width:10px; height:10px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--clay), #2fb3f0);
  box-shadow: 0 10px 18px rgba(6,148,214,.25);
}

/* Press-release/news list style */
.list{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.list-item{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(23,46,134,.10);
  background: rgba(255,255,255,.78);
}
.list-left{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
  color: rgba(23,46,134,.75);
}
.tag .dot{
  width:8px; height:8px; border-radius:999px;
  background: rgba(6,148,214,.55);
}
.list-title{ font-weight:700; }
.list-date{ font-size:13px; color: rgba(23,46,134,.70); white-space:nowrap; }

/* Large image cards like “What we do” */
.feature-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
@media (max-width: 980px){ .feature-grid{ grid-template-columns:1fr; } }

.feature-card{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(23,46,134,.10);
  box-shadow: 0 22px 55px rgba(23,46,134,.14);
  position:relative;
  min-height: 240px;
}
.feature-card .bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position:center;
  filter: saturate(1.05);
}
.feature-card .shade{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(23,46,134,.82), rgba(23,46,134,.10));
}
.feature-card .content{
  position:absolute; left:16px; right:16px; bottom:14px;
  color:#fff;
}
.feature-card .title{ font-size:20px; font-weight:800; margin:0 0 6px 0; }
.feature-card .desc{ margin:0; color: rgba(255,255,255,.88); }
.feature-card a{ color:#fff; text-decoration:none; }