/* First Principle responsive system.
 * Master: current 1280 x 585 CSS viewport (2416abf), content canvas
 * 1264.666667 x 585.333333 CSS px. These are design coordinates, not device
 * detection. A single container unit scales the complete desktop composition.
 * Layout states: desktop >=1100px, tablet 600–1099px, phone <600px.
 */

@font-face {
  font-family:"Anton";
  src:url(../assets/fonts/anton-400.woff2)format("woff2");
  font-weight:400;
  font-display:swap;
}

@font-face {
  font-family:"Billion Dreams";
  src:url(../assets/fonts/billion-dreams-400.woff2)format("woff2");
  font-weight:400;
  font-display:swap;
}

@font-face {
  font-family:"Helvetica Now Display";
  src:url(../assets/fonts/helvetica-now-300.woff2)format("woff2");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:"Helvetica Now Display";
  src:url(../assets/fonts/helvetica-now-400.woff2)format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:"Helvetica Now Display";
  src:url(../assets/fonts/helvetica-now-500.woff2)format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:"Helvetica Now Display";
  src:url(../assets/fonts/helvetica-now-700.woff2)format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:"Helvetica Now Display";
  src:url(../assets/fonts/helvetica-now-700i.woff2)format("woff2");
  font-weight:700;
  font-style:italic;
  font-display:swap;
}

@font-face {
  font-family:"Helvetica Neue";
  src:url(../assets/fonts/helvetica-neue-400.woff2)format("woff2");
  font-weight:400;
  font-display:swap;
}

@font-face {
  font-family:"Helvetica Neue";
  src:url(../assets/fonts/helvetica-neue-500.woff2)format("woff2");
  font-weight:500;
  font-display:swap;
}

@font-face {
  font-family:"Helvetica Now Text";
  src:url(../assets/fonts/helvetica-now-text-400.woff2)format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:"Helvetica Now Text";
  src:url(../assets/fonts/helvetica-now-text-500.woff2)format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:"Helvetica Now Text";
  src:url(../assets/fonts/helvetica-now-text-700.woff2)format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:"HN Fallback";
  src:local("Arial"),local("Helvetica"),local("Liberation Sans");
  ascent-override:111%;
  descent-override:36%;
  line-gap-override:0%;
  size-adjust:99.5%;
}

@font-face {
  font-family:"Neue Fallback";
  src:local("Arial"),local("Helvetica"),local("Liberation Sans");
  ascent-override:95.2%;
  descent-override:21.3%;
  line-gap-override:2.8%;
  size-adjust:101%;
}

@font-face {
  font-family:"Anton Fallback";
  src:local("Impact"),local("Arial Narrow"),local("Arial");
  ascent-override:117.6%;
  descent-override:32.9%;
  line-gap-override:0%;
  size-adjust:100%;
}

@font-face {
  font-family:"Script Fallback";
  src:local("Brush Script MT"),local("Segoe Script"),local("Snell Roundhand");
  ascent-override:101.6%;
  descent-override:25.4%;
  line-gap-override:0%;
  size-adjust:70%;
}

:root {
  --ink: #111111;
  --ink-70: rgba(17, 17, 17, 0.7);
  --ink-40: rgba(17, 17, 17, 0.4);
  --ink-20: rgba(17, 17, 17, 0.2);
  --paper: #f0f0f0;
  --white: #ffffff;
  --white-60: rgba(255, 255, 255, 0.6);
  --white-20: rgba(255, 255, 255, 0.2);
  --f-display: "Helvetica Now Display", "HN Fallback", Arial, sans-serif;
  --f-neue: "Helvetica Neue", "Neue Fallback", Arial, sans-serif;
  --f-now-text: "Helvetica Now Text", "HN Fallback", Arial, sans-serif;
  --f-anton: "Anton", "Anton Fallback", Impact, sans-serif;
  --f-script: "Billion Dreams", "Script Fallback", cursive;
  --fog-img: url("../assets/img/fog-new.png");
  --card-shadow:
    0 0.8125rem 0.90625rem rgba(0, 0, 0, 0.1),
    0 3.3125rem 1.65625rem rgba(0, 0, 0, 0.09),
    0 7.4375rem 2.21875rem rgba(0, 0, 0, 0.05),
    0 13.1875rem 2.625rem rgba(0, 0, 0, 0.01);
}

@supports (background-image:image-set(url(a.avif)type("image/avif"))) {
  :root {
    --fog-img: image-set(
      url("../assets/img/fog-new.avif") type("image/avif"),
      url("../assets/img/fog-new.webp") type("image/webp"),
      url("../assets/img/fog-new.png") type("image/png")
    );
  }
}

*,
*::before,
*::after {
  box-sizing:border-box;
}

html {
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  font-size:100%;
}

body {
  margin:0;
  font-family:var(--f-display);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  font-size:0.88888rem;
}

h1,
h2,
h3,
p {
  margin:0;
}

ul {
  margin:0;
  padding:0;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font:inherit;
  color:inherit;
}

/* Use designed press feedback without the browser’s coloured tap overlay.
   Keyboard focus remains visible through the independent :focus-visible rule. */
:where(a, button, summary, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]) {
  -webkit-tap-highlight-color:transparent;
}

img,
picture {
  display:block;
}

img {
  max-width:100%;
  height:auto;
}

:focus-visible {
  outline:2px solid currentColor;
  outline-offset:3px;
  border-radius:2px;
}


.container {
  max-width:71.1104rem;
  margin:0 auto;
  padding:0 1.1111rem;
  width:100%;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.skip-link {
  position:absolute;
  left:0.88888rem;
  top:-100px;
  z-index:100;
  padding:0.66666rem 0.88888rem;
  border-radius:999px;
  background:var(--ink);
  color:var(--white);
  font-size:max(0.88888rem,14px);
}

.skip-link:focus {
  top:0.88888rem;
}

.muted {
  color:var(--ink-70);
}

.dim {
  color:var(--white-60);
}

@keyframes fadeUp {
  0% {
    opacity:0;
    transform:translateY(30px);
  }

  100% {
    opacity:1;
    transform:translateY(0);
  }
}



@keyframes heroSlideLeft {
  0% {
    transform:translateX(-100vw);
    opacity:0;
  }

  100% {
    transform:translateX(0);
    opacity:1;
  }
}

@keyframes heroSlideRight {
  0% {
    transform:translateX(100vw);
    opacity:0;
  }

  100% {
    transform:translateX(0);
    opacity:1;
  }
}







.hero {
  position:relative;
  background:#3d8ee0;
  height:250svh;
  container-type:inline-size;
}

.hero__sticky {
  position:sticky;
  top:0;
  overflow:hidden;
  height:max(100svh,min(46.283606cqw,878px));
  isolation:isolate;
}

.hero__inner {
  position:relative;
  padding-top:calc(92.44352*var(--scene-unit, 1px));
  padding-bottom:calc(135.10976*var(--scene-unit, 1px));
  color:var(--white);
  height:100%;
  width:100%;
  font-size:calc(14.22208*var(--scene-unit));
}

.hero__bg {
  position:absolute;
  inset:0;
  z-index:0;
}

.hero__bg img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero__toilet {
  position:absolute;
  bottom:calc(-85.33248*var(--scene-unit, 1px));
  width:calc(824.88064*var(--scene-unit, 1px));
  height:calc(549.825613*var(--scene-unit, 1px));
  z-index:2;
  animation:heroSlideRight 2s cubic-bezier(0.2,0.8,0.2,1) 0.2s both;
  left:calc(535.445653*var(--scene-unit));
}

.hero__toilet img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
}

.hero__mist,
.hero__mist-behind {
  position:absolute;
  overflow:visible;
  pointer-events:none;
  height:100%;
  inset:0;
}

.hero__mist-behind {
  z-index:1;
}

.hero__mist {
  z-index:3;
}

.hero__cloud-scene {
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  pointer-events:none;
  overflow:hidden;
  height:25%;
}

.hero__cloud-entrance {
  animation:cloudRockEntrance 2s cubic-bezier(0.2,0.8,0.2,1) .2s both;
}

.hero__cloud-wind {
  animation:cloudWind var(--wind-duration) linear var(--wind-delay) infinite;
  animation-play-state:paused;
}

.hero__cloud-shape {
  transform-box:fill-box;
  transform-origin:50% 70%;
  animation:cloudShape var(--shape-duration) ease-in-out var(--shape-delay) infinite;
  animation-play-state:paused;
}

.clouds-live .hero__cloud-wind,
.clouds-live .hero__cloud-shape {
  animation-play-state:running;
}

@keyframes cloudRockEntrance {
  from {
    transform:translateX(var(--cloud-enter-x, 1600px));
    opacity:0;
  }

  to {
    transform:translateX(0);
    opacity:1;
  }
}

@keyframes cloudWind {
  from {
    transform:translateX(0);
  }

  to {
    transform:translateX(2560px);
  }
}

@keyframes cloudShape {
  0%,
  100% {
    transform:scale(1) rotate(-.3deg);
  }

  50% {
    transform:scale(1.035,1.025) rotate(.3deg);
  }
}

.clouds-paused .hero__cloud-wind,
.clouds-paused .hero__cloud-shape,
.clouds-still .hero__cloud-wind,
.clouds-still .hero__cloud-shape {
  animation-play-state:paused;
}

.hero__fog-overlay {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:20;
}

.hero__fog-layer {
  position:absolute;
  left:-10vw;
  right:-10vw;
  top:100%;
  will-change:transform;
}

.hero__fog-layer--1 {
  height:250vh;
  background-repeat:no-repeat;
  background-position:center top;
  background-image:linear-gradient(to bottom,rgba(255,255,255,0) 0vh,rgba(255,255,255,0) 45vh,#ffffff 50vh,#ffffff 250vh),var(--fog-img);
  background-size:100% 250vh,100vw 50vh;
  opacity:1;
  transform:translateY(calc(var(--scroll-p, 0)*-100vh));
  z-index:5;
}

.hero__fog-layer--2 {
  height:60vh;
  background:var(--fog-img) no-repeat center top;
  background-size:120vw 60vh;
  opacity:0.8;
  transform:translateY(calc(var(--scroll-p, 0)*-110vh)) scaleX(-1);
  z-index:6;
}

.hero__fog-layer--3 {
  height:80vh;
  background:var(--fog-img) no-repeat center top;
  background-size:150vw 80vh;
  opacity:0.6;
  transform:translateY(calc(var(--scroll-p, 0)*-120vh));
  z-index:7;
}

.hero__fog-layer--base {
  display:none;
}

.topbar__mobile-actions,
.hamburger,
.mobile-menu {
  display:none;
}

.topbar {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  overflow:hidden;
  height:auto;
}

.topbar {
  --bg-color: rgba(17, 17, 17, 0.34);
  --highlight: rgba(255, 255, 255, 0.15);
  height:auto;
}

.topbar[data-theme="light"] {
  --bg-color: rgba(255, 255, 255, 0.34);
  --highlight: rgba(255, 255, 255, 0.9);
}

.glass-filter,
.glass-overlay,
.glass-specular {
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 0.4s var(--ease-standard);
}

.topbar[data-mode="glass"] .glass-filter,
.topbar[data-mode="glass"] .glass-overlay,
.topbar[data-mode="glass"] .glass-specular {
  opacity:1;
}

.glass-filter {
  z-index:1;
  backdrop-filter:blur(calc(6*var(--scene-unit, 1px))) saturate(160%);
  -webkit-backdrop-filter:blur(calc(6*var(--scene-unit, 1px))) saturate(160%);
  filter:url(#fp-glass-distortion)saturate(115%) brightness(1.03);
}

.glass-overlay {
  z-index:2;
  background:var(--bg-color);
  transition:background 0.35s var(--ease-standard);
}

.glass-specular {
  z-index:3;
  box-shadow:inset 0 calc(1*var(--scene-unit, 1px))0 var(--highlight),inset 0 calc(-1*var(--scene-unit, 1px))0 rgba(17,17,17,0.04);
  border-bottom:calc(1*var(--scene-unit, 1px)) solid rgba(17,17,17,0.05);
  transition:box-shadow 0.35s var(--ease-standard);
}

.topbar__inner {
  position:relative;
  z-index:4;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  max-width:none;
  width:100%;
  height:calc(63.99936*var(--scene-unit));
  padding:0 calc(59.665672*var(--scene-unit));
  font-size:calc(14.22208*var(--scene-unit));
}

.topbar__brand {
  display:flex;
  align-items:center;
  justify-self:start;
  margin-left:0;
  transform:none;
}

.topbar__logo {
  display:block;
  height:calc(33.77744*var(--scene-unit, 1px));
  width:auto;
  filter:none;
  transition:filter 0.35s var(--ease-standard);
  transform:translateY(calc(1.1*var(--scene-unit, 1px)));
}

.topbar[data-theme="dark"] .topbar__logo {
  filter:invert(1);
}

.topbar__nav {
  display:flex;
  align-items:center;
  gap:calc(28.44416*var(--scene-unit, 1px));
  justify-self:center;
  flex-wrap:nowrap;
}

.nav__item {
  position:relative;
  font-family:var(--f-now-text);
  font-weight:500;
  font-size:calc(14.22208*var(--scene-unit, 1px));
  color:var(--white);
  opacity:0.82;
  white-space:nowrap;
  transition:color 0.35s var(--ease-standard),opacity 0.25s ease;
}

.topbar[data-theme="light"] .nav__item {
  color:var(--ink);
  opacity:0.62;
}

.nav__item::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:calc(-5.688832*var(--scene-unit, 1px));
  height:calc(1*var(--scene-unit, 1px));
  background:currentColor;
  opacity:0;
  transform:scaleX(0.4);
  transform-origin:left;
  transition:opacity 160ms ease,transform 160ms ease;
}

.nav__item:hover, .nav__item:focus-visible {
  opacity:1;
}

.nav__item:hover::after, .nav__item:focus-visible::after {
  opacity:0.3;
  transform:scaleX(1);
}

.nav__item--active {
  opacity:1;
  font-weight:600;
}

.nav__item--active::after {
  opacity:0.9;
  height:calc(1.5*var(--scene-unit, 1px));
  transform:scaleX(1);
}

.hero__content {
  position:relative;
  width:calc(455.10656*var(--scene-unit, 1px));
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  z-index:5;
  animation:heroSlideLeft 1.8s cubic-bezier(0.2,0.8,0.2,1) 0.1s both;
  margin-left:calc(127.449493*var(--scene-unit));
}

.hero__eyebrow {
  display:flex;
  align-items:center;
  gap:calc(8.8888*var(--scene-unit, 1px));
  font-family:var(--f-now-text);
  font-weight:500;
  font-size:calc(9.77768*var(--scene-unit, 1px));
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.66);
}

.hero__eyebrow::before {
  content:"";
  width:calc(24.88864*var(--scene-unit, 1px));
  height:calc(1*var(--scene-unit, 1px));
  background:rgba(255,255,255,0.45);
}

.hero__title {
  margin-top:calc(14.22208*var(--scene-unit, 1px));
  display:flex;
  flex-direction:column;
  width:100%;
  font-weight:400;
}

.hero__title-main,
.hero__title-script {
  white-space:nowrap;
}

.hero__title-main {
  font-size:calc(88.888*var(--scene-unit, 1px));
  font-family:var(--f-anton);
  line-height:0.9;
  letter-spacing:-0.015em;
}

.hero__title-script {
  margin-top:calc(-29.155264*var(--scene-unit, 1px));
  margin-left:calc(-3.55552*var(--scene-unit, 1px));
  font-size:calc(88.888*var(--scene-unit, 1px));
  font-family:var(--f-script);
  opacity:0.5;
  line-height:1;
}

.hero__sub {
  margin-top:calc(17.7776*var(--scene-unit, 1px));
  max-width:calc(426.6624*var(--scene-unit, 1px));
  font-family:var(--f-now-text);
  font-weight:400;
  font-size:calc(16.88872*var(--scene-unit, 1px));
  line-height:1.5;
  letter-spacing:-0.01em;
  color:rgba(255,255,255,0.82);
  text-wrap:pretty;
}

