/* Abermaw Decorating — responsive refinement layer
   Small, screenshot-led adjustments after the main responsive system. */

/* At portrait-tablet widths the split non-homepage masthead has too little room
   for copy + a 4:3 image. Stack it before either column starts forcing overflow. */
@media (max-width:900px){
  body.ad-unified-masthead.ad-content-page .hero-grid,
  body.ad-unified-masthead.ad-advice-page .article-hero-grid,
  body.ad-unified-masthead:is(.ad-services-hub,.ad-area-hub) .hub-hero>.wrap,
  body.ad-unified-masthead.ad-advice-hub .advice-hub-hero>.wrap,
  body.ad-unified-masthead.ad-case-hub .hero>.wrap{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:26px!important;
  }
  body.ad-unified-masthead:is(.ad-services-hub,.ad-area-hub) .hub-hero>.wrap>*:not(.topic-nav):not(.filters),
  body.ad-unified-masthead.ad-advice-hub .advice-hub-hero>.wrap>*:not(.topic-nav),
  body.ad-unified-masthead.ad-case-hub .hero>.wrap>*:not(.filters),
  body.ad-unified-masthead.ad-advice-hub .topic-nav,
  body.ad-unified-masthead.ad-case-hub .filters{
    grid-column:1!important;
  }
  body.ad-unified-masthead:is(.ad-services-hub,.ad-area-hub) .hub-hero>.wrap::after,
  body.ad-unified-masthead.ad-advice-hub .advice-hub-hero>.wrap::after,
  body.ad-unified-masthead.ad-case-hub .hero>.wrap::after{
    grid-column:1!important;
    grid-row:auto!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    aspect-ratio:4/3!important;
    margin-top:0!important;
  }
}

@media (max-width:760px){
  /* Let the homepage hero end with its content instead of forcing a viewport-height
     dark tail below the proof strip. */
  body.ad-homepage main#top>.hero,
  main#top>.hero{
    min-height:0!important;
    padding-top:clamp(26px,4svh,38px)!important;
    padding-bottom:22px!important;
  }

  /* The location/service kicker should read as a label, not compete with the H1. */
  body.ad-homepage main#top>.hero .hero-kicker,
  main#top>.hero .hero-kicker{
    margin-bottom:12px!important;
    max-width:100%!important;
    font-size:.62rem!important;
    line-height:1.35!important;
    letter-spacing:.105em!important;
  }

  /* Keep the approved exact three-line headline; tune only scale and rhythm. */
  body.ad-homepage main#top>.hero h1,
  main#top>.hero h1{
    margin-bottom:15px!important;
    font-size:clamp(1.82rem,8.05vw,2.18rem)!important;
    line-height:1.015!important;
  }

  body.ad-homepage main#top>.hero .hero-intro,
  main#top>.hero .hero-intro{
    max-width:35ch!important;
    margin-bottom:17px!important;
    font-size:clamp(.91rem,3.95vw,.98rem)!important;
    line-height:1.48!important;
    color:rgba(255,255,255,.8)!important;
  }

  body.ad-homepage main#top>.hero .hero-actions,
  main#top>.hero .hero-actions{gap:8px!important}
  body.ad-homepage main#top>.hero .hero-actions .btn,
  main#top>.hero .hero-actions .btn{
    min-height:52px!important;
    padding-inline:17px!important;
    font-size:.94rem!important;
  }
  body.ad-homepage main#top>.hero .quiet-link,
  main#top>.hero .quiet-link{
    padding:6px 0 3px!important;
    font-size:.84rem!important;
  }

  /* Compress the three explanatory steps into a neat mini process rather than a
     second dominant content block. */
  body.ad-homepage .hero-offer-note{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:5px!important;
    max-width:440px!important;
    margin-top:12px!important;
    padding-top:11px!important;
    border-top:1px solid rgba(255,255,255,.16)!important;
    font-size:.67rem!important;
    line-height:1.35!important;
    color:rgba(255,255,255,.68)!important;
  }
  body.ad-homepage .hero-offer-note span{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
  }
  body.ad-homepage .hero-offer-note span:before{
    width:4px!important;
    height:4px!important;
    flex:0 0 4px!important;
  }

  /* Turn the proof strip into three equal, legible trust statements. */
  body.ad-homepage main#top>.hero .hero-foot,
  main#top>.hero .hero-foot{
    margin-top:18px!important;
    padding-top:12px!important;
  }
  body.ad-homepage main#top>.hero .hero-proof,
  main#top>.hero .hero-proof{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
    font-size:.57rem!important;
    line-height:1.25!important;
  }
  body.ad-homepage main#top>.hero .hero-proof span,
  main#top>.hero .hero-proof span{min-width:0!important}
  body.ad-homepage main#top>.hero .hero-proof b,
  main#top>.hero .hero-proof b{
    display:block!important;
    margin-bottom:2px!important;
    font-size:.68rem!important;
    line-height:1.2!important;
  }

  /* Recover more of the room photograph while keeping reliable text contrast. */
  body.ad-homepage main#top>.hero .hero-wash,
  main#top>.hero .hero-wash{
    background:
      linear-gradient(90deg,rgba(7,14,24,.88) 0%,rgba(7,14,24,.69) 56%,rgba(7,14,24,.28) 100%),
      linear-gradient(0deg,rgba(7,14,24,.46) 0%,rgba(7,14,24,.10) 56%,rgba(7,14,24,.20) 100%)!important;
  }

  /* Colour Guide is deliberately its own visual template, so give its headline
     a safe phone scale instead of inheriting the large landing-page clamp. */
  body.ad-guide-page .hero h1{
    width:100%!important;
    max-width:100%!important;
    font-size:clamp(2.1rem,10.4vw,3rem)!important;
    line-height:1!important;
    letter-spacing:-.048em!important;
    overflow-wrap:break-word!important;
  }
  body.ad-guide-page .hero-grid{
    min-width:0!important;
    grid-template-columns:1fr!important;
  }
  body.ad-guide-page .hero-grid>*{min-width:0!important}
}

@media (max-width:380px){
  body.ad-homepage main#top>.hero,
  main#top>.hero{padding-top:24px!important;padding-bottom:20px!important}
  body.ad-homepage main#top>.hero .hero-kicker,
  main#top>.hero .hero-kicker{font-size:.58rem!important;letter-spacing:.09em!important}
  body.ad-homepage main#top>.hero h1,
  main#top>.hero h1{font-size:clamp(1.6rem,7.8vw,1.82rem)!important}
  body.ad-homepage main#top>.hero .hero-intro,
  main#top>.hero .hero-intro{font-size:.89rem!important}
  body.ad-homepage main#top>.hero .hero-proof,
  main#top>.hero .hero-proof{gap:7px!important;font-size:.53rem!important}
  body.ad-homepage main#top>.hero .hero-proof b,
  main#top>.hero .hero-proof b{font-size:.62rem!important}
  body.ad-guide-page .hero h1{font-size:clamp(1.95rem,10vw,2.35rem)!important}
}