/* ==========================================================================
   GEO HYDRAULICS — Wholesale & Distribution of Hydraulic Seals
   Shared stylesheet
   ========================================================================== */

:root{
  --navy: #0d2b45;
  --navy-deep: #081b2e;
  --blue: #145da0;
  --blue-bright: #1e88d6;
  --green: #0b6b3a;
  --green-deep: #084d29;
  --amber: #f2a20c;
  --amber-deep: #c9790a;
  --red: #c0392b;
  --steel-100: #f4f6f8;
  --steel-200: #e7ebef;
  --steel-300: #cfd8e0;
  --steel-600: #5b6b78;
  --steel-800: #2c3a45;
  --white: #ffffff;
  --ink: #16232c;
  --radius: 14px;
  --shadow-sm: 0 2px 10px rgba(13,43,69,0.08);
  --shadow-md: 0 10px 30px rgba(13,43,69,0.14);
  --shadow-lg: 0 20px 50px rgba(8,27,46,0.22);
  --maxw: 1180px;
  --font-head: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: .002em;
  line-height: 1.15;
  margin: 0 0 .5em;
  color: var(--navy);
  text-wrap: balance;
}
h2{ font-size: clamp(26px, 3vw, 36px); }
p{ margin: 0 0 1em; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
ul{ margin:0; padding:0; list-style: none; }
.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
.section{ padding: 84px 0; }
.section--tight{ padding: 56px 0; }
.section--alt{ background: var(--steel-100); }
.section--navy{
  position:relative; overflow:hidden; color: var(--white);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 42px),
              repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 42px),
              linear-gradient(160deg, var(--navy-deep), var(--navy) 60%, var(--blue) 130%);
}
.section--navy h2, .section--navy h3{ color: var(--white); }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber-deep);
  margin-bottom: 14px;
}
.eyebrow::before{
  content:""; width: 26px; height: 3px; background: var(--amber); border-radius: 2px; display:inline-block;
}
.section--navy .eyebrow{ color: var(--amber); }
.section-head{ max-width: 720px; margin-bottom: 44px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p{ color: var(--steel-600); font-size: 17px; }
.section--navy .section-head p{ color: #cfe0ef; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--amber); color: var(--navy-deep); box-shadow: var(--shadow-sm); }
.btn-primary:hover{ background: var(--amber-deep); box-shadow: var(--shadow-md); }
.btn-outline{ background: transparent; border-color: rgba(255,255,255,0.55); color: var(--white); }
.btn-outline:hover{ background: rgba(255,255,255,0.12); border-color: var(--white); }
.btn-dark{ background: var(--navy); color: var(--white); }
.btn-dark:hover{ background: var(--navy-deep); box-shadow: var(--shadow-md); }
.btn-ghost{ background: var(--steel-200); color: var(--navy); }
.btn-ghost:hover{ background: var(--steel-300); }
.btn-sm{ padding: 10px 20px; font-size: 13px; }
.btn-block{ width:100%; }

/* ---------- Header ---------- */
.topbar{
  background: var(--navy-deep);
  color: #cfe0ef;
  font-size: 13px;
}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:8px; padding-bottom:8px; flex-wrap: wrap; gap:8px;
}
.topbar a{ color:#cfe0ef; }
.topbar a:hover{ color: var(--amber); }
.topbar-links{ display:flex; gap:20px; flex-wrap: wrap; }
.topbar-links span{ display:inline-flex; align-items:center; gap:6px; }
.topbar-social{ display:flex; gap:14px; }
@media (max-width: 700px){ .hide-sm{ display:none; } }

header.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 rgba(13,43,69,0.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ width:48px; height:48px; flex-shrink:0; }
.brand-text .name{
  font-family: var(--font-head); font-weight:800; font-size: 22px; letter-spacing:.01em;
  color: var(--green); line-height:1;
}
.brand-text .tag{
  font-size: 11.5px; font-weight:600; color: var(--blue); letter-spacing:.03em; text-transform: uppercase;
}
.nav-links{ display:flex; align-items:center; gap:32px; }
.nav-links a{
  font-weight:600; font-size: 15px; color: var(--steel-800); padding: 6px 2px; position:relative;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:3px; background: var(--amber);
  transform: scaleX(0); transform-origin:left; transition: transform .2s ease; border-radius: 2px;
}
.nav-links a:hover::after, .nav-links a.active::after{ transform: scaleX(1); }
.nav-links a.active{ color: var(--navy); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;
}
.nav-toggle span{ width:26px; height:3px; background: var(--navy); border-radius:2px; }

@media (max-width: 900px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background: var(--white);
    flex-direction:column; align-items:flex-start; gap:0; padding: 8px 24px 20px;
    box-shadow: var(--shadow-md);
    transform-origin: top; transform: scaleY(0); opacity:0; pointer-events:none;
    transition: transform .18s ease, opacity .18s ease;
  }
  .nav-links.open{ transform: scaleY(1); opacity:1; pointer-events:auto; }
  .nav-links a{ padding: 12px 0; width:100%; border-bottom:1px solid var(--steel-200); }
  .nav-toggle{ display:flex; }
  .nav-cta .btn span.long{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background: radial-gradient(1100px 500px at 85% -10%, rgba(30,136,214,0.35), transparent 60%),
              repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 42px),
              repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 42px),
              linear-gradient(150deg, var(--navy-deep) 0%, var(--navy) 55%, var(--blue) 140%);
  color: var(--white);
  padding: 90px 0 110px;
}
/* Hazard-stripe accent — a small industrial signature used as a section divider */
.hazard-stripe{
  height:8px;
  background: repeating-linear-gradient(-45deg, var(--amber) 0 18px, var(--navy-deep) 18px 36px);
}
.hero .container{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items:center;
}
.hero-kicker{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(242,162,12,0.16); border:1px solid rgba(242,162,12,0.5);
  color: var(--amber); font-weight:700; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 16px; border-radius:999px; margin-bottom:22px;
}
.hero h1{
  color: var(--white); font-size: clamp(34px, 4.6vw, 56px); font-weight:700; margin-bottom:20px; letter-spacing: .01em;
}
.hero h1 em{ font-style:normal; color: var(--amber); }
.hero p.lead{ font-size:18px; color:#d7e6f2; max-width: 540px; margin-bottom: 30px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:40px; }
.hero-stats{ display:flex; gap:34px; flex-wrap:wrap; }
.hero-stats div{ min-width:120px; }
.hero-stats .num{ font-family: var(--font-head); font-weight:700; font-size:27px; color: var(--amber); }
.hero-stats .lbl{ font-size:13px; color:#bcd2e4; }
.hero-art{ position:relative; }
.hero-art svg{ width:100%; height:auto; filter: drop-shadow(0 25px 45px rgba(0,0,0,0.35)); }

/* ---------- Entrance + motion animations ---------- */
@keyframes fadeUp{ from{ opacity:0; transform: translateY(22px); } to{ opacity:1; transform:none; } }
.hero-copy > .hero-kicker{ animation: fadeUp .7s ease both; }
.hero-copy > h1{ animation: fadeUp .7s ease .1s both; }
.hero-copy > p.lead{ animation: fadeUp .7s ease .22s both; }
.hero-copy > .hero-actions{ animation: fadeUp .7s ease .34s both; }
.hero-copy > .hero-stats{ animation: fadeUp .7s ease .46s both; }
.hero-art{ animation: fadeUp .8s ease .2s both; }

@keyframes pistonStroke{
  0%, 100%{ transform: translateX(0); }
  50%{ transform: translateX(-26px); }
}
.piston-rod{ animation: pistonStroke 4.5s cubic-bezier(.65,0,.35,1) infinite; transform-origin: left center; }

@keyframes floatY{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
@keyframes spinSlow{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
.deco-float{ animation: floatY 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.deco-spin{ animation: spinSlow 14s linear infinite; transform-box: fill-box; transform-origin: center; }

@keyframes pulseRing{
  0%{ box-shadow: 0 10px 24px rgba(0,0,0,0.28), 0 0 0 0 rgba(37,211,102,0.55); }
  70%{ box-shadow: 0 10px 24px rgba(0,0,0,0.28), 0 0 0 14px rgba(37,211,102,0); }
  100%{ box-shadow: 0 10px 24px rgba(0,0,0,0.28), 0 0 0 0 rgba(37,211,102,0); }
}
.whatsapp-fab{ animation: pulseRing 2.6s ease-out infinite; }

@keyframes gradientPan{ 0%{ background-position: 0% 50%; } 100%{ background-position: 100% 50%; } }

/* ---------- Marquee strip ---------- */
.marquee-strip{
  background: var(--steel-100); border-top:1px solid var(--steel-200); border-bottom:1px solid var(--steel-200);
  padding: 20px 0; overflow: hidden;
}
.marquee-track{
  display:flex; gap:56px; width:max-content; align-items:center;
  animation: marqueeScroll 26s linear infinite;
}
.marquee-strip:hover .marquee-track{ animation-play-state: paused; }
@keyframes marqueeScroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.marquee-item{ display:flex; align-items:center; gap:10px; font-weight:700; color: var(--steel-800); font-size:14.5px; white-space:nowrap; }
.marquee-item svg{ width:22px; height:22px; flex-shrink:0; color: var(--green); }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation: none; flex-wrap:wrap; } }

/* ---------- Cards ---------- */
.grid{ display:grid; gap: 28px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.card{
  background: var(--white); border:1px solid var(--steel-200); border-radius: var(--radius);
  padding: 30px 26px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  height:100%;
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.card-icon{
  width:64px; height:64px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(145deg, var(--steel-100), var(--steel-200)); margin-bottom:20px;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}
.card-icon svg{ width:34px; height:34px; transition: transform .35s ease; }
.card:hover .card-icon{ transform: rotate(-8deg) scale(1.08); background: linear-gradient(145deg, var(--amber), var(--amber-deep)); }
.card:hover .card-icon svg{ stroke:#fff; transform: scale(1.05); }

/* Stagger the reveal of grid children for a livelier scroll-in */
.grid > *:nth-child(1){ transition-delay: 0s; }
.grid > *:nth-child(2){ transition-delay: .08s; }
.grid > *:nth-child(3){ transition-delay: .16s; }
.grid > *:nth-child(4){ transition-delay: .24s; }
.card h3{ font-size:19px; margin-bottom:10px; }
.card p{ color: var(--steel-600); font-size:15px; margin-bottom:0; }
.card .learn{ margin-top:16px; font-weight:700; font-size:14px; color: var(--blue); display:inline-flex; align-items:center; gap:6px; }

.product-card{ display:flex; flex-direction:column; }
.product-card .tag-pill{
  align-self:flex-start; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  background: rgba(11,107,58,0.1); color: var(--green); padding:5px 12px; border-radius:999px; margin-bottom:14px;
}
.product-card ul{ margin-top:14px; }
.product-card ul li{
  font-size:14px; color: var(--steel-800); padding: 5px 0 5px 22px; position:relative;
}
.product-card ul li::before{
  content:""; position:absolute; left:0; top:11px; width:8px; height:8px; border-radius:50%; background: var(--amber);
}
.product-card .card-foot{ margin-top:auto; padding-top:18px; display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- Why / features ---------- */
.feature-row{ display:flex; gap:20px; align-items:flex-start; padding:22px 0; border-bottom:1px solid rgba(255,255,255,0.12); }
.feature-row:last-child{ border-bottom:none; }
.feature-num{
  font-family: var(--font-head); font-weight:800; font-size:22px; color: var(--amber);
  width:48px; height:48px; border-radius:12px; border:2px solid rgba(242,162,12,0.5);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.feature-row h4{ color:var(--white); font-size:17px; margin-bottom:6px; }
.feature-row p{ color:#c9dbe9; font-size:14.5px; margin:0; }

.split{ display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center; }
@media (max-width: 900px){ .split{ grid-template-columns: 1fr; gap:36px; } }
.check-list li{
  display:flex; gap:12px; align-items:flex-start; padding:9px 0; font-size:15.5px; color:var(--steel-800);
}
.check-list svg{ width:20px; height:20px; flex-shrink:0; color: var(--green); margin-top:2px; }

/* ---------- CTA banner ---------- */
.cta-banner{
  background: linear-gradient(120deg, var(--green-deep), var(--green) 45%, var(--blue) 85%, var(--green-deep));
  background-size: 260% 260%;
  animation: gradientPan 9s ease-in-out infinite alternate;
  color: var(--white); border-radius: 24px; padding: 54px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  box-shadow: var(--shadow-lg);
}
.cta-banner h2{ color:var(--white); font-size: clamp(22px,3vw,30px); margin-bottom:8px; }
.cta-banner p{ color:#d7ecdf; margin:0; max-width:480px; }
.cta-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- Testimonials ---------- */
.quote-card{
  background: var(--white); border-radius: var(--radius); padding:28px; box-shadow: var(--shadow-sm);
  border:1px solid var(--steel-200);
}
.quote-card .stars{ color: var(--amber); font-size:16px; letter-spacing:2px; margin-bottom:12px; }
.quote-card p.msg{ color: var(--steel-800); font-style: italic; }
.quote-card .who{ display:flex; align-items:center; gap:12px; margin-top:16px; }
.avatar{
  width:44px; height:44px; border-radius:50%; background: linear-gradient(135deg, var(--blue), var(--navy));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-family:var(--font-head);
}
.who .role{ font-size:13px; color: var(--steel-600); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 42px),
              repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 42px),
              linear-gradient(150deg, var(--navy-deep), var(--navy) 70%, var(--blue) 150%);
  color: var(--white); padding: 64px 0 74px; position:relative; overflow:hidden;
}
.page-hero .container{ position:relative; z-index:2; }
.breadcrumb{ font-size:13px; color:#bcd2e4; margin-bottom:14px; display:flex; gap:8px; align-items:center; }
.breadcrumb a:hover{ color: var(--amber); }
.page-hero h1{ color:var(--white); font-size: clamp(28px,4vw,42px); margin-bottom:12px; }
.page-hero p{ color:#d7e6f2; max-width:620px; font-size:16.5px; margin:0; }
.page-hero-deco{ position:absolute; right:-60px; top:-60px; opacity:.14; width:340px; z-index:1; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items:flex-start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info-card{
  background: var(--navy-deep); color:#fff; border-radius: var(--radius); padding:34px; box-shadow: var(--shadow-md);
}
.contact-info-card h3{ color:#fff; }
.contact-line{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid rgba(255,255,255,0.12); }
.contact-line:last-child{ border-bottom:none; }
.contact-line svg{ width:22px; height:22px; color: var(--amber); flex-shrink:0; margin-top:3px; }
.contact-line a:hover{ color: var(--amber); }
.contact-line .lbl{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#9fbcd3; margin-bottom:3px; }

.form-card{
  background: var(--white); border:1px solid var(--steel-200); border-radius: var(--radius); padding: 34px;
  box-shadow: var(--shadow-sm);
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13.5px; font-weight:700; color: var(--steel-800); margin-bottom:7px; }
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px; border-radius:10px; border:1.5px solid var(--steel-300); font-family: inherit;
  font-size:15px; color: var(--ink); background: var(--steel-100); transition: border-color .15s ease, background .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--blue); background: var(--white);
}
.field textarea{ resize:vertical; min-height:120px; }
.map-wrap{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); border:1px solid var(--steel-200); margin-top:28px; }
.map-wrap iframe{ width:100%; height:340px; border:0; display:block; }

/* ---------- Footer ---------- */
footer.site-footer{ background: var(--navy-deep); color:#b8ccdc; padding-top: 60px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.1); }
@media (max-width:900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-grid h4{ color:#fff; font-size:15px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:18px; }
.footer-grid ul li{ padding:7px 0; font-size:14.5px; }
.footer-grid ul li a:hover{ color: var(--amber); }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.footer-brand .name{ font-family: var(--font-head); font-weight:800; font-size:20px; color:#fff; }
.footer-about p{ font-size:14.5px; color:#a9c1d3; max-width:320px; }
.footer-social{ display:flex; gap:12px; margin-top:16px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center;
  transition: background .15s ease;
}
.footer-social a:hover{ background: var(--amber); color: var(--navy-deep); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:22px 0; font-size:13px; flex-wrap:wrap; gap:10px; }
.footer-bottom a:hover{ color: var(--amber); }

.whatsapp-fab{
  position:fixed; bottom:26px; right:26px; z-index:200;
  width:60px; height:60px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 24px rgba(0,0,0,0.28);
  transition: transform .18s ease;
}
.whatsapp-fab:hover{ transform: scale(1.08); }
.whatsapp-fab svg{ width:30px; height:30px; }

/* Reveal-on-scroll is progressive enhancement: content is visible by default
   (opacity:1) so it never depends on JavaScript running. JS only adds the
   ".pre" class to animate elements in as they scroll into view. */
.reveal{ transition: opacity .6s ease, transform .6s ease; }
.reveal.pre{ opacity:0; transform: translateY(18px); }
.reveal.in{ opacity:1; transform:none; }

@media (max-width: 900px){
  .hero .container{ grid-template-columns: 1fr; }
  .hero-art{ order:-1; max-width:360px; margin: 0 auto 12px; }
}