/* Option B — immersive brand worlds.
   Each brand page sets body.world-<brand>; every component below reads the --w-* tokens. */

.world {
  --w-bg: #fff; --w-fg: #111; --w-muted: #666; --w-accent: #00458e; --w-accent-ink: #fff;
  --w-surface: #f5f5f5; --w-line: rgba(0,0,0,.1); --w-bar: rgba(255,255,255,.8);
  --w-head: var(--sans); --w-body: var(--sans); --w-head-weight: 700; --w-head-case: none; --w-head-track: 0;
  --w-radius: 18px; --w-footer: #071a30;
  background: var(--w-bg); color: var(--w-fg); font-family: var(--w-body);
}
.world h1, .world h2, .world h3 {
  font-family: var(--w-head); color: var(--w-fg); font-weight: var(--w-head-weight);
  text-transform: var(--w-head-case); letter-spacing: var(--w-head-track);
}
.world a { color: inherit; }
.world .site-footer { background: var(--w-footer); }

/* Brand page bar */
.w-bar {
  position: sticky; top: 0; z-index: 50; background: var(--w-bar); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--w-line);
}
.w-bar .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 18px; }
.w-back { display: flex; align-items: center; gap: 12px; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.w-back .emb { width: 32px; height: auto; }
.world-pluryal .w-back .emb { filter: brightness(0); }
.world-nitronox .w-back .emb { filter: brightness(0) saturate(100%) invert(22%) sepia(90%) saturate(1800%) hue-rotate(190deg); }
.w-back small { display: block; font-weight: 400; letter-spacing: .08em; text-transform: none; color: var(--w-muted); font-size: .75rem; }
.w-switch { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.w-switch a {
  display: block; padding: 8px 14px; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  color: var(--w-muted); transition: color .2s, background .2s;
}
.w-switch a:hover { color: var(--w-fg); }
.w-switch a[aria-current="page"] { background: var(--w-accent); color: var(--w-accent-ink); }
.w-enquire {
  padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--w-fg); font-size: .82rem; font-weight: 700;
  transition: background .2s, color .2s;
}
.w-enquire:hover { background: var(--w-fg); color: var(--w-bg); }

/* Hero */
.w-hero { position: relative; min-height: calc(100vh - 68px); display: flex; align-items: center; overflow: hidden; }
.w-hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 1fr; gap: 50px; align-items: center; }
.w-logo { height: 54px; width: auto; margin-bottom: 30px; }
.w-kicker { font-size: .78rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 700; color: var(--w-accent); margin-bottom: 18px; display: block; }
.w-title { font-size: clamp(2.8rem, 6.4vw, 5.6rem); line-height: 1; margin: 0 0 26px; }
.w-lead { font-size: 1.15rem; color: var(--w-muted); max-width: 540px; }
.w-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.w-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: var(--w-radius);
  background: var(--w-accent); color: var(--w-accent-ink) !important; font-weight: 700; font-size: .95rem; border: 0;
  transition: transform .2s, filter .2s;
}
.w-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.w-btn.ghost { background: transparent; color: var(--w-fg) !important; box-shadow: inset 0 0 0 1.5px var(--w-line); }
.w-btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--w-fg); }
.w-scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2; font-size: .72rem;
  letter-spacing: .3em; text-transform: uppercase; color: var(--w-muted); display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.w-scroll::after { content: ""; width: 1px; height: 40px; background: linear-gradient(var(--w-muted), transparent); animation: drip 2s infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Sections */
.w-section { padding: 120px 0; }
.w-section.alt { background: var(--w-surface); }
.w-head { max-width: 720px; margin-bottom: 60px; }
.w-head h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.05; }
.w-head p { color: var(--w-muted); font-size: 1.1rem; }
.w-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.w-cards.three { grid-template-columns: repeat(3, 1fr); }
.w-card {
  background: var(--w-bg); border: 1px solid var(--w-line); border-radius: var(--w-radius); padding: 34px 28px;
  transition: transform .35s, border-color .35s;
}
.w-section:not(.alt) .w-card { background: var(--w-surface); }
.w-card:hover { transform: translateY(-6px); border-color: var(--w-accent); }
.w-card .n { font-family: var(--w-head); font-size: 2.4rem; color: var(--w-accent); line-height: 1; margin-bottom: 18px; display: block; }
.w-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.w-card p { color: var(--w-muted); margin: 0; font-size: .96rem; }
.w-split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.w-media { border-radius: var(--w-radius); overflow: hidden; background: var(--w-surface); }
.w-media img { width: 100%; height: 100%; object-fit: cover; }
.w-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.w-list li { padding: 18px 0 18px 38px; border-bottom: 1px solid var(--w-line); position: relative; }
.w-list li::before {
  content: ""; position: absolute; left: 0; top: 25px; width: 18px; height: 2px; background: var(--w-accent);
}
.w-big {
  font-family: var(--w-head); font-size: clamp(2rem, 4.6vw, 3.8rem); line-height: 1.12; max-width: 1000px;
  text-transform: var(--w-head-case); letter-spacing: var(--w-head-track); font-weight: var(--w-head-weight);
}
.w-big em { color: var(--w-accent); font-style: normal; }

