/* =========================================================
   Base normalization to keep consistent zoom & font scaling
   (Place this block at the very top)
   ========================================================= */
html {
  box-sizing: border-box;
  font-size: 100%;                 /* 16px root for consistent rem scaling */
  -webkit-text-size-adjust: 100%;  /* prevent mobile text auto-zoom */
  text-size-adjust: 100%;
  zoom: 1;                         /* normalize baseline scaling */
  scroll-behavior: smooth;         /* keep your smooth scroll */
}
*, *::before, *::after { box-sizing: inherit; }
body {
  margin: 0;
  font-size: 1rem;
  transform: none;                 /* avoid accidental page “zoom” */
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* A11y utilities (no style changes to layout) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.visually-hidden-focusable:active,
.visually-hidden-focusable:focus {
  position: static !important; width: auto; height: auto;
  margin: 0; overflow: visible; clip: auto; white-space: normal;
}

/* Improved default focus for interactive elements */
:where(button, [href], input, select, textarea):focus-visible {
  outline: 3px solid rgba(0,179,198,.45);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Respect user preference to reduce motion (keeps your visuals) */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* ==============================
   Core tokens & base
   ============================== */
:root{
  --brand:#0D3B66; --accent:#00B3C6; --ink:#0b2945; --text:#26394a;
  --bg:#f6f9fc; --white:#fff; --radius:16px; --shadow:0 10px 30px rgba(13,59,102,.12);

  /* About-media single source of truth */
  --about-media-width:540px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
.container{width:min(1120px,92%);margin:0 auto}
h1,h2,h3,h4{font-family:Poppins,Inter,sans-serif;color:var(--ink);margin:0 0 .5rem;line-height:1.2}
h1{font-size:clamp(32px,4vw,48px);font-weight:800}
h2{font-size:clamp(24px,3vw,34px);font-weight:700}
h3{font-size:22px;font-weight:700}
h4{font-size:18px;font-weight:600}
a{text-decoration:none;color:inherit}
a:focus-visible,.btn:focus-visible{outline:3px solid rgba(0,179,198,.45);outline-offset:2px;border-radius:10px}
.kicker{text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:12px;color:#51799c}
.mt-10{margin-top:10px}

/* ==============================
   Buttons
   ============================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.85rem 1.2rem;gap:.5rem;border-radius:999px;
  font-weight:700;background:var(--brand);color:#fff;box-shadow:var(--shadow);
  transition:transform .15s,box-shadow .15s;
}
.btn:hover{transform:translateY(-2px)}
.btn--light{background:#fff;color:var(--brand)}

/* ==============================
   Topbar / Header / Nav
   ============================== */
.topbar{background:linear-gradient(90deg,#0a2c4f,#0f3b67);color:#e9f3ff;font-size:14px}
.topbar__row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 0}
.topbar__item{display:flex;align-items:center;gap:.5rem;opacity:.95}

.site-header{position:sticky;top:0;z-index:20;background:#fff;box-shadow:0 2px 16px rgba(0,0,0,.05)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}

.brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:800;color:var(--ink)}
/* legacy SVG logo size */
.brand__logo{width:36px;height:36px;color:var(--brand)}
/* image logo helpers */
.brand__logo-img{display:block;width:36px;height:36px;flex:0 0 36px;object-fit:cover;border-radius:8px}
.brand--footer .brand__logo-img,.brand__logo-img--footer{width:32px;height:32px}
.brand__text{font-family:Poppins,Inter,system-ui,sans-serif;letter-spacing:.2px}
.brand__text em{font-style:normal;color:inherit;font-weight:700}
/* single color in header */
.site-header .brand .brand__text,
.site-header .brand .brand__text em{color:#0b2233}

.nav__menu{display:flex;gap:1.2rem}
.nav__menu a{font-weight:600;color:#113b62;padding:.45rem .25rem;border-radius:8px}
.nav__menu a:hover,.nav__menu a[aria-current="page"]{color:var(--brand)}
.nav__toggle{display:none}
.nav__hamburger{display:none;width:36px;height:32px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:6px}
.nav__hamburger span{width:26px;height:2px;background:#113b62;display:block;border-radius:2px}

/* ==============================
   Sections & Cards
   ============================== */
.section{padding:72px 0}
.section__head{text-align:center;max-width:760px;margin:0 auto 36px}
.section__head p{color:#3a556d}
.cards{display:grid;gap:22px}
.cards--3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;padding:24px;border-radius:var(--radius);box-shadow:var(--shadow)}
.card__icon{width:56px;height:56px;display:grid;place-items:center;border-radius:14px;background:#e6f6f8;color:#0a6a77;font-size:24px;margin-bottom:10px}

/* ==============================
   Hero (two-column)
   ============================== */
.hero{
  position:relative;overflow:hidden;
  background:radial-gradient(1200px 600px at 10% 10%,#eaf6ff 0%,#f3f9ff 45%,#ffffff 100%);
  padding:56px 0 40px;
}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;min-height:52vh}
.hero__copy h1{color:#0c2b45;margin:.25rem 0 .75rem}
.hero__copy p{color:#2c5873;max-width:52ch;margin-bottom:18px}
.hero__media img{border-radius:16px;box-shadow:0 22px 60px rgba(13,59,102,.18)}
.hero__bg{position:absolute;inset:auto auto 0 0;width:70vmax;height:70vmax;transform:translate(-20%,45%);border-radius:50%;filter:blur(80px);opacity:.25;pointer-events:none}
.hero__bg--1{background:#cdeefd}
.hero__bg--2{background:#d9e4ff;right:-10%;left:auto;transform:translate(15%,65%)}

/* ==============================
   Why grid
   ============================== */
.why__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.why__item{background:#fff;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.why__item i{font-size:24px;color:var(--accent)}

/* ==============================
   Contact (shared bits)
   ============================== */
.contact__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:28px;align-items:start}
.contact-list{list-style:none;margin:0;padding:0}
.contact-list--big li{display:flex;align-items:center;gap:.6rem;margin:.5rem 0;font-weight:600}
.contact__form{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
label{font-weight:600;color:#0b2945}
input,select,textarea{padding:12px 14px;border-radius:12px;border:1px solid #cfe1f3;background:#fbfdff;font:inherit;outline:none}
input:focus,select:focus,textarea:focus{border-color:#9fc9ec;box-shadow:0 0 0 3px rgba(159,201,236,.25)}
.form__note{font-size:13px;color:#6b7c91;margin-top:8px}

/* ==============================
   CTA band
   ============================== */
.cta-band{background:linear-gradient(90deg,var(--brand),#145a97);color:#fff;padding:40px 0}
.cta-band__row{display:flex;align-items:center;justify-content:space-between;gap:18px}
.cta-band h3{margin:0;font-weight:800}

/* ==============================
   Footer (incl. social)
   ============================== */
.footer{background:#06182a;color:#e7eef7;margin-top:40px}
.footer__grid{display:grid;grid-template-columns:1.3fr .7fr 1fr;gap:32px;padding:50px 0}
.footer a{color:#c2d8f6}
.footer a:hover{color:#fff}
.brand--footer .brand__logo{color:#d9e9ff}
.footer__links ul,.footer__contact ul{list-style:none;padding:0;margin:10px 0 0}
.footer__bottom{border-top:1px solid rgba(255,255,255,.08);text-align:center;padding:14px 0;font-size:14px;color:#a9bed9}
/* Force white for brand + headings */
.footer .brand--footer .brand__text,
.footer .brand--footer .brand__text em{color:#fff}
.footer__links h4,.footer__contact h4{color:#fff}
/* social */
.footer .social-links{display:flex;gap:10px;margin-top:12px}
.footer .social-links a{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;transition:transform .15s,background .15s,color .15s}
.footer .social-links a:hover{background:#fff;color:#0b3554;transform:translateY(-2px)}
.footer .social-links i{font-size:16px;line-height:1}

/* ==============================
   Services page extras
   ============================== */
.page-hero{
  position:relative;overflow:hidden;text-align:center;color:#0b2945;
  /* soft gradient + image for Services */
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25)),
    url("images/services1.jpg") center/cover no-repeat;
  padding:80px 0 40px;
}
.page-hero h1{margin:.25rem 0 .25rem}
.page-hero .sub{color:#355774;max-width:60ch;margin:0 auto}

.section--tight{padding-top:48px;padding-bottom:48px}
.svc-grid{display:grid;gap:22px;grid-template-columns:repeat(3,1fr)}
.svc{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.svc__icon{width:64px;height:64px;display:grid;place-items:center;border-radius:16px;background:#e6f6f8;color:#0a6a77;font-size:28px;margin-bottom:10px}
.industries .pill-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pill{display:inline-flex;align-items:center;gap:.5rem;background:#eef6ff;color:#0b2945;border:1px solid #e1edfb;padding:.55rem .9rem;border-radius:999px;font-weight:600}
.pill i{color:var(--accent)}
.pricing .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.price-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;position:relative}
.price-card--best{border:2px solid var(--brand)}
.price-card .badge{position:absolute;top:-10px;right:14px;background:var(--brand);color:#fff;padding:6px 10px;font-size:12px;border-radius:999px;box-shadow:var(--shadow)}
.price{font-weight:800;font-size:28px;color:#0d1b2a;margin:.35rem 0 1rem}
.price .curr{font-size:18px;vertical-align:super;margin-right:2px}
.price .unit{font-weight:600;color:#5b6a7c;font-size:14px;margin-left:4px}
.center{text-align:center}.mt-20{margin-top:20px}
.faq .faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.qa{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}

/* ==============================
   About page
   ============================== */
.about-hero{
  position:relative;overflow:hidden;text-align:left;color:#0b2945;
  background:linear-gradient(180deg,rgba(2,132,199,.08),#fff),
             url("https://images.unsplash.com/photo-1521791136064-7986c2920216?q=80&w=1600&auto=format&fit=crop") center/cover no-repeat;
  padding:80px 0 64px;
}
.about-hero .kicker{color:#406a86}

/* “zig” rows & media polish */
.zig__row{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center}
.zig--rev .zig__row{grid-template-columns:.95fr 1.05fr}
.zig--rev .zig__row .zig__media{order:2}
.zig--rev .zig__row .zig__text{order:1}
.zig__media img{border-radius:18px;box-shadow:0 18px 50px rgba(13,59,102,.16)}
.zig .bullets{margin:.5rem 0 0;padding-left:1.1rem}
.zig .bullets li{margin:.35rem 0}

.value-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.value{background:#fff;border-radius:14px;padding:20px;box-shadow:0 10px 24px rgba(13,59,102,.08)}
.value i{font-size:22px;color:var(--accent)}
.value h3{margin:.4rem 0 .35rem}

.infra .panel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.panel{background:#fff;border-radius:14px;padding:20px;box-shadow:0 8px 22px rgba(13,59,102,.08)}
.panel h4{display:flex;align-items:center;gap:.5rem;margin:0 0 .4rem}

/* About hero using local image + overlay (if you use .page-hero.about-hero) */
.page-hero.about-hero{position:relative;background-image:url("images/about1.webp")!important;background-size:cover;background-position:center;background-repeat:no-repeat}
.page-hero.about-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.25));pointer-events:none;z-index:0}
.page-hero.about-hero .container{position:relative;z-index:1}
.page-hero.about-hero h1,.page-hero.about-hero .kicker,.page-hero.about-hero .sub{color:#000!important}

/* === Mission block: keep image on the RIGHT + constrained === */
.about-split__row{
  display:grid;
  grid-template-columns:1fr;             /* mobile stacked */
  gap:28px;
  align-items:center;
}
@media (min-width:900px){
  .about-split__row{grid-template-columns:1.1fr 1fr} /* text : image */
  .about-split__row--image-right .about-split__text{order:1}
  .about-split__row--image-right .about-split__media{order:2;justify-self:end}
}
.about-split__media{
  width:100%;
  max-width:var(--about-media-width);
  aspect-ratio:16/9;
  border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px rgba(13,59,102,.12);
}
.about-split__media img{width:100%;height:100%;object-fit:cover;display:block}

/* ==============================
   Process page
   ============================== */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

.process-hero{
  position:relative;color:#0b2945;text-align:left;min-height:420px;
  padding:40px 0 120px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.25)),
    url("./images/process-hero.jpg") center/cover no-repeat;
}
.process-hero .kicker{color:#3a6587}
.process-hero h1{color:#0b2945;font-size:clamp(30px,4.2vw,50px);margin:.25rem 0 .35rem}
.process-hero .hero-sub{max-width:60ch;color:#355774}
.process-hero .hero__bg{display:none}

.process-split{
  position:relative;overflow:hidden;
  background:radial-gradient(1200px 520px at 10% 10%,#eaf6ff 0%,#f6fbff 40%,#ffffff 100%);
  color:var(--text);padding:80px 0;
}
.process-split .split-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center}
.process-split .split-text h2{color:var(--ink)}
.process-split .split-text p{color:#3a556d}
.process-split .bullets{margin:.6rem 0 0;padding-left:1.15rem}
.process-split .bullets li{margin:.35rem 0}
.process-split .split-media img{border-radius:24px;box-shadow:0 18px 40px rgba(13,59,102,.15)}

.timeline{background:#f6f9fc}
.timeline__grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.timeline__grid::before{content:"";position:absolute;top:28px;left:0;right:0;height:2px;background:linear-gradient(90deg,#d9e6f3,transparent 12%,#d9e6f3 25%,transparent 37%,#d9e6f3 50%,transparent 62%,#d9e6f3 75%,transparent 87%,#d9e6f3 100%);pointer-events:none}
.tcard{background:#fff;border-radius:16px;padding:22px;box-shadow:0 10px 26px rgba(13,59,102,.12);position:relative;text-align:left}
.tcard__dot{position:absolute;top:-16px;left:18px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;background:linear-gradient(135deg,#00B3C6,#0D3B66);box-shadow:0 10px 22px rgba(13,59,102,.25)}
.tcard h3{display:flex;align-items:center;gap:.5rem;margin:.3rem 0 .35rem}

.ops-panels{background:#f6f9fc}
.ops-panels .section__head h2{color:var(--ink)}
.ops-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ops-card{background:#fff;color:var(--text);border:1px solid #e3edf7;border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.ops-card h3{color:var(--ink);margin:0 0 .35rem}
.ops-card hr{border:0;height:2px;width:180px;margin:.25rem 0 1rem;background:linear-gradient(90deg,#bcd7ef,rgba(255,255,255,0))}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{display:flex;gap:.6rem;align-items:flex-start;margin:.65rem 0;line-height:1.6}
.checklist i{color:#0a6a77;margin-top:.2rem}

/* ==============================
   Contact page (structure mapping)
   ============================== */
.contact-hero{
  position:relative;text-align:left;color:#fff;padding:90px 0 70px;
  background:
    linear-gradient(180deg,rgba(6,24,42,.55),rgba(6,24,42,.55)),
    url("images/contact-hero.jpg") center/cover no-repeat;
}
.contact-hero .kicker{color:#cfe7ff}
.contact-hero h1{color:#fff;font-size:clamp(30px,4.2vw,50px);margin:.25rem 0 .4rem}
.contact-hero .sub{color:#e8f3ff;max-width:60ch}

/* two-column layout on desktop, single column on phones */
.contact-layout{
  display:grid;grid-template-columns:1fr;gap:24px;align-items:start;
}
@media (min-width:980px){
  .contact-layout{grid-template-columns:360px 1fr}
}

.info-cards{display:grid;gap:14px}
.contact-card{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:16px 18px;background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(13,59,102,.08);overflow-wrap:anywhere}
.contact-card i{width:36px;height:36px;display:grid;place-items:center;font-size:16px;color:#0e3a66;background:#eaf2fb;border-radius:10px}
.contact-card h4{margin:0 0 4px}
.hours,.assurance{margin-top:18px;padding:16px 18px;background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(13,59,102,.08)}
.hours ul,.assurance ul{margin:.25rem 0 0;padding-left:1.2rem}
.assurance .tick{list-style:none;padding-left:0;margin:0}
.assurance .tick li{margin:6px 0}
.assurance .tick li::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;color:#1f8a4c;margin-right:10px}

.contact-form.card{background:#fff;border-radius:18px;box-shadow:0 20px 60px rgba(13,59,102,.10);padding:22px 24px;overflow-wrap:anywhere}
.contact-form .muted{color:#5b728d;margin-top:-6px}

/* 2-col form rows; stack on mobile */
.contact-form form{display:block;width:100%}
.contact-form form>.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
@media (max-width:900px){.contact-form form>.form__row{grid-template-columns:1fr}}
.contact-form form .field{display:flex;flex-direction:column;width:100%;min-width:0}
.contact-form form input,
.contact-form form select,
.contact-form form textarea{
  width:100%;max-width:none;flex:1 1 auto;min-height:48px;padding:12px 14px;
  border:1px solid #d8e2ee;border-radius:10px;background:#fff;font:inherit;box-sizing:border-box;
}
.contact-form form select{
  appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,#89a 50%),
    linear-gradient(135deg,#89a 50%,transparent 50%);
  background-position:right 14px center,right 8px center;
  background-size:7px 7px,7px 7px;background-repeat:no-repeat;padding-right:36px;
}
.contact-form form #message{min-height:160px;resize:vertical}
.field.check{
  display:grid!important;grid-template-columns:22px 1fr!important;gap:12px!important;
  align-items:center!important;margin-top:14px!important;width:100%!important;
}
.field.check input[type="checkbox"]{width:20px!important;height:20px!important;margin:0!important;flex:0 0 auto!important}
.field.check label{display:block!important;width:auto!important;max-width:100%!important;margin:0!important;line-height:1.35!important;white-space:normal!important}
.contact-form .btn{height:48px;padding:0 18px}

/* ==============================
   Home page contact form fix
   ============================== */
#contact .form{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;align-items:start;
}
#contact .form input,
#contact .form textarea,
#contact .form select{width:100%;box-sizing:border-box;min-height:48px}
#contact .form textarea{grid-column:1 / -1;min-height:160px;resize:vertical}
#contact .form button{grid-column:1 / -1;justify-self:start;height:48px;padding:0 18px}
@media (max-width:768px){
  #contact .form{grid-template-columns:1fr}
}

/* ==============================
   Responsive
   ============================== */
@media (max-width:1024px){
  .brand__logo{width:32px;height:32px}
  .hero__grid{grid-template-columns:1fr;gap:24px;min-height:unset}
  .cards--3{grid-template-columns:repeat(2,1fr)}
  .why__grid{grid-template-columns:1fr}
  .contact__grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .svc-grid{grid-template-columns:1fr 1fr}
  .pricing .price-grid{grid-template-columns:1fr 1fr}
  .faq .faq-grid{grid-template-columns:1fr}
  .zig__row{grid-template-columns:1fr}
  .value-cards{grid-template-columns:repeat(2,1fr)}
  .infra .panel-grid{grid-template-columns:1fr 1fr}
  .process-split .split-wrap{grid-template-columns:1fr}
  .timeline__grid{grid-template-columns:1fr 1fr}
  .timeline__grid::before{display:none}
  .ops-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .topbar__row{flex-direction:column;align-items:flex-start}
  .nav__hamburger{display:flex}
  .nav__menu{
    position:absolute;top:64px;right:4%;left:4%;
    background:#fff;border-radius:14px;box-shadow:var(--shadow);
    padding:10px;display:none;flex-direction:column;gap:4px;
  }
  .nav__menu a{padding:.75rem;border-radius:10px}
  .nav__toggle:checked ~ .nav__menu{display:flex}
  .cards--3{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:1fr}
  .pricing .price-grid{grid-template-columns:1fr}
  .value-cards{grid-template-columns:1fr}
  .infra .panel-grid{grid-template-columns:1fr}
  .cta-band__row{flex-direction:column;text-align:center}
  .timeline__grid{grid-template-columns:1fr}
  .ops-grid{grid-template-columns:1fr}
  .process-hero{padding-top:24px;padding-bottom:90px}
}

/* Topbar layout */
.topbar {
  background-color: #002147;
  color: #fff;
  font-size: 14px;
}

/* Use your existing .container width */
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between; /* WA left, Email right */
  padding: 8px 0;
}

.topbar__link {
  color: #fff;
  text-decoration: none;
}

.topbar__link i {
  margin-right: 6px;
}

.topbar__link--wa i {
  color: #25D366; /* WhatsApp green */
}

/* ====== ICON COLOR STYLES ====== */

/* WhatsApp */
.fa-whatsapp {
  color: #25D366 !important; /* WhatsApp green */
}

/* Email (envelope icon) */
.fa-envelope {
  color: #0078D7 !important; /* Outlook/blue email tone */
}

/* Location marker */
.fa-location-dot {
  color: #FF3B30 !important; /* Red/pin color */
}

/* LinkedIn */
.fa-linkedin,
.fa-linkedin-in {
  color: #0077B5 !important; /* LinkedIn blue */
}

/* Instagram */
.fa-instagram {
  color: #E1306C !important; /* Instagram pink */
}

/* Facebook (if added later) */
.fa-facebook,
.fa-facebook-f {
  color: #1877F2 !important;
}

/* Optional hover glow for better visibility */
.contact-list i:hover,
.social-links i:hover {
  filter: brightness(1.25);
  transform: scale(1.1);
  transition: all 0.2s ease;
}

/* === Make PROCESS hero match the SERVICES hero === */
.process-hero{
  /* same spacing as .page-hero */
  padding: 80px 0 40px !important;

  /* match the visual alignment of Services */
  text-align: center !important;

  /* don't force a tall block */
  min-height: auto !important;

  /* make sure the image behaves like the other hero */
  background-position: center !important;
  background-size: cover !important;
}

/* keep headings readable when centered */
.process-hero .hero-sub { 
  max-width: 60ch; 
  margin-left: auto; 
  margin-right: auto; 
}

/* slightly tighter on phones, like Services */
@media (max-width: 760px){
  .process-hero{
    padding: 56px 0 36px !important;
  }
}
/* =========================================================
   UNIFY ALL HERO BANNERS (Services, Process, About, Contact)
   Same height, centered text, same padding & background fit
   ========================================================= */

.page-hero,
.process-hero,
.about-hero,
.contact-hero{
  /* fixed, consistent hero height on desktop */
  min-height: 360px !important;

  /* consistent padding (top / bottom) */
  padding: 80px 0 40px !important;

  /* center the content block */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  /* background behavior (image fill like Services) */
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;

  /* keep it simple; no decorative in-hero shapes */
  overflow: hidden;
}

/* Keep headings/subheads nicely centered and readable */
.page-hero .container,
.process-hero .container,
.about-hero .container,
.contact-hero .container{
  max-width: 1000px !important;
  margin: 0 auto !important;
}

.page-hero h1,
.process-hero h1,
.about-hero h1,
.contact-hero h1{
  margin: .25rem 0 .5rem !important;
}

.page-hero .sub,
.process-hero .hero-sub,
.about-hero .sub,
.contact-hero .sub{
  max-width: 60ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Slightly shorter on phones for identical feel */
@media (max-width: 760px){
  .page-hero,
  .process-hero,
  .about-hero,
  .contact-hero{
    min-height: 260px !important;
    padding: 56px 0 32px !important;
  }
}
/* =========================================================
   CONTACT ICON + TEXT ALIGN FIX
   Makes icons and labels perfectly aligned in a row
   ========================================================= */
.contact-card {
  display: flex;
  align-items: center;          /* ensures vertical centering */
  gap: 12px;
}

.contact-card i {
  display: flex;                /* use flex to center icon shape */
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 16px;
  color: #0e3a66;
  background: #eaf2fb;
  border-radius: 10px;
  flex-shrink: 0;               /* keeps icon size fixed */
  line-height: 1;               /* prevent font icons from pushing layout */
}

.contact-card h4 {
  margin: 0;
  font-weight: 700;
  color: #0b2945;
  display: flex;
  align-items: center;          /* vertically align text beside icon */
}

.contact-card p {
  margin: 0;
  color: #1f3c58;
}
/* ================================
   FORCE CONTACT HERO TO MATCH OTHERS
   (height + padding + typography)
   ================================ */

/* Use the same fixed height used elsewhere */
:root{
  --hero-height: 420px;         /* adjust once for all pages if you want taller/shorter */
  --hero-height-mobile: 280px;
}

/* ==============================
   CONTACT PAGE – EXACT FIXES
   1) Icon + title on one row, value under it
   2) Left & right columns end at the same line
   ============================== */

/* 1) Card layout: [icon] [title]
                     └─ value underneath */
.contact-card{
  display: grid !important;
  grid-template-columns: 40px 1fr;   /* icon | text */
  grid-template-rows: auto auto;     /* title, then value */
  column-gap: 12px;
  row-gap: 4px;
  align-items: start;                 /* keep text aligned to icon top */
  padding: 16px 18px;
}

.contact-card i{
  grid-row: 1 / span 2;              /* icon spans title + value */
  grid-column: 1;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; font-size: 16px;
  background: #eaf2fb; color: #0e3a66; border-radius: 10px;
}

.contact-card h4{
  grid-column: 2; grid-row: 1;
  margin: 0; line-height: 1.2; font-weight: 700; color: #0b2945;
}

.contact-card p{
  grid-column: 2; grid-row: 2;
  margin: 0; color: #1f3c58; word-break: break-word;
}

/* 2) Make the two columns finish on the same baseline */
.contact-layout{
  align-items: stretch !important;    /* grid items fill the row height */
}

.contact-info,
.contact-form{
  height: 100% !important;            /* each column fills the row */
  display: flex;                      /* allow inner content to size naturally */
  flex-direction: column;
}

/* ensure the form card stretches with its column height */
.contact-form.card{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
/* =========================================
   CONTACT PAGE — ICON/TITLE/VALUE + COLUMNS
   ========================================= */

/* 1) Icon + Title on the same row, Value under it */
.contact-card{
  /* grid: [icon] [text-block] */
  display: grid !important;
  grid-template-columns: 40px 1fr;
  column-gap: 12px;
  row-gap: 4px;
  align-items: start;                 /* top-align the text block to icon */
  padding: 16px 18px;
}

/* the icon itself */
.contact-card > i{
  grid-column: 1;
  grid-row: 1 / span 2;               /* span title + value */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 16px;
  background: #eaf2fb;
  color: #0e3a66;
  border-radius: 10px;
}

/* the text wrapper (your <div> next to the icon) */
.contact-card > div{
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;                           /* small gap between title and value */
}

/* title (WhatsApp / Email / Location) */
.contact-card > div > h4{
  margin: 0;
  line-height: 1.2;
  font-weight: 700;
  color: #0b2945;
}

/* value (number / email / address) — supports <p> or <a> */
.contact-card > div > p,
.contact-card > div > a{
  margin: 0;
  display: block;
  color: #1f3c58;
  word-break: break-word;             /* avoid overflow for long emails */
  text-decoration: none;              /* keep links looking like body text */
}

/* 2) Make left and right columns end at the same baseline */
.contact-layout{
  align-items: stretch !important;    /* both columns fill the same row height */
}

/* Left column as a single tall “card”, right form stretches too */
.contact-info{
  height: 100% !important;
  display: flex;
  flex-direction: column;
  gap: 12px;

  /* unify it as one tall card so bottoms line up exactly */
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(13,59,102,.08);
  padding: 12px;
}

.contact-form.card{
  height: 100% !important;
  display: flex;
  flex-direction: column;
}
/* =========================================================
   CONTACT PAGE — ICON ALIGNMENT + EQUAL COLUMN HEIGHT
   ========================================================= */

/* --- ICON + TEXT alignment --- */
.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 18px;
}

/* icon beside title */
.contact-card i {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 16px;
  background: #eaf2fb;
  color: #0e3a66;
  border-radius: 10px;
  margin-top: 3px;
}

/* text block next to icon */
.contact-card .text-group {
  display: flex;
  flex-direction: column;
}

/* title (WhatsApp, Email, etc.) */
.contact-card .text-group h4 {
  margin: 0;
  font-weight: 700;
  color: #0b2945;
  line-height: 1.3;
  display: inline-block;
}

/* value (number/email/address) */
.contact-card .text-group p,
.contact-card .text-group a {
  margin: 2px 0 0;
  color: #1f3c58;
  font-size: 15px;
  text-decoration: none;
  word-break: break-word;
  padding-left: 2px; /* keeps value neatly under title */
}

/* --- LEFT & RIGHT COLUMN SAME HEIGHT --- */
.contact-layout {
  display: flex;
  align-items: stretch !important;
  gap: 24px;
}

/* left column (info cards) */
.contact-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* make left look like one tall card */
.contact-info {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(13,59,102,0.08);
  padding: 16px;
  gap: 14px;
}

/* right column (form card) */
.contact-form.card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(13,59,102,0.08);
}

/* ensure mobile responsiveness remains clean */
@media (max-width: 768px) {
  .contact-layout {
    flex-direction: column;
  }
  .contact-info,
  .contact-form.card {
    width: 100%;
  }
}
/* ==============================================
   CONTACT PAGE — FINAL COLUMN EQUAL-HEIGHT FIX
   (no hero changes; keeps your icon/title/value look)
   ============================================== */

/* Make the two columns equal height */
.contact-layout{
  display: flex !important;
  align-items: stretch !important;   /* children are as tall as the tallest */
  gap: 24px;
}

/* Left column: stack of info cards behaves as ONE tall card */
.contact-info{
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;

  /* visual wrapper so its height matches the form card */
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(13,59,102,.08);
  padding: 16px;
  gap: 14px;
}

/* Right column: form card fills its column */
.contact-form.card{
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(13,59,102,.08);
}

/* Ensure the submit button sits at the bottom so the card uses the full height */
.contact-form.card form{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.contact-form.card form .btn{
  margin-top: auto;   /* pushes button to the bottom of the card */
}

/* Keep your card contents aligned: [icon] Title / Value under Title */
.contact-card{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 18px;
}
.contact-card i{
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; font-size: 16px;
  background: #eaf2fb; color: #0e3a66; border-radius: 10px;
  margin-top: 3px;
}
.contact-card .text-group{ display: flex; flex-direction: column; }
.contact-card .text-group h4{ margin: 0; font-weight: 700; color:#0b2945; line-height: 1.3; }
.contact-card .text-group p,
.contact-card .text-group a{ margin: 2px 0 0; color:#1f3c58; font-size: 15px; text-decoration: none; word-break: break-word; }

/* Mobile: stack cleanly */
@media (max-width: 768px){
  .contact-layout{ flex-direction: column; }
  .contact-info, .contact-form.card{ width: 100%; }
}
/* =========================================================
   CONTACT PAGE — FINAL FIX (equal height + icon/text layout)
   ========================================================= */

/* Make the two columns equal height */
.contact-layout {
  display: flex !important;
  align-items: stretch !important; /* both sides same height */
  gap: 24px;
}

/* Left column (info) */
.contact-info {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(13,59,102,.08);
  padding: 16px;
  gap: 14px;
}

/* Right column (form) */
.contact-form.card {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(13,59,102,.08);
}
.contact-form.card form {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.contact-form.card form .btn {
  margin-top: auto; /* keep submit button bottom-aligned */
}

/* Icon beside label, value under label */
.contact-card {
  display: grid !important;
  grid-template-columns: 40px 1fr; /* icon | text block */
  column-gap: 12px;
  row-gap: 4px;
  align-items: start;
  padding: 16px 18px;
}
.contact-card > i {
  grid-row: 1 / span 2;
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 16px;
  background: #eaf2fb;
  color: #0e3a66;
  border-radius: 10px;
}
.contact-card .text-group {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.contact-card .text-group h4 {
  margin: 0;
  font-weight: 700;
  color: #0b2945;
  line-height: 1.3;
}
.contact-card .text-group p,
.contact-card .text-group a {
  margin: 0;
  color: #1f3c58;
  font-size: 15px;
  text-decoration: none;
  word-break: break-word;
}

/* Mobile layout: stack columns */
@media (max-width: 768px) {
  .contact-layout {
    flex-direction: column;
  }
  .contact-info,
  .contact-form.card {
    width: 100%;
    height: auto;
  }
}
/* --- Top Contact Bar Fix --- */
.topbar {
  background-color: #0f3557; /* your dark blue */
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 10px;
  font-size: 15px;
}

.topbar a {
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
}

.topbar a:hover {
  text-decoration: underline;
}

/* Icons adjust */
.topbar i {
  font-size: 18px;
}

/* --- Mobile optimization --- */
@media (max-width: 768px) {
  .topbar {
    flex-direction: column;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
  }
  .topbar a {
    justify-content: center;
  }
}
/* ---------- Mobile-only font adjustment for topbar ---------- */
@media (max-width: 768px) {
  .topbar {
    padding: 4px 0;
  }

  .topbar .topbar__inner {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center;
    gap: 2px;
    text-align: center;
  }

  .topbar__link {
    font-size: 12px !important;
    line-height: 1.2;
    gap: 4px;
  }

  .topbar__link i {
    font-size: 13px !important;
  }
}