/* =========================================================
   Iberel Inc. — Site Stylesheet (v3, brand-true palette)
   Brand: Logo Blue #105ca9 -> #2f8dff, Logo Red #d52027 -> #8f1116
   Headings: Sora | Body: Manrope
   ========================================================= */

:root {
  --blue: #105ca9;
  --blue-light: #2f8dff;
  --navy: #051225;
  --navy-2: #0a1f3d;
  --red: #d52027;
  --red-dark: #8f1116;
  --red-light: #ff5b60;
  --ink: #10172a;
  --gray: #5b6472;
  --gray-light: #8891a0;
  --bg: #f7f8fc;
  --bg-panel: #eef1fb;
  --border: #e3e7f3;
  --white: #ffffff;

  --grad-brand: linear-gradient(120deg, var(--blue) 0%, var(--blue-light) 45%, var(--navy-2) 100%);
  --grad-brand-deep: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 45%, #133a72 100%);
  --grad-accent: linear-gradient(120deg, var(--red) 0%, var(--red-dark) 100%);
  --grad-accent-bright: linear-gradient(120deg, var(--red-light) 0%, var(--red) 60%, #ff8184 100%);
  --grad-mesh: radial-gradient(circle at 15% 20%, rgba(16,92,169,0.5), transparent 40%),
               radial-gradient(circle at 85% 15%, rgba(213,32,39,0.45), transparent 45%),
               radial-gradient(circle at 60% 90%, rgba(47,141,255,0.5), transparent 45%);

  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 20px 45px rgba(10, 31, 61, 0.12);
  --shadow-sm: 0 8px 24px rgba(10, 31, 61, 0.08);
  --glow-blue: 0 12px 30px rgba(16, 92, 169, 0.35);
  --glow-red: 0 12px 30px rgba(213, 32, 39, 0.35);
  --maxw: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}

img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
ul { margin: 0; padding: 0; }
li { list-style: none; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  font-family: "Sora", "Manrope", Arial, sans-serif;
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(30px, 4.4vw, 48px); font-weight: 800; }
h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; }
h3 { font-size: 21px; }
p { margin: 0 0 16px; color: var(--gray); }

.grad-text {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-size: 12.5px;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 3px;
  background: var(--grad-brand);
  display: inline-block;
}

.section { padding: 88px 0; }
.section-tight { padding: 52px 0; }
.section-alt { background: var(--bg-panel); }
.section-navy {
  background: var(--grad-brand-deep);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.section-navy h1, .section-navy h2, .section-navy h3 { color: var(--white); }
.section-navy p { color: rgba(255,255,255,0.82); }

.section-head { max-width: 720px; margin: 0 0 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 15px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(.2,.8,.2,1);
  font-family: "Sora", sans-serif;
}
.btn-primary {
  background: var(--grad-brand);
  color: var(--white);
  box-shadow: var(--glow-blue);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(16,92,169,0.45); }
.btn-accent {
  background: var(--grad-accent);
  color: var(--white);
  box-shadow: var(--glow-red);
}
.btn-accent:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(213,32,39,0.45); }
.btn-outline {
  background: rgba(255,255,255,0.06);
  color: var(--white);
  border-color: rgba(255,255,255,0.5);
  backdrop-filter: blur(6px);
}
.btn-outline:hover { background: rgba(255,255,255,0.18); border-color: var(--white); transform: translateY(-3px); }
.btn-outline-blue {
  background: transparent;
  color: var(--blue);
  border-color: var(--blue);
}
.btn-outline-blue:hover { background: var(--grad-brand); color: var(--white); border-color: transparent; transform: translateY(-3px); }
.btn-white {
  background: var(--white);
  color: var(--blue);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}
.btn-white:hover { transform: translateY(-3px); }
.btn-blue {
  background: var(--grad-brand);
  color: var(--white);
  box-shadow: var(--glow-blue);
}
.btn-blue:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(16,92,169,0.45); }