.hero__sub em {
  font-style:normal;
  font-weight:700;
  color:var(--white);
}

.hero__price {
  margin-top:calc(14.22208*var(--scene-unit, 1px));
  display:flex;
  align-items:center;
  gap:calc(8.8888*var(--scene-unit, 1px));
  font-family:var(--f-now-text);
  font-weight:400;
  font-size:calc(12.44432*var(--scene-unit, 1px));
  color:rgba(255,255,255,0.62);
  flex-wrap:nowrap;
}

.hero__price__lead {
  display:none;
  align-items:baseline;
  gap:calc(4.4444*var(--scene-unit, 1px));
}

.hero__price strong {
  font-family:var(--f-neue);
  font-weight:500;
  font-size:calc(15.11096*var(--scene-unit, 1px));
  color:var(--white);
}

.hero__price i {
  width:calc(2*var(--scene-unit, 1px));
  height:calc(2*var(--scene-unit, 1px));
  border-radius:50%;
  background:currentColor;
  opacity:0.55;
}

.hero__price>i:first-of-type {
  display:none;
}

.hero__cta {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(10.66656*var(--scene-unit, 1px));
  width:calc(227.55328*var(--scene-unit, 1px));
  height:calc(46.22176*var(--scene-unit, 1px));
  margin-top:calc(19.55536*var(--scene-unit, 1px));
  padding:0 calc(17.7776*var(--scene-unit, 1px))0 calc(21.33312*var(--scene-unit, 1px));
  border-radius:calc(999*var(--scene-unit, 1px));
  background:var(--white);
  color:var(--ink);
  border:0;
  transition:box-shadow 0.32s ease;
  box-shadow:0 calc(2*var(--scene-unit, 1px)) calc(12*var(--scene-unit, 1px)) rgba(17,17,17,0.16);
}

.hero__cta:hover,
.hero__cta:focus-visible {
  box-shadow:0 calc(10*var(--scene-unit, 1px)) calc(26*var(--scene-unit, 1px)) rgba(17,17,17,0.25);
}

.hero__cta__fill {
  position:absolute;
  inset:calc(-2*var(--scene-unit, 1px));
  border-radius:inherit;
  background:var(--ink);
  transform:translate3d(-104%,0,0);
  transition:transform 0.52s cubic-bezier(0.76,0,0.24,1);
  z-index:-1;
  will-change:transform;
}

.hero__cta:hover .hero__cta__fill,
.hero__cta:focus-visible .hero__cta__fill {
  transform:translate3d(0,0,0);
}

.hero__cta__labels {
  position:relative;
  display:grid;
  align-items:center;
  overflow:hidden;
  height:calc(17.7776*var(--scene-unit, 1px));
  flex:1 1 auto;
  font-family:var(--f-now-text);
  font-weight:500;
  font-size:calc(13.3332*var(--scene-unit, 1px));
  line-height:calc(17.7776*var(--scene-unit, 1px));
  letter-spacing:-0.005em;
  white-space:nowrap;
}

.hero__cta__label {
  grid-area:1/1;
  display:flex;
  align-items:baseline;
  gap:calc(4.266624*var(--scene-unit, 1px));
  transition:transform 0.42s cubic-bezier(0.76,0,0.24,1),opacity 0.22s ease,color 0.22s ease;
}

.hero__cta__label--price strong {
  position:relative;
  font-family:var(--f-neue);
  font-size:calc(15.11096*var(--scene-unit, 1px));
  font-weight:700;
  letter-spacing:-0.025em;
}

.hero__cta__label--explore {
  opacity:0;
  transform:translate3d(0,120%,0);
}

.hero__cta:hover .hero__cta__label--price,
.hero__cta:focus-visible .hero__cta__label--price {
  opacity:0;
  transform:translate3d(0,-120%,0);
  color:var(--white);
}

.hero__cta:hover .hero__cta__label--explore,
.hero__cta:focus-visible .hero__cta__label--explore {
  opacity:1;
  transform:translate3d(0,0,0);
  color:var(--white);
}

.hero__cta__arrow {
  position:relative;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:calc(13.3332*var(--scene-unit, 1px));
  height:calc(13.3332*var(--scene-unit, 1px));
  transition:transform 0.45s cubic-bezier(0.65,0,0.35,1),color 0.3s ease;
}

.hero__cta__arrow svg {
  width:100%;
  height:100%;
}

.hero__cta:hover .hero__cta__arrow,
.hero__cta:focus-visible .hero__cta__arrow {
  transform:translateX(calc(4*var(--scene-unit, 1px)));
  color:var(--white);
}

.hero__proof {
  position:relative;
  margin-top:calc(26.6664*var(--scene-unit, 1px));
  padding:calc(15.99984*var(--scene-unit, 1px)) calc(3.55552*var(--scene-unit, 1px)) calc(3.55552*var(--scene-unit, 1px))0;
  width:100%;
  max-width:calc(455.10656*var(--scene-unit, 1px));
  border-top:calc(1*var(--scene-unit, 1px)) solid rgba(255,255,255,0.16);
  display:flex;
  align-items:center;
  gap:calc(10.66656*var(--scene-unit, 1px)) calc(21.33312*var(--scene-unit, 1px));
  flex-wrap:nowrap;
}

.hero__proof__label {
  font-family:var(--f-now-text);
  font-weight:400;
  font-size:calc(8.8888*var(--scene-unit, 1px));
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.66);
}

.hero__proof__marks {
  position:relative;
  display:flex;
  align-items:center;
  gap:calc(21.33312*var(--scene-unit, 1px));
  list-style:none;
  overflow:hidden;
  border-radius:calc(3.55552*var(--scene-unit, 1px));
}

.hero__proof__marks::after {
  content:"";
  position:absolute;
  inset:-20%auto -20% -35%;
  width:22%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.22),transparent);
  transform:skewX(-18deg);
  animation:proofSweep 8s cubic-bezier(0.4,0,0.2,1) 2.5s infinite;
}

.hero__proof__marks img {
  display:block;
  width:auto;
  opacity:0.9;
  filter:brightness(1.18) contrast(1.12) drop-shadow(calc(0.35*var(--scene-unit, 1px))0 0 rgba(255,255,255,0.72)) drop-shadow(calc(-0.35*var(--scene-unit, 1px))0 0 rgba(255,255,255,0.72)) drop-shadow(0 0 0 rgba(255,255,255,0));
  transform:translateY(0);
  animation:proofBreathe 7s ease-in-out infinite;
  transition:opacity 0.35s ease,filter 0.35s ease,transform 0.35s ease;
}

.hero__proof__marks .mark:nth-child(2) img {
  animation-delay:-5.25s;
}

.hero__proof__marks .mark:nth-child(3) img {
  animation-delay:-3.5s;
}

.hero__proof__marks .mark:nth-child(4) img {
  animation-delay:-1.75s;
}

.hero__proof__marks .mark:hover img {
  opacity:1;
  filter:brightness(1.28) contrast(1.16) drop-shadow(calc(0.4*var(--scene-unit, 1px))0 0 rgba(255,255,255,0.82)) drop-shadow(calc(-0.4*var(--scene-unit, 1px))0 0 rgba(255,255,255,0.82)) drop-shadow(0 0 calc(7.11104*var(--scene-unit, 1px)) rgba(255,255,255,0.3));
  transform:translateY(calc(-1*var(--scene-unit, 1px)));
}

@keyframes proofBreathe {
  0%,
  70%,
  100% {
    opacity:0.88;
    filter:brightness(1.16) contrast(1.1) drop-shadow(0.35px 0 0 rgba(255,255,255,0.7)) drop-shadow(-0.35px 0 0 rgba(255,255,255,0.7)) drop-shadow(0 0 0 rgba(255,255,255,0));
  }

  82% {
    opacity:1;
    filter:brightness(1.28) contrast(1.14) drop-shadow(0.4px 0 0 rgba(255,255,255,0.82)) drop-shadow(-0.4px 0 0 rgba(255,255,255,0.82)) drop-shadow(0 0 0.42rem rgba(255,255,255,0.26));
  }
}

@keyframes proofSweep {
  0%,
  58% {
    left:-35%;
    opacity:0;
  }

  63% {
    opacity:0.6;
  }

  76% {
    left:115%;
    opacity:0;
  }

  100% {
    left:115%;
    opacity:0;
  }
}

.mark--taj img {
  height:calc(35.5552*var(--scene-unit, 1px));
}

.mark--leela img {
  height:calc(33.77744*var(--scene-unit, 1px));
}

.mark--itc img {
  height:calc(35.5552*var(--scene-unit, 1px));
}

.mark--oberoi img {
  height:calc(21.33312*var(--scene-unit, 1px));
  opacity:0.95;
}

.section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:3.55552rem;
  height:auto;
  gap:1.5rem;
}

.section-head__title {
  font-family:var(--f-neue);
  font-weight:400;
  font-size:3.55552rem;
  line-height:1;
  color:var(--ink);
  white-space:nowrap;
}

.section-head__title strong {
  font-weight:500;
}

.section-head__sub {
  font-family:var(--f-neue);
  font-weight:400;
  font-size:max(1.1111rem,13px);
  line-height:1.5;
  color:var(--ink);
  max-width:29.944145rem;
  white-space:nowrap;
}

#technology {
  margin-top:-40vh;
  padding-top:40vh;
  position:relative;
  z-index:30;
  transform:translateY(calc((1 - var(--tech-scroll-p, 1))*80px));
  opacity:calc(var(--tech-scroll-p, 1));
  will-change:transform,opacity;
}

.features__hint { display:none; }

.features {
  padding-top:7.7777rem;
}

.features .section-head {
  margin-bottom:1.77776rem;
}

.features__body {
  display:grid;
  grid-template-columns:minmax(0,1fr) 35.5552rem;
  max-width:79.9992rem;
  margin:0 auto;
  align-items:start;
}

.features__media {
  position:sticky;
  top:0;
  width:100%;
  height:100svh;
  background:#d9d9d9;
  overflow:hidden;
}

.features__img {
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.5s cubic-bezier(0.4,0,0.2,1),visibility 0.5s cubic-bezier(0.4,0,0.2,1);
  z-index:0;
}

.features__img.is-active {
  opacity:1;
  visibility:visible;
  z-index:1;
}

.features__img img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.features__img--zoom img {
  transform:scale(1.0494);
}

.features__list {
  list-style:none;
  scrollbar-width:none;
  background:var(--white);
  overflow-y:visible;
  height:auto;
  overscroll-behavior:auto;
  scroll-snap-type:none;
}

.features__list::-webkit-scrollbar {
  display:none;
}

.feature {
  background:#f0f0f0;
  border-bottom:1px solid var(--ink-70);
  height:8.8888rem;
  overflow:hidden;
  transition:height 0.5s cubic-bezier(0.4,0,0.2,1),background-color 0.5s cubic-bezier(0.4,0,0.2,1),padding 0.5s cubic-bezier(0.4,0,0.2,1),gap 0.5s cubic-bezier(0.4,0,0.2,1),border-color 0.5s cubic-bezier(0.4,0,0.2,1);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:0;
  gap:0;
  scroll-snap-align:start;
  scroll-margin-top:1px;
}

.feature__btn {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  height:8.8888rem;
  flex:0 0 auto;
  padding:0 2.77775rem;
  background:none;
  border:0;
  text-align:left;
  cursor:pointer;
  transition:height 0.5s cubic-bezier(0.4,0,0.2,1),padding 0.5s cubic-bezier(0.4,0,0.2,1);
}

.feature__btn:focus-visible {
  outline-offset:-4px;
}

.feature__title {
  font-family:var(--f-neue);
  font-weight:500;
  font-size:2.2222rem;
  line-height:1;
  color:var(--ink);
  white-space:nowrap;
  transition:color 0.5s cubic-bezier(0.4,0,0.2,1);
}

.feature__icon {
  display:none;
}

.feature__desc {
  display:block;
  opacity:0;
  transform:translateY(20px);
  padding:0 2.77775rem;
  width:26.610845rem;
  max-width:100%;
  font-family:var(--f-display);
  font-size:max(1.33332rem,13px);
  line-height:1.5;
  color:var(--white-60);
  transition:opacity 0.3s cubic-bezier(0.4,0,0.2,1),transform 0.3s cubic-bezier(0.4,0,0.2,1);
}

.feature.is-active {
  background:var(--ink);
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  height:17.7776rem;
  padding:3.3333rem 0;
  gap:3.44441rem;
}

.feature.is-active .feature__btn {
  height:2.2222rem;
  padding:0 2.77775rem;
  cursor:default;
}

.feature.is-active .feature__title {
  color:var(--white);
}

.feature.is-active .feature__desc {
  opacity:1;
  transform:translateY(0);
  transition:opacity 0.4s cubic-bezier(0.4,0,0.2,1) 0.15s,transform 0.4s cubic-bezier(0.4,0,0.2,1) 0.15s;
}

.why {
  padding-top:7.7777rem;
}

.why .section-head {
  margin-bottom:1.77776rem;
}

.why__scroll-container { height:auto; }

.why__sticky {
  position:relative;
  top:0;
  height:auto;
  overflow:visible;
}

.why__track {
  display:block;
  outline:none;
  width:100%;
  height:auto;
}

.why__track:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:-2px;
}

.slide {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:100svh;
  height:auto;
  padding-block:5rem;
}

.slide--dark {
  background:var(--ink);
  color:var(--white);
  --dim: var(--white-60);
  --line: var(--white-60);
}

.slide--light {
  background:var(--paper);
  color:var(--ink);
  --dim: var(--ink-70);
  --line: var(--ink-70);
}

.slide .dim {
  color:var(--dim);
}

.skip-btn {
  display:none;
  position:absolute;
  bottom:2.2222rem;
  right:2.2222rem;
  z-index:20;
  padding:0.55555rem 1.33332rem;
  border:1px solid rgba(255,255,255,0.3);
  color:rgba(255,255,255,0.6);
  border-radius:90px;
  background:transparent;
  font-family:var(--f-neue);
  font-size:max(0.88888rem,13px);
  cursor:pointer;
  transition:color 0.4s ease,border-color 0.4s ease;
}

.skip-btn:hover {
  border-color:rgba(255,255,255,0.8);
  color:rgba(255,255,255,1);
}

.why__sticky[data-theme="light"] .skip-btn {
  border-color:rgba(26,26,26,0.3);
  color:rgba(26,26,26,0.6);
}

.why__sticky[data-theme="light"] .skip-btn:hover {
  border-color:rgba(26,26,26,0.8);
  color:rgba(26,26,26,1);
}

.slide__inner {
  width:61.77716rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3.44441rem;
  text-align:center;
}

.slide__inner--narrow .slide__title {
  width:44.444rem;
}

.slide__inner--wide {
  width:57.99942rem;
  gap:3.99996rem;
}

.slide__title {
  font-family:var(--f-neue);
  font-weight:500;
  font-size:5.11106rem;
  line-height:1;
  text-wrap:balance;
}

.slide__note {
  font-family:var(--f-neue);
  font-weight:400;
  font-size:max(1.77776rem,15px);
  line-height:1.2;
  text-transform:capitalize;
}

.pills {
  display:flex;
  align-items:center;
  gap:0.77777rem;
}

.pill {
  display:inline-flex;
  align-items:center;
  gap:0.55555rem;
  padding:0.88888rem 1.44443rem;
  border:0.5px solid var(--line);
  border-radius:90px;
  font-family:var(--f-neue);
  font-size:max(0.88888rem,11px);
  line-height:1.2;
  text-transform:lowercase;
  white-space:nowrap;
}

.pill--caps {
  text-transform:capitalize;
}

.pill__dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
  flex:0 0 auto;
}

.stats {
  display:flex;
  align-items:center;
  gap:5.5555rem;
}

.stat {
  width:15.22207rem;
  text-align:center;
}

.stat__num {
  font-family:var(--f-neue);
  font-weight:500;
  font-size:2.88886rem;
  line-height:1;
  color:var(--ink);
}

.stat__label {
  font-family:var(--f-display);
  font-weight:500;
  font-size:max(1.77776rem,14px);
  line-height:1.47;
  color:var(--ink-70);
}

