/* Mahdis Dentistry — precision editorial layer
 * This file extends the existing v3 skin. It does not replace the site shell or app logic.
 */
:root {
  --m4-ink: #102235;
  --m4-deep: #071e2b;
  --m4-teal: #087f73;
  --m4-mint: #f3fcfa;
  --m4-aqua: #ddf7f3;
  --m4-slate: #667784;
  --m4-white: #fcfdfd;
  --m4-line: rgba(8, 127, 115, 0.16);
  --m4-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

::selection { background: rgba(8, 127, 115, 0.18); color: var(--m4-ink); }

:focus-visible { outline: 3px solid rgba(8, 127, 115, 0.36); outline-offset: 3px; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #eef9f7; }
::-webkit-scrollbar-thumb { background: rgba(8, 127, 115, 0.34); border: 3px solid #eef9f7; border-radius: 999px; }

/* Calm page-wide light system. */
body {
  background:
    radial-gradient(circle at 82% 5%, rgba(102, 226, 207, 0.14), transparent 25rem),
    linear-gradient(180deg, #f3fcfa 0%, #fcfdfd 32%, #f7fcfb 68%, #eefaf8 100%) !important;
}

.app-wrapper { overflow: visible !important; }
.page-view { overflow: visible; }

/* Header changes from transparent glass to a quiet floating instrument on scroll. */
.main-header {
  transition: background 260ms ease, box-shadow 260ms ease, border-color 260ms ease, transform 260ms ease !important;
}

.main-header.is-scrolled {
  background: rgba(252, 253, 253, 0.94) !important;
  border-color: rgba(8, 127, 115, 0.2) !important;
  box-shadow: 0 18px 42px rgba(16, 34, 53, 0.13) !important;
}

/* Hero: product first, with a brighter laboratory half and a darker editorial copy rail. */
.hero-editorial-grid {
  isolation: isolate;
  perspective: 1000px;
  grid-template-columns: minmax(280px, 0.74fr) minmax(0, 1.26fr) !important;
  min-height: clamp(590px, 62vw, 720px) !important;
  background:
    radial-gradient(circle at 66% 48%, rgba(255, 255, 255, 0.86), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(77, 216, 194, 0.25), transparent 30%),
    linear-gradient(110deg, #0b2634 0%, #102f3d 34%, #d9f4f0 70%, #fcfdfd 100%) !important;
  box-shadow: 0 34px 90px rgba(16, 34, 53, 0.16) !important;
}

.hero-editorial-grid::before {
  width: 76% !important;
  opacity: 0.62 !important;
  background:
    linear-gradient(rgba(150, 241, 226, 0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 241, 226, 0.065) 1px, transparent 1px),
    radial-gradient(circle at 62% 42%, rgba(72, 218, 199, 0.25), transparent 34%) !important;
  background-size: 54px 54px, 54px 54px, auto !important;
  mask-image: linear-gradient(90deg, black 0%, rgba(0, 0, 0, 0.86) 68%, transparent 100%);
}

.hero-editorial-grid::after {
  height: 27% !important;
  background: linear-gradient(180deg, transparent, rgba(252, 253, 253, 0.44)) !important;
}

.hero-lead-col,
.hero-visual-col,
.hero-annotation-layer,
.hero-annotation {
  transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0);
  transition: transform 420ms var(--m4-ease);
}

.hero-lead-col { position: relative; z-index: 4; }
.hero-visual-col { position: relative; z-index: 3; }

.hero-kicker-badge {
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.hero-main-title {
  max-width: 590px !important;
  font-size: clamp(2.35rem, 4.4vw, 4.55rem) !important;
  letter-spacing: -0.055em;
}

.hero-main-title br + .hero-highlight-teal { display: inline-block; margin-top: 0.12em; }
.hero-highlight-teal { text-shadow: 0 0 28px rgba(100, 236, 217, 0.12); }
.hero-lead-text { max-width: 560px !important; line-height: 2 !important; }

.hero-showcase-container {
  position: relative;
  overflow: visible !important;
  transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0);
  transition: transform 520ms var(--m4-ease), box-shadow 360ms ease !important;
  background: rgba(252, 253, 253, 0.18) !important;
  box-shadow: 0 30px 90px rgba(4, 27, 39, 0.26) !important;
}

.hero-showcase-container::before {
  content: "";
  position: absolute;
  inset: -2.5rem -2rem auto auto;
  width: 10rem;
  height: 10rem;
  border: 1px solid rgba(221, 247, 243, 0.5);
  border-radius: 50%;
  opacity: 0.38;
  pointer-events: none;
}

.hero-showcase-container::after {
  content: "";
  position: absolute;
  inset: auto -2.2rem -1.5rem auto;
  width: 12rem;
  height: 4rem;
  border-radius: 50%;
  background: rgba(104, 237, 216, 0.24);
  filter: blur(26px);
  pointer-events: none;
}

.showcase-image-frame { position: relative; overflow: hidden; }
.showcase-image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.2) 49%, transparent 57%);
  transform: translateX(120%);
  transition: transform 1.4s var(--m4-ease);
  pointer-events: none;
}

.hero-showcase-container:hover .showcase-image-frame::after { transform: translateX(-120%); }

.hero-annotation-layer {
  position: absolute;
  inset: -1rem -1.8rem -1.5rem;
  z-index: 5;
  pointer-events: none;
}

.hero-measurement-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0.65;
}

