html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-x: hidden;
  background: #c2ccd3;
  color: #000;
  font-family: 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* single-screen page: kill iOS rubber-banding and tap flashes */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

/* pinning the body is the only reliable way to stop iOS Safari from
   rubber-banding a overflow:hidden page */
body { position: fixed; inset: 0; }

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

/* ---------- Background video ---------- */

.bg-video {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
}

/* ---------- Glass filter defs ---------- */

.glass-defs { position: absolute; width: 0; height: 0; pointer-events: none; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  color: #000;
  pointer-events: none; /* only interactive children opt back in */
}

.icon { flex: none; }

/* ---------- Vertical rules (≥768px) ---------- */

.rule {
  position: absolute;
  top: 0;
  bottom: 0;
  display: none;
  flex-direction: column;
  align-items: center;
}
.rule--left  { left: 1.25rem; }
.rule--right { right: 1.25rem; }
.rule__seg { width: 1px; background: rgba(0, 0, 0, 0.2); }
.rule__seg--end { height: 15%; }
.rule__seg--mid { flex: 1 1 0%; }
.rule__plus {
  font-size: 0.75rem;
  line-height: 1;
  color: rgba(0, 0, 0, 0.4);
  padding: 0.25rem 0;
}
@media (min-width: 768px) { .rule { display: flex; } }

/* ---------- Navbar ---------- */

.nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem;
}
.nav__item {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: #000;
  background: none;
  border: 0;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transition: opacity 300ms;
}
.nav__item:hover { opacity: 0.6; }
.nav__label { font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0.025em; }
.nav__label--menu { display: none; } /* hamburger is icon-only on mobile */
.nav__dot { width: 8px; height: 8px; border-radius: 9999px; background: #000; }

@media (min-width: 640px) {
  .nav { padding: 1.25rem 1.5rem; }
  .nav__label--menu { display: inline; }
}
@media (min-width: 768px) { .nav { padding: 1.5rem 3rem; } }

/* ---------- Bottom row ---------- */

.hero-bottom {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0 1.25rem 1.5rem;
}
@media (min-width: 640px) { .hero-bottom { padding: 0 1.5rem 2rem; } }
@media (min-width: 768px) {
  .hero-bottom {
    flex: 1;
    margin-top: 0;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 3rem;
    padding: 2rem 3rem 3rem;
  }
  .lede { align-self: flex-start; } /* copy pinned top-left */
  .card { align-self: flex-end; }   /* card pinned bottom-right */
}

/* ---------- Lede ---------- */

.lede { max-width: 24rem; }
.lede__title {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: #000;
}
.lede__body {
  margin-top: 0.75rem;
  max-width: 280px;
  font-size: 0.75rem;
  line-height: 1.625;
  color: rgba(0, 0, 0, 0.6);
}

@media (min-width: 640px)  { .lede__title { font-size: 1.5rem; }   .lede__body { font-size: 0.875rem; } }
@media (min-width: 768px)  { .lede__title { font-size: 1.875rem; } .lede__body { margin-top: 1rem; } }
@media (min-width: 1024px) { .lede__title { font-size: 2.25rem; } }

/* ---------- Chamfered button ---------- */

.chamfer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 220px;
  height: 44px;
  margin-top: 1.5rem;
  padding: 0 1.25rem;
  color: #000;
  text-decoration: none;
  pointer-events: auto;
  transition: opacity 300ms;
}
.chamfer:hover { opacity: 0.7; }

/* mobile-only frosted backing, clipped to the same chamfer silhouette */
.chamfer__glass {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.2);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.chamfer__outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chamfer__label { position: relative; font-size: 0.75rem; letter-spacing: 0.025em; }
.chamfer .icon { position: relative; }

@media (min-width: 640px) {
  .chamfer { width: 260px; height: 48px; padding: 0 1.5rem; }
  .chamfer__label { font-size: 0.875rem; }
  .chamfer__glass {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: transparent;
  }
}
@media (min-width: 768px) { .chamfer { margin-top: 2rem; } }

/* ---------- Glass card ---------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 340px;
  max-width: 100%;
  height: 460px;
  padding: 2rem;
  border-radius: 48px;
  overflow: hidden;          /* clips the duplicate to the card */
  background: transparent;   /* the refraction IS the fill */
  border: 1px solid rgba(47, 47, 47, 0.15);
  pointer-events: auto;
  animation: fade-slide-up-card 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes fade-slide-up-card {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* full-viewport-aligned copy of the backdrop; left/top/width/height are written every frame by glass-card.js */
#dup-video-container {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
#dup-image {
  position: absolute;
  left: 0;
  top: 0;
  filter: url(#liquid-glass-refraction);
  /* CSS size, transform and backing-store size are driven by glass-card.js:
     the element is card-sized (+GAP) and, on phones, rendered at half
     resolution and scaled up — that is what keeps the per-frame filter cheap */
}

.card__frost {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 48px;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.3),
              inset 0 -1px 2px rgba(0, 0, 0, 0.15);
  transition: background 400ms;
}
.card.group:hover .card__frost { background: rgba(255, 255, 255, 0.1); }

