/* ============================================================
   Unitron brand skin — scoped to .unitron-skin only.
   Source: docs/design-unitron.md (observed from www.unitron.com/en-uk)
   Bright, friendly, human: white canvas, one clear Unitron cyan
   (#1992E1), light-blue "Smile" tint bands, Fira Sans, rounded
   (8px) buttons, sentence case. "Love the experience."
   A Sonova brand.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800&display=swap');

.unitron-skin{
  --u-white:#fff;
  --u-surface:#F4F8FB;      /* soft neutral card / band */
  --u-tint:#E7F4FB;         /* light-blue "Smile" band */
  --u-edge:#DCE7EE;
  --u-ink:#17272F;          /* warm charcoal-teal heading/body ink */
  --u-ink2:#54646C;         /* secondary text */
  --u-cyan:#1992E1;         /* Unitron cyan (sampled from wordmark) */
  --u-cyan-hover:#137BC0;
  --u-cyan-soft:#DCEEFB;
  --u-grad:linear-gradient(95deg,#F9B915 0%,#F58220 24%,#F15A24 43%,#EC2E7A 59%,#1C75BC 82%,#29ABE2 100%); /* the "U" logo gradient (warm→cool) */
  background:var(--u-white);
  font-family:'Fira Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--u-ink);
}
/* Warm→cool brand hairline between the site header and Unitron content */
.unitron-skin::before{content:'';display:block;height:5px;background:var(--u-grad);}
.unitron-skin .container{max-width:1240px;}
.unitron-skin .section{background:transparent;padding:clamp(4rem,8vw,7.5rem) 0;}

/* Typography — friendly bold Fira Sans, sentence case */
.unitron-skin h1,.unitron-skin h2,.unitron-skin h3,.unitron-skin .modeltag{
  font-family:'Fira Sans',sans-serif;color:var(--u-ink);letter-spacing:-.01em;
}
.unitron-skin h1{font-weight:800;font-size:clamp(2.5rem,5vw,3.9rem);line-height:1.05;}
.unitron-skin h2{font-weight:700;font-size:clamp(1.8rem,3.5vw,2.6rem);line-height:1.14;}
.unitron-skin h3{font-weight:600;font-size:1.2rem;}
.unitron-skin p,.unitron-skin .lead{color:var(--u-ink2);}
.unitron-skin .lead{font-size:1.08rem;font-weight:400;}

/* Buttons — rounded 8px, cyan primary, sentence case */
.unitron-skin .btn{
  border-radius:8px;box-shadow:none!important;
  font-family:'Fira Sans',sans-serif;font-weight:600;
  letter-spacing:.005em;text-transform:none;transition:.18s ease;
}
.unitron-skin .btn-cta{background:var(--u-cyan);color:#fff;border:2px solid var(--u-cyan);}
.unitron-skin .btn-cta:hover{background:var(--u-cyan-hover);border-color:var(--u-cyan-hover);color:#fff;transform:none;}
.unitron-skin .btn-outline{background:transparent;border:2px solid var(--u-cyan);color:var(--u-cyan);}
.unitron-skin .btn-outline:hover{background:var(--u-cyan);color:#fff;transform:none;}
.unitron-skin .btn-lg{padding:14px 28px;font-size:.95rem;}
.unitron-skin .floatbook{display:none;}

/* ===================== Immersive brand-landing components ===================== */

/* Hero — bright: full-bleed video/image, light wash, frosted white text card */
.unitron-skin .pk-hero{
  position:relative;min-height:clamp(500px,68vh,700px);
  display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--u-ink);overflow:hidden;
  background:var(--u-tint);
}
.unitron-skin .pk-hero .bg{position:absolute;inset:0;z-index:0;}
.unitron-skin .pk-hero .bg video,
.unitron-skin .pk-hero .bg img{width:100%;height:100%;object-fit:cover;display:block;}
.unitron-skin .pk-hero .bg.noimg video,
.unitron-skin .pk-hero .bg.noimg img{display:none;}
.unitron-skin .pk-hero .scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(231,244,251,.35) 0%,rgba(231,244,251,.72) 100%);
}
.unitron-skin .pk-hero .inner{
  position:relative;z-index:2;max-width:820px;
  padding:52px 46px;
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:0 24px 60px rgba(16,60,90,.16);
}
.unitron-skin .pk-hero .eyebrow{
  color:var(--u-cyan)!important;justify-content:center;
  display:inline-flex;align-items:center;gap:10px;
  background:#fff;border:1px solid var(--u-edge);box-shadow:0 4px 14px rgba(16,60,90,.10);
  padding:7px 16px 7px 12px;border-radius:999px;
  margin-bottom:20px;letter-spacing:.11em;font-size:.78rem;
  text-transform:uppercase;font-weight:700;
}
.unitron-skin .pk-hero .eyebrow img{filter:none!important;height:15px!important;width:auto!important;}
.unitron-skin .pk-hero h1{
  color:var(--u-ink);font-weight:800;
  font-size:clamp(3rem,7vw,5rem);line-height:1.03;margin:0 0 12px;
}
.unitron-skin .pk-hero h1::after{
  content:'';display:block;width:132px;height:7px;border-radius:4px;
  background:var(--u-grad);margin:14px auto 2px;
}
.unitron-skin .pk-hero .tagline{
  font-family:'Fira Sans',sans-serif;font-weight:700;
  font-size:clamp(1.15rem,2.6vw,1.6rem);
  color:var(--u-cyan);margin:0 0 16px;
}
.unitron-skin .pk-hero p.sub{
  color:var(--u-ink2);max-width:60ch;
  margin:0 auto 28px;font-size:1.06rem;font-weight:400;
}
.unitron-skin .pk-hero .cta-row{justify-content:center;}

