/* =============================================================
   ARAS WELDING WORK — brand palette
   graphite  #191C20 / #24292E / #424B55   (steel, permanence)
   ember     #E2620F / #BB4B12             (molten metal, action)
   amber     #FFB020                       (highlight, buttons)
   warm      #F6F1EB                       (section ground)
   ============================================================= */
:root{
  --aras-graphite-900:#191C20;
  --aras-graphite-800:#24292E;
  --aras-graphite-700:#424B55;
  --aras-ember:#E2620F;
  --aras-ember-deep:#BB4B12;
  --aras-amber:#FFB020;
  --aras-warm:#F6F1EB;
  --aras-ink:#2D333B;
}
/* Amber buttons take a graphite label: 9.35:1 instead of 2.78:1 */
a.wpr-button,
a.wpr-button .wpr-button-text,
a.wpr-button i{ color:var(--aras-graphite-900) !important; }

/* Form submit */
button.wpr-button,
button[type=submit],
input[type=submit]{ background-color:var(--aras-ember) !important; color:#fff !important; }
button.wpr-button:hover,
button[type=submit]:hover,
input[type=submit]:hover{ background-color:#C2540E !important; }

/* Dividers */
.elementor-divider-separator{ border-top-color:var(--aras-graphite-700) !important; }

/* Home hero: the background composite already contains the welder,
   so the separate cut-out overlay would render him twice. */
img[src*="picture-2"]{ display:none !important; }

/* Hero framing on narrow screens.
   The hero art is 1.538:1; between the mobile breakpoint and full desktop the
   container is far taller than that, so `cover` crops the sides and cuts the
   welder off. Bias the crop toward him instead of the centre. */
@media (max-width:1200px) and (min-width:768px){
  .elementor-element-893cc7b{ background-position:70% center !important; }
}

/* Text scrim for the mid widths, where the flame sits under the copy.
   The hero is position:relative with no existing ::after, so this is free. */
@media (max-width:1200px) and (min-width:768px){
  .elementor-element-893cc7b::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:linear-gradient(100deg,
      rgba(14,17,20,.90) 0%,
      rgba(14,17,20,.72) 38%,
      rgba(14,17,20,.30) 62%,
      rgba(14,17,20,0)   82%);
  }
  .elementor-element-893cc7b > *{ position:relative; z-index:1; }
}

/* ---------- mobile compatibility ---------- */

/* A few inherited containers overrun the viewport by 2-5px, which gives phones
   and iPad portrait a stray horizontal scroll. Nothing here scrolls sideways
   on purpose, so clamp it. */
html, body { overflow-x: hidden; max-width: 100%; }

/* Social icons ship at 12x12 - far under the 44px touch minimum. Grow the hit
   area without changing how big the glyph looks. */
/* Their wrapper is only 120px wide, so a 40px min-WIDTH pushes five icons onto
   three rows. Grow the touch area vertically only: the row stays intact and the
   strip is still comfortably tappable. */
.elementor-social-icon{
  min-height:36px; padding-inline:3px;
  display:inline-flex !important; align-items:center; justify-content:center;
}

/* Footer / menu links were ~19px tall: too short to hit reliably on a phone. */
.elementor-icon-list-item > a,
.wpr-mobile-menu-item{ display:inline-block; padding-block:7px; }

/* Keep media inside its box on every breakpoint. */
img, video, iframe{ max-width:100%; }

/* Footer quick-links are bare <a> inside headings, so the icon-list rule above
   misses them. They render ~19px tall: give them a real touch target on small
   screens. */
@media (max-width:1024px){
  .elementor-heading-title > a,
  .elementor-icon-box-title > a{ display:inline-block; padding-block:10px; }
}