/*
 * 11.6.17 — Heading proportion + wrap correction
 * Presentation only. Keeps the existing clay visual language, markup, content,
 * commerce, provider, search and SEO behaviour intact.
 *
 * Goal: headings should read like headings, not oversized paragraphs. Desktop
 * titles use intentional 1–3 line shapes; tablet/mobile scale down earlier so
 * words do not orphan or collide with surrounding UI.
 */

/* --------------------------------------------------------------------------
   Global heading hygiene
   -------------------------------------------------------------------------- */
body.nt-clay :where(
  .bm-home h1,
  .bm-home h2,
  .bm-hero--page h1,
  .nt-page-hero-v84 h1,
  .nt-guide-hero-v9 h1,
  .nt-shop-intro-v84 h1,
  .nt-directory-v6 h1,
  .nt-archive-v6 h1,
  .nt-search-v6 h1,
  .nt-journal-header h1,
  .single-product .nt-product-summary-v6 h1
){
  text-wrap:balance!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}

/* --------------------------------------------------------------------------
   Homepage hero — same split design, much calmer headline geometry
   -------------------------------------------------------------------------- */
body.nt-clay .bm-home > .bm-hero .bm-hero__grid{
  grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr)!important;
  gap:clamp(42px,4.4vw,62px)!important;
  align-items:center!important;
}
body.nt-clay .bm-home > .bm-hero .bm-hero__copy{
  max-width:720px!important;
  min-width:0!important;
}
body.nt-clay .bm-home > .bm-hero #heroTitle,
body.nt-clay .bm-home > .bm-hero .bm-display{
  width:100%!important;
  max-width:13.6ch!important;
  margin:16px 0 16px!important;
  font-size:clamp(3rem,3.25vw,3.3rem)!important;
  line-height:.985!important;
  letter-spacing:-.052em!important;
  font-weight:800!important;
}
body.nt-clay .bm-home > .bm-hero #heroTitle > span{
  display:block!important;
  width:auto!important;
  max-width:100%!important;
  text-wrap:balance!important;
}
body.nt-clay .bm-home > .bm-hero .bm-hero__lead{
  max-width:61ch!important;
  margin-top:0!important;
  font-size:.98rem!important;
  line-height:1.67!important;
}
body.nt-clay .bm-home > .bm-hero .bm-eyebrow{
  margin-bottom:12px!important;
}

/* --------------------------------------------------------------------------
   Homepage section headings — one consistent, editorial scale
   -------------------------------------------------------------------------- */
body.nt-clay .bm-home :where(
  .bm-display--sm,
  .bm-section__head h2,
  .nt-section-heading h2,
  .nt-process__intro h2
){
  width:auto!important;
  max-width:22ch!important;
  margin-top:0!important;
  font-size:clamp(2rem,2.65vw,2.72rem)!important;
  line-height:1.035!important;
  letter-spacing:-.042em!important;
  font-weight:750!important;
  text-wrap:balance!important;
}
body.nt-clay .bm-home .bm-section__head{
  margin-bottom:clamp(24px,2.5vw,32px)!important;
}
body.nt-clay .bm-home .bm-section__head .bm-eyebrow,
body.nt-clay .bm-home .nt-section-heading .nt-kicker{
  margin-bottom:10px!important;
}
body.nt-clay .bm-home .bm-section__lead{
  margin-top:14px!important;
  max-width:64ch!important;
  font-size:.98rem!important;
  line-height:1.68!important;
}

/* Category heading: keep the short title visually compact beside its CTA. */
body.nt-clay .bm-home #bmCategoriesTitle{
  max-width:760px!important;
}
body.nt-clay .bm-home .bm-section__head--row{
  align-items:flex-end!important;
  gap:22px!important;
}

/* Two-part headings already carry semantic line breaks in the existing markup.
   Give them enough measure that each phrase stays intact instead of wrapping into
   accidental 3–4 line towers. */
body.nt-clay .bm-home #bmTransferTitle{
  max-width:24ch!important;
  margin-inline:auto!important;
}
body.nt-clay .bm-home #bmPricingTitle{
  max-width:20ch!important;
}
body.nt-clay .bm-home #bmListingsTitle,
body.nt-clay .bm-home #ntFeaturedTitle,
body.nt-clay .bm-home #bmFaqTitle,
body.nt-clay .bm-home #bmVerifyTitle{
  max-width:21ch!important;
}
body.nt-clay .bm-home :where(#bmTransferTitle,#bmPricingTitle,#bmListingsTitle,#ntFeaturedTitle,#bmFaqTitle,#bmVerifyTitle) > span{
  display:block!important;
  max-width:100%!important;
  text-wrap:balance!important;
}

/* Centered delivery section: the heading should be the focal point, not a tall
   column of words. */