.stat__divider {
  width:1px;
  height:7.66659rem;
  background:var(--ink-40);
}

.collection {
  padding-top:7.7777rem;
}

.collection .section-head {
  margin-bottom:1.77776rem;
}

.carousel {
  position:relative;
  height:37.88851rem;
}

.carousel__stage {
  position:relative;
  height:100%;
}

.card {
  position:absolute;
  display:flex;
  opacity:0;
  visibility:hidden;
  background:var(--paper);
  border:1px solid var(--ink-20);
  overflow:hidden;
  border-radius:2.2222rem;
  text-transform:capitalize;
  z-index:0;
  left:50%;
  top:2.527753rem;
  width:48.44396rem;
  height:33.832995rem;
  transform-origin:center center;
  transform:translateX(-50%);
  transition:all 0.6s cubic-bezier(0.4,0,0.2,1);
  box-shadow:none;
}

.card[data-pos="center"] {
  top:0;
  width:57.7772rem;
  height:38.8885rem;
  transform:translateX(-50%);
  z-index:3;
  box-shadow:var(--card-shadow);
  opacity:1;
  visibility:visible;
}

.card[data-pos="left"] {
  transform:translateX(calc(-50% - 14.66652rem));
  z-index:1;
  opacity:1;
  visibility:visible;
}

.card[data-pos="right"] {
  transform:translateX(calc(-50% + 14.66652rem));
  z-index:1;
  opacity:1;
  visibility:visible;
}

.card[data-pos="out-left"] {
  transform:translateX(calc(-50% - 35.5552rem));
  opacity:0;
  visibility:hidden;
}

.card[data-pos="out-right"] {
  transform:translateX(calc(-50% + 35.5552rem));
  opacity:0;
  visibility:hidden;
}

.card__media {
  flex:0 0 auto;
  height:100%;
  overflow:hidden;
  border-radius:2.2222rem;
  width:25.66641rem;
  transition:width 0.6s cubic-bezier(0.4,0,0.2,1);
}

.card[data-pos="center"] .card__media {
  width:30.66636rem;
}

.card__media picture,
.card__media img {
  width:100%;
  height:100%;
}

.card__media img {
  object-fit:cover;
}

.card__body {
  display:flex;
  flex-direction:column;
  min-width:0;
  margin-left:1.1111rem;
  padding-top:1.944425rem;
  width:20.11091rem;
  gap:1.44443rem;
  transition:all 0.6s cubic-bezier(0.4,0,0.2,1);
}

.card[data-pos="center"] .card__body {
  margin-left:1.33332rem;
  padding-top:2.33331rem;
  width:23.99976rem;
  gap:1.77776rem;
}

.card__head {
  display:flex;
  flex-direction:column;
  width:100%;
  gap:1.33332rem;
  transition:gap 0.6s cubic-bezier(0.4,0,0.2,1);
}

.card__name,
.card__price {
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:17.7776rem;
  gap:0.44444rem;
  transition:gap 0.6s cubic-bezier(0.4,0,0.2,1);
}

.card__name h3 {
  font-family:var(--f-neue);
  font-weight:400;
  color:var(--ink);
  line-height:1.2;
  font-size:1.33332rem;
  transition:font-size 0.6s cubic-bezier(0.4,0,0.2,1);
}

.card[data-pos="center"] .card__name h3 {
  font-size:1.77776rem;
}

.card__name p,
.card__price p:last-child {
  font-family:var(--f-display);
  color:var(--ink-70);
  line-height:1.4;
  font-size:max(0.88888rem,10px);
  transition:font-size 0.6s cubic-bezier(0.4,0,0.2,1);
}

.card[data-pos="center"] .card__name p,
.card[data-pos="center"] .card__price p:last-child {
  font-size:max(1.1111rem,12px);
}

.card__amount {
  font-family:var(--f-neue);
  font-weight:400;
  color:var(--ink);
  line-height:1.2;
  font-size:1.1111rem;
  transition:font-size 0.6s cubic-bezier(0.4,0,0.2,1);
}

.card[data-pos="center"] .card__amount {
  font-size:1.55554rem;
}

.card__rule {
  width:100%;
  margin:0;
  border:0;
  border-top:1px solid var(--ink-40);
}

.specs {
  list-style:none;
  display:flex;
  flex-direction:column;
  width:100%;
  gap:0.44444rem;
}

.spec {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.22222rem 0;
  font-family:var(--f-display);
  font-weight:400;
  color:var(--ink-70);
  white-space:nowrap;
  font-size:max(0.66666rem,10px);
  line-height:1.42;
  transition:font-size 0.6s cubic-bezier(0.4,0,0.2,1);
}

.card[data-pos="center"] .spec {
  font-size:max(0.88888rem,11px);
  line-height:1.375;
}

.spec.is-no {
  color:var(--ink-40);
}

.spec>span {
  position:relative;
  display:inline-block;
  padding-left:0.99999rem;
  transition:padding 0.6s cubic-bezier(0.4,0,0.2,1);
}

.spec>span::before {
  content:"•";
  position:absolute;
  left:0;
  top:0;
}

.card[data-pos="center"] .spec>span {
  padding-left:1.33332rem;
}

.spec>i {
  width:0.88888rem;
  height:0.88888rem;
  flex:0 0 auto;
  background-repeat:no-repeat;
  background-position:center;
  background-size:0.833325rem auto;
}

.spec.is-yes>i {
  background-image:url(../assets/img/check.svg);
}

.spec.is-no>i {
  background-image:url(../assets/img/minus.svg);
}

.carousel__arrow {
  position:absolute;
  z-index:4;
  width:3.944405rem;
  height:3.944405rem;
  min-width:44px;
  min-height:44px;
  border-radius:50%;
  border:0;
  background:var(--ink-40);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}

.carousel__arrow:hover {
  background:rgba(17,17,17,0.55);
}

.carousel__arrow img {
  width:1.33332rem;
  height:1.33332rem;
}

.carousel__arrow--prev {
  left:0;
  top:16.22206rem;
}

.carousel__arrow--prev img {
  transform:rotate(180deg);
}

.carousel__arrow--next {
  right:0;
  top:16.33317rem;
}

.contact {
  margin-top:11.111rem;
  background:var(--paper);
  padding:4.4444rem 0;
}

.contact__inner {
  align-items:flex-start;
  justify-content:space-between;
  display:grid;
  grid-template-columns:minmax(0,530.66fr) minmax(0,515.55fr);
  column-gap:3.5rem;
}

.contact__copy {
  display:flex;
  flex-direction:column;
  gap:3.88885rem;
  width:100%;
  min-width:0;
}

.contact__title {
  font-family:var(--f-neue);
  font-weight:500;
  font-size:5.11106rem;
  line-height:1;
  color:var(--ink);
}

.contact__text {
  font-family:var(--f-neue);
  font-weight:400;
  font-size:max(1.77776rem,15px);
  line-height:1.2;
  color:var(--ink-70);
}

.contact__text strong {
  display:block;
  font-weight:500;
  color:var(--ink);
}

.contact__form {
  display:flex;
  flex-direction:column;
  gap:4.55551rem;
  width:100%;
  min-width:0;
}

.contact__fields {
  display:flex;
  flex-direction:column;
  gap:2.2222rem;
}

.field-row {
  gap:1.1111rem;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:100%;
}

.field {
  position:relative;
  display:block;
  padding:0.77777rem 0;
  border-bottom:1px solid var(--ink-40);
  width:100%;
  min-width:0;
}

.field--message {
  width:100%;
  padding-bottom:1.88887rem;
}

.field input,
.field textarea {
  display:block;
  width:100%;
  padding:0;
  margin:0;
  border:0;
  outline:none;
  background:transparent;
  font-family:var(--f-neue);
  font-weight:500;
  font-size:max(1.1111rem,14px);
  line-height:1.77776rem;
  color:var(--ink);
  resize:none;
  border-radius:0;
}

.field input::placeholder,
.field textarea::placeholder {
  color:var(--ink-70);
  opacity:1;
}

.field:focus-within {
  border-bottom-color:var(--ink);
}

.field.is-invalid {
  border-bottom-color:#c0392b;
}

.field__error {
  position:absolute;
  left:0;
  top:100%;
  margin-top:0.33333rem;
  font-size:max(0.66666rem,11px);
  line-height:1.2;
  color:#c0392b;
  display:none;
}

.field.is-invalid .field__error {
  display:block;
}

.field--hp {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.submit {
  width:100%;
  height:3.22219rem;
  min-height:44px;
  border:0;
  border-radius:110px;
  background:var(--ink);
  color:var(--white);
  font-family:var(--f-display);
  font-weight:500;
  font-size:max(0.88888rem,13px);
  cursor:pointer;
}

.submit:hover {
  background:#000;
}

.contact__status {
  display:none;
  font-size:max(0.88888rem,13px);
  color:var(--ink-70);
  margin-top:-3.11108rem;
}

.contact__status.is-visible {
  display:block;
}

.contact__challenge { width:100%; max-width:100%; }
.contact__challenge[hidden] { display:none; }
.submit:disabled { cursor:wait; opacity:.65; }

.footer {
  position:relative;
  background:var(--ink);
  color:var(--white);
  overflow:hidden;
  height:auto;
  min-height:28.610825rem;
}



.footer__inner {
  position:relative;
  padding-top:4.4444rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2.66664rem;
}

.footer__top {
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}

.footer__brand {
  width:27.11084rem;
  display:flex;
  flex-direction:column;
  gap:3.3333rem;
}

.logo {
  display:flex;
  align-items:flex-start;
  gap:1.177766rem;
}

.logo__mark {
  width:5.438523rem;
  height:5.438523rem;
}

.logo__word {
  display:flex;
  flex-direction:column;
  margin-top:0.11111rem;
  font-family:var(--f-display);
  font-size:2.55553rem;
  line-height:2.55553rem;
  color:var(--white);
}

.logo__word strong {
  font-weight:700;
}

.logo__word span {
  font-weight:400;
}

.footer__tagline {
  font-family:var(--f-neue);
  font-weight:400;
  font-size:max(1.77776rem,15px);
  line-height:1.2;
  text-transform:capitalize;
}

.footer__cols {
  display:flex;
  gap:13.388755rem;
}

.footer__col {
  width:4.88884rem;
  display:flex;
  flex-direction:column;
}

.footer__col h3 {
  font-family:var(--f-neue);
  font-weight:500;
  font-size:max(1.1111rem,13px);
  line-height:1.2;
  color:var(--white);
  margin-bottom:1.77776rem;
}

.footer__col a {
  font-family:var(--f-neue);
  font-weight:400;
  font-size:max(0.88888rem,12px);
  line-height:1.2;
  color:var(--white-60);
}

.footer__col a:hover {
  color:var(--white);
}

.footer__col a+a {
  margin-top:1.33332rem;
}

.footer__rule {
  width:100%;
  margin:0.55555rem 0 0;
  border:0;
  border-top:1px solid var(--white-20);
}

.footer__copy {
  font-family:var(--f-neue);
  font-size:max(0.77777rem,11px);
  line-height:1.2;
  color:var(--white-60);
  text-align:left;
}




/* One desktop artboard, with layout containment separate from animation. */
.hero__viewport,
.topbar__frame {
  width: 100%;
  max-width: 1897px;
  margin-inline: auto;
  container-type: inline-size;
}
.hero__viewport {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  aspect-ratio: 1264.666667 / 585.333333;
}
.hero__inner,
.topbar__inner {
  --scene-unit: calc(100cqw / 1264.666667);
}
/* Clip at the viewport pane, not the capped artboard: on ultrawide displays
   the rock's existing rounded silhouette can extend beyond the design frame. */
.hero__inner { overflow: visible; }
.hero__clouds { display: none; }
.hero__eyebrow::before { flex-shrink: 0; }
.hero__proof__marks { flex-shrink: 0; }
.topbar__brand { grid-column: 1; }
.topbar__nav { grid-column: 2; }
.topbar__frame { position: relative; z-index: 4; }
.feature__btn { min-width: 0; }
.contact__fields { min-width: 0; }
.footer__inner { padding-bottom: 2rem; }
.collection-shell { overflow-x: clip; }

/* Extend only the atmosphere beyond the capped artboard. The product and
   copy keep their shared scale, while wide screens have no hard fog edges. */
@container (width > 1897px) {
  .hero__sticky::before,
  .hero__sticky::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: calc((100% - 1897px) / 2 + 80px);
    height: 100px;
    background-image: linear-gradient(to top, white, transparent 70%), var(--fog-img);
    background-size: 100% 100%, auto 100%;
    background-position: center bottom;
    pointer-events: none;
    z-index: 4;
  }
  .hero__sticky::before { left: 0; mask-image: linear-gradient(to right, black calc(100% - 80px), transparent); }
  .hero__sticky::after { right: 0; mask-image: linear-gradient(to left, black calc(100% - 80px), transparent); }
}

/* The desktop poster becomes a normal document flow on smaller screens.
   Copy and artwork have separate rows, so browser zoom cannot make them collide. */
