/* ============================================================
   Oticon brand skin — scoped to .oticon-skin only.
   Source: docs/design-oticon.md (observed from www.oticon.co.uk)
   + official brand-kit colours.txt (Red Violet / Wild Sand / Black).
   Warm, human, confident: white canvas, Open Sans, one rich berry-
   magenta accent, UPPERCASE bold PILL buttons. Sits below the
   Wickersley header/footer.
   ============================================================ */
.oticon-skin{
  --ot-white:#fff; --ot-surface:#F6F6F6; --ot-edge:#EFEDEA;
  --ot-ink:#222; --ot-ink2:#52504D;
  --ot-berry:#860C58; --ot-plum:#410032; --ot-magenta:#C6168D; --ot-teal:#0D3547;
  background:var(--ot-white);
  font-family:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ot-ink);
}
.oticon-skin .container{max-width:1280px;}
.oticon-skin .section{background:transparent;padding:clamp(4rem,8vw,7.5rem) 0;}

/* Typography — medium-weight friendly headings, sentence case */
.oticon-skin h1,.oticon-skin h2,.oticon-skin h3,.oticon-skin .modeltag{font-family:"Open Sans",sans-serif;color:var(--ot-ink);letter-spacing:normal;}
.oticon-skin h1{font-weight:500;font-size:clamp(2.6rem,5vw,4rem);line-height:1.1;}
.oticon-skin h2{font-weight:500;font-size:clamp(1.8rem,3.5vw,2.6rem);line-height:1.2;}
.oticon-skin h3{font-weight:600;font-size:1.2rem;}
.oticon-skin p,.oticon-skin .lead{color:var(--ot-ink2);}
.oticon-skin .lead{font-size:1.08rem;font-weight:400;}

