/* ===============================
   GLOBAL BASE
================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}

:root {
  --bg: #f8faf0c;
  --blue: #0b3c78;
  --light-blue: #0b3c7b;
  --white: #ffffff;
  --glass: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.25);
  --text-dark: #0b1a32;
  --text-light: #eaf3ff;
  --blur: 18px;
  --radius: 18px;
  --shadow: 0 8px 20px rgba(0,0,0,0.15);
  --transition: all 0.4s ease;
  --max-width: 1200px;
}

html, body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  background-color: var(--bg);
  overflow-x: hidden; /* <-- ADD THIS LINE */
}


h1, h2, h3, h4 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--blue);
}

p, li {
  line-height: 1.6;
  font-weight: 400;
  overflow-wrap: break-word; /* <-- ADD THIS LINE */
  word-wrap: break-word;      /* <-- (for older browser support) */
}


a {
  text-decoration: none;
  color: var(--light-blue);
  transition: var(--transition);
}

a:hover {
  color: var(--blue);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 1.5rem;
}

/* ===============================
   PAGE LOADER
================================= */
.page-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  z-index: 9999;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.loader-content {
  text-align: center;
  animation: fadeInUp 1.5s ease forwards;
}
.loader-content img {
  height: 60px;
  margin-bottom: 0.5rem;
}
.loader-content .loader-title {
  font-weight: 700;
  color: var(--blue);
  font-size: 1.1rem;
}

/* ===============================
   HEADER / NAVIGATION
================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1.5rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.logo img {
  height: 48px;
  width: auto;
  transition: transform 0.3s ease;
}
.logo img:hover {
  transform: scale(1.05);
}

.nav-logos {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.nav-logos img {
  height: 32px;
  width: auto;
  border-radius: 10px;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.15));
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nav-logos a:hover img {
  transform: scale(1.15);
  box-shadow: 0 0 15px rgba(20,126,251,0.4);
}

.text-nav ul {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.text-nav a {
  font-weight: 600;
  color: var(--blue);
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
}

.text-nav a.active,
.text-nav a:hover {
  background: var(--light-blue);
  color: white;
}

/* ===============================
   HOME PAGE HERO
================================= */
.page-home .hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 90vh;
  padding: 5rem 2rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.hero-left {
  animation: fadeInUp 1s ease forwards;
}

.hero-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.lead {
  font-size: 1.1rem;
  color: #1a273a;
  margin-bottom: 1.5rem;
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.8rem;
}

.cta, .ghost {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  border-radius: 30px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.cta {
  background: var(--light-blue);
  color: white;
  border: 2px solid var(--light-blue);
}

.cta:hover {
  background: var(--blue);
  border-color: var(--blue);
}

.ghost {
  border: 2px solid var(--light-blue);
  color: var(--light-blue);
}

.ghost:hover {
  background: var(--light-blue);
  color: white;
}

/* ===============================
   GLASS CARDS (Used by all pages)
================================= */
.glass-card {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--blur));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.8rem;
  margin-bottom: 2rem;
  color: var(--text-dark);
  transition: var(--transition);
}

.glass-card:hover {
  background: rgba(255,255,255,0.25);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

/* ===============================
   SUBSIDIARIES CARDS (Homepage)
================================= */
.subs-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  margin-top: 2rem;
}

.subs-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
}

.subs-card .sub-logo {
  height: 60px;
  margin-bottom: 1rem;
  transition: transform 0.4s ease;
}

.subs-card:hover .sub-logo {
  transform: scale(1.1);
}

.card-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}

.subs-card:hover .card-reveal {
  opacity: 1;
  transform: translateY(0);
}

.subs-card .cta.small {
  font-size: 0.85rem;
  margin-top: 0.8rem;
  display: inline-block;
}

/* ===============================
   CONTACT FORM (Used by all pages)
================================= */
form input,
form textarea {
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 0.8rem;
  margin-bottom: 1rem;
  background: rgba(255,255,255,0.6);
  font-size: 1rem;
  font-family: inherit;
  color: var(--text-dark);
  outline: none;
  transition: box-shadow 0.3s ease;
}

form input:focus,
form textarea:focus {
  box-shadow: 0 0 0 3px rgba(20,126,251,0.3);
}

.form-status {
  font-size: 0.95rem;
  margin-top: 0.5rem;
  font-weight: 600;
}