.hero-measurement-lines path {
  stroke: rgba(221, 247, 243, 0.72);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.hero-measurement-lines circle { fill: #8ce9dc; }

.hero-annotation {
  position: absolute;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.42rem;
  align-items: center;
  min-width: 9.5rem;
  padding: 0.52rem 0.62rem;
  border: 1px solid rgba(221, 247, 243, 0.34);
  border-radius: 10px;
  background: rgba(7, 30, 43, 0.64);
  color: #fff;
  box-shadow: 0 12px 30px rgba(2, 22, 31, 0.18);
  backdrop-filter: blur(12px);
  animation: annotationDrift 7s ease-in-out infinite alternate;
}

.hero-annotation span:not(.annotation-dot) { font-size: 0.72rem; font-weight: 900; letter-spacing: 0.02em; }
.hero-annotation small { grid-column: 2; color: rgba(221, 247, 243, 0.7); font-size: 0.59rem; }
.annotation-dot { width: 6px; height: 6px; border-radius: 50%; background: #8ce9dc; box-shadow: 0 0 0 4px rgba(140, 233, 220, 0.1); }
.hero-annotation-a { top: 15%; right: -0.8rem; }
.hero-annotation-b { top: 47%; left: -1.1rem; animation-delay: -2.5s; }
.hero-annotation-c { bottom: 5%; right: 15%; animation-delay: -4s; }

@keyframes annotationDrift { to { transform: translateY(-4px); } }

.hero-bottom-ribbon {
  box-shadow: 0 20px 55px rgba(16, 34, 53, 0.12) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
}

.stat-value-num { font-size: clamp(0.88rem, 1.4vw, 1.16rem) !important; }

/* Story-led featured service instead of an uninterrupted card wall. */
.section-services-block {
  background:
    radial-gradient(circle at 80% 14%, rgba(142, 235, 221, 0.22), transparent 25rem),
    linear-gradient(135deg, #f3fcfa 0%, #fcfdfd 58%, #f8fcfb 100%) !important;
  box-shadow: none !important;
  border-color: rgba(8, 127, 115, 0.08) !important;
}

.featured-service-story {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
  align-items: stretch;
  gap: clamp(1.4rem, 4vw, 3.5rem);
  min-height: 380px;
  margin-bottom: 1.25rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid rgba(8, 127, 115, 0.14);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(235, 250, 247, 0.84));
  box-shadow: 0 18px 48px rgba(16, 34, 53, 0.08);
  overflow: hidden;
}

.featured-service-story::before {
  content: "01";
  position: absolute;
  top: -1.4rem;
  left: 1rem;
  color: rgba(8, 127, 115, 0.08);
  font-size: 9rem;
  font-weight: 900;
  line-height: 1;
}

.featured-service-media { position: relative; min-height: 340px; overflow: hidden; border-radius: 20px; background: #102235; }
.featured-service-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(5, 31, 43, 0.05), rgba(8, 127, 115, 0.2)); pointer-events: none; }
.featured-service-media img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; filter: saturate(0.92) contrast(1.04); transition: transform 800ms var(--m4-ease); }
.featured-service-story:hover .featured-service-media img { transform: scale(1.035); }
.featured-service-media-label { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: 0 0.45rem; padding: 0.55rem 0.7rem; border: 1px solid rgba(221, 247, 243, 0.26); border-radius: 10px; background: rgba(7, 30, 43, 0.66); color: #fff; backdrop-filter: blur(12px); }
.featured-service-media-label span:not(.annotation-dot) { font-size: 0.68rem; font-weight: 900; }
.featured-service-media-label small { grid-column: 2; color: rgba(221, 247, 243, 0.72); font-size: 0.58rem; }
.featured-service-copy { position: relative; z-index: 1; align-self: center; padding: 1.25rem clamp(0.35rem, 2vw, 1.4rem); }
.story-index { display: inline-block; margin-bottom: 0.8rem; color: var(--m4-teal); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.1em; }
.featured-service-copy h3 { max-width: 420px; margin: 0; color: var(--m4-ink); font-size: clamp(1.6rem, 3vw, 2.7rem); line-height: 1.25; letter-spacing: -0.04em; }
.featured-service-copy p { max-width: 450px; margin: 0.9rem 0 1.1rem; color: var(--m4-slate); font-size: 0.92rem; line-height: 2; }
.featured-spec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; max-width: 510px; }
.featured-spec-grid div { padding: 0.65rem 0.7rem; border-top: 2px solid rgba(8, 127, 115, 0.25); }
.featured-spec-grid strong { display: block; color: var(--m4-ink); font-size: 0.73rem; }
.featured-spec-grid span { display: block; margin-top: 0.12rem; color: var(--m4-slate); font-size: 0.64rem; line-height: 1.55; }
.story-link { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.25rem; color: var(--m4-teal) !important; font-size: 0.8rem; font-weight: 900; }
.story-link svg { width: 16px; height: 16px; transition: transform 180ms ease; }
.story-link:hover svg { transform: translateX(-4px); }

/* Cards gain hierarchy, internal light, and a pointer-following spotlight. */
.premium-service-card,
.service-card-lux,
.brand-showcase-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.premium-service-card::before,
.service-card-lux::before,
.brand-showcase-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(180px circle at var(--spot-x, 50%) var(--spot-y, 0%), rgba(83, 218, 198, 0.18), transparent 70%);
  transition: opacity 280ms ease;
  pointer-events: none;
}

.premium-service-card:hover::before,
.service-card-lux:hover::before,
.brand-showcase-card:hover::before { opacity: 1; }
.premium-service-card::after { content: "0" counter(service-card); counter-increment: service-card; position: absolute; top: 0.8rem; left: 1rem; color: rgba(8, 127, 115, 0.2); font-family: ui-monospace, monospace; font-size: 0.68rem; font-weight: 900; }
.premium-services-grid { counter-reset: service-card; }

.premium-service-card:hover,
.service-card-lux:hover,
.brand-showcase-card:hover { border-color: rgba(8, 127, 115, 0.32) !important; }

/* Materials story: an open editorial section with one dominant object. */
.materials-story-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 5.5rem);
  margin: 5rem -0.5rem 0;
  padding: clamp(2.1rem, 5vw, 4.5rem) clamp(1rem, 4vw, 3rem);
  border-radius: 30px;
  background: linear-gradient(115deg, #eefaf8 0%, #fcfdfd 62%, #f3fcfa 100%);
  overflow: hidden;
}

