/* HORIZON HAWK 1.9.0 — category, application and homepage brand-presentation refinement.
   Visual-only layer: no vehicle data, form structure or business claims are changed. */

/* ---------- Global secondary-page finish ---------- */
.hh-site-main .hh-section-head{position:relative}
.hh-site-main .hh-section-head>.hh-eyebrow,
.hh-site-main .hh-copy-narrow>.hh-eyebrow,
.hh-site-main .hh-media-split .hh-eyebrow{
  display:flex;align-items:center;gap:10px;
}
.hh-site-main .hh-section-head>.hh-eyebrow::before,
.hh-site-main .hh-copy-narrow>.hh-eyebrow::before,
.hh-site-main .hh-media-split .hh-eyebrow::before{
  content:"";width:28px;height:2px;border-radius:2px;background:var(--hh-green);flex:0 0 auto;
}
.hh-section-dark .hh-section-head>.hh-eyebrow::before,
.hh-section-dark .hh-media-split .hh-eyebrow::before{background:#a8e2bd}

/* Category hero/overview should feel like one buying journey, not disconnected blocks. */
body[class*="hh-page-"] .hh-page-hero-copy{max-width:850px}
body[class*="hh-page-"] .hh-page-hero h1{max-width:900px}
.hh-category-overview{gap:clamp(34px,5vw,70px)}
.hh-category-overview aside{
  position:relative;overflow:hidden;padding:30px;
  background:linear-gradient(145deg,#f1f8f3,#e5f3e9);
  box-shadow:0 18px 44px rgba(13,78,53,.07);
}
.hh-category-overview aside::after{
  content:"";position:absolute;right:-46px;bottom:-46px;width:130px;height:130px;border-radius:50%;
  border:28px solid rgba(31,138,85,.055);pointer-events:none;
}
.hh-category-overview aside h3{position:relative;z-index:1}
.hh-category-overview aside>p,.hh-category-overview aside .hh-chip-row{position:relative;z-index:1}

/* Four category selection steps become a compact visual sequence on desktop. */
@media(min-width:1051px){
  .hh-number-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .hh-number-list li{display:block;min-height:190px;padding:24px;border-radius:20px;background:#fff}
  .hh-number-list span{margin-bottom:20px}
  .hh-number-list p{font-size:14px}
}

/* Category application imagery: consistent editorial crop and restrained hover. */
.hh-application-card{
  display:flex;flex-direction:column;height:100%;
  border-color:rgba(17,78,55,.11);box-shadow:0 12px 32px rgba(16,68,47,.045);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.hh-application-card:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(16,68,47,.10);border-color:rgba(31,138,85,.22)}
.hh-application-card img{aspect-ratio:16/10;object-position:center;transition:transform .45s ease}
.hh-application-card:hover img{transform:scale(1.025)}
.hh-application-card>div{display:flex;flex:1;flex-direction:column;padding:22px 22px 24px}
.hh-application-card .hh-text-link{margin-top:auto;padding-top:6px}

/* Dark OEM strip becomes a cleaner brand panel and prevents oversized imagery. */
.hh-oem-strip{gap:clamp(34px,5vw,66px)}
.hh-oem-strip>div:first-child{overflow:hidden;border-radius:24px;background:#123d30}
.hh-oem-strip img{display:block;aspect-ratio:4/3;object-fit:cover;object-position:center;box-shadow:none}
.hh-oem-strip>div:last-child{max-width:670px}
.hh-oem-strip .hh-btn{margin-top:8px}

/* ---------- Applications overview ---------- */
.hh-page-applications .hh-application-page-grid{gap:22px}
.hh-page-applications .hh-application-page-card{
  min-height:360px;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 44px rgba(8,43,29,.10);
}
.hh-page-applications .hh-application-page-card::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,29,20,.02) 28%,rgba(4,29,20,.82) 100%);pointer-events:none;
}
.hh-page-applications .hh-application-page-card>span{z-index:1;padding:94px 24px 24px;background:none}
.hh-page-applications .hh-application-page-card strong{font-size:clamp(22px,2vw,27px);letter-spacing:-.02em}
.hh-page-applications .hh-application-page-card small{max-width:42ch;font-size:13px;line-height:1.58}
.hh-page-applications .hh-application-page-card b{display:inline-flex;align-items:center;gap:8px;margin-top:3px;color:#c8f0d8}

/* Application detail buyer-needs cards should read as an intentional 2x2 decision matrix. */
body[class*="hh-page-"] .hh-icon-grid article{
  box-shadow:0 10px 28px rgba(15,72,50,.035);transition:transform .25s ease,box-shadow .25s ease;
}
body[class*="hh-page-"] .hh-icon-grid article:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(15,72,50,.075)}

/* ---------- Homepage brand system ---------- */
.hh-home .hh-home-brand-section-190{position:relative;isolation:isolate}
.hh-home .hh-home-brand-section-190 h2{max-width:850px}
.hh-home .hh-home-brand-section-190 .hh-kicker,
.hh-home .hh-home-brand-section-190 .hh-eyebrow{letter-spacing:.18em}

/* Product/category areas: slightly more premium, less generic-card feel. */
.hh-home .hh-home-categories-190 .hh-card,
.hh-home .hh-home-featured-190 .hh-product{
  border-color:rgba(16,81,56,.10);box-shadow:0 10px 30px rgba(11,60,41,.04);
}
.hh-home .hh-home-categories-190 .hh-card:hover,
.hh-home .hh-home-featured-190 .hh-product:hover{box-shadow:0 22px 48px rgba(11,60,41,.10)}

/* Homepage applications: make the four scenes the strongest visual story after products. */
.hh-home .hh-home-applications-190 .hh-app,
.hh-home .hh-home-applications-152 .hh-app{min-height:350px;border-radius:24px;box-shadow:0 20px 46px rgba(7,45,30,.09)}
.hh-home .hh-home-applications-190 .hh-app>div,
.hh-home .hh-home-applications-152 .hh-app>div{padding:110px 26px 26px;background:linear-gradient(transparent,rgba(4,29,20,.92))}
.hh-home .hh-home-applications-190 .hh-app h3{font-size:clamp(23px,2.2vw,29px)}

/* OEM gets its own soft branded stage instead of looking like a generic split. */
.hh-home .hh-home-oem-190,
.hh-home .hh-home-oem-152{background:linear-gradient(135deg,#f7fbf8,#eef7f1)!important}
.hh-home .hh-home-oem-190 img,
.hh-home .hh-home-oem-152 img.hh-home-oem-image-152{box-shadow:0 24px 60px rgba(12,63,43,.11)!important}

/* Quality / statistics: use darker, more deliberate proof panels. */
.hh-home .hh-home-quality-190 .hh-process article{background:rgba(255,255,255,.065);border-color:rgba(255,255,255,.14)}
.hh-home .hh-home-stats-190 .hh-stat-grid{gap:14px}
.hh-home .hh-home-stats-190 .hh-stat-grid>div{
  padding:24px;border:1px solid rgba(255,255,255,.15);border-radius:18px;background:rgba(255,255,255,.055);backdrop-filter:blur(6px)
}
.hh-home .hh-home-stats-190 .hh-stat-grid>div{border-top:1px solid rgba(255,255,255,.15)}

/* About images should read as a curated composition, never loose placeholders. */
.hh-home .hh-home-about-190 img,
.hh-home .hh-home-about-152 img{box-shadow:0 22px 50px rgba(11,61,41,.10)}

/* Catalogue and inquiry get a clear closing rhythm. */
.hh-home .hh-home-catalog-190{background:#f7faf8!important}
.hh-home .hh-home-inquiry-190{background:linear-gradient(135deg,#edf7f0,#f8fbf9)!important}

@media(max-width:1050px){
  .hh-page-applications .hh-application-page-card{min-height:330px}
  .hh-oem-strip img{aspect-ratio:16/10}
  .hh-home .hh-home-stats-190 .hh-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:620px){
  .hh-site-main .hh-section-head>.hh-eyebrow::before,
  .hh-site-main .hh-copy-narrow>.hh-eyebrow::before,
  .hh-site-main .hh-media-split .hh-eyebrow::before{width:20px}
  .hh-category-overview aside{padding:22px}
  .hh-application-card>div{padding:17px}
  .hh-page-applications .hh-application-page-card{min-height:310px}
  .hh-page-applications .hh-application-page-card>span{padding:88px 20px 20px}
  .hh-oem-strip img{aspect-ratio:4/3}
  .hh-home .hh-home-applications-190 .hh-app,
  .hh-home .hh-home-applications-152 .hh-app{min-height:300px}
  .hh-home .hh-home-stats-190 .hh-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .hh-home .hh-home-stats-190 .hh-stat-grid>div{padding:16px 12px}
}

@media(prefers-reduced-motion:reduce){
  .hh-application-card,.hh-application-card img,.hh-application-page-card img,
  .hh-home .hh-home-categories-190 .hh-card,.hh-home .hh-home-featured-190 .hh-product{transition:none!important}
}

/* 1.9.0 live hotfix retained exactly in the 1.10.1 baseline.
 * The live FAQ markup uses a button, not <summary>; keep flex-start/gap/wrapping
 * and add min-width/overflow safety to the button contents. */
@media(max-width:620px){
  .hh-faq button{align-items:flex-start;gap:12px;white-space:normal;min-width:0}
  .hh-faq button>*{min-width:0;white-space:normal;overflow-wrap:anywhere;word-break:normal}
}


/* HORIZON HAWK: centre a five-card buyer-selection list on desktop. */
@media (min-width: 1051px) {
  .hh-number-list:has(> li:nth-child(5)):not(:has(> li:nth-child(6))) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hh-number-list:has(> li:nth-child(5)):not(:has(> li:nth-child(6))) > li { grid-column: span 2; }
  .hh-number-list:has(> li:nth-child(5)):not(:has(> li:nth-child(6))) > li:nth-child(4) { grid-column: 2 / span 2; }
}