/* ==========================================================================
   Iron Shore Roofing — "The Iron Shore Roofing System" hero
   --------------------------------------------------------------------------
   Additive, progressively-enhanced layer. Everything is scoped to
   `.hero.ish-sys-on`, a class added by system-hero.js only after it has
   successfully built the scene. If the JS or this stylesheet fails to load,
   the original hero renders untouched.

   Nothing below the hero is targeted by this file.
   ========================================================================== */

.hero.ish-sys-on {
  /* Brand tokens (reused from the site's existing palette) */
  --ish-navy-deep: #070b13;
  --ish-navy: #0b1120;
  --ish-navy-soft: #141a2b;
  --ish-sky-edge: #262c3e;          /* matches the illustration's own sky */
  --ish-blue: #1a5fd4;              /* --color-primary */
  --ish-blue-light: #3b7ef5;        /* --color-primary-light */
  --ish-text-dim: #8998ad;

  /* Layout knobs */
  --ish-art-w: 55%;                 /* right column width  */
  --ish-copy-max: min(460px, 36vw); /* keeps 60-80px+ clear of the artwork */
  --ish-sb-h: 92px;                 /* stage bar height    */

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  /* Tall enough that the artwork column is always wider than the artwork's own
     3:1.8 ratio, so the frame below resolves by width and never gets clamped
     (which would break its aspect box and misalign the mask + sweep). */
  min-height: max(620px, calc(31vw + 130px));
  background:
    radial-gradient(120% 90% at 8% 42%, rgba(26, 95, 212, 0.10) 0%, rgba(26, 95, 212, 0) 60%),
    linear-gradient(100deg,
      var(--ish-navy-deep) 0%,
      var(--ish-navy) 34%,
      var(--ish-navy-soft) 55%,
      var(--ish-sky-edge) 100%);
}

/* The original photographic background is replaced by the navy field above.
   Kept in the DOM (not removed) so the untouched markup still validates. */
.hero.ish-sys-on .hero-bg { display: none !important; }

/* Defensive: if the retired storm-hero layer is ever re-introduced, it must
   not paint underneath this hero. */
.hero.ish-sys-on .storm-hero-scene,
.hero.ish-sys-on .sh-overlay { display: none !important; }

/* The hero's inline lead-form card is retired for this layout; the primary
   CTA routes to the same estimate destination it always did. */
.hero.ish-sys-on .hero-form-card { display: none !important; }

/* --------------------------------------------------------------------------
   Left navy field — solid behind the copy, feathered into the illustration
   -------------------------------------------------------------------------- */
.hero.ish-sys-on .ish-panel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: var(--ish-sb-h);
  width: 58%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(7, 11, 19, 0.97) 0%,
    rgba(7, 11, 19, 0.95) 62%,
    rgba(7, 11, 19, 0.78) 78%,
    rgba(7, 11, 19, 0.34) 90%,
    rgba(7, 11, 19, 0) 100%);
}

/* --------------------------------------------------------------------------
   Right illustration column
   -------------------------------------------------------------------------- */
.hero.ish-sys-on .ish-art {
  position: absolute;
  right: 0;
  top: 0;
  bottom: var(--ish-sb-h);
  width: var(--ish-art-w);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}

/* Box is given the artwork's exact intrinsic ratio, so `height:auto` maths
   out to the same result as object-fit:contain with zero layout shift. */
.hero.ish-sys-on .ish-art-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1600 / 889;
  margin-left: auto;
  overflow: hidden;
  /* Feather the leading edge so the artwork emerges from the navy instead of
     sitting on it as a rectangle. Other edges get only a whisper of falloff. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,0.45) 5%, #000 14%),
    linear-gradient(to bottom, transparent 0%, #000 6%, #000 95%, transparent 100%),
    linear-gradient(to left, transparent 0%, #000 2%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,0.45) 5%, #000 14%),
    linear-gradient(to bottom, transparent 0%, #000 6%, #000 95%, transparent 100%),
    linear-gradient(to left, transparent 0%, #000 2%);
  mask-composite: intersect;
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}

.hero.ish-sys-on.ish-ready .ish-art-frame {
  animation: ish-art-in 1000ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes ish-art-in {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Parallax lives on its own layer so it never fights the reveal transform.
   The 1.02 scale guarantees the 7px drift can't expose a bare edge. */