/* Brand film (protected video slot) */
.w-film {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--w-radius); overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--w-accent) 45%, transparent), transparent 60%), #0b0d10;
  color: #fff; text-align: center; user-select: none;
}
.w-film .play {
  width: 92px; height: 92px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.6); display: grid; place-items: center;
  margin: 0 auto 18px; backdrop-filter: blur(6px);
}
.w-film .play::after { content: ""; border-left: 22px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 6px; }
.w-film p { margin: 0; opacity: .75; font-size: .92rem; letter-spacing: .08em; }

/* CTA + next world */
.w-cta { text-align: center; }
.w-cta h2 { font-size: clamp(2.2rem, 5vw, 4rem); }
.w-cta p { color: var(--w-muted); max-width: 560px; margin: 0 auto 30px; }
.w-cta .w-actions { justify-content: center; }
.w-next {
  display: block; position: relative; overflow: hidden; padding: 90px 0; background: var(--next-bg); color: var(--next-fg) !important;
}
.w-next .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.w-next span { font-size: .78rem; letter-spacing: .26em; text-transform: uppercase; opacity: .7; }
.w-next strong { display: block; font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1; font-family: var(--next-font); font-weight: 600; }
.w-next .arrow { font-size: 3rem; transition: transform .3s; }
.w-next:hover .arrow { transform: translateX(12px); }

