/* ==========================================================================
   biow E-OX · Landing
   Mobile-first. Scroll-linked values arrive as CSS custom properties
   (--p progress, --e eased progress) written by main.js.
   ========================================================================== */

:root {
  --paper: #f4f5f6;
  --mist: #eceff1;
  --sand: #efe9e2;
  --white: #ffffff;
  --ink: #1b242d;
  --ink-2: #4b5662;
  --ink-3: #6f7a85;
  --navy: #3a5774;
  --navy-press: #2e4760;
  --linen: #eceae6;
  --line: rgba(27, 36, 45, 0.12);
  --danger: #b4372b;

  --gutter: 20px;
  --max: 1120px;
  --nav-h: 52px;
  --dock-h: 76px; /* room kept free for the floating CTA on mobile */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-press: cubic-bezier(0.2, 0, 0, 1);

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 8px);
}
/* Anchor links glide to their section (instant for reduced motion). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.5 "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #fff;
  text-decoration: none; transform: translateY(-160%);
  transition: transform 200ms var(--ease-out);
}
.skip:focus { transform: none; }

/* ---------- Type ---------------------------------------------------------- */

.eyebrow {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy);
}
.eyebrow--light { color: rgba(255, 255, 255, 0.86); }

.h2 {
  font-size: clamp(2.375rem, 10vw, 4rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.lede {
  font-size: 1.125rem; line-height: 1.5; color: var(--ink-2);
  text-wrap: pretty; max-width: 34ch;
}

/* ---------- Logo lockup --------------------------------------------------- */

.logo {
  display: inline-block;
  aspect-ratio: 465 / 165;
  height: 1em;
  background: currentColor;
  -webkit-mask: url("assets/biow-logo.webp") center / contain no-repeat;
  mask: url("assets/biow-logo.webp") center / contain no-repeat;
}
.lockup { display: inline-flex; align-items: center; gap: 0.32em; color: var(--ink); }
.lockup .logo { height: 0.78em; transform: translateY(0.03em); }
.lockup__model {
  font-weight: 900; color: var(--navy);
  letter-spacing: -0.02em; line-height: 1;
}

/* ---------- Buttons ------------------------------------------------------- */

.btn {
  --h: 50px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--h); padding: 0 24px;
  border: 0; border-radius: 999px;
  font: 700 1rem/1 "Lato", system-ui, sans-serif; letter-spacing: 0.005em;
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 160ms var(--ease-press), background-color 200ms ease, box-shadow 200ms ease;
}
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn:active { transform: scale(0.97); transition-duration: 80ms; }

.btn--primary {
  background: var(--navy); color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 8px 24px -10px rgba(46, 71, 96, 0.55);
}
.btn--primary:active { background: var(--navy-press); }
.btn--primary .btn__arrow { transition: transform 260ms var(--ease-out); }

.btn--link { --h: 44px; padding: 0 4px; background: none; color: var(--navy); }
.btn--link .btn__chev { width: 14px; height: 14px; transition: transform 260ms var(--ease-out); }

.btn--sm { --h: 40px; padding: 0 18px; font-size: 0.9375rem; }
.btn--block { width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--navy-press); }
  .btn--primary:hover .btn__arrow { transform: translateX(3px); }
  .btn--link:hover .btn__chev { transform: translateX(3px); }
}

/* ---------- Nav (translucent material) ------------------------------------ */

