/* Complexion Care Stylesheet
   Mobile-first responsive design focusing on readability and fluidity.  
   Dark and light mode support via prefers-color-scheme media queries.  
   Uses Kinetika font: bold for headings, regular for body.  
*/

/* --- Font definitions --- */
@font-face {
  font-family: 'Kinetika';
  src: url('../fonts/Kinetika-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kinetika';
  src: url('../fonts/Kinetika-SemiBold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- CSS custom properties (light mode base) --- */
:root {
  /* Typography */
  --font-base: 'Kinetika', sans-serif;
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Colours */
  /* Update the background palette to a softer beige/grey blend.  This creates
     a gentle, modern base similar to the reference design.  The gradient
     animation will cycle between these two values. */
  /* --bg1: #f3e6d8; */        /* top gradient for light mode (beige) */
  --bg2: #e8e3d9;        /* bottom gradient for light mode (light grey) */
  --text-color: #2a1c13;
  --card-bg: rgba(255, 255, 255, 0.85);
  --card-border: rgba(0, 0, 0, 0.08);
  --overlay: rgba(0, 0, 0, 0.25);
  --highlight: #00cbb0;  /* light cyan accent */

  /* Layout */
  --header-height: 64px;
  --footer-height: 40px;
  --transition-speed: 0.3s;

  /* Navigation button colour (light) */
  --nav-button-color: #4a2b0c; /* dark brown for light mode */

  /* Modal heading size controls the relative sizing of modal body text. */
  --modal-heading-size: 2.2rem;
}

/* --- Dark mode overrides --- */
@media (prefers-color-scheme: dark) {
  :root {
    /* Use rich dark browns for the night theme.  The top colour is a warm
       chocolate hue and the bottom colour is an even deeper espresso.
       These values provide a luxurious feel while maintaining good
       contrast with the light text. */
    --bg1: #4b2e1d;      /* top gradient for dark mode (dark brown) */
    --bg2: #2c1a12;      /* bottom gradient for dark mode (espresso) */
    --text-color: #f7f2ec;
    --card-bg: rgba(0, 0, 0, 0.6);
    --card-border: rgba(255, 255, 255, 0.08);
    --overlay: rgba(0, 0, 0, 0.4);

    /* navigation buttons in dark mode become white */
    --nav-button-color: #ffffff;
  }
}

/* --- Reset and base styles --- */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: var(--font-base);
  font-weight: var(--font-weight-regular);
  color: var(--text-color);
  /*
    Animate a smooth gradient background.  Instead of a static radial
    gradient, this uses a linear gradient whose position animates over
    time.  The animation definition is found at the bottom of this
    stylesheet.  The large background-size allows for a gentle shift in
    colour that cycles through var(--bg1) and var(--bg2).
  */
  background: linear-gradient(120deg, #de793c, var(--bg2), var(--bg1));
  background-size: 400% 400%;
  animation: gradientFlow 15s ease infinite;
}

/* Shared centered container width for desktop alignment (logo/blocks/footer) */
.centered-width {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5rem 0;
  font-weight: var(--font-weight-bold);
  line-height: 0.9;
}

p {
  margin: 0 0 1rem 0;
}

a {
  color: #00cbb0;
  text-decoration: none;
  border: transparent;
  border-radius: 30px;
}
/* General hover no longer adds border globally; targeted styling below */

/* --- Header --- */
header {
  /* Allow the header background to span the entire viewport while the
     logo and navigation are contained inside .header-inner.  Sticky
     positioning keeps the bar fixed at the top when scrolling. */
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  background: transparent;
  transition: background .4s ease, backdrop-filter .4s ease, -webkit-backdrop-filter .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}

/* Container for the logo and navigation.  Constrains the header’s
   contents to the same width as the blocks grid and applies the
   horizontal padding. */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem 3rem 1.5rem;
}
header.scrolled {
  background: rgba(255,255,255,0.65);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(255,255,255,0.4);
}
@media (prefers-color-scheme: dark) {
  header.scrolled { background: rgba(25,15,10,0.35); border-bottom-color: rgba(255,255,255,0.08); }
}
header .logo {
  display: flex;
  align-items: center;
}
header .logo img {
  padding: 0 20px 0 0;
  height: 30px;
  width: auto;
}
header .top-nav {
  display: flex;
  gap: 0.5rem;
}
header .top-nav a {
  font-weight: var(--font-weight-bold);
  padding: 0.5rem 0.8rem;
  white-space: nowrap;
  font-size: clamp(0.7rem, 2.2vw, 0.95rem);
  border: 1px solid transparent;
}
header .top-nav #contact-btn {
  border: 1px solid #00cbb0;
  border-radius: 30px;
  transition: background .4s ease, color .4s ease, border-color .4s ease;
}
header .top-nav #contact-btn:hover,
header .top-nav #contact-btn:focus-visible {
  background: rgba(0,0,0,0.06);
}
@media (prefers-color-scheme: dark) {
  header .top-nav #contact-btn:hover,
  header .top-nav #contact-btn:focus-visible { background: rgba(255,255,255,0.08); }
}
/* Ensure other nav links never show hover border */
header .top-nav a:not(#contact-btn):hover { border-color: transparent; }
header .top-nav {
  align-items: center;
}
.nav-divider {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--nav-button-color);
  opacity: 0.4;
  margin: 0 0.25rem;
}