.hero.ish-sys-on .ish-art-shift {
  position: absolute;
  inset: 0;
  transform: scale(1.02) translate3d(var(--ish-px, 0px), var(--ish-py, 0px), 0);
  will-change: transform;
}

.hero.ish-sys-on .ish-art-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
}

/* Branded light sweep: a soft band angled to the roof slope, travelling from
   the exposed rafters up toward the finished shingles. */
.hero.ish-sys-on .ish-sweep {
  position: absolute;
  left: -35%;
  right: -35%;
  top: 37%;
  height: 22%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: var(--ish-sweep-o, 0);
  transform: rotate(-19deg) translate3d(0, var(--ish-sweep-y, 260%), 0);
  will-change: transform, opacity;
  background: linear-gradient(180deg,
    rgba(59, 126, 245, 0) 0%,
    rgba(96, 156, 255, 0.10) 34%,
    rgba(198, 224, 255, 0.20) 50%,
    rgba(96, 156, 255, 0.10) 66%,
    rgba(59, 126, 245, 0) 100%);
}

/* --------------------------------------------------------------------------
   Copy column
   -------------------------------------------------------------------------- */
.hero.ish-sys-on .hero-inner {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
  /* The site's own rules zero the horizontal padding on .hero-inner, which
     left the copy flush to the viewport edge below 1280px and 20px out of
     alignment with the navigation above it. Restore the container gutter. */
  padding-left: 20px;
  padding-right: 20px;
}

.hero.ish-sys-on .hero-content {
  max-width: var(--ish-copy-max);
  padding-right: 8px;
}

.hero.ish-sys-on .hero-accent {
  margin-bottom: 20px;
}

.hero.ish-sys-on .ish-eyebrow {
  margin: 0 0 12px;
  font-family: Oswald, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.9px;
  text-transform: uppercase;
  color: var(--ish-blue-light);
}

.hero.ish-sys-on .hero-content h1 {
  margin: 0 0 18px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 900;
  font-size: clamp(38px, 3.3vw, 52px);
  line-height: 1.04;
  letter-spacing: 0.3px;
  color: #fff;
  text-transform: uppercase;
}

.hero.ish-sys-on .hero-content h1 span {
  display: block;
  color: var(--ish-blue-light);
}

.hero.ish-sys-on .hero-subtitle {
  margin: 0 0 28px;
  max-width: 44ch;
  font-size: 17px;
  line-height: 1.62;
  color: #b7c2d2;
}

/* The stacked check-list belongs to the previous hero copy deck. */
.hero.ish-sys-on .hero-badges { display: none !important; }

.hero.ish-sys-on .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 22px;
}

/* Reuses the site's existing .btn-primary / .btn-outline components; only the
   hero-specific sizing is adjusted so the CTA stays visually dominant. */
.hero.ish-sys-on .hero-ctas .btn-primary {
  padding: 15px 28px !important;
  font-size: 15px !important;
  box-shadow: 0 10px 26px rgba(224, 92, 26, 0.28);
}

.hero.ish-sys-on .hero-ctas .btn-outline {
  padding: 13px 24px !important;
  font-size: 15px !important;
  border-color: rgba(59, 126, 245, 0.85);
  background: rgba(26, 95, 212, 0.10);
}

.hero.ish-sys-on .hero-ctas .btn-outline:hover {
  background: rgba(26, 95, 212, 0.22);
}

.hero.ish-sys-on .ish-trust {
  margin: 0;
  font-size: 13.5px;
  letter-spacing: 0.3px;
  color: var(--ish-text-dim);
}