.card__head, .card__body, .card__wave { position: relative; z-index: 2; }

.card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.card__title { font-size: 1rem; font-weight: 500; letter-spacing: -0.025em; }
.card__index { font-size: 0.75rem; color: rgba(0, 0, 0, 0.4); }
.card__body { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.finding__title { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.025em; }
.finding__text { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1.625; color: rgba(0, 0, 0, 0.5); }
.card__wave { display: block; width: 100%; height: auto; margin-top: 1.25rem; }

@media (min-width: 640px) { .card__title { font-size: 1.125rem; } }
@media (min-width: 768px) {
  .card__head { padding-bottom: 1rem; }
  .card__title { font-size: 1.25rem; }
  .card__body { gap: 1.25rem; margin-top: 1.25rem; }
  .finding__title { font-size: 1rem; }
  .finding__text { font-size: 0.875rem; margin-top: 0.375rem; }
  .card__wave { margin-top: 1.5rem; }
}

/* ---------- Menu ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 500ms;
}
.menu.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }

.menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 500ms;
}
.menu.is-open .menu__backdrop { opacity: 1; }

.menu__panel {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 1.5rem 2rem;
  background: #f5f4f0;
  transform: translateX(-100%);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.menu.is-open .menu__panel { transform: translateX(0); }
@media (min-width: 640px) { .menu__panel { width: 380px; padding: 1.5rem 2.5rem; } }

.menu__close {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  align-self: flex-start;
  margin-bottom: 3rem;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.875rem;
  color: #000;
  cursor: pointer;
  transition: opacity 300ms;
}
.menu__close:hover { opacity: 0.6; }

.menu__nav { display: flex; flex-direction: column; }
.menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #000;
  text-decoration: none;
  touch-action: manipulation;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms, transform 500ms;
}
.menu__linkText { font-size: 1.5rem; font-weight: 300; letter-spacing: -0.025em; transition: transform 300ms; }
.menu__link:hover .menu__linkText { transform: translateX(8px); }
.menu__arrow {
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 300ms, transform 300ms;
}
.menu__link:hover .menu__arrow { opacity: 1; transform: translateX(0); }
@media (min-width: 640px) { .menu__linkText { font-size: 1.875rem; } }

.menu.is-open .menu__link { opacity: 1; transform: translateY(0); }
.menu.is-open .menu__link:nth-child(1) { transition-delay: 150ms; }
.menu.is-open .menu__link:nth-child(2) { transition-delay: 225ms; }
.menu.is-open .menu__link:nth-child(3) { transition-delay: 300ms; }
.menu.is-open .menu__link:nth-child(4) { transition-delay: 375ms; }
.menu.is-open .menu__link:nth-child(5) { transition-delay: 450ms; }

.menu__foot {
  margin-top: auto;
  padding: 1.5rem 0 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms, transform 500ms;
}
.menu.is-open .menu__foot { opacity: 1; transform: translateY(0); transition-delay: 600ms; }
.menu__footLabel {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: rgba(0, 0, 0, 0.4);
}
.menu__mail {
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.7);
  text-decoration: none;
  transition: color 300ms;
}
.menu__mail:hover { color: #000; }

/* ---------- Mobile fixes ---------- */

/* Below 768px the card stacks under the copy: let it size to its content
   instead of the fixed 460px, and frost it harder so text stays legible
   over the bright video. The lede gets the same frosted backing as the
   chamfer button. */
@media (max-width: 767.98px) {
  .card {
    height: auto;
    min-height: 0;
    padding: 1.5rem;
    border-radius: 32px;
  }
  .card__frost {
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.28);
  }
  .card.group:hover .card__frost { background: rgba(255, 255, 255, 0.34); }
  .lede {
    max-width: 100%;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    /* no backdrop-filter here: it re-blurs the moving video every frame and
       lags phones badly — a stronger opaque fill reads the same */
    background: rgba(255, 255, 255, 0.55);
  }
  .lede__body { max-width: none; }
}

/* Short phones (iPhone SE class): the fixed-height card + copy can exceed
   the viewport, and the page never scrolls. Tighten spacing and drop the
   decorative wave so nothing is clipped. */
@media (max-width: 767.98px) and (max-height: 719px) {
  .card { padding: 1.25rem; }
  .card__wave { display: none; }
  .card__body { gap: 0.75rem; margin-top: 0.75rem; }
  .lede__body { font-size: 0.75rem; }
  .chamfer { margin-top: 1rem; height: 44px; }
}

/* Very short screens (320×568 class): squeeze the chrome so the card's
   bottom edge still clears the viewport. */
@media (max-width: 767.98px) and (max-height: 599px) {
  .nav { padding: 1rem 1.25rem; }
  .hero-bottom { gap: 1rem; padding: 0 1.25rem 1rem; }
  .lede { padding: 0.75rem 1rem; }
  .card { padding: 1rem; }
  .card__body { gap: 0.5rem; margin-top: 0.5rem; }
  .finding__text { font-size: 0.7rem; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}