/* ---------- Event Announcement Banner ---------- */
.event-banner {
  background: linear-gradient(120deg, var(--blue) 0%, var(--navy-2) 55%, var(--blue-light) 100%);
  color: var(--white);
  position: relative;
  z-index: 101;
}
.event-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 10px 24px;
  text-align: center;
}
.event-banner-text {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.95);
}
.event-banner-text strong { font-family: "Sora", sans-serif; font-weight: 800; }
.event-banner-badge {
  position: relative;
  display: inline-block;
  overflow: hidden;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  margin-right: 10px;
  vertical-align: middle;
}
.event-banner-badge::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.75) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  animation: badgeShine 2.8s ease-in-out infinite;
}
@keyframes badgeShine {
  0% { left: -60%; }
  35% { left: 130%; }
  100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .event-banner-badge::after { animation: none; }
}
.event-banner-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.event-banner-cta {
  background: var(--white);
  color: var(--navy-2);
  font-weight: 800;
  font-family: "Sora", sans-serif;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 100px;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}
.event-banner-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.25); }

@media (max-width: 760px) {
  .event-banner-inner { padding: 10px 18px; }
  .event-banner-text { font-size: 13px; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  /* Higher than .event-banner's z-index (101): .site-header establishes its
     own stacking context (position + z-index), so the fixed off-canvas
     .main-nav nested inside it is capped at this value too — it needs to
     out-rank the banner or the banner paints over the open mobile nav. */
  z-index: 150;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.topbar {
  background: var(--grad-brand-deep);
  color: rgba(255,255,255,0.88);
  font-size: 13px;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 9px;
  padding-bottom: 9px;
  flex-wrap: wrap;
  gap: 6px;
}
.topbar a { color: rgba(255,255,255,0.88); }
.topbar-item { display: inline-flex; align-items: center; gap: 6px; margin-right: 18px; font-weight: 500; }
.topbar-right a { margin-left: 14px; font-weight: 700; }
.topbar-right { display: flex; align-items: center; }

.navwrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 46px; width: auto; }

.main-nav ul { display: flex; align-items: center; gap: 2px; }
.main-nav a {
  display: inline-block;
  padding: 10px 16px;
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  border-radius: 100px;
  transition: color .2s, background .2s;
  font-family: "Sora", sans-serif;
}
.main-nav a:hover { color: var(--blue); background: var(--bg-panel); }
.main-nav li.active a { color: var(--white); background: var(--grad-brand); }

.nav-cta { margin-left: 10px; }
.nav-cta a {
  background: var(--grad-accent);
  color: var(--white) !important;
  padding: 11px 22px;
  box-shadow: var(--glow-red);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.nav-cta a:hover {
  background: var(--grad-accent);
  color: var(--white) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(213, 32, 39, 0.45);
}

.menu-toggle {
  display: none;
  position: relative;
  width: 30px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 210;
}
.menu-toggle-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: var(--navy);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s ease, top .3s cubic-bezier(.2,.8,.2,1);
}
.menu-toggle-bar:nth-child(1) { top: 0; }
.menu-toggle-bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.menu-toggle-bar:nth-child(3) { top: 100%; transform: translateY(-100%); }

/* Morph into an X when the mobile nav is open */
.menu-toggle.active .menu-toggle-bar:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.menu-toggle.active .menu-toggle-bar:nth-child(2) { opacity: 0; }
.menu-toggle.active .menu-toggle-bar:nth-child(3) { top: 50%; transform: translateY(-50%) rotate(-45deg); }

/* ---------- Hero ---------- */
/* Hero + the stats strip beneath it span the full screen width instead of
   being capped at the site's usual 1200px container. */
.hero .container,
.hero-strip .container {
  max-width: 100%;
}
.hero {
  position: relative;
  background:
    linear-gradient(120deg, rgba(5,18,37,0.86) 0%, rgba(10,31,61,0.74) 55%, rgba(5,18,37,0.82) 100%),
    url('../images/iberel_hero_banner.jpg') center center / cover no-repeat;
  color: var(--white);
  overflow: hidden;
  padding: 110px 0 130px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-mesh);
  opacity: 0.55;
  mix-blend-mode: screen;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  opacity: 0.55;
  pointer-events: none;
  animation: float 9s ease-in-out infinite;
}
.blob-1 { width: 220px; height: 220px; background: var(--grad-brand); top: -40px; right: 10%; animation-delay: 0s; }
.blob-2 { width: 160px; height: 160px; background: var(--blue-light); bottom: 20px; right: 28%; opacity: 0.35; animation-delay: 2s; }
.blob-3 { width: 130px; height: 130px; background: var(--blue-light); top: 40%; left: -30px; opacity: 0.4; animation-delay: 4s; }

