/* Brand entries are destinations, with the same action at both homepage positions. */
.brand-option{grid-template-rows:var(--brand-logo-row) 1fr auto;padding-bottom:16px}
.brand-option::after{display:none}
.brand-action{font-size:20px;line-height:1.4;color:var(--gold);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.brand-option:hover .brand-action,.brand-option:focus-visible .brand-action{color:var(--ink)}
.brand-jumps{display:flex;flex-direction:column;align-items:stretch;gap:16px}
.brand-jumps a{justify-content:space-between;gap:24px;max-width:420px}
.brand-jumps a span{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:2px}
.brand-page .brand-product-intro{padding-top:190px;display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}
.brand-product-copy,.brand-product-photo,.brand-product-ranges>*{min-width:0}
.product-brand-logo{width:280px;height:auto;margin-bottom:40px}
.brand-product-copy h1{font-size:52px;overflow-wrap:break-word;hyphens:auto}
.brand-product-copy>p{max-width:480px;font-size:20px;margin:28px 0 0}
.brand-product-photo{margin:0;background:var(--surface)}
.brand-product-photo img{width:100%;height:auto}
.brand-product-ranges{background:var(--surface);display:grid;grid-template-columns:.8fr 1.2fr;gap:8%}
.brand-product-ranges h2{font-size:52px;overflow-wrap:break-word;hyphens:auto}
.product-range-list{margin:0}
.product-range-list>div{padding:24px;display:grid;grid-template-columns:1fr 1.5fr;gap:24px}
.product-range-list>div:nth-child(odd){background:var(--ground)}
.product-range-list dt,.product-range-list dd{margin:0;font-size:20px;overflow-wrap:break-word}
.product-range-list dt{font-weight:500}
.brand-product-close{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:36px}
.brand-product-close>p{font-size:20px;max-width:450px;margin:0}
.published-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:60px}
.published-product h2{font-size:32px;font-weight:400}
.published-product img{width:100%;height:auto}
/* Fill wide screens with the photograph. Retain its aspect ratio and a 1440px
   minimum stage so enlarging the browser still enlarges the image. */
.hsi-site{position:relative;width:100%;max-width:none;margin:0}
.hsi-site .hero{min-height:950px;padding-top:160px;padding-bottom:330px}
.hsi-site .hero-visual{inset:auto;right:0;top:50%;width:max(1440px,100%);aspect-ratio:1287/1500;transform:translateY(-50%)}
.hsi-site .hero-image,.hsi-site .hero-image[data-image=comptex]{object-position:center;transform:none;animation:none;transition:opacity .85s ease}
.hsi-site .hero h1{font-size:122px}
.hsi-site:not(.hsi-lang-en) .hero h1{font-size:100px}
.hsi-site .brand-navigation{--brand-logo-width:230px}
.hsi-site .hero-visual{animation:none}
.hero-copy{min-width:0}
/* Fit the complete desktop entrance within a laptop viewport. Keeping the
   brand links in normal flow also protects longer translations from overlap. */