/* ===============================
   FOOTER (Used by all pages)
================================= */
.site-footer {
  padding: 1.5rem 1rem;
  background: linear-gradient(90deg,#fbfdff,#eef6ff);
  margin-top: 2rem;
  /* This adds a clean, sharp line just like the header's shadow */
  border-top: 1px solid rgba(11, 60, 120, 0.08);
}

  background: linear-gradient(90deg,#fbfdff,#eef6ff);
  margin-top: 2rem;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: var(--max-width);
  margin: 0 auto;
}

.footer-socials {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.footer-socials img {
  height: 20px;
  opacity: 0.7;
  transition: var(--transition);
}
.footer-socials a:hover img {
  opacity: 1;
  transform: scale(1.1);
}

.footer-copyright {
  color: var(--muted, #5b6b78);
  font-size: 0.9rem;
}


/* ===============================
   BACKGROUND LAYERS
================================= */
.bg-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}

.bg-image {
  background-size: cover;
  background-position: center;
  filter: brightness(7.5) blur(5px);
  width: 100%;
  height: 100%;
  transform: scale(1.5);
  transition: transform 60.5s ease;
  /* Default BG for Homepage */
  background-image: url('assets/hero-bg.jpg');
}

body.scrolled .bg-image {
  transform: scale(1.05);
}

.bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(10,100,205,0.4));
}

/* ===============================
   ANIMATIONS
================================= */
@keyframes fadeInUp {
  from {opacity: 0; transform: translateY(40px);}
  to {opacity: 1; transform: translateY(0);}
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1.2s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================================
   SUBSIDIARY PAGE STYLES & BRANDING
=================================================== */

/* --- Shared Subsidiary Page Layout --- */
.subsidiary-hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1rem;
  position: relative;
}
.subsidiary-hero-inner {
  z-index: 10;
}
.subsidiary-hero .hero-logo {
  height: 80px;
  width: auto;
  margin: 0 auto 1rem auto;
  object-fit: contain;
}
.subsidiary-hero h1 {
  font-family: "Playfair Display", serif;
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
}
.subsidiary-hero p {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 1.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.subsidiary-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  align-items: start;
}
.subsidiary-contact-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
}
/* Responsive grid for contact */
@media(max-width: 768px) {
  .subsidiary-contact-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Branding: Harbor & Co (Finance) --- */
.page-harbor {
  --brand-primary: #0b4c90;
  --brand-accent: #147efb;
  --brand-text: #07203a;
}
.page-harbor .bg-image { background-image: url('assets/finance-bg.jpg'); }
.page-harbor .loader-title { color: var(--brand-primary); }
.page-harbor h1, .page-harbor h2, .page-harbor h3 { color: var(--brand-primary); }
.page-harbor .text-nav a { color: var(--brand-primary); }
.page-harbor .text-nav a.active,
.page-harbor .text-nav a:hover,
.page-harbor .cta {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: white;
}
.page-harbor .cta:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* --- Branding: Cozance Food --- */
.page-cozance {
  --brand-primary: #0b6b3a;
  --brand-accent: #28b463;
  --brand-text: #3b6b3a;
}
.page-cozance .bg-image { background-image: url('assets/food-bg.jpg'); }
.page-cozance .loader-title { color: var(--brand-primary); }
.page-cozance h1, .page-cozance h2, .page-cozance h3 { color: var(--brand-primary); }
.page-cozance .text-nav a { color: var(--brand-primary); }
.page-cozance .text-nav a.active,
.page-cozance .text-nav a:hover,
.page-cozance .cta {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: white;
}
.page-cozance .cta:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* --- Branding: MWG Gas (Energy) --- */
.page-mwg {
  --brand-primary: #b24f09;
  --brand-accent: #ff7a18;
  --brand-text: #a23f09;
}
.page-mwg .bg-image { background-image: url('assets/energy-bg.jpg'); }
.page-mwg .loader-title { color: var(--brand-primary); }
.page-mwg h1, .page-mwg h2, .page-mwg h3 { color: var(--brand-primary); }
.page-mwg .text-nav a { color: var(--brand-primary); }
.page-mwg .text-nav a.active,
.page-mwg .text-nav a:hover,
.page-mwg .cta {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: white;
}
.page-mwg .cta:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
/* ===============================
   NEW "WOW" FACTOR & ANIMATIONS
================================= */

/* --- 1. Ripple Click Effect --- */
.ripple-effect {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: var(--ripple);
  transform: scale(0);
  animation: ripple-anim 2.6s ease-out;
  opacity: 1;
}

@keyframes ripple-anim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}


