/* ==========================================================================
   Iron Shore Roofing — homepage styling refresh
   --------------------------------------------------------------------------
   Reference direction: modern dark editorial styling — wide-tracked eyebrow
   labels, oversized condensed display headings, hairline structure instead of
   filled boxes, generous vertical rhythm, and a circular arrow affordance on
   service links.

   HARD CONSTRAINTS OBSERVED
   · No font families are changed. The site already runs Barlow Condensed /
     Oswald / Open Sans, which is the same type category as the reference; the
     premium read is achieved with scale, tracking and spacing instead.
   · No brand colours are introduced. Blue #1a5fd4 / #3b7ef5 and the orange
     CTA are untouched; every new line and tint is white-at-low-alpha.
   · Nothing is restructured. No grid becomes rows, no element is removed, no
     copy is rewritten. This file only restyles what is already there.
   · `border-radius: 0` is preserved throughout — the existing components and
     both references share that sharp-cornered language.

   SPECIFICITY NOTE
   mobile-optimize.css sets !important on .section-padding, .section-title,
   .service-card and .area-town inside max-width queries. Size and spacing
   changes here are therefore scoped to min-width so they cannot fight the
   deliberate mobile tuning; only treatment-level rules (borders, tracking,
   image filters) apply at every width.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Section labels — wide-tracked eyebrow with a leading rule
   -------------------------------------------------------------------------- */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 3.4px;
}

.section-label::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--color-primary-light, #3b7ef5);
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   2. Display headings — bigger, tighter, more deliberate
   -------------------------------------------------------------------------- */
.section-title {
  line-height: 0.99;
  letter-spacing: -0.3px;
}

@media (min-width: 768px) {
  .section-title {
    font-size: clamp(38px, 3.7vw, 54px);
  }
}

/* --------------------------------------------------------------------------
   3. Vertical rhythm — more air between sections
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .section-padding {
    padding-top: 112px;
    padding-bottom: 112px;
  }
}

/* Hairline seam between adjacent bands so the page reads as deliberate
   sections rather than a continuous dark scroll. */
.section-dark + .section-darker,
.section-darker + .section-dark,
.section-dark + .section-dark,
.section-darker + .section-darker {
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

/* --------------------------------------------------------------------------
   4. Service cards — hairline frames, live imagery, circular arrow
   -------------------------------------------------------------------------- */
.service-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.012);
  transition: border-color 260ms ease, transform 260ms ease, background-color 260ms ease;
}

.service-card:hover,
.service-card:focus-visible {
  border-color: rgba(59, 126, 245, 0.55);
  background: rgba(26, 95, 212, 0.05);
}

@media (min-width: 1024px) {
  .service-card:hover,
  .service-card:focus-visible {
    transform: translateY(-4px);
  }
}

.service-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  /* Sits the photography into the dark page instead of letting it glare, then
     brings it fully to life on hover. */
  filter: saturate(0.82) brightness(0.9) contrast(1.04);
  transition: filter 420ms ease, transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.service-card:hover .service-card-image,
.service-card:focus-visible .service-card-image {
  filter: saturate(1) brightness(1) contrast(1);
  transform: scale(1.04);
}

@media (min-width: 768px) {
  .service-card-body {
    padding: 26px 24px 28px;
  }
}

/* Descriptions differ in length, which left the arrow links sitting at
   different heights across a row. Bottom-aligning them makes the row scan as a
   set rather than three loose cards. */
.service-card {
  display: flex;
  flex-direction: column;
}

.service-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.service-card-link {
  margin-top: auto;
  padding-top: 18px;
}

/* The circular arrow affordance from the reference. Applied to the existing
   link element, so if its inner glyph is ever swapped the layout still holds. */
.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.service-card-link > svg {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 7px;
  box-sizing: border-box;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background-color 240ms ease, transform 240ms ease;
}