@media(min-width:1001px){
    .hsi-site .hero-shade{background:linear-gradient(90deg,rgba(16,19,21,.72),rgba(16,19,21,.58) 28%,rgba(16,19,21,.16) 74%,rgba(16,19,21,.04)),linear-gradient(0deg,rgba(16,19,21,.98),rgba(16,19,21,0) 45%,rgba(16,19,21,.28))} /* taste-skill-ignore: neutral scrim keeps text readable over the full-width catalogue photograph. */
    .hsi-site .hero{min-height:min(680px,100svh);padding-top:108px;padding-bottom:52px;flex-direction:column;align-items:stretch;justify-content:center;gap:24px}
    .home.hsi-site .site-header{height:100px;padding-top:16px;padding-bottom:16px}
    .hsi-site .hero h1{font-size:clamp(64px,7.2vw,88px)}
    .hsi-site:not(.hsi-lang-en) .hero h1{font-size:clamp(58px,6.1vw,76px)}
    .hsi-site.hsi-lang-ar .hero h1{font-size:64px;line-height:1.2}
    .hsi-site .hero-details{max-width:560px;margin-top:16px}
    .hsi-site .hero .hero-intro{min-height:0}
    .hsi-site .hero-intro{font-size:18px;line-height:1.5}
    .hsi-site .hero-details .inquiry-link{margin-top:12px;min-height:44px;font-size:18px}
    .hsi-site .brand-navigation{position:static;--brand-logo-row:48px}
    .hsi-site .brand-description,.hsi-site .brand-action,.hsi-site .brand-prompt{font-size:18px}
    .hsi-site .brand-option{padding-top:8px;padding-bottom:8px;row-gap:10px}
    .hsi-site .scroll-cue{bottom:8px;font-size:16px;min-height:36px}
}
@media(min-width:1001px) and (max-height:700px){
    .hsi-site .hero{padding-top:100px;padding-bottom:48px;gap:20px}
    .hsi-site .hero h1{font-size:clamp(60px,6.8vw,80px)}
    .hsi-site:not(.hsi-lang-en) .hero h1{font-size:clamp(54px,5.8vw,68px)}
    .hsi-site.hsi-lang-ar .hero h1{font-size:60px;line-height:1.2}
}
@media(max-width:1000px){
    .hsi-site .hero h1{font-size:68px}
    .hsi-site:not(.hsi-lang-en) .hero h1{font-size:58px}
    .hsi-site .brand-navigation{--brand-logo-width:180px}
    .brand-page .brand-product-intro{gap:40px;padding-top:160px}
    .brand-product-copy h1,.brand-product-ranges h2{font-size:42px}
    .brand-product-ranges{grid-template-columns:1fr;gap:40px}
    .brand-product-ranges h2{max-width:none}
}
@media(max-width:600px){
    .hsi-site .hero,.hsi-site:not(.hsi-lang-en) .hero{min-height:820px;padding-top:120px;padding-bottom:300px}
    .hsi-site .hero-visual{width:770px;right:-170px;aspect-ratio:1287/1500}
    .hsi-site .hero h1{font-size:36px}
    .hsi-site:not(.hsi-lang-en) .hero h1{font-size:28px}
    .hsi-site.hsi-lang-zh .hero h1{font-size:46px}
    .hsi-site.hsi-lang-ja .hero h1,.hsi-site.hsi-lang-ko .hero h1{font-size:32px}
    .hsi-site.hsi-lang-ar .hero h1{font-size:38px}
    .hsi-site .brand-navigation{--brand-logo-width:136px;--brand-logo-row:40px}
    .brand-option{row-gap:12px}
    .brand-action{font-size:16px}
    .hsi-site:not(.hsi-lang-en) .brand-description{min-height:0}
    .brand-description{font-size:16px;max-width:none;overflow-wrap:break-word;hyphens:auto}
    .brand-jumps a{min-height:52px}
    .brand-page .brand-product-intro{grid-template-columns:1fr;padding-top:140px}
    .product-brand-logo{width:230px;margin-bottom:32px}
    .brand-product-copy h1,.brand-product-ranges h2{font-size:36px;max-width:none}
    .product-range-list>div{grid-template-columns:1fr;gap:12px;padding:20px}
    .published-products{grid-template-columns:1fr}
}
@media(max-width:360px){
    .hsi-site .hero h1{font-size:30px}
    .hsi-site:not(.hsi-lang-en) .hero h1{font-size:24px}
    .hsi-site.hsi-lang-zh .hero h1{font-size:38px}
    .hsi-site.hsi-lang-ja .hero h1,.hsi-site.hsi-lang-ko .hero h1{font-size:27px}
    .hsi-site.hsi-lang-ar .hero h1{font-size:32px}
}

/* Public contact details verified on Comptex's official homepage. Keep the
   desktop header within its existing height; only HSI's homepage has this row. */
.header-contact{position:absolute;top:4px;right:var(--space);display:flex;align-items:center;gap:24px;margin:0;font-size:16px;font-style:normal;line-height:1.25;direction:ltr}
.header-contact a{display:inline-flex;align-items:center;min-height:28px;white-space:nowrap}
.header-contact a:hover{color:var(--gold)}
.contact-channel{position:relative}
.contact-channel summary{display:flex;align-items:center;gap:6px;min-height:28px;cursor:pointer;list-style:none;white-space:nowrap}
.contact-channel summary::-webkit-details-marker{display:none}
.contact-channel summary::after{content:'⌄'}
.contact-channel summary:hover,.contact-channel[open] summary{color:var(--gold)}
.contact-channel summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.contact-channel-number{position:absolute;right:0;top:calc(100% + 8px);z-index:12;width:max-content;background:var(--surface);padding:16px 20px;font-size:18px;white-space:nowrap;user-select:all}
.home .site-header>.desktop-nav,.home .site-header>.language-switcher,.home .site-header>.menu-toggle{position:relative;top:14px}
@media(max-width:600px){
    .home .site-header{height:156px;padding-bottom:74px}
    .header-contact{top:86px;left:var(--space);right:var(--space);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;justify-items:start}
    .header-contact>a:nth-child(2),.header-contact>.contact-channel{justify-self:end}
    .header-contact a,.contact-channel summary{min-height:32px}
    .home .site-header>.desktop-nav,.home .site-header>.language-switcher,.home .site-header>.menu-toggle{top:0}
    .home.hsi-site .hero,.home.hsi-site:not(.hsi-lang-en) .hero{padding-top:172px}
}
@media(max-width:360px){.header-contact{font-size:14px}}
@media(min-width:601px) and (max-width:700px){.hsi-site:not(.hsi-lang-en) .hero h1{font-size:clamp(50px,9.2vw,58px)}}