/* ============================================================
   FIRER — Elementor decorative layer + layout safety net  (v1.2.1)
   The homepage's core styling (colours, backgrounds, spacing,
   typography, borders) lives in each widget's own settings inside
   the FIRER Home template. This file adds ONLY non-structural
   decorative touches, so it can never conflict with that styling.
   No padding, no margins, no !important, no layout overrides.
   ============================================================ */

/* Hero — faint hexagon texture behind the content */
.firer-hero{position:relative;overflow:hidden}
.firer-hero::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.10;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23c6a664' stroke-width='1'><path d='M60 4 L108 32 L108 88 L60 116 L12 88 L12 32 Z'/><path d='M60 24 L90 42 L90 78 L60 96 L30 78 L30 42 Z'/><circle cx='60' cy='60' r='6'/></g></svg>");
  background-size:180px 180px;
}
.firer-hero > .elementor-container{position:relative;z-index:1}

/* Stats — thin gold dividers between the four figures */
.firer-stat{border-right:1px solid rgba(198,166,100,.14)}
.firer-stats > .elementor-container > .firer-stat:last-child{border-right:0}
@media (max-width:767px){ .firer-stat{border-right:0} }

/* Cards — gentle lift on hover (decorative only) */
.firer-pillar,.firer-leader{transition:transform .4s ease, box-shadow .4s ease}
.firer-pillar:hover,.firer-leader:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 80px -40px rgba(8,17,31,.55);
}

/* ============================================================
   LAYOUT SAFETY NET
   Force the intended column widths on desktop, in case Elementor's
   generated per-page column CSS isn't applied on this install
   (columns were collapsing to content width). Scoped to >=768px so
   Elementor still stacks columns normally on mobile.
   ============================================================ */
@media (min-width:768px){
  .firer-stats > .elementor-container > .firer-stat{flex:0 0 25% !important;max-width:25% !important}
  .firer-about > .elementor-container > .firer-body{flex:0 0 55% !important;max-width:55% !important}
  .firer-about > .elementor-container > .firer-card{flex:0 0 45% !important;max-width:45% !important}
  .firer-focus > .elementor-container > .firer-head,
  .firer-approach > .elementor-container > .firer-head,
  .firer-leaders > .elementor-container > .firer-head{flex:0 0 100% !important;max-width:100% !important}
  .firer-focus > .elementor-container > .firer-pillar{flex:0 0 50% !important;max-width:50% !important}
  .firer-approach > .elementor-container > .firer-step{flex:0 0 33.333% !important;max-width:33.333% !important}
  .firer-leaders > .elementor-container > .firer-leader{flex:0 0 50% !important;max-width:50% !important}
  .firer-gov > .elementor-container > .firer-body{flex:0 0 45% !important;max-width:45% !important}
  .firer-gov > .elementor-container > .firer-reg{flex:0 0 55% !important;max-width:55% !important}
  .firer-contact > .elementor-container > .elementor-column{flex:0 0 50% !important;max-width:50% !important}
}

/* Make sure every section's columns can sit side by side */
.firer-sec > .elementor-container{flex-wrap:wrap}