/* ============================================================
   ReSound brand skin — scoped to .resound-skin only.
   Source: docs/design-resound.md (observed from www.resound.com/en-gb)
   Warm, premium, human: white canvas, light humanist sans (Mulish),
   one confident crimson accent, pill buttons, sentence case.
   Now called simply "ReSound" (dropped "GN" prefix).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;600;700&display=swap');

.resound-skin{
  --rs-white:#fff;
  --rs-surface:#F0EFEE;
  --rs-edge:#E0DEDD;
  --rs-ink:#212721;
  --rs-ink2:#52514D;
  --rs-crimson:#AC162C;
  --rs-crimson-hover:#C31932;
  --rs-forest:#091408;
  --rs-forest2:#0E1E0D;
  --rs-taupe:#B2A8A2;
  background:var(--rs-white);
  font-family:'Mulish',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--rs-ink);
}
.resound-skin .container{max-width:1280px;}
.resound-skin .section{background:transparent;padding:clamp(4rem,8vw,7.5rem) 0;}

/* Typography — light elegant headings, sentence case */
.resound-skin h1,.resound-skin h2,.resound-skin h3,.resound-skin .modeltag{
  font-family:'Mulish',sans-serif;color:var(--rs-ink);letter-spacing:-.01em;
}
.resound-skin h1{font-weight:300;font-size:clamp(2.6rem,5vw,4rem);line-height:1.08;}
.resound-skin h2{font-weight:300;font-size:clamp(1.8rem,3.5vw,2.6rem);line-height:1.15;}
.resound-skin h3{font-weight:600;font-size:1.2rem;}
.resound-skin p,.resound-skin .lead{color:var(--rs-ink2);}
.resound-skin .lead{font-size:1.08rem;font-weight:400;}