/* Quick-nav */
.unitron-skin .pk-quicknav{
  display:flex;justify-content:center;gap:clamp(22px,5vw,68px);
  flex-wrap:wrap;padding:36px 24px;position:relative;
  background:var(--u-white);
}
.unitron-skin .pk-quicknav::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--u-grad);
}
.unitron-skin .pk-quicknav a{
  display:flex;flex-direction:column;align-items:center;gap:11px;
  color:var(--u-ink);font-weight:600;font-size:.9rem;
  text-decoration:none;text-align:center;line-height:1.25;
}
.unitron-skin .pk-quicknav .circle{
  width:76px;height:76px;border-radius:50%;
  border:3px solid transparent;
  background:linear-gradient(var(--u-cyan-soft),var(--u-cyan-soft)) padding-box,var(--u-grad) border-box;
  display:flex;align-items:center;justify-content:center;transition:.18s ease;
}
.unitron-skin .pk-quicknav a:hover .circle{transform:translateY(-3px);}
.unitron-skin .pk-quicknav .circle svg{width:32px;height:32px;color:var(--u-cyan);}

/* Generic split */
.unitron-skin .pk-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center;}
.unitron-skin .pk-split>*{min-width:0;}
.unitron-skin .pk-split.alt .copy{order:2;}

/* Product media block — bright white card, packshots contained */
.unitron-skin .pk-media{
  position:relative;border-radius:20px;overflow:hidden;
  min-height:380px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--u-edge);
  box-shadow:0 12px 34px rgba(16,60,90,.07);
}
.unitron-skin .pk-media.tint{background:var(--u-tint);border-color:transparent;}
.unitron-skin .pk-media img.pk-prodimg{
  max-width:88%;max-height:346px;object-fit:contain;
  filter:drop-shadow(0 16px 26px rgba(16,60,90,.12));
}
.unitron-skin .pk-media .phslot{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;padding:16px;}
.unitron-skin .pk-media .phslot img{height:26px;opacity:.5;}
.unitron-skin .pk-media .phslot small{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.68rem;
  background:#fff;border:1px dashed var(--u-edge);padding:3px 8px;color:#9aa6ad;
}
.unitron-skin .pk-media.noimg img.pk-prodimg{display:none;}
.unitron-skin .pk-media:not(.noimg) .phslot{display:none;}

/* Cyan accent bar on media block on hover */
.unitron-skin .pk-media::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:5px;
  background:var(--u-grad);opacity:1;
}

/* Product sections */
.unitron-skin .pk-prod{padding:clamp(3.5rem,7vw,6.5rem) 0;}
.unitron-skin .pk-prod.band{background:var(--u-tint);}

.unitron-skin .pk-prod .modeltag{
  display:inline-block;background:transparent;color:var(--u-cyan);
  font-weight:700;font-size:.74rem;letter-spacing:.11em;
  text-transform:uppercase;padding:0;margin-bottom:12px;
}
.unitron-skin .pk-prod h2{margin:0 0 14px;}