@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); }
  50% { transform: translateY(-24px) translateX(10px) scale(1.06); }
}

.hero-inner { position: relative; z-index: 2; max-width: 800px; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 22px;
  backdrop-filter: blur(6px);
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(213,32,39,0.25); }
.hero h1 { color: var(--white); }
.hero h1 .grad-text {
  background: var(--grad-accent-bright);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.45));
}
.hero p.lead { font-size: 19px; color: rgba(255,255,255,0.85); max-width: 560px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }

.hero-strip {
  margin-top: -64px;
  position: relative;
  z-index: 3;
}
.hero-strip .container {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
}
.hero-strip .stat {
  padding: 30px 20px;
  text-align: center;
  border-right: 1px solid var(--border);
  position: relative;
}
.hero-strip .stat:last-child { border-right: none; }
.hero-strip .stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-brand);
}
.hero-strip .stat:nth-child(2)::before { background: linear-gradient(120deg, var(--blue-light), var(--blue)); }
.hero-strip .stat:nth-child(3)::before { background: linear-gradient(120deg, var(--navy-2), var(--blue-light)); }
.hero-strip .stat:nth-child(4)::before { background: linear-gradient(120deg, var(--navy), var(--blue)); }
.hero-strip .stat strong {
  display: block;
  font-family: "Sora", sans-serif;
  font-size: 32px;
  color: var(--navy);
  font-weight: 800;
}
.hero-strip .stat span { font-size: 12.5px; color: var(--gray); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }

/* Inner page hero (smaller) */
.page-hero {
  background: var(--grad-brand-deep);
  color: var(--white);
  padding: 76px 0 84px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-mesh);
  opacity: 0.75;
  mix-blend-mode: screen;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: var(--white); margin-bottom: 10px; }
.breadcrumb { color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 600; }
.breadcrumb a { color: rgba(255,255,255,0.92); font-weight: 700; }
.breadcrumb span { color: var(--blue-light); margin: 0 8px; }

/* ---------- Cards / Grids ---------- */
.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); }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 28px;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.card:hover::before { transform: scaleX(1); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.card .icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--grad-brand);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 20px;
  font-weight: 800;
  font-family: "Sora", sans-serif;
  box-shadow: var(--glow-blue);
}
.grid-4 .card:nth-child(2) .icon,
.grid-3 .card:nth-child(2) .icon { background: linear-gradient(120deg, var(--blue-light), var(--blue)); box-shadow: var(--glow-blue); }
.grid-4 .card:nth-child(3) .icon { background: linear-gradient(120deg, var(--navy-2), var(--blue-light)); box-shadow: 0 12px 30px rgba(10,31,61,0.35); }
.grid-4 .card:nth-child(4) .icon { background: linear-gradient(120deg, var(--navy), var(--blue)); box-shadow: var(--glow-blue); }
.card h3 { margin-bottom: 10px; }
.card p { margin-bottom: 6px; }
.card a.card-link { font-weight: 800; color: var(--blue); font-family: "Sora", sans-serif; }
.card a.card-link:hover { color: var(--blue-light); }