/* Buttons — sentence case pill, crimson primary */
.resound-skin .btn{
  border-radius:9999px;box-shadow:none!important;
  font-family:'Mulish',sans-serif;font-weight:700;
  letter-spacing:.01em;text-transform:none;transition:.18s ease;
}
.resound-skin .btn-cta{background:var(--rs-crimson);color:#fff;border:2px solid var(--rs-crimson);}
.resound-skin .btn-cta:hover{background:var(--rs-crimson-hover);border-color:var(--rs-crimson-hover);color:#fff;transform:none;}
.resound-skin .btn-outline{background:transparent;border:2px solid var(--rs-ink);color:var(--rs-ink);}
.resound-skin .btn-outline:hover{background:var(--rs-ink);color:#fff;transform:none;}
.resound-skin .btn-lg{padding:14px 30px;font-size:.95rem;}
.resound-skin .floatbook{display:none;}

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

/* Hero — full-bleed video/image, dark scrim, white text */
.resound-skin .pk-hero{
  position:relative;min-height:clamp(480px,66vh,680px);
  display:flex;align-items:center;justify-content:center;
  text-align:center;color:#fff;overflow:hidden;
  background:var(--rs-forest);
}
.resound-skin .pk-hero .bg{position:absolute;inset:0;z-index:0;}
.resound-skin .pk-hero .bg video,
.resound-skin .pk-hero .bg img{width:100%;height:100%;object-fit:cover;display:block;}
.resound-skin .pk-hero .bg.noimg video,
.resound-skin .pk-hero .bg.noimg img{display:none;}
.resound-skin .pk-hero .scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(9,20,8,.55) 0%,rgba(9,20,8,.82) 100%);
}
.resound-skin .pk-hero .inner{
  position:relative;z-index:2;max-width:860px;
  padding:60px 48px;
  background:rgba(9,20,8,0.32);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.08);
}
.resound-skin .pk-hero .eyebrow{
  color:var(--rs-forest)!important;justify-content:center;
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.92);border:none;box-shadow:0 6px 18px rgba(0,0,0,.16);
  padding:7px 16px 7px 10px;border-radius:999px;
  margin-bottom:22px;letter-spacing:.12em;font-size:.8rem;
  text-transform:uppercase;font-weight:700;
}
.resound-skin .pk-hero .eyebrow img{filter:none!important;height:18px!important;width:auto!important;}
.resound-skin .pk-hero h1{
  color:#fff;font-weight:300;
  font-size:clamp(3rem,7vw,5.2rem);line-height:1.04;margin:0 0 16px;
}
.resound-skin .pk-hero .tagline{
  font-family:'Mulish',sans-serif;font-weight:600;
  font-size:clamp(1.1rem,2.5vw,1.5rem);
  color:var(--rs-crimson);margin:0 0 16px;
}
/* Crimson glint on tagline */
.resound-skin .pk-hero .tagline span{color:#ff4d64;}
.resound-skin .pk-hero p.sub{
  color:rgba(255,255,255,.82);max-width:58ch;
  margin:0 auto 30px;font-size:1.08rem;font-weight:400;
}
.resound-skin .pk-hero .cta-row{justify-content:center;}
.resound-skin .pk-hero .btn-cta{background:var(--rs-crimson);color:#fff;border-color:var(--rs-crimson);}
.resound-skin .pk-hero .btn-cta:hover{background:var(--rs-crimson-hover);border-color:var(--rs-crimson-hover);}
.resound-skin .pk-hero .btn-outline{background:transparent;border:2px solid rgba(255,255,255,.75);color:#fff;}
.resound-skin .pk-hero .btn-outline:hover{background:#fff;color:var(--rs-forest);}

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

/* Generic split */
.resound-skin .pk-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center;}
/* min-width:0 stops a wide child (e.g. an unconstrained 1280px video) from
   blowing its grid track out and squeezing the copy column */
.resound-skin .pk-split>*{min-width:0;}
.resound-skin .pk-split.alt .copy{order:2;}

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

/* Crimson accent bar on media block — optional visual flair */
.resound-skin .pk-media::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:var(--rs-crimson);opacity:0;transition:opacity .25s;
}
.resound-skin .pk-prod:hover .pk-media::after{opacity:1;}

/* Product sections */
.resound-skin .pk-prod{padding:clamp(3.5rem,7vw,6.5rem) 0;}
.resound-skin .pk-prod.band{background:var(--rs-surface);}
.resound-skin .pk-prod.dark{background:var(--rs-forest);}
.resound-skin .pk-prod.dark h2{color:#fff;font-weight:300;}
.resound-skin .pk-prod.dark .lead{color:rgba(255,255,255,.9);}
.resound-skin .pk-prod.dark p{color:rgba(255,255,255,.72);}

.resound-skin .pk-prod .modeltag{
  display:inline-block;background:transparent;color:var(--rs-crimson);
  font-weight:700;font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;padding:0;margin-bottom:12px;
}
.resound-skin .pk-prod.dark .modeltag{color:#ff6679;}
.resound-skin .pk-prod h2{margin:0 0 14px;}

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

/* Style chips */
.resound-skin .subchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.resound-skin .subchips span{
  font-size:.74rem;font-weight:700;color:var(--rs-ink);
  background:var(--rs-surface);border:1px solid var(--rs-edge);
  padding:6px 14px;border-radius:999px;
}
.resound-skin .pk-prod.dark .subchips span{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff;
}

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

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

/* Brand intro (lifestyle image split) */
.resound-skin .rs-intro{padding:clamp(4rem,8vw,8rem) 0;background:var(--rs-white);}
.resound-skin .rs-intro h2{font-weight:300;font-size:clamp(2rem,4vw,3.2rem);margin-bottom:20px;}
.resound-skin .rs-intro .accent-line{
  width:48px;height:3px;background:var(--rs-crimson);
  border-radius:2px;margin-bottom:24px;
}
.resound-skin .rs-intro .lifestyle-img{
  border-radius:20px;overflow:hidden;
  aspect-ratio:16/9;
}
.resound-skin .rs-intro .lifestyle-img img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* Per-product videos — contained in the media card (Savi, Enzo),
   matches the phonak/widex pattern: video fills the rounded card */
.resound-skin .pk-media.pk-media-vid{padding:0;max-height:380px;}
.resound-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;}

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