/* Mobile header tweaks: keep logo and buttons on one line without overlap */
@media (max-width: 560px) {
  .header-inner {
    padding: 2rem 2rem 2rem;
    gap: 0.5rem;
  }
  header .logo img {
    height: 24px;
    padding-right: 10px;
  }
  header .top-nav {
    gap: 0.35rem;
  }
  header .top-nav a {
    padding: 0.4rem 0.55rem;
    font-size: 0.68rem; /* force smaller so text + logo fit */
    line-height: 1.1;
  }
  .nav-divider { height: 16px; margin: 0 0.2rem; }
  /* If still too tight, allow slight font scaling below 360px */
  @media (max-width: 360px) {
    header .top-nav a { font-size: 0.62rem; padding: 0.35rem 0.5rem; }
    header .logo img { height: 22px; }
  }
}

/* Show appropriate logo for light/dark mode */
.dark-logo { display: none; }
.light-logo { display: block; }
@media (prefers-color-scheme: dark) {
  .dark-logo { display: block; }
  .light-logo { display: none; }
}

/* The header now spans the full viewport width while the .header-inner
   container constrains its content.  No additional desktop rule is
   required here. */

/* --- Hero & Slider --- */
.hero {
  position: relative;
  /* Allow content (model, intro, blocks) to expand naturally; enable page scroll */
  overflow: visible;
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  /* Lay out the intro and blocks vertically. */
  display: flex;
  flex-direction: column;
}

/* On wider screens, present the hero as a two‑column layout with the
   introductory text on the left and the 3D model on the right, with
   the blocks spanning the full width beneath.  The font size of the
   hero messages is reduced by roughly 30% on desktop for subtlety. */
@media (min-width: 900px) {
  /* On desktop, position the intro text to the left with a fixed margin
     that matches the header’s horizontal padding.  The width is
     constrained so that the text never overlaps the 3D viewer. */
  .hero {
    position: relative;
    display: block;
    max-width: 100%;
    margin: 0;
    padding: 0 0 2rem;
  }
  .hero .intro {
    position: absolute;
    top: 16%;
    left: 13%;
    width: min(50%, 560px);
    text-align: left;
    padding: 0;
    margin: 0 1.5rem;
    font-size: clamp(1.5rem,4.8vw,2.2rem);
    line-height: 1.1;
    z-index: 10;
    pointer-events: none; /* allow interactions with model beneath if needed */
  }
  /* Desktop-only enlargement of the rotating intro message.  Reduce the
     line-height slightly to keep multi-line slogans compact. */
  #intro-message {
    font-size: clamp(2.6rem, 8vw, 4.8rem);
    line-height: 1.1;
    -webkit-hyphens: auto;
    hyphens: auto;
    letter-spacing: -0.5px;
  }
  .hero .model-wrapper {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    height: 78vh;
  /* Shift viewer 20vw to the right so it intentionally overflows */
  transform: translateX(21vw);
  will-change: transform;
  overflow: visible;
  }
  .hero .model-wrapper model-viewer {
    height: 100%;
    width: 100%;
    max-width: 100%;
    transform: none; /* do not shift the model horizontally */
  }
  /* Constrain and centre the blocks grid on desktop.  Use the same
     horizontal padding as the header for consistent margins. */
  #blocks-grid {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 3rem;
    padding-right: 3rem;
    width: 100%;
  }
}