/* --------------------------------------------------------------------------
   Stage indicators
   -------------------------------------------------------------------------- */
.hero.ish-sys-on .ish-stagebar {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  min-height: var(--ish-sb-h);
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(7, 11, 19, 0.30) 0%, rgba(7, 11, 19, 0.72) 100%);
  backdrop-filter: blur(2px);
}

.hero.ish-sys-on .ish-stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero.ish-sys-on .ish-stage { margin: 0; }

.hero.ish-sys-on .ish-stage-btn {
  display: block;
  width: 100%;
  padding: 12px 14px 12px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--ish-text-dim);
  font-family: inherit;
  transition: color 260ms ease;
}

.hero.ish-sys-on .ish-stage-num {
  display: block;
  margin-bottom: 3px;
  font-family: Oswald, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: rgba(137, 152, 173, 0.62);
  transition: color 260ms ease;
}

.hero.ish-sys-on .ish-stage-label {
  display: block;
  margin-bottom: 10px;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: #93a2b6;
  transition: color 260ms ease;
}

.hero.ish-sys-on .ish-stage-track {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.13);
  overflow: hidden;
}

.hero.ish-sys-on .ish-stage-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ish-blue) 0%, var(--ish-blue-light) 100%);
  transform: scaleX(var(--f, 0));
  transform-origin: left center;
}

/* Active / completed states — colour, brightness and the progress line all
   carry the same information, so motion is never the only signal. */
.hero.ish-sys-on .ish-stage-btn.is-active .ish-stage-label,
.hero.ish-sys-on .ish-stage-btn:hover .ish-stage-label,
.hero.ish-sys-on .ish-stage-btn:focus-visible .ish-stage-label {
  color: #ffffff;
}

.hero.ish-sys-on .ish-stage-btn.is-active .ish-stage-num,
.hero.ish-sys-on .ish-stage-btn:hover .ish-stage-num,
.hero.ish-sys-on .ish-stage-btn:focus-visible .ish-stage-num {
  color: var(--ish-blue-light);
}

.hero.ish-sys-on .ish-stage-btn.is-active .ish-stage-track {
  background: rgba(59, 126, 245, 0.22);
}