/* --- 2. Enhanced Glass Card (Hover Glow) --- */
.glass-card {
  position: relative;
  overflow: hidden; /* Hide the glow overflow */
}

/* This creates the glowy border effect */
.glass-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--radius);
  border: 2px solid transparent;
  background: linear-gradient(130deg, var(--glass-border), transparent 40%) border-box;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: var(--transition);
  z-index: 1;
}

/* On hover, the border brightens and a light-streak "sheen" animates across */
.glass-card:hover::before {
  border-color: rgba(25, 100, 255, 0.5);
  animation: sheen 2s ease;
}

@keyframes sheen {
  0% { transform: skewX(-30deg) translateX(-200%); opacity: 0.3; }
  20% { opacity: 0.5; }
  100% { transform: skewX(-30deg) translateX(200%); opacity: 0.3; }
}

/* Ensure content is above the sheen */
.glass-card > * {
  position: relative;
  z-index: 2;
}


/* --- 3. Homepage Hero Title (Animated Gradient) --- */
.page-home .hero-title {
  /* Clip the text, making the background visible through it */
  background: linear-gradient(90deg, 
    var(--blue), 
    var(--light-blue), 
    var(--blue)
  );
  background-size: 200% auto; /* Size the gradient to be movable */
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  
  /* Animate the gradient position */
  animation: text-shine 5s linear infinite;
}

@keyframes text-shine {
  to {
    background-position: 200% center;
  }
}


/* --- 4. New Animation Variations --- */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}


/* ===============================
   NEW SUBSIDIARY PAGE LAYOUT
================================= */
.content-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.content-layout .content-text {
  /* The text will be in a glass card */
}

.content-layout .content-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.content-layout .content-image img:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}

/* Modifier class to flip the layout */
.content-layout.reversed {
  grid-template-areas: "text image";
}
.content-layout.reversed .content-text {
  grid-area: text;
}
.content-layout.reversed .content-image {
  grid-area: image;
}

/* Responsive Stack */
@media (max-width: 800px) {
  .content-layout,
  .content-layout.reversed {
    grid-template-columns: 1fr;
    grid-template-areas: none !important;
  }
  
  .content-layout .content-text,
  .content-layout .content-image {
    grid-area: auto !important;
  }
  
  /* On mobile, put image first always */
  .content-layout.reversed .content-text {
    order: 2;
  }
  .content-layout.reversed .content-image {
    order: 1;
  }
}

/* --- Professional Link Hover State with Subtle Line --- */
.text-nav a,
.site-footer a {
  position: relative;
  text-decoration: none;
  transition: color 0.3s ease;
}

.text-nav a::after,
.site-footer a::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: var(--brand-primary, var(--blue));
  bottom: -5px;
  left: 0;
  transform: scaleX(0); /* Start hidden */
  transition: transform 0.3s ease;
}

.text-nav a:hover,
.site-footer a:hover {
  color: var(--brand-primary, var(--blue));
}

.text-nav a:hover::after,
.site-footer a:hover::after {
  transform: scaleX(1); /* Reveal on hover */
}

/* Ensure the 'active' link is always underlined */
.text-nav a.active::after {
  transform: scaleX(1);
}
/* ===============================
   BRAND SPECIFIC VISUAL FILTERS
================================= */

/* --- Harbor & Co (Finance: Blue/Cool) --- */
.page-harbor .bg-image {
    /* Subtle hue shift and saturation decrease for a professional, cool tone */
    filter: brightness(7.5) blur(5px) hue-rotate(5deg) saturate(1.1);
}

/* --- Cozance Food (Food: Warm/Earthy) --- */
.page-cozance .bg-image {
    /* Subtle sepia/warming filter for an appetizing, earthy feel */
    filter: brightness(7.5) blur(5px) sepia(0.25) saturate(1.2);
}

/* --- MWG Gas (Energy: Strong/Industrial) --- */
.page-mwg .bg-image {
    /* Slightly desaturated, strong contrast for a reliable, industrial feel */
    filter: brightness(7.5) blur(5px) contrast(1.1) grayscale(0.1);
}