/* Sbaya Mobile — Contact Us brand skin, v5.
   v4 fixed the major structural defects, but a second audit found: v4's
   own padding override stacked ON TOP OF Elementor's own --padding-top
   var instead of replacing it (130-160px sections instead of the
   intended 80-110px), the focus-visible rule was defeated by its own
   sibling outline:none rule at higher specificity, the hero heading
   type-scale rule targeted h2 on a page that has zero h2 elements (the
   real heading is h1), the cyan wash survived on the main content
   section, and the "Send us a message" heading kept the 52px
   line-height defect that was only fixed on its sibling. */

.elementor-16795{
  --paper:#FAFAFC; --elev:#F1F2F6; --card:#FFFFFF;
  --line:#E5E6EC; --ink:#0F1115; --soft:#565E6B;
  --blue:#29ABE2; --cyan:#49E0FF;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
}

/* ---- Container width ---- */
.elementor-16795 .e-con-boxed{ max-width:none !important; }
.elementor-16795 .e-con-boxed > .e-con-inner{
  max-width:1440px !important;
  padding-left:clamp(24px,4vw,64px) !important;
  padding-right:clamp(24px,4vw,64px) !important;
}
/* Zero Elementor's OWN --padding-top/bottom var first, so the explicit
   padding below is the only source, not an addition on top of it. */
.elementor-16795 > .elementor-element{
  --padding-top:0 !important; --padding-bottom:0 !important;
  padding-top:clamp(48px,7vw,80px) !important;
  padding-bottom:clamp(48px,7vw,80px) !important;
}