.hero.ish-sys-on .ish-stage-btn.is-done .ish-stage-label { color: #cdd7e4; }

.hero.ish-sys-on .ish-stage-btn:focus-visible {
  outline: 2px solid var(--ish-blue-light);
  outline-offset: 3px;
}

/* ==========================================================================
   Tablet — narrower split, artwork pulled in so the gap never closes
   ========================================================================== */
@media (min-width: 1000px) and (max-width: 1279px) {
  .hero.ish-sys-on {
    /* The artwork gives back a little width here so the copy column stays
       wide enough to hold both CTAs on one row, while the clear gap between
       text and illustration still stays above 60px. */
    --ish-art-w: 46%;
    --ish-copy-max: min(470px, 46vw);
    --ish-sb-h: 86px;
    min-height: 560px;
  }
  .hero.ish-sys-on .ish-panel { width: 60%; }
  .hero.ish-sys-on .hero-subtitle { font-size: 16px; }
}

/* ==========================================================================
   Stacked layout — copy first, full illustration underneath, never overlapping
   ========================================================================== */
@media (max-width: 999px) {
  .hero.ish-sys-on {
    --ish-sb-h: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background:
      linear-gradient(180deg,
        var(--ish-navy-deep) 0%,
        var(--ish-navy) 42%,
        var(--ish-navy-soft) 72%,
        var(--ish-sky-edge) 100%);
  }

  .hero.ish-sys-on .ish-panel { display: none; }

  .hero.ish-sys-on .hero-inner {
    order: 1;
    display: block;
    padding-top: 34px;
    padding-bottom: 26px;
    /* Match the artwork's gutter so copy and illustration align. */
    padding-left: clamp(14px, 4vw, 28px);
    padding-right: clamp(14px, 4vw, 28px);
  }

  .hero.ish-sys-on .hero-content {
    max-width: 640px;
    padding-right: 0;
  }

  .hero.ish-sys-on .hero-content h1 {
    font-size: clamp(32px, 7.4vw, 46px) !important;
    line-height: 1.06 !important;
  }

  .hero.ish-sys-on .hero-subtitle {
    font-size: 16px;
    margin-bottom: 24px;
  }

  .hero.ish-sys-on .ish-trust {
    margin-bottom: 4px;
  }

  /* Artwork becomes a normal-flow block directly beneath the copy. */
  .hero.ish-sys-on .ish-art {
    order: 2;
    position: static;
    width: 100%;
    max-width: 100%;
    bottom: auto;
    display: block;
    padding: 0 clamp(14px, 4vw, 28px);
    box-sizing: border-box;
  }

  .hero.ish-sys-on .ish-art-frame {
    width: 100%;
    margin: 0 auto;
    /* Softer, symmetric falloff now that the artwork is centred. */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 4%, #000 96%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 4%, #000 96%, transparent 100%);
    mask-composite: intersect;
  }

  /* No pointer parallax on touch layouts. */
  .hero.ish-sys-on .ish-art-shift { transform: none; }

  .hero.ish-sys-on .ish-stagebar {
    order: 3;
    min-height: 0;
    margin-top: 18px;
    padding: 16px 0 22px;
    background: none;
    backdrop-filter: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .hero.ish-sys-on .ish-stages {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .hero.ish-sys-on .ish-stage-btn { padding: 8px 8px 8px 0; }
  .hero.ish-sys-on .ish-stage-num { font-size: 10px; }
  .hero.ish-sys-on .ish-stage-label {
    font-size: 11.5px;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
  }
}

/* Narrow phones — stages wrap to two rows so labels never get crushed. */
@media (max-width: 620px) {
  .hero.ish-sys-on .ish-stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
  }
  .hero.ish-sys-on .ish-stage-label { font-size: 12.5px; }

  /* Comfortably tappable, full-width CTAs. */
  .hero.ish-sys-on .hero-ctas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .hero.ish-sys-on .hero-ctas .btn-primary,
  .hero.ish-sys-on .hero-ctas .btn-outline {
    width: 100%;
    text-align: center;
    padding: 16px 20px !important;
    font-size: 15px !important;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   Reduced motion — full static illustration, all four stages legible
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero.ish-sys-on .ish-art-frame,
  .hero.ish-sys-on.ish-ready .ish-art-frame {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero.ish-sys-on .ish-art-shift {
    transform: none !important;
    transition: none !important;
  }
  .hero.ish-sys-on .ish-sweep { display: none !important; }
  .hero.ish-sys-on .ish-stage-fill {
    transform: scaleX(1) !important;
    transition: none !important;
  }
  .hero.ish-sys-on .ish-stage-label { color: #e7edf5 !important; }
  .hero.ish-sys-on .ish-stage-num { color: var(--ish-blue-light) !important; }
  .hero.ish-sys-on .ish-stage-track { background: rgba(59, 126, 245, 0.22) !important; }
}

/* Same treatment when the JS reduced-motion branch takes over. */
.hero.ish-sys-on.ish-rm .ish-art-frame { animation: none !important; opacity: 1 !important; transform: none !important; }
.hero.ish-sys-on.ish-rm .ish-sweep { display: none !important; }
.hero.ish-sys-on.ish-rm .ish-stage-fill { transform: scaleX(1) !important; }
.hero.ish-sys-on.ish-rm .ish-stage-label { color: #e7edf5 !important; }
.hero.ish-sys-on.ish-rm .ish-stage-num { color: var(--ish-blue-light) !important; }
.hero.ish-sys-on.ish-rm .ish-stage-track { background: rgba(59, 126, 245, 0.22) !important; }