@media (width < 1100px) {
  body { font-size: 1rem; }
  html { scroll-padding-top: calc(var(--mobile-header-height, 64px + env(safe-area-inset-top)) + 12px); scrollbar-gutter: stable; }
  .topbar { --scene-unit: 1px; }
  .topbar__inner {
    --scene-unit: 1px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    min-height: calc(64px + env(safe-area-inset-top));
    height: auto;
    padding: calc(10px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left));
    gap: 8px 12px;
  }
  .topbar__brand { min-height: 44px; flex: 1 1 90px; max-width: 108px; }
  .topbar__logo { width: 108px; height: auto; transform: none; }
  .topbar__nav { display: none; }
  .topbar__mobile-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; max-width: 100%; }
  .topbar__contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-inline: 15px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    font: 500 .8125rem/1.2 var(--f-now-text);
    text-align: center;
    color: white;
    transition: color .35s ease, border-color .35s ease, background .2s ease;
  }
  .topbar[data-theme="light"] .topbar__contact { color: var(--ink); border-color: rgba(17, 17, 17, .3); }
  .topbar__contact:hover { background: rgba(255, 255, 255, .12); }
  .hero { height: auto; container-type: normal; }
  .hero__sticky { position: relative; height: auto; min-height: 100svh; }
  .hero__viewport {
    position: relative;
    inset: auto;
    translate: none;
    aspect-ratio: auto;
    max-width: 720px;
    container-type: normal;
  }
  .hero__inner {
    --scene-unit: 1px;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100svh;
    padding: calc(var(--mobile-header-height, 64px + env(safe-area-inset-top)) + 40px) 20px 0;
    font-size: 1rem;
    overflow: visible;
  }
  .hero__content {
    position: relative;
    order: 1;
    width: 100%;
    max-width: 600px;
    margin: 0;
    align-self: center;
    animation-name: fadeUp;
  }
  .hero__eyebrow { font-size: 10px; }
  .hero__title-main { font-size: 3.8rem; line-height: .9; }
  .hero__title-script { font-size: 4.2rem; margin-top: -1.4rem; margin-left: 0; }
  .hero__sub { max-width: 100%; font-size: 1.125rem; line-height: 1.4; margin-top: 1.125rem; }
  .hero__price { flex-wrap: wrap; gap: .5rem; font-size: .8125rem; }
  .hero__cta { width: 16rem; max-width: 100%; height: auto; min-height: 48px; padding-block: 12px; margin-top: 1.25rem; }
  .hero__cta__labels { font-size: .9375rem; }
  .hero__price__lead { display: none; }
  .hero__price > i:first-of-type { display: none; }
  .hero__cta__labels { height: auto; min-height: 22px; line-height: 1.4; white-space: normal; }
  .hero__cta__label { flex-wrap: wrap; }
  .hero__proof { max-width: 100%; flex-wrap: wrap; gap: 12px 20px; }
  .hero__proof__marks { max-width: 100%; gap: clamp(12px, 3vw, 24px); }
  .hero__toilet {
    position: relative;
    order: 2;
    inset: auto;
    width: min(135%, 720px);
    height: auto;
    aspect-ratio: 3 / 2;
    flex-shrink: 0;
    align-self: center;
    margin: 24px 0 -72px;
    animation-name: fadeUp;
  }
  .hero__clouds {
    display: block;
    position: absolute;
    bottom: -2px;
    left: 50%;
    translate: -50% 0;
    width: max(100%, 720px);
    height: 120px;
    z-index: 6;
    pointer-events: none;
    opacity: .75;
  }
  .hero__clouds img { width: 100%; height: 100%; object-fit: cover; }
  .hero__mist, .hero__mist-behind, .hero__fog-overlay { display: none; }
  .hamburger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    gap: 5px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: white;
    cursor: pointer;
    z-index: 101;
    transition: transform 140ms ease, background 140ms ease, color .35s ease;
  }
  .hamburger:active { transform: scale(.94); background: rgba(127,127,127,.12); }
  .hamburger span { display: block; width: 21px; height: 2px; border-radius: 2px; background: currentColor; transform-origin: center; transition: translate 120ms cubic-bezier(.4,0,.2,1) 160ms, rotate 160ms cubic-bezier(.4,0,.2,1), opacity 100ms ease, scale 160ms ease; }
  .topbar[data-theme="light"] .hamburger { color: var(--ink); }
  .hamburger[aria-expanded="true"] span { transition: translate 120ms cubic-bezier(.4,0,.2,1), rotate 220ms cubic-bezier(.22,.8,.22,1) 90ms, opacity 100ms ease, scale 160ms ease; }
  .hamburger[aria-expanded="true"] span:nth-child(1) { translate: 0 7px; rotate: 45deg; }
  .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; scale: .35 1; }
  .hamburger[aria-expanded="true"] span:nth-child(3) { translate: 0 -7px; rotate: -45deg; }

  /* Small-screen sections: one resolved cascade. */
  .container {
    width:100%;
    padding:0 1.25rem;
    max-width:45rem;
  }

  .mobile-menu {
    position:fixed;
    inset:0;
    z-index:99;
    background:var(--ink);
    padding:calc(var(--mobile-header-height, 64px + env(safe-area-inset-top)) + 32px) 1.25rem calc(2rem + env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    /* A circular reveal grows from the icon; the lettering never scales. */
    clip-path: circle(0px at var(--menu-x, calc(100% - 42px)) var(--menu-y, 32px));
    transition: clip-path 380ms cubic-bezier(.22,.8,.22,1);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }

  .mobile-menu.is-open { clip-path: circle(var(--menu-radius, 150vmax) at var(--menu-x, calc(100% - 42px)) var(--menu-y, 32px)); }
  .mobile-menu.is-closing { transition-duration: 280ms; transition-timing-function: cubic-bezier(.4,0,.65,1); }
  .mobile-menu[hidden] {
    display:none;
    pointer-events:none;
  }

  .mobile-menu__nav {
    display:flex;
    flex-direction:column;
    gap:1.5rem;
  }

  .mobile-menu__nav a {
    font-family:var(--f-neue);
    font-weight:500;
    font-size:2.5rem;
    line-height:1;
    color:var(--white);
    padding:0.25rem 0;
    opacity:0;
    transform:translate3d(0,10px,0);
    transition:opacity 110ms ease,transform 180ms cubic-bezier(.4,0,.65,1);
  }
  .mobile-menu__nav a:nth-child(1) { --menu-item: 0; }
  .mobile-menu__nav a:nth-child(2) { --menu-item: 1; }
  .mobile-menu__nav a:nth-child(3) { --menu-item: 2; }
  .mobile-menu__nav a:nth-child(4) { --menu-item: 3; }
  .mobile-menu__nav a:nth-child(5) { --menu-item: 4; }
  .mobile-menu.is-open .mobile-menu__nav a { opacity:1; transform:translate3d(0,0,0); transition-duration:220ms; transition-timing-function:cubic-bezier(.22,.8,.22,1); transition-delay:calc(70ms + var(--menu-item, 0) * 18ms); }

  .mobile-menu__foot {
    font-size:0.75rem;
    color:var(--white-60);
    padding-top:2rem;
    opacity:0;
    transition:opacity 110ms ease;
  }
  .mobile-menu.is-open .mobile-menu__foot { opacity:1; transition:opacity 220ms ease 120ms; }

  .section-head {
    display:block;
    height:auto;
    width:100%;
    max-width:45rem;
    margin:0 auto;
  }

  .section-head__title {
    font-size:2.25rem;
    white-space:normal;
    margin:0;
    padding:0;
    line-height:1.1;
  }

  .section-head__sub {
    line-height:1.5;
    font-size:1rem;
    white-space:normal;
    margin-top:12px;
    max-width:none;
    padding:0;
  }

  .features {
    padding-top:0;
  }

  .features .section-head {
    margin-bottom:2rem;
    display:block;
    height:auto;
    padding:0 20px;
    margin:0 auto;
    width:100%;
    max-width:45rem;
  }

  .features__body {
    max-width:45rem;
    display:flex;
    flex-direction:column;
    margin-top:32px;
    width:100%;
    gap:0;
    margin-inline:auto;
  }

  .features__media {
    width:100%;
    height:50svh;
    max-height:50svh;
    flex:0 0 auto;
    position:sticky;
    top:3.5rem;
    z-index:10;
  }

  .features__list {
    flex:1 1 auto;
    z-index:1;
    position:relative;
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:none;
    margin:0 auto;
    background:#ffffff;
    height:auto;
    overflow:visible;
    padding:0;
    gap:0;
    scroll-snap-type:none;
    overscroll-behavior:auto;
  }

  .feature__btn {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    height:auto;
    padding:0 20px 0 0;
    margin:0;
    background:none;
    color:inherit;
    flex:0 0 auto;
    border:none;
    min-height:104px;
  }

  .feature__title {
    font-size:clamp(1.375rem,4.5vw,1.75rem);
    font-weight:500;
    line-height:1.2;
    font-family:var(--f-neue);
    margin:0;
    padding:0;
    text-align:left;
    white-space:normal;
  }

  .feature:last-child {
    border-bottom:0;
  }

  .feature__icon {
    display:block;
    position:relative;
    width:24px;
    height:24px;
    flex:0 0 24px;
    margin-left:16px;
    background:var(--ink);
    -webkit-mask:url(../assets/img/plus.svg)center/contain no-repeat;
    mask:url(../assets/img/plus.svg)center/contain no-repeat;
  }

  .feature.is-active {
    padding:3.125rem 0;
    gap:2rem;
    border-top:0;
    border-bottom:0;
    height:auto;
    min-height:0;
    background:var(--ink);
    border-bottom-color:var(--ink);
    color:var(--white);
    justify-content:flex-start;
    padding-top:0;
    padding-bottom:24px;
    overflow:hidden;
  }

  .feature.is-active .feature__btn {
    width:100%;
    height:1.75rem;
    padding:0 1.25rem;
  }

  .feature.is-active .feature__icon {
    -webkit-mask-image:url(../assets/img/minus.svg);
    mask-image:url(../assets/img/minus.svg);
    -webkit-mask-size:1.25rem auto;
    mask-size:1.25rem auto;
    background:var(--white);
    -webkit-mask:url(../assets/img/minus.svg)center/contain no-repeat;
    mask:url(../assets/img/minus.svg)center/contain no-repeat;
  }

  .feature.is-active .feature__desc {
    width:100%;
    padding:0 1.25rem;
    font-size:1rem;
    line-height:1.5;
    display:block;
  }

  .why {
    padding-top:5rem;
    overflow-x:clip;
  }

  .why .section-head {
    margin-bottom:2rem;
  }

  .why__track {
    position:relative;
    width:100%;
    height:auto;
    display:grid;
    transform:none;
    overflow:visible;
    padding:0;
    margin:0;
  }

  .slide {
    width:100%;
    height:auto;
    padding:5rem 1.25rem;
    min-height:100svh;
  }

  .slide__inner {
    width:100%;
    max-width:40rem;
    gap:4.5rem;
  }

  .slide__inner--wide {
    width:100%;
    max-width:40rem;
    gap:4.5rem;
  }

  .slide__inner--narrow .slide__title {
    width:100%;
  }

  .slide__title {
    line-height:1;
    font-size:clamp(2rem,9vw,3.25rem);
  }

  .slide__note {
    font-size:1rem;
    width:17.125rem;
  }

  .slide__note--wide {
    width:19.5rem;
  }

  .pills {
    gap:0.5rem;
    flex-wrap:wrap;
    justify-content:center;
  }

  .pill {
    gap:0.375rem;
    padding:0.75rem 0.875rem;
    font-size:0.75rem;
  }

  .pills--stack-mobile {
    flex-direction:column;
  }

  .stats {
    gap:1.25rem;
  }

  .stat {
    width:9.8125rem;
  }

  .stat__num {
    font-size:2rem;
  }

  .stat__label {
    font-size:1rem;
    line-height:1.5;
  }

  .stat__divider {
    height:4.75rem;
  }

  .collection {
    padding-top:5rem;
  }

  .collection .section-head {
    margin-bottom:2rem;
  }

  .carousel {
    height:auto;
    overflow-x:clip;
  }

  .carousel__stage {
    height:auto;
  }

  .card[data-pos="left"] {
    display:none;
  }

  .card[data-pos="right"] {
    display:none;
  }

  .card {
    margin-left:0;
    transform:none;
  }

  .card[data-pos="center"] {
    position:relative;
    left:0;
    top:0;
    width:100%;
    flex-direction:column;
    border:0;
    border-radius:1.25rem;
    box-shadow:none;
    transform:none;
    height:auto;
    padding-bottom:1.5rem;
  }

  .card[data-pos="center"] .card__media {
    width:100%;
    height:auto;
    aspect-ratio:1/1;
    border-radius:1.25rem;
  }

  .card[data-pos="center"] .card__body {
    margin:0 1rem;
    padding-top:1.25rem;
    width:auto;
    gap:0.875rem;
  }

  .card[data-pos="center"] .card__head {
    gap:0.75rem;
  }

  .card[data-pos="center"] .card__name {
    gap:0.125rem;
  }

  .card[data-pos="center"] .card__price {
    gap:0.125rem;
  }

  .card[data-pos="center"] .card__name h3 {
    font-size:1.5rem;
  }

  .card[data-pos="center"] .card__name p {
    font-size:1rem;
    line-height:1.5;
  }

  .card[data-pos="center"] .card__price p:last-child {
    font-size:1rem;
    line-height:1.5;
  }

  .card[data-pos="center"] .card__amount {
    font-size:1.5rem;
  }

  .card[data-pos="center"] .specs {
    gap:0.25rem;
  }

  .card[data-pos="center"] .spec {
    font-size:0.875rem;
    line-height:1.36;
  }

  .card[data-pos="center"] .spec>span {
    padding-left:1.3125rem;
  }

  .carousel__controls {
    display:flex;
    justify-content:center;
    gap:1.25rem;
    margin-top:1rem;
  }

  .carousel__arrow {
    position:static;
    width:3.25rem;
    height:3.25rem;
  }

  .carousel__arrow img {
    width:1rem;
    height:1rem;
  }

  .contact {
    margin-top:5rem;
    padding:2.5rem 0;
    padding-left:1.25rem;
    padding-right:1.25rem;
    overflow-x:clip;
  }

  .contact__inner {
    flex-direction:column;
    gap:2rem;
    grid-template-columns:minmax(0,1fr);
  }

  .contact__copy {
    width:100%;
    gap:2rem;
  }

  .contact__title {
    font-size:clamp(2.25rem,10vw,3.25rem);
  }

  .contact__text {
    font-size:1.25rem;
  }

  .contact__form {
    width:100%;
    gap:1.5rem;
  }

  .field-row {
    width:100%;
    grid-template-columns:minmax(0,1fr);
  }

  .field {
    width:100%;
  }

  .contact__status {
    margin-top:-1.5rem;
  }

  .footer {
    height:auto;
    padding-bottom:env(safe-area-inset-bottom);
    overflow-x:clip;
    min-height:43rem;
  }



  .footer__inner {
    position:relative;
    z-index:2;
    padding:2.625rem 1.875rem 0;
    align-items:flex-start;
    gap:2rem;
    padding-bottom:calc(2rem + env(safe-area-inset-bottom));
  }

  .footer__top {
    flex-direction:column;
    gap:2rem;
    width:100%;
  }

  .footer__brand {
    width:100%;
    gap:2rem;
  }

  .logo {
    gap:0.59rem;
  }

  .logo__mark {
    width:2.7362rem;
    height:2.7362rem;
  }

  .logo__word {
    font-size:1.285rem;
    line-height:1.285rem;
    margin-top:0.05rem;
  }

  .footer__tagline {
    font-size:1.5rem;
  }

  .footer__cols {
    flex-direction:column;
    gap:2.625rem;
  }

  .footer__col h3 {
    margin-bottom:1.375rem;
  }

  .footer__col a {
    padding:0.25rem 0;
  }

  .footer__col a+a {
    margin-top:0.5rem;
  }

  .footer__rule {
    display:block;
    margin:0 0 1.5rem;
  }

  .footer__copy {
    position:static;
    font-size:0.75rem;
    margin-top:0;
  }


  .footer__bottom {
    padding:0;
    flex-wrap:wrap;
    gap:1rem;
  }

  #technology {
    margin-top:0;
    padding-top:60px;
    padding-bottom:60px;
    position:relative;
    transform:none;
    opacity:1;
    background:#ffffff;
    z-index:10;
    display:block;
    pointer-events:auto;
    overflow-x:clip;
  }

  .features__body>#features-media {
    display:none;
  }

  .feature:not(.is-active)>#features-media {
    display:none;
  }

  .feature.is-active>#features-media {
    position:relative;
    top:auto;
    width:calc(100% + 20px);
    margin-left:-20px;
    height:0;
    padding-bottom:75%;
    max-height:none;
    background:#f0f0f0;
    display:block;
    overflow:hidden;
    opacity:1;
    visibility:visible;
    transform:none;
    z-index:1;
    border-radius:0;
  }

  .features__img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    visibility:hidden;
    z-index:1;
    display:block;
    transition:opacity 0.3s ease;
  }

  .features__img.is-active {
    opacity:1;
    visibility:visible;
    z-index:10;
    display:block;
  }

  .features__img img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transform:none;
    display:block;
  }

  .feature {
    display:flex;
    flex-direction:column;
    width:100%;
    height:auto;
    min-height:104px;
    padding:0 0 0 20px;
    margin:0;
    background:#f0f0f0;
    border-bottom:1px solid #d9d9d9;
    justify-content:center;
    overflow:hidden;
    transition:none;
    scroll-snap-align:none;
    scroll-margin-top:0;
  }

  .feature.is-active>.feature__btn {
    margin-top:20px;
  }

  .feature__icon::before {
    display:none;
  }

  .feature__icon::after {
    display:none;
  }

  .feature__desc {
    display:none;
    font-size:16px;
    font-weight:400;
    line-height:1.5;
    margin:16px 0 0 0;
    padding:0 20px 0 0;
    color:var(--white-80);
    text-align:left;
  }

  .why__scroll-container {
    height:auto;
    position:relative;
    overflow:visible;
    overflow-x:clip;
  }

  .why__sticky {
    position:relative;
    top:0;
    height:auto;
    overflow:visible;
  }

  .why__sticky .skip-btn {
    display:none;
  }

  .why__track .slide {
    position:relative;
    top:0;
    left:0;
    width:100%;
    height:auto;
    display:flex;
    overflow:hidden;
    will-change:auto;
    transform:none;
    inset:auto;
    min-height:100svh;
  }

  .support {
    overflow-x:clip;
  }

  .feature.is-active>.feature__btn {
    min-height:0;
  }

  .feature.is-active>#features-media {
    aspect-ratio:4/3;
    height:auto;
    padding-bottom:0;
  }
}

/* Tablet uses the flowing layout with a wider reading measure. */
@media (min-width: 1100px) and (width < 1200px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .section-head__sub { white-space: normal; max-width: 100%; }
}

@media (min-width: 600px) and (width < 1100px) {
  .hero__title-main { font-size: 4.5rem; }
  .hero__title-script { font-size: 5rem; }
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__top { flex-direction: row; gap: 2rem; }
  .footer__cols { flex-direction: row; gap: 3rem; }
}