body.nt-clay .bm-home .bm-section__head--center{
  max-width:960px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body.nt-clay .bm-home .bm-section__head--center .bm-section__lead{
  max-width:720px!important;
}

/* Pricing copy gets a useful reading measure without changing the table/layout. */
body.nt-clay .bm-home .bm-narrow{
  max-width:1120px!important;
}
body.nt-clay .bm-home .bm-narrow > .bm-section__head{
  max-width:820px!important;
}

/* Generic public-page H1 scale: preserve the design but stop giant page titles. */
body.nt-clay :where(
  .bm-hero--page .bm-display,
  .nt-page-hero-v84 h1,
  .nt-guide-hero-v9 h1,
  .nt-shop-intro-v84 h1,
  .nt-directory-v6 h1,
  .nt-archive-v6 h1,
  .nt-search-v6 h1,
  .nt-journal-header h1
){
  max-width:20ch!important;
  font-size:clamp(2.5rem,3.5vw,3.55rem)!important;
  line-height:1.01!important;
  letter-spacing:-.048em!important;
}

/* Product titles keep the current card/layout, just improve typographic shape. */
body.nt-clay.single-product .nt-product-summary-v6 :where(h1,#productTitle){
  max-width:22ch!important;
  font-size:clamp(2rem,2.7vw,2.8rem)!important;
  line-height:1.035!important;
  letter-spacing:-.047em!important;
  text-wrap:balance!important;
}

/* --------------------------------------------------------------------------
   Tablet — switch the hero to one column before the headline gets squeezed.
   -------------------------------------------------------------------------- */
@media (max-width:1040px){
  body.nt-clay .bm-home > .bm-hero .bm-hero__grid{
    grid-template-columns:1fr!important;
    gap:30px!important;
  }
  body.nt-clay .bm-home > .bm-hero .bm-hero__copy{
    max-width:760px!important;
  }
  body.nt-clay .bm-home > .bm-hero #heroTitle,
  body.nt-clay .bm-home > .bm-hero .bm-display{
    max-width:14ch!important;
    font-size:clamp(2.8rem,6vw,3.2rem)!important;
  }
  body.nt-clay .bm-home > .bm-hero .bm-hero__media{
    width:min(100%,760px)!important;
    max-width:760px!important;
    margin-inline:auto!important;
  }
}

/* --------------------------------------------------------------------------
   Mobile — smaller type, more breathing room, no heading overflow.
   -------------------------------------------------------------------------- */
@media (max-width:820px){
  body.nt-clay .bm-home > .bm-hero #heroTitle,
  body.nt-clay .bm-home > .bm-hero .bm-display{
    max-width:14.5ch!important;
    margin:13px 0 13px!important;
    font-size:clamp(2.3rem,9.6vw,2.85rem)!important;
    line-height:1!important;
    letter-spacing:-.048em!important;
  }
  body.nt-clay .bm-home :where(
    .bm-display--sm,
    .bm-section__head h2,
    .nt-section-heading h2,
    .nt-process__intro h2
  ){
    max-width:24ch!important;
    font-size:clamp(1.75rem,7vw,2.15rem)!important;
    line-height:1.06!important;
    letter-spacing:-.038em!important;
  }
  body.nt-clay .bm-home #bmTransferTitle{
    max-width:20ch!important;
  }
  body.nt-clay .bm-home .bm-section__head--row{
    align-items:flex-start!important;
    gap:10px!important;
  }
  body.nt-clay .bm-home .bm-section__lead{
    margin-top:12px!important;
    font-size:.91rem!important;
    line-height:1.62!important;
  }
  body.nt-clay :where(
    .bm-hero--page .bm-display,
    .nt-page-hero-v84 h1,
    .nt-guide-hero-v9 h1,
    .nt-shop-intro-v84 h1,
    .nt-directory-v6 h1,
    .nt-archive-v6 h1,
    .nt-search-v6 h1,
    .nt-journal-header h1
  ){
    max-width:24ch!important;
    font-size:clamp(2rem,8.6vw,2.6rem)!important;
    line-height:1.04!important;
  }
  body.nt-clay.single-product .nt-product-summary-v6 :where(h1,#productTitle){
    max-width:24ch!important;
    font-size:clamp(1.82rem,7.2vw,2.28rem)!important;
    line-height:1.06!important;
  }
}

@media (max-width:430px){
  body.nt-clay .bm-home > .bm-hero #heroTitle,
  body.nt-clay .bm-home > .bm-hero .bm-display{
    max-width:100%!important;
    font-size:clamp(2.15rem,10.3vw,2.55rem)!important;
  }
  body.nt-clay .bm-home :where(
    .bm-display--sm,
    .bm-section__head h2,
    .nt-section-heading h2,
    .nt-process__intro h2
  ){
    max-width:100%!important;
    font-size:clamp(1.62rem,7.6vw,1.95rem)!important;
  }
}