.service-card:hover .service-card-link > svg {
  background: rgba(59, 126, 245, 0.16);
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   5. Why-us rows — structured hairline rows
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .why-card {
    padding: 18px 20px 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .why-card:last-child {
    border-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   6. Review cards — framed, with a quote mark
   -------------------------------------------------------------------------- */
.review-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.085);
  background: rgba(255, 255, 255, 0.014);
  transition: border-color 240ms ease;
}

.review-card:hover {
  border-color: rgba(59, 126, 245, 0.4);
}

.review-text {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   7. Process steps — one continuous rule, left-aligned like everything else
   --------------------------------------------------------------------------
   Two corrections here.

   First: a border-top on each .process-step produced four disconnected
   hairline stubs separated by the 32px grid gap, which read as a rendering
   fault rather than structure. The rule belongs on the grid so it runs
   unbroken across the row with the numbered steps hanging beneath it.

   Second: this section and the FAQ were the only two of nine whose headers
   were centred — the other seven are left-aligned, and so is the numbered
   "01 / 02 / 03 / 04" treatment Iron Shore already used in its previous hero.
   Aligning them is what makes the page scan as one deliberate system.
   The centring is set inline by the app, hence !important.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .process-grid {
    border-top: 1px solid rgba(255, 255, 255, 0.11);
    padding-top: 30px;
  }

  .process-step {
    border-top: 0;
    padding-top: 0;
  }
}

section:has(.process-grid) > .container > div:first-child,
section:has(.faq-list) > .container > div:first-child {
  text-align: left !important;
}

.process-step {
  text-align: left !important;
}

.process-number {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --------------------------------------------------------------------------
   8. Product cards and tags — hairline chips
   -------------------------------------------------------------------------- */
.product-card {
  border: 1px solid rgba(255, 255, 255, 0.085);
  background: rgba(255, 255, 255, 0.014);
  transition: border-color 240ms ease;
}

.product-card:hover {
  border-color: rgba(59, 126, 245, 0.4);
}

.product-brand {
  letter-spacing: 2.2px;
}

.product-tag {
  border: 1px solid rgba(59, 126, 245, 0.4);
  background: rgba(26, 95, 212, 0.09);
  letter-spacing: 1.1px;
}

/* --------------------------------------------------------------------------
   9. Service-area chips
   -------------------------------------------------------------------------- */
.area-town {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease;
}

.area-town:hover {
  border-color: rgba(59, 126, 245, 0.55);
  background: rgba(26, 95, 212, 0.12);
  color: #fff;
}

/* --------------------------------------------------------------------------
   10. Stat bar — divided columns
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .stat-item + .stat-item {
    border-left: 1px solid rgba(255, 255, 255, 0.16);
  }
}

.stat-label {
  letter-spacing: 2px;
}

/* --------------------------------------------------------------------------
   11. FAQ — hairline list with breathing room
   -------------------------------------------------------------------------- */
.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.faq-item:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 768px) {
  .faq-trigger {
    padding-top: 22px;
    padding-bottom: 22px;
  }
}

.faq-trigger:hover {
  color: #fff;
}

/* --------------------------------------------------------------------------
   12. CTA bands — a touch more presence
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .cta-band {
    padding-top: 92px;
    padding-bottom: 92px;
  }
}

.cta-band .section-title,
.cta-band h2 {
  letter-spacing: -0.3px;
}

/* --------------------------------------------------------------------------
   13. Reduced motion — drop the hover motion, keep every colour change
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card-image,
  .service-card-link > svg,
  .review-card,
  .product-card,
  .area-town {
    transition: none !important;
  }

  .service-card:hover,
  .service-card:focus-visible {
    transform: none !important;
  }

  .service-card:hover .service-card-image,
  .service-card:focus-visible .service-card-image {
    transform: none !important;
  }

  .service-card:hover .service-card-link > svg {
    transform: none !important;
  }
}


/* ==========================================================================
   Topbar phone icon alignment (desktop/tablet only)
   --------------------------------------------------------------------------
   .topbar-phone is display:block, and the site's SVG reset also makes the
   phone icon inside it display:block. Two stacked block-level things fall
   onto separate lines, so the icon rendered above the number instead of
   beside it. Mobile already has its own display:flex fix for this element
   at max-width:767px (mobile-optimize.css) and looks correct; this closes
   the matching gap for everything above that, where no such rule existed.
   ========================================================================== */
@media (min-width: 768px) {
  .topbar-phone {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
  }
}