/* EKAB prototype: shared, dependency-free presentation for the six active pages. */
:root { --blue:#3a57a7; --ink:#172342; --muted:#647089; --line:#dce2ee; --paper:#f7f8fb; --navy:#14264a; --accent:#3a57a7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; font-size:16px; line-height:1.65; }
a { color:var(--blue); text-underline-offset:4px; }
a:hover { text-decoration:underline; }
button { font:inherit; cursor:pointer; }
a,button { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #e09b24; outline-offset:5px; }
[hidden] { display:none !important; }
img { display:block; max-width:100%; height:auto; object-fit:contain; }
h1,h2,h3,h4,p { margin:0; }
h1,h2,h3,h4 { line-height:1.25; }
h1 { font-size:clamp(30px,4vw,48px); font-weight:500; letter-spacing:-.04em; }
h2 { font-size:clamp(24px,3vw,34px); font-weight:500; letter-spacing:-.025em; }
h3 { font-size:20px; font-weight:600; }
h4 { font-size:16px; font-weight:600; }
p { overflow-wrap:anywhere; }
main p + p { margin-top:12px; }
main h1 + p,main h2 + p { margin-top:20px; }
main ul { padding-left:24px; }
main li { margin-bottom:16px; }
.skip-link { position:absolute; left:20px; top:-100px; padding:12px 20px; z-index:10; background:white; }
.skip-link:focus { top:10px; }
.site-header { max-width:1248px; margin:auto; padding:26px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:block; flex-shrink:0; }
.brand img { width:174px; mix-blend-mode:multiply; }
.site-header nav { display:flex; align-items:center; gap:28px; }
.site-header nav a { display:flex; align-items:center; gap:20px; min-height:44px; font-size:14px; color:var(--ink); text-decoration:none; }
.site-header nav a:hover,.site-header nav a[aria-current] { color:var(--blue); text-decoration:underline; }
.site-header nav .contact-link { border:1px solid var(--line); border-radius:30px; padding:8px 20px; }
.product-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:12px 24px 24px; border-bottom:1px solid var(--line); }
.product-nav a { padding:10px 18px; min-height:44px; border-radius:30px; text-decoration:none; font-size:14px; color:var(--muted); }
.product-nav a:hover { background:#e9edf6; color:var(--blue); }
.product-nav a[aria-current] { background:var(--blue); color:white; }
main { width:min(1200px,calc(100% - 48px)); margin:48px auto 96px; }
main > span[id] { display:block; }
/* Homepage: alternating product showcases with locally stored manufacturer images. */
.home-main { width:min(1080px,calc(100% - 48px)); margin-top:36px; }
.directory-heading { padding:12px 0 28px; }
.directory-heading h1 { font-size:30px; letter-spacing:-.035em; }
.product-row { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:80px; padding:48px 0; border-top:1px solid var(--line); color:var(--ink); text-decoration:none; }
.product-row:nth-of-type(odd) .product-row-copy { grid-column:2; grid-row:1; }
.product-row:nth-of-type(odd) .product-row-image { grid-column:1; grid-row:1; }
.product-row-copy { display:flex; flex-direction:column; align-items:flex-start; padding:12px 0; }
.product-row h2 { font-size:clamp(30px,3.5vw,46px); letter-spacing:-.045em; line-height:1.12; }
.product-row .product-row-description { color:var(--muted); font-size:16px; line-height:1.6; margin-top:16px; max-width:30ch; }
.product-row-action { display:inline-flex; align-items:center; gap:28px; min-height:46px; font-size:13px; font-weight:600; margin-top:28px; padding:10px 20px; border-radius:28px; background:var(--blue); color:white; transition:background .2s; }
.product-row-action > span { font-size:20px; line-height:1; transition:transform .2s; }
.product-row:hover { text-decoration:none; }
.product-row:hover .product-row-action { background:var(--navy); }
.product-row:hover .product-row-action > span { transform:translateX(4px); }
.product-row-image { min-width:0; display:flex; justify-content:center; align-items:center; height:340px; padding:12px 0; perspective:1000px; }
.product-row-image img { width:auto; max-width:100%; height:auto; }
.product-row--pro11 .product-row-image img { width:360px; margin-block:-48px; filter:drop-shadow(0 12px 10px #17234210); }
.timer-display { width:440px; max-width:100%; padding:8px 8px 16px; border-radius:12px; background:#20232a; box-shadow:6px 18px 24px #1723421c; transform:rotateY(-10deg) rotateX(3deg); }
.timer-display img { border-radius:5px; width:100%; }
/* Shared product presentation. */
.hmehmainwrapper,.timermainwrapper,.quailheadsetmainwrapper,.healthcaremainwrapper { display:flex; flex-direction:column; gap:40px; }
.header { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:center; gap:40px; }
.headimg img { margin:auto; }
.headtext { padding:24px 0; }
.headtext h1 { line-height:1.2; }
.headtext h1 span { font-size:20px; letter-spacing:0; }
.headtext p { margin:20px 0; }
.headtext a,.hmesoundlink a { display:inline-flex; align-items:center; min-height:44px; }
.linkbar { display:flex; flex-wrap:wrap; gap:12px; }
.linkbar a { display:flex; align-items:center; gap:10px; padding:14px 18px; min-height:48px; flex:1 1 240px; border:1px solid var(--line); border-radius:10px; background:white; font-size:14px; text-decoration:none; }
.linkbar a:hover { border-color:var(--blue); }
.pdf { width:22px; height:auto; flex-shrink:0; }
.hmehmain,.illdiv,.timermaincontent { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.mainimg,.illimg { align-self:center; }
.mainimg img,.illimg img,.timertopimg img { margin:auto; }
.hmehyoutube,.hcvideo { width:min(100%,960px); margin:0 auto; }
iframe { display:block; width:100%; height:auto; aspect-ratio:16/9; border:0; border-radius:12px; background:#e5eaf3; }
.narrowband { display:grid; gap:24px; }
.narrowband img { margin:auto; }
.hmesoundlink { text-align:center; }
.hmesoundlink a { background:var(--blue); color:white; border-radius:40px; padding:12px 24px; }
.timerimgs { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:center; }
.timerimgs img { margin:auto; }
.retheader,.hcheader { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-bottom:24px; border-bottom:2px solid var(--accent); }
.quailheadsetmainwrapper { --accent:#813888; }
.healthcaremainwrapper { --accent:#367b2d; }
.retheader img,.hcheader img { max-width:min(45%,302px); }
.retheader h2,.hcheader h2 { font-size:24px; text-align:right; }
.downheader { font-size:20px; color:var(--muted); margin-top:-20px; }
.hctextimg { width:min(100%,960px); margin:auto; }
.hctextehead { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:center; }
.hctextsmolimg { max-width:150px; }
.retailtable { width:100%; }
.retailtablenav { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.retailselect { border:1px solid var(--line); background:white; color:var(--ink); border-radius:8px; min-height:48px; padding:12px 16px; flex:1 1 160px; }
.retailselect h3 { font-size:13px; letter-spacing:.025em; }
.retailselect:hover { border-color:var(--accent); }
.retailselect[aria-selected='true'] { background:var(--accent); border-color:var(--accent); color:white; }
.tablecontent { display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:40px; align-items:start; background:white; padding:32px; border:1px solid var(--line); border-radius:12px; margin-bottom:20px; }
.tableimg { align-self:center; }
.tableimg img { width:auto; max-width:min(100%,200px); margin:auto; }
.tabletext { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.tabletext h4 { color:var(--accent); margin-bottom:8px; }
.hcfoot { margin-top:24px; }
.hcfooter { display:flex; justify-content:space-between; gap:24px; align-items:center; }
.quailcontact { display:flex; flex-direction:column; }
.footimg { max-width:300px; }
/* Company and staff information. */
.aboutmainwrapper > div { margin-bottom:56px; }
.todayp,.history p { max-width:75ch; }
.tablewrapper { margin-top:32px; }
.staff-table { width:100%; border-collapse:collapse; background:white; }
.staff-table th,.staff-table td { padding:8px 16px; text-align:left; border-bottom:1px solid var(--line); }
.staff-table th { vertical-align:top; font-size:14px; }
.staff-table a { display:inline-flex; min-height:44px; align-items:center; overflow-wrap:anywhere; }
.countrycontact { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:32px; }
.countrycontact a { display:inline-flex; align-items:center; min-height:44px; overflow-wrap:anywhere; }
/* Footer content is deliberately static HTML, available without JavaScript. */
.site-footer { background:var(--navy); color:#e5eaf4; padding:56px 24px 0; }
.footer-inner { max-width:1200px; margin:auto; }
.footer-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-bottom:36px; border-bottom:1px solid #ffffff26; }
.footer-heading h2 { flex:1; font-size:clamp(24px,3vw,32px); }
.site-footer a { color:#e5eaf4; text-decoration:none; display:inline-flex; min-height:44px; align-items:center; gap:8px; }
.site-footer a:hover { text-decoration:underline; }
.countries { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px; padding:40px 0; }
.country { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.country h3 { font-size:14px; color:#a9bce6; margin-bottom:24px; }
.country address { display:flex; flex-direction:column; font-style:normal; margin-bottom:16px; font-size:14px; }
.country address strong { font-weight:500; font-size:17px; margin-bottom:10px; }
.country > a { font-size:14px; overflow-wrap:anywhere; max-width:100%; }
.company-number { color:#a9bce6; font-size:12px; margin:16px 0 8px; }
.footer-bottom { border-top:1px solid #ffffff26; padding:20px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:12px; color:#a9bce6; }
@media(max-width:900px) {
  .product-row { gap:40px; padding:36px 0; }
  .product-row-image { padding:12px 0; }
  .header,.hmehmain,.illdiv,.timermaincontent { grid-template-columns:1fr; gap:28px; }
  .headtext { padding:0; }
  .headimg img { max-height:none; }
  .countrycontact { grid-template-columns:1fr; }
  .tablecontent { grid-template-columns:160px minmax(0,1fr); gap:24px; padding:24px; }
  .tabletext { grid-template-columns:1fr; }
  .countries { gap:24px; }
  .staff-table th,.staff-table td { padding:8px; }
}
@media(max-width:600px) {
  .home-main { width:calc(100% - 40px); margin-top:16px; }
  .directory-heading { padding:8px 0 24px; }
  .directory-heading h1 { font-size:26px; }
  .product-row { grid-template-columns:minmax(0,1fr); gap:24px; padding:28px 0 32px; }
  .product-row:nth-of-type(odd) .product-row-copy,.product-row:nth-of-type(odd) .product-row-image { grid-column:auto; grid-row:auto; }
  .product-row-image { order:-1; height:240px; padding:12px 8px; }
  .product-row--pro11 .product-row-image img { width:280px; margin-block:-32px; }
  .timer-display { transform:none; }
  .product-row-copy { min-height:200px; padding:0 4px; }
  .product-row h2 { font-size:32px; }
  .product-row .product-row-description { margin-top:12px; font-size:15px; }
  .product-row-action { margin-top:20px; }
  .site-header { padding:20px; gap:16px; flex-wrap:wrap; }
  .brand img { width:135px; }
  .site-header nav { gap:14px; flex-wrap:wrap; }
  .site-header nav a { font-size:13px; }
  .site-header nav .contact-link { padding:8px 12px; }
  .product-nav { padding:8px 16px 20px; gap:4px; justify-content:flex-start; }
  .product-nav a { padding:10px 12px; font-size:13px; }
  main { width:calc(100% - 40px); margin:32px auto 64px; }
  .retheader,.hcheader { align-items:flex-start; flex-direction:column; }
  .retheader img,.hcheader img { max-width:min(100%,302px); }
  .retheader h2,.hcheader h2 { text-align:left; }
  .hctextehead { grid-template-columns:1fr; }
  .hctextsmolimg { margin:auto; }
  .tablecontent { grid-template-columns:1fr; padding:24px; }
  .tabletext { gap:20px; }
  .tablewrapper { margin-top:24px; }
  .staff-table,.staff-table tbody { display:block; }
  .staff-table tr { display:flex; flex-direction:column; padding:12px 16px; border-bottom:1px solid var(--line); }
  .staff-table th,.staff-table td { display:block; border:0; padding:0; }
  .staff-table th { color:var(--muted); margin-bottom:8px; }
  .staff-table a { font-size:14px; }
  .hcfooter { flex-direction:column; align-items:flex-start; }
  .site-footer { padding:40px 20px 0; }
  .footer-heading { align-items:flex-start; flex-direction:column; gap:12px; padding-bottom:24px; }
  .countries { grid-template-columns:1fr; gap:32px; padding:32px 0; }
  .country + .country { border-top:1px solid #ffffff26; padding-top:32px; }
  .country h3 { margin-bottom:16px; }
  .footer-bottom { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; animation:none !important; } }

/* Detail imagery: preserve technical information and keep products on the page background. */
.detail-product-hero { width:560px; max-width:100%; filter:drop-shadow(0 14px 16px #17234212); }
.technical-illustration,.quail-brand-image { mix-blend-mode:multiply; }
.timertopimg { display:flex; justify-content:center; padding:24px 12px; }
.timertopimg .timer-display { width:640px; transform:none; }
.timerimgs { align-items:center; justify-items:center; gap:24px; }
.timerimgs img { width:auto; max-width:100%; height:auto; }
.hctextsmolimg { max-width:200px; }
.environment-photo { border-radius:8px; }
.tablecontent { background:transparent; grid-template-columns:minmax(0,300px) minmax(0,1fr); }
.tableimg { display:flex; align-items:center; justify-content:center; height:320px; min-width:0; }
.tableimg.product-render img { width:300px; max-width:100%; height:auto; margin:0; filter:drop-shadow(0 10px 10px #1723420d); }
.tabletext { align-self:center; }
@media(max-width:900px) {
  .tablecontent { grid-template-columns:minmax(0,220px) minmax(0,1fr); }
  .tableimg { height:280px; }
}
@media(max-width:600px) {
  .tablecontent { grid-template-columns:minmax(0,1fr); gap:24px; }
  .tableimg { height:260px; }
  .hctextsmolimg { max-width:180px; }
  .timertopimg { padding:12px 0; }
}

/* Mask only the empty outer backdrop of the retained shelf photograph. */
.shelf-image { clip-path:polygon(1.3% 39.5%,97.5% 42%,97.5% 66.5%,96% 68%,80.5% 69%,77.3% 65%,9.3% 62%,5.3% 60.5%,3.5% 57%,2.2% 50.5%); }

/* A feathered backdrop gives white housings contrast without adding a frame. */
.light-product-image { position:relative; isolation:isolate; }
.light-product-image::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at center,#bdcce0 0%,#dbe4f0 35%,#edf1f7 53%,transparent 73%); }
.tableimg.light-product-image img,.product-row--pro11 .light-product-image img { filter:drop-shadow(0 2px 2px #1723421c) drop-shadow(0 12px 12px #17234226); }

/* Mobile layout: deliberate navigation rows, comfortable reading and equal product showcases. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
@media(max-width:600px) {
  .site-header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:16px; }
  .brand img { width:clamp(108px,32vw,135px); }
  .site-header nav { justify-content:flex-end; gap:12px; flex-wrap:nowrap; }
  .site-header nav a { gap:8px; font-size:14px; white-space:nowrap; }
  .site-header nav .contact-link { padding:8px 12px; }
  .site-header--products nav { grid-column:1 / -1; justify-content:space-between; gap:8px; padding-top:8px; border-top:1px solid var(--line); }
  .site-header--products nav a { flex:1; justify-content:center; }
  .product-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:0 16px 16px; }
  .product-nav a { display:flex; justify-content:center; align-items:center; min-width:0; padding:10px 8px; text-align:center; font-size:13px; background:#eaf0f8; }
  .product-nav a[aria-current] { background:var(--blue); }
  main,.home-main { width:calc(100% - 32px); margin-bottom:48px; }
  main { margin-top:24px; }
  .home-main { margin-top:16px; }
  .hmehmainwrapper,.timermainwrapper,.quailheadsetmainwrapper,.healthcaremainwrapper { gap:28px; }
  .header,.hmehmain,.illdiv,.timermaincontent { gap:24px; min-width:0; }
  .header { grid-template-columns:minmax(0,1fr); }
  .headimg { width:min(100%,340px); margin:auto; }
  .headtext h1 { font-size:32px; }
  .headtext h1 span { font-size:18px; }
  .headtext p { margin:16px 0; }
  .linkbar { gap:8px; }
  .linkbar a { min-width:0; flex-basis:100%; padding:12px; overflow-wrap:anywhere; }
  .linkbar .pdf { width:20px; }
  .hmesoundlink a { max-width:100%; border-radius:16px; padding:12px 16px; font-size:15px; }
  .timertopimg { max-width:380px; width:100%; margin:auto; }
  .timerimgs { gap:16px; }
  .retheader,.hcheader { gap:16px; padding-bottom:16px; }
  .retheader .quail-brand-image,.hcheader .quail-brand-image { width:180px; max-width:60%; }
  .retheader h2,.hcheader h2 { font-size:21px; overflow-wrap:anywhere; }
  .downheader { font-size:17px; margin-top:-12px; }
  .hctextehead { gap:24px; }
  .retailtablenav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .retailselect { min-width:0; min-height:56px; padding:10px 8px; }
  .retailselect h3 { font-size:12px; line-height:1.4; overflow-wrap:break-word; }
  .retailselect:last-child:nth-child(odd) { grid-column:1 / -1; }
  .tablecontent { padding:20px 16px; gap:20px; }
  .tableimg { height:240px; }
  .tableimg.product-render img { width:280px; }
  .tabletext { min-width:0; width:100%; gap:20px; }
  .tabletext p,.tabletext h4 { overflow-wrap:anywhere; }
  .product-row { gap:20px; padding:24px 0; }
  .product-row-image { height:220px; }
  .product-row--pro11 .product-row-image img { width:260px; }
  .product-row-copy { min-height:200px; }
  .product-row h2 { font-size:30px; }
  .product-row-action { min-height:48px; }
  .staff-table a { font-size:15px; }
  .aboutmainwrapper > div { margin-bottom:40px; }
  .countrycontact { gap:24px; margin-top:24px; }
  .countrycontact > div { min-width:0; }
  .site-footer { padding:32px 16px 0; }
  .footer-heading { gap:16px; }
  .footer-heading h2 { font-size:24px; }
  .countries { padding:28px 0; gap:28px; }
  .country + .country { padding-top:28px; }
  .country > a { font-size:15px; }
}

/* Current product range: NEXEO, ZOOM Nitro and Pro12. */
.product-row--nexeo .product-row-image img { width:440px; filter:drop-shadow(0 18px 16px #17234212); }
.product-row--zoom .product-row-image img { width:440px; max-height:100%; }
.product-row--pro12 .product-row-image img { width:360px; margin-block:-48px; filter:drop-shadow(0 12px 10px #17234210); }
.product-page { display:flex; flex-direction:column; gap:64px; }
.product-page--retail { --accent:#813888; }
.product-intro { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; gap:56px; }
.product-intro-visual { display:flex; align-items:center; justify-content:center; min-width:0; min-height:340px; }
.product-intro-visual img { width:auto; max-width:100%; max-height:380px; filter:drop-shadow(0 16px 18px #17234216); }
.product-intro-visual--headset img { max-height:420px; }
.product-category { color:var(--blue); font-size:14px; margin-bottom:16px; }
.product-intro-copy h1 { font-size:clamp(32px,4vw,48px); }
.product-intro-copy h1 span { white-space:nowrap; }
.product-intro-copy > p:not(.product-category) { color:var(--muted); margin:24px 0; max-width:48ch; }
.product-intro-copy > a { display:inline-flex; align-items:center; gap:16px; min-height:48px; padding:12px 20px; border-radius:28px; background:var(--blue); color:white; text-decoration:none; }
.product-intro-copy > a:hover { background:var(--navy); }
.product-overview { max-width:76ch; }
.product-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; padding-block:32px; border-block:1px solid var(--line); }
.product-features h2 { font-size:23px; }
.product-features p { color:var(--muted); }
.product-story { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:56px; }
.product-story-visual { display:flex; justify-content:center; align-items:center; min-width:0; }
.product-story-visual img { width:auto; max-height:320px; filter:drop-shadow(0 12px 16px #17234212); }
.product-story a { display:inline-flex; align-items:center; min-height:44px; margin-top:16px; }
.product-resources .linkbar { margin-top:24px; }
.product-page .retailselect { font-size:14px; font-weight:600; }
.product-page .tabletext h3 { color:var(--accent); margin-bottom:8px; font-size:16px; }
.product-page .tableimg.product-render img { max-height:100%; width:auto; }
.product-documents { grid-template-columns:repeat(2,minmax(0,1fr)); }
.product-documents h2 { font-size:24px; }
@media(max-width:900px) {
  .product-intro { gap:32px; }
  .product-features { gap:24px; }
  .product-story { gap:32px; }
}
@media(max-width:600px) {
  .product-page { gap:36px; }
  .product-intro,.product-story,.product-features,.product-documents { grid-template-columns:minmax(0,1fr); gap:24px; }
  .product-intro-visual { min-height:0; height:240px; }
  .product-intro-visual img,.product-intro-visual--headset img { max-height:100%; }
  .product-category { margin-bottom:12px; }
  .product-intro-copy > p:not(.product-category) { margin:20px 0; }
  .product-features { padding-block:24px; }
  .product-story-visual img { max-height:260px; }
  .product-row--pro12 .product-row-image img { width:260px; margin-block:-32px; }
}