/* Phone composition: short centered copy, then a bottom-anchored product.
   Intrinsic content height wins over the viewport when text is enlarged. */
@media (width < 600px) {
  .hero__inner {
    padding: calc(var(--mobile-header-height, 64px + env(safe-area-inset-top)) + clamp(18px, 4svh, 34px)) 20px 0;
    min-height: 100svh;
  }
  /* Reserve room for the independently anchored product. The smaller top gap
     brings the CTA and reassurance 18px closer on tall phones, in normal flow.
     Enlarged text can still grow the stage; short phones retain their spacing. */
  .hero__inner::before { content: ""; order: 2; flex-shrink: 0; align-self: center; width: min(135%, 720px); aspect-ratio: 3 / 2; box-sizing: content-box; padding-top: 2px; margin-bottom: clamp(-72px, calc(100svh - 800px), 0px); }
  /* Original mobile floor fade from main (Ritesh's 05d511e / 01e5340).
     It sits behind the rock, so its surface detail is not washed out. */
  .hero__inner::after { content: ""; position: absolute; inset: auto 0 0; height: calc(5 * clamp(13px, 4.1026vw, 18px)); background: linear-gradient(to bottom, transparent, white); pointer-events: none; z-index: 4; }
  .hero__content { max-width: 340px; flex: 1 0 auto; align-items: center; text-align: center; animation: none; }
  .hero__eyebrow, .hero__sub-bidet { display: none; }
  .hero__title { order: 1; margin-top: 0; align-items: center; transform: translate3d(0,0,0); will-change: transform, opacity; }
  .hero__title-main, .hero__title-script { animation: none; }
  .hero__title-main { font-size: min(clamp(3.75rem, 18vw, 4.5rem), 26vw); line-height: .95; }
  .hero__title-script { font-size: min(clamp(4rem, 20vw, 5rem), 28vw); line-height: 1; margin: -.34em 0 0; opacity: .70; }
  .hero__sub { order: 2; margin-top: 16px; font-size: 1rem; line-height: 1.375; color: white; animation: none; }
  .hero__sub-origin { display: block; }
  .hero__cta { order: 5; flex-shrink: 0; width: min(232px, 100%); height: auto; min-height: 48px; margin-top: 8px; padding: 8px 10px 8px 20px; gap: 10px; border: 1px solid rgba(255,255,255,.8); background: #fbfdff; color: #182c40; box-shadow: 0 3px 12px rgba(20,58,92,.12), inset 0 1px 0 white; transition: transform 140ms ease-out, box-shadow 140ms ease-out, background 140ms ease-out; }
  .hero__cta__labels { font-size: .8125rem; height: auto; min-height: 22px; line-height: 1.4; white-space: normal; }
  .hero__cta__label { flex-wrap: wrap; }
  .hero__cta__label--price strong { font-size: .9375rem; }
  .hero__cta__arrow { width: 28px; height: 28px; border-radius: 50%; background: #111; color: white; box-shadow: none; }
  .hero__cta__arrow svg { width: 14px; height: 14px; }
  .hero__price { order: 4; justify-content: center; margin-top: auto; padding-top: 24px; gap: 8px; font-size: .75rem; line-height: 1.4; color: white; }
  /* Copy main's 135vw product, -5% bottom and 140vw centered cloud image.
     The product crop sits below the stage; no image mask or synthetic puffs. */
  .hero__toilet { position: absolute; inset: auto; left: 50%; bottom: -5%; width: 135vw; max-width: none; height: auto; aspect-ratio: auto; margin: 0; padding: 0; transform: translateX(-50%); z-index: 5; animation: none; }
  .hero__toilet img { mask-image: none; }
  .hero__clouds { display: block; left: 50%; right: auto; top: auto; bottom: -2px; width: 140vw; height: auto; translate: -50% 0; opacity: .75; z-index: 6; animation: none; }
  .hero__mist, .hero__mist-behind { display: none; }
  .hero__cloud-entrance, .hero__cloud-wind, .hero__cloud-shape { animation: none; }
  /* Phone actions keep the price visible for hover, keyboard, and touch. */
  .hero__cta:hover { box-shadow: 0 3px 12px rgba(20,58,92,.12), inset 0 1px 0 white; }
  .hero__cta:is(:hover, :focus-visible) .hero__cta__fill { transform: translate3d(-104%,0,0); }
  .hero__cta:is(:hover, :focus-visible) .hero__cta__label--price { opacity: 1; transform: none; color: var(--ink); }
  .hero__cta:is(:hover, :focus-visible) .hero__cta__label--explore { opacity: 0; transform: translate3d(0,120%,0); }
  .hero__cta:is(:hover, :focus-visible) .hero__cta__arrow { color: white; background: #111; transform: none; }
  .hero__cta:active { transform: scale(.98); background: #f0f6fc; box-shadow: 0 1px 4px rgba(20,58,92,.12); }
  .hero__cta:active .hero__cta__arrow { background: #292929; color: white; }
}

/* A single mobile loading narrative: title, signature, promise, reassurance,
   action. Font readiness starts every layer together; geometry stays still. */
@media (width <600px), (width <1100px) and (aspect-ratio <4/3), (width <1100px) and (hover:none), (width <1100px) and (pointer:coarse), (width <1100px) and (pointer:none) {
  .hero__proof { display:none; }
  .hero__content, .hero__toilet { animation:none; }
  .hero__toilet { --hero-product-x:0%; }
  .hero__title-script { --hero-final-opacity:.5; }
  [data-phone-title="pending"] :is(.hero__eyebrow,.hero__title-main,.hero__title-script,.hero__sub,.hero__price,.hero__cta,.hero__toilet) { opacity:0; }
  [data-phone-title="reveal"] .hero:not(.hero--entered) :is(.hero__eyebrow,.hero__title-main,.hero__title-script,.hero__sub,.hero__price,.hero__cta) {
    animation:heroNarrative 900ms cubic-bezier(.22,1,.36,1) var(--hero-delay,0ms) both;
  }
  .hero__eyebrow { --hero-rise:10px; }
  .hero__title-main { --hero-rise:24px; --hero-delay:40ms; }
  .hero__title-script { --hero-rise:14px; --hero-delay:180ms; }
  .hero__sub { --hero-rise:16px; --hero-delay:340ms; }
  .hero__price { --hero-rise:12px; --hero-delay:480ms; }
  .hero__cta { --hero-rise:12px; --hero-delay:620ms; }
  [data-phone-title="reveal"] .hero:not(.hero--entered) .hero__toilet { animation:heroProductNarrative 1100ms cubic-bezier(.2,.8,.2,1) 120ms both; }
  .hero--entered :is(.hero__title-main,.hero__title-script,.hero__sub,.hero__price,.hero__cta,.hero__toilet) { animation:none; }
}
@media (width <600px) {
  .hero__toilet { --hero-product-x:-50%; }
  .hero__title-script { --hero-final-opacity:.7; }
}
@keyframes heroNarrative {
  from { opacity:0; transform:translate3d(0,var(--hero-rise,16px),0); }
  to { opacity:var(--hero-final-opacity,1); transform:translate3d(0,0,0); }
}
@keyframes heroProductNarrative {
  from { transform:translateX(var(--hero-product-x)) translateY(clamp(80px,14svh,120px)); opacity:0; }
  to { transform:translateX(var(--hero-product-x)) translateY(0); opacity:1; }
}

/* Keep all content in view on short portrait phones without shrinking body text. */
@media (width < 600px) and (height < 700px) {
  .hero__inner { padding-top: calc(var(--mobile-header-height, 64px + env(safe-area-inset-top)) + 14px); }
  .hero__title-main { font-size: min(3.75rem, 26vw); }
  .hero__title-script { font-size: min(4rem, 28vw); }
  .hero__sub { margin-top: 12px; }
  .hero__cta { min-height: 44px; padding-block: 6px; }
  .hero__price { padding-top: 16px; }
  .hero__inner::before { padding-top: 12px; margin-bottom: -40px; }
}

/* On the shortest phones, recover space from gaps so the toilet's base and
   a strip of rock stay above the mist. Body copy and touch targets keep size. */
@media (width < 600px) and (height < 600px) {
  .hero__inner { padding-top: calc(var(--mobile-header-height, 64px + env(safe-area-inset-top)) + 8px); }
  .hero__sub { margin-top: 8px; }
  .hero__price { padding-top: 8px; }
  .hero__cta { margin-top: 4px; }
  .hero__inner::before { padding-top: 10px; }
}

/* Touch activation follows the link immediately; the price never needs hover. */
@media (width < 1100px) and (hover: none) {
  .hero__cta:hover .hero__cta__fill { transform: translate3d(-104%, 0, 0); }
  .hero__cta:hover .hero__cta__label--price { opacity: 1; transform: none; color: var(--ink); }
  .hero__cta:hover .hero__cta__label--explore { opacity: 0; transform: translate3d(0, 120%, 0); }
  .hero__cta:hover .hero__cta__arrow { color: var(--ink); transform: none; }
}

/* Very short desktop windows keep the whole poster reachable by ordinary
   scrolling, instead of pinning a clipped viewport over its controls. */
@media (min-width: 1100px) and (min-aspect-ratio: 11 / 5) {
  .hero { height: auto; }
  .hero__sticky { position: relative; height: min(46.283606cqw, 878px); }
  .hero__fog-overlay { display: none; }
  #technology { margin-top: 0; padding-top: 7.7777rem; transform: none; opacity: 1; }
}

/* A short window must also allow the larger Why section headings to scroll. */
@media (max-height: 520px), (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero__sticky { position: relative; }
  .hero__fog-overlay { display: none; }
  #technology { margin-top: 0; padding-top: 3.75rem; transform: none; opacity: 1; }
  .why__scroll-container { height: auto; }
  .why__sticky { position: relative; height: auto; overflow: visible; }
  .why__track { display: block; width: 100%; height: auto; transform: none; }
  .why__track .slide { position: relative; width: 100%; height: auto; min-height: 100svh; padding-block: 5rem; transform: none; }
  .why__sticky .skip-btn { display: none; }
}


/* Motion preferences do not change the composition. */
@media (prefers-reduced-motion:reduce) {
  .hamburger, .hamburger span, .mobile-menu, .mobile-menu__nav a, .mobile-menu__foot { transition: none!important; }
  .hamburger:active { transform: none; }
  .mobile-menu__nav a { transform: none; }
  .hero__title-main,
  .hero__title-script,
  .hero__sub,
  .hero__proof,
  .hero__cta__arrow svg {
    animation: none!important;
  }
  .hero__cta:active { transform: none; }
  .hero__content,
  .hero__toilet,
  .hero__clouds,
  .hero__mist,
  .hero__mist-behind {
    animation:none!important;
    transform:none!important;
  }

  .hero__content,
  .hero__toilet,
  .hero__mist,
  .hero__mist-behind {
    opacity:1!important;
  }

  .hero__clouds {
    opacity:0.6!important;
  }

  .hero__cloud-entrance {
    animation:none;
  }

  .hero__cloud-wind,
  .hero__cloud-shape {
    animation-play-state:paused!important;
  }

  .hero__cta,
  .hero__cta__fill,
  .hero__cta__label,
  .hero__cta__arrow {
    transition:none!important;
  }

  *,
  *::before,
  *::after {
    animation-duration:0.01ms!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
}

@media (width < 600px) and (prefers-reduced-motion: reduce) {
  .hero__title { animation: none!important; opacity: 1!important; }
  .hero__toilet { transform: translateX(-50%)!important; }
  .hero__clouds { opacity: .75!important; }
}

@media (width < 600px) and (hover: none) {
  .hero__cta:hover .hero__cta__arrow { color: white; background: #111; }
  .hero__cta:active .hero__cta__arrow { background: #292929; }
}


/* Cloud to Clarity: the feathered edge belongs to the white section itself.
   Layout remains usable without JavaScript. Phone and desktop share the grade. */
@media (min-width:1100px) {
  .hero { height:auto; }
  .hero__sticky { position:relative; }
  .hero__fog-overlay { display:none; }
  #technology {
    margin-top:0;
    padding-top:clamp(64px,10svh,112px);
    background:#fff;
    transform:none;
    opacity:1;
    will-change:auto;
    display:flow-root;
  }
}
@media (min-width:1100px) and (min-height:521px) and (max-aspect-ratio:11/5) and (prefers-reduced-motion:no-preference) {
  .hero { height:180svh; --clarity-enabled:1; }
  .hero__sticky {
    position:sticky;
    top:0;
    height:100svh;
    /* Grade the outgoing scene as one image, including its cloud artwork.
       The incoming section lives outside this surface and keeps its light. */
    filter:var(--clarity-grade,none);
  }
}
/* Keep the intrinsic mobile scene: larger text and tablet artwork can make it
   taller than a screen. Scroll that extra height before pinning its lower edge.
   The measured scene supplies the runway without clipping intrinsic content. */
@media (width < 1100px) and (min-height:521px) and (prefers-reduced-motion:no-preference) {
  .hero { height:calc(var(--clarity-scene-height,100svh) + 80svh); --clarity-enabled:1; }
  .hero__sticky {
    position:sticky;
    top:min(0px,calc(100svh - var(--clarity-scene-height,100svh)));
    height:auto;
    filter:var(--clarity-grade,none);
  }
  #technology { overflow:visible; display:flow-root; will-change:auto; }
}
@media (min-width:1100px) and (min-height:521px) and (max-aspect-ratio:11/5) and (prefers-reduced-motion:no-preference),
       (width < 1100px) and (min-height:521px) and (prefers-reduced-motion:no-preference) {
  .hero__inner {
    transform:translate3d(0,calc(var(--clarity-p,0) * -4svh),0);
    opacity:var(--clarity-presence,1);
  }
  .hero__bg {
    transform:translate3d(0,calc(var(--clarity-p,0) * -2svh),0) scale(calc(1 + var(--clarity-p,0) * .025));
    filter:brightness(var(--clarity-sky,1));
  }
  #technology {
    margin-top:-80svh;
    --cloud-depth:calc(12svh + var(--clarity-p,0) * 18svh);
    --paper-rgb:var(--clarity-paper,255),var(--clarity-paper,255),var(--clarity-paper,255);
    background:rgb(var(--paper-rgb));
  }
  #technology::before,
  #technology::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:calc(-1 * var(--cloud-depth));
    height:calc(var(--cloud-depth) + 2px);
    pointer-events:none;
  }
  #technology::before {
    background:linear-gradient(to bottom,
      rgba(var(--paper-rgb),0) 0%,rgba(var(--paper-rgb),.015) 8%,
      rgba(var(--paper-rgb),.07) 20%,rgba(var(--paper-rgb),.20) 35%,
      rgba(var(--paper-rgb),.43) 50%,rgba(var(--paper-rgb),.70) 65%,
      rgba(var(--paper-rgb),.90) 80%,rgb(var(--paper-rgb)) 100%);
  }
  #technology::after {
    background:var(--fog-img) center bottom / 100% 100% no-repeat;
    mask-image:linear-gradient(to bottom,transparent,black 38%,black 58%,transparent 100%);
    opacity:calc((1 - var(--clarity-p,0)) * .55);
  }
  #technology .section-head > * {
    opacity:var(--clarity-title,1);
    transform:translate3d(0,calc((1 - var(--clarity-title,1)) * 22px),0);
    transition:none;
  }
  #technology .section-head__sub {
    opacity:var(--clarity-detail,1);
    transform:translate3d(0,calc((1 - var(--clarity-detail,1)) * 16px),0);
  }
}

/* Technology uses the approved 1280 x 585 composition as a proportional
   coordinate system. One unit scales type, spacing and controls together;
   the photo/list still fill the actual remaining browser height. A landscape
   mouse/trackpad window keeps this layout even when OS/browser scaling exposes
   fewer than 1100 CSS pixels. Touch/mobile presentation remains independent. */
@media (min-width:1100px), (min-width:600px) and (min-aspect-ratio:4/3) and (hover:hover) and (pointer:fine) {
  #technology {
    --technology-unit:calc(100vw / 1280);
    --technology-panel:720px;
    --technology-row:calc(var(--technology-panel) / 5);
    --technology-inset:calc(38.4 * var(--technology-unit));
    --technology-gap:calc(20 * var(--technology-unit));
    min-height:calc(100svh - var(--technology-header,96px));
    padding-top:var(--technology-gap);
    padding-bottom:0;
    scroll-margin-top:var(--technology-header,96px);
  }
  #technology .section-head {
    display:grid;
    grid-template-columns:minmax(0,46fr) minmax(0,54fr);
    width:100%;
    max-width:none;
    min-height:0;
    gap:0;
    margin:0 0 var(--technology-gap);
    padding:0;
    align-items:center;
  }
  #technology .section-head__title {
    padding:0 calc(24 * var(--technology-unit));
    font-family:var(--f-neue);
    font-size:calc(36 * var(--technology-unit));
    line-height:1.15;
    white-space:normal;
    text-align:center;
    text-wrap:balance;
    letter-spacing:-.02em;
  }
  #technology .section-head__sub {
    width:100%;
    max-width:none;
    padding:0 calc(28 * var(--technology-unit));
    margin:0;
    font-size:calc(17 * var(--technology-unit));
    line-height:1.5;
    white-space:normal;
    text-align:center;
    text-wrap:balance;
    color:#444;
  }
  #technology.features--enhanced .features__hint {
    display:block;
    position:absolute;
    z-index:2;
    left:calc(16 * var(--technology-unit));
    bottom:calc(16 * var(--technology-unit));
    margin:0;
    padding:calc(5 * var(--technology-unit)) calc(9 * var(--technology-unit));
    border-radius:calc(3 * var(--technology-unit));
    background:rgba(255,255,255,.78);
    pointer-events:none;
    font-family:var(--f-now-text);
    font-size:calc(11 * var(--technology-unit));
    line-height:1.5;
    letter-spacing:.01em;
    color:#626262;
    transition:opacity 180ms ease-out;
  }
  #technology.features--explored .features__hint { opacity:0; }
  #technology .features__body {
    display:grid;
    grid-template-columns:minmax(0,46fr) minmax(0,54fr);
    align-items:start;
    width:100%;
    max-width:none;
    margin:0;
    gap:0;
  }
  #technology .features__media {
    display:block;
    position:sticky;
    top:calc(var(--technology-header,96px) + var(--technology-gap));
    height:calc(438 * var(--technology-unit));
    max-height:none;
    background:#ece9e5;
  }
  #technology.features--enhanced:not(.features--flow) .features__media {
    position:relative;
    top:auto;
    height:var(--technology-panel);
    contain:layout paint;
  }
  #technology .features__img {
    visibility:visible;
    transition:opacity 160ms ease-out;
    pointer-events:none;
    z-index:0;
  }
  #technology .features__img.is-active { z-index:1; }
  #technology .features__img img {
    object-fit:cover;
    object-position:center;
    transform:scale(1.025);
    transition:transform 440ms cubic-bezier(.22,1,.36,1);
  }
  #technology .features__img.is-active img { transform:scale(1); }
  #technology .features__list {
    display:block;
    position:relative;
    height:auto;
    min-width:0;
    overflow:visible;
    overflow-anchor:none;
    scroll-behavior:auto;
    scroll-snap-type:none;
    scrollbar-width:thin;
    scrollbar-color:#aaa #ececec;
    background:#f5f5f3;
    overscroll-behavior:contain;
  }
  #technology .features__list::-webkit-scrollbar { display:block; width:max(3px,calc(5 * var(--technology-unit))); }
  #technology .features__list::-webkit-scrollbar-track { background:#ececec; }
  #technology .features__list::-webkit-scrollbar-thumb { background:#aaa; border-radius:3px; }
  #technology.features--enhanced:not(.features--flow) .features__list {
    height:var(--technology-panel);
    overflow-y:auto;
    overflow-x:hidden;
    contain:layout paint;
  }
  #technology .feature {
    height:auto;
    min-height:calc(104 * var(--technology-unit));
    padding:calc(16 * var(--technology-unit)) 0;
    gap:calc(10 * var(--technology-unit));
    border:0;
    border-bottom:1px solid #d9d9d6;
    background:#f5f5f3;
    color:var(--ink);
    justify-content:center;
    transition:height 200ms cubic-bezier(.2,.7,.2,1),background-color 160ms ease-out;
    overflow:hidden;
  }
  #technology .feature__btn,
  #technology .feature.is-active .feature__btn {
    height:auto;
    min-height:calc(25 * var(--technology-unit));
    padding:0 var(--technology-inset);
    margin:0;
    gap:calc(24 * var(--technology-unit));
    cursor:pointer;
    transition:none;
  }
  #technology .feature__title {
    font-size:calc(20 * var(--technology-unit));
    line-height:1.25;
    letter-spacing:-.025em;
    white-space:normal;
    color:inherit;
    transition:color 160ms ease-out;
  }
  #technology .feature__icon {
    display:block;
    position:relative;
    width:calc(18 * var(--technology-unit));
    height:calc(18 * var(--technology-unit));
    flex:0 0 calc(18 * var(--technology-unit));
    margin:0;
    opacity:.6;
    background:none;
    mask:none;
  }
  #technology .feature__icon::before,
  #technology .feature__icon::after {
    content:"";
    display:block;
    position:absolute;
    background:currentColor;
    left:calc(2 * var(--technology-unit));
    right:calc(2 * var(--technology-unit));
    top:calc(8 * var(--technology-unit));
    height:1px;
    transition:transform 160ms ease-out;
  }
  #technology .feature__icon::after { transform:rotate(90deg); }
  #technology .feature.is-active .feature__icon::after { transform:rotate(0); }
  #technology .feature__desc,
  #technology .feature.is-active .feature__desc {
    display:block;
    width:100%;
    max-width:calc(54ch + var(--technology-inset) * 2);
    padding:0 var(--technology-inset);
    margin:0;
    font-size:calc(15 * var(--technology-unit));
    line-height:1.4;
    color:inherit;
    opacity:1;
    transform:none;
    transition:opacity 120ms ease-out;
  }
  #technology .feature.is-active { color:#fff; background:#111; }
  #technology .feature.is-active .feature__desc { color:#bcbcbc; animation:feature-desktop-copy 280ms cubic-bezier(.22,1,.36,1) both; }
  #technology.features--enhanced .feature:not(.is-active) {
    height:var(--technology-row);
    min-height:0;
    padding:0;
    gap:0;
  }
  #technology.features--enhanced .feature:not(.is-active) .feature__btn {
    height:calc(var(--technology-row) - 1px);
  }
  #technology.features--enhanced .feature:not(.is-active) .feature__desc {
    position:absolute;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
  }
  #technology.features--enhanced:not(.features--flow) .feature.is-active {
    height:calc(var(--technology-row) * 2);
    min-height:0;
  }
  #technology.features--flow .feature.is-active { min-height:calc(200 * var(--technology-unit)); }
  #technology.features--flow .features__body { align-items:stretch; }
  #technology.features--flow .features__media { position:relative; top:0; height:auto; min-height:calc(340 * var(--technology-unit)); }
  #technology .feature__btn:focus-visible { outline-offset:-5px; }
  #technology .features__list:focus-visible { outline-offset:-3px; }
  #technology.features--enhanced:not(.features--ready) .feature { transition:none; }
}
@media (prefers-reduced-motion:reduce) {
  #technology .feature,
  #technology .feature__title,
  #technology .feature__desc,
  #technology .features__img,
  #technology .feature__icon::after { transition:none; }
}