/* ---- Hero ---- */
.elementor-16795 .elementor-element-e3a2f09{
  --padding-top:0 !important; --padding-bottom:0 !important;
  padding-top:64px !important; padding-bottom:64px !important;
}
@media(min-width:901px){
  .elementor-16795 .elementor-element-e3a2f09{ padding-top:110px !important; }
}
.elementor-16795 .elementor-element-e3a2f09 :is(h1,h2,h3){ color:#F5F6F8 !important; }
.elementor-16795 .elementor-element-e3a2f09 p{ color:#95A0AD !important; }

/* Eyebrow ("Contact us") */
.elementor-16795 .elementor-element-dc4e54b > .elementor-widget-container{
  background:none !important; padding:0 !important; border-radius:0 !important;
}
.elementor-16795 .elementor-element-e3a2f09 h3.elementor-heading-title{
  font-size:12px !important; font-weight:600 !important; letter-spacing:.1em !important;
  text-transform:uppercase !important; color:#BFE6FF !important;
  display:inline-flex !important; align-items:center !important; gap:8px !important;
  border:1px solid rgba(255,255,255,.10) !important; background:rgba(255,255,255,.08) !important;
  padding:7px 16px !important; border-radius:100px !important; margin-bottom:16px !important;
}

/* Real hero headline scale — this page's hero title is an H1 (confirmed:
   0 H2 elements exist on Contact Us), not an H2. v4's rule was dead. */
.elementor-16795 .elementor-element-e3a2f09 h1.elementor-heading-title{
  font-size:clamp(28px,3.6vw,46px) !important; font-weight:800 !important;
  line-height:1.1 !important; letter-spacing:-0.02em !important;
}

/* ---- Icon-box cards ---- */
.elementor-16795 :is(.elementor-element-9dcadc8,.elementor-element-995c628,
  .elementor-element-771bd13,.elementor-element-9a5c108){
  box-shadow:none !important; background:transparent !important;
  --border-radius:0 !important; --padding-top:0 !important; --padding-bottom:0 !important;
  --padding-left:0 !important; --padding-right:0 !important; border:0 !important;
}
.elementor-16795 .elementor-icon-box-wrapper{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:24px !important; transition:background .2s ease;
}
.elementor-16795 .elementor-icon-box-icon .elementor-icon{
  color:#02141F !important; background:linear-gradient(100deg,var(--cyan),var(--blue));
  border-radius:50%; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
}
.elementor-16795 .elementor-icon-box-icon svg{ width:18px; height:18px; fill:currentColor; }
.elementor-16795 .elementor-icon-box-title,
.elementor-16795 .elementor-icon-box-title span{
  font-size:17px !important; line-height:1.3 !important; font-weight:700 !important; color:var(--ink) !important;
}
.elementor-16795 .elementor-icon-box-description{
  font-size:14px !important; line-height:1.6 !important; color:var(--soft) !important;
}
.elementor-16795 .elementor-icon-box-description a{
  color:var(--blue) !important; text-decoration:none !important; font-weight:600;
}
.elementor-16795 .elementor-icon-box-description a:hover{ text-decoration:underline !important; }
/* Hover feedback on ALL four cards, not just the two with links —
   consistency across the row matters more than strict "only hint at
   what's clickable" here, per direct instruction. */
.elementor-16795 .elementor-icon-box-wrapper:hover{ background:var(--elev); }

/* NOTE: an earlier attempt forced display:grid on .elementor-element-d1ab5f1
   to get a 2-up mobile layout — that container actually wraps the "Get in
   Touch" HEADING plus all four cards together (5 items), so it broke the
   grid into mismatched rows with visible empty cells. Reverted — the
   cards' original layout was already fine before that change. Per Sir's
   direction: leave mobile as-is (stacked) rather than risk this again. */

/* Main content section — kill the cyan wash directly by ID; v4's fix
   only reached the form fields, not this section's own background. */
.elementor-16795 .elementor-element-826d02d{ background-color:var(--paper) !important; }

/* Both section headings ("Get in Touch" AND "Send us a message") — v4
   fixed only the first; the second kept Elementor's 30px/52px default,
   a 22px dead-space leading gap. */
.elementor-16795 :is(.elementor-element-9015af6,.elementor-element-a3662ab) h3.elementor-heading-title{
  font-size:clamp(22px,2.3vw,30px) !important; line-height:1.2 !important;
  font-weight:800 !important; text-transform:none !important;
  color:var(--ink) !important; border:0 !important; background:none !important;
  padding:0 !important; border-radius:0 !important;
}

/* ---- Contact form ---- */
.elementor-16795 .elementor-element-43cca2e{
  box-shadow:none !important; background:transparent !important;
  --border-radius:0 !important; --padding-top:0 !important; --padding-bottom:0 !important;
  --padding-left:0 !important; --padding-right:0 !important; border:0 !important;
}
.elementor-16795 .elementor-form{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px;
}
.elementor-16795 .elementor-field-label{ color:var(--soft) !important; font-size:13px !important; }
.elementor-16795 .elementor-field-textual{
  background:var(--paper) !important; border:1px solid var(--line) !important;
  color:var(--ink) !important; border-radius:10px !important; padding:13px 16px !important;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.elementor-16795 .elementor-field-textual::placeholder{ color:#8A93A0; }
/* No outline:none here — that was defeating the site-wide focus-visible
   rule below by winning the specificity tie. The box-shadow ring adds
   to the native outline instead of replacing it. */
.elementor-16795 .elementor-field-textual:focus{
  border-color:var(--blue) !important; box-shadow:0 0 0 3px rgba(41,171,226,.25) !important;
}
.elementor-16795 .elementor-button{
  background:linear-gradient(100deg,var(--cyan),var(--blue)) !important;
  color:#02141F !important; border:none !important; border-radius:100px !important;
  padding:15px 28px !important; font-weight:700 !important; font-size:15px !important;
  transition:filter .2s ease, transform .2s ease;
}
.elementor-16795 .elementor-button:hover{ filter:brightness(1.1); transform:translateY(-1px); }

/* Focus-visible everywhere — given higher specificity than any single
   inherited outline:none this page might carry, and no longer fighting
   its own sibling rule above. */
.elementor-16795 .elementor-field-textual:focus-visible,
.elementor-16795 :is(a,button,select):focus-visible{
  outline:2px solid var(--cyan) !important; outline-offset:2px !important;
  box-shadow:0 0 0 4px rgba(41,171,226,.2) !important;
}

@media(max-width:900px){
  .elementor-16795 > .elementor-element{ padding-top:32px !important; padding-bottom:32px !important; }
  .elementor-16795 .elementor-form{ padding:18px !important; }
  .elementor-16795 .elementor-element-826d02d{ --flex-direction:column !important; }
}

/* Standing mobile rule: icon/info cards get a 2-column grid on mobile,
   named explicitly in DESIGN-METHODOLOGY.md as this exact row. A prior
   attempt applied display:grid to the shared parent (d1ab5f1), which
   also contains the "Get in Touch" heading as a sibling -- 5 children
   in a 2-col grid left an empty cell next to the heading. Fixed by
   pulling the heading full-width via grid-column, not by reverting. */
@media(max-width:900px){
  .elementor-element-d1ab5f1{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:16px !important;
  }
  .elementor-element-d1ab5f1 > .elementor-element-9015af6{
    grid-column:1 / -1 !important;
  }
}