.service-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  padding: 60px 0;
  border-bottom: 1px solid var(--border);
}
.service-block:last-child { border-bottom: none; }
.service-block.reverse .service-media { order: 2; }
.service-media {
  background: var(--grad-brand-deep);
  border-radius: var(--radius);
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.95);
  font-family: "Sora", sans-serif;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.service-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-mesh);
  opacity: 0.8;
  mix-blend-mode: screen;
}
.service-media span { position: relative; z-index: 2; }
.service-media-icon {
  position: relative;
  z-index: 2;
  width: 108px;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.95);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.25));
}
.service-media-icon svg { width: 100%; height: 100%; display: block; }
.service-media span.tag {
  position: absolute;
  bottom: 18px;
  left: 18px;
  z-index: 2;
  font-size: 13px;
  background: rgba(255,255,255,0.15);
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
.service-list { margin-top: 16px; }
.service-list li {
  padding-left: 28px;
  position: relative;
  margin-bottom: 12px;
  color: var(--gray);
  font-weight: 500;
}
.service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 11px;
  height: 11px;
  background: var(--grad-brand);
  border-radius: 4px;
  transform: rotate(45deg);
}

.expertise-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
.expertise-item:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.expertise-item .head {
  background: var(--grad-brand-deep);
  color: var(--white);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.expertise-item .head h3 { color: var(--white); }
.expertise-item .head .num {
  font-family: "Sora", sans-serif;
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(120deg, var(--blue-light), #8fc1ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  min-width: 44px;
}
.expertise-item .body { padding: 26px 28px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.tag-row span {
  background: var(--bg-panel);
  color: var(--navy-2);
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
}

.quote-block {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 5px solid;
  border-image: var(--grad-brand) 1;
  padding: 24px 28px;
  border-radius: var(--radius-sm);
  font-style: italic;
  color: var(--navy-2);
  font-size: 17px;
  box-shadow: var(--shadow-sm);
}

.cta-band {
  background: var(--grad-brand);
  color: var(--white);
  padding: 64px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 0%, rgba(255,255,255,0.25), transparent 50%);
}
.cta-band .container { position: relative; z-index: 2; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,0.92); max-width: 620px; margin-left: auto; margin-right: auto; }

/* ---------- Timeline (About) ---------- */
.timeline { position: relative; padding-left: 32px; border-left: 3px solid var(--border); }
.timeline-item { position: relative; padding-bottom: 36px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -40px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--grad-brand);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 3px rgba(16,92,169,0.3);
}
.timeline-item strong { color: var(--navy-2); display: block; margin-bottom: 4px; font-size: 17px; font-family: "Sora", sans-serif; }

.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.value-card {
  text-align: center;
  padding: 30px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); }
.value-card .num {
  font-family: "Sora", sans-serif;
  font-size: 36px;
  font-weight: 800;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.value-card .lbl { font-size: 12.5px; color: var(--gray); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }

/* ---------- Contact ---------- */
.contact-form-wrap {
  max-width: 700px;
  margin: 0 auto 48px;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
}
.contact-info-card {
  background: var(--grad-brand-deep);
  color: var(--white);
  border-radius: var(--radius);
  padding: 36px;
  position: relative;
  overflow: hidden;
}
.contact-info-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-mesh);
  opacity: 0.6;
  mix-blend-mode: screen;
}
.contact-info-card > * { position: relative; z-index: 2; }
.contact-row { display: flex; gap: 16px; margin-bottom: 24px; align-items: flex-start; }
.contact-row:last-child { margin-bottom: 0; }
.contact-row .icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; flex-shrink: 0;
  backdrop-filter: blur(4px);
}
.contact-row h4 { margin: 0 0 4px; color: var(--white); font-size: 16px; }
.contact-row p { margin: 0; color: rgba(255,255,255,0.82); }
.contact-row a { color: var(--white); font-weight: 700; }

form.contact-form {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow-sm);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; color: var(--navy-2); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  background: var(--bg);
  transition: border-color .2s ease, background .2s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--white);
}
.form-note { font-size: 13px; color: var(--gray-light); margin-top: 10px; }
.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.map-embed iframe { width: 100%; height: 340px; border: 0; display: block; }