#slider-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slider {
  display: flex;
  width: 100%;
  height: 100%;
}
.slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  transition: opacity var(--transition-speed) ease-in-out;
}
.slider img.active {
  opacity: 1;
}

.slider-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--overlay);
}

/* --- Floating section buttons --- */
#floats {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  z-index: 5;
  pointer-events: none;
}

button.float {
  pointer-events: auto;
  margin: 0.5rem;
  padding: 0.75rem 1rem;
  width: calc(100% - 1rem);
  max-width: 260px;
  align-self: start;
  justify-self: start;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--card-bg);
  color: var(--text-color);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.25rem;
  font-weight: var(--font-weight-bold);
  animation: bob 5s ease-in-out infinite;
}
button.float:hover {
  transform: translateY(-6px);
}

/* Styling for title and description inside floats */
button.float strong {
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
}
button.float small {
  font-weight: var(--font-weight-regular);
  font-size: 0.7rem;
  color: var(--text-color);
  opacity: 0.85;
}
/* Position floats in corners via grid placement */
#floats button:nth-child(1) { grid-row: 1; grid-column: 1; }
#floats button:nth-child(2) { grid-row: 1; grid-column: 2; justify-self: end; }
#floats button:nth-child(3) { grid-row: 2; grid-column: 1; align-self: end; }
#floats button:nth-child(4) { grid-row: 2; grid-column: 2; align-self: end; justify-self: end; }
/* Bobbing animation for floating buttons */
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* At very small widths, stack floats vertically for readability */
@media (max-width: 480px) {
  #floats {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;
    height: 70%;
    top: 15%;
  }
  #floats button {
    width: calc(100% - 1.5rem);
    margin: 0.5rem auto;
  }
  #floats button:nth-child(n) {
    justify-self: center;
    align-self: center;
  }
}

/* --- Modals --- */
.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--overlay);
  backdrop-filter: blur(4px);
  z-index: 100;
}
.modal-wrapper.active {
  display: flex;
}
.modal {
  max-width: 600px;
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
}
.modal-wrapper.active .modal {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .modal { transform: none; }
}

.modal h2 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.8rem;
  line-height: 1.25;
  margin-bottom: 1rem;
}
.modal h3 {
  margin: 1rem 0 0.5rem;
  font-size: 1.4rem;
}
.modal-content p,
  .modal-content ol,
  .modal-content ul {
    margin-bottom: 1rem;
  }
  .modal-content > * {
    margin-bottom: 1rem;
  }
  .modal-content ol li,
  .modal-content ul li {
    margin-left: 1.25rem;
    margin-bottom: 0.5rem;
  }

.close-btn {
  position: absolute;
  right: 1rem;
  top: 1rem;
  background: transparent;
  border: none;
  /* Increase the close button size for easier tapping on mobile */
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--highlight);
  cursor: pointer;
  line-height: 1;
}
.close-btn:hover {
  transform: scale(1.1);
}

/* --- Blocks grid layout --- */
/*
  The home page now uses a mosaic of four large blocks instead of small
  floating buttons.  Each block fills an equal portion of the hero area and
  contains a blurred photograph beneath a text overlay.  The grid stacks
  vertically on smaller screens and becomes a 2×2 mosaic on tablets and
  desktops.
*/
#blocks-grid {
  /* Grid lives in normal flow and can grow taller than viewport; rows size to content. */
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
  padding: 0 1rem 1.7rem;
}

