/* ============================================================
   Phonak brand skin — scoped to .phonak-skin only.
   Source: docs/design-phonak.md (observed from www.phonak.com/en-uk).
   White canvas, warm-black ink, SERIF display headings (Fraunces
   stands in for Teodor) + sans body (Inter for Soehne), one
   electric-lime accent, deep-teal dark sections, rounded 8px buttons.
   Sits below the Wickersley header/footer.
   ============================================================ */
.phonak-skin{
  --pk-white:#FFFFFF; --pk-off:#F5F5F3; --pk-ink:#201F1C; --pk-ink2:#56544F;
  --pk-lime:#CFFB5E; --pk-lime-d:#bfea4e; --pk-teal:#022435; --pk-teal-d:#03141D; --pk-edge:#E4E3DF;
  background:var(--pk-white);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--pk-ink);
}
.phonak-skin .container{max-width:1280px;}
.phonak-skin .section{background:transparent;padding:clamp(4rem,8vw,7.5rem) 0;}

/* Typography — Fraunces serif display, Inter body */
.phonak-skin h1,.phonak-skin h2,.phonak-skin h3{font-family:"Fraunces","Source Serif 4",Georgia,serif;color:var(--pk-ink);letter-spacing:-.01em;}
.phonak-skin h1{font-weight:600;font-size:clamp(2.5rem,4.8vw,3.6rem);line-height:1.08;}
.phonak-skin h2{font-weight:600;font-size:clamp(2rem,4vw,3rem);line-height:1.12;}
.phonak-skin h3{font-weight:600;font-size:1.25rem;}
.phonak-skin p,.phonak-skin .lead{color:var(--pk-ink2);}
.phonak-skin .lead{font-size:1.1rem;}