/* The detail region is transparent to the approved desktop card layout. */
.feature__detail, .feature__detail-inner { display:contents; }
.feature__detail[hidden] { display:none!important; }
.feature__mobile-photo { display:none; }

/* The controller uses the same input/geometry condition as the desktop explorer. */
#technology.features--mobile { padding-top:var(--mobile-section-space); padding-bottom:0; overflow-anchor:none; }
#technology.features--mobile .section-head { display:block; width:100%; max-width:600px; margin:0 auto var(--mobile-content-gap); padding:0 var(--mobile-gutter); }
#technology.features--mobile .section-head__title { white-space:normal; text-align:left; text-wrap:balance; }
#technology.features--mobile .section-head__sub { padding:0; color:#595957; white-space:normal; text-align:left; }
#technology.features--mobile .features__body,
#technology.features--mobile .features__list { display:block; width:100%; max-width:600px; height:auto; margin:0 auto; padding:0; overflow:visible; contain:none; scroll-snap-type:none; }
#technology.features--mobile #features-media { display:none; }
#technology.features--mobile .features__list { border-top:1px solid #dededb; }
#technology.features--mobile .feature { display:grid; grid-template-columns:minmax(0,1fr); align-content:start; height:auto; min-height:0; padding:0; margin:0; border:0; border-bottom:1px solid #dededb; background:#f7f7f5; color:#111; scroll-snap-align:none; overflow:hidden; transition:background-color 140ms,color 140ms; }
#technology.features--mobile .feature.is-active { background:#111; color:#fff; border-bottom-color:#30302e; gap:0; }
#technology.features--mobile .feature__btn,
#technology.features--mobile .feature.is-active .feature__btn { display:flex; grid-row:1; align-items:center; justify-content:space-between; width:100%; min-height:64px; height:auto; margin:0; padding:18px 20px; gap:16px; color:inherit; cursor:pointer; touch-action:manipulation; transition:none; }
#technology.features--mobile .feature__btn:active { background:rgba(128,128,128,.1); }
#technology.features--mobile .feature__title { font:500 1.25rem/1.3 var(--f-neue); letter-spacing:-.02em; white-space:normal; color:inherit; transition:none; }
#technology.features--mobile .feature__icon { display:block; position:relative; width:18px; height:18px; flex:0 0 18px; margin:0; background:none; mask:none; opacity:.6; transition:transform 220ms var(--mobile-ease); }
#technology.features--mobile .feature.is-active .feature__icon { transform:rotate(180deg); }
#technology.features--mobile .feature__btn { position:relative; }
#technology.features--mobile .feature__icon::before,
#technology.features--mobile .feature__icon::after { content:""; display:block; position:absolute; left:2px; right:2px; top:8px; height:1px; background:currentColor; transition:transform 140ms; }
#technology.features--mobile .feature__icon::after { transform:rotate(90deg); }
#technology.features--mobile .feature.is-active .feature__icon::after { transform:rotate(0); }
#technology.features--mobile .feature__detail,
#technology.features--mobile .feature__detail-inner { display:contents; }
#technology.features--mobile .feature__desc,
#technology.features--mobile .feature.is-active .feature__desc { display:block; grid-row:2; width:100%; max-width:none; margin:0 0 24px; padding:0 20px; font:400 .9375rem/1.5 var(--f-display); color:#c5c5c2; opacity:1; visibility:visible; transform:none; transition:none; }
#technology.features--mobile .feature__mobile-photo { display:block; grid-row:3; position:relative; width:100%; aspect-ratio:4/3; background:#eeece8; overflow:hidden; }
#technology.features--mobile .feature__mobile-photo[hidden] { display:none; }
#technology.features--mobile .feature__mobile-photo picture,
#technology.features--mobile .feature__mobile-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
#technology.features--mobile .feature__mobile-photo picture { opacity:1; transform:none; }
@keyframes feature-photo-in {
  from { opacity:.55; transform:scale(1.035); }
  28% { opacity:1; }
  to { opacity:1; transform:scale(1); }
}
#technology.features--mobile .feature.is-active .feature__mobile-photo picture { animation:feature-photo-in 560ms cubic-bezier(.22,1,.36,1) both; }
#technology.features--mobile .feature__mobile-photo.is-compact img { object-fit:contain; }
#technology.features--mobile .feature__btn:focus-visible { outline-offset:-5px; }
@keyframes feature-copy-in {
  from { opacity:.7; transform:translate3d(0,12px,0); }
  50% { opacity:1; }
  to { opacity:1; transform:none; }
}
#technology.features--mobile .feature.is-active .feature__desc { animation:feature-copy-in 320ms var(--mobile-ease) both; }
@media (prefers-reduced-motion:reduce) {
  #technology.features--mobile .feature,
  #technology.features--mobile .feature__icon,
  #technology.features--mobile .feature__icon::after,
  #technology.features--mobile .feature__mobile-photo picture { transition:none; }
  #technology.features--mobile .feature.is-active .feature__desc,
  #technology.features--mobile .feature.is-active .feature__mobile-photo picture { animation:none; }
}

/* Hotels move from the mobile hero to a seventh, black Why-us scene.
   Desktop keeps its original hero rail and six-scene journey. */
#why-us .slide--trust { display:none; }
@media (width <600px), (width <1100px) and (aspect-ratio <4/3), (width <1100px) and (hover:none), (width <1100px) and (pointer:coarse), (width <1100px) and (pointer:none) {
  #why-us .slide--trust { display:flex; }
  .trust__marks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; width:min(100%,16rem); gap:1.5rem 1.75rem; padding:0; margin:0; list-style:none; }
  .trust__mark { display:flex; justify-content:center; align-items:center; min-width:0; min-height:2.75rem; }
  .trust__mark img { display:block; width:auto; height:2.125rem; max-width:100%; object-fit:contain; opacity:.8; }
  .trust__mark--taj img { height:2.25rem; }
  .trust__mark--oberoi img { height:1.375rem; }
  /* Also retain the requested visual order without JavaScript. The enhanced
     controller mirrors it in the DOM for keyboard and assistive reading. */
  #why-us:not(.why--stacked) .why__track { display:flex; flex-direction:column; }
  #why-us [data-why-scene="trust"] { order:4; }
  #why-us [data-why-scene="patents"] { order:5; }
  #why-us [data-why-scene="focus"] { order:6; }
}

/* One reading order and introduction in every presentation, including no JS. */
#why-us { position:relative; z-index:31; padding-top:0; overflow:visible; background:transparent; }
#why-us .slide--intro { display:flex; }
#why-us .why__viewport-probe { position:absolute; top:0; width:0; height:100svh; visibility:hidden; pointer-events:none; }
#why-us .slide--intro .slide__inner { gap:32px; }
#why-us .slide--intro .slide__note { width:100%; max-width:544px; font-size:16px; line-height:1.4; text-transform:none; }
#why-us .slide__reassurance { color:rgba(255,255,255,.88); white-space:nowrap; }
#why-us .slide__note { max-width:100%; }
#why-us .slide__note, #why-us .pill { text-transform:none; }
#why-us .stats { max-width:100%; }
#why-us .stat { min-width:0; }
#why-us .stat__num { white-space:nowrap; font-size:clamp(1.25rem,6.3vw,2rem); }
#why-us .stat__coverage { display:none; }
#why-us .stat__divider { flex-shrink:0; }
/* Technology ends cleanly; its mist belongs to the following transition. */
#technology.features--mobile .features__body { padding-bottom:0; }
#technology.features--mobile .features__body::after { content:none; }
/* Solid, bounded mobile panels; the desktop light field is independent. */
#why-us.why--stacked { padding-top:0; background:var(--ink); }
#why-us.why--stacked .why__scroll-container { position:relative; z-index:1; height:var(--why-height); overflow:visible; }
#why-us.why--stacked .why__sticky { position:sticky; top:0; height:var(--why-stage-height); overflow:hidden; }
#why-us.why--stacked .why__track { position:relative; width:100%; height:var(--why-stage-height); display:block; transform:none; overflow:visible; }
#why-us.why--stacked .slide {
  position:absolute; inset:0; width:100%; height:var(--why-stage-height); min-height:0;
  padding:5rem 20px; overflow:hidden; z-index:var(--why-layer);
  transform:translate3d(0,var(--why-card-y,100%),0);
}
#why-us.why--stacked .slide--intro { background:var(--ink); }
#why-us.why--stacked .skip-btn { display:none; }
#why-us.why--stacked .intro__word-window { display:inline-block; vertical-align:top; overflow:hidden; padding-block:.1em; margin-block:-.1em; --intro-word-progress:var(--why-reveal,0); }
#why-us.why--stacked .intro__word-window--brand { --intro-word-progress:var(--why-brand-reveal,0); }
#why-us.why--stacked .intro__word { display:block; opacity:var(--intro-word-progress); transform:translate3d(0,calc((1 - var(--intro-word-progress)) * 1.05em),0); }
#why-us.why--stacked .slide--intro .slide__note { opacity:var(--why-note-reveal,0); transform:translate3d(0,calc((1 - var(--why-note-reveal,0)) * 24px),0); }
#why-us.why--stacked .stat { opacity:var(--why-detail,1); transform:translate3d(calc((1 - var(--why-detail,1)) * -24px),0,0); }
#why-us.why--stacked .stat:last-child { opacity:var(--why-last,1); transform:translate3d(calc((1 - var(--why-last,1)) * 24px),0,0); }
#why-us.why--stacked .stat__divider { transform:scaleY(var(--why-detail,1)); transform-origin:center; }
#why-us.why--stacked .why__track:focus-visible { outline-color:#888; }