@media (min-width: 600px) {
  #blocks-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

button.block {
  position: relative;
  overflow: hidden;
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  /* Intrinsic height so text isn't squashed; scales with viewport */
  min-height: 240px;
  text-align: left;
  cursor: pointer;
  color: var(--text-color);
  background: var(--card-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

@media (min-width: 600px) {
  button.block { min-height: 320px; }
}
@media (min-width: 900px) {
  button.block { min-height: 380px; }
}

button.block:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

button.block .blur-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(8px);
  transform: scale(1.1);
  z-index: 0;
  opacity: 0.8;
}

/* On hover, reveal the underlying photo by removing the blur and zoom. */
button.block:hover .blur-img {
  filter: blur(0);
  transform: scale(1);
}

button.block .block-content {
  /* Position the text overlay at the bottom-left of the block.  The small
     margins ensure the text hugs the edges, and the height is set to
     occupy at least 40% of the block’s height. */
  position: absolute;
  bottom: 15%;
  left: 15%;
  right: auto;
  height: auto;
  max-width: 70%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  z-index: 1;
  font-family: var(--font-base);
  /* Adding a subtle text shadow improves readability over varied
     photographs. */
  /* Removed backdrop blur for sharper text as requested */
  backdrop-filter: none;
}

button.block .block-title {
  display: block;
  font-size: clamp(1.8rem, 5.5vw, 3rem); /* responsive sizing to keep long words inside 15% margins */
  line-height: 0.95;
  font-weight: var(--font-weight-bold);
  margin-bottom: 0.25rem;
  font-family: var(--font-base);
  color: #ffffff;
  word-break: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

button.block .block-desc {
  display: block;
  font-size: 1.5rem;
  font-weight: var(--font-weight-regular);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
  font-family: var(--font-base);
  color: #ffffff;
}

button.block:hover .block-desc,
button.block:focus .block-desc,
button.block:focus-visible .block-desc,
button.block:focus-within .block-desc {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 480px) {
  button.block .block-title {
  font-size: clamp(1.4rem, 8vw, 2rem);
  }
  button.block .block-desc {
    font-size: 0.9rem;
  }
}

/* Modal imagery and typographic scaling */
.modal-content img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 1rem;
}

/* --- Slide gallery styles for testimonies --- */
/* The slide gallery displays one image at a time with arrows to navigate
   between before and after photos.  It centres itself and adapts to
   varying screen sizes. */
.slide-gallery {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 1.25rem auto 1.5rem;
}
.slide-gallery .slide {
  display: none;
  width: 100%;
}
.slide-gallery .slide.active {
  display: block;
}
.slide-gallery .slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 14px;
}
.slide-gallery .arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: #ffffff;
  padding: 0.45rem 0.6rem;
  font-size: 1.25rem;
  cursor: pointer;
  border-radius: 50%;
  line-height: 1;
  z-index: 2;
}
.slide-gallery .arrow.left { left: 0.5rem; }
.slide-gallery .arrow.right { right: 0.5rem; }
.slide-gallery .arrow:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 2px;
}

/* Scale modal heading and body text based on a custom variable.  The
   --modal-heading-size is defined in :root; body copy inherits a size
   that is roughly 30% of the heading for clear hierarchy. */
.modal h2 {
  font-size: var(--modal-heading-size);
  line-height: 1.2;
  margin-bottom: 1rem;
}
.modal h3 {
  font-size: calc(var(--modal-heading-size) * 0.55);
  margin: 1rem 0 0.5rem;
}
.modal-content p,
.modal-content li {
  font-size: calc(var(--modal-heading-size) * 0.4);
  line-height: 1.6;
}
.modal-content small {
  font-size: calc(var(--modal-heading-size) * 0.25);
}

/* Animated gradient background.  The colours defined by --bg1 and --bg2
   transition across the viewport, creating a subtle shimmering effect.
   Adjust the animation duration to make the motion faster or slower. */
