/**
 * Phoenix Garage Hero 1.0.2
 * All rules are scoped to .oph-hero. There are no global selectors or theme overrides.
 */
.oph-hero,
.oph-hero * { box-sizing: border-box; }

.oph-hero {
  --oph-gold: #f5b814;
  --oph-red: #dc0012;
  --oph-overlay: .50;
  --oph-bg-position: center center;
  --oph-bg-mobile-position: center center;
  position: relative;
  isolation: isolate;
  /* Break out of boxed Elementor sections without changing the site header. */
  width: var(--oph-viewport-width, 100vw);
  max-width: none;
  min-height: 716px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;

  overflow: hidden;
  background: linear-gradient(135deg, #3e4347, #18191b 65%, #333);
  color: #fff;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

.oph-hero__background,
.oph-hero__shade { position: absolute; inset: 0; display: block; pointer-events: none; }
.oph-hero__background {
  z-index: 0;
  overflow: hidden;
  background-size: cover;
  background-position: var(--oph-bg-position);
  background-repeat: no-repeat;
}
.oph-hero__background img {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--oph-bg-position);
  opacity: 1; visibility: visible;
}
/* Diagnostic shown only to logged-in editors if no background is configured. */
.oph-hero__photo-notice {
  position: absolute; z-index: 4; left: 18px; top: 18px;
  max-width: min(480px, calc(100% - 36px));
  padding: 12px 16px; border-left: 4px solid #f7c548;
  border-radius: 4px; background: #fdf8e9; color: #292a30;
  font: 600 13px/1.45 Arial, sans-serif;
}
.oph-hero__shade {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0,0,0,var(--oph-overlay)) 0%, rgba(0,0,0,var(--oph-overlay)) 58%, rgba(0,0,0,var(--oph-overlay)) 100%),
    linear-gradient(0deg, rgba(0,0,0,.32), transparent 48%);
}