/* Page wipe transition */
.wipe {
  position: fixed; inset: 0; z-index: 100; pointer-events: none; background: var(--wipe, #00458e);
  transform: scaleY(0); transform-origin: bottom; transition: transform .55s cubic-bezier(.7,0,.3,1);
}
.wipe.cover { transform: scaleY(1); }
.wipe.enter { transform: scaleY(1); transform-origin: top; }
.wipe.enter.go { transform: scaleY(0); }

/* =========================================================
   PLURYAL — European luxury beauty
   ========================================================= */
.world-pluryal {
  --w-bg: #f7f2ec; --w-fg: #141210; --w-muted: #6f655c; --w-accent: #a8865a; --w-accent-ink: #fff;
  --w-surface: #efe6dc; --w-line: rgba(20,18,16,.12); --w-bar: rgba(247,242,236,.82);
  --w-head: "Italiana", "Cormorant Garamond", serif; --w-body: "Jost", system-ui, sans-serif;
  --w-head-weight: 400; --w-head-track: .02em; --w-radius: 0; --w-footer: #141210;
}
.world-pluryal .w-logo { filter: invert(1); height: 64px; }
.world-pluryal .w-btn { letter-spacing: .18em; text-transform: uppercase; font-size: .78rem; font-weight: 500; padding: 18px 34px; background: #141210; }
.world-pluryal .w-btn.ghost { background: transparent; }
.world-pluryal .w-title { font-size: clamp(3.4rem, 8vw, 7.4rem); }
.silk { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.silk i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .75; animation: drift 18s ease-in-out infinite alternate; }
.silk i:nth-child(1) { width: 52vw; height: 52vw; right: -10vw; top: -14vw; background: #e9cfc2; }
.silk i:nth-child(2) { width: 40vw; height: 40vw; right: 14vw; bottom: -18vw; background: #dcc6a3; animation-duration: 22s; }
.silk i:nth-child(3) { width: 30vw; height: 30vw; right: 2vw; top: 30%; background: #fff7ef; animation-duration: 15s; }
@keyframes drift { to { transform: translate(-6vw, 5vw) scale(1.12); } }
/* Pluryal hero (Option D): Pluryal's own mesoline / injectables showcase */
.p-show { justify-self: end; width: 100%; max-width: 440px; text-align: center; }
.p-toggle { display: flex; justify-content: center; gap: 14px; margin-bottom: 16px; }
.p-toggle button {
  font: 600 1.15rem "Cormorant Garamond", Georgia, serif; padding: 12px 0; width: 150px; cursor: pointer;
  background: transparent; color: #141210; border: 1px solid #141210; transition: background .25s, color .25s;
}
.p-toggle button[aria-selected="true"] { background: #141210; color: #fff; }
.p-areas { display: flex; justify-content: center; gap: 22px; margin: 0 0 26px; font: 300 1.15rem "Lato", sans-serif; letter-spacing: .04em; }
.p-areas a { text-transform: uppercase; color: #3a3530; }
.p-areas a:first-child { font-weight: 700; color: #141210; }
.p-areas a:hover { color: var(--w-accent); }
.p-areas span { color: #141210; }
.p-img { aspect-ratio: 1; background: #fff; box-shadow: 0 40px 70px -40px rgba(80,60,40,.45); overflow: hidden; }
.p-img img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; animation: pfade .5s ease; }
.p-img img[hidden] { display: none; }
@keyframes pfade { from { opacity: 0; } }
@media (max-width: 1000px) { .p-show { justify-self: start; max-width: 400px; } }

/* Pluryal hero: brand campaign film as a full-bleed background */
.bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; user-select: none; }
.p-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, #f7f2ec 0%, rgba(247,242,236,.92) 32%, rgba(247,242,236,.35) 58%, rgba(247,242,236,0) 80%);
}
@media (max-width: 1000px) {
  .p-hero::after { background: linear-gradient(180deg, rgba(247,242,236,.2) 0%, rgba(247,242,236,.85) 45%, #f7f2ec 75%); }
  .p-hero .bg-video { height: 55%; }
  .p-hero .wrap { padding-top: 38vh; }
}
.p-frame {
  position: relative; aspect-ratio: 3 / 4; max-width: 420px; justify-self: end; width: 100%;
  border: 1px solid rgba(20,18,16,.25); display: grid; place-items: center; text-align: center;
}
.p-frame::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(20,18,16,.12); }
.p-frame .p-logo { width: 62%; height: auto; filter: invert(1); }
.p-frame em { position: absolute; bottom: 40px; font-family: var(--w-head); font-style: normal; letter-spacing: .4em; font-size: .9rem; color: var(--w-muted); }
@keyframes float { 50% { transform: translateY(-14px); } }
.world-pluryal .w-card { text-align: center; padding: 50px 28px; }
.world-pluryal .w-card .n { font-size: 3rem; }
.world-pluryal .w-kicker { color: var(--w-accent); letter-spacing: .4em; font-weight: 500; }

/* =========================================================
   FOTOFINDER — Bavarian skin-imaging technology
   ========================================================= */
.world-fotofinder {
  --w-bg: #121619; --w-fg: #f2f4f5; --w-muted: #a7aeb2; --w-accent: #f04438; --w-accent-ink: #fff;
  --w-surface: #1b2024; --w-line: rgba(255,255,255,.1); --w-bar: rgba(18,22,25,.82);
  --w-head: "Source Sans 3", system-ui, sans-serif; --w-body: "Source Sans 3", system-ui, sans-serif;
  --w-head-weight: 300; --w-radius: 4px; --w-footer: #0b0e10;
}
.world-fotofinder .w-title { font-weight: 300; letter-spacing: -.02em; }
.world-fotofinder .w-title b { font-weight: 700; color: var(--w-accent); }
.world-fotofinder .w-hero {
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 48px 48px, var(--w-bg);
}
.lens { position: relative; width: min(480px, 100%); aspect-ratio: 1; justify-self: center; }
.lens svg { width: 100%; height: 100%; overflow: visible; }
.lens .ring { transform-origin: 50% 50%; animation: spin 30s linear infinite; }
.lens .ring2 { transform-origin: 50% 50%; animation: spin 18s linear infinite reverse; }
.lens .scan { animation: scan 4s ease-in-out infinite; }
.lens .spot { transform-box: fill-box; transform-origin: center; animation: pulse 2.4s ease-out infinite; }
.lens .spot:nth-of-type(2) { animation-delay: .8s; } .lens .spot:nth-of-type(3) { animation-delay: 1.6s; }
.lens .hud { font: 600 11px "Source Sans 3", sans-serif; letter-spacing: .18em; fill: #a7aeb2; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes scan { 0%, 100% { transform: translateY(-150px); opacity: 0; } 15%, 85% { opacity: 1; } 50% { transform: translateY(150px); } }
@keyframes pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
.world-fotofinder .w-card { border-top: 2px solid var(--w-accent); }
.world-fotofinder .w-card .n { font-weight: 300; }
.world-fotofinder .w-big { font-weight: 300; }

/* FotoFinder expanded world (Option D): systems selector, trichoscopy, specialties */
.ff-systems { display: grid; grid-template-columns: 260px 1fr; gap: 30px; align-items: start; }
.ff-tabs { display: flex; flex-direction: column; gap: 8px; }
.ff-tabs button {
  text-align: left; background: transparent; border: 1px solid var(--w-line); border-left: 3px solid transparent; color: var(--w-fg);
  padding: 16px 18px; border-radius: 4px; cursor: pointer; font-family: inherit; transition: background .2s, border-color .2s;
}
.ff-tabs button b { display: block; font-size: 1.1rem; font-weight: 600; }
.ff-tabs button small { color: var(--w-muted); font-size: .85rem; }
.ff-tabs button:hover { background: rgba(255,255,255,.04); }
.ff-tabs button[aria-selected="true"] { border-left-color: var(--w-accent); background: var(--w-bg); }
.ff-pane { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; background: var(--w-bg); border-radius: 4px; padding: 30px; animation: pfade .4s ease; }
.ff-pane[hidden] { display: none; }
.ff-pane h3 { font-size: 2.2rem; font-weight: 300; margin-bottom: 12px; }
.ff-pane p { color: var(--w-muted); }
.ff-pane .w-list { margin-bottom: 26px; }
.ff-shot { aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: #fff; }
.ff-shot img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.ff-tricho h2 b { color: var(--w-accent); font-weight: 700; }
.ff-tricho strong { color: var(--w-fg); }
.ff-note { margin-top: 18px; font-size: .9rem; color: var(--w-accent); letter-spacing: .04em; }
.ff-tricho-media { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ff-tricho-media img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 4px; user-select: none; -webkit-user-drag: none; }
.ff-tricho-media img:nth-child(2) { margin-top: 50px; }
.ff-specs { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--w-line); border-left: 1px solid var(--w-line); }
.ff-specs > div { border-right: 1px solid var(--w-line); border-bottom: 1px solid var(--w-line); }
.ff-specs > div > b, .ff-specs > div > a { display: block; }
.ff-specs > div, .ff-specs a { padding: 28px 22px; }
.ff-specs > div:has(a) { padding: 0; }
.ff-specs b { display: block; font-size: 1.15rem; font-weight: 600; margin-bottom: 6px; }
.ff-specs span { color: var(--w-muted); font-size: .9rem; }
.ff-specs a:hover b { color: var(--w-accent); }
@media (max-width: 1000px) {
  .ff-systems { grid-template-columns: 1fr; }
  .ff-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
  .ff-tabs button { flex: none; border-left-width: 1px; border-bottom: 3px solid transparent; }
  .ff-tabs button[aria-selected="true"] { border-left-color: var(--w-line); border-bottom-color: var(--w-accent); }
  .ff-pane { grid-template-columns: 1fr; }
  .ff-specs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .ff-specs { grid-template-columns: 1fr; } .ff-pane { padding: 20px; } }

/* =========================================================
   MECTRON — ultrasonic surgical precision
   ========================================================= */
.world-mectron {
  --w-bg: #0e0e0e; --w-fg: #ffffff; --w-muted: #9a9a9a; --w-accent: #f36e21; --w-accent-ink: #fff;
  --w-surface: #171717; --w-line: rgba(255,255,255,.12); --w-bar: rgba(14,14,14,.85);
  --w-head: "Barlow Condensed", "Open Sans", sans-serif; --w-body: "Open Sans", system-ui, sans-serif;
  --w-head-weight: 700; --w-head-case: uppercase; --w-head-track: .01em; --w-radius: 0; --w-footer: #070707;
}
.world-mectron .w-title { font-size: clamp(3rem, 7.4vw, 6.6rem); line-height: .92; }
.world-mectron .w-title span { color: var(--w-accent); display: block; }
.world-mectron .w-btn { text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; }
.waves { position: absolute; inset: 0; z-index: 0; }
.waves svg { width: 100%; height: 100%; }
.waves path { fill: none; stroke: var(--w-accent); stroke-width: 1.4; stroke-dasharray: 6 10; animation: flow 3s linear infinite; }
.waves path:nth-child(2) { opacity: .55; animation-duration: 4s; }
.waves path:nth-child(3) { opacity: .3; animation-duration: 5s; }
.waves path:nth-child(4) { opacity: .15; animation-duration: 6s; }
@keyframes flow { to { stroke-dashoffset: -160; } }
.world-mectron .w-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, #0e0e0e 0%, rgba(14,14,14,.85) 45%, rgba(14,14,14,.2) 100%);
}
.m-device { justify-self: end; max-width: 460px; width: 100%; aspect-ratio: 1; background: #fff; position: relative; }
.m-device img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.m-device::before {
  content: "PIEZOSURGERY®"; position: absolute; left: -1px; top: -34px; background: var(--w-accent); color: #fff;
  font: 700 .8rem "Barlow Condensed", sans-serif; letter-spacing: .2em; padding: 8px 14px;
}
.m-apps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--w-line); border-left: 1px solid var(--w-line); }
.m-apps div {
  padding: 40px 30px; border-right: 1px solid var(--w-line); border-bottom: 1px solid var(--w-line);
  font: 700 1.6rem/1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .02em;
  transition: background .3s, color .3s; display: flex; justify-content: space-between; align-items: center;
}
.m-apps div::after { content: "+"; color: var(--w-accent); font-size: 1.8rem; transition: color .3s; }
.m-apps div:hover { background: var(--w-accent); }
.m-apps div:hover::after { color: #fff; }
.world-mectron .w-card .n { font-weight: 700; }

/* =========================================================
   NITRONOX PLUS — calm, breath, comfort
   ========================================================= */
.world-nitronox {
  --w-bg: #f6fafd; --w-fg: #0f2a3d; --w-muted: #5e6266; --w-accent: #0064a5; --w-accent-ink: #fff;
  --w-surface: #e8f1f8; --w-line: rgba(0,100,165,.14); --w-bar: rgba(246,250,253,.85);
  --w-head: "Nunito Sans", "Roboto", sans-serif; --w-body: "Roboto", system-ui, sans-serif;
  --w-head-weight: 300; --w-radius: 999px; --w-footer: #0a2233;
}
.world-nitronox .w-title { font-weight: 200; letter-spacing: -.02em; }
.world-nitronox .w-title b { font-weight: 700; color: var(--w-accent); }
.world-nitronox .w-card { border-radius: 28px; }
.world-nitronox .w-media, .world-nitronox .w-film { border-radius: 28px; }
.breath { position: relative; width: min(460px, 100%); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; }
.breath i {
  position: absolute; border-radius: 50%; border: 1px solid rgba(0,100,165,.25);
  animation: breathe 10s ease-in-out infinite;
}
.breath i:nth-child(1) { inset: 0; background: radial-gradient(circle, rgba(0,146,239,.10), transparent 70%); }
.breath i:nth-child(2) { inset: 12%; animation-delay: .25s; }
.breath i:nth-child(3) { inset: 24%; animation-delay: .5s; background: rgba(0,100,165,.05); }
.breath i:nth-child(4) { inset: 36%; animation-delay: .75s; background: linear-gradient(160deg, #0092ef, #0064a5); border: 0; box-shadow: 0 30px 60px -20px rgba(0,100,165,.6); }
@keyframes breathe { 0%, 100% { transform: scale(.82); } 50% { transform: scale(1.06); } }
.breath .say { position: relative; z-index: 2; color: #fff; font: 300 1.15rem "Nunito Sans", sans-serif; letter-spacing: .14em; text-transform: lowercase; height: 1.4em; overflow: hidden; }
.breath .say span { display: block; animation: say 10s ease-in-out infinite; }
@keyframes say { 0%, 45% { transform: translateY(0); } 50%, 95% { transform: translateY(-100%); } 100% { transform: translateY(0); } }
.n-hero70 { display: grid; grid-template-columns: 1fr 1.2fr; gap: 70px; align-items: center; }
.n-dial {
  aspect-ratio: 1; max-width: 400px; width: 100%; justify-self: center; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: conic-gradient(from 225deg, #0092ef 0deg, #0064a5 189deg, rgba(0,100,165,.12) 189deg 270deg, transparent 270deg),
              radial-gradient(circle, #fff 0 64%, transparent 64.5%);
  -webkit-mask: radial-gradient(circle, #000 0 100%); box-shadow: 0 40px 80px -40px rgba(0,100,165,.5);
  position: relative;
}
.n-dial::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: #fff; }
.n-dial b, .n-dial span { position: relative; }
.n-dial b { font: 200 clamp(3.4rem, 8vw, 5rem)/1 "Nunito Sans", sans-serif; color: var(--w-accent); }
.n-dial span { color: var(--w-muted); font-size: .95rem; margin-top: 8px; letter-spacing: .04em; }
@media (max-width: 1000px) { .n-hero70 { grid-template-columns: 1fr; gap: 40px; } }
.n-models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.n-model { background: #fff; border-radius: 28px; padding: 40px 30px; text-align: center; border: 1px solid var(--w-line); }
.n-model b { display: block; font: 200 3.4rem/1 "Nunito Sans", sans-serif; color: var(--w-accent); margin-bottom: 10px; }
.n-model p { margin: 0; color: var(--w-muted); }

/* =========================================================
   DERMLITE — the original polarized dermatoscope (Option D)
   ========================================================= */
.world-dermlite {
  --w-bg: #ffffff; --w-fg: #222222; --w-muted: #6b6b6b; --w-accent: #a67d55; --w-accent-ink: #fff;
  --w-surface: #f4f2ef; --w-line: rgba(0,0,0,.09); --w-bar: rgba(255,255,255,.88);
  --w-head: "Source Sans 3", system-ui, sans-serif; --w-body: "Source Sans 3", system-ui, sans-serif;
  --w-head-weight: 300; --w-radius: 6px; --w-footer: #1c1c1c;
}
.world-dermlite .w-title { font-weight: 300; letter-spacing: -.02em; }
.world-dermlite .w-title b { font-weight: 700; color: var(--w-accent); }
.world-dermlite .w-logo { height: 64px; }
.world-dermlite .w-back .emb { filter: brightness(0); }
.dl-stage { position: relative; justify-self: center; width: min(520px, 100%); aspect-ratio: 1; display: grid; place-items: center; }
.dl-stage::before {
  content: ""; position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle, rgba(166,125,85,.22), rgba(166,125,85,.06) 55%, transparent 70%);
}
.dl-stage::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 1px solid rgba(166,125,85,.35); }
.dl-stage img { position: relative; z-index: 1; width: 100%; transform: rotate(-8deg); filter: drop-shadow(0 40px 40px rgba(0,0,0,.25)); animation: dlfloat 7s ease-in-out infinite; }
@keyframes dlfloat { 50% { transform: rotate(-8deg) translateY(-14px); } }
.dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.dl-prod { background: #fff; border-radius: 6px; padding: 18px 18px 26px; border: 1px solid var(--w-line); transition: transform .3s, border-color .3s; }
.dl-prod:hover { transform: translateY(-6px); border-color: var(--w-accent); }
.dl-shot { aspect-ratio: 3 / 2; background: #fafafa; border-radius: 4px; overflow: hidden; margin-bottom: 18px; display: grid; place-items: center; }
.dl-shot img { width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.dl-prod h3 { font-size: 1.4rem; font-weight: 600; margin-bottom: 6px; }
.dl-prod p { color: var(--w-muted); margin: 0; font-size: .95rem; }
.dl-family { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.dl-family > div { max-width: 640px; }
.portal.dl { color: #222; }
.portal.dl .bg { background: radial-gradient(circle at 50% 38%, rgba(166,125,85,.35), transparent 40%), linear-gradient(180deg, #ffffff, #efebe6); }
.portal.dl .pline { font-family: "Source Sans 3", sans-serif; font-weight: 300; }
.portal.dl .ptag { color: #a67d55; opacity: 1; }
.brand-strip img.dark-logo { filter: brightness(0) invert(1); }
@media (max-width: 1000px) { .dl-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .dl-grid { grid-template-columns: 1fr; } }

/* =========================================================
   HOME — brand portals
   ========================================================= */
.portals { display: flex; height: 640px; gap: 0; }
.portal {
  position: relative; flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 40px 32px; color: #fff; transition: flex .7s cubic-bezier(.6,0,.2,1); isolation: isolate;
}
.portal:hover, .portal:focus-visible { flex: 2.3; }
.portal img.plogo { height: 42px; width: auto; max-width: 100%; object-fit: contain; object-position: left; margin-bottom: 18px; }
.portal .ptag { font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; opacity: .75; }
.portal .pline { font-size: 1.5rem; line-height: 1.15; margin: 10px 0 0; max-width: 360px; }
.portal .penter {
  margin-top: 22px; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  opacity: 0; transform: translateY(10px); transition: all .4s .15s;
}
.portal:hover .penter, .portal:focus-visible .penter { opacity: 1; transform: none; }
.portal .bg { position: absolute; inset: 0; z-index: -1; transition: transform 1.2s; }
.portal:hover .bg { transform: scale(1.06); }
.portal.pl { color: #141210; }
.portal.pl .bg { background: radial-gradient(circle at 70% 20%, #e9cfc2, transparent 50%), radial-gradient(circle at 20% 80%, #dcc6a3, transparent 55%), #f7f2ec; }
.portal.pl img.plogo { filter: invert(1); }
.portal.pl .pline { font-family: "Italiana", serif; font-size: 1.9rem; }
.portal.ff .bg {
  background: radial-gradient(circle at 50% 38%, rgba(240,68,56,.35), transparent 30%),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 32px 32px, #121619;
}
.portal.ff .pline { font-family: "Source Sans 3", sans-serif; font-weight: 300; }
.portal.mt .bg { background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(243,110,33,.18) 22px 23px), linear-gradient(180deg, #1a1a1a, #0e0e0e); }
.portal.mt .pline { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; font-weight: 700; font-size: 1.9rem; }
.portal.mt .ptag { color: #f36e21; opacity: 1; }
.portal.nx .bg { background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.35), transparent 35%), linear-gradient(170deg, #0092ef, #0064a5 60%, #0a3d66); }
.portal.nx .pline { font-family: "Nunito Sans", sans-serif; font-weight: 300; }

/* Responsive */
@media (max-width: 1000px) {
  .w-hero .wrap, .w-split { grid-template-columns: 1fr; gap: 50px; }
  .w-cards { grid-template-columns: repeat(2, 1fr); }
  .w-cards.three, .n-models { grid-template-columns: 1fr 1fr; }
  .m-apps { grid-template-columns: 1fr 1fr; }
  .p-frame, .m-device { justify-self: start; max-width: 360px; }
  .portals { flex-direction: column; height: auto; }
  .portal { min-height: 300px; }
  .portal:hover { flex: 1; }
  .portal .penter { opacity: 1; transform: none; }
  .w-scroll { display: none; }
}
@media (max-width: 820px) {
  .w-switch { display: none; }
  .w-section { padding: 80px 0; }
  .w-hero { min-height: auto; padding: 60px 0 100px; }
  .w-back small { display: none; }
}
@media (max-width: 560px) {
  .w-cards, .w-cards.three, .n-models, .m-apps { grid-template-columns: 1fr; }
  .w-enquire { padding: 8px 14px; font-size: .75rem; }
  .w-next .arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .silk i, .p-frame .drop, .lens *, .waves path, .breath i, .breath .say span, .w-scroll::after { animation: none !important; }
  .wipe { display: none; }
}

/* Five-brand logo strip (Option D) */
.brand-strip .wrap:has(> a:nth-child(5)) { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 820px) { .brand-strip .wrap:has(> a:nth-child(5)) { grid-template-columns: repeat(3, 1fr); } }

/* Mectron surgical cases (Option D) */
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 40px; justify-content: center; align-items: end; }
.case { margin: 0; }
.case video { width: 100%; height: auto; background: #000; display: block; border-top: 3px solid var(--w-accent); }
.case figcaption { padding-top: 16px; }
.case figcaption b { display: block; font: 700 1.5rem/1.1 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.case figcaption span { color: var(--w-muted); font-size: .9rem; }
.cases-note { text-align: center; color: var(--w-muted); font-size: .85rem; margin-top: 34px; }
@media (max-width: 700px) { .cases { grid-template-columns: minmax(0, 340px); } }

/* Brand film slot holding a real video (Options E and F) */
.w-film.has-video { display: block; background: #000; aspect-ratio: auto; }
.w-film.has-video video { width: 100%; height: auto; object-fit: contain; display: block; background: #000; }

/* Pluryal showcase: "Watch the film" button + video lightbox (Options E and F) */
.p-watch {
  margin-top: 16px; width: 100%; padding: 14px 18px; border: 1px solid #141210; background: #141210; color: #fff;
  font: 500 .8rem/1 "Jost", sans-serif; letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background .2s, color .2s;
}
.p-watch span { font-size: .7rem; }
.p-watch:hover { background: transparent; color: #141210; }
.lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(10,8,6,.9); display: grid; place-items: center; padding: 24px; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; width: min(1100px, 100%); }
.lightbox video { width: 100%; max-height: 80vh; background: #000; display: block; }
.lightbox figcaption { color: #fff; font: 400 .95rem "Jost", "Lato", sans-serif; letter-spacing: .06em; margin-top: 12px; text-align: center; opacity: .85; }
.lightbox .lb-close {
  position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5);
  background: transparent; color: #fff; font-size: 1.4rem; cursor: pointer;
}
.lightbox .lb-close:hover { background: #fff; color: #000; }
.p-watch[hidden] { display: none; }
.p-img video { width: 100%; height: 100%; object-fit: cover; display: block; animation: pfade .5s ease; }
.p-img video[hidden] { display: none; }

/* Videos always fit inside the screen (laptops, small windows): never taller than ~75% of the window */
.w-film.has-video { background: transparent; }
.w-film.has-video video { width: auto; max-width: 100%; max-height: 75vh; margin: 0 auto; }
.case video { width: auto; max-width: 100%; max-height: 75vh; margin: 0 auto; }

/* Pluryal showcase with three tabs (mesoline · mesome · injectables) */
.p-toggle { gap: 8px; }
.p-toggle button { width: auto; flex: 1 1 0; min-width: 0; padding: 12px 8px; font-size: 1.05rem; }
.p-img img[hidden] { display: none; }

/* Pluryal showcase: films always visible under "Add to quote" */
.p-films { display: grid; gap: 10px; margin-top: 18px; }
.p-films .p-watch { margin-top: 0; }

/* Nitronox: full system photo (tall product shot on white) */
.world-nitronox .w-media.n-full { background: #fff; border-radius: 28px; padding: 24px; display: grid; place-items: center; }
.world-nitronox .w-media.n-full img { width: auto; max-width: 100%; height: auto; max-height: 620px; object-fit: contain; }