/* G30Solutions corporate website */

:root {
  --navy: #064889;
  --deep-navy: #05345f;
  --teal: #129fb0;
  --teal-dark: #087f8e;
  --grey: #56616d;
  --light-grey: #f5f8fb;
  --border: #d9e5ed;
  --white: #ffffff;
  --ink: #17232e;
  --success: #137c4b;
  --error: #a83232;
  --shadow: 0 12px 28px rgba(5, 52, 95, 0.1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: "Montserrat", Arial, sans-serif; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.brand { display: inline-flex; align-items: center; }
.site-logo { width: 248px; height: auto; max-height: 78px; object-fit: contain; }
.footer-logo { width: 238px; height: auto; background: var(--white); border-radius: 8px; padding: 10px; margin-bottom: 18px; }

.hidden-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px); }
.nav { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.main-nav { display: flex; align-items: center; gap: 25px; }
.main-nav a { font-size: 14px; font-weight: 800; color: var(--deep-navy); }
.header-button { background: var(--navy); color: var(--white); padding: 12px 18px; border-radius: 6px; font-size: 14px; font-weight: 900; box-shadow: 0 10px 24px rgba(0,59,115,.18); }
.menu-toggle { display:none; width:46px; height:42px; border:1px solid var(--border); border-radius:8px; background:var(--white); padding:9px; cursor:pointer; }
.menu-toggle span { display:block; height:3px; margin:5px 0; background:var(--deep-navy); border-radius:999px; }

h1,h2,h3 { font-family: "Exo 2","Montserrat",Arial,sans-serif; color: var(--deep-navy); letter-spacing: 0; line-height: 1.08; }
h1 { margin:0; font-size: clamp(42px,6.4vw,74px); font-weight:900; }
h2 { margin:0; font-size: clamp(32px,4.1vw,52px); font-weight:900; }
h3 { margin:0; font-size: 24px; font-weight:900; }
p { color: var(--grey); margin:0; }
.section { padding: 92px 0; }

.section-label, .eyebrow {
  display:inline-flex; align-items:center; color:var(--teal-dark);
  font-weight:900; font-size:14px; letter-spacing:.03em; text-transform:uppercase; margin-bottom:18px;
}
.section-label::after, .eyebrow::after {
  content:""; width:68px; height:3px; background:var(--teal); margin-left:16px; border-radius:999px;
}
.section-label.light { color:#c9f7ff; }

.button {
  display:inline-flex; align-items:center; justify-content:center; border-radius:6px; padding:15px 24px;
  font-weight:900; border:none; cursor:pointer; min-height:52px;
}
.button.primary { background:var(--navy); color:var(--white); box-shadow: 0 16px 30px rgba(0,59,115,.2); }
.button.secondary { background:var(--white); color:var(--deep-navy); border:2px solid var(--border); }
button:disabled, .button:disabled { cursor:not-allowed; opacity:.48; box-shadow:none; }

.hero { position:relative; overflow:hidden; background: linear-gradient(135deg,#ffffff 0%,#f7fbfd 54%,#e8f4f8 100%); padding:96px 0 76px; }
.hero-corner {
  position:absolute; top:-80px; right:-120px; width:560px; height:290px;
  background: linear-gradient(135deg, transparent 0 24%, rgba(18,159,176,.3) 24% 39%, transparent 39% 100%),
              linear-gradient(135deg, transparent 0 46%, rgba(6,72,137,.42) 46% 65%, transparent 65% 100%);
  opacity:.75;
}
.hero-grid { position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:58px; align-items:center; }
.lead { max-width:720px; margin-top:26px; font-size:18px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero-metrics { margin-top:42px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.hero-metrics div { background:var(--white); border:1px solid var(--border); border-radius:8px; padding:20px; box-shadow: 0 10px 28px rgba(0,59,115,.06); }
.hero-metrics strong { display:block; color:var(--deep-navy); font-family:"Exo 2"; font-size:22px; font-weight:900; }
.hero-metrics span { display:block; margin-top:5px; color:var(--grey); font-size:13px; font-weight:700; }

.photo-frame {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  box-shadow: var(--shadow);
}
.photo-frame img {
  width: 100%;
  border-radius: 6px;
  object-fit: contain;
  background: var(--white);
  min-height: 500px;
  max-height: 620px;
}

.positioning-band { background:var(--deep-navy); color:var(--white); padding:56px 0; }
.positioning-grid { display:grid; grid-template-columns:.95fr 1.05fr; gap:50px; align-items:center; }
.positioning-band h2 { color:var(--white); }
.positioning-band p { color: rgba(255,255,255,.82); font-size:17px; }

.capability-strip { background: var(--white); padding: 38px 0; border-bottom: 1px solid var(--border); }
.capability-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.capability-card { border:1px solid var(--border); border-radius:8px; padding:24px; background:var(--white); box-shadow:0 10px 22px rgba(5,52,95,.05); }
.capability-card span { display:block; color:var(--teal-dark); font-family:"Exo 2"; font-size:14px; font-weight:900; margin-bottom:12px; }
.capability-card p { margin-top:10px; }

.about-grid, .quote-grid, .contact-card { display:grid; grid-template-columns:1.05fr .95fr; gap:58px; align-items:start; }
.about-grid p { margin-top:20px; font-size:17px; }
.values-panel { display:grid; gap:18px; }
.value-box { background:var(--light-grey); border:1px solid var(--border); border-left:6px solid var(--teal); border-radius:8px; padding:28px; }
.value-box h3 { margin-bottom:12px; }
.value-tags { display:flex; flex-wrap:wrap; gap:10px; }
.value-tags span, .panel-chip {
  background:var(--white); border:1px solid var(--border); border-radius:6px; padding:10px 14px;
  color:var(--deep-navy); font-weight:800; font-size:14px;
}

.products { background: var(--white); }
.section-heading { text-align:center; max-width:840px; }
.section-heading .section-label { justify-content:center; }
.section-heading p { margin-top:20px; font-size:17px; }

.product-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:52px; }
.product-card { background:var(--white); border:1px solid var(--border); border-radius:8px; padding:30px; box-shadow: 0 14px 36px rgba(0,59,115,.07); }
.product-card.wide { grid-column:1 / -1; }
.number {
  width:54px; height:54px; display:grid; place-items:center; background:linear-gradient(135deg,var(--navy),var(--teal));
  color:var(--white); border-radius:8px; font-family:"Exo 2"; font-weight:900; margin-bottom:24px;
}
.product-card p { margin-top:14px; }
.product-card ul { display:grid; gap:10px; margin:22px 0 0; padding:0; list-style:none; }
.product-card li { position:relative; padding-left:22px; color:var(--grey); font-weight:700; }
.product-card li::before {
  content:""; width:9px; height:9px; background:var(--teal); border-radius:50%; position:absolute; left:0; top:10px;
}

.quote { background:linear-gradient(135deg, rgba(0,59,115,.96), rgba(7,139,155,.94)); color:var(--white); }
.quote h2, .quote .section-label { color:var(--white); }
.quote p { color: rgba(255,255,255,.84); margin-top:20px; font-size:17px; }
.quote-form {
  background:var(--white); border-radius:8px; padding:32px; display:grid; grid-template-columns:repeat(2,1fr);
  gap:18px; box-shadow:var(--shadow);
}
.quote-form label { display:grid; gap:8px; color:var(--deep-navy); font-weight:900; font-size:14px; }
.quote-form input, .quote-form textarea {
  width:100%; border:1px solid #cfe2ec; border-radius:6px; padding:14px 15px; font:inherit; color:var(--ink); outline:none; background:#fbfdfe;
}
.quote-form input:focus, .quote-form textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(18,159,176,.16); }
.full { grid-column:1 / -1; }
.form-alert { border-radius:6px; padding:14px 16px; font-size:14px; font-weight:800; }
.form-alert.error { background:#fff4f4; border:1px solid #e7b9b9; color:var(--error); }
.form-alert.success { background:#f2fbf6; border:1px solid #b7dfc8; color:var(--success); }
.captcha-panel { background:#f4f8fb; border:1px solid #dceaf2; border-radius:8px; padding:18px; }
.captcha-title { display:block; color:var(--deep-navy); font-weight:900; margin-bottom:6px; }
.captcha-panel p { color:var(--grey); font-size:14px; }
.captcha-input-row { display:grid; grid-template-columns:1fr auto; gap:10px; margin-top:14px; }
.captcha-button { border:none; border-radius:6px; padding:0 18px; background:var(--deep-navy); color:var(--white); font-weight:900; cursor:pointer; }
.captcha-status { margin-top:10px !important; font-size:13px !important; font-weight:700; }
.captcha-status.success { color: var(--success) !important; }
.captcha-status.error { color: var(--error) !important; }
.form-note { grid-column:1 / -1; color:var(--grey) !important; font-size:12px !important; margin:0 !important; }

.contact-card {
  align-items:center; background:var(--light-grey); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:44px 0;
}
.contact-card p { margin-top:20px; font-size:17px; }
.contact-details { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.contact-details a, .contact-link {
  background:var(--white); border:1px solid var(--border); border-radius:22px; padding:22px; color:var(--deep-navy);
  font-weight:900; box-shadow: 0 10px 25px rgba(0,59,115,.05);
}
.contact-details a, .contact-link { border-radius:8px; }
.contact-details span { display:block; color:var(--teal-dark); font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }

.site-footer { background:var(--deep-navy); color:var(--white); padding:54px 0 22px; }
.footer-grid { display:grid; grid-template-columns:1.5fr .75fr .9fr; gap:44px; }
.footer-grid p, .footer-grid a, .footer-contact { color: rgba(255,255,255,.76); }
.footer-grid h3 { color:var(--white); font-size:20px; margin-bottom:18px; }
.footer-grid a, .footer-contact { display:block; margin-top:10px; font-weight:700; }
.footer-bottom { margin-top:40px; padding-top:20px; border-top:1px solid rgba(255,255,255,.18); }
.footer-bottom p { color: rgba(255,255,255,.62); font-size:14px; }

@media (max-width: 1080px) {
  .site-logo { width:220px; }
  .header-button { display:none; }
  .main-nav { gap:18px; }
}

@media (max-width: 900px) {
  .menu-toggle { display:block; }
  .main-nav {
    display:none; position:absolute; top:96px; left:0; right:0; background:var(--white); border-bottom:1px solid var(--border);
    padding:18px 20px; box-shadow: var(--shadow);
  }
  .main-nav.open { display:grid; gap:14px; }

  .hero-grid, .capability-grid, .positioning-grid, .about-grid, .quote-grid, .contact-card, .footer-grid {
    grid-template-columns: 1fr;
  }

  .hero-metrics, .product-grid, .contact-details { grid-template-columns:1fr; }
}

@media (max-width: 620px) {
  .container { width: min(100% - 28px, 1180px); }
  .site-logo { width:190px; max-height:70px; }
  .section { padding:72px 0; }
  .hero-actions { display:grid; }
  .quote-form { grid-template-columns:1fr; padding:24px; }
  .captcha-input-row { grid-template-columns:1fr; }
  .captcha-button { min-height:46px; }
  .photo-frame img { min-height: 360px; }
}