.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: calc(var(--nav-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: rgba(244, 245, 246, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: box-shadow 300ms ease, background-color 300ms ease;
}
.nav.is-scrolled { box-shadow: 0 1px 0 var(--line); background: rgba(244, 245, 246, 0.82); }
.nav__inner {
  height: var(--nav-h); max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
}
.nav__brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-height: 44px; }
.nav__brand .logo { height: 23px; color: var(--ink); }
.nav__model { font-weight: 900; font-size: 1.0625rem; color: var(--navy); letter-spacing: -0.01em; }
.nav__cta {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px;
  border-radius: 999px; background: var(--navy); color: #fff;
  font-size: 0.8125rem; font-weight: 700; text-decoration: none;
  position: relative;
  transition: transform 160ms var(--ease-press), background-color 200ms ease;
}
.nav__cta::after { content: ""; position: absolute; inset: -6px -4px; } /* 44px hit target */
.nav__cta:active { transform: scale(0.96); background: var(--navy-press); }
.nav__actions { display: flex; align-items: center; gap: 8px; }
/* Phone CTA: header on wide screens only (phones have it in the bottom dock). */
.nav__cta--call { display: none; gap: 6px; padding: 0 14px 0 11px; background: var(--ink); }
.nav__cta--call:active { background: #000; }
.nav__cta--call svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
@media (min-width: 900px) {
  .nav__cta--call { display: inline-flex; }
}
@media (hover: hover) {
  .nav__cta:hover { background: var(--navy-press); }
  .nav__cta--call:hover { background: #000; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Text reveal primitives ---------------------------------------- */

/* Words rise from behind a mask. Split by main.js. */
.w { display: inline-block; overflow: clip; overflow-clip-margin: 0.12em; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.w > span { display: inline-block; }

.js [data-split] .w > span {
  transform: translateY(105%);
  transition: transform 1000ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms + var(--d, 0ms));
}
.js [data-split].is-in .w > span { transform: none; }

.js [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity 900ms var(--ease-out), transform 1000ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

.js [data-load] {
  opacity: 0; transform: translateY(16px);
  transition: opacity 1000ms var(--ease-out), transform 1100ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .is-loaded [data-load] { opacity: 1; transform: none; }

/* ==========================================================================
   1 · Hero — pinned. The claim sits on the photograph's white wall; while
   the stage is held, the light moves word by word and the camera eases in.
   ========================================================================== */

.hero { position: relative; height: 165svh; --p: 0; --z: 0; --m: 1; --o0: 1; --o1: 1; --o2: 1; }
.hero__stage {
  position: sticky; top: 0; height: 100svh; height: 100dvh; overflow: hidden; /* follows the browser bars */
  display: flex; flex-direction: column;
  background: #fff; /* matches the top of the photograph */
}

.hero__copy {
  position: relative; z-index: 1; width: 100%;
  max-width: var(--max); margin-inline: auto;
  padding: calc(var(--nav-h) + env(safe-area-inset-top) + clamp(12px, 3svh, 44px)) var(--gutter) 0;
}
/* Phones: whatever height is left over is shared above and below the copy,
   so tall and short screens both read as one composed frame. */
/* Tall phones have room for the second action, and a touch more type. */
@media (max-width: 899px) and (min-height: 740px) {
  .hero .hero__actions { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hero .hero__actions .btn--link { margin-left: -4px; }
  .hero__actions .btn--link { display: inline-flex; }
}
@media (max-width: 899px) {
  .hero__copy { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding-bottom: clamp(8px, 2svh, 24px); }
}

.claim {
  margin-top: clamp(14px, 2.4svh, 24px);
  font-size: clamp(2.125rem, min(11.5vw, 5.6svh), 4rem);
  font-weight: 700; line-height: 0.98; letter-spacing: -0.045em;
  display: flex; flex-direction: column;
}
.claim__w { display: block; opacity: var(--o); }
.claim__w > span { display: inline-block; }

.js .claim__w > span {
  opacity: 0; transform: translateY(0.32em); filter: blur(12px);
  transition: opacity 1100ms var(--ease-out), transform 1300ms var(--ease-out), filter 1100ms var(--ease-out);
  transition-delay: calc(140ms + var(--i) * 190ms);
}
.js .is-loaded .claim__w > span { opacity: 1; transform: none; filter: none; }

.hero__meta {
  opacity: var(--m);
  transform: translateY(calc((1 - var(--m)) * -10px));
}
.hero__lede { margin-top: clamp(10px, 2svh, 22px); color: var(--ink-2); font-size: clamp(1.125rem, min(5.9vw, 2.7svh), 1.375rem); line-height: 1.3; letter-spacing: -0.012em; max-width: 24ch; text-wrap: pretty; }
.hero__actions { margin-top: clamp(12px, 2.4svh, 24px); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }

/* Photograph: anchored to the bottom, framed so both the device and the woman
   stay in shot. Its top edge dissolves into the white stage. */
.hero__visual {
  --zoom: 0.24;
  position: relative; flex: 1 1 auto; min-height: 0; order: 2;
  flex: 0 1 auto; height: min(98vw, 60svh); margin-top: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%);
  /* Grows from the floor up into the space the secondary copy leaves behind. */
  transform-origin: 46% 100%;
  transform: scale(calc(1 + var(--z) * var(--zoom)));
  will-change: transform;
}
.hero__visual img {
  width: 100%; height: 100%; object-fit: cover; object-position: 34% 100%;
}
.js .hero__visual img { opacity: 0; transition: opacity 1400ms var(--ease-out) 60ms; }
.js .is-loaded .hero__visual img { opacity: 1; }

@media (max-width: 899px) and (max-height: 739.98px) {
  .hero__actions .btn--link { display: none; } /* short phones: the scroll itself does this job */
}
/* Phones: the photo rises a little into the copy's bottom padding (its top edge
   is the faded wall), so it reads closer to the actions without touching them. */
@media (max-width: 899px) {
  .hero__visual { height: calc(min(98vw, 60svh) + 32px); margin-top: -32px; }
  .hero__visual img { object-position: 39% 100%; }
}


/* ==========================================================================
   2 · Statement — words light up as they pass through the viewport.
   ========================================================================== */

.statement {
  background: var(--linen); color: var(--ink);
  padding: 72px 0 64px;
  --q: 0;
}
.statement__text {
  font-size: clamp(2.125rem, 8.6vw, 3.5rem);
  font-weight: 700; line-height: 1.16; letter-spacing: -0.025em;
  max-width: 22ch; text-wrap: pretty;
}
.statement__text .sw {
  opacity: clamp(0.2, calc((var(--q) * var(--n) - var(--i)) * 0.9 + 0.2), 1);
}
.statement__sub {
  margin-top: 36px;
  font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.4; color: var(--ink-2);
  letter-spacing: -0.01em; text-wrap: balance;
}

/* ==========================================================================
   3 · Patent — pinned, fully scroll-linked.
   --a  the head fades in and settles at the optical centre of the stage.
   --b  once it is fully visible, it rises to make room for the claim.
   --c1..3  the claim's lines arrive one after another underneath.
   --shift  half the claim block's height (measured), so the head reads as
            centred while the claim is still absent.
   ========================================================================== */

/* Phones: the section simply flows and animates as it passes (no pin, so no
   empty viewport above and below the head). Wide screens pin it below. */
.patent {
  position: relative; background: #fff;
  --p: 0; --a: 0; --b: 0; --c1: 0; --c2: 0; --c3: 0; --shift: 0px;
}
.patent__stage {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px;
  padding: 48px 0 56px;
}
.patent__visual {
  width: 100%;
  opacity: var(--a);
  transform:
    translateY(calc((1 - var(--b)) * var(--shift) + (1 - var(--a)) * 8svh))
    scale(calc(0.9 + var(--a) * 0.1));
  will-change: transform, opacity;
}
.patent__img {
  width: 100%; height: auto;
  /* The stand dissolves into the page instead of being cropped. */
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
}
.patent__copy { display: grid; gap: 12px; justify-items: center; text-align: center; }
.patent__line {
  opacity: var(--c);
  transform: translateY(calc((1 - var(--c)) * 28px));
}
.patent__copy .h2 { max-width: 18ch; }
.patent__note { margin-top: 4px; max-width: 32ch; font-size: 0.9375rem; color: var(--ink-3); text-wrap: balance; }


/* ==========================================================================
   3a · How it works — title and text, then the bedroom photo, which settles
   from a slight zoom as it crosses the viewport (--k).
   ========================================================================== */

.how { background: var(--paper); padding: 64px 0; --k: 0; }
.how__head { display: grid; gap: 16px; }
.how__title { display: grid; gap: 12px; }
.how__title .h2 { max-width: 20ch; }
.how__media {
  margin: 32px var(--gutter) 0; aspect-ratio: 16 / 10; border-radius: 28px; overflow: hidden;
  background: #1d2433;
  isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.how__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transform: scale(calc(1.08 - var(--k) * 0.08)); transform-origin: 50% 50%;
  will-change: transform;
}

/* ==========================================================================
   3a+ · Specs — exploded view left, compact data table right
   ========================================================================== */

.specs { background: #fff; padding: 64px 0; }
.specs__grid { display: grid; gap: 32px; align-items: center; }
.specs__media { margin: 0 auto; width: min(82vw, 380px); }
.specs__media img { display: block; width: 100%; height: auto; }
.specs__body { display: grid; gap: 18px; }
.specs__list { margin: 0; border-top: 1px solid var(--ink); }
.specs__list > div {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  font-size: 0.875rem; line-height: 1.4;
}
.specs__list dt { color: var(--ink-2); }
.specs__list dd { margin: 0; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.specs__list sup { font-size: 0.7em; line-height: 0; }
.specs__list .specs__group { grid-template-columns: 1fr; padding-top: 22px; }
.specs__list .specs__group dt { color: var(--ink); font-weight: 900; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
@media (min-width: 900px) {
  .specs { padding: clamp(96px, 14svh, 140px) 0; }
  .specs__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 6vw, 96px); }
  .specs__media { width: 100%; max-width: 480px; margin: 0; }
  .specs__list > div { padding: 14px 0; font-size: 0.9375rem; }
}

/* ==========================================================================
   3b · Habitats — photographs only. Each card writes its own scroll progress:
   --r  rise + fade in, --k  the photo settles from a slight zoom.
   Staggered by data-i on wide screens.
   ========================================================================== */

.habitats {
  background: #fff;
  padding: 32px 0 64px;
}
.habitats__head { display: grid; gap: 12px; margin-bottom: 28px; }
.habitats__head .h2 { max-width: 15ch; }
.habitats__lede { max-width: 62ch; }
/* Same scale as "Sencillo. Continuo." further down, so the section reads as one voice. */
.h2--sm { font-size: clamp(2rem, 8.2vw, 2.75rem); line-height: 1.08; }

.habitats__grid { display: grid; gap: 16px; }
.habitat {
  --r: 0; --k: 0;
  position: relative; display: grid;
  opacity: var(--r);
  transform: translateY(calc((1 - var(--r)) * 56px)) scale(calc(0.96 + var(--r) * 0.04));
  will-change: transform, opacity;
}
.habitat__media {
  aspect-ratio: 5 / 4; border-radius: 28px; overflow: hidden;
  background: var(--mist);
  /* Safari: keep the rounded clip while the image transforms. */
  isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.habitat__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(calc(1.14 - var(--k) * 0.14));
  will-change: transform;
}
.habitat__name {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.005em; color: var(--ink);
}
/* Description inside the card, over a soft dark fade at the foot of the photo.
   Its left edge sits on the same line as the name's text. */
.habitat__media { position: relative; }
.habitat__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 18, 26, 0) 38%, rgba(10, 18, 26, 0.3) 62%, rgba(10, 18, 26, 0.68) 100%);
}
.habitat__text {
  --inset: 28px;                       /* name pill: 14px offset + 14px padding */
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  margin: 0; padding: 0 var(--inset) 22px;
  text-align: left; text-wrap: pretty;
  font-size: 0.875rem; line-height: 1.45; color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}
.habitat__text strong { display: block; margin-bottom: 4px; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; color: #fff; }




/* Night card — same width as the habitat grid. On a phone the photo sits on
   top and the copy continues below on the room's own dark tone; on wide
   screens the copy lies over the photo. The photo settles from a zoom (--k). */
.night {
  --k: 0;
  position: relative; margin-top: 28px;
  border-radius: 28px; overflow: hidden; isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  background: #1d1a17; color: #fff;
}
.night__media { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.night__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  transform: scale(calc(1.12 - var(--k) * 0.12)); transform-origin: 50% 60%;
  will-change: transform;
}
.night__copy {
  position: relative; display: grid; gap: 14px;
  padding: 4px 24px 32px; margin-top: -48px;
  background: linear-gradient(to bottom, rgba(29, 26, 23, 0), #1d1a17 48px);
  padding-top: 52px;
}
.night__title {
  font-size: clamp(2rem, 8.2vw, 2.75rem); font-weight: 700; line-height: 1.08;
  letter-spacing: -0.03em; text-wrap: balance; max-width: 14ch;
}
.night__text { font-size: 1.0625rem; line-height: 1.5; color: rgba(255, 255, 255, 0.78); text-wrap: pretty; max-width: 40ch; }


/* ==========================================================================
   4 · Wellbeing — photograph left, copy right. The photo settles from a slight
   zoom as it crosses the viewport (--k), the copy arrives line by line.
   ========================================================================== */

.wellbeing {
  background: var(--linen);
  padding: 64px 0;
  --k: 0;
}
.wellbeing__grid { display: grid; gap: 32px; }
.wellbeing__media {
  margin: 0; aspect-ratio: 1; border-radius: 28px; overflow: hidden;
  background: var(--sand);
  isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.wellbeing__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(calc(1.12 - var(--k) * 0.12));
  will-change: transform;
}
.wellbeing__copy { display: grid; gap: 16px; }
.wellbeing__copy .h2 { max-width: 18ch; margin-bottom: 4px; }
.wellbeing__copy .lede { max-width: 40ch; }
.wellbeing__close {
  margin-top: 12px; padding-top: 20px; border-top: 1px solid rgba(27, 36, 45, 0.12);
  font-size: clamp(1.125rem, 4.2vw, 1.375rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3;
  color: var(--navy); max-width: 28ch;
}


/* Three technologies under the photo. Each tile writes its own progress (--t):
   it rises in, and its icon draws itself stroke by stroke. */
.tech { display: grid; gap: 12px; margin-top: 40px; }
.tech__tile {
  --t: 0;
  display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 18px;
  padding: 16px 20px 16px 16px; border-radius: 24px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 12px 32px -18px rgba(27, 36, 45, 0.28);
  opacity: var(--t);
  transform: translateY(calc((1 - var(--t)) * 40px)) scale(calc(0.97 + var(--t) * 0.03));
}
.tech__icon {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; grid-row: span 2;
  background: radial-gradient(circle at 50% 40%, rgba(58, 87, 116, 0.14), rgba(58, 87, 116, 0.05) 70%);
}
.tech__icon svg {
  width: 36px; height: 36px; fill: none; stroke: var(--navy); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transform: rotate(calc((1 - var(--t)) * -30deg));
}
/* pathLength="1" on every shape, so the draw is a single 0→1 offset. */
.tech__icon svg * { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t)); }
.tech__name { align-self: end; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3; }
.tech__benefit {
  grid-column: 2; margin-top: -14px; align-self: start;
  font-size: 1rem; line-height: 1.4; color: var(--ink-2); text-wrap: pretty;
  opacity: calc(var(--t) * 1.4 - 0.4);
}
.tech__note { margin-top: 24px; color: var(--ink-3); font-size: 0.9375rem; text-align: center; }


/* ==========================================================================
   5 · Life
   ========================================================================== */

.life { background: var(--paper); padding-top: 64px; --p: 0; }
.life__head { display: grid; gap: 16px; }
.life__head .h2 { max-width: 14ch; }
.life__brand { display: block; margin-bottom: 10px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; color: var(--navy); }
.life__claim { display: block; }
.life__media {
  margin: 32px var(--gutter) 0;
  aspect-ratio: 3 / 2; border-radius: 28px; overflow: hidden;
  max-width: calc(var(--max) - 2 * var(--gutter));
}
.life__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%;
  transform-origin: 100% 50%; /* keep the device in frame on narrow crops */
  transform: translateY(calc((var(--p) - 0.5) * -8%)) scale(1.14);
  will-change: transform;
}

/* ==========================================================================
   5b · Press — quiet trust strip, not links
   ========================================================================== */

.press { background: var(--paper); padding: 56px 0 16px; }
.press__title { text-align: center; }
.press__list {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; justify-items: center;
  row-gap: 28px; column-gap: 16px;
}
.press__list li { display: flex; align-items: center; justify-content: center; min-height: 40px; grid-column: span 2; }
/* 5 logos: 3 arriba y 2 centrados debajo */
.press__list li:nth-child(4) { grid-column: 2 / 4; }
.press__list li:nth-child(5) { grid-column: 4 / 6; }
.press__list img {
  display: block; width: auto; max-width: 100%;
  height: calc(var(--h) * 0.95px);
  opacity: 0.62; user-select: none; -webkit-user-drag: none; pointer-events: none;
}
@media (min-width: 900px) {
  .press { padding: 88px 0 24px; }
  .press__list { grid-template-columns: repeat(5, auto); justify-content: space-between; margin-top: 32px; column-gap: 40px; }
  .press__list li, .press__list li:nth-child(n) { grid-column: auto; }
  .press__list img { height: calc(var(--h) * 1px); }
}

/* ==========================================================================
   6 · Contact
   ========================================================================== */

.contact {
  background: linear-gradient(180deg, var(--paper) 0%, var(--mist) 100%);
  padding: 56px 0 64px;
}
.contact__grid { display: grid; gap: 32px; }
.contact__intro { display: grid; gap: 14px; }

/* Purchase conditions — quiet reassurance next to the form. */
.perks { display: grid; gap: 4px; margin-top: 18px; border-top: 1px solid var(--line); padding-top: 18px; }
.perks__item {
  display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 14px;
  min-height: 48px; font-size: 1rem; line-height: 1.35; color: var(--ink); text-wrap: pretty;
}
.perks__icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(58, 87, 116, 0.08);
}
.perks__icon svg {
  width: 20px; height: 20px; fill: none; stroke: var(--navy); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.form {
  position: relative; display: grid;
  background: var(--white); border-radius: 28px;
  padding: 28px 20px 24px;
  box-shadow: 0 1px 2px rgba(27, 36, 45, 0.04), 0 30px 60px -30px rgba(27, 36, 45, 0.22);
}
.form__body, .form__done { grid-area: 1 / 1; }
.form__body { display: grid; gap: 18px; transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out); }

.field { display: grid; gap: 6px; }
.field label { font-size: 0.8125rem; font-weight: 700; color: var(--ink-2); letter-spacing: 0.01em; }
.form__row { display: grid; gap: 18px; }
.req { color: var(--navy); font-weight: 700; }
.form__legend { font-size: 0.8125rem; color: var(--ink-3); text-align: center; margin-top: -4px; }

.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 0 16px;
  border: 1px solid transparent; border-radius: 14px;
  background: #f1f3f5; color: var(--ink);
  font: 400 1.0625rem/1 "Lato", system-ui, sans-serif; /* ≥16px avoids iOS zoom */
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 104px; padding: 14px 16px; line-height: 1.45; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #9aa3ad; }
.select { position: relative; }
.select::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 1.6px solid var(--ink-2); border-bottom: 1.6px solid var(--ink-2);
  transform: rotate(45deg); pointer-events: none;
}
.field select { padding-right: 44px; cursor: pointer; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: #fff; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(58, 87, 116, 0.14); }
.field input[aria-invalid="true"] { border-color: var(--danger); background: #fff; }
.field__error { min-height: 0; font-size: 0.8125rem; color: var(--danger); }
.field__error:empty { display: none; }

.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; cursor: pointer; padding-block: 4px; }
.check input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; }
.check__box {
  width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid rgba(27, 36, 45, 0.28);
  display: grid; place-items: center; background: #fff;
  transition: background-color 180ms ease, border-color 180ms ease, transform 140ms var(--ease-press);
}
.check__box svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset 260ms var(--ease-out); }
.check input:checked + .check__box { background: var(--navy); border-color: var(--navy); }
.check input:checked + .check__box svg { stroke-dashoffset: 0; }
.check input:focus-visible + .check__box { outline: 2px solid var(--navy); outline-offset: 3px; }
.check:active .check__box { transform: scale(0.92); }
.check__text { font-size: 0.875rem; color: var(--ink-2); line-height: 1.45; }

.btn__spinner {
  display: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
  animation: spin 700ms linear infinite;
}
.form.is-sending .btn__spinner { display: inline-block; }
.form.is-sending .btn__label { opacity: 0.7; }
@keyframes spin { to { transform: rotate(360deg); } }

.form__done {
  display: grid; align-content: center; justify-items: center; gap: 8px; text-align: center;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out), visibility 0s 500ms;
}
.form__done:focus { outline: none; }
.form__done-icon { width: 56px; height: 56px; fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 8px; }
.form__done-icon * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.form__done-title { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
.form__done-text { color: var(--ink-2); max-width: 28ch; }

.form.is-done .form__body { opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden; transition-property: opacity, transform, visibility; transition-delay: 0s, 0s, 400ms; }
.form.is-done .form__done { opacity: 1; visibility: visible; transform: none; transition-delay: 180ms, 180ms, 0s; }
.form.is-done .form__done-icon circle { stroke-dashoffset: 0; transition: stroke-dashoffset 800ms var(--ease-io) 260ms; }
.form.is-done .form__done-icon path { stroke-dashoffset: 0; transition: stroke-dashoffset 500ms var(--ease-out) 900ms; }

/* ---------- Footer -------------------------------------------------------- */

.footer { background: var(--mist); border-top: 1px solid var(--line); padding: 40px 0 calc(env(safe-area-inset-bottom) + 110px); }
.footer__inner { display: grid; gap: 14px; }
.lockup--footer { font-size: 1.5rem; }
.footer__awards { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; align-items: center; justify-content: flex-start; gap: 20px; }
.footer__awards img { display: block; width: auto; height: 76px; }
.footer__note, .footer__copy { font-size: 0.8125rem; color: var(--ink-3); }
.footer__links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer__links a { font-size: 0.875rem; color: var(--ink-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- Dock: floating CTA on mobile ---------------------------------- */

.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 0 12px calc(env(safe-area-inset-bottom) + 12px);
  pointer-events: none;
}
.dock__inner {
  max-width: 480px; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 0 0 1px rgba(27, 36, 45, 0.06), 0 16px 40px -16px rgba(27, 36, 45, 0.35);
  opacity: 0; transform: translateY(calc(100% + 24px)) scale(0.96);
  transition: opacity 360ms var(--ease-out), transform 560ms var(--ease-out);
}
.dock.is-visible { pointer-events: auto; }
.dock.is-visible .dock__inner { opacity: 1; transform: none; }
.dock__label { font-size: 0.875rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock__label strong { color: var(--navy); font-weight: 900; }
.dock__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
/* Phone CTA: free-phone number, one tap to call. */
.dock__call {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 12px;
  border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.005em; white-space: nowrap;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: transform 140ms var(--ease-press), background-color 200ms var(--ease-out);
}
.dock__call:active { transform: scale(0.97); background: #000; }
.dock__call:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dock__call svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
/* Narrow phones: the number and the main CTA take the whole bar. */
@media (max-width: 439px) {
  .dock__label { display: none; }
  .dock__inner { padding-left: 8px; }
  .dock__actions { flex: 1; justify-content: space-between; }
}

@media (prefers-reduced-transparency: reduce) {
  .dock__inner { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ==========================================================================
   ≥ 900px
   ========================================================================== */

@media (min-width: 900px) {
  /* Section rhythm: generous on large screens, compact on phones (base rules). */
  .how { padding: clamp(96px, 14svh, 140px) 0; }
  .how__head { grid-template-columns: 1.1fr 1fr; align-items: end; gap: 40px; }
  .how__title .h2 { max-width: 22ch; }
  .how__media { aspect-ratio: 1672 / 820; margin: clamp(40px, 7svh, 64px) auto 0; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--max) - 2 * var(--gutter)); }
  .how__media img { object-position: 50% 50%; transform-origin: 50% 50%; }

  .statement { padding: clamp(96px, 22svh, 200px) 0 clamp(96px, 20svh, 180px); }
  .patent { height: 160svh; } /* the head now arrives during the entry, so less pin is needed */
  .patent__stage {
    position: sticky; top: 0; height: 100svh;
    justify-content: flex-start; /* head sits just under the nav: no white band above it */
    gap: clamp(20px, 4svh, 44px);
    padding: calc(var(--nav-h) + env(safe-area-inset-top) + clamp(12px, 2.5svh, 32px)) 0 calc(env(safe-area-inset-bottom) + var(--dock-h));
  }
  .habitats { padding: clamp(48px, 8svh, 96px) 0 clamp(96px, 16svh, 160px); }
  .habitats__head { margin-bottom: clamp(32px, 6svh, 56px); }
  .wellbeing { padding: clamp(96px, 16svh, 160px) 0; }
  .wellbeing__grid { gap: clamp(40px, 7svh, 56px); }
  .tech { margin-top: clamp(56px, 9svh, 96px); }
  .life { padding-top: clamp(96px, 16svh, 160px); }
  .life__media { margin-top: clamp(40px, 7svh, 64px); }
  .contact { padding: clamp(40px, 8svh, 80px) 0 clamp(96px, 14svh, 140px); }

  :root { --gutter: 40px; --nav-h: 56px; --dock-h: 32px; }

  .claim { flex-direction: row; flex-wrap: wrap; column-gap: 0.26em; font-size: clamp(2.25rem, min(3.6vw, 5.6svh), 4.5rem); max-width: 10em; margin-top: 0; } /* two lines, as before */
  .hero__lede { font-size: clamp(1.25rem, 3svh, 1.75rem); letter-spacing: -0.018em; max-width: 30ch; }
  .hero__copy { padding-top: calc(var(--nav-h) + env(safe-area-inset-top) + clamp(12px, 2svh, 28px)); }
  /* Scaled as one block by main.js (fitHero) to the room the photo leaves. */
  .hero .claim, .hero .hero__meta { zoom: var(--hz, 1); }
  .hero__visual { --zoom: 0.06; position: absolute; inset: 0; height: auto; max-height: none; margin: 0; -webkit-mask-image: none; mask-image: none; }
  /* Panoramic windows crop the photo: take a little of it from the floor too,
     so the product sits lower and never under the copy. */
  .hero__visual img { object-position: 50% 85%; }

  .patent__visual { width: min(1040px, 80vw, 98svh); } /* leaves room for the claim on short screens */
  .patent__copy .h2 { max-width: 30ch; }


  .life__head { grid-template-columns: 1.1fr 1fr; align-items: end; gap: 40px; }
  /* Two-column heads: the text column runs to the block's right edge, the same
     line the photo below ends on. */
  .how__head .lede, .life__head .lede { max-width: none; }
  .life__media { aspect-ratio: 1671 / 820; margin-inline: auto; width: calc(100% - 2 * var(--gutter)); }
  .life__media img { object-position: 50% 50%; transform-origin: 75% 50%; }

  .habitats__head .h2 { max-width: 20ch; }
  .habitats__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .habitat__media { aspect-ratio: 640 / 832; }
  .habitat__name { top: 18px; left: 18px; }
  .habitat__text { --inset: 32px; padding-bottom: 30px; font-size: 0.9375rem; }
  .habitat__text strong { font-size: 1.125rem; }
  .night { margin-top: 20px; }
  .night__media { aspect-ratio: 1672 / 941; }
  .night__copy {
    position: absolute; inset: auto 0 0 0; margin: 0;
    padding: 120px 48px 44px 52%; /* right half, over the bed: the device stays clear */
    background: linear-gradient(to top, rgba(18, 16, 14, 0.82), rgba(18, 16, 14, 0.4) 55%, rgba(18, 16, 14, 0));
  }
  .night__title { max-width: 16ch; }
  .night__text { max-width: 44ch; }
  .statement__sub { white-space: nowrap; }

  .wellbeing__grid { grid-template-columns: 1fr 1fr; align-items: center; column-gap: clamp(48px, 6vw, 96px); }
  .wellbeing__copy .lede { font-size: 1.0625rem; }
  .wellbeing__copy .h2 { max-width: 20ch; }
  .tech { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .tech__tile { grid-template-columns: 1fr; justify-items: center; align-content: start; text-align: center; gap: 22px; padding: 40px 24px 36px; border-radius: 28px; }
  .tech__name { align-self: auto; } /* same start line in all three cards */
  .tech__icon { width: 96px; height: 96px; grid-row: auto; }
  .tech__benefit { grid-column: auto; margin-top: -12px; font-size: 1.0625rem; }
  .tech__icon svg { width: 48px; height: 48px; }


  .form__row { grid-template-columns: 1fr 1fr; gap: 16px; }
  .contact__grid { grid-template-columns: 1fr 540px; align-items: center; column-gap: 64px; }
  .form { padding: 36px 32px 32px; }

  .footer { padding-bottom: 48px; }
  .footer__inner { grid-template-columns: auto 1fr auto; align-items: center; column-gap: 32px; }
  .footer__copy { grid-column: 1 / -1; }
  .footer__awards { grid-column: 1; grid-row: 2; margin: 8px 0; }
  .footer__awards img { height: 84px; }

  .dock { display: none; }
}

/* ==========================================================================
   Reduced motion: keep the content, drop the travel.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hero, .patent { height: auto; }
  .hero__stage, .patent__stage { position: relative; height: auto; min-height: 100svh; }
  .hero__stage { min-height: 0; height: 100svh; }
  .hero__visual { transform: none; }
  .claim__w { opacity: 1; }
  .js .claim__w > span { transform: none; filter: none; transition: opacity 400ms ease; }
  .js .hero__visual { transform: none; }
  .patent { --a: 1; --b: 1; --c1: 1; --c2: 1; --c3: 1; }
  .life__media img { transform: none; }
  .statement__text .sw { opacity: 1; }
  .habitat { --r: 1 !important; --k: 1 !important; }
  .wellbeing__media, .night { --k: 1 !important; }
  .tech__tile { --t: 1 !important; }
  .how { --k: 1 !important; }

  .js [data-split] .w > span, .js [data-reveal], .js [data-load] { transform: none; transition: opacity 300ms ease; }
  .js [data-split] .w > span { transition: none; }
  .dock__inner { transform: none; transition: opacity 200ms ease; }
}