.oph-hero__layout {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  min-height: inherit;
  padding: 48px 5.2% 34px;
  display: grid;
  grid-template-columns: minmax(0, 60.5%) minmax(0, 39.5%);
  grid-template-rows: auto auto auto;
  column-gap: 0;
  align-content: end;
  align-items: end;
}
.oph-hero__intro { grid-column: 1; grid-row: 1; min-width: 0; margin-bottom: 18px; z-index: 1; }
.oph-hero__heading {
  font-family: 'Arial Black', 'Montserrat', Impact, Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(46px, 5.75vw, 98px);
  line-height: .995;
  letter-spacing: -.046em;
  text-transform: uppercase;
  margin: 0 0 16px !important;
  padding: 0 !important;
  text-shadow: 0 4px 10px rgba(0,0,0,.26);
}
.oph-hero__heading span { display: block; }
.oph-hero__heading-white { color: #fff; white-space: nowrap; }
.oph-hero__heading-gold {
  color: var(--oph-gold);
  background: linear-gradient(180deg, #ffe666 0%, var(--oph-gold) 58%, #d89a05 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.oph-hero__description {
  margin: 0 !important;
  padding: 0 !important;
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-weight: 750;
  font-size: clamp(21px, 2.28vw, 36px);
  line-height: 1.12;
  letter-spacing: -.032em;
  color: white;
  max-width: 770px;
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
}
.oph-hero__description span { display: block; }

.oph-hero__benefits {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1.02fr 1.07fr 1.12fr;
  gap: clamp(8px, 1.1vw, 20px);
  list-style: none !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  width: 100%;
  max-width: 830px;
  min-width: 0;
  z-index: 1;
}
.oph-hero__benefit {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: clamp(8px, .9vw, 14px);
}
.oph-hero__benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 clamp(46px, 4.4vw, 68px);
  width: clamp(46px, 4.4vw, 68px);
  height: clamp(46px, 4.4vw, 68px);
  border-radius: 50%;
  background: linear-gradient(150deg, #ffce2c 0%, var(--oph-gold) 58%, #ca8b00 100%);
  color: white;
  box-shadow: 0 4px 10px rgba(0,0,0,.17), inset 0 1px 2px rgba(255,255,255,.35);
}
.oph-hero__svg { width: 51%; height: 51%; display:block; overflow:visible; }
.oph-hero__benefit-label {
  display: block;
  max-width: 170px;
  color: white;
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: clamp(14px, 1.36vw, 21px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
  text-shadow: 0 2px 4px rgba(0,0,0,.48);
}
.oph-hero__work { grid-column: 1; grid-row: 3; justify-self: start; z-index: 1; }
.oph-hero__button,
.oph-hero__button:visited {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 12px;
  font-family: 'Arial Black', Arial, sans-serif;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: normal;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.016em;
  transition: transform .24s ease, box-shadow .24s ease, filter .24s ease;
  cursor: pointer;
}
.oph-hero__button:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.oph-hero__button--gold,
.oph-hero__button--gold:visited {
  width: clamp(245px, 24vw, 375px);
  min-height: 83px;
  padding: 18px 22px;
  border-radius: 6px;
  background: linear-gradient(140deg, #f8c51c, var(--oph-gold), #dfa000);
  border: 1px solid rgba(255,255,255,.13);
  color: #fff !important;
  font-size: clamp(17px, 1.65vw, 25px);
  box-shadow: 0 6px 16px rgba(0,0,0,.20);
}
.oph-hero__offer {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: end;
  justify-self: stretch;
  min-width: 0;
  width: 100%;
  z-index: 2;
  padding: 0 0 24px 8px;
}
.oph-hero__sticker-wrap { width: 100%; max-width: 550px; transform-origin: 50% 54%; position: relative; }
.oph-hero__sticker { display: block; width: 100%; height: auto; max-width: 100%; filter: drop-shadow(0 8px 7px rgba(0,0,0,.24)); }
.oph-hero__button--red,
.oph-hero__button--red:visited {
  width: min(100%, 430px);
  min-height: 89px;
  margin-top: -6px;
  padding: 14px 16px;
  font-size: clamp(16px, 1.62vw, 25px);
  color: #fff !important;
  background: linear-gradient(135deg, #ee0017, var(--oph-red) 64%, #ac0010);
  border: 3px solid #fff;
  border-radius: 22px;
  box-shadow: 0 6px 0 rgba(0,0,0,.35), 0 15px 20px rgba(0,0,0,.18), inset 0 1px 1px rgba(255,255,255,.21);
}
.oph-hero__button--red .oph-hero__arrow { flex: 0 0 auto; transition: transform .24s ease; }
.oph-hero__editable-sticker {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 100%; min-height: 370px;
  padding: 42px 15px 45px;
  background: #ffdc0b; color: #0d0d0d; text-align: center;
  border: 10px solid #ffba03;
  outline: 4px solid #9a5800;
  clip-path: polygon(50% 0,56% 5%,63% 0,69% 7%,77% 3%,81% 12%,90% 10%,91% 20%,99% 22%,96% 32%,100% 40%,96% 50%,100% 59%,96% 68%,99% 77%,90% 80%,89% 91%,81% 89%,75% 98%,66% 94%,58% 100%,50% 95%,42% 100%,34% 94%,25% 98%,19% 90%,10% 91%,10% 81%,1% 77%,4% 68%,0 60%,4% 50%,0 41%,4% 32%,1% 22%,10% 20%,10% 10%,19% 12%,24% 3%,32% 7%,40% 0,46% 5%);
  filter: drop-shadow(0 8px 9px rgba(0,0,0,.25));
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
  font-family: Impact, 'Arial Black', Arial, sans-serif;
  font-weight: 900;
}
.oph-hero__editable-sticker-title { font-size: clamp(23px, 2.5vw, 43px); line-height:1; }
.oph-hero__editable-sticker-number { display:block; width: 115%; padding: 10px 2px; margin: 9px 0 13px; color:#fff; background: #d90011; transform: rotate(-5deg); text-shadow: 2px 3px rgba(0,0,0,.25); font-size: clamp(35px, 5.5vw, 90px); line-height:1.08; }
.oph-hero__editable-sticker-detail { max-width:90%; font-size:clamp(22px,2.7vw,43px); line-height:.95; }
.oph-hero__editable-sticker-fine { max-width:76%; font-family:Arial,sans-serif; font-weight:800; font-size:clamp(13px,1.16vw,19px); margin-top:8px; line-height:1.13; }

/* Hover effects are additions, not required for any action. */
@media (hover: hover) and (pointer: fine) {
  .oph-hero__button:hover { transform: translateY(-4px); filter: brightness(1.065); }
  .oph-hero__button--gold:hover { color:#fff !important; box-shadow: 0 12px 25px rgba(0,0,0,.29); }
  .oph-hero__button--red:hover { color:#fff !important; box-shadow: 0 9px 0 rgba(0,0,0,.26), 0 19px 28px rgba(0,0,0,.23); }
  .oph-hero__button--red:hover .oph-hero__arrow { transform: translateX(5px); }
}
.oph-hero__button:active { transform: translateY(1px); }

/* JS adds readiness only when motion can be run; content otherwise remains visible. */
.oph-hero[data-entrance="yes"].oph-motion-ready .oph-hero__reveal { opacity: 0; transform: translateY(22px); }
.oph-hero[data-entrance="yes"].oph-motion-ready.oph-is-visible .oph-hero__reveal { animation: oph-rise .7s cubic-bezier(.20,.8,.15,1) both; }
.oph-hero.oph-is-visible .oph-hero__intro { animation-delay: .06s !important; }
.oph-hero.oph-is-visible .oph-hero__benefits { animation-delay: .22s !important; }
.oph-hero.oph-is-visible .oph-hero__work { animation-delay: .34s !important; }
.oph-hero.oph-is-visible .oph-hero__offer { animation-delay: .42s !important; }
@keyframes oph-rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }

.oph-hero.oph-is-visible[data-offer-animation="float"] .oph-hero__sticker-wrap { animation: oph-float 4.3s ease-in-out 1s infinite; }
.oph-hero.oph-is-visible[data-offer-animation="pulse"] .oph-hero__sticker-wrap { animation: oph-pulse 3.4s ease-in-out 1s infinite; }
@keyframes oph-float { 0%, 100% { transform:translateY(0) rotate(-.4deg); } 50% { transform:translateY(-10px) rotate(.5deg); } }
@keyframes oph-pulse { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.026); } }

/* 1200px: maintain the desktop design without overflowing narrower laptops. */
@media (max-width: 1200px) and (min-width: 768px) {
  .oph-hero__layout { grid-template-columns:minmax(0,60%) minmax(0,40%); padding-bottom:30px; }
  .oph-hero__heading { font-size:clamp(41px,5.7vw,70px); }
  .oph-hero__description { font-size:clamp(20px,2.2vw,27px); }
  .oph-hero__benefit-icon { flex-basis:46px; width:46px; height:46px; }
  .oph-hero__benefit-label { font-size:14px; }
  .oph-hero__offer { padding-bottom:15px; }
  .oph-hero__button--red { min-height:67px; font-size:clamp(14px,1.6vw,18px); }
  .oph-hero__button--gold { min-height:69px; }
}

@media (max-width: 767px) {
  .oph-hero { min-height: 780px; }
  .oph-hero__background img { object-position: var(--oph-bg-mobile-position); }
  .oph-hero__background { background-position: var(--oph-bg-mobile-position); }
  .oph-hero__shade {
    background: linear-gradient(180deg,rgba(0,0,0,.17) 0%,rgba(0,0,0,.49) 18%,rgba(0,0,0,.68) 40%,rgba(0,0,0,.91) 100%);
  }
  .oph-hero__layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height:inherit;
    padding: clamp(100px,27vw,145px) 22px 30px;
  }
  .oph-hero__intro { order: 1; width:100%; margin-bottom:9px; }
  .oph-hero__heading {
    font-size: clamp(27px, 8.2vw, 54px);
    line-height: .98;
    letter-spacing: -.052em;
    margin-bottom: 11px !important;
  }
  .oph-hero__description {
    font-size: clamp(17px, 4.45vw, 25px);
    line-height: 1.16;
    letter-spacing: -.034em;
  }
  .oph-hero__offer { order:2; display:flex; align-self:center; align-items:stretch; padding:0; margin:0 0 16px; max-width:430px; }
  .oph-hero__sticker-wrap { max-width: min(100%,360px); align-self:center; }
  .oph-hero__button--red {
    width:100%; max-width:100%;
    min-height:62px;
    margin-top:-3px;
    padding: 10px 13px;
    border-radius:15px;
    border-width:2px;
    font-size: clamp(15px, 4.35vw, 20px);
    white-space:nowrap;
  }
  .oph-hero__button--red .oph-hero__arrow { width:23px; height:23px; }
  .oph-hero__benefits {
    order:3;
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:0 0 18px !important;
    max-width:100%;
  }
  .oph-hero__benefit { gap:13px; }
  .oph-hero__benefit-icon { flex:0 0 43px; width:43px; height:43px; }
  .oph-hero__benefit-label { max-width:unset; font-size:clamp(14px,4vw,18px); line-height:1.2; }
  .oph-hero__work { order:4; width:100%; }
  .oph-hero__button--gold { width:100%; min-height:62px; font-size:19px; border-radius:6px; }
  .oph-hero__editable-sticker { min-height:275px; padding:35px 15px 36px; }
  .oph-hero__editable-sticker-title { font-size:clamp(24px,8vw,38px); }
  .oph-hero__editable-sticker-number { font-size:clamp(42px,12vw,66px); }
  .oph-hero__editable-sticker-detail { font-size:clamp(25px,8vw,38px); }
  .oph-hero__editable-sticker-fine { font-size:clamp(12px,3vw,16px); }
}
@media (max-width: 360px) {
  .oph-hero__layout { padding-left:16px; padding-right:16px; }
  .oph-hero__heading { font-size:clamp(26px,8.05vw,30px); }
  .oph-hero__offer { margin-bottom:12px; }
  .oph-hero__benefit-label { font-size:14px; }
}
@media (prefers-reduced-motion: reduce) {
  .oph-hero *, .oph-hero *::before, .oph-hero *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .oph-hero__reveal { opacity:1 !important; transform:none !important; }
}

/* ================================================================
 * v1.3.0 Ultimate style controls + approved 3-column mobile mockup
 * All selectors remain scoped to this hero instance.
 * Elementor-generated selectors win when a user changes a setting.
 * ================================================================ */
.oph-hero {
  --oph-mobile-overlay-top: rgba(0,0,0,.09);
  --oph-mobile-overlay-mid: rgba(0,0,0,.52);
  --oph-mobile-overlay-bottom: rgba(0,0,0,.92);
  --oph-hover-duration: 240ms;
  --oph-hover-lift: 4px;
  --oph-float-duration: 4.3s;
  --oph-float-distance: 10px;
}
.oph-hero__layout {
  grid-template-columns: minmax(0,var(--oph-left-column,60.5%)) minmax(0,1fr);
}
.oph-hero__description span + span { display:block; }
.oph-hero__sticker {
  --oph-sticker-shadow-x: 0px;
  --oph-sticker-shadow-y: 8px;
  --oph-sticker-shadow-blur: 7px;
  --oph-sticker-shadow-color: rgba(0,0,0,.28);
  --oph-sticker-offset-x: 0px;
  --oph-sticker-offset-y: 0px;
  --oph-sticker-scale: 1;
  --oph-sticker-rotate: 0deg;
  transform: translate(var(--oph-sticker-offset-x),var(--oph-sticker-offset-y)) rotate(var(--oph-sticker-rotate)) scale(var(--oph-sticker-scale));
  filter: drop-shadow(var(--oph-sticker-shadow-x) var(--oph-sticker-shadow-y) var(--oph-sticker-shadow-blur) var(--oph-sticker-shadow-color));
}
.oph-hero__button { transition-duration: var(--oph-hover-duration); }
@media (hover:hover) and (pointer:fine) {
  .oph-hero__button:hover { transform: translateY(calc(-1 * var(--oph-hover-lift))); }
}
.oph-hero.oph-is-visible[data-offer-animation="float"] .oph-hero__sticker-wrap {
  animation-duration: var(--oph-float-duration);
}
@keyframes oph-float {
  0%,100% { transform: translateY(0) rotate(-.4deg); }
  50% { transform: translateY(calc(-1 * var(--oph-float-distance))) rotate(.5deg); }
}

/* The approved mobile design: main text, three circular benefits, offer,
 * full-width GOLD discount CTA. The existing header is separate. */
@media (max-width: 767px) {
  .oph-hero {
    min-height: 790px;
    width: var(--oph-viewport-width,100vw);
  }
  .oph-hero__shade {
    background: linear-gradient(180deg,
      var(--oph-mobile-overlay-top) 0%,
      rgba(0,0,0,.22) 19%,
      var(--oph-mobile-overlay-mid) 45%,
      var(--oph-mobile-overlay-bottom) 99%);
  }
  .oph-hero__layout {
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    min-height:inherit;
    max-width: 570px;
    margin:0 auto;
    padding: var(--oph-mobile-top-space,115px) var(--oph-mobile-side,20px) 30px;
    gap: var(--oph-mobile-gap,0px);
  }
  .oph-hero__intro {
    width:100%; max-width:100%; margin:0 0 18px;
    order:1; align-self:stretch;
  }
  .oph-hero__heading {
    margin:0 0 11px !important;
    padding:0 !important;
    font-size:clamp(26px,8.25vw,42px);
    line-height:1.03;
    letter-spacing:-.05em;
  }
  .oph-hero__heading-white, .oph-hero__heading-gold {
    white-space:normal;
    overflow-wrap:normal;
    font-size:inherit;
  }
  .oph-hero__description {
    font-size:clamp(16px,4.25vw,21px);
    line-height:1.15;
    max-width:100%;
  }
  .oph-hero__benefits {
    order:2;
    width:100%; max-width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin:0 0 10px !important;
    padding:0 !important;
    align-items:start;
  }
  .oph-hero__benefit {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:7px;
    text-align:center;
    min-width:0;
  }
  .oph-hero__benefit-icon {
    flex:0 0 45px;
    width:45px; height:45px;
    margin:0;
  }
  .oph-hero__benefit-label {
    max-width:100%;
    font-size:clamp(11px,3.15vw,14px);
    line-height:1.12;
    text-align:center;
    font-weight:800;
  }
  .oph-hero__offer {
    order:3; display:flex;
    flex-direction:column;
    align-items:center;
    align-self:stretch;
    justify-content:flex-start;
    margin:0 0 4px;
    padding:0;
    min-width:0;
    width:100%; max-width:100%;
  }
  .oph-hero__sticker-wrap {
    width:100%; max-width:min(100%, var(--oph-mobile-sticker-size,350px));
    margin:0 auto -2px;
    flex:0 1 auto;
    align-self:center;
  }
  .oph-hero__sticker { width:100%; max-width:100%; height:auto; }
  .oph-hero__button--red, .oph-hero__button--red:visited {
    width:var(--oph-mobile-cta-width,100%);
    max-width:100%;
    min-height:var(--oph-mobile-cta-height,64px);
    margin:0 auto;
    padding:13px 10px;
    border: 1px solid var(--oph-mobile-cta-border,transparent) !important;
    border-radius:var(--oph-mobile-cta-radius,5px);
    background:var(--oph-mobile-cta-bg,#d59e22) !important;
    color:var(--oph-mobile-cta-fg,#fff) !important;
    box-shadow:0 5px 14px rgba(0,0,0,.2);
    font-size:clamp(14px,3.7vw,19px);
    line-height:1.1;
    white-space:normal;
  }
  .oph-hero__button--red .oph-hero__arrow { width:22px; height:22px; }
  .oph-hero__work { order:4; width:100%; margin-top:12px; }
  .oph-hero:not(.oph-hero--mobile-gallery) .oph-hero__work { display:none; }
  .oph-hero--mobile-gallery .oph-hero__button--gold {
    width:100%; min-height:53px;
  }
  .oph-hero__editable-sticker { min-height:240px; }
  .oph-hero__editable-sticker-title { font-size:clamp(22px,6vw,34px); }
  .oph-hero__editable-sticker-number { font-size:clamp(38px,11vw,67px); }
  .oph-hero__editable-sticker-detail { font-size:clamp(20px,6vw,32px); }
  .oph-hero__editable-sticker-fine { font-size:clamp(11px,3vw,15px); }
}
@media (max-width:767px) and (hover:hover) and (pointer:fine) {
  .oph-hero__button--red:hover {
    background: var(--oph-mobile-cta-hover,#c48a13) !important;
    color:var(--oph-mobile-cta-fg,#fff) !important;
  }
}
@media (max-width: 350px) {
  .oph-hero__layout { padding-top:var(--oph-mobile-top-space,94px); padding-left:16px; padding-right:16px; }
  .oph-hero__heading { font-size:clamp(26px,8.1vw,31px); }
  .oph-hero__description { font-size:15px; }
  .oph-hero__benefit-label { font-size:11px; }
  .oph-hero__benefit-icon { width:40px; height:40px; flex-basis:40px; }
  .oph-hero__button--red { min-height:57px; font-size:13px; }
}
@media (prefers-reduced-motion:reduce) {
  .oph-hero__sticker-wrap {animation:none !important;}
}