/* Hero (inner pages using the simple pagehero) */
.oticon-skin .pagehero{background:var(--ot-white);color:var(--ot-ink);padding:clamp(3.5rem,7vw,6rem) 0;border-bottom:1px solid var(--ot-edge);}
.oticon-skin .pagehero::before{display:none;}
.oticon-skin .pagehero h1{color:var(--ot-ink);font-weight:500;}
.oticon-skin .pagehero p.sub{color:var(--ot-ink2);}
.oticon-skin .crumbs{color:#9a9794;}
.oticon-skin .crumbs a{color:var(--ot-ink);}
.oticon-skin .eyebrow{background:transparent!important;color:var(--ot-berry)!important;border:none;box-shadow:none;padding:0;margin-bottom:20px;letter-spacing:.1em;font-size:.78rem;text-transform:uppercase;font-weight:700;}
.oticon-skin .eyebrow img{filter:none!important;height:16px!important;}

/* Buttons — UPPERCASE bold PILLS, berry primary, grey secondary */
.oticon-skin .btn{border-radius:9999px;box-shadow:none!important;font-family:"Open Sans",sans-serif;font-weight:700;letter-spacing:.03em;text-transform:uppercase;transition:.18s ease;}
.oticon-skin .btn-cta{background:var(--ot-berry);color:#fff;border:2px solid var(--ot-berry);}
.oticon-skin .btn-cta:hover{background:var(--ot-plum);border-color:var(--ot-plum);color:#fff;transform:none;}
.oticon-skin .btn-outline{background:var(--ot-surface);border:1px solid #ddd9d5;color:var(--ot-ink);}
.oticon-skin .btn-outline:hover{background:#ebe7e3;color:var(--ot-ink);transform:none;}
.oticon-skin .btn-lg{padding:15px 30px;font-size:.95rem;}
.oticon-skin .floatbook{display:none;}

/* Simple surfaces (intro + feature tiles) — clean, soft round */
.oticon-skin .pf,.oticon-skin .ft{background:var(--ot-surface);border:1px solid var(--ot-edge);border-radius:14px;box-shadow:none;}
.oticon-skin .pf{border-top:none;}
.oticon-skin .pf h3,.oticon-skin .ft b{color:var(--ot-ink);}
.oticon-skin .ft .ic{background:#fff;color:var(--ot-berry);border-radius:50%;}
.oticon-skin .ft .ic svg{color:var(--ot-berry);}
.oticon-skin .ft span{color:var(--ot-ink2);}

/* CTA band — confident Oticon berry */
.oticon-skin .ctaband{background:linear-gradient(120deg,var(--ot-berry),var(--ot-plum));}
.oticon-skin .ctaband h2{color:#fff;}
.oticon-skin .ctaband p{color:#f0d3e4;}
.oticon-skin .ctaband .btn-cta{background:#fff;color:var(--ot-berry);border-color:#fff;}
.oticon-skin .ctaband .btn-cta:hover{background:var(--ot-teal);color:#fff;border-color:var(--ot-teal);}
.oticon-skin .ctaband .btn-outline{background:transparent;border-color:rgba(255,255,255,.85);color:#fff;}
.oticon-skin .ctaband .btn-outline:hover{background:#fff;color:var(--ot-berry);}

  /* ===================== Immersive brand-landing components (Oticon) ===================== */
  /* Full-bleed hero — deep teal/brand campaign image, dark scrim, white text */
  .oticon-skin .pk-hero{position:relative;min-height:clamp(460px,62vh,620px);display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;background:linear-gradient(160deg,#0d3547 0%,#072530 75%);}
  .oticon-skin .pk-hero .bg{position:absolute;inset:0;z-index:0;}
  .oticon-skin .pk-hero .bg img{width:100%;height:100%;object-fit:cover;display:block;}
  .oticon-skin .pk-hero .bg.noimg img{display:none;}
  .oticon-skin .pk-hero .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,20,26,.45),rgba(7,20,26,.82));}
  .oticon-skin .pk-hero .inner{position:relative;z-index:2;max-width:860px;padding:60px 48px;background:rgba(7,20,26,.32);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:24px;border:1px solid rgba(255,255,255,.08);}
  .oticon-skin .pk-hero .eyebrow{color:var(--ot-magenta)!important;justify-content:center;display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.95)!important;padding:7px 16px 7px 10px!important;border-radius:999px!important;box-shadow:0 6px 18px rgba(0,0,0,.22)!important;border:none!important;margin-bottom:22px!important;}
  .oticon-skin .pk-hero .eyebrow img{filter:none!important;height:18px!important;width:auto!important;}
  .oticon-skin .pk-hero h1{color:#fff;font-weight:500;font-size:clamp(2.7rem,6vw,4.6rem);line-height:1.08;margin:0 0 14px;}
  .oticon-skin .pk-hero .tagline{font-family:"Open Sans",sans-serif;font-weight:600;font-size:clamp(1.3rem,3vw,2rem);color:var(--ot-magenta);margin:0 0 16px;}
  .oticon-skin .pk-hero p.sub{color:#d8dee1;max-width:62ch;margin:0 auto 26px;font-size:1.1rem;}
  .oticon-skin .pk-hero .cta-row{justify-content:center;}
  .oticon-skin .pk-hero .btn-cta{background:var(--ot-berry);color:#fff;border-color:var(--ot-berry);}
  .oticon-skin .pk-hero .btn-cta:hover{background:var(--ot-magenta);border-color:var(--ot-magenta);}
  .oticon-skin .pk-hero .btn-outline{background:transparent;border-color:#fff;color:#fff;}
  .oticon-skin .pk-hero .btn-outline:hover{background:#fff;color:var(--ot-teal);}
  .oticon-skin .pk-hero .phslot{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;}
  .oticon-skin .pk-hero .phslot small{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.72rem;background:rgba(255,255,255,.08);border:1px dashed rgba(255,255,255,.3);padding:4px 10px;color:#dbe7ee;}

  /* Quick-nav row — white circles, berry icon accent */
  .oticon-skin .pk-quicknav{display:flex;justify-content:center;gap:clamp(22px,5vw,68px);flex-wrap:wrap;padding:38px 24px;background:var(--ot-white);border-bottom:1px solid var(--ot-edge);}
  .oticon-skin .pk-quicknav a{display:flex;flex-direction:column;align-items:center;gap:11px;color:var(--ot-ink);font-weight:600;font-size:.9rem;text-decoration:none;text-align:center;line-height:1.25;}
  .oticon-skin .pk-quicknav .circle{width:76px;height:76px;border-radius:50%;background:var(--ot-surface);border:1px solid var(--ot-edge);display:flex;align-items:center;justify-content:center;transition:.18s ease;}
  .oticon-skin .pk-quicknav a:hover .circle{transform:translateY(-3px);border-color:var(--ot-berry);}
  .oticon-skin .pk-quicknav .circle svg{width:34px;height:34px;color:var(--ot-berry);}

  /* Generic split */
  .oticon-skin .pk-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,60px);align-items:center;}
  .oticon-skin .pk-split.alt .copy{order:2;}
  .oticon-skin .pk-bullets{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:15px;}
  .oticon-skin .pk-bullets li{display:flex;gap:12px;align-items:flex-start;color:var(--ot-ink2);font-size:1.02rem;line-height:1.55;}
  .oticon-skin .pk-bullets li .dot{width:22px;height:22px;border-radius:50%;background:var(--ot-berry);flex:none;margin-top:2px;display:flex;align-items:center;justify-content:center;}
  .oticon-skin .pk-bullets li .dot svg{width:13px;height:13px;color:#fff;}
  .oticon-skin .pk-bullets li strong{color:var(--ot-ink);}

  /* Product media block + placeholder */
  .oticon-skin .pk-media{position:relative;border-radius:18px;overflow:hidden;min-height:380px;display:flex;align-items:center;justify-content:center;background:var(--ot-surface);border:1px solid var(--ot-edge);}
  .oticon-skin .pk-media.dark{background:linear-gradient(150deg,#173543,var(--ot-teal));border-color:transparent;}
  .oticon-skin .pk-media img.pk-prodimg{max-width:82%;max-height:340px;object-fit:contain;filter:drop-shadow(0 16px 28px rgba(0,0,0,.18));}
  .oticon-skin .pk-media .phslot{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;padding:16px;}
  .oticon-skin .pk-media .phslot img{height:28px;opacity:.45;}
  .oticon-skin .pk-media.dark .phslot img{filter:brightness(0) invert(1);opacity:.6;}
  .oticon-skin .pk-media .phslot small{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.68rem;background:#fff;border:1px dashed var(--ot-edge);padding:3px 8px;color:#9a9794;}
  .oticon-skin .pk-media.dark .phslot small{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#dbe7ee;}
  .oticon-skin .pk-media.noimg img.pk-prodimg{display:none;}
  .oticon-skin .pk-media:not(.noimg) .phslot{display:none;}

  /* Product section bands */
  .oticon-skin .pk-prod{padding:clamp(3.5rem,7vw,6.5rem) 0;}
  .oticon-skin .pk-prod.band{background:var(--ot-surface);}
  .oticon-skin .pk-prod.dark{background:linear-gradient(160deg,#173543,var(--ot-teal));}
  .oticon-skin .pk-prod.dark h2,.oticon-skin .pk-prod.dark .lead{color:#fff;}
  .oticon-skin .pk-prod.dark p{color:#cfd9dd;}
  .oticon-skin .pk-prod .modeltag{display:inline-block;background:transparent;color:var(--ot-berry);font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;padding:0;margin-bottom:12px;}
  .oticon-skin .pk-prod.dark .modeltag{color:var(--ot-magenta);}
  .oticon-skin .pk-prod h2{margin:0 0 14px;}
  .oticon-skin .pk-prod .pk-spec{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 22px;}
  .oticon-skin .pk-prod .pk-spec span{display:inline-flex;align-items:center;gap:7px;background:var(--ot-surface);border:1px solid var(--ot-edge);color:var(--ot-ink);border-radius:999px;font-weight:600;font-size:.8rem;padding:7px 14px;}
  .oticon-skin .pk-prod.dark .pk-spec span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff;}
  .oticon-skin .pk-prod .pk-spec span svg{width:15px;height:15px;color:var(--ot-berry);}
  .oticon-skin .pk-prod.dark .pk-spec span svg{color:var(--ot-magenta);}
  .oticon-skin .pk-prod.dark .pk-media.dark{background:linear-gradient(150deg,#1f4554,var(--ot-teal));}
  .oticon-skin .pk-prod.dark .subchips span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff;}
  .oticon-skin .subchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
  .oticon-skin .subchips span{font-size:.74rem;font-weight:700;color:var(--ot-ink);background:var(--ot-surface);border:1px solid var(--ot-edge);padding:6px 14px;border-radius:999px;}

  @media (max-width:900px){
    .oticon-skin .pk-split{grid-template-columns:1fr;gap:26px;}
    .oticon-skin .pk-split.alt .copy{order:0;}
    .oticon-skin .pk-media{min-height:280px;}
  }