@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Footer --- */
footer {
  height: var(--footer-height);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  padding: 1 1rem;
  opacity: 0.8;
}
footer .footer-inner { width:100%; display:flex; flex-direction:column; gap:0.4rem; align-items:center; }
.social-links { display:flex; gap:0.75rem; font-size: 0.7rem; }
.social-links a.social {
  font-weight: var(--font-weight-regular);
  color: var(--nav-button-color);
  padding: 0.1rem 0.2rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: font-weight .25s ease;
}
.social-links a.social:hover,
.social-links a.social:focus-visible {
  font-weight: var(--font-weight-bold);
}
.social-links a.social svg { width: 16px; height: 16px; fill: currentColor; display:block; }
footer .footer-inner { padding: 0 1.25rem; }
@media (min-width:600px){
  footer { height: auto; padding: 1.2rem 1rem 1.6rem; }
  /* Align footer content with the same width as the blocks grid on desktop */
  footer .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    /* Align the footer with the wider blocks area on desktop */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Highlight text inside modals */
.highlight {
  color: var(--highlight);
  font-weight: var(--font-weight-bold);
}

/* --- Introductory hero message --- */
.intro {
  padding: 1.2rem 1.5rem 2rem;
  text-align: center;
  color: var(--text-color);
  font-family: var(--font-base);
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.5rem,4.8vw,2.2rem);
  line-height: 1.15;
  flex: 0 0 auto;
  z-index: 6;
}
/* 15% smaller hero text on narrow mobile screens */
@media (max-width: 640px) {
  .intro { font-size: clamp(1.275rem,4.08vw,1.87rem); }
  /* Adjust rotating message enlargement proportionally */
  #intro-message { font-size: clamp(2.21rem, 6.8vw, 4.08rem); }
}

/* Fade cycle for intro rotating messages */
#intro-message {
  opacity: 0;
  transition: opacity 1s ease;
  will-change: opacity;
  /* Ensure long words break/hyphenate on very narrow screens */
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
}
#intro-message.visible { opacity: 1; }

/* --- 3D Model Viewer wrapper --- */
.model-wrapper {
  width: 100%;
  max-width: 840px;
  margin: 0 auto 0.5rem;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  position: relative;
  z-index: 5; /* below intro text but above background */
}

model-viewer {
  width: 100%;
  height: 420px;
  --poster-color: transparent;
  background: transparent;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

@media (min-width: 600px) {
  model-viewer { height: 520px; }
}
@media (min-width: 900px) {
  model-viewer { height: 620px; }
}

/* reduce height on very small screens */
@media (max-width: 420px) {
  model-viewer { height: 300px; }
}

@media (max-width: 480px) {
  model-viewer { height: 300px; }
}

/* Using built-in auto-rotate; removed custom spin */

/* --- Before/After comparison slider --- */
.compare {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 1.25rem auto 1.5rem;
  aspect-ratio: 4/3;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  font-size: 0; /* remove gaps */
}
.compare-inner { position: relative; width: 100%; height: 100%; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare-before { z-index: 1; }
.compare-after { z-index: 2; clip-path: inset(0 0 0 50%); }
.compare input[type=range] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
  z-index: 5;
  touch-action: none; /* prevent scroll during drag */
}
.compare input[type=range]:focus { outline: none; }
/* square thumb */
.compare input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px;
  background: #ffffff;
  border-radius: 6px;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}
.compare input[type=range]::-moz-range-thumb {
  width: 28px; height: 28px;
  background: #ffffff;
  border-radius: 6px;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}
.compare-handle {
  position: absolute;
  top: 0; bottom: 0;
  width: 3px;
  background: #ffffff;
  left: 50%;
  z-index: 4;
  pointer-events: none;
}
.compare-labels { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: .4rem .6rem; font-size: .65rem; z-index:6; }
.compare-labels .lbl { background: rgba(0,0,0,.45); color:#fff; padding:.25rem .5rem; border-radius: 20px; font-weight: var(--font-weight-bold); letter-spacing:.5px; }
@media (max-width:480px){ .compare { max-width:100%; aspect-ratio: 3/4; } }
/* Hide horizontal scrollbar created by right-shifted model on desktop */
@media (min-width: 900px) {
  body { overflow-x: hidden; }
}