/* Spec pills */
.unitron-skin .pk-prod .pk-spec{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 22px;}
.unitron-skin .pk-prod .pk-spec span{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--u-white);border:1px solid var(--u-edge);
  color:var(--u-ink);border-radius:999px;font-weight:500;
  font-size:.8rem;padding:7px 14px;
}
.unitron-skin .pk-prod.band .pk-spec span{background:#fff;}
.unitron-skin .pk-prod .pk-spec span svg{width:15px;height:15px;color:var(--u-cyan);}

/* Style chips */
.unitron-skin .subchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.unitron-skin .subchips span{
  font-size:.74rem;font-weight:600;color:var(--u-ink);
  background:var(--u-surface);border:1px solid var(--u-edge);
  padding:6px 14px;border-radius:999px;
}
.unitron-skin .pk-prod.band .subchips span{background:#fff;}

/* Colour swatch chips (custom-aid shell colours) */
.unitron-skin .swatches{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px;}
.unitron-skin .swatches span{display:inline-flex;flex-direction:column;align-items:center;gap:6px;font-size:.72rem;font-weight:600;color:var(--u-ink2);}
.unitron-skin .swatches i{width:26px;height:26px;border-radius:50%;border:1px solid rgba(0,0,0,.12);display:block;}

/* PDF download link */
.unitron-skin .pdf-dl{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--u-cyan);font-weight:600;font-size:.85rem;
  text-decoration:none;margin-top:14px;
  padding:8px 16px;border-radius:8px;
  border:1.5px solid var(--u-cyan);
  transition:.16s ease;
}
.unitron-skin .pdf-dl:hover{background:var(--u-cyan);color:#fff;}
.unitron-skin .pdf-dl svg{width:15px;height:15px;flex:none;}
.unitron-skin .pdf-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}

/* Bullets */
.unitron-skin .pk-bullets{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:15px;}
.unitron-skin .pk-bullets li{display:flex;gap:12px;align-items:flex-start;color:var(--u-ink2);font-size:1.02rem;line-height:1.55;}
.unitron-skin .pk-bullets li .dot{width:22px;height:22px;border-radius:50%;background:var(--u-grad);flex:none;margin-top:2px;display:flex;align-items:center;justify-content:center;}
.unitron-skin .pk-bullets li .dot svg{width:13px;height:13px;color:#fff;}
.unitron-skin .pk-bullets li strong{color:var(--u-ink);}

/* Brand intro (lifestyle image split) */
.unitron-skin .u-intro{padding:clamp(4rem,8vw,8rem) 0;background:var(--u-white);}
.unitron-skin .u-intro h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:18px;}
.unitron-skin .u-intro .accent-line{
  width:66px;height:5px;background:var(--u-grad);
  border-radius:3px;margin-bottom:22px;
}
.unitron-skin .u-intro .lifestyle-img{
  border-radius:20px;overflow:hidden;
  aspect-ratio:16/10;box-shadow:0 18px 44px rgba(16,60,90,.14);
}
.unitron-skin .u-intro .lifestyle-img img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* Per-product video cards (contained cover video) */
.unitron-skin .pk-media.pk-media-vid{padding:0;max-height:380px;}
.unitron-skin .pk-media-vid video.pk-prodimg{width:100%;height:100%;max-width:100%;max-height:380px;object-fit:cover;filter:none;border-radius:20px;}

/* CTA band */
.unitron-skin .u-cta{background:var(--u-grad);padding:clamp(3.5rem,7vw,5.5rem) 0;}
.unitron-skin .u-cta h2{color:#fff;font-weight:800;font-size:clamp(1.9rem,4vw,3rem);margin-bottom:14px;text-shadow:0 2px 12px rgba(0,0,0,.16);}
.unitron-skin .u-cta p{color:rgba(255,255,255,.95);font-size:1.08rem;margin-bottom:28px;text-shadow:0 1px 8px rgba(0,0,0,.14);}
.unitron-skin .u-cta .btn-solid{background:#fff;color:var(--u-cyan);border:2px solid #fff;border-radius:8px;font-weight:700;}
.unitron-skin .u-cta .btn-solid:hover{background:rgba(255,255,255,.9);color:var(--u-cyan-hover);}
.unitron-skin .u-cta .btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.8);border-radius:8px;font-weight:700;}
.unitron-skin .u-cta .btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff;}

@media (max-width:900px){
  .unitron-skin .pk-split{grid-template-columns:1fr;gap:26px;}
  .unitron-skin .pk-split.alt .copy{order:0;}
  .unitron-skin .pk-media{min-height:260px;}
  .unitron-skin .pk-media img.pk-prodimg{max-height:250px;}
  .unitron-skin .pk-media.pk-media-vid{max-height:260px;}
  .unitron-skin .pk-media-vid video.pk-prodimg{max-height:260px;}
  .unitron-skin .pk-hero .inner{padding:40px 26px;}
}