/* HADS V37 — PHONE HERO SYSTEM + COMPACT CATALOGUE NAV
   PHONE ONLY. Desktop/tablet >=761px stays untouched. */

@media (max-width:760px){
  /* =========================================================
     1) SHARED PHONE HERO LANGUAGE / SPACING / TYPOGRAPHY
     ========================================================= */
  body{overflow-x:hidden!important}

  /* Standard public heroes: compact, premium and image-led. */
  body:not(.page-home) .hero{
    min-height:0!important;
    height:auto!important;
    border-radius:0 0 34px 34px!important;
    overflow:hidden!important;
  }
  body:not(.page-home) .hero .hero-content{
    min-height:0!important;
    height:auto!important;
    width:100%!important;
    max-width:none!important;
    padding:56px 22px 54px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    align-items:flex-start!important;
  }
  body:not(.page-home) .hero .hero-tag,
  body:not(.page-home) .hero .hero-kicker{
    margin:0 0 15px!important;
    font-size:10px!important;
    line-height:1.25!important;
    letter-spacing:.24em!important;
  }
  body:not(.page-home) .hero h1{
    max-width:100%!important;
    margin:0!important;
    font-size:clamp(39px,10.7vw,54px)!important;
    line-height:.98!important;
    letter-spacing:-.052em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    text-wrap:balance!important;
  }
  body:not(.page-home) .hero h1 span{line-height:inherit!important}
  body:not(.page-home) .hero p{
    max-width:100%!important;
    margin:20px 0 0!important;
    font-size:15px!important;
    line-height:1.55!important;
  }
  body:not(.page-home) .hero .hero-actions,
  body:not(.page-home) .hero .hero-buttons{
    width:100%!important;
    margin-top:22px!important;
    gap:9px!important;
  }
  body:not(.page-home) .hero .hero-actions a,
  body:not(.page-home) .hero .hero-buttons a,
  body:not(.page-home) .hero .btn{
    min-height:48px!important;
    padding:0 18px!important;
    border-radius:18px!important;
    font-size:10px!important;
  }

  /* =========================================================
     2) HOME — validated premium phone composition
     ========================================================= */
  .page-home #homeHero.hero{
    min-height:0!important;
    height:auto!important;
    border-radius:0 0 34px 34px!important;
    overflow:hidden!important;
  }
  .page-home #homeHero .hero-content-wrap{
    min-height:620px!important;
    padding:42px 22px 34px!important;
    display:flex!important;
    align-items:flex-end!important;
  }
  .page-home #homeHero .hero-copy{
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .page-home #homeHero .hero-experience{
    display:flex!important;
    align-items:baseline!important;
    gap:7px!important;
    width:auto!important;
    margin:0 0 14px!important;
    padding:0!important;
    background:none!important;
    border:0!important;
    box-shadow:none!important;
  }
  .page-home #homeHero .hero-experience::before{
    content:"";
    width:28px;
    height:2px;
    background:#b35acb;
    border-radius:2px;
    flex:0 0 auto;
  }
  .page-home #homeHero .hero-experience strong{
    font-size:15px!important;
    line-height:1!important;
    letter-spacing:.06em!important;
    color:#c46ede!important;
    white-space:nowrap!important;
  }
  .page-home #homeHero .hero-experience span{
    margin:0!important;
    font-size:7.3px!important;
    line-height:1!important;
    letter-spacing:.12em!important;
    color:#fff!important;
    opacity:.92!important;
    white-space:nowrap!important;
  }
  .page-home #homeHero .hero-title,
  .page-home #homeHero .hero-title-fixed{
    margin:0 0 15px!important;
    max-width:94%!important;
    font-size:clamp(38px,10.4vw,50px)!important;
    line-height:.96!important;
    letter-spacing:-.052em!important;
    text-wrap:balance!important;
  }
  .page-home #homeHero .hero-title-premium,
  .page-home #homeHero .hero-title-strong,
  .page-home #homeHero .hero-title-accent{
    display:inline!important;
    font-size:inherit!important;
    line-height:inherit!important;
  }
  .page-home #homeHero .hero-title-premium::after,
  .page-home #homeHero .hero-title-strong::after{content:" ";}
  .page-home #homeHero .hero-title-accent{color:#bf65da!important}
  .page-home #homeHero .hero-description{
    max-width:94%!important;
    margin:0 0 18px!important;
    font-size:13.5px!important;
    line-height:1.48!important;
    color:#f0ebf2!important;
  }
  /* Service pills should support the hero, never cover it. */
  .page-home #homeHero .hero-process-line{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:6px!important;
    margin:0 0 16px!important;
  }
  .page-home #homeHero .hero-process-line span,
  .page-home #homeHero .hero-process-line a{
    min-height:30px!important;
    padding:0 10px!important;
    border-radius:999px!important;
    font-size:7.8px!important;
    line-height:30px!important;
    white-space:nowrap!important;
  }
  .page-home #homeHero .hero-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    width:100%!important;
    margin:0!important;
  }
  .page-home #homeHero .hero-actions .btn,
  .page-home #homeHero .hero-actions a{
    min-height:48px!important;
    padding:0 12px!important;
    border-radius:17px!important;
    font-size:9px!important;
    letter-spacing:.02em!important;
  }
  .page-home #homeHero .hero-nav{
    position:relative!important;
    inset:auto!important;
    margin:16px 0 0!important;
    justify-content:center!important;
    gap:8px!important;
  }
  .page-home #homeHero .hero-dot{
    width:22px!important;
    min-width:22px!important;
    height:6px!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:99px!important;
    font-size:0!important;
  }
  .page-home #homeHero .hero-dot.active{width:34px!important}
  .page-home #homeHero .hero-progress{display:none!important}

  /* Home chapter buttons: compact premium touch rail. */
  .page-home #homeHero .home-path{
    padding:13px 12px 16px!important;
    border-radius:0 0 32px 32px!important;
  }
  .page-home #homeHero .home-path-inner{
    display:flex!important;
    gap:8px!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory!important;
    scrollbar-width:none!important;
    padding:2px 1px 8px!important;
  }
  .page-home #homeHero .home-path-inner::-webkit-scrollbar{display:none!important}
  .page-home #homeHero .home-path a{
    flex:0 0 48%!important;
    min-height:58px!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    grid-template-rows:1fr!important;
    gap:9px!important;
    padding:9px 11px!important;
    border-radius:18px!important;
    box-shadow:0 5px 0 #e2d6e7,0 10px 22px rgba(69,47,78,.08)!important;
    scroll-snap-align:start!important;
  }
  .page-home #homeHero .home-path a b{
    grid-row:auto!important;
    width:38px!important;
    height:38px!important;
    border-radius:13px!important;
    font-size:11px!important;
  }
  .page-home #homeHero .home-path a span{
    font-size:10px!important;
    line-height:1.1!important;
    font-weight:800!important;
  }
  .page-home #homeHero .home-path a small{display:none!important}

  /* =========================================================
     3) WORKWEAR INDEX + FAMILY PAGES — compact touch navigation
     ========================================================= */
  .hads-workwear-index .ww-family-rail,
  .hads-family-page .catalogue-family-nav{
    padding:12px 12px 16px!important;
    background:linear-gradient(180deg,#fff,#fbf8fc)!important;
    overflow:hidden!important;
  }
  .hads-workwear-index .ww-family-rail{
    display:flex!important;
    gap:8px!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory!important;
    scrollbar-width:none!important;
  }
  .hads-workwear-index .ww-family-rail::-webkit-scrollbar,
  .hads-family-page .catalogue-family-nav .container::-webkit-scrollbar{display:none!important}
  .hads-workwear-index .ww-family-rail a{
    flex:0 0 58%!important;
    min-width:0!important;
    min-height:58px!important;
    display:grid!important;
    grid-template-columns:38px 1fr 14px!important;
    align-items:center!important;
    gap:9px!important;
    padding:9px 11px!important;
    border-radius:18px!important;
    border:1px solid #eadfec!important;
    background:#fff!important;
    box-shadow:0 5px 0 #e3d7e8,0 10px 20px rgba(65,44,75,.07)!important;
    scroll-snap-align:start!important;
  }
  .hads-workwear-index .ww-family-rail .num{
    width:38px!important;
    height:38px!important;
    border-radius:13px!important;
    font-size:11px!important;
  }
  .hads-workwear-index .ww-family-rail .label{
    font-size:10px!important;
    line-height:1.1!important;
    white-space:normal!important;
  }
  .hads-workwear-index .ww-family-rail .arrow{font-size:12px!important}

  .hads-family-page .catalogue-family-nav .container{
    display:flex!important;
    gap:8px!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory!important;
    scrollbar-width:none!important;
    padding:2px 1px 8px!important;
  }
  .hads-family-page .catalogue-family-nav a{
    flex:0 0 auto!important;
    min-width:118px!important;
    min-height:46px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 13px!important;
    border-radius:16px!important;
    border:1px solid #eadfec!important;
    background:#fff!important;
    box-shadow:0 4px 0 #e3d7e8,0 8px 17px rgba(65,44,75,.07)!important;
    font-size:8.5px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    scroll-snap-align:start!important;
  }
  .hads-family-page .catalogue-family-nav a.active{
    color:#fff!important;
    background:linear-gradient(145deg,#a85bc5,#75408f)!important;
    border-color:transparent!important;
    box-shadow:0 4px 0 #69407c,0 9px 18px rgba(85,47,101,.18)!important;
  }

  /* =========================================================
     4) WHO WE ARE HERO VARIANTS
     ========================================================= */
  .hads-who-history .history-hero{
    min-height:0!important;
    padding:0!important;
    border-radius:0 0 34px 34px!important;
    overflow:hidden!important;
  }
  .hads-who-history .history-hero-content{
    min-height:0!important;
    padding:58px 22px 52px!important;
  }
  .hads-who-history .history-hero h1,
  .hads-who-today .today-hero h1{
    font-size:clamp(40px,10.7vw,54px)!important;
    line-height:.98!important;
    letter-spacing:-.052em!important;
  }
  .hads-who-history .history-hero p,
  .hads-who-today .today-hero p{font-size:15px!important;line-height:1.55!important}
  .hads-who-history .history-hero-quicknav,
  .hads-who-today .today-hero-nav{
    margin-top:0!important;
  }

  /* =========================================================
     5) EXPERTISE PROCESS / QUALITY / DELIVERY — keep image readable
     ========================================================= */
  .expertise-hero-with-nav .hero-content{padding-bottom:38px!important}
  .expertise-hero-quicknav{margin-top:0!important}

  /* Never allow very large decorative hero text to overflow phone width. */
  .hero *{max-width:100%}
}