/* Laptop Why us. A solid paper-to-ink boundary with scroll-led typography. */
@media (min-width:1100px), (min-width:600px) and (min-aspect-ratio:4/3) and (hover:hover) and (pointer:fine) {
  /* Technology ends at its actual panel edge; Why us starts on solid ink. */
  #technology .features__body { position:relative; }
  #technology .features__body::after {
    content:none;
  }
  #technology.features--enhanced .features__hint {
    bottom:calc(42 * var(--technology-unit));
    background:rgba(255,255,255,.32);
    border:1px solid rgba(255,255,255,.42);
    border-radius:calc(5 * var(--technology-unit));
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 10px rgba(0,0,0,.025);
    color:#555;
  }
  #why-us {
    --why-unit:calc(100vw / 1280);
    position:relative;
    z-index:31;
    padding-top:0;
    background:transparent;
    overflow:visible;
  }
  #why-us > .section-head { display:none; }
  #why-us .slide--intro { display:flex; }
  #why-us .slide--intro .slide__note { width:auto; font-size:max(1.77776rem,15px); text-transform:none; max-width:720px; line-height:1.4; }
  #why-us .slide__reassurance { color:rgba(255,255,255,.88); white-space:nowrap; }
  #why-us .slide--intro .slide__inner { gap:2rem; }
  #why-us.why--horizontal {
    padding-top:0;
    background:var(--ink);
  }
  #why-us.why--horizontal .why__scroll-container { position:relative; z-index:1; }
  #why-us.why--horizontal .slide--intro { background:var(--ink); }
  #why-us .slide {
    width:100%;
    min-height:100svh;
    height:auto;
    padding:5rem 24px;
  }
  #why-us .slide__inner {
    width:61.77716rem;
    max-width:100%;
    gap:3.44441rem;
    align-items:center;
    text-align:center;
  }
  #why-us .slide__inner--wide { width:57.99942rem; gap:3.99996rem; }
  #why-us .slide__inner--narrow .slide__title { width:44.444rem; max-width:100%; }
  #why-us .slide__title { font-size:5.11106rem; line-height:1; }
  #why-us .slide__note { width:auto; font-size:max(1.77776rem,15px); line-height:1.2; }
  #why-us .pills { gap:.77777rem; flex-direction:row; flex-wrap:wrap; justify-content:center; }
  #why-us .pill { gap:.55555rem; padding:.88888rem 1.44443rem; font-size:max(.88888rem,11px); }
  #why-us .stats { gap:min(5.5555rem,7vw); }
  #why-us .stat { width:15.22207rem; max-width:35vw; }
  #why-us .stat__coverage { display:inline; }
  #why-us .stat__num { font-size:2.88886rem; color:inherit; }
  #why-us .stat__label { font-size:max(1.77776rem,14px); line-height:1.47; color:var(--dim); }
  #why-us .stat__divider { height:7.66659rem; background:currentColor; opacity:.4; }
  #why-us .why__scroll-container { height:auto; overflow:visible; }
  #why-us .why__sticky { position:relative; height:auto; overflow:visible; }
  #why-us .why__track { position:relative; display:block; width:100%; height:auto; transform:none; }
  #why-us .skip-btn { display:none; }
  /* Clip each phrase at its baseline: crisp type emerges instead of a dim
     whole-heading fade. Negative margins preserve the original title metrics. */
  #why-us.why--horizontal .intro__word-window {
    display:inline-block;
    vertical-align:top;
    overflow:hidden;
    padding-block:.1em;
    margin-block:-.1em;
    --intro-word-progress:var(--why-reveal,0);
  }
  #why-us.why--horizontal .intro__word-window--brand {
    --intro-word-progress:var(--why-brand-reveal,0);
  }
  #why-us.why--horizontal .intro__word {
    display:block;
    opacity:calc(.35 + .65 * var(--intro-word-progress));
    transform:translate3d(0,calc((1 - var(--intro-word-progress)) * 125%),0);
  }
  #why-us.why--horizontal .slide--intro .slide__note {
    opacity:var(--why-note-reveal,0);
    transform:translate3d(0,calc((1 - var(--why-note-reveal,0)) * 24px),0);
  }
  #why-us.why--horizontal:not(.why--entered) .skip-btn { visibility:hidden; }
  #why-us.why--horizontal .why__scroll-container { height:var(--why-height); }
  #why-us.why--horizontal .why__sticky { position:sticky; top:0; height:100vh; overflow:hidden; }
  #why-us.why--horizontal .why__track {
    display:flex;
    height:100vh;
    transform:translate3d(var(--why-x,0px),0,0);
    will-change:transform;
    overflow:visible;
  }
  #why-us.why--horizontal .slide { flex:0 0 100%; height:100vh; min-height:0; padding:0 24px; }
  #why-us.why--horizontal .skip-btn { display:block; }
  #why-us .why__track:focus-visible { outline-color:#888; }
  #why-us.why--horizontal .skip-btn { transition:none; }
}

  .topbar[data-mode] [data-why-surface="light"] { color:var(--ink); border-color:rgba(17,17,17,.3); transition:none; }
  .topbar[data-mode] [data-why-surface="dark"] { color:var(--white); border-color:rgba(255,255,255,.3); transition:none; }
  .topbar[data-mode] .nav__item[data-why-surface] { opacity:.82; }
  .topbar[data-mode] .nav__item[data-why-surface]:hover,
  .topbar[data-mode] .nav__item--active[data-why-surface] { opacity:1; }


/* Scale the approved 1280px composition as a whole, just like Technology.
   Real content height still wins on short screens; do not transform/zoom text. */
@media (min-width:1100px), (min-width:600px) and (min-aspect-ratio:4/3) and (hover:hover) and (pointer:fine) {
  #product, #support, #footer { --collection-unit:calc(100vw / 1280); }
  #product, #support .container, #footer .container {
    max-width:calc(1137.7604 * var(--collection-unit));
    padding-inline:calc(17.7776 * var(--collection-unit));
  }
  #product {
    --product-header:calc(64 * var(--collection-unit));
    --product-card-height:calc(406 * var(--collection-unit));
    --product-card-width:calc(880 * var(--collection-unit));
    --product-top:calc(40 * var(--collection-unit));
    --product-gap:calc(20 * var(--collection-unit));
    --product-bottom:calc(12 * var(--collection-unit));
    padding-top:var(--product-top);
    padding-bottom:var(--product-bottom);
    min-height:0;
    scroll-margin-top:calc(var(--product-header) - var(--product-top) + var(--product-gap));
  }
  #product .section-head {
    display:flex; flex-direction:row;
    width:100%; max-width:none;
    min-height:0;
    margin:0 0 var(--product-gap);
    gap:calc(24 * var(--collection-unit));
    align-items:center;
  }
  #product .section-head__title {
    font:400 calc(36 * var(--collection-unit))/1.15 var(--f-neue);
    letter-spacing:-.02em;
    white-space:nowrap;
  }
  #product .section-head__sub {
    font:400 calc(17 * var(--collection-unit))/1.5 var(--f-neue);
    color:#444;
    max-width:none; margin:0; padding:0;
    white-space:nowrap;
  }
  #product .carousel { overflow:visible; }
  #product .carousel__controls { display:contents; }
  #product .carousel,
  #product .carousel__stage { height:var(--product-card-height); }
  #product .card {
    position:absolute; left:50%; top:0; display:flex; flex-direction:row;
    margin:0; padding:0; border:1px solid var(--ink-20);
    width:var(--product-card-width);
    height:var(--product-card-height);
    border-radius:calc(28 * var(--collection-unit));
    transition:transform 420ms cubic-bezier(.22,1,.36,1),opacity 420ms ease,visibility 420ms;
  }
  #product .card[data-pos="center"] {
    transform:translateX(-50%);
    box-shadow:0 calc(3 * var(--collection-unit)) calc(8 * var(--collection-unit)) rgba(0,0,0,.07),0 calc(8 * var(--collection-unit)) calc(18 * var(--collection-unit)) rgba(0,0,0,.06);
  }
  #product .card[data-pos="left"] { transform:translateX(calc(-50% - calc(190 * var(--collection-unit)))) scale(.9); }
  #product .card[data-pos="right"] { transform:translateX(calc(-50% + calc(190 * var(--collection-unit)))) scale(.9); }
  #product .card[data-pos="out-left"] { transform:translateX(calc(-50% - calc(380 * var(--collection-unit)))) scale(.9); }
  #product .card[data-pos="out-right"] { transform:translateX(calc(-50% + calc(380 * var(--collection-unit)))) scale(.9); }
  #product .card .card__media { width:53%; height:100%; aspect-ratio:auto; border-radius:calc(28 * var(--collection-unit)); transition:none; }
  #product .card__media img { object-fit:cover; object-position:center; }
  #product .card .card__body {
    width:47%; margin:0; padding:calc(16 * var(--collection-unit)) calc(24 * var(--collection-unit)); gap:calc(12 * var(--collection-unit));
    transition:none;
  }
  /* Preserve the original card typography, divider and bullet/check layout.
     Secondary feature details use softer ink than the model and price. */
  #product .card .card__head { gap:calc(6 * var(--collection-unit)); transition:none; }
  #product .card .card__name,
  #product .card .card__price { max-width:none; gap:calc(2 * var(--collection-unit)); transition:none; }
  #product .card .card__name h3 { font-size:calc(28 * var(--collection-unit)); line-height:calc(32 * var(--collection-unit)); transition:none; }
  #product .card .card__name p { font-size:calc(13 * var(--collection-unit)); line-height:calc(18 * var(--collection-unit)); white-space:nowrap; transition:none; }
  #product .card .card__amount { font-size:calc(24 * var(--collection-unit)); line-height:calc(26 * var(--collection-unit)); transition:none; }
  #product .card .card__price p:last-child { font-size:calc(12 * var(--collection-unit)); line-height:calc(16 * var(--collection-unit)); transition:none; }
  #product .specs { gap:0; }
  #product .card .spec { min-height:calc(19 * var(--collection-unit)); padding:0; font-size:calc(13 * var(--collection-unit)); line-height:calc(19 * var(--collection-unit)); transition:none; }
  #product .card .spec.is-yes { color:rgba(17,17,17,.6); }
  #product .card .spec > span { padding-left:calc(16 * var(--collection-unit)); transition:none; }
  #product .spec > span::before { opacity:.5; }
  #product .spec > i { width:calc(12 * var(--collection-unit)); height:calc(12 * var(--collection-unit)); background-size:calc(11 * var(--collection-unit)) auto; opacity:.6; }
  #product .card[data-pos="left"] .specs,
  #product .card[data-pos="right"] .specs { opacity:.45; }
  #product .carousel__arrow {
    position:absolute;
    width:calc(48 * var(--collection-unit)); height:calc(48 * var(--collection-unit)); top:50%; transform:translateY(-50%);
  }
  #product .carousel__arrow img { width:calc(20 * var(--collection-unit)); height:calc(20 * var(--collection-unit)); }
  /* The product already supplies bottom clearance; avoid a second large gap. */
  .collection-shell + #support { margin-top:calc(28 * var(--collection-unit)); }
}

/* Support and footer use the same design unit. Override dimensions only so
   form validation, focus, hover and reveal states keep their original rules. */
.footer__tagline { text-transform:none; }
@media (min-width:1100px), (min-width:600px) and (min-aspect-ratio:4/3) and (hover:hover) and (pointer:fine) {
  #support { padding:calc(71.1104 * var(--collection-unit)) 0; }
  #support .contact__inner {
    grid-template-columns:minmax(0,530.66fr) minmax(0,515.55fr);
    gap:0 calc(56 * var(--collection-unit));
  }
  #support .contact__copy { gap:calc(62.2216 * var(--collection-unit)); }
  #support .contact__title { font-size:calc(81.77696 * var(--collection-unit)); }
  #support .contact__text { font-size:max(15px,calc(28.44416 * var(--collection-unit))); }
  #support .contact__form { gap:calc(72.88816 * var(--collection-unit)); }
  #support .contact__fields { gap:calc(35.5552 * var(--collection-unit)); }
  #support .field-row {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:calc(17.7776 * var(--collection-unit));
  }
  #support .field { padding:calc(12.44432 * var(--collection-unit)) 0; }
  #support .field--message { padding-bottom:calc(30.22192 * var(--collection-unit)); }
  #support .field input, #support .field textarea {
    font-size:max(14px,calc(17.7776 * var(--collection-unit)));
    line-height:calc(28.44416 * var(--collection-unit));
  }
  #support .field__error {
    margin-top:calc(5.33328 * var(--collection-unit));
    font-size:max(11px,calc(10.66656 * var(--collection-unit)));
  }
  #support .submit {
    height:calc(51.55504 * var(--collection-unit));
    font-size:max(13px,calc(14.22208 * var(--collection-unit)));
  }
  #support .contact__status {
    font-size:max(13px,calc(14.22208 * var(--collection-unit)));
    margin-top:calc(-49.77728 * var(--collection-unit));
  }
  #footer { min-height:calc(400 * var(--collection-unit)); padding-bottom:0; }
  #footer .footer__inner {
    padding-top:calc(56 * var(--collection-unit));
    padding-bottom:calc(32 * var(--collection-unit));
    gap:calc(36 * var(--collection-unit));
    align-items:center;
  }
  #footer .footer__top, #footer .footer__cols { flex-direction:row; }
  #footer .footer__top { gap:0; }
  #footer .footer__brand {
    width:calc(433.77344 * var(--collection-unit));
    gap:calc(44 * var(--collection-unit));
  }
  #footer .logo { gap:calc(18.84426 * var(--collection-unit)); }
  #footer .logo__mark { width:calc(87.01637 * var(--collection-unit)); height:calc(87.01637 * var(--collection-unit)); }
  #footer .logo__word {
    margin-top:calc(1.77776 * var(--collection-unit));
    font-size:calc(40.88848 * var(--collection-unit));
    line-height:1;
  }
  #footer .footer__tagline { font-size:max(15px,calc(28.44416 * var(--collection-unit))); }
  #footer .footer__cols { gap:calc(214.22008 * var(--collection-unit)); }
  #footer .footer__col { width:calc(78.22144 * var(--collection-unit)); }
  #footer .footer__col h3 {
    font-size:max(13px,calc(17.7776 * var(--collection-unit)));
    margin-bottom:calc(28.44416 * var(--collection-unit));
  }
  #footer .footer__col a { font-size:max(12px,calc(14.22208 * var(--collection-unit))); padding:0; }
  #footer .footer__col a+a { margin-top:calc(21.33312 * var(--collection-unit)); }
  #footer .footer__rule { margin:calc(8.8888 * var(--collection-unit)) 0 0; }
  #footer .footer__copy { font-size:max(11px,calc(12.44432 * var(--collection-unit))); }
}

/* One type, spacing and motion system for phones and touch tablets. This is
   the complement of the explorer's desktop/fine-pointer landscape query. */
