/* James Woolford Design — site balance, production logo and portfolio refinements v33 */

/* -------------------------------------------------------------------------- */
/* Header and footer brand lockup                                              */
/* -------------------------------------------------------------------------- */
.site-header__brand,
.mobile-menu__brand,
.jw-footer__wordmark {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  background-image: url("./images/jw-brand-lockup-white.png") !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.site-header__brand {
  width: clamp(188px, 14vw, 238px) !important;
  height: 46px !important;
}

.mobile-menu__brand {
  width: 230px !important;
  height: 48px !important;
}

.jw-footer__wordmark {
  width: min(100%, 270px) !important;
  height: 54px !important;
}

.site-header__brand > *,
.mobile-menu__brand > *,
.jw-footer__wordmark > * {
  display: none !important;
}

.site-header__brand:focus-visible,
.mobile-menu__brand:focus-visible,
.jw-footer__wordmark:focus-visible {
  outline: 2px solid #5f7fff !important;
  outline-offset: 5px !important;
}

/* -------------------------------------------------------------------------- */
/* Optional estimator — same balanced editorial language as the trust section */
/* -------------------------------------------------------------------------- */
.quote-launcher--feature {
  padding: clamp(82px, 8vw, 132px) 0 !important;
  color: #101010 !important;
  border-top: 1px solid rgba(16, 16, 16, .11) !important;
  border-bottom: 1px solid rgba(16, 16, 16, .11) !important;
  background:
    radial-gradient(circle at 84% 20%, rgba(36, 88, 255, .14), rgba(36, 88, 255, .04) 28%, transparent 58%),
    rgba(247, 246, 242, .94) !important;
}

.quote-launcher--feature::before {
  width: 360px !important;
  height: 360px !important;
  left: -150px !important;
  bottom: -210px !important;
  background: rgba(70, 75, 94, .07) !important;
  filter: blur(42px) !important;
}

.quote-launcher__feature-grid {
  grid-template-columns: minmax(0, 1.14fr) minmax(360px, .86fr) !important;
  gap: clamp(56px, 7vw, 118px) !important;
  align-items: center !important;
}

.quote-launcher__feature-copy .section-kicker {
  color: #2458ff !important;
}

.quote-launcher__feature-copy h2 {
  max-width: 12ch !important;
  margin: 0 !important;
  color: #101010 !important;
  font-size: clamp(54px, 4.8vw, 78px) !important;
  line-height: .94 !important;
  letter-spacing: -.065em !important;
  text-wrap: balance;
}

.quote-launcher__feature-copy > p {
  max-width: 610px !important;
  margin: 26px 0 0 !important;
  color: #5f5b54 !important;
  font-size: clamp(16px, 1.05vw, 18px) !important;
  line-height: 1.72 !important;
}

.quote-launcher__steps {
  margin-top: 32px !important;
}

.quote-launcher__steps span {
  border-color: rgba(16, 16, 16, .13) !important;
  background: rgba(255, 255, 255, .52) !important;
  color: #625e57 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .66) !important;
}

.quote-launcher__steps b {
  color: #2458ff !important;
}

.quote-launcher__feature-card {
  width: min(100%, 500px) !important;
  min-height: 350px !important;
  padding: clamp(28px, 3vw, 44px) !important;
  border-color: rgba(16, 16, 16, .15) !important;
  background: rgba(250, 249, 245, .82) !important;
  color: #101010 !important;
  box-shadow: 0 28px 70px rgba(25, 31, 53, .10) !important;
}

.quote-launcher__feature-card::before {
  background: rgba(36, 88, 255, .20) !important;
  filter: blur(42px) !important;
}

.quote-launcher__feature-card > span {
  color: #2458ff !important;
}

.quote-launcher__feature-card strong {
  max-width: 9ch !important;
  margin-top: 54px !important;
  color: #101010 !important;
  font-size: clamp(38px, 3.5vw, 56px) !important;
  line-height: .94 !important;
}

.quote-launcher__feature-card p {
  color: #625e57 !important;
}

.quote-launcher__feature-card small {
  color: #777168 !important;
}

.quote-launcher__feature-card small a {
  color: #242424 !important;
  border-bottom-color: rgba(16, 16, 16, .25) !important;
}

/* -------------------------------------------------------------------------- */
/* Process introduction — constrained, balanced and not stretched full width  */
/* -------------------------------------------------------------------------- */
.jw-process-heading {
  width: min(1440px, calc(100% - clamp(40px, 8vw, 160px))) !important;
  max-width: 1440px !important;
  grid-template-columns: minmax(0, 1.24fr) minmax(320px, .76fr) !important;
  gap: clamp(54px, 7vw, 118px) !important;
  align-items: center !important;
  margin: 0 auto clamp(46px, 5vw, 72px) !important;
}

.jw-process-heading h2 {
  max-width: 13ch !important;
  margin: 0 !important;
  font-size: clamp(54px, 4.7vw, 78px) !important;
  line-height: .94 !important;
  letter-spacing: -.065em !important;
  text-wrap: balance;
}

.jw-process-heading > p {
  align-self: center !important;
  max-width: 460px !important;
  margin: 0 !important;
  color: #625e57 !important;
  font-size: clamp(16px, 1.05vw, 18px) !important;
  line-height: 1.72 !important;
}

/* -------------------------------------------------------------------------- */
/* FAQ introduction — shorter title, sensible width and balanced columns      */
/* -------------------------------------------------------------------------- */
.faq-section__layout {
  grid-template-columns: minmax(390px, .9fr) minmax(0, 1.1fr) !important;
  gap: clamp(58px, 7vw, 116px) !important;
}

.faq-section__intro h2 {
  max-width: 12ch !important;
  font-size: clamp(52px, 4.55vw, 72px) !important;
  line-height: .94 !important;
  letter-spacing: -.065em !important;
  text-wrap: balance;
}

.faq-section__intro p {
  max-width: 420px !important;
  margin-top: 22px !important;
}

/* -------------------------------------------------------------------------- */
/* Portfolio archive — elegant rather than oversized                          */
/* -------------------------------------------------------------------------- */
.portfolio-hero {
  padding: clamp(100px, 9vw, 138px) 0 48px !important;
}

.portfolio-hero__inner h1 {
  max-width: 15ch !important;
  font-size: clamp(58px, 5.6vw, 92px) !important;
  line-height: .91 !important;
  letter-spacing: -.068em !important;
  text-wrap: balance;
}

.portfolio-hero__bottom {
  margin-top: clamp(46px, 5vw, 72px) !important;
  align-items: center !important;
}

/* The global interactive footer already contains the project CTA. */
.portfolio-page-cta,
.portfolio-system-note {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Responsive refinements                                                      */
/* -------------------------------------------------------------------------- */
@media (min-width: 1101px) {
  .jw-process-heading h2 {
    white-space: nowrap;
  }
}

@media (max-width: 1100px) {
  .site-header__brand {
    width: 190px !important;
    height: 42px !important;
  }

  .quote-launcher__feature-grid,
  .jw-process-heading,
  .faq-section__layout {
    grid-template-columns: 1fr !important;
  }

  .quote-launcher__feature-grid {
    gap: 38px !important;
  }

  .quote-launcher__feature-action {
    justify-content: flex-start !important;
  }

  .quote-launcher__feature-card {
    width: 100% !important;
    min-height: 330px !important;
  }

  .jw-process-heading,
  .faq-section__layout {
    gap: 24px !important;
  }

  .jw-process-heading > p,
  .faq-section__intro p {
    max-width: 650px !important;
  }

  .faq-section__intro {
    position: relative !important;
    top: auto !important;
  }

  .portfolio-hero__inner h1 {
    max-width: 13ch !important;
  }
}

@media (max-width: 760px) {
  .site-header__brand {
    width: 172px !important;
    height: 38px !important;
  }

  .mobile-menu__brand {
    width: 205px !important;
    height: 42px !important;
  }

  .quote-launcher--feature {
    padding: 72px 0 !important;
  }

  .quote-launcher__feature-copy h2,
  .jw-process-heading h2,
  .faq-section__intro h2,
  .portfolio-hero__inner h1 {
    font-size: clamp(44px, 12.2vw, 62px) !important;
    line-height: .95 !important;
  }

  .quote-launcher__feature-card {
    min-height: 310px !important;
    padding: 26px 22px !important;
  }

  .quote-launcher__feature-card strong {
    margin-top: 42px !important;
  }

  .jw-process-heading {
    width: calc(100% - 36px) !important;
    margin-bottom: 28px !important;
  }

  .faq-section__layout {
    gap: 38px !important;
  }

  .portfolio-hero {
    padding: 86px 0 34px !important;
  }

  .portfolio-hero__bottom {
    margin-top: 40px !important;
    gap: 18px !important;
  }
}