.materials-story-section::before { content: "MATERIAL / SERIES"; position: absolute; top: 1.2rem; left: 2rem; color: rgba(8, 127, 115, 0.15); font-family: ui-monospace, monospace; font-size: 0.65rem; letter-spacing: 0.12em; }
.materials-story-intro { position: relative; z-index: 1; }
.materials-story-intro h2 { max-width: 420px; margin: 0; color: var(--m4-ink); font-size: clamp(1.75rem, 3.3vw, 3rem); line-height: 1.25; letter-spacing: -0.045em; }
.materials-story-intro > p { max-width: 410px; margin: 0.85rem 0 1.2rem; color: var(--m4-slate); font-size: 0.9rem; line-height: 2; }
.materials-story-list { display: grid; gap: 0.35rem; max-width: 360px; }
.material-story-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.75rem; border-right: 2px solid transparent; color: var(--m4-slate); transition: background 200ms ease, border-color 200ms ease, transform 200ms ease; }
.material-story-item > span { color: rgba(8, 127, 115, 0.5); font-family: ui-monospace, monospace; font-size: 0.68rem; }
.material-story-item strong { display: block; color: var(--m4-ink); font-size: 0.8rem; }
.material-story-item small { display: block; color: var(--m4-slate); font-size: 0.68rem; }
.material-story-item.is-active, .material-story-item:hover { border-color: var(--m4-teal); background: rgba(221, 247, 243, 0.6); transform: translateX(-4px); }
.materials-story-visual { position: relative; min-height: 440px; overflow: hidden; border-radius: 26px; background: #102235; box-shadow: 0 26px 65px rgba(16, 34, 53, 0.13); transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0); transition: transform 520ms var(--m4-ease); }
.materials-story-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(8, 127, 115, 0.08), rgba(7, 30, 43, 0.1)); pointer-events: none; }
.materials-story-visual img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; display: block; transition: transform 900ms var(--m4-ease); }
.materials-story-visual:hover img { transform: scale(1.035); }
.material-float-label { position: absolute; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: 0 0.45rem; min-width: 12rem; padding: 0.62rem 0.7rem; border: 1px solid rgba(221, 247, 243, 0.28); border-radius: 11px; background: rgba(7, 30, 43, 0.7); color: #fff; backdrop-filter: blur(12px); }
.material-float-label strong { font-size: 0.72rem; }
.material-float-label small { grid-column: 2; color: rgba(221, 247, 243, 0.72); font-size: 0.58rem; }
.material-float-top { top: 1.15rem; right: 1.15rem; }
.material-float-bottom { bottom: 1.15rem; left: 1.15rem; }
.material-measurement { position: absolute; top: 50%; left: 1.1rem; z-index: 2; color: rgba(221, 247, 243, 0.68); font-family: ui-monospace, monospace; font-size: 0.65rem; line-height: 1.8; }
.material-measurement span { color: #8ce9dc; }

/* The full-width cinematic lab moment. */
.cinematic-lab-section { position: relative; min-height: min(78vh, 720px); margin: 5rem -1.35rem 0; overflow: hidden; background: #071e2b; }
.cinematic-lab-section > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(0.92) contrast(1.04); transform: scale(1.02); transition: transform 1.2s var(--m4-ease); }
.cinematic-lab-section:hover > img { transform: scale(1.045); }
.cinematic-lab-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 30, 43, 0.9) 0%, rgba(7, 30, 43, 0.62) 34%, rgba(7, 30, 43, 0.12) 74%), linear-gradient(0deg, rgba(7, 30, 43, 0.48), transparent 48%); }
.cinematic-lab-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; min-height: min(78vh, 720px); max-width: 530px; margin-right: auto; margin-left: clamp(1rem, 8vw, 8rem); padding: 3rem 1rem; color: #fff; }
.cinematic-lab-content .story-index { color: #8ce9dc; }
.cinematic-lab-content h2 { margin: 0; color: #fff; font-size: clamp(2rem, 5vw, 4.5rem); line-height: 1.14; letter-spacing: -0.06em; }
.cinematic-lab-content p { max-width: 420px; margin: 1rem 0 1.45rem; color: rgba(242, 253, 251, 0.78); font-size: 0.95rem; line-height: 2; }
.cinematic-lab-content .btn-hero-cta { align-self: flex-start; }
.cinematic-coordinate { position: absolute; right: 2rem; bottom: 1.8rem; z-index: 2; color: rgba(221, 247, 243, 0.66); font-family: ui-monospace, monospace; font-size: 0.64rem; letter-spacing: 0.08em; line-height: 1.8; }
.cinematic-coordinate span { color: #8ce9dc; }

/* FAQ is intentionally quiet: one editorial column, no card wall. */
.home-faq-section {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(1.5rem, 6vw, 6rem);
  align-items: start;
  margin: 4.5rem 0 0;
  padding: clamp(2rem, 4vw, 3.2rem) 0;
}

.faq-heading h2 { margin: 0; color: var(--m4-ink); font-size: clamp(1.65rem, 3vw, 2.45rem); line-height: 1.3; letter-spacing: -0.04em; }
.faq-heading p { max-width: 300px; margin: 0.7rem 0 0; color: var(--m4-slate); font-size: 0.85rem; line-height: 2; }
.faq-list { border-top: 1px solid rgba(8, 127, 115, 0.18); }
.faq-list details { border-bottom: 1px solid rgba(8, 127, 115, 0.14); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0.2rem; color: var(--m4-ink); cursor: pointer; font-size: 0.9rem; font-weight: 900; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { width: 17px; height: 17px; color: var(--m4-teal); transition: transform 200ms ease; }
.faq-list details[open] summary svg { transform: rotate(45deg); }
.faq-list details p { max-width: 620px; margin: -0.35rem 0 1.15rem; color: var(--m4-slate); font-size: 0.83rem; line-height: 1.95; }

/* Dark expertise section gets a technical surface rather than black cards. */
.section-technician-standards { background: radial-gradient(circle at 72% 20%, rgba(72, 218, 199, 0.16), transparent 26rem), linear-gradient(120deg, #071e2b, #0b414a) !important; }
.standard-feature-box { position: relative; overflow: hidden; }
.standard-feature-box::after { content: "+"; position: absolute; right: 1rem; bottom: -0.4rem; color: rgba(140, 233, 220, 0.1); font-family: ui-monospace, monospace; font-size: 3rem; }

/* Process progress and section transitions. */
.section-process-steps { border: 0 !important; background: linear-gradient(180deg, rgba(243, 252, 250, 0.5), #f3fcfa 75%) !important; }
.process-steps-row::after { content: ""; position: absolute; top: 2.35rem; right: 10%; width: 0; height: 2px; background: var(--m4-teal); transition: width 1.2s var(--m4-ease); }
.process-steps-row.progress-active::after { width: 80%; }

/* Materials view also receives a large editorial background. */
.materials-hero-banner { overflow: hidden; background-image: linear-gradient(100deg, rgba(7, 30, 43, 0.92), rgba(7, 30, 43, 0.52)), url("../assets/images/digital_3d_print.jpg") !important; background-size: cover !important; background-position: center !important; }
.brand-showcase-card:nth-child(2n) { background: linear-gradient(145deg, #f9fffe, #edf9f7) !important; }
.brand-showcase-card:nth-child(3n) { background: linear-gradient(145deg, #fff, #f7f8ff) !important; }

/* Existing reveal engine plus new scenes. Keep content visible if JS is unavailable. */
body.motion-ready .reveal-on-scroll,
body.motion-ready .materials-story-section,
body.motion-ready .cinematic-lab-section { opacity: 0; transform: translateY(18px); }
body.motion-ready .reveal-on-scroll.is-visible,
body.motion-ready .materials-story-section.is-visible,
body.motion-ready .cinematic-lab-section.is-visible { opacity: 1; transform: translateY(0); transition: opacity 720ms var(--m4-ease), transform 720ms var(--m4-ease); }

@media (max-width: 960px) {
  .hero-editorial-grid { grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr) !important; gap: 1.2rem !important; }
  .hero-annotation { transform: scale(0.9) translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0); transform-origin: center; }
  .featured-service-story { grid-template-columns: 1fr 0.9fr; }
  .featured-spec-grid { grid-template-columns: 1fr; max-width: 220px; }
  .materials-story-section { gap: 2rem; }
}

@media (max-width: 820px) {
  .hero-editorial-grid { grid-template-columns: 1fr !important; min-height: auto !important; background: linear-gradient(155deg, #0b2634 0%, #0f4e56 54%, #eefaf8 100%) !important; }
  .hero-lead-col { order: 1 !important; }
  .hero-visual-col { order: 2 !important; }
  .hero-annotation-layer { inset: -0.5rem -0.2rem -1rem; }
  .hero-annotation-a { right: 0; }
  .hero-annotation-b { left: 0; }
  .featured-service-story, .materials-story-section { grid-template-columns: 1fr; }
  .featured-service-media, .featured-service-media img { min-height: 280px; }
  .materials-story-visual, .materials-story-visual img { min-height: 360px; }
  .cinematic-lab-section, .cinematic-lab-content { min-height: 620px; }
  .cinematic-lab-content { margin: 0; padding: 2rem 1.4rem; justify-content: flex-end; background: linear-gradient(0deg, rgba(7, 30, 43, 0.82), transparent 62%); }
  .cinematic-lab-overlay { background: linear-gradient(0deg, rgba(7, 30, 43, 0.88), rgba(7, 30, 43, 0.12) 70%); }
  .home-faq-section { grid-template-columns: 1fr; gap: 1.25rem; }
  .faq-heading p { max-width: 480px; }
}

@media (max-width: 560px) {
  .hero-main-title { font-size: clamp(2.1rem, 11vw, 3.25rem) !important; }
  .hero-annotation-layer { inset: 0; }
  .hero-annotation { min-width: 8.4rem; padding: 0.42rem 0.5rem; }
  .hero-annotation-b { top: 43%; }
  .hero-annotation-c { right: 4%; bottom: 3%; }
  .hero-measurement-lines { opacity: 0.38; }
  .featured-service-story, .materials-story-section { margin-inline: 0; border-radius: 22px; }
  .featured-service-copy { padding: 1rem 0.45rem 0.4rem; }
  .featured-service-copy h3 { font-size: 1.75rem; }
  .featured-spec-grid { max-width: none; }
  .materials-story-visual { min-height: 300px; }
  .materials-story-visual img { min-height: 300px; }
  .material-float-label { min-width: 9.8rem; }
  .material-float-bottom { left: 0.7rem; bottom: 0.7rem; }
  .material-float-top { right: 0.7rem; top: 0.7rem; }
  .cinematic-lab-section { margin-inline: -0.58rem; min-height: 540px; }
  .cinematic-lab-content { min-height: 540px; padding: 1.4rem 1rem; }
  .cinematic-lab-content h2 { font-size: 2.35rem; }
  .cinematic-coordinate { right: 1rem; bottom: 0.9rem; }
  .site-footer { border-radius: 22px !important; }
  .home-faq-section { margin-top: 2.5rem; padding-inline: 0.1rem; }
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .hero-lead-col, .hero-visual-col, .hero-showcase-container, .hero-annotation, .materials-story-visual { transform: none !important; }
  .hero-annotation { animation: none; }
  .showcase-image-frame::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.motion-ready .reveal-on-scroll,
  body.motion-ready .materials-story-section,
  body.motion-ready .cinematic-lab-section { opacity: 1; transform: none; transition: none; }
  .premium-service-card, .service-card-lux, .brand-showcase-card, .materials-story-visual img { transition: none !important; }
}

/* ==========================================================================\n+   Interactive product hotspots + route-specific editorial system\n+   ========================================================================== */
.hero-hotspot-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.hero-hotspot {
  position: absolute;
  left: var(--hotspot-x);
  top: var(--hotspot-y);
  width: 30px;
  height: 30px;
  padding: 0;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;
}

.hotspot-core {
  width: 10px;
  height: 10px;
  display: block;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #69e2d0;
  box-shadow: 0 0 0 5px rgba(105, 226, 208, 0.26), 0 0 20px rgba(105, 226, 208, 0.9);
  transition: transform 220ms var(--m4-ease), background 220ms ease, box-shadow 220ms ease;
}

.hero-hotspot::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  opacity: 0.8;
  animation: hotspotPulse 2.6s ease-out infinite;
}

.hero-hotspot:hover .hotspot-core,
.hero-hotspot:focus-visible .hotspot-core,
.hero-hotspot.is-open .hotspot-core {
  transform: scale(1.35);
  background: #fff;
  box-shadow: 0 0 0 6px rgba(105, 226, 208, 0.36), 0 0 26px rgba(105, 226, 208, 1);
}

.hero-hotspot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 5px;
}

@keyframes hotspotPulse {
  0% { transform: scale(0.5); opacity: 0.75; }
  70%, 100% { transform: scale(1.65); opacity: 0; }
}

.hotspot-tooltip {
  position: absolute;
  left: calc(var(--hotspot-x) - 3%);
  top: calc(var(--hotspot-y) - 1.2rem);
  width: min(210px, 42vw);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 13px;
  color: #f7fffe;
  background: rgba(7, 30, 43, 0.88);
  box-shadow: 0 14px 30px rgba(7, 30, 43, 0.25);
  backdrop-filter: blur(14px);
  transform: translate(-92%, -100%);
  pointer-events: none;
  z-index: 3;
  animation: hotspotIn 180ms var(--m4-ease) both;
}

.hotspot-tooltip[hidden] { display: none !important; }
.hotspot-tooltip strong { font-size: 0.92rem; letter-spacing: -0.01em; }
.hotspot-tooltip small { color: rgba(242, 255, 253, 0.72); font-size: 0.72rem; line-height: 1.55; }
.hotspot-eyebrow { color: #6fe2d3; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.11em; direction: ltr; }
.hotspot-tooltip-bottom { transform: translate(-86%, 1rem); }
.hotspot-tooltip-left { transform: translate(-102%, 0); }

@keyframes hotspotIn {
  from { opacity: 0; transform: translate(-92%, -92%) scale(0.96); }
  to { opacity: 1; transform: translate(-92%, -100%) scale(1); }
}

/* Progress rail and scroll-to-top control. */
.site-progress-rail {
  position: fixed;
  inset: 42% 0.9rem auto auto;
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  direction: ltr;
}
.progress-track { position: absolute; top: 0.55rem; bottom: 0.55rem; width: 2px; background: rgba(8, 127, 115, 0.14); border-radius: 999px; }
.progress-track span { position: absolute; inset: 0 0 auto; height: var(--scroll-progress, 0%); background: var(--rd-teal); border-radius: inherit; transition: height 180ms ease; }
.progress-node { position: relative; width: 13px; height: 13px; padding: 0; border: 2px solid var(--rd-teal); border-radius: 50%; background: var(--rd-mint); cursor: pointer; transition: transform 180ms ease, background 180ms ease; }
.progress-node:hover, .progress-node:focus-visible, .progress-node.is-active { transform: scale(1.45); background: var(--rd-teal); outline: none; }
.progress-node:focus-visible { box-shadow: 0 0 0 4px rgba(8, 127, 115, 0.18); }
.scroll-top-control { position: fixed; right: 0.62rem; bottom: 1.05rem; z-index: 36; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(8, 127, 115, 0.22); border-radius: 50%; color: var(--rd-teal-dark); background: rgba(252, 253, 253, 0.88); box-shadow: var(--rd-shadow-soft); backdrop-filter: blur(12px); cursor: pointer; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 200ms ease, transform 200ms var(--rd-ease); }
.scroll-top-control.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.scroll-top-control svg { width: 17px; height: 17px; }
.scroll-top-ring { position: absolute; inset: -3px; border: 2px solid transparent; border-top-color: var(--rd-teal); border-right-color: rgba(8, 127, 115, 0.2); border-radius: inherit; transform: rotate(-28deg); }

/* Shared internal view frame. */
.page-view:not(#view-home) { position: relative; overflow: clip; padding: clamp(1.2rem, 3vw, 3.3rem) clamp(0.75rem, 2vw, 2.25rem) 3.5rem; border: 1px solid rgba(8, 127, 115, 0.1); border-radius: 30px; background: linear-gradient(180deg, rgba(252, 253, 253, 0.92), rgba(243, 252, 250, 0.78)); box-shadow: var(--rd-shadow-soft); }
.page-view:not(#view-home)::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: linear-gradient(90deg, transparent, rgba(8, 127, 115, 0.23), transparent); pointer-events: none; }
.page-view:not(#view-home) > :first-child { position: relative; z-index: 1; }
.page-view h2 { letter-spacing: -0.045em; }
.page-view > div[style*="text-align:center"] { padding-top: 0.5rem; }
.page-view > div[style*="text-align:center"] p { max-width: 720px; margin-inline: auto; }

/* Types: catalog hierarchy and comparison table. */
#view-types { background: radial-gradient(circle at 90% 3%, rgba(105, 226, 208, 0.18), transparent 22rem), linear-gradient(180deg, #f7fffd, #edf9f7); }
#view-types .services-catalog-grid { align-items: stretch; }
#view-types .service-card-lux { min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; }
#view-types .service-card-lux:first-child { grid-column: span 2; background: linear-gradient(135deg, #e8fbf7, #fff); border-color: rgba(8, 127, 115, 0.24); }
#view-types .glass-panel:has(.denture-comparison-table) { border: 1px solid rgba(8, 127, 115, 0.13); background: rgba(255,255,255,0.8); box-shadow: var(--rd-shadow-soft); }
.denture-comparison-table { min-width: 720px; border-collapse: separate; border-spacing: 0 0.45rem; }
.denture-comparison-table tr { background: rgba(243, 252, 250, 0.7); }
.denture-comparison-table td, .denture-comparison-table th { border: 0 !important; }
.denture-comparison-table tbody tr:hover { background: #e7f8f4; transform: translateY(-1px); }

/* Materials: native horizontal story rail, safe for touch and keyboard. */
.materials-horizontal-rail { margin: 2.5rem 0 0; padding: 1.15rem 0 1.5rem; border-top: 1px solid var(--rd-line); }
.materials-rail-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.materials-rail-heading h3 { margin: 0; color: var(--rd-navy); font-size: clamp(1.35rem, 2.4vw, 2rem); letter-spacing: -0.04em; }
.materials-rail-heading p { margin: 0; color: var(--rd-slate); font-size: 0.78rem; }
.materials-rail { display: flex; gap: 1rem; overflow-x: auto; padding: 0.3rem 0.25rem 1rem; scroll-snap-type: x mandatory; scrollbar-color: rgba(8, 127, 115, 0.45) transparent; }
.materials-rail-card { position: relative; flex: 0 0 min(72vw, 330px); min-height: 220px; overflow: hidden; scroll-snap-align: start; border-radius: 24px; color: #f8fffe; background: #102235; box-shadow: 0 16px 34px rgba(16, 34, 53, 0.12); }
.materials-rail-card img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; opacity: 0.65; transition: transform 500ms var(--rd-ease), opacity 300ms ease; }
.materials-rail-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 30, 43, 0.92), rgba(7, 30, 43, 0.08) 72%); }
.materials-rail-card:hover img { transform: scale(1.045); opacity: 0.82; }
.materials-rail-copy { position: absolute; inset: auto 1rem 1rem; z-index: 1; }
.materials-rail-copy span { color: #70e3d3; font-size: 0.63rem; font-weight: 900; letter-spacing: 0.08em; direction: ltr; }
.materials-rail-copy h4 { margin: 0.25rem 0 0.1rem; font-size: 1.08rem; }
.materials-rail-copy p { margin: 0; color: rgba(255,255,255,0.76); font-size: 0.74rem; line-height: 1.6; }

/* Reline: diagnosis/solution split with a calmer clinical hierarchy. */
#view-reline { background: radial-gradient(circle at 4% 22%, rgba(254, 205, 211, 0.48), transparent 24rem), linear-gradient(180deg, #fffafa, #f8fbfb); }
#view-reline .reline-hero-grid { gap: 1.2rem; }
#view-reline .reline-hero-grid > .glass-panel { border-radius: 24px; box-shadow: var(--rd-shadow-soft); }
#view-reline .reline-hero-grid > .glass-panel:first-child { border-top: 3px solid #e11d48; }
#view-reline .reline-hero-grid > .glass-panel:last-child { border-top: 3px solid var(--rd-teal); }
#view-reline .emergency-repair-banner { box-shadow: 0 16px 40px rgba(190, 18, 60, 0.12); }

/* Process: sticky editorial heading + active step treatment. */
#view-process { background: linear-gradient(180deg, #f6fffd, #f2f7fa); }
#view-process > div:first-child { position: sticky; top: 5.4rem; z-index: 3; max-width: 900px; margin-inline: auto; padding: 0.8rem 1rem 1.1rem; border-bottom: 1px solid rgba(8, 127, 115, 0.13); background: rgba(246, 255, 253, 0.88); backdrop-filter: blur(15px); }
#view-process > div:last-child { position: relative; }
#view-process > div:last-child::before { content: ""; position: absolute; top: 1.5rem; bottom: 1.5rem; right: 24px; width: 2px; background: linear-gradient(var(--rd-teal), rgba(8, 127, 115, 0.08)); }
#view-process > div:last-child > .glass-panel { position: relative; z-index: 1; margin-right: 0; border: 1px solid rgba(8, 127, 115, 0.12); box-shadow: 0 12px 28px rgba(16, 34, 53, 0.055); transition: transform 250ms var(--rd-ease), border-color 250ms ease, box-shadow 250ms ease; }
#view-process > div:last-child > .glass-panel.is-process-active { transform: translateX(-6px); border-color: rgba(8, 127, 115, 0.38); box-shadow: 0 20px 42px rgba(8, 127, 115, 0.12); }

/* Tools, care and contact: functional surfaces remain calm and scannable. */
#view-tools { background: radial-gradient(circle at 86% 8%, rgba(147, 197, 253, 0.16), transparent 22rem), linear-gradient(180deg, #f8fbff, #f3fcfa); }
#view-tools .quiz-wizard-container { border: 1px solid rgba(8, 127, 115, 0.2); box-shadow: 0 22px 55px rgba(8, 127, 115, 0.1); }
#view-tools .calc-box-panel, #view-tools .tracking-box-panel { border: 1px solid rgba(8, 127, 115, 0.13); box-shadow: var(--rd-shadow-soft); }
#view-care { background: radial-gradient(circle at 12% 6%, rgba(251, 191, 36, 0.13), transparent 20rem), linear-gradient(180deg, #fffefa, #f3fcfa); }
#view-care .care-cards-grid > .glass-panel { min-height: 230px; border: 1px solid rgba(8, 127, 115, 0.11); box-shadow: var(--rd-shadow-soft); }
#view-contact { background: radial-gradient(circle at 90% 8%, rgba(105, 226, 208, 0.17), transparent 22rem), linear-gradient(180deg, #f8fffd, #f1f6f7); }
#view-contact .contact-main-grid > .glass-panel, #view-contact .digital-scan-zone { border: 1px solid rgba(8, 127, 115, 0.14); box-shadow: var(--rd-shadow-soft); }
#view-contact input:focus, #view-contact select:focus, #view-contact textarea:focus { border-color: var(--rd-teal); box-shadow: 0 0 0 4px rgba(8, 127, 115, 0.1); }

@media (max-width: 820px) {
  .site-progress-rail { display: none; }
  .scroll-top-control { right: 0.75rem; bottom: 0.8rem; }
  #view-types .service-card-lux:first-child { grid-column: auto; }
  #view-process > div:first-child { top: 4.8rem; }
  #view-process > div:last-child::before { right: 21px; }
  .materials-rail-heading { align-items: start; flex-direction: column; }
}

@media (max-width: 560px) {
  .hero-hotspot { width: 34px; height: 34px; }
  .hotspot-tooltip { width: min(188px, 64vw); }
  .hero-hotspot:nth-of-type(n + 2) { display: none; }
  .page-view:not(#view-home) { border-radius: 22px; padding-inline: 0.65rem; }
  #view-process > div:first-child { position: relative; top: auto; }
  #view-process > div:last-child::before { display: none; }
  #view-process > div:last-child > .glass-panel.is-process-active { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-hotspot::after { animation: none; }
  .hero-hotspot, .hotspot-core, .scroll-top-control, .materials-rail-card img { transition: none; }
}

/* ==========================================================================
   Full-bleed cinematic hero v3
   ========================================================================== */
html { scrollbar-width: thin; scrollbar-color: rgba(8, 127, 115, 0.62) transparent; }
body { overflow-x: clip; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(8, 127, 115, 0.62); border: 2px solid transparent; background-clip: padding-box; }

.main-header {
  position: fixed !important;
  top: 0.9rem !important;
  left: 50%;
  width: min(1380px, calc(100vw - 2rem));
  margin: 0 !important;
  transform: translateX(-50%);
  background: rgba(7, 30, 43, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
  color: #f3fffd;
  backdrop-filter: blur(10px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
}
.main-header:not(.is-scrolled) .brand-name,
.main-header:not(.is-scrolled) .header-nav .nav-link,
.main-header:not(.is-scrolled) .header-tagline { color: #f3fffd !important; }
.main-header:not(.is-scrolled) .header-nav .nav-link.active { background: rgba(255,255,255,0.12) !important; color: #fff !important; }
.main-header.is-scrolled { background: rgba(252, 253, 253, 0.92) !important; color: var(--m4-ink); }
.main-header.is-scrolled .brand-name, .main-header.is-scrolled .header-nav .nav-link, .main-header.is-scrolled .header-tagline { color: var(--m4-ink) !important; }
.main-header.is-scrolled .header-nav .nav-link.active { background: rgba(8, 127, 115, 0.07) !important; color: var(--m4-teal) !important; }
.main-header::after { display: none; }

#view-home { overflow: visible !important; }
.hero-scene {
  position: relative;
  isolation: isolate;
  width: 100vw;
  min-height: 148svh;
  margin-inline: calc(50% - 50vw);
  overflow: clip;
  color: #f5fffd;
  background: #071e2b;
}
.hero-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(4, 23, 33, 0.96) 0%, rgba(6, 29, 40, 0.75) 31%, rgba(6, 29, 40, 0.18) 64%, rgba(238, 255, 252, 0.08) 100%),
    linear-gradient(0deg, rgba(4, 23, 33, 0.7), transparent 34%, rgba(255, 255, 255, 0.07) 100%);
}
.hero-scene::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: 32%;
  pointer-events: none;
  opacity: var(--hero-exit-opacity, 0);
  background: linear-gradient(0deg, #f3fcfa 0%, rgba(243, 252, 250, 0.78) 15%, transparent 85%);
  transition: opacity 180ms linear;
}
.hero-environment-layer {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url("../assets/images/mahdis-hero-lab-environment-v3.png");
  background-size: cover;
  background-position: center center;
  filter: saturate(0.92) contrast(1.02);
  transform: scale(var(--hero-bg-scale, 1.02));
  transition: transform 220ms linear;
}
.hero-scene-light-leak {
  position: absolute;
  inset: -12% -8% -20% 24%;
  z-index: -1;
  opacity: 0.74;
  background:
    radial-gradient(ellipse at 76% 18%, rgba(248, 255, 253, 0.96), transparent 24%),
    radial-gradient(ellipse at 60% 56%, rgba(126, 244, 224, 0.32), transparent 27%),
    radial-gradient(ellipse at 86% 88%, rgba(102, 224, 207, 0.18), transparent 34%);
  filter: blur(14px);
  mix-blend-mode: screen;
}
.hero-precision-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.22;
  pointer-events: none;
  background-image: linear-gradient(rgba(160, 248, 232, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(160, 248, 232, 0.09) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.85), transparent 78%);
  transform: translate3d(var(--hero-grid-x, 0px), 0, 0);
}
.hero-measurement-arcs { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.48; transform: translate3d(var(--hero-arcs-x, 0px), var(--hero-arcs-y, 0px), 0); }
.hero-measurement-arcs svg { position: absolute; width: min(62vw, 900px); height: 80%; right: -4%; top: 6%; overflow: visible; }
.hero-measurement-arcs path { fill: none; stroke: rgba(161, 249, 232, 0.54); stroke-width: 1; stroke-dasharray: 2 11; }
.hero-scene-content { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); align-items: center; gap: clamp(1rem, 4vw, 5rem); width: min(1420px, 100%); min-height: 100svh; margin-inline: auto; padding: 7rem clamp(1.25rem, 5vw, 5.8rem) 5.5rem; direction: ltr; }
.hero-editorial-copy { position: relative; z-index: 5; max-width: 700px; direction: rtl; transform: translate3d(var(--parallax-x, 0px), calc(var(--parallax-y, 0px) + var(--hero-copy-y, 0px)), 0); transition: transform 120ms linear; }
.hero-kicker-badge { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1.2rem; padding: .42rem .72rem; border: 1px solid rgba(225, 255, 249, .3); border-radius: 999px; color: rgba(242, 255, 253, .9); background: rgba(6, 31, 43, .26); font-size: .74rem; font-weight: 900; backdrop-filter: blur(9px); }
.hero-kicker-badge svg { width: 15px; height: 15px; }
.hero-scene-title { max-width: 700px; margin: 0; color: #f8fffe; font-size: clamp(3rem, 6.2vw, 6.7rem); line-height: 1.05; letter-spacing: -.07em; font-weight: 950; text-wrap: balance; }
.hero-scene-title span, .hero-scene-title strong { display: block; }
.hero-scene-title strong { margin-top: .12em; color: #43d6bd; font-size: 1.08em; text-shadow: 0 0 40px rgba(67, 214, 189, .2); }
.hero-scene-lead { max-width: 610px; margin: 1.35rem 0 0; color: rgba(239, 255, 252, .72); font-size: clamp(.88rem, 1.2vw, 1.05rem); line-height: 2.05; opacity: var(--hero-lead-opacity, 1); transition: opacity 160ms linear; }
.hero-actions-group { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.hero-actions-group .btn-hero-cta, .hero-actions-group .btn-hero-secondary { min-height: 48px; padding: .72rem 1.1rem; border-radius: 13px; }
.hero-actions-group .btn-hero-cta { color: #062d2a; background: #5be0ca !important; box-shadow: 0 14px 34px rgba(32, 189, 163, .23) !important; }
.hero-actions-group .btn-hero-secondary { color: #effffb !important; border: 1px solid rgba(238, 255, 252, .38) !important; background: rgba(7, 30, 43, .18) !important; box-shadow: none !important; }
.hero-light-link { display: inline-flex; align-items: center; gap: .3rem; color: rgba(242, 255, 253, .76) !important; font-size: .8rem; font-weight: 800; }
.hero-light-link svg { width: 15px; height: 15px; }
.hero-proofline { display: flex; align-items: center; flex-wrap: wrap; gap: .62rem; margin-top: 2.15rem; color: rgba(232, 255, 250, .64); font-size: .72rem; font-weight: 800; }
.hero-proofline span { display: inline-flex; align-items: center; gap: .3rem; }
.hero-proofline svg { width: 15px; height: 15px; color: #76e4d2; }
.hero-proofline b { color: rgba(116, 224, 207, .5); }
.hero-product-stage { position: relative; z-index: 5; min-height: min(730px, 76vh); direction: ltr; transform: translate3d(calc(var(--parallax-x, 0px) + var(--hero-product-x, 0px)), calc(var(--parallax-y, 0px) + var(--hero-product-y, 0px)), 0) scale(var(--hero-product-scale, 1)); transition: transform 120ms linear; }
.hero-product-halo { position: absolute; inset: 8% 2% 10% 4%; border-radius: 50%; background: radial-gradient(ellipse, rgba(142, 246, 226, .38), rgba(144, 236, 222, .12) 35%, transparent 70%); filter: blur(18px); mix-blend-mode: screen; }
.hero-product-reflection { position: absolute; right: 6%; bottom: 12%; width: 76%; height: 22%; border-radius: 50%; background: radial-gradient(ellipse, rgba(157, 248, 231, .26), transparent 68%); filter: blur(13px); transform: rotate(-8deg); opacity: .75; }
.hero-product-cutout { position: absolute; top: 8%; right: 2%; width: min(95%, 820px); height: auto; max-height: 82%; object-fit: contain; filter: drop-shadow(0 32px 25px rgba(0, 18, 27, .34)) drop-shadow(0 0 28px rgba(95, 230, 209, .24)); transform: translate3d(0, 0, 0); transition: filter 500ms ease; }
.hero-product-notes { position: absolute; right: 12%; bottom: 7%; display: flex; gap: .8rem; color: rgba(224, 255, 249, .7); font-size: .59rem; letter-spacing: .13em; font-weight: 900; direction: ltr; }
.hero-product-notes span { position: relative; }
.hero-product-notes span + span::before { content: ""; position: absolute; top: 50%; right: calc(100% + .4rem); width: 3px; height: 3px; border-radius: 50%; background: #66e0cd; }
.hero-scene-caption { position: absolute; right: clamp(1.25rem, 5vw, 5.8rem); bottom: 2rem; left: clamp(1.25rem, 5vw, 5.8rem); z-index: 6; display: flex; justify-content: space-between; align-items: center; color: rgba(221, 247, 243, .54); font-size: .62rem; font-weight: 900; letter-spacing: .12em; direction: ltr; }
.hero-scroll-cue { display: inline-flex; align-items: center; gap: .35rem; direction: rtl; letter-spacing: 0; font-size: .7rem; }
.hero-scroll-cue svg { width: 14px; height: 14px; }

.hero-scene .hero-hotspot-layer { inset: 4% 4% 8% 5%; z-index: 8; }
.hero-scene .hero-hotspot { width: 26px; height: 26px; }
.hero-scene .hotspot-core { width: 8px; height: 8px; border-width: 1px; box-shadow: 0 0 0 4px rgba(105, 226, 208, .22), 0 0 18px rgba(105, 226, 208, .84); }
.hero-scene .hero-hotspot::after { inset: 3px; animation-duration: 3.2s; }
.hero-scene .hotspot-tooltip { left: var(--hotspot-x); top: var(--hotspot-y); width: min(190px, 34vw); padding: .62rem .72rem; border-radius: 11px; background: rgba(5, 29, 40, .84); transform: translate(-50%, calc(-100% - 18px)); }
.hero-scene .hotspot-tooltip::before { content: ""; position: absolute; right: 50%; bottom: -17px; width: 34px; height: 1px; background: rgba(111, 226, 211, .72); transform: rotate(90deg); transform-origin: right center; clip-path: inset(0 100% 0 0); transition: clip-path 320ms var(--m4-ease); }
.hero-scene .hotspot-tooltip.is-open::before { clip-path: inset(0 0 0 0); }
.hero-scene .hotspot-tooltip-bottom { transform: translate(-50%, 18px); }
.hero-scene .hotspot-tooltip-bottom::before { top: -17px; bottom: auto; transform: rotate(90deg); }
.hero-scene .hotspot-tooltip-left { transform: translate(-100%, -50%); }
.hero-scene .hotspot-tooltip-left::before { top: 50%; right: -17px; bottom: auto; transform: none; }
.hero-scene[data-hero-phase="1"] [data-hotspot-scroll="1"] .hotspot-core,
.hero-scene[data-hero-phase="2"] [data-hotspot-scroll="2"] .hotspot-core,
.hero-scene[data-hero-phase="3"] [data-hotspot-scroll="3"] .hotspot-core { transform: scale(1.45); background: #fff; box-shadow: 0 0 0 6px rgba(105,226,208,.34), 0 0 25px rgba(105,226,208,.95); }
.hero-scene[data-hero-phase="1"] [data-hotspot-scroll="2"], .hero-scene[data-hero-phase="1"] [data-hotspot-scroll="3"],
.hero-scene[data-hero-phase="2"] [data-hotspot-scroll="1"], .hero-scene[data-hero-phase="2"] [data-hotspot-scroll="3"],
.hero-scene[data-hero-phase="3"] [data-hotspot-scroll="1"], .hero-scene[data-hero-phase="3"] [data-hotspot-scroll="2"] { opacity: .52; }

.home-statistics-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(1180px, calc(100% - 2.5rem)); margin: 0 auto; padding: 1.45rem 0 1.7rem; border-top: 1px solid rgba(8, 127, 115, .16); border-bottom: 1px solid rgba(8, 127, 115, .11); background: transparent; }
.home-statistics-band .ribbon-stat-item { min-height: 62px; padding-inline: 1.2rem; border-left: 1px solid rgba(8, 127, 115, .12); }
.home-statistics-band .ribbon-stat-item:last-child { border-left: 0; }
.home-statistics-band .stat-icon-circle { width: 38px; height: 38px; }

/* Homepage process becomes a reading rail instead of four equal pills. */
.section-process-steps { display: grid; grid-template-columns: minmax(220px, .35fr) minmax(0, .65fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; min-height: 210svh; }
.section-process-steps .section-header-editorial { position: sticky; top: 6rem; margin: 0; text-align: right; }
.section-process-steps .process-steps-row { position: relative; display: flex; flex-direction: column; gap: 0; min-height: 190svh; padding-right: 2.5rem; }
.section-process-steps .process-steps-row::after { top: 0; right: 11px; bottom: 0; width: 1px; height: auto; background: linear-gradient(var(--m4-teal), rgba(8,127,115,.08)); }
.section-process-steps .process-step-pill-card { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: min(42svh, 420px); padding: 1.35rem 1.45rem; border: 0; border-top: 1px solid rgba(8, 127, 115, .14); border-radius: 0; background: transparent; opacity: .42; transform: none; box-shadow: none; transition: opacity 320ms ease, transform 320ms var(--m4-ease), padding 320ms ease; }
.section-process-steps .process-step-pill-card::before { content: ""; position: absolute; top: 1.55rem; right: -2.5rem; width: 23px; height: 23px; border: 2px solid rgba(8,127,115,.24); border-radius: 50%; background: var(--m4-mint); transition: background 240ms ease, border-color 240ms ease, transform 240ms ease; }
.section-process-steps .process-step-pill-card.is-process-active { opacity: 1; transform: translateX(-6px); }
.section-process-steps .process-step-pill-card.is-process-active::before { border-color: var(--m4-teal); background: var(--m4-teal); transform: scale(1.15); box-shadow: 0 0 0 5px rgba(8,127,115,.12); }
.section-process-steps .process-step-pill-card p { max-width: 540px; }

/* Full homepage material journey: pinned on desktop, native swipe on mobile. */
.materials-horizontal-story { position: relative; height: 270svh; margin-inline: calc(50% - 50vw); padding: 0; background: linear-gradient(180deg, #071e2b 0%, #092d38 54%, #f3fcfa 100%); color: #f4fffd; overflow: clip; }
.materials-horizontal-pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; padding: 5.8rem clamp(1rem, 5vw, 5.8rem) 2.1rem; overflow: hidden; }
.materials-horizontal-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; width: min(1420px, 100%); margin-inline: auto; direction: rtl; }
.materials-horizontal-heading h2 { max-width: 720px; margin: .35rem 0 0; font-size: clamp(2rem, 4vw, 4.5rem); line-height: 1.08; letter-spacing: -.06em; }
.materials-horizontal-heading .story-index { color: #69e2d0; }
.materials-horizontal-direction { display: inline-flex; align-items: center; gap: .4rem; color: rgba(235,255,251,.63); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.materials-horizontal-direction svg { width: 16px; height: 16px; color: #70e3d3; }
.materials-horizontal-viewport { position: relative; width: min(1420px, 100%); margin-inline: auto; overflow: visible; direction: rtl; }
.materials-horizontal-track { display: flex; flex-direction: row; direction: rtl; gap: 2vw; width: max-content; transform: translate3d(var(--material-shift, 0px), 0, 0); will-change: transform; transition: transform 120ms linear; }
.material-panel { position: relative; flex: 0 0 min(78vw, 1060px); height: min(58svh, 610px); overflow: hidden; border-radius: 24px; opacity: .38; transform: scale(.94); background: #102235; box-shadow: 0 25px 65px rgba(0,0,0,.16); transition: opacity 420ms ease, transform 520ms var(--m4-ease), box-shadow 420ms ease; }
.material-panel img { width: 100%; height: 100%; object-fit: cover; opacity: .7; transform: scale(1.04); transition: transform 900ms var(--m4-ease), opacity 500ms ease; }
.material-panel-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,29,40,.9), rgba(5,29,40,.15) 70%), linear-gradient(0deg, rgba(5,29,40,.82), transparent 64%); }
.material-panel-copy { position: absolute; right: clamp(1.25rem, 4vw, 4rem); bottom: clamp(1.25rem, 4vw, 3.2rem); left: 34%; z-index: 1; direction: rtl; }
.material-panel-copy span, .material-panel-copy small { color: #74e3d2; font-size: .65rem; font-weight: 900; letter-spacing: .12em; direction: ltr; }
.material-panel-copy h3 { margin: .35rem 0 .35rem; color: #f6fffd; font-size: clamp(2.1rem, 5vw, 5.6rem); letter-spacing: -.06em; }
.material-panel-copy p { max-width: 600px; margin: 0 0 1rem; color: rgba(244,255,252,.76); font-size: clamp(.86rem, 1.3vw, 1.04rem); line-height: 1.9; }
.material-panel.is-active { opacity: 1; transform: scale(1); box-shadow: 0 32px 80px rgba(0, 0, 0, .28); }
.material-panel.is-active img { opacity: .88; transform: scale(1); }
.materials-horizontal-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(1420px, 100%); margin-inline: auto; direction: rtl; }
.materials-horizontal-footer .story-link { color: #dffcf7; }
.materials-horizontal-progress { flex: 1; max-width: 340px; height: 1px; background: rgba(218,255,249,.18); direction: ltr; }
.materials-horizontal-progress span { display: block; width: var(--material-progress, 25%); height: 2px; background: #69e2d0; transition: width 180ms ease; }
.materials-horizontal-counter { color: rgba(223,252,247,.58); font-size: .7rem; font-weight: 900; direction: ltr; }

/* Progress rail labels stay quiet until the user asks for them. */
.progress-node { position: relative; }
.progress-node::after { content: attr(aria-label); position: absolute; right: 1.25rem; top: 50%; padding: .28rem .48rem; border: 1px solid rgba(8,127,115,.15); border-radius: 6px; color: var(--m4-ink); background: rgba(252,253,253,.92); font-size: .65rem; font-weight: 800; white-space: nowrap; opacity: 0; transform: translateY(-50%) translateX(5px); pointer-events: none; box-shadow: 0 8px 18px rgba(16,34,53,.08); transition: opacity 160ms ease, transform 160ms ease; }
.progress-node:hover::after, .progress-node:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); }

@media (max-width: 960px) {
  .hero-scene-content { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1rem; padding-inline: 2rem; }
  .hero-scene-title { font-size: clamp(2.7rem, 6.2vw, 5rem); }
  .hero-product-stage { min-height: 620px; }
}

@media (max-width: 820px) {
  .main-header { top: .5rem !important; width: calc(100vw - 1rem); background: rgba(7,30,43,.38) !important; }
  .hero-scene { min-height: auto; }
  .hero-scene::after { height: 20%; opacity: .9; }
  .hero-scene-content { position: relative; display: flex; flex-direction: column; align-items: stretch; min-height: auto; padding: 7rem 1.2rem 3.5rem; gap: 0; }
  .hero-editorial-copy { max-width: 680px; }
  .hero-scene-title { font-size: clamp(2.7rem, 11vw, 4.8rem); }
  .hero-scene-lead { max-width: 560px; opacity: 1; }
  .hero-product-stage { min-height: min(570px, 82vw); margin-top: 1rem; transform: none; }
  .hero-product-cutout { top: 0; right: -7%; width: 108%; max-height: 100%; }
  .hero-product-halo { inset: 6% -4% 8% 2%; }
  .hero-scene-caption { position: relative; right: auto; bottom: auto; left: auto; padding: 0 1.2rem 1.25rem; }
  .hero-scene-caption > span:first-child { display: none; }
  .hero-proofline { margin-top: 1.6rem; }
  .home-statistics-band { grid-template-columns: repeat(2, minmax(0, 1fr)); width: calc(100% - 2rem); gap: .8rem 0; }
  .home-statistics-band .ribbon-stat-item:nth-child(2) { border-left: 0; }
  .section-process-steps { display: block; min-height: 0; }
  .section-process-steps .section-header-editorial { position: relative; top: auto; margin-bottom: 1rem; }
  .section-process-steps .process-steps-row { min-height: 0; padding-right: 1.5rem; }
  .section-process-steps .process-step-pill-card { min-height: 150px; justify-content: flex-start; }
  .section-process-steps .process-step-pill-card::before { right: -1.5rem; }
  .materials-horizontal-story { height: auto; min-height: 0; margin-inline: 0; background: linear-gradient(180deg, #071e2b, #092d38 52%, #f3fcfa); }
  .materials-horizontal-pin { position: relative; top: auto; height: auto; padding: 4rem 1rem 2rem; overflow: visible; }
  .materials-horizontal-heading { align-items: start; flex-direction: column; }
  .materials-horizontal-heading h2 { font-size: clamp(2rem, 10vw, 3.6rem); }
  .materials-horizontal-direction { white-space: normal; }
  .materials-horizontal-viewport { overflow-x: auto; padding-bottom: .8rem; scrollbar-color: rgba(105,226,208,.5) transparent; }
  .materials-horizontal-track { gap: .8rem; transform: none !important; transition: none; }
  .material-panel { flex-basis: 84vw; height: 64vw; min-height: 300px; opacity: 1; transform: none; border-radius: 18px; }
  .material-panel img { opacity: .86; transform: none; }
  .material-panel-copy { right: 1rem; bottom: 1rem; left: 1rem; }
  .materials-horizontal-footer { margin-top: .4rem; }
  .materials-horizontal-progress { display: none; }
}

@media (max-width: 560px) {
  .hero-scene-content { padding-inline: .95rem; }
  .hero-kicker-badge { font-size: .66rem; }
  .hero-scene-title { letter-spacing: -.075em; }
  .hero-actions-group { align-items: stretch; flex-direction: column; }
  .hero-actions-group .btn-hero-cta, .hero-actions-group .btn-hero-secondary { width: 100%; justify-content: center; }
  .hero-light-link { align-self: flex-start; margin-top: .15rem; }
  .hero-product-stage { min-height: 92vw; }
  .hero-product-cutout { top: 3%; right: -16%; width: 124%; }
  .hero-scene .hero-hotspot-layer { inset: 2% 0 8% 0; }
  .hero-scene .hero-hotspot { width: 28px; height: 28px; }
  .hero-scene .hero-hotspot:nth-of-type(n + 3) { display: none; }
  .hero-scene .hotspot-tooltip { width: min(180px, 61vw); }
  .hero-product-notes { right: 9%; bottom: 3%; gap: .5rem; font-size: .5rem; }
  .home-statistics-band { grid-template-columns: 1fr; padding-block: 1rem; }
  .home-statistics-band .ribbon-stat-item, .home-statistics-band .ribbon-stat-item:nth-child(2) { border-left: 0; border-bottom: 1px solid rgba(8,127,115,.1); }
  .home-statistics-band .ribbon-stat-item:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scene::after, .hero-environment-layer, .hero-precision-grid, .hero-measurement-arcs, .hero-editorial-copy, .hero-product-stage { transition: none; transform: none; }
  .hero-scene-lead { opacity: 1; }
  .section-process-steps .process-step-pill-card { opacity: 1; }
}

/* Responsive sizing correction: keep the visual language, remove viewport-scale drift. */
.main-header {
  width: min(1320px, calc(100vw - 48px));
  transform: translateX(-50%) !important;
  transition: background 260ms ease, box-shadow 260ms ease, border-color 260ms ease !important;
}

.hero-scene {
  min-height: 100vh;
  min-height: 100svh;
}

.hero-scene-content {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: clamp(5rem, 8vh, 6.5rem);
  padding-bottom: clamp(2.5rem, 4vh, 4rem);
}

.hero-scene-title {
  max-width: 660px;
  font-size: clamp(4rem, 5.3vw, 6.5rem);
}

.hero-scene-title strong { font-size: 1.02em; }
.hero-product-stage { min-height: clamp(460px, 68vh, 730px); }

.section-process-steps {
  min-height: 100vh;
  min-height: 100svh;
}

.section-process-steps .process-steps-row { min-height: 0; }

.section-process-steps .process-step-pill-card {
  min-height: clamp(150px, 18vh, 210px);
}

@media (min-width: 821px) {
  .materials-horizontal-story {
    height: 100vh;
    min-height: 100vh;
    min-height: 100svh;
    overflow: visible;
  }

  .materials-horizontal-pin {
    box-sizing: border-box;
    height: 100vh;
    height: 100svh;
    overflow: visible;
  }
}

@media (max-width: 820px) {
  .main-header { width: calc(100vw - 1rem); }

  .section-process-steps { padding-top: 5rem; }

  .hero-scene-content {
    box-sizing: border-box;
    padding-top: 7rem;
    padding-bottom: 3.5rem;
  }

  .hero-scene-title { font-size: clamp(2.7rem, 11vw, 4.8rem); }
}

@media (min-width: 1600px) {
  .hero-scene-content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    padding-inline: 2rem;
  }
  .hero-editorial-copy { max-width: 760px; }
}

/* A reveal transform on the story wrapper would also transform its sticky child. */
html,
body {
  overflow-x: clip !important;
}

body.motion-ready .materials-horizontal-story {
  opacity: 1;
  transform: none;
}

/* Content must remain readable on deep-links, slow JS, and full-page captures. */
body.motion-ready .reveal-on-scroll,
body.motion-ready .materials-story-section,
body.motion-ready .cinematic-lab-section {
  opacity: 1;
  transform: none;
}