.motion-window { display:inline-block; max-width:100%; vertical-align:top; overflow:clip; padding-block:.1em; margin-block:-.1em; }
.motion-phrase { display:block; }
@media (width <600px), (width <1100px) and (aspect-ratio <4/3), (width <1100px) and (hover:none), (width <1100px) and (pointer:coarse), (width <1100px) and (pointer:none) {
  :root {
    --mobile-heading:2rem;
    --mobile-gutter:20px;
    --mobile-section-space:3.5rem;
    --mobile-content-gap:2rem;
    --mobile-ease:cubic-bezier(.22,1,.36,1);
  }
  #technology, #technology.features--mobile { padding-top:var(--mobile-section-space); padding-bottom:0; }
  #product { padding:var(--mobile-section-space) var(--mobile-gutter); max-width:600px; }
  #technology .section-head, #technology.features--mobile .section-head,
  #product .section-head { margin:0 auto var(--mobile-content-gap); min-height:0; max-width:600px; }
  #technology .section-head { padding-inline:var(--mobile-gutter); }
  #technology .section-head__title, #technology.features--mobile .section-head__title,
  #product .section-head__title, #why-us .slide__title, #support .contact__title {
    font:400 var(--mobile-heading)/1.15 var(--f-neue); letter-spacing:-.02em; text-wrap:balance; overflow-wrap:anywhere;
  }
  #technology:not(.features--enhanced) .feature { height:auto; min-height:0; padding:20px; gap:12px; border-bottom:1px solid #dededb; }
  #technology:not(.features--enhanced) .feature__btn { height:auto; min-height:44px; padding:0; cursor:default; }
  #technology:not(.features--enhanced) .feature__icon { display:none; }
  #technology:not(.features--enhanced) .feature__desc { display:block; width:100%; padding:0; opacity:1; transform:none; font-size:1rem; color:#595957; }
  #technology:not(.features--enhanced) .feature.is-active .feature__desc { color:#c5c5c2; }
  #technology .section-head__title > *, #product .section-head__title > * { display:block; }
  #technology .section-head__title strong, #product .section-head__title strong { margin:0; font-size:inherit; line-height:inherit; font-weight:500; }
  #why-us .intro__word-window--brand { font-weight:500; }
  #technology .section-head__sub, #technology.features--mobile .section-head__sub,
  #product .section-head__sub { margin-top:.75rem; max-width:34ch; font:400 1rem/1.5 var(--f-neue); color:#595957; }
  #why-us .slide { padding-inline:var(--mobile-gutter); }
  #why-us .slide__inner { max-width:560px; gap:var(--mobile-content-gap); }
  #why-us .stat__num { white-space:normal; }
  #why-us:not(.why--stacked) .stats { flex-wrap:wrap; gap:20px; }
  #why-us:not(.why--stacked) .stat { width:auto; flex:1 1 8rem; }
  #why-us:not(.why--stacked) .stat__divider { display:none; }
  #why-us .slide__note, #why-us .slide--intro .slide__note { font-size:1rem; line-height:1.5; }
  #why-us .pill { white-space:normal; text-align:left; }
  #support { margin-top:0; padding:var(--mobile-section-space) var(--mobile-gutter); }
  #support .contact__inner { max-width:560px; padding:0; gap:var(--mobile-content-gap); }
  #support .contact__copy { gap:.75rem; }
  #support .contact__text { font:400 1rem/1.5 var(--f-neue); }
  #support .contact__fields { gap:0; }
  #support .field-row { row-gap:0; }
  #support .field, #support .field--message { padding:1.25rem 0; }
  #support .field input, #support .field textarea { font:500 1rem/1.5 var(--f-neue); }
  #support .field textarea { min-height:4.5rem; }
  #support .field__error { position:static; margin-top:.5rem; }
  #support .field::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform 180ms var(--mobile-ease); pointer-events:none; }
  #support .field:focus-within::after { transform:scaleX(1); }
  #support .field.is-invalid::after { background:#c0392b; }
  #support .field.is-invalid::before { background:#c0392b; }
  .collection-shell, #support { position:relative; }
  .collection-shell::before, #support::before {
    content:''; position:absolute; top:0; left:var(--mobile-gutter); right:var(--mobile-gutter);
    height:1px; background:rgba(17,17,17,.16); pointer-events:none;
    transform-origin:left;
  }
  .scene-heading .motion-window { display:block; }
  #why-us .slide__title .motion-window { overflow:visible; }
  #why-us .slide__title .motion-window + .motion-window { margin-left:.16em; }
  .mobile-menu__nav a.motion-title, .mobile-menu.is-open .mobile-menu__nav a.motion-title { opacity:1; transform:none; transition:none; }
  .mobile-menu__nav .motion-window { display:block; }
  .mobile-menu__nav .motion-phrase { opacity:0; transform:translate3d(0,110%,0); transition:transform 180ms ease,opacity 160ms ease; }
  .mobile-menu.is-open .motion-phrase { opacity:1; transform:none; transition-duration:440ms; transition-timing-function:var(--mobile-ease); transition-delay:calc(70ms + var(--menu-item,0) * 60ms); }
}
@media (min-width:600px) and (width <1100px) and (aspect-ratio <4/3), (min-width:600px) and (width <1100px) and (hover:none), (min-width:600px) and (width <1100px) and (pointer:coarse), (min-width:600px) and (width <1100px) and (pointer:none) {
  :root { --mobile-heading:2.5rem; }
}

/* Mobile disclosures are progressively enhanced; the laptop list stays open. */
.card__disclosure, .card__collapse, .carousel__counter { display:none; }
#product.product--mobile { scroll-margin-top:var(--mobile-header-height,64px); }
.collection-shell:has(.product--mobile) + #support { margin-top:0; }
#product.product--mobile .carousel { max-width:448px; margin:auto; overflow:visible; padding:0; overflow-anchor:none; }
#product.product--mobile .carousel__stage {
  height:auto; width:100%; overflow:visible; isolation:isolate; outline-offset:4px;
  touch-action:pan-y pinch-zoom; cursor:grab; user-select:none;
  clip-path:inset(-8px -16px -8px);
}
#product.product--mobile .product-deck.is-dragging { cursor:grabbing; }
#product.product--mobile .card, #product.product--mobile .card * { transition:none; }
#product.product--mobile .card {
  display:flex; position:absolute; left:0; top:0; width:100%; height:auto;
  flex-direction:column; margin:0; padding:0 0 12px; border:0; border-radius:12px;
  box-shadow:0 0 0 1px rgba(17,17,17,.1),0 3px 10px rgba(17,17,17,.07);
  transform-origin:center center; pointer-events:none;
}
#product.product--mobile .card[data-pos="center"] { position:relative; pointer-events:auto; }
#product.product--mobile .card .card__media {
  position:relative; width:100%; height:auto; aspect-ratio:1; border-radius:0;
  background:#e7e4de; overflow:hidden; pointer-events:none;
}
#product.product--mobile .card__media img { display:block; width:100%; height:100%; object-fit:contain; -webkit-user-drag:none; }
.product-deck__fallback { display:none; }
#product.product--mobile .has-image-error img { visibility:hidden; }
#product.product--mobile .has-image-error .product-deck__fallback { display:grid; position:absolute; inset:0; place-content:center; padding:24px; text-align:center; font:400 1rem/1.5 var(--f-neue); color:#595957; }
#product.product--mobile .card .card__body { width:auto; margin:0; padding:16px 16px 0; gap:8px; transition:none; }
#product.product--mobile .card .card__head { gap:8px; min-height:var(--mobile-product-head,0px); }
#product.product--mobile .card .card__name, #product.product--mobile .card .card__price { gap:2px; }
#product.product--mobile .card .card__name h3 { font-size:1.5rem; line-height:1.15; }
#product.product--mobile .card .card__name p { font-size:.8125rem; line-height:1.35; min-height:2.7em; white-space:normal; }
#product.product--mobile .card .card__amount { font-size:1.5rem; line-height:1.15; }
#product.product--mobile .card .card__price p:last-child { font-size:.75rem; line-height:1.35; }
#product.product--mobile .card .specs { gap:4px; }
#product.product--mobile .card .spec { font-size:.875rem; line-height:1.4; white-space:normal; gap:8px; align-items:flex-start; }
#product.product--mobile .card .spec > span { padding-left:10px; }
#product.product--mobile .spec > i { margin-top:3px; }
#product.product--mobile .card__disclosure, #product.product--mobile .card__collapse {
  display:block; width:100%; min-height:44px; padding:8px 0; border:0;
  background:transparent; color:#555; font:500 .8125rem/1.35 var(--f-neue);
  text-align:left; cursor:pointer; text-transform:none;
}
#product.product--mobile .card__disclosure::after { content:'+'; float:right; font-size:18px; transition:transform 180ms var(--mobile-ease); }
#product.product--mobile .card__disclosure[aria-expanded="true"]::after { transform:rotate(45deg); }
#product.product--mobile .card__details[hidden] { display:none; }
#product.product--mobile .card__details { overflow:clip; }
#product.product--mobile .carousel__controls { display:flex; align-items:center; justify-content:center; gap:24px; margin-top:16px; padding-top:8px; border-top:1px solid rgba(17,17,17,.14); }
#product.product--mobile .carousel__counter { display:block; min-width:64px; text-align:center; font:400 .8125rem/1 var(--f-neue); font-variant-numeric:tabular-nums; letter-spacing:.08em; color:#595957; }
#product.product--mobile .carousel__arrow {
  position:static; width:44px; height:44px; min-height:44px;
  margin:0; transform:none; background:transparent; border:0; border-radius:50%;
  backdrop-filter:none; -webkit-backdrop-filter:none; display:flex; touch-action:manipulation;
  transition:background-color 140ms ease,translate 140ms var(--mobile-ease);
}
#product.product--mobile .carousel__arrow img {
  position:static; width:18px; height:18px; filter:brightness(.25); transform:none;
}
#product.product--mobile .carousel__arrow--prev img { transform:rotate(180deg); }
#product.product--mobile .carousel__arrow:active { background:rgba(17,17,17,.06); translate:-2px 0; }
#product.product--mobile .carousel__arrow--next:active { translate:2px 0; }
#product.product--mobile .carousel__arrow:focus-visible { outline:2px solid #555; outline-offset:1px; }
@media (prefers-reduced-motion:reduce) {
  .motion-phrase { opacity:1!important; transform:none!important; transition:none!important; }
  #product.product--mobile .carousel__arrow, #product.product--mobile .card__disclosure::after { transition:none; }
  #product.product--mobile .carousel__arrow:active { translate:none; }
}
@media (width < 1100px) {
  #product:not(.product--enhanced) .card { display:flex; position:relative; left:0; top:0; width:100%; height:auto; transform:none; opacity:1; visibility:visible; flex-direction:column; margin-bottom:24px; }
  #product:not(.product--enhanced) .carousel, #product:not(.product--enhanced) .carousel__stage { height:auto; }
  #product:not(.product--enhanced) .carousel__controls { display:none; }
  #product:not(.product--enhanced) .card .card__media { width:100%; height:auto; aspect-ratio:1; }
  #product:not(.product--enhanced) .card .card__body { width:auto; margin:0 16px; }
}

/* Reversible scenes: progress is written by the shared scroll frame. No CSS
   time-based transitions may chase these transforms or opacity values. */
.scene-rise, .scene-field, .scene-heading .motion-phrase { transition:none; }
.scene-boundary::before, .scene-rule { transform:scaleX(var(--scene-rule,1)); transform-origin:left; transition:none; }
.scene-motion-ready #support .scene-field { border-bottom-color:transparent; }
.scene-field::before { content:''; position:absolute; inset:auto 0 -1px; height:1px; background:var(--ink-40); transform:scaleX(var(--scene-rule,1)); transform-origin:left; pointer-events:none; }
#why-us .why-word { display:inline-block; vertical-align:baseline; transform-origin:center 70%; }
#why-us.why--words .intro__word-window { overflow:visible; }
#why-us.why--words .intro__word { opacity:1; transform:none; }
#why-us.why--words .slide--intro .slide__note { opacity:1; transform:none; }
.why-note-line { display:inline-block; }
#why-us:not(.why--horizontal):not(.why--stacked) :is(.why-word,.why-note-line,.slide__note,.pill) { opacity:1!important; transform:none!important; }
#why-us.why--horizontal .stat { opacity:var(--why-detail,1); transform:translate3d(calc((1 - var(--why-detail,1)) * -24px),0,0); }
#why-us.why--horizontal .stat:last-child { opacity:var(--why-last,1); transform:translate3d(calc((1 - var(--why-last,1)) * 24px),0,0); }
#why-us.why--horizontal .stat__divider { transform:scaleY(var(--why-detail,1)); transform-origin:center; }
@keyframes feature-desktop-copy {
  from { opacity:.7; transform:translate3d(0,8px,0); }
  55% { opacity:1; }
  to { opacity:1; transform:none; }
}
@media (min-width:1100px), (min-width:600px) and (min-aspect-ratio:4/3) and (hover:hover) and (pointer:fine) {
  .collection-shell.scene-boundary { position:relative; }
  #technology .motion-window, #technology .motion-phrase,
  #why-us .motion-window, #why-us .motion-phrase { display:contents; }
  .collection-shell.scene-boundary::before { content:''; position:absolute; top:0; left:6.4%; right:6.4%; height:1px; background:rgba(17,17,17,.16); pointer-events:none; }
  #product .product-deck .card {
    translate:0 var(--deck-y,0px); scale:var(--deck-scale,1);
  }
  #product .product-deck .card[data-pos="center"] { opacity:var(--deck-alpha,1); }
  #product .product-deck .card[data-pos="left"] {
    translate:calc((1 - var(--deck-spread,1)) * 190 * var(--collection-unit)) var(--deck-y,0px);
    opacity:var(--deck-neighbor-alpha,1);
  }
  #product .product-deck .card[data-pos="right"] {
    translate:calc((var(--deck-spread,1) - 1) * 190 * var(--collection-unit)) var(--deck-y,0px);
    opacity:var(--deck-neighbor-alpha,1);
  }
  /* Interaction takes over from the on-screen scene pose. Normal scroll
     updates never transition; only this handoff interpolates translate/scale. */
  #product .product-deck:not(.is-scene-takeover) .card { transition:transform 420ms cubic-bezier(.22,1,.36,1),visibility 420ms; }
  #product .product-deck.is-scene-takeover .card {
    transition:transform 420ms cubic-bezier(.22,1,.36,1),opacity 420ms ease,visibility 420ms,translate 160ms ease-out,scale 160ms ease-out;
  }
  #product .carousel__arrow img { transition:translate 160ms ease-out; }
  #product .carousel__arrow--next:is(:hover,:focus-visible) img { translate:3px 0; }
  #product .carousel__arrow--prev:is(:hover,:focus-visible) img { translate:-3px 0; }
}
@media (prefers-reduced-motion:reduce) {
  .scene-rise, .scene-field, .scene-heading .motion-phrase,
  #why-us .why-word, #why-us .why-note-line, #why-us .slide__note,
  #why-us .pill, #why-us .stat { opacity:1!important; transform:none!important; }
  .scene-boundary::before, .scene-rule, .scene-field::before { transform:none!important; }
  #technology .feature.is-active .feature__desc { animation:none; }
  #technology .features__img img { transition:none; }
  #product .product-deck .card, #product .carousel__arrow img, .nav__item::after { transition:none!important; }
  #product .product-deck .card { translate:none!important; scale:1!important; }
}

/* Quiet tactile feedback for controls without an existing press treatment.
   Hero, menu toggle, feature rows and product navigation retain their own effects. */
.topbar__contact { transition:color .35s ease,border-color .35s ease,background 140ms ease,scale 120ms ease-out; }
.submit { transition:background 140ms ease,scale 120ms ease-out; }
.topbar__contact:active { scale:.98; background:rgba(127,127,127,.14); }
.submit:not(:disabled):active { scale:.985; background:#303030; }
#product.product--mobile :is(.card__disclosure,.card__collapse):active { background:rgba(17,17,17,.045); color:#111; }
:is(.mobile-menu__nav a,.footer__nav a,.footer__col a,.nav__item,.skip-btn,.topbar__brand):active { opacity:.65; }
@media (prefers-reduced-motion:reduce) {
  .topbar__contact,.submit { transition:none; }
  .topbar__contact:active,.submit:not(:disabled):active { scale:1; }
}