/* Hero — clean white, big serif headline */
.phonak-skin .pagehero{background:var(--pk-white);color:var(--pk-ink);padding:clamp(3.5rem,7vw,6rem) 0;border-bottom:1px solid var(--pk-edge);}
.phonak-skin .pagehero::before{display:none;}
.phonak-skin .pagehero h1{color:var(--pk-ink);}
.phonak-skin .pagehero p.sub{color:var(--pk-ink2);}
.phonak-skin .crumbs{color:#9a9892;}
.phonak-skin .crumbs a{color:var(--pk-ink);}
.phonak-skin .eyebrow{background:transparent!important;color:var(--pk-ink)!important;border:none;box-shadow:none;padding:0;margin-bottom:20px;letter-spacing:.12em;font-size:.76rem;text-transform:uppercase;font-weight:700;}
.phonak-skin .eyebrow img{filter:none!important;height:16px!important;}

/* Buttons — rounded 8px, lime primary, capitalize, bold */
.phonak-skin .btn{border-radius:8px;box-shadow:none!important;font-family:"Inter",sans-serif;font-weight:700;letter-spacing:0;text-transform:none;transition:.18s ease;}
.phonak-skin .btn-cta{background:var(--pk-lime);color:#000;border:2px solid var(--pk-lime);}
.phonak-skin .btn-cta:hover{background:var(--pk-lime-d);border-color:var(--pk-lime-d);color:#000;transform:translateY(-1px);}
.phonak-skin .btn-outline{background:transparent;border:1.5px solid var(--pk-ink);color:var(--pk-ink);}
.phonak-skin .btn-outline:hover{background:var(--pk-ink);color:#fff;transform:none;}
.phonak-skin .btn-lg{padding:14px 28px;font-size:1rem;}
.phonak-skin .floatbook{display:none;}

/* Simple surfaces (feature tiles) */
.phonak-skin .pf,.phonak-skin .ft{background:var(--pk-off);border:1px solid var(--pk-edge);border-radius:10px;box-shadow:none;}
.phonak-skin .pf h3,.phonak-skin .ft b{color:var(--pk-ink);}
.phonak-skin .ft .ic{background:#eaf7c8;color:var(--pk-teal);border-radius:8px;}
.phonak-skin .ft .ic svg{color:var(--pk-teal);}
.phonak-skin .ft span{color:var(--pk-ink2);}

/* ===== Product line-up: horizontal cards + floating detail drawer ===== */
.phonak-skin .lineup-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px;}
.phonak-skin .pcard{background:var(--pk-off);border:1px solid var(--pk-edge);border-radius:12px;cursor:pointer;display:flex;flex-direction:column;text-align:left;overflow:hidden;transition:.18s ease;}
.phonak-skin .pcard:hover{background:var(--pk-white);box-shadow:0 10px 26px rgba(0,0,0,.06);transform:translateY(-3px);}
.phonak-skin .pcard.active{background:var(--pk-white);box-shadow:inset 0 0 0 2px var(--pk-ink);}
.phonak-skin .pcard .pic{position:relative;aspect-ratio:4/3;overflow:hidden;background:#ECEEE7;}
.phonak-skin .pcard .pbody{padding:22px 22px 20px;display:flex;flex-direction:column;gap:9px;flex:1;}
.phonak-skin .pcard h3{font-family:"Fraunces",serif;font-weight:600;font-size:1.18rem;margin:0;color:var(--pk-ink);}
.phonak-skin .pcard p{font-size:.9rem;color:var(--pk-ink2);margin:0;line-height:1.55;}
.phonak-skin .pcard .arrow{margin-top:auto;padding-top:14px;font-size:1.3rem;color:var(--pk-ink);transition:transform .18s ease;}
.phonak-skin .pcard.active .arrow{transform:rotate(90deg);}

.phonak-skin .lineup-detail{margin-top:18px;background:var(--pk-white);border:1px solid var(--pk-edge);border-radius:12px;display:none;}
.phonak-skin .lineup-detail.open{display:block;animation:pkfade .26s ease;}
@keyframes pkfade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.phonak-skin .lineup-detail .inner{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;padding:38px 40px;align-items:center;}
.phonak-skin .lineup-detail .shotwrap2{min-height:300px;border:none;background:var(--pk-off);border-radius:10px;box-shadow:none;}
.phonak-skin .lineup-detail .modeltag{display:inline-block;background:var(--pk-lime);color:#000;font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 11px;border-radius:6px;margin-bottom:12px;}
.phonak-skin .lineup-detail h3{font-family:"Fraunces",serif;font-weight:600;font-size:1.9rem;margin:0 0 12px;}
.phonak-skin .lineup-detail p{color:var(--pk-ink2);font-size:1.02rem;margin:0 0 14px;}
.phonak-skin .lineup-detail .closex{float:right;border:none;background:transparent;font-size:1.4rem;line-height:1;color:#9a9892;cursor:pointer;padding:0 0 0 12px;}
.phonak-skin .lineup-detail .closex:hover{color:var(--pk-ink);}
.phonak-skin .specrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.phonak-skin .spec{background:var(--pk-off);border:1px solid var(--pk-edge);color:var(--pk-ink);border-radius:6px;font-weight:600;font-size:.78rem;}
.phonak-skin .spec svg{color:var(--pk-teal);}
.phonak-skin .subchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.phonak-skin .subchips span{font-size:.74rem;font-weight:700;color:var(--pk-ink);background:var(--pk-off);border:1px solid var(--pk-edge);padding:5px 11px;border-radius:6px;}

/* card image fill + placeholder */
.phonak-skin .pcard .pic .cardimg{width:100%;height:100%;object-fit:cover;display:block;}
.phonak-skin .pcard .pic .ph{display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:100%;padding:14px;text-align:center;}
.phonak-skin .pcard .pic.noimg .cardimg{display:none;}
.phonak-skin .pcard .pic.noimg .ph{display:flex;}
.phonak-skin .pcard .pic .ph img{height:26px;width:auto;max-width:120px;opacity:.5;}
.phonak-skin .pcard .pic .ph small{font-size:.66rem;font-family:ui-monospace,Menlo,Consolas,monospace;background:#fff;border:1px dashed var(--pk-edge);padding:2px 7px;color:#9a9892;}
.phonak-skin .shot .ph b{color:var(--pk-ink);}

/* CTA band — deep teal */
.phonak-skin .ctaband{background:var(--pk-teal);}
.phonak-skin .ctaband h2{color:#fff;}
.phonak-skin .ctaband p{color:#bcd0d8;}
.phonak-skin .ctaband .btn-cta{background:var(--pk-lime);color:#000;border-color:var(--pk-lime);}
.phonak-skin .ctaband .btn-cta:hover{background:var(--pk-lime-d);border-color:var(--pk-lime-d);color:#000;}
.phonak-skin .ctaband .btn-outline{border-color:rgba(255,255,255,.7);color:#fff;}
.phonak-skin .ctaband .btn-outline:hover{background:#fff;color:var(--pk-teal);}

@media (max-width:980px){
  .phonak-skin .lineup-cards{grid-template-columns:1fr 1fr;}
  .phonak-skin .lineup-detail .inner{grid-template-columns:1fr;gap:24px;}
}
@media (max-width:560px){
  .phonak-skin .lineup-cards{grid-template-columns:1fr;}
}

  /* ===================== Immersive brand-landing components ===================== */
  /* Full-bleed hero */
  .phonak-skin .pk-hero{position:relative;min-height:clamp(460px,66vh,660px);display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;background:linear-gradient(160deg,#0a3a2e 0%,var(--pk-teal-d) 70%);}
  .phonak-skin .pk-hero .bg{position:absolute;inset:0;z-index:0;}
  .phonak-skin .pk-hero .bg img,.phonak-skin .pk-hero .bg video{width:100%;height:100%;object-fit:cover;display:block;}
  .phonak-skin .pk-hero .bg.noimg img,.phonak-skin .pk-hero .bg.noimg video{display:none;}
  .phonak-skin .pk-hero .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(3,20,29,.42),rgba(3,20,29,.72));}
  .phonak-skin .pk-hero .inner{position:relative;z-index:2;max-width:860px;padding:60px 48px;background:rgba(3,20,29,.32);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:24px;border:1px solid rgba(255,255,255,.08);}
  .phonak-skin .pk-hero .eyebrow{color:var(--pk-teal)!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;}
  .phonak-skin .pk-hero .eyebrow img{filter:none!important;height:18px!important;width:auto!important;}
  .phonak-skin .pk-hero h1{color:#fff;font-size:clamp(2.8rem,6.5vw,5.2rem);line-height:1.02;margin:0 0 14px;}
  .phonak-skin .pk-hero .tagline{font-family:"Fraunces",serif;font-weight:600;font-size:clamp(1.3rem,3vw,2.1rem);color:#fff;margin:0 0 16px;}
  .phonak-skin .pk-hero p.sub{color:#e4ecdd;max-width:62ch;margin:0 auto 26px;font-size:1.1rem;}
  .phonak-skin .pk-hero .cta-row{justify-content:center;}

  /* Quick-nav circular icon row */
  .phonak-skin .pk-quicknav{display:flex;justify-content:center;gap:clamp(22px,5vw,68px);flex-wrap:wrap;padding:38px 24px;background:var(--pk-white);border-bottom:1px solid var(--pk-edge);}
  .phonak-skin .pk-quicknav a{display:flex;flex-direction:column;align-items:center;gap:11px;color:var(--pk-ink);font-weight:600;font-size:.9rem;text-decoration:none;text-align:center;line-height:1.25;}
  .phonak-skin .pk-quicknav .circle{width:76px;height:76px;border-radius:50%;background:var(--pk-white);border:1px solid var(--pk-edge);box-shadow:0 8px 20px rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;transition:.18s ease;}
  .phonak-skin .pk-quicknav a:hover .circle{transform:translateY(-3px);border-color:var(--pk-lime);box-shadow:0 12px 26px rgba(0,0,0,.10);}
  .phonak-skin .pk-quicknav .circle svg{width:34px;height:34px;color:var(--pk-teal);}

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

  /* Product media block + placeholder */
  .phonak-skin .pk-media{position:relative;border-radius:16px;overflow:hidden;min-height:440px;display:flex;align-items:center;justify-content:center;background:#ECEEE7;}
  .phonak-skin .pk-media.dark{background:radial-gradient(120% 120% at 65% 30%,#0c4a39 0%,var(--pk-teal-d) 72%);}
  .phonak-skin .pk-media img.pk-prodimg{max-width:96%;max-height:480px;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(0,0,0,.28));}
  .phonak-skin .pk-media .phslot{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;padding:16px;}
  .phonak-skin .pk-media .phslot img{height:30px;opacity:.5;}
  .phonak-skin .pk-media.dark .phslot img{filter:brightness(0) invert(1);opacity:.6;}
  .phonak-skin .pk-media .phslot small{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.68rem;background:rgba(0,0,0,.04);border:1px dashed var(--pk-edge);padding:3px 8px;border-radius:6px;color:#8a8884;}
  .phonak-skin .pk-media.dark .phslot small{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#cfe;}
  .phonak-skin .pk-media.noimg img.pk-prodimg{display:none;}
  .phonak-skin .pk-media:not(.noimg) .phslot{display:none;}

  /* Product section bands */
  .phonak-skin .pk-prod{padding:clamp(3.5rem,7vw,6.5rem) 0;}
  .phonak-skin .pk-prod.band{background:var(--pk-off);}
  .phonak-skin .pk-prod.dark{background:var(--pk-teal);}
  .phonak-skin .pk-prod.dark h2,.phonak-skin .pk-prod.dark p,.phonak-skin .pk-prod.dark .lead{color:#fff;}
  .phonak-skin .pk-prod.dark p{color:#c7d6dc;}
  .phonak-skin .pk-prod .modeltag{display:inline-block;background:var(--pk-lime);color:#000;font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:6px;margin-bottom:14px;}
  .phonak-skin .pk-prod h2{margin:0 0 14px;}
  .phonak-skin .pk-prod .pk-spec{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 22px;}
  .phonak-skin .pk-prod .pk-spec span{display:inline-flex;align-items:center;gap:7px;background:var(--pk-off);border:1px solid var(--pk-edge);color:var(--pk-ink);border-radius:6px;font-weight:600;font-size:.8rem;padding:7px 12px;}
  .phonak-skin .pk-prod.dark .pk-spec span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff;}
  .phonak-skin .pk-prod .pk-spec span svg{width:15px;height:15px;color:var(--pk-teal);}
  .phonak-skin .pk-prod.dark .pk-spec span svg{color:var(--pk-lime);}
  .phonak-skin .pk-prod.dark .pk-media.dark{background:radial-gradient(120% 120% at 65% 30%,#0e5743 0%,#03281d 75%);}
  .phonak-skin .pk-prod .subchips span{font-size:.74rem;}
  .phonak-skin .pk-prod.dark .subchips span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff;}

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