.alert-success {
  background: linear-gradient(120deg, #12b76a, #0e9f5f);
  color: var(--white);
  padding: 15px 20px;
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
  font-weight: 700;
  /* Keeps the banner clear of the sticky header when scrolled/focused into
     view after a form submission (see main.js). */
  scroll-margin-top: 110px;
  outline: none;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.72);
  padding-top: 64px;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-brand);
}
.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);
}
.footer-grid h4 { color: var(--white); font-size: 16px; margin-bottom: 20px; font-family: "Sora", sans-serif; }
.footer-grid p { color: rgba(255,255,255,0.65); }
.footer-logo-chip {
  display: inline-flex;
  align-items: center;
  background: var(--white);
  padding: 10px 16px;
  border-radius: 12px;
  margin-bottom: 18px;
}
.footer-brand img { height: 34px; }
.footer-links li { margin-bottom: 11px; }
.footer-links a { color: rgba(255,255,255,0.7); font-weight: 500; }
.footer-links a:hover { color: var(--blue-light); }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 12px;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--white); font-size: 14px; font-weight: 800;
  transition: background .2s ease, transform .2s ease;
}
.footer-social a:hover { background: var(--grad-brand); transform: translateY(-3px); }
.footer-bottom {
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  flex-wrap: wrap;
  gap: 10px;
}
.footer-bottom a { color: rgba(255,255,255,0.65); }

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }

/* ---------- Responsive ---------- */
/* Compact the hero on laptop-sized viewports so it (and its CTAs) fit
   without needing a scroll on shorter screens, without affecting large
   desktop monitors. */
@media (max-width: 1440px) {
  .hero { padding: 72px 0 92px; }
  .hero-badge { margin-bottom: 16px; }
  .hero h1 { font-size: clamp(28px, 3.6vw, 40px); }
  .hero p.lead { font-size: 17px; }
  .hero-actions { margin-top: 22px; }
}

/* Extra safety net for short-but-wide windows (common on 13"-14" laptops) */
@media (max-height: 820px) {
  .hero { padding: 52px 0 70px; }
  .hero-badge { margin-bottom: 12px; }
  .hero-actions { margin-top: 18px; }
}

@media (max-width: 980px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .hero-strip .container { grid-template-columns: repeat(2, 1fr); }
  .hero-strip .stat:nth-child(2) { border-right: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .service-block { grid-template-columns: 1fr; }
  .service-block.reverse .service-media { order: 0; }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .topbar-item:first-child { display: none; }
  /* backdrop-filter on .site-header creates a containing block for fixed-
     position descendants in most browsers, which breaks the off-canvas
     nav below (it ends up positioned relative to the header instead of
     the viewport, widening the page and causing horizontal scroll).
     Disable it here, only where the fixed nav is in play. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .main-nav { position: fixed; top: 0; right: -100%; width: 290px; height: 100vh;
    background: var(--white); box-shadow: -10px 0 40px rgba(0,0,0,0.18);
    transition: right .3s ease; padding: 96px 26px; z-index: 200; }
  .main-nav.open { right: 0; }
  .main-nav ul { flex-direction: column; align-items: flex-start; width: 100%; }
  .main-nav a { width: 100%; }
  .main-nav li.active a { display: block; }
  .nav-cta { margin-left: 0; margin-top: 12px; width: 100%; }
  .nav-cta a { display: block; text-align: center; }
  .menu-toggle { display: block; margin-right: 10px; }
  /* While the nav is open, detach the toggle from the header row and pin
     it to the top-right corner of the open panel, matching where users
     expect a close ("X") control to sit. */
  .menu-toggle.active { position: fixed; top: 26px; right: 26px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hero-strip .container { grid-template-columns: 1fr 1fr; }
  .hero-strip .stat { border-bottom: 1px solid var(--border); }
  .form-row { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  /* Pair the shorter footer columns side by side on mobile instead of
     stacking all four full-width — cuts the footer's scroll height
     roughly in half. The brand block (with its longer paragraph) still
     spans the full width above them. */
  .site-footer { padding-top: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; padding-bottom: 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { margin-bottom: 10px; }
  .footer-grid h4 { margin-bottom: 12px; }
  .footer-links li { margin-bottom: 8px; }
  .footer-bottom { flex-direction: column; text-align: center; padding: 16px 0; gap: 6px; }
}